/* ── Сцена: герой → циферблат швидкості ─────
   Один закріплений екран. Canvas малює сигнал, DOM — текст. */
.stage { position: relative; }
.stage__pin {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  --dial-y: 53%;
}
.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: 72px;
}
.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); }

.hero__base {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  font-size: 12.5px; color: var(--fg-3);
}
.hero__base .netline { color: var(--line-2); }
.hero__base .netline i { background: var(--v-500); box-shadow: 0 0 10px var(--v-glow); }
.hero__scroll { display: inline-flex; align-items: center; gap: 10px; }
.hero__scroll svg { width: 10px; height: 14px; }

/* Циферблат */
.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); }

.dial__caps { position: absolute; left: var(--gutter); bottom: 64px; width: min(330px, 26vw); }
.cap { position: absolute; left: 0; bottom: 0; width: 100%; }
.cap__name { font-size: 26px; color: var(--v-400); letter-spacing: .02em; }
.cap__price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; color: var(--fg-3); font-size: 15px; }
.cap__price .data { font-size: 40px; color: var(--fg); line-height: 1; }
.cap p { margin-top: 14px; color: var(--fg-2); font-size: 16px; line-height: 1.5; }

.dial__scale {
  position: absolute; right: var(--gutter); top: var(--dial-y); transform: translateY(-50%);
  display: grid; gap: 22px; text-align: right;
}
.dial__scale li { display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: var(--fg-4); transition: color var(--d-3) var(--e-signal); }
.dial__scale .data { font-size: 28px; line-height: 1; }
.dial__scale li::after { content: ""; width: 24px; height: 1px; background: currentColor; }
.dial__scale li.is-on { color: var(--fg); }
.dial__scale li.is-on::after { background: var(--v-500); box-shadow: 0 0 8px var(--v-glow); }
.dial__scale small { font-size: 12.5px; color: var(--fg-3); }

@media (max-width: 900px) {
  .dial__scale { display: none; }
  .dial__caps { width: calc(100% - 2 * var(--gutter)); bottom: 40px; }
}
@media (max-width: 760px) {
  .stage__pin { --dial-y: 45%; min-height: 600px; }
  .hero { justify-content: flex-end; padding-bottom: 96px; }
  .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__base { bottom: 22px; grid-template-columns: 1fr auto; }
  .hero__base > span:first-child { display: none; }
  .dial__head { top: calc(var(--header-h) + 20px); }
  .dial__head .h2 { font-size: 30px; margin-top: 12px; }
  .dial__unit { margin-top: 10px; }
  .cap__name { font-size: 22px; }
  .cap__price .data { font-size: 32px; }
  .cap p { font-size: 15px; margin-top: 10px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .hero__title { font-size: min(var(--fs-hero), 12vh); }
}

/* Без руху: сцена стає звичайною секцією */
.rm .stage__pin { height: auto; min-height: 0; overflow: visible; }
.rm .hero { position: relative; min-height: 100svh; }
.rm .dial { position: relative; inset: auto; padding: 80px 0; }
.rm .dial__head, .rm .dial__num, .rm .dial__caps, .rm .dial__scale, .rm .cap { position: static; transform: none; }
.rm .dial__num { margin: 48px auto; }
.rm .dial__caps { width: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding-inline: var(--gutter); }
.rm .dial__scale { display: none; }
.rm .stage__canvas { position: absolute; height: 100svh; }
.rm .hero__base { top: calc(100svh - 48px); bottom: auto; }