/* ==========================================================================
   ENDURO GOBRO — volt
   Графитовая база и один кислотный лайм. Зелёного «оливкового» нет: volt
   работает как электрический сигнал, а не как природный цвет.
   Правило: заливка volt — только у действия. Всё остальное — свет и графит.
   ========================================================================== */

:root{
  /* --- surfaces --- */
  --ink:        #0D0F0C;   /* базовый фон страницы            */
  --ink-2:      #121511;   /* секции чуть светлее             */
  --ink-3:      #191D18;   /* карточки                        */
  --ink-4:      #232820;   /* hover / вложенные поверхности   */
  --paper:      #F2F4EC;   /* светлые секции-контрасты        */
  --paper-2:    #E4E8DC;

  /* --- ink --- */
  --bone:       #F2F4EC;
  --bone-soft:  #A8AFA2;   /* 8.4:1 на --ink */
  --bone-dim:   #838B7D;   /* 5.4:1 на --ink */
  --dark-ink:   #0D0F0C;
  --dark-soft:  rgba(13,15,12,.68);

  /* --- accent ---
     volt настолько светлый, что на тёмном даёт ~14:1 и работает и текстом,
     и заливкой — но тогда по нему нужен ЧЁРНЫЙ текст, а не белый.
     На светлых секциях volt как текст — 1.6:1, поэтому там он живёт только
     заливкой-маркером под чёрными буквами (см. .section--light em). */
  --volt:       #C6E82F;
  --volt-hot:   #DFFF4F;
  --volt-soft:  rgba(198,232,47,.14);
  --volt-line:  rgba(198,232,47,.38);

  /* Строительные леса: помечает незаполненный текст. Намеренно вне палитры,
     удаляется вместе с блоками .draft. */
  --draft:      #C08A3E;

  /* Второй акцент — только для бейджа «Новинка» на карточке цены (.price-card--new).
     Осознанное разовое исключение из правила "один акцент": бейдж "Новинка" и
     бейдж "Популярный выбор" не должны сливаться в один и тот же зелёный,
     иначе оба перестают читаться как разные вещи. Больше нигде не используется. */
  --new-accent:      #E8823C;
  --new-accent-line: rgba(232,130,60,.4);

  /* --- lines --- */
  --line:       rgba(242,244,236,.10);
  --line-2:     rgba(242,244,236,.20);
  --line-dark:  rgba(13,15,12,.14);
  --panel:      rgba(13,15,12,.95);

  /* --- type ---
     Единственный дисплейный шрифт — Oswald: есть и кириллица, и латиница,
     поэтому RU и EN набираются одним начертанием. */
  --f-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* --- shape / rhythm --- */
  --r-s: 2px;
  --r-m: 3px;
  --r-l: 4px;
  --r-xl: 6px;
  --container: 1240px;
  --edge: clamp(20px, 5vw, 68px);
  --ease: cubic-bezier(.16,1,.3,1);
  --header-h: 84px;

  /* Вуаль поверх фото: гасит небо сверху и растворяет кадр снизу, но середину
     не трогает вообще — иначе сюжет тускнеет. */
  --photo-veil: linear-gradient(180deg,
      rgba(13,15,12,.44) 0%, rgba(13,15,12,0) 26%,
      rgba(13,15,12,0) 60%, rgba(13,15,12,.58) 100%);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 4px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
::selection{ background:var(--volt); color:var(--ink); }

:focus-visible{ outline:3px solid var(--volt); outline-offset:3px; border-radius:2px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--edge); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Атмосферные слои — держим лёгкими, чтобы не глушить фото
   ========================================================================== */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.34) 100%);
  mix-blend-mode:multiply;
}

/* Полоса прогресса чтения — верхняя кромка линии маршрута */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; z-index:9996;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--volt);
}

/* ==========================================================================
   Типографика секций
   ========================================================================== */
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--volt);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:currentColor; display:inline-block;
}
.section{ padding-block:clamp(76px,10vw,150px); position:relative; }
.section--tight{ padding-block:clamp(52px,7vw,90px); }
.section-head{ max-width:720px; margin-bottom:clamp(38px,5vw,64px); }
.section-head h2{
  font-size:clamp(40px,6.6vw,84px); line-height:.92; text-transform:uppercase;
  margin-top:16px; letter-spacing:-.015em;
}
.section-head h2 em{ font-style:normal; color:var(--volt); }
.section-head p{ margin-top:20px; color:var(--bone-soft); font-size:17px; max-width:54ch; }

/* Светлая секция-контраст.
   volt на белом — 1.6:1, текстом его брать нельзя. Поэтому акцентное слово
   остаётся чёрным, а volt заходит маркерной заливкой под него. */
.section--light{ background:var(--paper); color:var(--dark-ink); }
.section--light .section-head p{ color:var(--dark-soft); }
.section--light .eyebrow{ color:var(--dark-ink); }
.section--light .section-head h2 em{
  color:var(--dark-ink);
  background:linear-gradient(180deg, transparent 62%, var(--volt) 62%);
  padding-inline:.1em; margin-inline:-.1em;
}

/* Штрих маршрута между секциями — продолжение линии из первого экрана.
   inset:auto обязателен: иначе унаследованный inset:0 растянет штрих в полосу. */
.section--topo::before{
  content:''; position:absolute; inset:auto; left:50%; top:0;
  width:2px; height:clamp(40px,6vw,72px);
  background:linear-gradient(180deg,var(--volt),transparent);
  opacity:.5; pointer-events:none;
}

/* ==========================================================================
   Кнопки
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:15px; letter-spacing:.02em; text-transform:uppercase;
  padding:17px 32px; border-radius:var(--r-m); border:2px solid transparent;
  transition:transform .3s var(--ease), background .25s ease, color .25s ease,
             border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* заливка volt требует чёрного текста — по нему это 14:1, белый был бы 1.6:1 */
.btn-primary{ background:var(--volt); color:var(--ink); }
.btn-primary:hover{ background:var(--volt-hot); }

.btn-ghost{ border-color:var(--line-2); color:inherit; background:transparent; }
.btn-ghost:hover{ border-color:var(--volt); color:var(--volt); background:var(--volt-soft); }
.section--light .btn-ghost{ border-color:var(--line-dark); }
.section--light .btn-ghost:hover{ border-color:var(--dark-ink); color:var(--dark-ink); background:var(--volt); }

.btn-tg{ background:var(--ink); color:var(--bone); }
.btn-tg:hover{ background:var(--ink-3); color:var(--volt); }

.btn-arrow{ font-family:var(--f-mono); font-weight:400; font-size:17px; transition:transform .3s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(5px); }
.btn-lg{ padding:20px 40px; font-size:16px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:900;
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:var(--panel);
  border-bottom-color:var(--line);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header-h);
}
.logo{
  font-family:var(--f-display); font-size:25px; letter-spacing:.05em; font-weight:700;
  display:flex; align-items:center; gap:12px; color:var(--bone); text-transform:uppercase;
}

.nav-main{ display:flex; gap:32px; }
.nav-main a{
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-soft); position:relative; padding-block:6px; transition:color .25s ease;
}
.nav-main a:hover,.nav-main a.is-active{ color:var(--bone); }
.nav-main a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--volt);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav-main a:hover::after,.nav-main a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.header-right{ display:flex; align-items:center; gap:14px; }
.lang-switch{ display:flex; gap:4px; font-family:var(--f-mono); font-size:12px; }
.lang-switch a{
  padding:6px 10px; border-radius:var(--r-s); color:var(--bone-dim);
  border:1px solid transparent; transition:.25s ease;
}
.lang-switch a:hover{ color:var(--bone); border-color:var(--line); }
.lang-switch a.active{ color:var(--volt); border-color:var(--volt-line); }
.social-mini{ display:flex; gap:8px; }
.social-mini a{
  width:40px; height:40px; border-radius:var(--r-m); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--bone-soft);
  transition:.3s var(--ease);
}
.social-mini a svg{ width:17px; height:17px; }
.social-mini a:hover{ background:var(--ink-4); border-color:var(--volt-line); color:var(--volt); }

.burger{
  display:none; width:44px; height:44px; border-radius:var(--r-m);
  border:1px solid var(--line); background:transparent;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ width:18px; height:2px; background:var(--bone); display:block; transition:.3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(40px,7vw,80px) 0;
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(40px,7vw,80px));
  background:linear-gradient(180deg,#0D0F0C 0%,#101310 58%,var(--ink) 100%);
}

/* Пыль/морось из-под колёс */
#dust{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5; }

.hero .container{ position:relative; z-index:3; }
.hero-top{ display:grid; grid-template-columns:1.25fr .58fr; gap:clamp(32px,5vw,64px); align-items:end; padding-bottom:clamp(38px,5vw,60px); }
/* без min-width:0 длинное слово в h1 распирает грид-колонку */
.hero-top > *{ min-width:0; }

/* .line имеет overflow:hidden ради анимации, поэтому маску расширяем
   padding/margin — так line-height можно держать плакатным, не срезая
   верхушки кириллицы («Э», «б», «й»). */
.hero h1{
  font-size:clamp(34px,7vw,104px); line-height:1.02; text-transform:uppercase;
  margin-top:24px; letter-spacing:-.02em;
}
.hero h1 .line{ display:block; overflow:hidden; padding-block:.10em; margin-block:-.10em; }
.hero h1 .line > span{
  display:block; transform:translateY(105%);
  animation:lineUp 1.1s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) > span{ animation-delay:.55s }
.hero h1 .line:nth-child(2) > span{ animation-delay:.68s }
.hero h1 .line:nth-child(3) > span{ animation-delay:.81s }
@keyframes lineUp{ to{ transform:translateY(0) } }
.hero h1 em{ font-style:normal; color:var(--volt); }

.hero-sub{ font-size:clamp(16px,1.6vw,19px); color:var(--bone-soft); max-width:48ch; margin-top:26px; }
.hero-cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

/* Правая колонка героя: бейдж прижат к верху, факты — к низу, поэтому знак
   встаёт вровень с началом заголовка, а факты — с нижним краем блока. */
.hero-side{
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-start; gap:clamp(28px,4vw,48px);
}
/* полный бейдж со своим вордмарком — здесь для него хватает места */
.hero-badge{ width:clamp(230px,21vw,320px); height:auto; }

.hero-facts{
  display:flex; flex-direction:column; gap:20px;
  font-family:var(--f-mono); font-size:12.5px; color:var(--bone-dim);
  border-left:2px solid var(--line); padding-left:26px;
}
.hero-facts > div{ display:flex; flex-direction:column; position:relative; }
.hero-facts > div::before{
  content:''; position:absolute; left:-28px; top:11px; width:12px; height:2px;
  background:var(--volt);
}
.hero-facts b{ color:var(--bone); font-family:var(--f-body); font-size:16px; font-weight:800; margin-bottom:2px; }

/* Кинокадр */
.hero-frame{
  position:relative; aspect-ratio:16/9;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  overflow:hidden; border:1px solid var(--line); border-bottom:none;
  background:var(--ink-3);
}
.hud{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  color:var(--volt); text-transform:uppercase;
}
.hud > *{ position:absolute; }
.hud .gps{ bottom:18px; left:20px; text-shadow:0 1px 8px rgba(0,0,0,.9); }

/* ==========================================================================
   Фотослоты
   Класс .has-photo — переключатель: слот без него выглядит как аккуратная
   заглушка, поэтому фото можно заводить по одному.
   ========================================================================== */
/* display:flex ниже перебивает нативный [hidden] (тоже display, та же
   специфичность) — без этого правила скрытая плитка всё равно бы мерцала */
.placeholder-photo[hidden]{ display:none; }
.placeholder-photo{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px),
    linear-gradient(150deg,#1D211B,#0D0F0C);
  color:var(--bone-dim); overflow:hidden;
}
.placeholder-photo::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);
  transform:translateX(-100%); animation:shimmer 5s var(--ease) infinite;
}
@keyframes shimmer{ 55%,100%{ transform:translateX(100%) } }
.ph-tag{
  position:relative; z-index:3;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px dashed rgba(242,244,236,.28); padding:9px 15px; border-radius:var(--r-m);
  text-align:center; max-width:80%;
}

/* Кадры сняты в пасмурную погоду — их надо ВЫТЯГИВАТЬ, а не приглушать. */
.placeholder-photo > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.14) contrast(1.06);
  transition:transform .6s var(--ease), filter .6s var(--ease);
  z-index:1;
}
.placeholder-photo.has-photo{ background:var(--ink-3); }
.placeholder-photo.has-photo::before{ content:none; }
.placeholder-photo.has-photo .ph-tag{ display:none; }
.placeholder-photo.has-photo::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--photo-veil);
}
.hero-frame > img{ object-position:center 40%; }
.guide-photo > img{ object-position:center 25%; }

/* Подсказка «листай ниже» */
.scroll-hint{
  position:absolute; left:50%; bottom:calc(100% + 22px); transform:translateX(-50%);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:4;
}
.scroll-hint i{ width:2px; height:38px; background:linear-gradient(var(--volt),transparent); display:block; animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 46%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ==========================================================================
   Бегущая строка
   ========================================================================== */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding-block:18px;
}
.marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--f-display); font-size:clamp(24px,3.2vw,38px); letter-spacing:.04em;
  text-transform:uppercase; color:var(--bone-dim); padding-inline:26px;
  display:flex; align-items:center; gap:26px; white-space:nowrap;
}
/* штрих-разделитель — «отрезок маршрута» */
.marquee span::after{ content:''; width:22px; height:2px; background:var(--volt); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ==========================================================================
   Маршрут дня — линия трека, которая рисуется по скроллу
   ========================================================================== */
.trail-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(30px,5vw,70px); align-items:start; }
.waypoints{ position:relative; padding-left:78px; }
.trail-line{
  position:absolute; left:27px; top:8px; bottom:8px; width:2px;
  background:var(--line);
}
.trail-line i{
  position:absolute; inset:0; transform-origin:top; transform:scaleY(var(--p,0));
  background:var(--volt);
}
.waypoint{ position:relative; padding-block:clamp(20px,2.6vw,30px); border-top:1px solid var(--line); }
.waypoint:first-child{ border-top:none; }
.wp-marker{
  position:absolute; left:-78px; top:clamp(18px,2.4vw,26px);
  width:56px; height:56px; border-radius:var(--r-m);
  background:var(--ink-2); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:14px; color:var(--bone-dim);
  transition:.45s var(--ease);
}
.waypoint.is-active .wp-marker,
.waypoint:hover .wp-marker{
  background:var(--volt); border-color:transparent; color:var(--ink); font-weight:700;
}
.wp-body h3{ font-size:clamp(23px,2.8vw,32px); text-transform:uppercase; transition:color .35s ease; }
.waypoint.is-active .wp-body h3{ color:var(--volt); }
.wp-body p{ color:var(--bone-soft); margin-top:8px; max-width:56ch; }

.trail-aside{
  position:sticky; top:110px;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-l);
  padding:28px; overflow:hidden;
}
.trail-aside h4{ font-size:22px; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
.trail-aside p{ font-size:14px; color:var(--bone-soft); margin-bottom:6px; }
.trail-aside .aside-row{
  display:flex; justify-content:space-between; gap:16px; font-family:var(--f-mono); font-size:12px;
  color:var(--bone-dim); padding-block:9px; border-top:1px solid var(--line);
}
.trail-aside .aside-row span{ flex-shrink:0; }
.trail-aside .aside-row b{ color:var(--bone); font-weight:500; }

/* ==========================================================================
   Карточки уровня
   ========================================================================== */
.level-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.level-card{
  position:relative; padding:clamp(28px,3.4vw,44px);
  border-radius:var(--r-l); border:1px solid var(--line-dark);
  background:var(--paper-2); color:var(--dark-ink); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.level-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.35); }
.level-card .tag{
  display:inline-block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; background:var(--volt); color:var(--ink); padding:5px 10px;
}
/* кегль подобран так, чтобы «Новичок на бездорожье» и «Больше динамики»
   помещались в одну строку на десктопной ширине карточки; на узком
   телефоне при нехватке места переносится штатно, без nowrap-переполнения */
.level-card h3{ font-size:clamp(21px,2.6vw,32px); text-transform:uppercase; margin-top:14px; }
.level-card p{ color:var(--dark-soft); margin-top:14px; }
.level-card--alt{
  background:var(--ink-3); color:var(--bone); border-color:var(--line);
}
.level-card--alt p{ color:var(--bone-soft); }

/* ==========================================================================
   Сетка преимуществ со «световым пятном» под курсором
   ========================================================================== */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; }
.feature{
  position:relative; background:var(--ink-2); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:14px;
  transition:background .4s ease;
}
.feature::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(198,232,47,.09), transparent 62%);
}
.feature:hover::before{ opacity:1; }
.feature:hover{ background:var(--ink-3); }
.feature .num{ font-family:var(--f-display); font-weight:700; font-size:34px; line-height:1; color:var(--volt); }
.feature h3{ font-family:var(--f-body); font-weight:800; font-size:19px; text-transform:uppercase; letter-spacing:.01em; }
.feature p{ font-size:14.5px; color:var(--bone-soft); }

/* ==========================================================================
   Гид
   ========================================================================== */
.guide{
  display:grid; grid-template-columns:340px 1fr; gap:clamp(28px,4vw,56px); align-items:center;
  background:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,3.2vw,46px);
  position:relative; overflow:hidden;
}
.guide-photo{ aspect-ratio:4/5; border-radius:var(--r-l); position:relative; z-index:1; }
.guide-body{ position:relative; z-index:1; }
.guide-body h3{ font-size:clamp(34px,4.4vw,54px); text-transform:uppercase; margin-top:10px; }
.guide-body p{ color:var(--bone-soft); margin-top:14px; max-width:60ch; }
.guide-stats{ display:flex; gap:36px; margin-top:28px; flex-wrap:wrap; }
.guide-stats div{ font-family:var(--f-mono); font-size:11.5px; color:var(--bone-dim); letter-spacing:.05em; }
.guide-stats b{ display:block; font-family:var(--f-display); font-size:34px; font-weight:700; color:var(--volt); letter-spacing:.02em; }

/* Пометка «здесь нужен реальный текст» — намеренно вне палитры и пунктиром,
   чтобы черновик не выглядел как часть дизайна. Удаляется вместе с текстом. */
.draft{
  display:block; border-left:2px dashed var(--draft);
  padding:12px 16px; background:rgba(192,138,62,.08); border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:14px; color:var(--draft); font-family:var(--f-mono); line-height:1.55;
}

/* ==========================================================================
   Безопасность
   ========================================================================== */
.safety-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.safety-item{
  display:flex; gap:18px; border:1px solid var(--line); border-radius:var(--r-m);
  padding:26px; background:var(--ink-2);
  transition:border-color .4s ease, transform .4s var(--ease);
}
.safety-item:hover{ border-color:var(--volt-line); transform:translateY(-4px); }
.safety-item .ico{
  width:42px; height:42px; border-radius:var(--r-s); background:var(--volt); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex:none;
}
.safety-item h3{ font-family:var(--f-body); font-weight:800; font-size:16px; text-transform:uppercase; }
.safety-item p{ color:var(--bone-soft); font-size:14.5px; margin-top:6px; }

/* ==========================================================================
   Галерея
   Правила mobile-first: 11 из 12 исходников вертикальные, поэтому базовая
   плитка 3/4, а бенто-спаны включаются только с планшета.
   ========================================================================== */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.gallery-grid > *{
  border-radius:var(--r-m); overflow:hidden; position:relative; cursor:zoom-in;
  aspect-ratio:3/4;
  transition:box-shadow .55s var(--ease);
}
/* :nth-child(6n+1) вместо просто :nth-child(1) — узор повторяется на
   каждые 6 плиток, так что слоты 7-12 из админки (см. gallery-07..12)
   получают то же бенто, что и первые шесть, а не остаются простой сеткой. */
.gallery-grid > *:nth-child(6n+1){ grid-column:span 2; aspect-ratio:4/3; }
.gallery-grid > *:hover{ box-shadow:0 24px 50px -26px rgba(0,0,0,.9); z-index:2; }
/* «лёгкое движение фотографий»: двигается кадр, рамка и вуаль стоят на месте */
.gallery-grid > *:hover img{ transform:scale(1.05); filter:saturate(1.28) contrast(1.08); }

@media (min-width:761px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:10px; }
  .gallery-grid > *{ aspect-ratio:auto; }
  .gallery-grid > *:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  .gallery-grid > *:nth-child(6n+2),
  .gallery-grid > *:nth-child(6n+3),
  .gallery-grid > *:nth-child(6n+5),
  .gallery-grid > *:nth-child(6n){ grid-row:span 2; }
  .gallery-grid > *:nth-child(6n+4){ grid-column:span 2; grid-row:span 2; }
}

/* ==========================================================================
   Цены
   ========================================================================== */
.price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:stretch; }
.price-card{
  position:relative; background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s ease, box-shadow .5s var(--ease);
}
.price-card:hover{ transform:translateY(-8px); border-color:var(--line-2); box-shadow:0 34px 70px -34px rgba(0,0,0,.95); }
.price-card--feat{ border-color:var(--volt-line); }
.price-card--feat::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--volt); pointer-events:none;
}
/* Карточка «Знакомство с эндуро» — та же механика, что у --feat, но
   оранжевым: бейдж «Новинка» должен визуально отличаться от зелёного
   «Популярный выбор», а не сливаться с ним в один и тот же акцент. */
.price-card--new{ border-color:var(--new-accent-line); }
.price-card--new::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--new-accent); pointer-events:none;
}
.price-badge{
  position:absolute; top:20px; right:20px;
  background:var(--volt); color:var(--ink); font-weight:700;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--r-s);
}
.price-badge--new{ background:var(--new-accent); }
.price-card .tag{ font-family:var(--f-mono); font-size:11.5px; color:var(--volt); text-transform:uppercase; letter-spacing:.1em; }
.price-card--soon .tag{ color:var(--bone-dim); }
/* .price-badge позиционирован абсолютно в правом верхнем углу — освобождаем
   под него место, иначе подпись уезжает под бейдж */
.price-card--feat .tag, .price-card--new .tag{ display:inline-block; max-width:calc(100% - 160px); }
.price-card h3{ font-size:clamp(30px,3.4vw,42px); text-transform:uppercase; margin-top:12px; }
.price-card-desc{ color:var(--bone-soft); font-size:14.5px; margin-top:12px; }
.price-feats{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.price-feats li{ font-size:14px; color:var(--bone-soft); display:flex; gap:10px; align-items:flex-start; }
.price-feats li::before{ content:''; width:10px; height:2px; background:var(--volt); flex:none; margin-top:10px; }
/* Цена под подписью, не рядом с ней: с суммами в донгах ("10.000.000 ₫")
   строка вида "подпись — сумма" в одну линию не помещается ни при какой
   ширине карточки и переносится вразнобой. Столбиком — ровно и читаемо
   при любой длине числа. */
.price-line{ border-top:1px solid var(--line); margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:18px; }
.price-row{ display:flex; flex-direction:column; gap:5px; font-family:var(--f-mono); font-size:13px; color:var(--bone-dim); }
/* Доплата за апгрейд байка (Surron вместо Yamaha) — компактная подпись сразу
   под ценой (последней .price-row), а не отдельный блок в другом месте
   карточки. margin-top:-10px подтягивает её к сумме выше, гасит часть
   18px-промежутка .price-line, чтобы читалось как один узел, а не ещё одна
   строка того же уровня. */
.price-upgrade{
  margin-top:-10px;
  font-family:var(--f-mono); font-size:11.5px; color:var(--volt);
}
.price-row b{
  font-family:var(--f-display); font-size:clamp(24px,2.4vw,30px); font-weight:700;
  color:var(--bone); letter-spacing:.01em; white-space:nowrap;
}
.price-card--feat .price-row b{ color:var(--volt); }
.price-card .btn{ margin-top:24px; }
.price-card--soon{ justify-content:space-between; gap:24px; }
.price-note{ margin-top:22px; font-family:var(--f-mono); font-size:12.5px; color:var(--bone-dim); }
/* Базовая цена — за мотоцикл Yamaha WR155: плашка с иконкой первой строкой
   .price-line, заметная, чтобы доплата за Surron ниже читалась как «вместо
   базового байка», а не как самостоятельная цена. */
.price-bike{
  align-self:flex-start; margin-bottom:-4px;
  display:flex; gap:10px; align-items:center;
  padding:9px 14px; border:1px solid var(--volt-line); border-radius:var(--r-s);
  background:var(--volt-soft);
  font-family:var(--f-mono); font-size:12.5px; line-height:1.35; color:var(--bone);
}
.price-bike svg{ flex:none; color:var(--volt); }

/* ==========================================================================
   Подарки и скидки — две «билетные» карточки: пунктир-перфорация и
   вырезы по краям отделяют основную часть от нижней
   ========================================================================== */
.perks-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:stretch; }
.perk{
  position:relative; background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--r-xl); display:flex; flex-direction:column; overflow:hidden;
}
.perk--gift{ border-color:var(--volt-line); }
.perk--gift::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--volt); pointer-events:none;
}
.perk-main{ position:relative; flex:1; padding:clamp(26px,3vw,40px); }
.perk .tag{ display:block; font-family:var(--f-mono); font-size:11.5px; color:var(--volt); text-transform:uppercase; letter-spacing:.1em; }
.perk h3{ font-size:clamp(28px,3vw,40px); text-transform:uppercase; margin-top:12px; }
.perk p{ color:var(--bone-soft); font-size:15px; margin-top:14px; max-width:46ch; }
.perk-icon{ position:absolute; top:clamp(24px,2.8vw,36px); right:clamp(24px,2.8vw,36px); width:56px; height:56px; color:var(--volt); }
.perk--gift h3{ padding-right:72px; }
.perk-num{
  font-family:var(--f-display); font-weight:700; line-height:.9; letter-spacing:-.01em;
  font-size:clamp(84px,11vw,148px); color:var(--volt); margin-bottom:18px;
}
.perk-foot{
  position:relative; border-top:2px dashed var(--line-2);
  padding:20px clamp(26px,3vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap;
}
.perk-foot > span{ font-family:var(--f-mono); font-size:12.5px; color:var(--bone-dim); }
/* вырезы-«надрывы» билета: круги цвета страницы, половина скрыта overflow:hidden карточки */
.perk-foot::before,.perk-foot::after{
  content:''; position:absolute; top:-14px; width:26px; height:26px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-2);
}
.perk--gift .perk-foot::before,.perk--gift .perk-foot::after{ border-color:var(--volt-line); }
.perk-foot::before{ left:-14px; }
.perk-foot::after{ right:-14px; }
.perk-foot--days{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:10px; }
.perk-days{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.perk-days i{ height:10px; border:1px solid var(--volt-line); border-radius:var(--r-s); background:var(--volt-soft); }
.perk-days i.is-day0{ background:var(--volt); border-color:var(--volt); }
.perk-days-lbl{ display:flex; justify-content:space-between; gap:12px; font-family:var(--f-mono); font-size:12.5px; color:var(--bone-dim); }
.perk-days-lbl span:first-child{ color:var(--bone); }
@media (max-width:900px){
  .perks-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Отзывы
   ========================================================================== */
.testi-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.testi-nav{ display:flex; gap:10px; }
.testi-nav button{
  width:48px; height:48px; border-radius:var(--r-m); border:1px solid var(--line);
  background:transparent; display:flex; align-items:center; justify-content:center;
  font-size:17px; transition:.3s var(--ease);
}
.testi-nav button:hover{ background:var(--volt); border-color:transparent; color:var(--ink); }
/* Один отзыв на экран, а не лента карточек: .testi-viewport обрезает трек
   по высоте и плавно анимирует эту высоту под текущую карточку — отсюда
   эффект «блоки разного размера» под разную длину отзыва. Сам трек
   по-прежнему нативно скроллится (js/main.js зовёт track.scrollTo на
   i × ширину), поэтому свайп на телефоне работает без единой строчки
   кода жестов — это просто обычный горизонтальный скролл с snap. */
.testi-viewport{ overflow:hidden; margin-top:36px; transition:height .45s var(--ease); }
.testi-track{
  display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; cursor:grab;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.testi-card{
  /* <figure> тащит браузерный margin:1em 40px по умолчанию — сбрасываем,
     иначе на каждый слайд набегает лишние 80px и i-я карточка перестаёт
     совпадать с i × ширина трека */
  margin:0;
  flex:0 0 100%; width:100%; scroll-snap-align:start;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-l);
  padding:30px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .4s ease;
  overflow:hidden;
}
/* точки-пагинация под карточкой */
/* Кликабельная область точек — 24×24px (минимум для тачскрина), сама
   точка внутри остаётся компактной 9px — визуально ничего не меняется,
   просто вокруг каждой точки честная зона для пальца. */
.testi-dots{ display:flex; justify-content:center; gap:4px; margin-top:14px; }
.testi-dot{
  position:relative; width:24px; height:24px; padding:0; border:none; background:transparent;
}
.testi-dot::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:var(--line-2); transition:.3s var(--ease);
}
.testi-dot:hover::after{ background:var(--bone-dim); }
.testi-dot.is-active::after{ width:20px; border-radius:5px; background:var(--volt); }
.testi-quote{ font-size:15px; line-height:1.65; color:var(--bone-soft); }
/* justify-content:flex-end — подпись (имя + Telegram) прижата к правому
   краю карточки, а не к левому. */
.testi-foot{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:auto; }
/* коробка фиксированного размера — либо буква-заглушка, либо фото поверх неё.
   Фото не обязательно: пока не загружено через админку, img 404-ится и
   убирает сам себя через onerror, ниже остаётся буква — вёрстка не ломается. */
.testi-avatar-box{ position:relative; width:42px; height:42px; border-radius:var(--r-m); flex:none; overflow:hidden; }
.testi-avatar{
  width:100%; height:100%; border-radius:inherit;
  background:var(--volt); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:19px; font-weight:700;
}
.testi-avatar-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
.testi-name{ font-weight:800; font-size:14.5px; color:var(--bone); }
.testi-src{ font-family:var(--f-mono); font-size:11px; color:var(--bone-dim); }
.testi-stars{ color:var(--volt); font-size:13px; letter-spacing:3px; }

/* ---- крупное фото у отзыва (в анкете «фото + цитата рядом») ----
   .testi-photo-wrap появляется в разметке только когда для отзыва есть
   фото; если файл не загружен, onerror убирает весь .testi-photo-wrap и
   :has() ниже просто не совпадёт — карточка останется как выше: узкая,
   с буквой вместо фото. Больше нигде это состояние не нужно объявлять. */
.testi-card:has(.testi-photo-wrap){
  flex-direction:row; padding:0; gap:0;
}
.testi-card:has(.testi-photo-wrap) .testi-avatar-box{ display:none; }
.testi-photo-wrap{
  position:relative; flex:0 0 min(340px,40%); overflow:hidden;
  background:var(--ink-4);
}
.testi-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(1.05) contrast(1.04);
}
.testi-body{
  flex:1; min-width:0; padding:28px 26px;
  display:flex; flex-direction:column; gap:16px; justify-content:center;
}
@media (max-width:640px){
  .testi-card:has(.testi-photo-wrap){ flex-direction:column; }
  .testi-photo-wrap{ flex:none; width:100%; aspect-ratio:16/10; }
  .testi-body{ padding:22px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ border-top:1px solid var(--line-dark); }
.section--light .faq-item{ border-bottom:1px solid var(--line-dark); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:none; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-block:26px; font-family:var(--f-body); font-weight:800; font-size:clamp(16px,1.9vw,20px);
  transition:color .3s ease;
}
.faq-q:hover{ color:var(--dark-ink); }
.faq-q .plus{
  width:36px; height:36px; border-radius:var(--r-s); border:2px solid currentColor; flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-weight:400; font-size:17px;
  transition:transform .4s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.faq-item[data-open="true"] .plus{ transform:rotate(135deg); background:var(--volt); color:var(--ink); border-color:transparent; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq-item[data-open="true"] .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ color:var(--dark-soft); padding-bottom:26px; max-width:70ch; }

/* ==========================================================================
   Финальный CTA — единственный большой блок сплошного volt
   ========================================================================== */
.final-cta{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); padding:clamp(38px,6vw,88px);
  background:var(--volt);
  color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.final-cta > *{ position:relative; z-index:1; }
.final-cta h2{ font-size:clamp(36px,5.8vw,70px); text-transform:uppercase; max-width:15ch; line-height:.94; letter-spacing:-.02em; }
.final-cta p{ margin-top:18px; color:rgba(13,15,12,.78); max-width:44ch; font-weight:500; }
.final-cta .cta-side{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.final-cta .cta-hint{ font-family:var(--f-mono); font-size:12px; color:rgba(13,15,12,.7); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink-2); border-top:1px solid var(--line); color:var(--bone-dim); padding-block:64px 30px; }
.footer-top{ display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding-bottom:38px; border-bottom:1px solid var(--line); }
.footer-brand{ max-width:320px; }
/* полный бейдж со своим вордмарком живёт здесь, где хватает места */
.footer-badge{ width:112px; height:auto; margin-bottom:18px; }
.footer-logo{ font-family:var(--f-display); font-size:30px; font-weight:700; color:var(--bone); letter-spacing:.04em; text-transform:uppercase; }
.footer-brand p{ font-size:14px; margin-top:12px; color:var(--bone-dim); }
.footer-cols{ display:flex; gap:clamp(30px,6vw,72px); flex-wrap:wrap; }
/* h3, не h5 — иначе в футере пропускались бы уровни h3/h4 (последний
   заголовок на странице до этого — h2 у блока "book"). font-weight:400
   явно — иначе унаследует 700 от общего правила h1,h2,h3,h4 и станет
   заметно жирнее, чем было. */
.footer-col h3{ font-family:var(--f-mono); font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); margin:0 0 16px; }
.footer-col a,.footer-col span{ display:block; font-size:14px; margin-bottom:11px; color:var(--bone-dim); transition:color .25s ease; }
.footer-col a:hover{ color:var(--volt); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-family:var(--f-mono); font-size:11.5px; flex-wrap:wrap; gap:12px; }

/* ==========================================================================
   Липкая мобильная кнопка + наверх
   ========================================================================== */
.mobile-cta{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:880; display:none;
  gap:10px;
  transform:translateY(140%); transition:transform .45s var(--ease);
}
.mobile-cta.show{ transform:translateY(0); }
.mobile-cta .btn{ flex:1; padding:16px 18px; font-size:14.5px; }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:870;
  width:50px; height:50px; border-radius:var(--r-m);
  background:var(--ink-3); border:1px solid var(--line); color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:.4s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--volt); border-color:transparent; color:var(--ink); }

/* ==========================================================================
   Лайтбокс галереи
   Один переиспользуемый <img> вместо клона плитки: рамка не задаётся
   фиксированным прямоугольником (раньше это давало серые поля сверху/снизу
   у вертикальных фото — большинство снимков как раз портретные), а
   вписывается по собственным пропорциям картинки в границы экрана.
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:9990; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,6,4,.95);
}
.lightbox.open{ display:flex; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{ opacity:0 } }
.lightbox-inner{
  max-width:92vw; max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-img{
  display:block; max-width:92vw; max-height:88vh; width:auto; height:auto;
  object-fit:contain; user-select:none;
  animation:lbImgIn .2s ease;
}
@keyframes lbImgIn{ from{ opacity:0 } }
.lightbox-close{
  position:absolute; top:22px; right:22px; width:48px; height:48px; border-radius:var(--r-m);
  background:rgba(255,255,255,.08); border:1px solid var(--line); font-size:20px; color:var(--bone);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:var(--volt); border-color:transparent; color:var(--ink); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--bone);
  font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:var(--volt); border-color:transparent; color:var(--ink); }
.lightbox-nav:disabled{ display:none; }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
/* на телефоне отдаём фото почти весь экран; кнопки — по бокам от него,
   листать можно свайпом, стрелки остаются как запасной вариант */
@media (max-width:760px){
  .lightbox{ padding:8px; }
  .lightbox-inner{ max-width:98vw; max-height:92vh; }
  .lightbox-img{ max-width:98vw; max-height:92vh; }
  .lightbox-close{ top:12px; right:12px; width:42px; height:42px; }
  .lightbox-nav{ width:40px; height:40px; font-size:20px; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
}

/* ==========================================================================
   Появление по скроллу
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .trail-wrap{ grid-template-columns:1fr; }
  .trail-aside{ position:static; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}
/* на узких десктопах шапка перегружена — снимаем соцкнопки и поджимаем меню */
@media (max-width:1100px){
  .social-mini{ display:none; }
  .nav-main{ gap:22px; }
  .nav-main a{ font-size:12.5px; }
}
@media (max-width:900px){
  /* меню уезжает в бургер раньше, чем ломается вёрстка шапки */
  .burger{ display:flex; }
  .nav-main{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:var(--ink-2);
    flex-direction:column; gap:0; padding:8px var(--edge) 22px;
    border-bottom:1px solid var(--line);
    transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .35s var(--ease), opacity .35s ease, visibility .35s;
  }
  .nav-main.open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .nav-main a{ padding-block:16px; border-top:1px solid var(--line); font-size:16px; }
  .nav-main a:first-child{ border-top:none; }
  .nav-main a::after{ display:none; }

  .hero-top{ grid-template-columns:1fr; align-items:start; position:relative; }
  /* бейдж встаёт в правый верхний угол, вровень с заголовком — не уезжает
     вниз под кнопку, как было бы при обычном порядке в потоке */
  .hero-badge{ width:120px; position:absolute; top:24px; right:0; }
  /* заголовок не должен наезжать на бейдж на узких экранах */
  .hero h1{ padding-right:132px; }
  .hero-facts{ flex-direction:row; flex-wrap:wrap; border-left:none; padding-left:0; gap:24px 34px; border-top:2px solid var(--line); padding-top:22px; }
  .hero-facts > div::before{ display:none; }
  .hero-frame{ aspect-ratio:16/10; }
  .level-grid{ grid-template-columns:1fr; }
  .guide{ grid-template-columns:1fr; }
  .safety-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ --header-h:66px; }
  .header-right .btn{ display:none; }

  /* ---- Hero в один экран на телефоне ----
     Задача: header + заголовок + подзаголовок + факты + кнопка помещаются
     примерно в 100svh, кнопка стоит внизу. hero-top становится вертикальным
     флексом на всю высоту экрана; первая обёртка (h1+подзаголовок+CTA)
     разбирается через display:contents — её дети становятся отдельными
     flex-элементами hero-top, и их можно переставить через order без
     правки разметки. gap:16px на контейнере держит минимальный отступ
     между всеми элементами; margin-top:auto стоит и на фактах, и на кнопке,
     поэтому свободное место делится на два ровных промежутка, а не в один
     большой перед кнопкой — так распределение живёт на flex, а не на
     подобранных вручную margin. */
  .hero{ padding-top:calc(var(--header-h) + clamp(14px,4vw,22px)); }
  .hero-top{
    display:flex; flex-direction:column; gap:16px;
    min-height:calc(100svh - var(--header-h) - clamp(14px,4vw,22px));
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
  .hero-top > div:first-child{ display:contents; }
  .hero h1{ order:1; margin-top:0; font-size:clamp(36px,9vw,50px); min-width:0; }
  .hero-sub{ order:2; margin-top:0; font-size:clamp(16.5px,4.2vw,18px); min-width:0; }
  .hero-cta{ order:4; margin-top:auto; min-width:0; }
  /* факты — компактная сетка 2×2, а не длинная колонка */
  .hero-side{ align-self:auto; gap:0; order:3; min-width:0; margin-top:auto; }
  .hero-facts{
    display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
    border-top:2px solid var(--line); padding-top:16px;
  }

  .final-cta{ flex-direction:column; align-items:flex-start; }
  .footer-top,.footer-bottom{ flex-direction:column; }
  .feature-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; gap:14px; }
  /* Цены на телефоне — компактной «таблицей»: подпись слева, сумма справа в
     одну строку, вместо столбика «подпись над суммой» с большими промежутками
     (с тремя строками цены на карточку столбик растягивал карточку вдвое).
     На десктопе столбик остаётся как есть. */
  .price-card{ padding:24px 22px; }
  .price-feats{ margin-top:16px; gap:8px; }
  .price-line{ gap:0; padding-top:16px; }
  .price-bike{ margin-bottom:6px; padding:8px 12px; font-size:12px; }
  .price-row{
    flex-direction:row; align-items:baseline; justify-content:space-between;
    gap:12px; padding:9px 0; border-bottom:1px solid var(--line);
  }
  .price-row b{ font-size:22px; }
  .price-upgrade{ margin-top:10px; }
  .price-card .btn{ margin-top:16px; }
  /* линия маршрута остаётся и на телефоне — это фирменный элемент */
  .waypoints{ padding-left:34px; }
  .trail-line{ left:9px; }
  .wp-marker{ left:-34px; top:clamp(16px,2.4vw,22px); width:34px; height:34px; font-size:12px; }
  .scroll-hint{ display:none; }
  .mobile-cta{ display:flex; }
  .to-top{ bottom:88px; right:14px; }
  /* липкая панель перекрывала последнюю строку футера */
  body{ padding-bottom:76px; }
}
@media (max-width:560px){
  .hero-frame{ aspect-ratio:4/3; }
  /* Переключатель языка остаётся в шапке между вордмарком и бургером —
     просто компактнее (узкие кнопки RU/EN, меньше зазоры), иначе на телефоне
     языка не найти без прокрутки в футер. */
  .logo{ font-size:21px; white-space:nowrap; padding-block:6px; }
  .site-header .container{ gap:10px; }
  .header-right{ gap:8px; margin-left:auto; }
  .header-right .lang-switch{ gap:2px; }
  .header-right .lang-switch a{ padding:8px 8px; }
  .hero-badge{ width:96px; }
  .hero h1{ padding-right:108px; }
  /* пальцевые тап-таргеты: ссылки футера были 22px в высоту */
  .footer-col a{ padding-block:11px; margin-bottom:0; }
  .site-footer .lang-switch a{ padding:12px 14px; }
}
@media (max-width:350px){
  .logo{ font-size:19px; }
}
@media (max-width:520px){
  /* длинные подписи кнопок (например «Написать в Telegram @Gobrovn») должны переноситься */
  .btn{ white-space:normal; text-align:center; padding-inline:22px; }
  .final-cta{ padding:32px 22px; }
  .final-cta .cta-side{ width:100%; }
  .final-cta .cta-side .btn{ width:100%; }
}

/* ==========================================================================
   Уважаем «уменьшить движение» — всё гасим, контент остаётся
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  #dust{ display:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero h1 .line > span{ transform:none !important; }
  .trail-line i{ transform:scaleY(1) !important; }
}

/* Печать: только контент */
@media print{
  .site-header,.mobile-cta,.to-top,.grain,.vignette,.scroll-progress,#dust{ display:none !important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
}