/* ── Сцена: герой → циферблат швидкості ─────
   Один закріплений екран. Canvas малює сигнал, DOM — текст. */
.stage { position: relative; }
.stage__pin {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  --dial-y: 46%;
}
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h); padding-bottom: 132px;
}
.hero__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-hero); line-height: .94; letter-spacing: -0.047em;
  margin-top: 28px; max-width: 8.6em;
}
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero__title .ln > span { display: inline-block; }
.hero__lead { margin-top: 30px; max-width: 27em; }
.hero__cta { margin-top: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__call { display: flex; flex-direction: column; line-height: 1.15; }
.hero__call .data { font-size: 22px; color: var(--fg); }
.hero__call small { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.hero__call:hover .data { color: var(--v-300); }

/* Смуга фактів — «приладова» шкала під першим екраном. Моно лише в підписах. */
.facts {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--col-gap);
}
.facts__row {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap);
  padding-top: 18px; max-width: 980px; --fx: 1;
}
.facts__row::before { /* мережева лінія з вузлом */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-3), var(--line-2) 60%, transparent);
  transform: scaleX(var(--fx)); transform-origin: left;
}
.facts__row::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: var(--v-500); box-shadow: 0 0 10px var(--v-glow); }
.fact { display: grid; gap: 7px; }
.fact dt { font-size: 10.5px; }
.fact dd { margin: 0; font-size: 15px; color: var(--fg-2); white-space: nowrap; }
.fact dd .data { color: var(--fg); font-size: 17px; }
.hero__scroll { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg-3); padding-bottom: 2px; }
.hero__scroll svg { width: 10px; height: 14px; }

/* Статичний знак — лише якщо canvas не стартував (без JS) */
.hero__mark {
  position: absolute; z-index: 1; left: 72%; top: 50%; width: min(34vw, 460px); height: auto;
  transform: translate(-50%, -50%); opacity: .9; pointer-events: none;
}
.js .hero__mark { opacity: 0; }
.js.no-sig .hero__mark { opacity: .9; transition: opacity .6s; }

/* Циферблат */
.dial { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dial__head { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 36px); }
.dial__head .h2 { font-size: clamp(32px, 3.9vw, 58px); margin-top: 18px; max-width: 7.4em; }
.dial__num {
  position: absolute; left: 50%; top: var(--dial-y);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.dial__num .data {
  font-size: var(--fs-num-stage); line-height: .76; color: var(--fg);
  font-variant-numeric: tabular-nums; min-width: 1.8em; text-align: center;
  text-shadow: 0 0 60px rgb(177 77 255 / .35);
}
.dial__unit { margin-top: 18px; font-size: clamp(15px, 1.3vw, 19px); font-weight: 500; color: var(--fg-2); }

/* Драбина швидкостей (з B, у мові A): мережева лінія з вузлами, активний щабель світиться синхронно з кільцями */
.ladder { position: absolute; left: 0; right: 0; bottom: 36px; pointer-events: auto; }
.ladder__line { position: absolute; left: var(--gutter); top: 3px; width: calc(75% - var(--gutter)); height: 1px; background: var(--line-2); }
.ladder__line i {
  position: absolute; inset: 0; transform: scaleX(var(--lp, 0)); transform-origin: left;
  background: linear-gradient(90deg, rgb(177 77 255 / .35), var(--v-500)); box-shadow: 0 0 10px var(--v-glow);
}
.ladder__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.ladder__row a { position: relative; display: grid; justify-items: start; gap: 6px; padding-top: 26px; color: var(--fg-3); }
.ladder__node { position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: var(--line-3); transition: background-color var(--d-3), box-shadow var(--d-3) var(--e-signal); }
.ladder__v { font-size: 15px; font-weight: 500; transition: color var(--d-3); }
.ladder__v .data { font-size: clamp(28px, 2.6vw, 40px); line-height: .9; color: var(--fg-2); margin-right: 4px; transition: color var(--d-3), text-shadow var(--d-3); }
.ladder__p { font-size: 14px; }
.ladder__p .data { font-size: 16px; color: var(--fg-2); }
.ladder__t { font-size: 13px; color: var(--fg-3); letter-spacing: .02em; transition: color var(--d-3); }
.ladder li.is-past .ladder__node { background: var(--v-500); }
.ladder li.is-on .ladder__node { background: var(--v-300); box-shadow: 0 0 0 4px rgb(177 77 255 / .2), 0 0 16px var(--v-glow); }
.ladder li.is-on .ladder__v, .ladder li.is-on .ladder__v .data { color: var(--fg); }
.ladder li.is-on .ladder__v .data { text-shadow: 0 0 24px rgb(177 77 255 / .45); }
.ladder li.is-on .ladder__t { color: var(--v-400); }
.ladder a:hover .ladder__v .data { color: var(--v-300); }

/* Велике число — «переліт» лише між реальними швидкостями (roll.js) */
.roll { position: relative; display: inline-grid; overflow: clip; overflow-clip-margin: .2em; }
.roll__i { grid-area: 1 / 1; display: block; }
.dial__num .roll { transition: color var(--d-4) var(--e-signal); }
.dial.is-dim .dial__num .roll { color: var(--fg-4); text-shadow: none; }

@media (max-width: 900px) {
  .ladder__row { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .ladder__line { width: calc(50% - var(--gutter)); }
  .ladder__row li:nth-child(n+3) a { padding-top: 0; }
  .ladder__row li:nth-child(n+3) .ladder__node { display: none; }
}
@media (max-width: 760px) {
  .stage__pin { --dial-y: 44%; min-height: 600px; }
  .hero { justify-content: flex-end; }
  .hero__title { margin-top: 18px; }
  .hero__lead { margin-top: 20px; font-size: 16px; }
  .hero__cta { margin-top: 28px; gap: 20px; }
  .hero__cta .btn { width: 100%; }
  .hero__call .data { font-size: 20px; }
  .hero__call { display: none; }
  .hero { padding-bottom: 178px; }
  .facts { bottom: 18px; grid-template-columns: 1fr; }
  .facts__row { grid-template-columns: 1fr 1fr; row-gap: 14px; padding-top: 14px; }
  .fact dd { font-size: 14px; } .fact dd .data { font-size: 15px; }
  .hero__scroll { display: none; }
  .hero__mark { left: 64%; top: 27%; width: 58vw; }
  .dial__head { top: calc(var(--header-h) + 20px); }
  .dial__head .h2 { font-size: 30px; margin-top: 12px; }
  .dial__unit { margin-top: 10px; }
  .dial__num .data { font-size: min(10.5vh, 20vw); }
  .ladder { bottom: 22px; }
  .ladder__v .data { font-size: 30px; }
  .ladder__t { font-size: 12px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .hero__title { font-size: min(var(--fs-hero), 12vh); }
}

/* Без руху: сцена стає звичайною секцією (і без JS) */
.rm .stage__pin, html:not(.js) .stage__pin { height: auto; min-height: 0; overflow: visible; }
.rm .hero, html:not(.js) .hero { position: relative; min-height: 100svh; }
.rm .dial, html:not(.js) .dial { position: relative; inset: auto; padding: 80px 0; overflow-x: clip; /* статичні кільця 440px не розширюють мобільний в'юпорт */ }
.rm .dial__head, .rm .dial__num, html:not(.js) .dial__head, html:not(.js) .dial__num { position: static; transform: none; }
.rm .ladder, html:not(.js) .ladder { position: relative; inset: auto; }
.rm .ladder__line, html:not(.js) .ladder__line { --lp: 1; }
html:not(.js) .hero__mark { top: 50vh; }
.rm .dial__num, html:not(.js) .dial__num { margin: 150px auto 170px; position: relative; left: auto; top: auto; }
/* статичний циферблат (лише без руху / без JS) — ті самі три дуги знака, повністю засвічені */
.dial__static { display: none; }
.rm .dial__static, html:not(.js) .dial__static { display: block; position: absolute; left: 50%; top: 42%; width: 440px; height: 440px; max-width: none; transform: translate(-50%, -50%); z-index: -1; filter: drop-shadow(0 0 8px rgb(177 77 255 / .55)); }
.rm .ladder li .ladder__node, html:not(.js) .ladder li .ladder__node { background: var(--v-500); }
.rm .stage__canvas, html:not(.js) .stage__canvas { position: absolute; height: 100svh; }
.rm .facts, html:not(.js) .facts { top: calc(100svh - 110px); bottom: auto; }

/* Одометр (roll.js): барабани цифр */
.odo { display: inline-flex; line-height: .8; }
.odo__d { display: inline-block; height: .8em; overflow: clip; vertical-align: top; }
.tvmon__num.odo { display: flex; }
.odo__s { display: block; }
.odo__s i { display: block; height: .8em; font-style: normal; width: max-content; margin-inline: auto; }