/* ============================================================
   JUST RIDE — дизайн-система

   Правила, от которых нельзя отступать:
   1. Один шрифт: Inter Tight. Три начертания: 400 / 500 / 600.
   2. Размер текста — только из шкалы --fs-*.
   3. Межстрочный — только из шкалы --lh-* (5 значений).
   4. Трекинг — только из шкалы --ls-* (7 значений).
   5. Цвет — только из палитры --c-*.
   6. Фиксированные отступы кратны 4px и берутся из --s-*.
      Адаптивные заданы через clamp() с кратными границами.
   7. Лайм при наведении = «сюда можно нажать». На некликабельных
      элементах его нет никогда.
   8. Строки «ключ — значение» строятся на .row и общей сетке
      --col-key, чтобы колонки во всех разделах стояли на одной
      вертикали.
   ============================================================ */

:root{

  /* ---------- ЦВЕТ ---------- */
  --c-bg:#1C1C1C;
  --c-surface:#222222;
  --c-line:#2E2E2E;
  --c-border:#4A4A4A;

  --c-text:#FFFFFF;
  --c-text-2:#CFCFCF;
  --c-text-3:#8A8A8A;

  --c-accent:#C0F554;

  /* ---------- РАЗМЕР: роль → кегль ---------- */
  --fs-display:clamp(52px,11.5vw,176px);  /* первый экран */
  --fs-h2:clamp(32px,4.2vw,60px);         /* заголовок раздела */
  --fs-h3:clamp(20px,1.9vw,28px);         /* имя байка, колонка */
  --fs-figure:clamp(72px,9vw,140px);      /* крупная цифра */
  --fs-price:clamp(26px,2.9vw,40px);      /* цена в тарифах */
  --fs-statement:clamp(22px,2.6vw,36px);  /* лозунг, лид первого экрана */
  --fs-lead:clamp(16px,1.3vw,18px);       /* лид раздела */
  --fs-value:clamp(18px,1.55vw,22px);     /* значение в строке */
  --fs-body:clamp(15px,1.15vw,17px);      /* обычный текст */
  --fs-brand:clamp(20px,1.7vw,24px);       /* логотип и телефон в хедере */
  --fs-ui:16px;                            /* кнопки */
  --fs-caption:12px;                       /* характеристики, подвал */
  --fs-nav:12px;                           /* оглавление */
  --fs-label:11px;                         /* капслок-метка */

  /* ---------- НАЧЕРТАНИЕ ---------- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:600;

  /* ---------- МЕЖСТРОЧНЫЙ: 5 значений ---------- */
  --lh-flat:1;          /* однострочное: метки, кнопки, цифры */
  --lh-display:.88;     /* крупный заголовок */
  --lh-heading:1.05;    /* заголовки разделов и колонок */
  --lh-value:1.3;       /* значения, лозунги */
  --lh-text:1.5;        /* абзацы */

  /* ---------- ТРЕКИНГ: 7 значений ---------- */
  --ls-display:-.055em;
  --ls-h2:-.04em;
  --ls-h3:-.03em;
  --ls-value:-.02em;
  --ls-flat:0;
  --ls-btn:.06em;
  --ls-nav:.12em;
  --ls-label:.18em;

  /* ---------- ОТСТУПЫ: шаг 4px ---------- */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;

  --s-section:clamp(80px,11vh,144px);   /* воздух раздела: сверху = снизу */
  --s-block:clamp(36px,5vh,56px);        /* заголовок → содержимое */

  /* ---------- МЕТРИКА ---------- */
  --radius:4px;
  --header-h:68px;
  --chrome-h:68px;
  --tabbar-h:56px;
  --gutter:clamp(20px,4.4vw,64px);
  --nav-space:0px;                  /* поле под засечки оглавления справа */
  --maxw:1240px;

  --col-key:minmax(180px,30%);
  --col-label:minmax(96px,150px);

  --ease:200ms ease-out;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:'Inter Tight',Helvetica,Arial,sans-serif;
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,dl,dd,dt,ol,li{margin:0}
ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto}
.dot{color:var(--c-accent)}
.nowrap{white-space:nowrap}

/* ============================================================
   ТИПОГРАФИЧЕСКИЕ РОЛИ
   ============================================================ */

/* капслок-метка */
.eyebrow,
.cell-label,
.bike__index,
.carousel__count,
.hint,
.footer__meta,
.map,
.spec dt{
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-text-3);
}

.section__title{
  margin-top:var(--s-4);
  font-size:var(--fs-h2);
  font-weight:var(--fw-bold);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-h2);
  text-transform:uppercase;
}

/* Строка переносится только когда место действительно кончилось,
   поэтому ширина ничем не ограничена. */
.section__lead{
  margin-top:var(--s-3);
  font-size:var(--fs-lead);
  font-weight:var(--fw-regular);
  line-height:var(--lh-text);
  color:var(--c-text-3);
}

/* лаймовая черта — единый графический приём разделов */
.rule{
  width:64px;
  height:2px;
  background:var(--c-accent);
  border:0;
}

/* ============ ХЕДЕР ============
   Два элемента: телефон и главное действие. Один кегль на оба. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100}

/* Фон и линия — во всю ширину, содержимое — в том же контейнере,
   что и разделы страницы, поэтому логотип стоит на одной вертикали
   с заголовками. */
/* Наверху страницы линии нет — хедер сливается с первым экраном.
   Она проявляется, как только начали прокручивать. */
.topbar__row{
  height:var(--header-h);
  background:var(--c-bg);
  border-bottom:1px solid transparent;
  padding-left:var(--gutter);
  padding-right:calc(var(--gutter) + var(--nav-space));
  transition:border-color var(--ease);
}
.topbar.is-scrolled .topbar__row{border-bottom-color:var(--c-line)}

.topbar__inner{
  height:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-6);
}

.logo{
  font-size:var(--fs-brand);
  font-weight:var(--fw-bold);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-value);
  text-transform:uppercase;
  white-space:nowrap;
}

.topbar__actions{display:flex;align-items:center;gap:var(--s-6)}

.topbar__link{
  font-size:var(--fs-brand);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-flat);
  white-space:nowrap;
  transition:color var(--ease);
}
.topbar__link:hover{color:var(--c-accent)}

/* ============ КНОПКИ ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius);
  font-size:var(--fs-ui);
  font-weight:var(--fw-bold);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-btn);
  text-transform:uppercase;
  white-space:nowrap;
}

.btn--primary{
  height:44px;
  padding:0 var(--s-6);
  background:var(--c-accent);
  color:var(--c-bg);
  transition:background var(--ease),color var(--ease);
}
.btn--primary:hover{background:var(--c-text);color:var(--c-bg)}

.btn--ghost{
  height:44px;
  padding:0 var(--s-5);
  border:1px solid var(--c-border);
  color:var(--c-text-2);
  transition:border-color var(--ease),color var(--ease);
}
.btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}

.nav-btn{
  width:44px;
  height:44px;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  color:var(--c-text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color var(--ease),color var(--ease),opacity var(--ease);
}
.nav-btn:hover:not(:disabled){border-color:var(--c-accent);color:var(--c-accent)}
.nav-btn:disabled{opacity:.3;cursor:default}

/* ============ РАЗДЕЛЫ ============ */
.main{padding-top:var(--chrome-h);padding-bottom:var(--tabbar-h)}

.section{
  padding:var(--s-section) var(--gutter);
  border-top:1px solid var(--c-line);
  scroll-margin-top:var(--chrome-h);
}

.section--hero{
  border-top:0;
  min-height:calc(100dvh - var(--chrome-h) - var(--tabbar-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-6);
  flex-wrap:wrap;
}
.head > :first-child{flex:1 1 auto;min-width:0}

/* ============ 01 ГЛАВНОЕ ============
   «КАТАЙСЯ.» вписано в ширину контейнера, как и все остальные
   блоки. Ширина этой строки в Inter Tight 600 с трекингом −.055em
   равна 4.364 × кегля, поэтому кегль = ширина контейнера ÷ 4.5.

   Левый край выравнивается оптически: у «П» пустое поле перед
   чернилами равно .06 кегля, у «К» — .05. При разных кеглях это
   давало заметный уступ, поэтому каждая строка сдвигается влево
   на свою величину. */
.hero{position:relative}

.hero__title{
  font-weight:var(--fw-bold);
  line-height:var(--lh-display);
  text-transform:uppercase;
}

/* Трекинг задаётся на самих строках, а не на заголовке: em-значение
   считается от кегля своего элемента, и при наследовании от родителя
   без font-size превратилось бы в неверную величину в пикселях. */
.hero__small,
.hero__big{display:block;white-space:nowrap}

.hero__small{
  font-size:var(--fs-h2);
  letter-spacing:var(--ls-h2);
  margin-left:-.06em;
}

.hero__big{
  font-size:calc(min(100vw - 2 * var(--gutter) - var(--nav-space), var(--maxw)) / 4.5);
  letter-spacing:var(--ls-display);
  margin-left:-.05em;
}

.hero__lead{
  margin-top:var(--s-10);
  font-size:var(--fs-statement);
  font-weight:var(--fw-regular);
  line-height:var(--lh-value);
  letter-spacing:var(--ls-value);
  color:var(--c-text);
}
.hero__lead-dim{color:var(--c-text-3)}

/* появление первого экрана — один раз при загрузке */
@keyframes jr-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

.hero__small{animation:jr-in .6s .05s both}
.hero__big{animation:jr-in .6s .18s both}
.hero__big .dot{display:inline-block;animation:jr-in .5s .62s both}
.hero__lead{animation:jr-in .6s .34s both}

/* ============ 02 ПАРК ============ */
.carousel__nav{display:flex;align-items:center;gap:var(--s-3)}
.carousel__count{margin-right:var(--s-2);font-variant-numeric:tabular-nums}

.bikes{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--s-6)) / 3);
  gap:var(--s-6);
  margin-top:var(--s-block);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.bikes::-webkit-scrollbar{display:none}

.bike{scroll-snap-align:start;min-width:0}

/* фото — кнопка: открывает увеличенный снимок */
.bike__media{
  position:relative;
  width:100%;
  background:var(--c-surface);
  aspect-ratio:4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:zoom-in;
}

.bike__zoom{
  position:absolute;
  right:var(--s-3);
  bottom:var(--s-3);
  z-index:1;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:rgba(28,28,28,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--c-text-2);
  transition:border-color var(--ease),color var(--ease);
}
.bike__media:hover .bike__zoom{border-color:var(--c-accent);color:var(--c-accent)}
/* фото приходят с собственным тёмным фоном — cover,
   чтобы края слились с подложкой и не читались как рамка */
.bike__media img{width:100%;height:100%;object-fit:cover}

.bike__index{position:absolute;top:var(--s-3);left:var(--s-4);z-index:1}
.bike__placeholder{
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);
  color:var(--c-text-3);
}

.bike__name{
  margin-top:var(--s-5);
  font-size:var(--fs-h3);
  font-weight:var(--fw-bold);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-h3);
}

/* характеристики в две колонки — карточка вдвое короче */
.spec{
  margin-top:var(--s-4);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--s-6);
}

.spec__row{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding:var(--s-3) 0;
  border-top:1px solid var(--c-line);
}

.spec dd{
  font-size:var(--fs-caption);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-btn);
}

.hint{margin-top:var(--s-4)}

/* ============================================================
   СТРОКИ — общая сетка тарифов, вопросов, Club и контактов
   ============================================================ */
.rows{display:flex;flex-direction:column;margin-top:var(--s-block)}
.rows--tight{margin-top:var(--s-8)}

.row{border-top:1px solid var(--c-line)}
.rows > .row:last-child{border-bottom:1px solid var(--c-line)}

.cell-key{
  font-size:var(--fs-value);
  font-weight:var(--fw-medium);
  line-height:var(--lh-value);
  letter-spacing:var(--ls-value);
  color:var(--c-text);
}

.cell-value{
  font-size:var(--fs-value);
  font-weight:var(--fw-medium);
  line-height:var(--lh-value);
  letter-spacing:var(--ls-value);
  color:var(--c-text);
}
.cell-value--accent{color:var(--c-accent)}

.cell-note{
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-text);
  color:var(--c-text-3);
}

/* --- 03 тарифы --- */
.row--tariff{
  display:grid;
  grid-template-columns:var(--col-key) 1fr auto;
  gap:var(--s-6);
  align-items:baseline;
  padding:var(--s-5) 0;
}

.tariff__price{
  font-size:var(--fs-price);
  font-weight:var(--fw-bold);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-h2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* --- 05 Club и 06 вопросы: та же сетка --- */
.row--qa{
  display:grid;
  grid-template-columns:var(--col-key) 1fr;
  gap:var(--s-6);
  align-items:baseline;
  padding:var(--s-5) 0;
}
.row--qa .cell-value{font-weight:var(--fw-regular);color:var(--c-text-2)}
.row--qa .cell-value--accent{color:var(--c-accent);font-weight:var(--fw-medium)}

/* --- 07 контакты --- */
.row--contact{
  display:grid;
  grid-template-columns:var(--col-label) 1fr;
  gap:var(--s-6);
  align-items:baseline;
  padding:var(--s-5) 0;
}
/* лайм только на кликабельных строках */
a.row--contact{transition:color var(--ease)}
a.row--contact:hover,
a.row--contact:hover .cell-label{color:var(--c-accent)}
.cell-label{transition:color var(--ease)}

/* строка, где действие вынесено в кнопку */
.row--action{align-items:center}
.row--action .btn{justify-self:start}

/* кнопка, для которой ещё нет адреса */
.btn.is-pending{
  border-color:var(--c-line);
  color:var(--c-text-3);
  cursor:default;
}

/* --- 04 сноски --- */
.note{
  display:flex;
  gap:var(--s-4);
  padding:var(--s-4) 0;
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-text);
  color:var(--c-text-2);
}
.note__num{
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  line-height:var(--lh-text);
  letter-spacing:var(--ls-label);
  color:var(--c-text-3);
  font-variant-numeric:tabular-nums;
}

/* ============ 04 КОЛОНКИ 01 / 02 / 03 ============ */
.cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,56px);
  margin-top:var(--s-block);
}

.col__num{
  font-size:var(--fs-nav);
  font-weight:var(--fw-bold);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-nav);
  color:var(--c-accent);
  font-variant-numeric:tabular-nums;
}

.col__title{
  margin-top:var(--s-4);
  font-size:var(--fs-h3);
  font-weight:var(--fw-bold);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-h3);
  text-transform:uppercase;
}

.col__text{
  margin-top:var(--s-3);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-text);
  color:var(--c-text-2);
  max-width:34ch;
}

/* ============ 05 CLUB ============ */
.club{
  display:flex;
  align-items:baseline;
  gap:var(--s-8);
  flex-wrap:wrap;
  margin-top:var(--s-block);
}

.club__figure{
  font-size:var(--fs-figure);
  font-weight:var(--fw-bold);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-display);
  color:var(--c-accent);
}

.club__caption{
  font-size:var(--fs-statement);
  font-weight:var(--fw-regular);
  line-height:var(--lh-value);
  letter-spacing:var(--ls-value);
  color:var(--c-text);
}
.club__caption-dim{color:var(--c-text-3)}

.section .rule{margin-top:var(--s-section)}

.statement{
  margin-top:var(--s-6);
  font-size:var(--fs-statement);
  font-weight:var(--fw-regular);
  line-height:var(--lh-value);
  letter-spacing:var(--ls-value);
}
.statement__dim{color:var(--c-text-3)}

/* ============ ПОДВАЛ ============ */
.footer{
  border-top:1px solid var(--c-line);
  padding:var(--s-section) var(--gutter) calc(var(--s-section) + var(--tabbar-h));
}

.footer__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-6) var(--s-10);
  align-items:start;
}

/* логотип-подпись: занимает половину ширины содержимого.
   «JUST RIDE.» = 4.62 × кегля, отсюда делитель. */
.footer__logo{
  font-size:calc(min(100vw - 2 * var(--gutter) - var(--nav-space), var(--maxw)) / 2 / 4.85);
  font-weight:var(--fw-bold);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-display);
  text-transform:uppercase;
  white-space:nowrap;
}

.footer__tagline{
  margin-top:var(--s-4);
  max-width:34ch;
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  line-height:var(--lh-text);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-text-3);
}

.footer__side{display:flex;flex-direction:column;gap:var(--s-8)}

.footer__meta{grid-column:1}

/* подпись разработчика — в левой колонке, над копирайтом */
.footer__credit{
  grid-column:1;
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-text-3);
}
.footer__credit a{transition:color var(--ease)}
.footer__credit a:hover{color:var(--c-accent)}

/* ============ ДОКУМЕНТЫ ============ */
.docs{position:relative}

.docs__toggle{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-value);
  font-weight:var(--fw-medium);
  line-height:var(--lh-value);
  letter-spacing:var(--ls-value);
  color:var(--c-text);
  transition:color var(--ease);
}
.docs__toggle:hover{color:var(--c-accent)}

.docs__chevron{transition:transform var(--ease)}
.docs__toggle[aria-expanded="true"] .docs__chevron{transform:rotate(180deg)}

/* панель раскрывается вверх: подвал стоит у нижнего края страницы */
.docs__panel{
  position:absolute;
  bottom:calc(100% + var(--s-3));
  left:0;
  z-index:98;
  min-width:min(420px,80vw);
  padding:var(--s-2) var(--s-5);
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
}
.docs__panel[hidden]{display:none}

.doc{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--s-1) var(--s-5);
  align-items:baseline;
  padding:var(--s-4) 0;
  border-top:1px solid var(--c-line);
}
.docs__panel .doc:first-child{border-top:0}

.doc__name{
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  line-height:var(--lh-value);
  color:var(--c-text);
}

.doc__about{
  grid-column:1;
  font-size:var(--fs-caption);
  font-weight:var(--fw-regular);
  line-height:var(--lh-text);
  color:var(--c-text-3);
}

.doc__meta{
  grid-row:1;
  grid-column:2;
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-text-3);
  white-space:nowrap;
  transition:color var(--ease);
}
a.doc:hover .doc__meta,
a.doc:hover .doc__name{color:var(--c-accent)}
a.doc{transition:color var(--ease)}
.doc--pending .doc__meta{opacity:.6}

/* ============ УВЕЛИЧЕННОЕ ФОТО ============ */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gutter);
  background:rgba(28,28,28,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:zoom-out;
}
.lightbox[hidden]{display:none}

.lightbox__figure{
  margin:0;
  max-width:min(1100px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
}

.lightbox__figure img{
  width:100%;
  max-height:calc(100dvh - 2 * var(--gutter) - 60px);
  object-fit:contain;
}

.lightbox__caption{
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-text-3);
}

.lightbox__close{
  position:absolute;
  top:var(--s-5);
  right:var(--s-5);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  color:var(--c-text-2);
  transition:border-color var(--ease),color var(--ease);
}
.lightbox__close:hover{border-color:var(--c-accent);color:var(--c-accent)}

/* ============ НАВЕРХ ============ */
.totop{
  position:fixed;
  right:var(--s-5);
  bottom:calc(var(--s-5) + var(--tabbar-h));
  z-index:95;
  width:44px;
  height:44px;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:var(--c-bg);
  color:var(--c-text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color var(--ease),color var(--ease);
}
.totop:hover{border-color:var(--c-accent);color:var(--c-accent)}
.totop[hidden]{display:none}

/* ============ ОГЛАВЛЕНИЕ — ШИРОКИЙ ЭКРАН ============
   В покое — столбик коротких засечек у правого края: он почти
   невидим и не спорит с контентом. Активная засечка длиннее и
   лаймовая, поэтому положение на странице читается боковым
   зрением. При наведении разъезжается и показывает названия. */
.sidenav{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:96;
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border-radius:var(--radius) 0 0 var(--radius);
  background:rgba(28,28,28,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);

  /* В покое наружу торчат только засечки: подписи схлопнуты в ноль
     и не занимают места над содержимым. При наведении список
     раскрывается влево — фон один общий, а не плашка у слова. */
  transform:translateY(-50%);
  transition:background var(--ease),backdrop-filter var(--ease);
}
.sidenav:hover,
.sidenav.is-revealed{
  background:rgba(28,28,28,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.sidenav__item{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:var(--s-1) 0;
  color:var(--c-text-3);
  transition:color var(--ease);
}
.sidenav__item:hover{color:var(--c-text)}
.sidenav__item[aria-current="true"]{color:var(--c-accent)}

.sidenav__label{
  display:flex;
  align-items:baseline;
  gap:var(--s-2);
  font-size:var(--fs-nav);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
  white-space:nowrap;
  max-width:0;
  margin-right:0;
  overflow:hidden;
  opacity:0;
  transition:max-width var(--ease),margin-right var(--ease),opacity var(--ease);
}
.sidenav:hover .sidenav__label,
.sidenav.is-revealed .sidenav__label{
  max-width:220px;
  margin-right:var(--s-4);
  opacity:1;
}

.sidenav__label i{font-style:normal;opacity:.65;font-variant-numeric:tabular-nums}

/* Засечки — единственное, что видно в покое, поэтому они должны
   читаться сами по себе: 2px высотой и в полную силу цвета. */
/* В покое — точка, при наведении и на активном разделе она
   вытягивается в капсулу. */
.sidenav__bar{
  display:block;
  height:8px;
  width:8px;
  border-radius:999px;
  background:currentColor;
  transition:width var(--ease);
}
.sidenav__item:hover .sidenav__bar{width:16px}
.sidenav__item[aria-current="true"] .sidenav__bar{width:28px}

/* засечки не должны налезать на содержимое */
@media (min-width:901px){
  :root{--nav-space:48px}
  .section,.footer{padding-right:calc(var(--gutter) + var(--nav-space))}
  .tabbar{display:none}
}

/* ============ ОГЛАВЛЕНИЕ — УЗКИЙ ЭКРАН ============ */
.tabbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:99;
  height:var(--tabbar-h);
  background:var(--c-bg);
  border-top:1px solid var(--c-line);
}

.tabbar__track{
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.tabbar__track::-webkit-scrollbar{display:none}

.tabbar__item{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  padding:0 var(--s-5);
  white-space:nowrap;
  font-size:var(--fs-nav);
  font-weight:var(--fw-medium);
  line-height:var(--lh-flat);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
  color:var(--c-text-3);
  border-bottom:2px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.tabbar__item:hover{color:var(--c-text)}
.tabbar__item[aria-current="true"]{
  color:var(--c-accent);
  border-bottom-color:var(--c-accent);
}

.tabbar__num{font-variant-numeric:tabular-nums;opacity:.65}

/* ============ УЗКИЕ ЭКРАНЫ ============ */
@media (max-width:900px){
  :root{
    --header-h:60px;
    --chrome-h:60px;
    --tabbar-h:52px;
    --s-section:clamp(56px,8vh,88px);
    --col-key:1fr;
  }

  .bikes{grid-auto-columns:82%;gap:var(--s-4)}
  .carousel__nav .nav-btn{display:none}

  .cols{grid-template-columns:1fr;gap:var(--s-8)}
  .col__text{max-width:none}

  .row--tariff{
    grid-template-columns:1fr auto;
    gap:0 var(--s-4);
    padding:var(--s-4) 0;
  }
  .cell-note{grid-column:1 / -1;order:3;margin-top:var(--s-1)}

  .row--qa,
  .row--contact{
    grid-template-columns:1fr;
    gap:var(--s-1);
    padding:var(--s-4) 0;
  }
  .row--action{align-items:start}

  .club{gap:var(--s-5)}

  /* оглавление здесь нижнее — засечки прячем */
  .sidenav{display:none}

  /* подсказка про листание не нужна: пальцем это и так очевидно */
  .hint{display:none}

  /* подвал в одну колонку; «2026 JRIDE.RU» уходит вниз, после документов */
  .footer__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .footer__meta{grid-column:auto;margin-top:calc(-1 * var(--s-6))}
  .footer__credit{grid-column:auto}
  .footer__logo{font-size:calc((100vw - 2 * var(--gutter)) / 4.85)}

  /* меню документов работает так же, как на широком экране */
  .docs__panel{min-width:min(360px,calc(100vw - 2 * var(--gutter)))}
}

@media (max-width:560px){
  /* Втроём логотип, телефон и кнопка не помещаются.
     Остаётся телефон: он сам по себе действие, а кнопка
     «Выбрать велосипед» крупно стоит на первом экране. */
  .topbar .btn--primary{display:none}
  .bikes{grid-auto-columns:88%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation:none !important}
}