/* =============================================================================
   Components — buttons, header, hero, cards, forms, footer, modals, etc.
   All styling composed from semantic tokens declared in base.css.
   Per-site overrides should go through those tokens, not by rewriting here.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Buttons & interactive controls
   ----------------------------------------------------------------------------- */

.btn {
  --btn-h: 52px;
  --btn-pad-x: 24px;
  --btn-radius: var(--radius-pill);
  --btn-font-size: var(--fs-btn);
  --btn-font-weight: var(--fw-bold);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  letter-spacing: var(--ls-btn);
  line-height: var(--lh-flat);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-contrast);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-contrast);
  box-shadow: var(--shadow-md);
}

.btn--primary:focus-visible {
  box-shadow: var(--shadow-sm), var(--focus-ring);
}

.btn--ghost {
  background: var(--surface-1);
  color: var(--text-strong);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-xs);
}

.btn--ghost:hover {
  color: var(--text-strong);
  background: var(--surface-2);
  border-color: var(--border-base);
  box-shadow: var(--shadow-sm);
}

.btn--accent-outline {
  background: transparent;
  color: var(--accent-strong);
  border: 1.5px solid rgba(17, 70, 116, 0.45);
}

.btn--accent-outline:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  --btn-h: 42px;
  --btn-pad-x: 18px;
  --btn-font-size: var(--fs-btn-sm);
  gap: 0.4rem;
}

/* Card primary CTA — between --sm (42/14) and default (52/16).
   Used for the main conversion button inside product / bike cards.
   Self-contained: do NOT combine with --sm or --lg. */
.btn--card-cta {
  --btn-h: 46px;
  --btn-pad-x: 20px;
  --btn-font-size: var(--fs-btn);
  --btn-font-weight: var(--fw-bold);
}

/* Icon-only circular controls — neutral, no scale, no colored glow */
.slider__btn,
.reviews-carousel__btn,
.clients-lightbox__close {
  --icon-btn-size: 46px;

  display: inline-grid;
  place-items: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-strong);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.slider__btn:hover:not(:disabled),
.reviews-carousel__btn:hover:not(:disabled),
.clients-lightbox__close:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border-base);
  box-shadow: var(--shadow-sm);
}

.slider__btn:focus-visible,
.reviews-carousel__btn:focus-visible,
.clients-lightbox__close:focus-visible {
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.slider__btn:disabled,
.reviews-carousel__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reviews-carousel__btn {
  font-size: 1.2rem;
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   2. Header & navigation
   ----------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border-soft);
  transition:
    background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.site-header .container {
  position: relative;
  z-index: 2;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: calc(var(--header-h) - 1px);
  padding-block: 8px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-logo);
  line-height: var(--lh-flat);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.logo:hover {
  color: var(--accent);
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-base);
  color: var(--accent);
  font-size: 1.25rem;
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.logo:hover .logo__mark {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.logo--image {
  line-height: 0;
}

.logo--image img {
  display: block;
  width: auto;
  height: 74px;
}

@media (max-width: 719px) {
  .site-header__inner {
    padding-block: 12px;
    min-height: 64px;
  }

  .logo--image img {
    height: 54px;
  }

  /* Mobile: отключаем overlay-вариант хедера. На узком экране эффект
     прозрачной шапки поверх hero вызывает рассинхрон transitions и
     jitter из-за position:sticky + backdrop-filter на iOS. Хедер всегда
     остаётся в solid-состоянии, без перехода. */
  .site-header--overlay {
    background: rgba(255, 255, 255, 0.84);
    border-bottom-color: var(--border-soft);
  }

  .site-header--overlay .logo,
  .site-header--overlay .logo span,
  .site-header--overlay .logo:hover,
  .site-header--overlay .logo:hover span {
    color: var(--text-strong);
    text-shadow: none;
  }

  .site-header--overlay .nav-desktop a {
    color: var(--text-base);
    text-shadow: none;
  }

  .site-header--overlay .btn--ghost {
    background: var(--surface-1);
    color: var(--text-strong);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-xs);
    text-shadow: none;
  }

  .site-header--overlay .nav-toggle {
    background: var(--surface-1);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header--overlay .nav-toggle span {
    background: var(--text-strong);
  }
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav-desktop a {
  position: relative;
  padding: 0.55rem 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-header-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-nav);
  color: var(--text-base);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.nav-desktop a:hover {
  color: var(--text-strong);
  background: var(--surface-2);
  border-color: var(--border-soft);
}

.nav-desktop a:focus-visible {
  color: var(--text-strong);
}

.nav-desktop a.is-active,
.nav-desktop a[aria-current="page"] {
  color: var(--accent-hover);
  background: var(--accent-soft);
  border-color: transparent;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-dropdown {
  position: relative;
}

.contact-dropdown__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  padding: var(--space-5) var(--space-5);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--motion-panel-offset-y));
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear var(--motion-panel-duration);
}

.contact-dropdown.is-open .contact-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear 0s;
}

.contact-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-header-contact);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lead);
  color: var(--text-base);
}

.contact-dropdown__item img,
.contact-dropdown__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.contact-dropdown__item--hours {
  padding-bottom: var(--space-3);
}

.contact-dropdown__item--hours span {
  position: relative;
}

.contact-dropdown__item--hours span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--space-3));
  width: 100%;
  height: 1px;
  background: var(--border-soft);
}

.contact-dropdown__item a {
  color: var(--text-base);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.contact-dropdown__item a:hover {
  color: var(--accent);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.nav-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-base);
  box-shadow: var(--shadow-sm);
}

.nav-toggle:focus-visible {
  box-shadow: var(--focus-ring);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--text-strong);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-standard);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -----------------------------------------------------------------------------
   Site header — overlay modifier (прозрачный хедер поверх cover-hero).
   Класс `.site-header--overlay` добавляется JS (`js/modules/header-transparency.js`),
   пока пользователь не проскроллил ниже hero. При открытой мобильной навигации
   mobile-nav.js ставит класс-флаг `.is-nav-open` на тот же <header>, и overlay
   откатывается к обычному белому состоянию — без `:has()`, чтобы гарантированно
   выигрывать в каскаде и не ломаться при livereload/инвалидации стилей.
   ----------------------------------------------------------------------------- */

.site-header--overlay {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header--overlay .logo,
.site-header--overlay .logo span {
  color: #fff;
  text-shadow: 0 1px 12px rgba(11, 31, 42, 0.55);
}

.site-header--overlay .logo:hover,
.site-header--overlay .logo:hover span {
  color: #fff;
}

.site-header--overlay .logo__mark {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: none;
}

.site-header--overlay .nav-desktop a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(11, 31, 42, 0.55);
}

.site-header--overlay .nav-desktop a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.site-header--overlay .nav-desktop a.is-active,
.site-header--overlay .nav-desktop a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

.site-header--overlay .btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  text-shadow: 0 1px 12px rgba(11, 31, 42, 0.55);
}

.site-header--overlay .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.site-header--overlay .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.site-header--overlay .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.site-header--overlay .nav-toggle span {
  background: #fff;
}

/* Revert to opaque white header while a nav-open state is active (mobile menu
   visible). Specificity (0,2,0) wins over base overlay rules (0,1,0) regardless
   of cascade order. `.is-nav-open` is toggled from `js/modules/mobile-nav.js`. */
.site-header--overlay.is-nav-open {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--border-soft);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.site-header--overlay.is-nav-open .logo,
.site-header--overlay.is-nav-open .logo span {
  color: var(--text-strong);
  text-shadow: none;
}

.site-header--overlay.is-nav-open .logo__mark {
  background: var(--surface-1);
  border-color: var(--border-base);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header--overlay.is-nav-open .nav-desktop a {
  color: var(--text-base);
  background: transparent;
  border-color: transparent;
  text-shadow: none;
}

.site-header--overlay.is-nav-open .btn--ghost {
  background: var(--surface-1);
  color: var(--text-strong);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-xs);
  text-shadow: none;
}

.site-header--overlay.is-nav-open .nav-toggle {
  background: var(--surface-1);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-xs);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header--overlay.is-nav-open .nav-toggle span {
  background: var(--text-strong);
}

.mobile-nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: var(--space-5) var(--space-8) var(--space-8);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear var(--motion-panel-duration);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear 0s;
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav a {
  display: block;
  padding: var(--space-4) var(--space-2);
  color: var(--text-strong);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--fs-header-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-nav);
  border-bottom: 1px solid var(--border-soft);
  transition: color var(--dur-fast) var(--ease-standard), padding-left var(--dur-base) var(--ease-out);
}

.mobile-nav a:hover {
  color: var(--accent);
}

.mobile-nav__list li:last-child a {
  border-bottom: none;
  padding-bottom: var(--space-3);
}

.mobile-nav-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--site-header-overlay-top, 88px);
  bottom: 0;
  z-index: 90;
  background: rgba(17, 24, 39, 0.48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-standard),
    visibility 0s linear var(--dur-base);
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-base) var(--ease-standard),
    visibility 0s linear 0s;
}

@media (min-width: 960px) {
  .nav-desktop {
    display: flex;
  }

  .contact-dropdown [data-contact-toggle] {
    --btn-font-size: var(--fs-header-nav);
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }

  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------------
   3. Hero — editorial, layered, the theme's strongest visual statement
   ----------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 88px 104px;
  background: linear-gradient(180deg, #f7fafc 0%, #eff4f7 100%);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 719px) {
  .hero {
    padding-block: 56px 72px;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(31, 111, 184, 0.06), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(233, 122, 43, 0.06), transparent 38%);
  pointer-events: none;
}

.hero__content {
  max-width: 34rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-6);
  padding: 8px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.hero h1 {
  margin: 0 0 var(--space-5);
  max-width: var(--max-width-heading);
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--text-strong);
  text-wrap: balance;
}

.hero__subtitle {
  margin: 0 0 var(--space-10);
  max-width: var(--max-width-prose);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.media-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-8);
  background: linear-gradient(135deg, #f5f9fa 0%, #eef4f6 100%);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------------------
   3b. Hero — full-bleed cover modifier (Вариант A)
   Site-scoped (enabled via .hero--cover on the hero section). The base .hero
   above remains untouched so other sites keep their split-layout hero.
   ----------------------------------------------------------------------------- */

.hero.hero--cover {
  padding: 0;
  background: #0b1f2a;
  min-height: clamp(520px, 80vh, 780px);
  display: grid;
  align-items: center;
  isolation: isolate;
  /* Pull the cover hero up behind the sticky, transparent header.
     The exact negative margin is set by js/modules/header-transparency.js
     using the real measured header.offsetHeight, because the CSS variable
     --header-h does not always match the actual rendered header (e.g. on
     mobile the .nav-toggle is taller than the content slot). A CSS fallback
     of var(--header-h) covers the no-JS case to minimize the visible gap. */
  margin-top: calc(-1 * var(--header-h));
}

.hero.hero--cover::before {
  content: none;
}

.hero--cover .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

.hero--cover .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero--overlay-dark .hero__overlay {
  background:
    linear-gradient(180deg, rgba(11, 31, 42, 0.52) 0%, rgba(11, 31, 42, 0.22) 24%, rgba(11, 31, 42, 0) 46%),
    linear-gradient(180deg, rgba(11, 31, 42, 0) 40%, rgba(11, 31, 42, 0.78) 100%),
    linear-gradient(90deg, rgba(11, 31, 42, 0.66) 0%, rgba(11, 31, 42, 0.24) 48%, rgba(11, 31, 42, 0) 78%);
}

.hero--overlay-light .hero__overlay {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.82) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.15) 55%, rgba(255, 255, 255, 0) 100%);
}

.hero--cover .hero__content {
  position: relative;
  z-index: 2;
  /* Override the global .hero__content { max-width: 34rem } that would
     otherwise shrink this container and let .container's margin-inline:auto
     center it. We want the full .container width here, and let the inner
     grid constrain the text to the left column only. */
  max-width: var(--max-width);
  padding-block: clamp(56px, 8vw, 112px);
  /* Two-column grid inside the centred .container: text block is locked to
     the left column (max 36rem) so it aligns vertically with section titles
     below (Преимущества, Каталог, Отзывы…). The second column consumes the
     remaining width so the picture/background breathes on the right. */
  display: grid;
  grid-template-columns: minmax(0, 36rem) 1fr;
}

.hero--cover .hero__content > * {
  grid-column: 1;
}

/* The eyebrow pill has no max-width of its own, so as a grid item with the
   default justify-self: stretch it would span the entire 36rem column.
   Anchor it to the start so the pill stays content-width. */
.hero--cover .hero__content > .hero__eyebrow {
  justify-self: start;
}

.hero--overlay-dark .hero__content,
.hero--overlay-dark .hero__content h1,
.hero--overlay-dark .hero__content .hero__subtitle {
  color: #fff;
}

.hero--overlay-dark .hero__eyebrow {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero--overlay-dark .hero__eyebrow::before {
  background: var(--accent);
}

.hero--overlay-dark .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 719px) {
  .hero.hero--cover {
    min-height: clamp(528px, 80svh, 672px);
    align-items: center;
  }

  .hero--overlay-dark .hero__overlay {
    background:
      linear-gradient(180deg, rgba(11, 31, 42, 0.5) 0%, rgba(11, 31, 42, 0.2) 18%, rgba(11, 31, 42, 0) 34%),
      linear-gradient(180deg, rgba(11, 31, 42, 0.22) 0%, rgba(11, 31, 42, 0.58) 52%, rgba(11, 31, 42, 0.86) 100%);
  }

  .hero--cover .hero__content {
    padding-block: 64px 40px;
    /* Back to single-column flow on narrow viewports: the 36rem left column
       would cramp against the right edge and leave no breathing room. */
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--cover .hero__bg img {
    transition: none !important;
  }
}

/* -----------------------------------------------------------------------------
   4. Benefits — clean premium utility cards
   ----------------------------------------------------------------------------- */

.benefits {
  background: var(--bg-section);
}

.benefits__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .benefits__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.benefit-card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.benefit-card:hover {
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

.benefit-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-5);
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(17, 70, 116, 0.22);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
}

.benefit-card__icon img {
  width: 22px;
  height: 22px;
}

.benefit-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading-sm);
  line-height: var(--lh-heading-sm);
  color: var(--text-strong);
}

.benefit-card p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   5. Bike listing & sliders — product-forward, typographic hierarchy
   ----------------------------------------------------------------------------- */

.bike-listing {
  background: var(--bg-section-alt);
  padding-bottom: var(--space-12);
}

.category-block {
  margin-bottom: var(--space-16);
}

.category-block--before-cta {
  margin-bottom: 0;
}

.category-block:last-child,
.category-block--last {
  margin-bottom: 0;
}

.home-catalog-cta {
  display: flex;
  justify-content: center;
  margin: var(--space-8) 0 var(--space-12);
}

@media (max-width: 719px) {
  .bike-listing {
    padding-bottom: var(--space-10);
  }
}

.category-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.category-block__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading-sm);
  line-height: var(--lh-heading-sm);
  color: var(--text-strong);
}

.slider-wrap {
  position: relative;
  /* Bleed to the viewport edges so cards extend off-screen and hint at
     more content beyond the fold. The negative margin must match the
     active .container gutter (16px on mobile, 24px on tablet+, 0 on
     desktop where the container is already inside its max-width).
     Если оно превышает gutter контейнера — слой выходит за viewport
     и iOS Safari позволяет тачем оттянуть страницу горизонтально. */
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
}

@media (min-width: 720px) {
  .slider-wrap {
    margin-inline: calc(-1 * var(--space-6));
    padding-inline: var(--space-6);
  }
}

@media (min-width: 960px) {
  .slider-wrap {
    margin-inline: 0;
    padding-inline: 0;
  }
}

.slider__track {
  display: flex;
  gap: var(--space-5);
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 min(100%, 320px);
}

.category-scroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-lg);
  /* scroll-snap полностью отключён. На iOS Safari в комбинации с overflow:auto
     каруселью + flex-children + clamp() он давал рывковый скролл. Без snap
     просто нативный momentum-scroll, который iOS делает идеально. */
  scroll-snap-type: none;
  /* contain не даёт листанию до конца спровоцировать back/forward жест браузера. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.category-scroll__viewport::-webkit-scrollbar {
  display: none;
}

.category-scroll .slider__track {
  /* width: max-content убран — он создавал circular sizing с
     percentage/clamp flex-basis у детей. Обычный flex-контейнер с
     `flex: 0 0 X` детьми (no shrink) сам растягивается по содержимому,
     overflow:auto на родительском viewport отвечает за скролл. */
  transition: none;
  will-change: auto;
  transform: none !important;
}

.category-scroll .slider__slide {
  /* flex-basis + явный width одновременно — двойная страховка, чтобы
     iOS Safari не «раскрывал» flex-item под давлением content. */
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  min-width: 0;
}

@media (min-width: 380px) {
  .category-scroll .slider__slide {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
  }
}

@media (min-width: 640px) {
  .slider__slide,
  .category-scroll .slider__slide {
    flex: 0 0 320px;
    width: 320px;
    max-width: 320px;
  }
}

@media (min-width: 960px) {
  .slider__slide,
  .category-scroll .slider__slide {
    flex: 0 0 320px;
    width: 320px;
    max-width: 320px;
  }
}

/* На уровне самой карточки тоже фиксируем — `min-width: 0` ломает
   default flex-item min-content, иначе длинный текст внутри (например,
   модель с длинным именем) распирает карточку шире её слайда. */
.category-scroll .bike-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Bike card — product cue */
.bike-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.bike-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-base);
}

.bike-card__top {
  padding: 24px 24px 18px;
}

.bike-card__title {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--text-strong);
}

/* Listing context — H2 semantics, H3 visual weight.
   Card title reads as a prominent product heading on the catalog page. */
.bike-card--listing .bike-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading-sm);
  line-height: var(--lh-heading-sm);
}

/* Home context — H4 semantics, H4 visual weight.
   Keep the title to a single line so home carousel cards stay compact and
   uniform; long titles truncate with an ellipsis (full title is on the
   listing page). */
.bike-card--home .bike-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bike-card__gallery {
  position: relative;
  /* Matches catalog render dimensions (1184x864) so the image fits the
     container exactly without overflow:hidden clipping ~6% top/bottom on
     mobile cards. Placeholder fallback uses the same ratio. */
  aspect-ratio: 1184 / 864;
  background: linear-gradient(135deg, #f7fafb 0%, #eef4f6 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.bike-card__slides {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bike-card__slides-inner {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s var(--ease-out);
}

.bike-card__slide {
  flex: 0 0 100%;
  height: 100%;
}

.bike-card__dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: 2px;
}

.bike-card__dot {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.bike-card__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 24, 39, 0.08);
  transform: translate(-50%, -50%);
  transition: background var(--dur-fast) var(--ease-standard);
}

.bike-card__dot.is-active::after {
  background: var(--accent);
  border-color: var(--accent);
}

.bike-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-5);
}

.bike-card__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}

.bike-card__specs dt {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--text-base);
}

.bike-card__specs dd {
  margin: 0;
  color: var(--text-muted);
}

.bike-card__pricing {
  position: relative;
  padding: 18px 20px;
  background: var(--surface-3);
  border: 1px solid var(--border-base);
  border-radius: 18px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-lead);
}

.bike-card__pricing-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.2rem 0;
}

.bike-card__pricing-row span:first-child {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.bike-card__pricing-row strong {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   6. How to rent — modern numbered steps
   ----------------------------------------------------------------------------- */

.how-rent {
  background: var(--bg-section);
}

.how-rent__cta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}

.steps-path {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .steps-path {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: var(--space-4);
    align-items: stretch;
  }
}

.step-card {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.step-card:hover {
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

.step-card__node {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-heading-sm);
  color: var(--accent-strong);
  animation: step-node-pulse 3.2s ease-out infinite;
}

.step-card:nth-of-type(2) .step-card__node { animation-delay: 0.8s; }
.step-card:nth-of-type(3) .step-card__node { animation-delay: 1.6s; }
.step-card:nth-of-type(4) .step-card__node { animation-delay: 2.4s; }

@keyframes step-node-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 111, 184, 0.26);
  }
  15% {
    box-shadow: 0 0 0 12px rgba(31, 111, 184, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(31, 111, 184, 0);
  }
}

.step-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading-sm);
  line-height: var(--lh-heading-sm);
  color: var(--text-strong);
}

.step-card p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
}

/* Connector — the element itself IS the line.
   Mobile: thin vertical pill between stacked cards.
   Desktop: thin horizontal pill between cards, vertically aligned with the
   node centers (card padding-top 28px + node half 22px = 50px, minus half
   line thickness → margin-top 49px). */
.step-connector {
  justify-self: center;
  width: 2px;
  height: 28px;
  border-radius: 999px;
  background: var(--border-base);
  font-size: 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  .step-connector {
    align-self: start;
    width: 40px;
    height: 2px;
    margin-top: 49px;
  }
}

/* -----------------------------------------------------------------------------
   7. Conditions — simple accented list cards
   ----------------------------------------------------------------------------- */

.conditions {
  background: var(--bg-section-alt);
}

.conditions__grid {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.conditions-list-markers li {
  list-style: none;
}

@media (min-width: 720px) {
  .conditions__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

.condition-item {
  padding: 28px;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.condition-item:hover {
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

.condition-item h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading-sm);
  line-height: var(--lh-heading-sm);
  color: var(--text-strong);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.condition-item h3::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
}

.condition-item p {
  margin: 0;
  padding-left: calc(8px + var(--space-3));
  font-size: var(--fs-body-sm);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   8. Reviews — placeholders, carousel, screenshot cards
   ----------------------------------------------------------------------------- */

.reviews-block {
  background: var(--bg-section);
}

.reviews-widget-placeholder {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  text-align: center;
  overflow: hidden;
}

.reviews-widget-placeholder__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading-sm);
  letter-spacing: var(--ls-heading-sm);
  color: var(--text-strong);
}

.reviews-variant[hidden] {
  display: none !important;
}

.reviews-carousel {
  margin-top: var(--space-5);
}

.reviews-carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Same logic as .slider-wrap — bleed must match container gutter so
     the viewport never exceeds 100vw on mobile. */
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  padding-top: 0.625rem;
  padding-bottom: var(--radius-lg);
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

@media (min-width: 720px) {
  .reviews-carousel__viewport {
    margin-inline: calc(-1 * var(--space-6));
    padding-inline: var(--space-6);
  }
}

@media (min-width: 960px) {
  .reviews-carousel__viewport {
    margin-inline: 0;
    padding-inline: var(--radius-lg);
    padding-top: 0.75rem;
    padding-bottom: var(--radius-lg);
  }
}

.reviews-carousel__track {
  display: flex;
  gap: var(--space-5);
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

.reviews-carousel__slide {
  flex: 0 0 min(300px, 86%);
}

@media (min-width: 640px) {
  .reviews-carousel__slide {
    flex: 0 0 calc(50% - var(--space-5) / 2);
    max-width: none;
  }
}

@media (min-width: 960px) {
  .reviews-carousel__slide {
    flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
    max-width: none;
  }
}

.reviews-carousel__nav {
  display: none;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 960px) {
  .reviews-carousel__nav {
    display: flex;
  }
}

.review-screenshot-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-lg);
  -webkit-tap-highlight-color: transparent;
}

.review-screenshot-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.review-screenshot-card__source-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav);
  letter-spacing: 0.01em;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.review-screenshot-card__source-chip--telegram {
  background: linear-gradient(145deg, #42b4ea, #2f8fc4);
}

.review-screenshot-card__source-chip--whatsapp {
  background: linear-gradient(145deg, #34c85a, #1fa34a);
}

.review-screenshot-card__source-chip-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
}

.review-screenshot-card__source-chip--telegram .review-screenshot-card__source-chip-icon,
.review-screenshot-card__source-chip--whatsapp .review-screenshot-card__source-chip-icon {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.review-screenshot-card__source-chip-text {
  white-space: nowrap;
}

@media (max-width: 399px) {
  .review-screenshot-card__source-chip {
    font-size: 0.625rem;
    padding: 0.125rem 0.4375rem 0.125rem 0.3125rem;
    gap: 0.25rem;
    margin-bottom: 0.4375rem;
  }

  .review-screenshot-card__source-chip-icon {
    width: 12px;
    height: 12px;
  }
}

.review-screenshot-card__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  aspect-ratio: 9 / 18;
  max-height: min(420px, 58vw);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.review-screenshot-card:hover .review-screenshot-card__screen {
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

@media (min-width: 960px) {
  .review-screenshot-card__screen {
    max-height: 380px;
  }
}

.review-screenshot-card__screen--wa {
  background: #e5ddd5;
}

.review-screenshot-card__status {
  height: 28px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.review-screenshot-card__screen--wa .review-screenshot-card__status {
  background: #075e54;
  border-bottom: none;
}

.review-screenshot-card__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-3) var(--space-3) var(--space-4);
  min-height: 0;
}

.review-screenshot-card__bubble {
  display: block;
  max-width: 88%;
  min-height: 2rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.review-screenshot-card__bubble--out {
  align-self: flex-end;
  max-width: 78%;
  background: #dcf8c6;
}

.review-screenshot-card__screen--wa .review-screenshot-card__bubble--in {
  background: #fff;
}

.review-screenshot-card__screen--wa .review-screenshot-card__bubble--out {
  background: #dcf8c6;
}

.review-screenshot-card__bubble--short {
  min-height: 1.35rem;
  max-width: 52%;
}

.review-screenshot-card__caption {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-1);
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

.review-screenshot-card__screen--wa .review-screenshot-card__caption {
  background: #f7f7f7;
}

/* -----------------------------------------------------------------------------
   9. FAQ — polished accordion surface
   ----------------------------------------------------------------------------- */

.faq-block {
  background: var(--bg-section-alt);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

.faq-item {
  display: grid;
  grid-template-rows: auto 0fr;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition:
    grid-template-rows var(--motion-panel-duration) var(--motion-panel-ease),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.faq-item:hover {
  border-color: var(--border-base);
  box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
  grid-template-rows: auto 1fr;
  border-color: var(--border-base);
  box-shadow: var(--shadow-sm);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 20px 24px;
  min-height: 64px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease-standard);
}

.faq-item__question:hover,
.faq-item.is-open .faq-item__question {
  color: var(--accent-hover);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-base);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  transition:
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.faq-item.is-open .faq-item__icon {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  transform: rotate(45deg);
}

.faq-item__answer {
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0 24px 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--motion-panel-offset-y));
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    padding-bottom var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear var(--motion-panel-duration);
}

.faq-item.is-open .faq-item__answer {
  padding-bottom: 20px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    transform var(--motion-panel-duration) var(--motion-panel-ease),
    padding-bottom var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear 0s;
}

/* -----------------------------------------------------------------------------
   10. Locations — promo block on home + list entries on the guide page
   ----------------------------------------------------------------------------- */

.locations-promo {
  background: var(--bg-section);
}

.locations-promo__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.locations-promo__content {
  display: flex;
  flex-direction: column;
}

.locations-promo__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
  color: var(--text-muted);
}

.locations-promo__content .section__title {
  margin-bottom: var(--space-4);
}

.locations-promo__content .section__lead {
  margin-bottom: var(--space-5);
  max-width: var(--max-width-prose);
}

.locations-promo__bullets {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.locations-promo__bullets li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
}

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

.locations-promo__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.locations-promo__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #f7fafb 0%, #eef4f6 100%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

.locations-promo__media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.locations-promo__media > .media-placeholder {
  width: 100%;
  height: 100%;
}

@media (max-width: 719px) {
  .locations-promo__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 720px) {
  .locations-promo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .locations-promo__media {
    aspect-ratio: 16 / 11;
  }
}

@media (min-width: 1024px) {
  .locations-promo__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
  }

  .locations-promo__media {
    aspect-ratio: 5 / 4;
  }
}

/* Shared controls used on the locations guide page inside .location-entry__coords.
   The `location-card__*` prefix is kept for backwards compatibility with the
   markup in src/pages/locations.njk. */
.location-card__copy-btn {
  flex: 0 0 auto;
  width: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.location-card__copy-btn:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border-base);
  box-shadow: var(--shadow-sm);
}

.location-card__copy-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--focus-ring);
}

.location-card__copy-btn.is-copied {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.location-card__copy-icon {
  width: 1.05rem;
  height: 1.05rem;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Locations guide page — list of entries under page-intro + article-body
   ----------------------------------------------------------------------------- */

.article-body--locations {
  max-width: var(--max-width-prose);
}

.locations-list {
  list-style: none;
  counter-reset: locations;
  padding: 0;
  margin: var(--space-8) 0 var(--space-8);
  display: grid;
  gap: var(--space-8);
}

.location-entry {
  counter-increment: locations;
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: var(--space-10);
  overflow: hidden;
}

.location-entry__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-article-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-strong);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.location-entry__title::before {
  content: counter(locations, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-small);
  color: var(--accent);
}

.location-entry__gallery {
  position: relative;
  margin: 0 0 var(--space-5);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #f7fafb 0%, #eef4f6 100%);
  border: 1px solid var(--border-soft);
}

.location-entry__slides {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.location-entry__slides-inner {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s var(--ease-out);
}

.location-entry__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.location-entry__slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.location-entry__slide > .media-placeholder {
  width: 100%;
  height: 100%;
}

.location-entry__dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-pill);
  background: rgba(17, 24, 39, 0.32);
  backdrop-filter: blur(6px);
}

.location-entry__dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.location-entry__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 24, 39, 0.1);
  transform: translate(-50%, -50%);
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.location-entry__dot.is-active::after {
  background: #ffffff;
  border-color: #ffffff;
}

.location-entry__text p {
  margin: 0 0 var(--space-3);
  color: var(--text-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.location-entry__text p:last-child {
  margin-bottom: 0;
}

.location-entry__coords {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-7) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.article-body .location-entry__coords {
  margin: var(--space-7) 0 0;
}

.location-entry__coords-label {
  color: var(--text-muted);
}

.location-entry__coords .location-card__coords-text {
  flex: 1;
  min-width: 0;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 719px) {
  .location-entry {
    padding: var(--space-5);
  }

  .location-entry__gallery {
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-4);
  }

  .location-entry__coords {
    flex-wrap: wrap;
  }

  .location-entry__coords .location-card__coords-text {
    flex: 1 1 100%;
    order: 2;
  }

  .location-entry__coords .location-card__copy-btn {
    order: 3;
    margin-left: auto;
  }
}

/* -----------------------------------------------------------------------------
   11. Clients — gallery + lightbox
   ----------------------------------------------------------------------------- */

.clients-block {
  background: var(--bg-section-alt);
}

/* Заглушка вместо галереи клиентов, пока нет реальных фото.
   Используется при закомментированной .clients-gallery-shell в clients.njk. */
.clients-gallery-empty {
  margin-top: var(--space-6);
  padding: clamp(24px, 4vw, 48px) var(--space-6);
  border: 1px dashed var(--border-base);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.clients-gallery-empty p {
  margin: 0;
  max-width: 32rem;
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading-sm);
  color: var(--text-muted);
}

.clients-gallery-shell {
  /* Bleed must match active container gutter (16px mobile, 24px tablet+).
     Иначе галерея торчит за viewport и iOS даёт оттянуть страницу. */
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

@media (min-width: 720px) {
  .clients-gallery-shell {
    margin-inline: calc(var(--space-6) * -1);
    padding-inline: var(--space-6);
    scroll-padding-inline: var(--space-6);
  }
}

.clients-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  width: max-content;
  min-width: 100%;
}

.clients-gallery__item {
  flex: 0 0 min(17.5rem, calc(100vw / 1.32 - var(--space-6)));
  scroll-snap-align: start;
  max-width: 20rem;
}

.client-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-lg);
  text-align: left;
  font: inherit;
  color: inherit;
}

.client-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.client-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg, #f7fafb 0%, #eef4f6 100%);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.client-card:hover .client-card__media {
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

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

.client-card__placeholder {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-4);
}

@media (min-width: 900px) {
  .clients-gallery-shell {
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .clients-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    width: auto;
    min-width: 0;
  }

  .clients-gallery__item {
    flex: unset;
    max-width: none;
    min-width: 0;
  }
}

/* Lightbox */
.clients-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(17, 24, 39, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease-out), visibility 0.28s var(--ease-out);
}

.clients-lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.clients-lightbox {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: min(92vw, 960px);
  max-height: min(88vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.clients-lightbox__close {
  position: absolute;
  top: calc(var(--space-5) * -1);
  right: 0;
  z-index: 2;
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: var(--shadow-md);
}

.clients-lightbox__close:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

.clients-lightbox__stage {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  max-height: min(82vh, 860px);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.clients-lightbox__img,
.clients-lightbox__placeholder {
  border-radius: calc(var(--radius-xl) - 0.75rem);
}

.clients-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: min(82vh, 860px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.clients-lightbox__img[hidden] {
  display: none !important;
}

.clients-lightbox__placeholder {
  min-height: min(50vh, 320px);
  min-width: min(90vw, 480px);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: linear-gradient(135deg, #f7fafb 0%, #eef4f6 100%);
  padding: var(--space-12);
  overflow: hidden;
}

.clients-lightbox__placeholder[hidden] {
  display: none !important;
}

@media (min-width: 900px) {
  .clients-lightbox__close {
    top: calc(var(--space-6) * -1);
    right: calc(var(--space-3) * -1);
  }
}

/* -----------------------------------------------------------------------------
   12. Contacts — trust-oriented layout
   ----------------------------------------------------------------------------- */

.contacts-block {
  background: var(--bg-section);
}

.contacts-layout {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .contacts-layout {
    grid-template-columns: 1fr 1.1fr;
    align-items: stretch;
  }

  .contacts-layout > div:last-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .contacts-block .map-placeholder {
    flex: 1 1 auto;
    min-height: 320px;
  }
}

.contacts-list {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contacts-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lead);
  color: var(--text-base);
}

.contacts-list img,
.contacts-list svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.contacts-list a {
  font-weight: var(--fw-medium);
  color: var(--text-base);
  text-decoration: none;
}

.contacts-list a:hover {
  color: var(--accent);
}

.contacts-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contacts-block .contacts-actions {
  align-items: center;
  width: 100%;
}

.contacts-block .contacts-actions .btn {
  width: min(100%, 22.5rem);
  justify-content: center;
  text-align: center;
  padding-inline: 1rem;
}

.contacts-block .map-placeholder + .contacts-actions {
  margin-top: var(--space-6);
}

.map-placeholder {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg, #f8fbfc 0%, #f1f5f7 100%);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
  overflow: hidden;
}

.map-embed {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  background: #eef3f6;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

.contacts-block .map-embed {
  flex: 1 1 auto;
}

.contacts-block .map-embed + .contacts-actions {
  margin-top: var(--space-6);
}

/* -----------------------------------------------------------------------------
   13. Footer — dark, editorial, typographically strong
   ----------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  margin-top: auto;
  background: linear-gradient(180deg, #0f1720 0%, #0b141c 100%);
  color: var(--text-on-inverse);
  padding-block: clamp(56px, 6vw, 80px) clamp(32px, 3.5vw, 44px);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer a {
  color: var(--text-on-inverse);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-footer a:hover {
  color: #dce7ee;
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer__logo {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-logo);
  line-height: var(--lh-flat);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--space-5);
}

.footer__logo .logo__mark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

.footer__logo:hover {
  color: #fff;
}

.footer__logo--image {
  line-height: 0;
}

.footer__logo--image img {
  display: block;
  width: auto;
  height: 78px;
}

.footer__nav {
  list-style: none;
  margin: 0 0 0 -0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.footer__nav a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-heading);
  font-size: var(--fs-footer-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-nav);
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.footer__nav a[aria-current="page"],
.footer__nav a.is-active {
  color: #fff;
  background: rgba(31, 111, 184, 0.22);
  border-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover,
  .footer__nav a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .footer__nav a[aria-current="page"]:hover,
  .footer__nav a[aria-current="page"]:focus-visible,
  .footer__nav a.is-active:hover,
  .footer__nav a.is-active:focus-visible {
    background: rgba(31, 111, 184, 0.32);
    border-color: transparent;
  }
}

.footer__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-nav);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: rgba(220, 231, 238, 0.6);
}

.footer__meta {
  margin: 0;
  color: rgba(220, 231, 238, 0.72);
  line-height: var(--lh-body);
}

.footer__bottom {
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__copyright {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(220, 231, 238, 0.5);
  text-align: left;
}

.social-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.social-row a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.social-row a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.social-row img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   14. Modal + form controls
   ----------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 24, 39, 0.56);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear var(--motion-panel-duration);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--motion-panel-duration) var(--motion-panel-ease),
    visibility 0s linear 0s;
}

.modal {
  width: min(100%, 480px);
  max-height: min(90vh, 720px);
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-7);
  box-shadow: var(--shadow-md);
  transform: translateY(var(--motion-panel-offset-y)) scale(0.98);
  transition: transform var(--motion-panel-duration) var(--motion-panel-ease);
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.modal__head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-article-h2);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading-sm);
  line-height: var(--lh-heading-sm);
  color: var(--text-strong);
}

.modal__close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.modal__close:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border-base);
}

.modal__close:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Form fields — clean, neutral, crisp */
.form-field {
  margin-bottom: var(--space-5);
}

.form-field label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls-body);
  color: var(--text-base);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--text-strong);
  font-size: var(--fs-input);
  font-weight: var(--fw-regular);
  line-height: var(--lh-small);
  box-shadow: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-soft);
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
  border-color: var(--border-strong);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(31, 111, 184, 0.12);
}

.form-field textarea {
  min-height: 140px;
  padding: 16px 18px;
  resize: vertical;
  line-height: var(--lh-lead);
}

/* Checkbox / consent row */
.modal form .form-field:has(> input[type="checkbox"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
}

.modal form .form-field:has(> input[type="checkbox"]) > input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  min-height: auto;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-1);
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.modal form .form-field:has(> input[type="checkbox"]) > label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-lead);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--text-muted);
}

.modal form .form-field:has(> input[type="checkbox"]) > label a {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.modal form .form-field:has(> input[type="checkbox"]) > label a:hover {
  color: var(--accent-hover);
}

.modal form .form-field:has(> input[type="checkbox"]) > label a:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 3px;
}

.modal form .form-field:has(> input[type="checkbox"]) > p {
  grid-column: 2;
  margin: 0;
  font-size: var(--fs-tiny);
  line-height: var(--lh-lead);
  color: var(--text-soft);
}

@media (max-width: 479px) {
  .modal {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }

  .modal form .form-field:has(> input[type="checkbox"]) > input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
  }

  .modal form .form-field:has(> input[type="checkbox"]) > label {
    font-size: 0.82rem;
  }

  .modal form .form-field:has(> input[type="checkbox"]) > p {
    font-size: 0.75rem;
  }
}

/* -----------------------------------------------------------------------------
   15. Cookie bar
   ----------------------------------------------------------------------------- */

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  padding: var(--space-4);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-out);
}

.cookie-bar.is-visible {
  transform: translateY(0);
}

.cookie-bar__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}

.cookie-bar p {
  margin: 0;
  flex: 1 1 220px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  max-width: 520px;
}

.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

body.cookie-bar-visible {
  padding-bottom: 100px;
}

@media (min-width: 600px) {
  body.cookie-bar-visible {
    padding-bottom: 88px;
  }
}

/* -----------------------------------------------------------------------------
   16. Scroll-to-top
   ----------------------------------------------------------------------------- */

.scroll-top {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: 170;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-1);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear 0s,
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.scroll-top:hover {
  background: var(--surface-2);
  border-color: var(--border-base);
  box-shadow: var(--shadow-md);
}

.scroll-top:focus-visible {
  outline: none;
  box-shadow: var(--shadow-sm), var(--focus-ring);
}

.scroll-top__icon {
  width: 24px;
  height: 24px;
}

body.cookie-bar-visible .scroll-top {
  bottom: calc(100px + var(--space-6) + env(safe-area-inset-bottom));
}

@media (min-width: 600px) {
  body.cookie-bar-visible .scroll-top {
    bottom: calc(88px + var(--space-6) + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top,
  .btn,
  .bike-card,
  .bike-card__slides-inner,
  .location-entry,
  .location-entry__slides-inner,
  .benefit-card,
  .condition-item,
  .step-card,
  .faq-item {
    transition: none;
  }

  .footer__nav a {
    transition: none;
  }

  .step-card__node {
    animation: none;
  }
}