/* ============================================================
   BitStat — секція інтеграцій
   Три подачі перемикаються класом на секції:
     .rm--mono   монохромні марки (рекомендовано)
     .rm--color  кольорові іконки
     .rm--text   лише назви, без марок
   Мобільна версія: та сама доріжка з горизонтальною прокруткою,
   прилипанням і затуханням по краях.
   ============================================================ */

[data-site-refresh-content] .rm { position: relative; padding: var(--sp-12) 0 var(--sp-25); }
[data-site-refresh-content] .rm-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }

/* ---------- заголовок ---------- */
[data-site-refresh-content] .rm-head { text-align: center; margin-bottom: var(--sp-16); }
[data-site-refresh-content] .rm-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
[data-site-refresh-content] .rm-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); display: block; }
[data-site-refresh-content] .rm-head p {
  margin: var(--sp-3) auto 0; max-width: 460px;
  font-size: var(--fs-15); line-height: 1.6; color: var(--text-muted);
}

/* ---------- доріжка ---------- */
[data-site-refresh-content] .rm-track { position: relative; }

/* затухання по краях — натяк, що ряд прокручується */
[data-site-refresh-content] .rm-track::before, [data-site-refresh-content] .rm-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px;
  pointer-events: none; z-index: 3; opacity: 0; transition: opacity .2s;
}
[data-site-refresh-content] .rm-track::before { left: 0;  background: linear-gradient(90deg, var(--surface-base), transparent); }
[data-site-refresh-content] .rm-track::after  { right: 0; background: linear-gradient(270deg, var(--surface-base), transparent); }
[data-site-refresh-content] .rm-track.scrollable::before, [data-site-refresh-content] .rm-track.scrollable::after { opacity: 1; }

[data-site-refresh-content] .rm-scroll {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
[data-site-refresh-content] .rm-scroll::-webkit-scrollbar { height: 0; }

[data-site-refresh-content] .rm-row {
  display: flex; align-items: flex-start;
  width: max-content; margin: 0 auto;
  padding: var(--sp-8) var(--sp-2) 0;
  position: relative;
}

/* ---------- станція ---------- */
[data-site-refresh-content] .rm-stop {
  position: relative; z-index: 1;
  width: 116px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  scroll-snap-align: center;
}

/* лінія під логотипами */
[data-site-refresh-content] .rm-stop::before {
  content: ""; position: absolute; z-index: 0;
  top: 82px; left: -50%; width: 100%; height: 1px;
}
[data-site-refresh-content] .rm-stop:first-of-type::before { display: none; }
[data-site-refresh-content] .rm-stop.live::before { background: linear-gradient(90deg, rgba(45,105,76,.3), rgba(45,105,76,.75)); }
[data-site-refresh-content] .rm-stop.soon::before {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px);
}

/* ---------- марка ---------- */
[data-site-refresh-content] .rm-logo {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s ease, opacity .22s ease;
}
[data-site-refresh-content] .rm-logo img { max-width: 100%; max-height: 100%; display: block; }
[data-site-refresh-content] .rm-stop:hover .rm-logo { transform: translateY(-4px); }

/* — монохром — */
[data-site-refresh-content] .rm--mono .rm-logo img { opacity: .9; }
[data-site-refresh-content] .rm--mono .rm-stop.soon .rm-logo img { opacity: .34; }
[data-site-refresh-content] .rm--mono .rm-stop:hover .rm-logo img { opacity: 1; }

/* — кольорові плитки — */
[data-site-refresh-content] .rm--color .rm-logo { border-radius: var(--r-16); overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.55); }
[data-site-refresh-content] .rm--color .rm-logo img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }
[data-site-refresh-content] .rm--color .rm-stop.soon .rm-logo { opacity: .34; filter: saturate(.15); }
[data-site-refresh-content] .rm--color .rm-stop.soon:hover .rm-logo { opacity: .85; filter: saturate(.7); }

/* — лише назви — */
[data-site-refresh-content] .rm--text .rm-logo { display: none; }
[data-site-refresh-content] .rm--text .rm-stop::before { top: 22px; }
[data-site-refresh-content] .rm--text .rm-node { margin-top: 18px; }
[data-site-refresh-content] .rm--text .rm-name { font-size: var(--fs-15); font-weight: 600; }

/* ---------- вузол на лінії ---------- */
[data-site-refresh-content] .rm-node {
  position: relative; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: 18px; transition: transform .22s ease;
}
[data-site-refresh-content] .rm-stop.live .rm-node {
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px rgba(60,217,122,.14), 0 0 0 7px var(--surface-base);
}
[data-site-refresh-content] .rm-stop.soon .rm-node {
  width: 6px; height: 6px; margin-top: 19.5px;
  background: var(--border-light);
  box-shadow: 0 0 0 4px var(--surface-base);
}
[data-site-refresh-content] .rm-stop:hover .rm-node { transform: scale(1.25); }

[data-site-refresh-content] .rm-name {
  margin-top: var(--sp-4);
  font-size: var(--fs-13); font-weight: 500; color: var(--text-secondary);
  white-space: nowrap;
}
[data-site-refresh-content] .rm-stop.soon .rm-name { color: var(--text-muted); }

/* ---------- позначка «зараз» ---------- */
[data-site-refresh-content] .rm-now {
  position: relative; z-index: 2;
  width: 72px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
[data-site-refresh-content] .rm-now::before, [data-site-refresh-content] .rm-now::after {
  content: ""; position: absolute; z-index: 0; top: 82px; height: 1px; width: 94px;
}
[data-site-refresh-content] .rm-now::before { left: -58px; background: linear-gradient(90deg, rgba(45,105,76,.75), rgba(45,105,76,.35)); }
[data-site-refresh-content] .rm-now::after  { left: 36px;  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px); }
[data-site-refresh-content] .rm--text .rm-now::before, [data-site-refresh-content] .rm--text .rm-now::after { top: 22px; }

[data-site-refresh-content] .rm-now-tick {
  width: 1px; height: 22px; margin-top: 60px;
  background: linear-gradient(to bottom, transparent, var(--accent-bright));
}
[data-site-refresh-content] .rm--text .rm-now-tick { margin-top: 0; }
[data-site-refresh-content] .rm-now-lbl {
  margin-top: var(--sp-3);
  font-size: var(--fs-11); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}

/* ---------- поява ---------- */
[data-site-refresh-content] .rm-track.ready .rm-stop, [data-site-refresh-content] .rm-track.ready .rm-now { opacity: 0; transform: translateY(10px); }
[data-site-refresh-content] .rm-track.ready.in .rm-stop, [data-site-refresh-content] .rm-track.ready.in .rm-now {
  animation: rmIn .55s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rmIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .rm-track .rm-stop, [data-site-refresh-content] .rm-track .rm-now { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Мобільна версія
   Клас .is-mobile дублює медіазапит — щоб можна було показати
   телефонну ширину всередині десктопної сторінки.
   ============================================================ */

[data-site-refresh-content] .rm.is-mobile { padding: var(--sp-20) 0; }
[data-site-refresh-content] .rm.is-mobile .rm-wrap { padding: 0 var(--sp-5); }
[data-site-refresh-content] .rm.is-mobile .rm-head { margin-bottom: var(--sp-12); }
[data-site-refresh-content] .rm.is-mobile .rm-head p { font-size: var(--fs-14); }
[data-site-refresh-content] .rm.is-mobile .rm-scroll { margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }
[data-site-refresh-content] .rm.is-mobile .rm-row { margin: 0; padding-top: var(--sp-6); }
[data-site-refresh-content] .rm.is-mobile .rm-stop { width: 84px; }
[data-site-refresh-content] .rm.is-mobile .rm-logo { width: 44px; height: 44px; }
[data-site-refresh-content] .rm.is-mobile .rm-stop::before { top: 62px; }
[data-site-refresh-content] .rm.is-mobile .rm-node { margin-top: 14px; }
[data-site-refresh-content] .rm.is-mobile .rm-stop.soon .rm-node { margin-top: 15.5px; }
[data-site-refresh-content] .rm.is-mobile .rm-name { font-size: var(--fs-11); margin-top: var(--sp-3); }
[data-site-refresh-content] .rm.is-mobile .rm-now { width: 54px; }
[data-site-refresh-content] .rm.is-mobile .rm-now::before, [data-site-refresh-content] .rm.is-mobile .rm-now::after { top: 62px; width: 69px; }
[data-site-refresh-content] .rm.is-mobile .rm-now::before { left: -42px; }
[data-site-refresh-content] .rm.is-mobile .rm-now::after  { left: 27px; }
[data-site-refresh-content] .rm.is-mobile .rm-now-tick { margin-top: 44px; height: 18px; }
[data-site-refresh-content] .rm.is-mobile .rm-now-lbl { font-size: 10px; }

@media (max-width: 760px) {
  [data-site-refresh-content] .rm { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .rm-wrap { padding: 0 var(--sp-5); }
  [data-site-refresh-content] .rm-head { margin-bottom: var(--sp-8); }
  [data-site-refresh-content] .rm-head p { font-size: var(--fs-14); }
  [data-site-refresh-content] .rm-scroll { margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }
  [data-site-refresh-content] .rm-row { margin: 0; padding-top: var(--sp-6); }
  [data-site-refresh-content] .rm-stop { width: 84px; }
  [data-site-refresh-content] .rm-logo { width: 44px; height: 44px; }
  [data-site-refresh-content] .rm-stop::before { top: 62px; }
  [data-site-refresh-content] .rm-node { margin-top: 14px; }
  [data-site-refresh-content] .rm-stop.soon .rm-node { margin-top: 15.5px; }
  [data-site-refresh-content] .rm-name { font-size: var(--fs-11); margin-top: var(--sp-3); }
  [data-site-refresh-content] .rm-now { width: 54px; }
  [data-site-refresh-content] .rm-now::before, [data-site-refresh-content] .rm-now::after { top: 62px; width: 69px; }
  [data-site-refresh-content] .rm-now::before { left: -42px; }
  [data-site-refresh-content] .rm-now::after  { left: 27px; }
  [data-site-refresh-content] .rm-now-tick { margin-top: 44px; height: 18px; }
  [data-site-refresh-content] .rm-now-lbl { font-size: 10px; }
}