/* Базовый шрифт сайта. Задаём на body, чтобы элементы вне основного
   Rubik-контейнера (тосты, модалки, куки-баннер — их JS кладёт прямо в body)
   не откатывались на serif браузера. Грузится раньше инлайн-стилей страниц. */
body {
  font-family: Rubik, Arial, sans-serif;
  color: #171512;
}

/* Дизайн-токены. Инлайн-стили в шаблонах унаследованы дословно из макетов;
   эти переменные — единая точка правды для повторно используемых классов
   ниже и нового кода. */
:root {
  --ink: #171512;
  --paper: #F6F1E7;
  --red: #E23D3D;
  --yellow: #F2B233;
  --green: #2F9E44;
  --blue: #3478F6;
  --muted: #5b554b;
  --radius: 12px;
}

/* Фон страниц: кремовая бумага + едва заметная сетка точек-пипсов (как поле
   настолки) + тонкое зерно (feTurbulence), чтобы фон выглядел как картон
   коробки. Всё очень слабой прозрачности — не мешает контенту. Класс висит на
   корневом div.mv-page каждой страницы (он покрывает вьюпорт). */
.mv-page {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(rgba(23, 21, 18, 0.05) 1.5px, transparent 1.6px);
  background-size: 180px 180px, 24px 24px;
  background-position: 0 0, 0 0;
}

/* Дорожка-трек лендинга: фиксированный вертикальный рельс справа с «клетками»
   по секциям; фишка (как игровая) едет к активной секции при скролле. */
.mv-track {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}
.mv-track-rail {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  /* ровный частый пунктир (граница dashed рендерится «рвано») */
  background-image: repeating-linear-gradient(to bottom, var(--ink) 0 4px, transparent 4px 8px);
  opacity: 0.5;
}
.mv-track-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  display: block;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mv-track-dot:hover { transform: scale(1.18); }
.mv-track-dot.active { background: var(--yellow); }
.mv-track-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.mv-track-dot:hover .mv-track-tip,
.mv-track-dot:focus-visible .mv-track-tip { opacity: 1; }
.mv-track-piece {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(-50%, -50%);
  transition: top 0.4s cubic-bezier(0.4, 1.25, 0.5, 1);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1100px) { .mv-track { display: none; } }
@media (prefers-reduced-motion: reduce) { .mv-track-piece { transition: none; } }

/* Плашки платформ в герое — кликабельны, ведут к секции загрузки; на ховере
   подсвечиваются золотым, чтобы читались как действие. */
.pill-dl { cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; text-decoration: none; }
.pill-dl:hover { background: var(--yellow) !important; transform: translateY(-1px); }

/* Общий хедер сайта (partials/siteheader): на узких экранах десктопная
   навигация прячется, показывается бургер с выпадающей панелью. */
.mv-header #burger-btn { display: none; }
.mv-header #mobile-menu { display: none; }
@media (max-width: 900px) {
  .mv-header .r-navlinks,
  .mv-header .hdr-desktop { display: none !important; }
  .mv-header #burger-btn { display: flex; }
  .mv-header #mobile-menu.open { display: flex; }
  .mv-header .r-nav { flex-wrap: nowrap !important; }
}

/* Повторяющиеся примитивы форм (CSS побайтово равен прежним инлайн-стилям —
   визуально ничего не меняется, но правится теперь в одном месте). */
.mv-input {
  border: 2.5px solid #171512;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  background: #fff;
}
.mv-flabel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
.mv-otp {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 2.5px solid #171512;
  border-radius: 10px;
  background: #fff;
}

/* Общие приёмы дизайн-системы: hover-сдвиги и рост offset-тени.
   Базовая тень — inline, увеличенная задаётся переменной --hs. */
.hv { transition: transform 0.06s ease, box-shadow 0.06s ease; }
.hv:hover { transform: translate(-1px, -1px); }
.hv[style*="--hs"]:hover { box-shadow: var(--hs) !important; }

a.lnk-ink:hover { color: #E23D3D !important; }
a.lnk-gold:hover { color: #F2B233 !important; }
a.lnk-white:hover { color: #fff !important; }
button.flag-btn:hover { color: #E23D3D !important; }

/* Reveal-анимации при скролле: элементы с [data-reveal] всплывают при появлении
   во вьюпорте (site.js, IntersectionObserver). --rd — каскадная задержка. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
  }
  [data-reveal="left"] { transform: translateX(-36px); }
  [data-reveal="right"] { transform: translateX(36px); }
  [data-reveal="pop"] { transform: translateY(28px) scale(0.95); }
  [data-reveal="tilt"] { transform: translateY(28px) rotate(-1.5deg); }
  [data-reveal].in { opacity: 1; transform: none; }
}

.form-err {
  display: none;
  background: #FDECEC;
  border: 2px solid #E23D3D;
  color: #B23030;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.form-err.show { display: block; }

/* Модальные окна в стиле сайта (site.js: mvModal). */
#mv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 21, 18, 0.55);
}
#mv-modal-overlay.show { display: flex; }
#mv-modal-overlay.show .mv-modal { animation: mv-modal-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes mv-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.mv-modal {
  /* модалка живёт в document.body вне Rubik-контейнера — задаём шрифт явно */
  font-family: Rubik, Arial, sans-serif;
  color: #171512;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 2.5px solid #171512;
  border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(23, 21, 18, 0.3);
  padding: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mv-modal h3 {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0;
  text-transform: uppercase;
}
.mv-modal p { margin: 0; font-size: 14px; line-height: 1.5; color: #5b554b; }
.mv-modal input, .mv-modal select {
  font-family: Rubik, Arial, sans-serif;
  border: 2.5px solid #171512;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.mv-modal .mv-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.mv-modal button {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  padding: 11px 22px;
  border: 2.5px solid #171512;
  border-radius: 10px;
  cursor: pointer;
}
.mv-modal .mv-btn-primary { background: #E23D3D; color: #fff; box-shadow: 3px 3px 0 #171512; }
.mv-modal .mv-btn-danger { background: #E23D3D; color: #fff; box-shadow: 3px 3px 0 #171512; }
.mv-modal .mv-btn-ghost { background: #fff; color: #171512; box-shadow: 3px 3px 0 rgba(23,21,18,0.2); }

#mv-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  background: #171512;
  color: #F6F1E7;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  padding: 13px 24px;
  border: 2.5px solid #F2B233;
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(23, 21, 18, 0.35);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300;
}
#mv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }