/* ==========================================================================
   V-VPN — home.css
   Главная страница «Подъём». Подключается после base.css и использует его
   токены (--c-*, --fs-*, --gutter, --container, темы .theme-light/.theme-dark,
   кнопки .btn, контейнер .container, FAQ .faq).

   Слои (SPEC §3, §5.4):
   - main — отдельный контекст наложения. Внутри него фоны секций (обычный
     поток, без позиционирования) → холст сцены .sky (fixed, z-index 0) →
     содержимое секций (position: relative; z-index: 1) → альтиметр.
     У подвала альтиметр гаснет (класс is-footer-near ставит home.js).
   - Каждая секция рисует свой вертикальный градиент; цвета на стыках
     совпадают, поэтому небо непрерывно и без JS, а контраст текста
     посчитан по концам градиентов (не ниже 4.5:1).
   - При ширине ≥ 1100px справа резерв под альтиметр: контейнеры получают
     дополнительный внутренний отступ справа, если поля окна не хватает.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Каркас страницы
   -------------------------------------------------------------------------- */

.page-home main {
  position: relative;
  z-index: 0;
  overflow-x: clip;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sky canvas {
  width: 100%;
  height: 100%;
}

/* Секции не позиционируются: их фон остаётся под холстом сцены */
.page-home main > section {
  position: static;
}

.page-home main > section > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 1100px) {
  .page-home main {
    /* поле окна справа от контейнера и нужный отступ, чтобы контент
       не заходил под альтиметр (112px + 16px воздуха) */
    --alt-space: max(0px, (100vw - var(--container)) / 2);
    --pad-r: max(var(--gutter), calc(var(--altimeter-w) + 16px - var(--alt-space)));
  }

  .page-home main .container {
    padding-right: var(--pad-r);
  }
}


/* --------------------------------------------------------------------------
   1. Герой — 0 км
   -------------------------------------------------------------------------- */

.hero {
  --hero-bleed: 0px;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--c-ground) 0%, var(--c-haze) 100%);
}

.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "visual"
    "title"
    "body";
  grid-template-rows: auto auto auto;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(12px, 3vh, 32px));
}

.hero__title {
  grid-area: title;
  /* не шире колонки даже на 320px: самая длинная строка ≈ 7.1em */
  font-size: min(var(--fs-h1-home), calc((100vw - 2 * var(--gutter)) / 7.2));
  line-height: var(--lh-h1-home);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.012em;
  color: var(--fg-heading);
  text-wrap: balance;
}

.hero__line {
  display: block;
}

.hero__body {
  grid-area: body;
  align-self: start;
  margin-top: clamp(20px, 3vh, 32px);
  padding-bottom: clamp(56px, 9vh, 112px);
}

.hero__lead {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vh, 36px);
}

.hero__note {
  max-width: 46ch;
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

.hero__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: clamp(24px, 3.4vh, 32px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fg);
}

.hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* крошечный «узел прибора»: кольцо с точкой */
.hero__facts li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--c-btn);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-btn) 0 1.2px, transparent 1.7px);
  transform: translateY(-1px);
}

/* Знак V: мобильные — небольшой, над заголовком справа */
.hero__visual {
  grid-area: visual;
  position: relative;
  justify-self: end;
  width: clamp(104px, 30vw, 184px);
  margin: 0 -4px 12px 0;
}

.hero__mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 14px 30px rgba(27, 154, 199, 0.26));
}

/* Передняя гряда облаков: слои радиальных градиентов, низ сливается с дымкой */
.hero__clouds {
  position: absolute;
  left: -14%;
  right: -18%;
  bottom: 2%;
  height: 40%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, #FFFFFF 58%, rgba(255, 255, 255, 0)) 0% 100% / 36% 74% no-repeat,
    radial-gradient(closest-side, #FFFFFF 58%, rgba(255, 255, 255, 0)) 24% 70% / 30% 88% no-repeat,
    radial-gradient(closest-side, #FFFFFF 58%, rgba(255, 255, 255, 0)) 47% 100% / 38% 78% no-repeat,
    radial-gradient(closest-side, #FFFFFF 58%, rgba(255, 255, 255, 0)) 70% 62% / 28% 92% no-repeat,
    radial-gradient(closest-side, #FFFFFF 58%, rgba(255, 255, 255, 0)) 100% 92% / 42% 84% no-repeat,
    linear-gradient(to top, rgba(246, 251, 253, 0.95) 0 24%, rgba(246, 251, 253, 0) 62%);
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 84%, transparent 100%);
}

/* задний, более голубой слой — выше и правее */
.hero__clouds::before {
  content: "";
  position: absolute;
  left: 18%;
  right: -6%;
  bottom: 38%;
  height: 72%;
  background:
    radial-gradient(closest-side, rgba(220, 240, 249, 0.95) 50%, rgba(220, 240, 249, 0)) 10% 100% / 40% 70% no-repeat,
    radial-gradient(closest-side, rgba(226, 243, 250, 0.9) 50%, rgba(226, 243, 250, 0)) 55% 60% / 36% 100% no-repeat,
    radial-gradient(closest-side, rgba(220, 240, 249, 0.9) 50%, rgba(220, 240, 249, 0)) 100% 100% / 44% 76% no-repeat;
  filter: blur(4px);
  z-index: -1;
}

@media (max-width: 479.98px) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 359.98px) {
  .hero__actions .btn,
  .launch__actions .btn {
    padding-inline: 14px;
  }
}

/* Планшет: знак справа от заголовка, низом в облаках */
@media (min-width: 700px) and (max-width: 959.98px) {
  .hero__stage {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "title visual"
      "body body";
    grid-template-rows: auto auto;
    column-gap: 24px;
    padding-top: calc(var(--header-h) + clamp(32px, 6vh, 64px));
  }

  .hero__visual {
    align-self: end;
    width: min(100%, 34vw, 300px);
    margin: 0 -8px 0 0;
  }

  .hero__body {
    margin-top: clamp(28px, 4vh, 40px);
  }
}

/* Десктоп: заголовок во всю ширину, ниже — текст слева и знак справа,
   который поднимается из облаков у нижнего края героя */
@media (min-width: 960px) {
  .hero {
    --hero-bleed: calc(var(--gutter) - 16px);
  }

  .hero__stage {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "body visual";
    grid-template-rows: auto 1fr;
    align-content: stretch;
    column-gap: clamp(40px, 4vw, 64px);
    padding-top: calc(var(--header-h) + clamp(28px, 6.5vh, 80px));
  }

  .hero__body {
    margin-top: clamp(24px, 3.2vh, 36px);
  }

  .hero__facts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
  }

  .hero__visual {
    align-self: end;
    justify-self: start;
    width: min(40vw, 540px, calc(100% + var(--hero-bleed)));
    /* верх знака заходит под короткую третью строку заголовка */
    margin: calc(var(--fs-h1-home) * -0.62) 0 clamp(4px, 2.5vh, 32px);
  }

  .hero__mark {
    filter: drop-shadow(0 24px 56px rgba(27, 154, 199, 0.28));
  }

  .hero__clouds {
    left: -6%;
    right: -40%;
    bottom: -9%;
    height: 44%;
    filter: blur(5px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  }
}

@media (min-width: 1100px) {
  .hero {
    /* знак может выйти за контейнер вправо, но не ближе 24px к альтиметру */
    --hero-bleed: calc(max(var(--gutter) + var(--alt-space), var(--altimeter-w) + 16px) - var(--altimeter-w) - 24px);
  }
}

@media (min-width: 1200px) {
  .hero__stage {
    grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
  }
}

/* Единственный оркестрованный момент без прокрутки: строки и знак «садятся».
   scene.js меряет прямоугольник #hero-mark и копирует его вычисленные
   opacity/fill для полёта, поэтому сам svg не анимируется: прозрачность —
   у обёртки .hero__visual, сдвиг — у внутренней группы знака. */
@media (prefers-reduced-motion: no-preference) {
  .hero__line {
    animation: home-hero-line 0.9s var(--ease-out) backwards;
  }

  .hero__line:nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero__line:nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero__visual {
    animation: home-fade-in 1.1s ease-out 0.12s backwards;
  }

  .hero .hero__mark-body {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: home-hero-mark 1.4s var(--ease-out) 0.12s backwards;
  }

  .hero__clouds {
    animation: home-hero-clouds 1.6s var(--ease-out) backwards;
  }
}

@keyframes home-hero-line {
  from {
    opacity: 0;
    transform: translateY(0.3em);
  }
}

@keyframes home-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes home-hero-mark {
  from {
    transform: translateY(9%) scale(0.985);
  }
}

@keyframes home-hero-clouds {
  from {
    transform: translateX(-3%);
  }
}


/* --------------------------------------------------------------------------
   2. Маршрут трафика — 9 км
   -------------------------------------------------------------------------- */

.route {
  /* внизу секции фон #8ACBE8: стандартный приглушённый цвет не держит 4.5:1 */
  --fg-muted: #2E5268;
  padding-block: var(--section-y) clamp(80px, 11vw, 144px);
  background: linear-gradient(180deg, var(--c-haze) 0%, var(--c-sky) 100%);
}

.route__head {
  display: grid;
  gap: 20px;
}

.route__title {
  max-width: 17ch;
}

.route__lead {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
}

.route__lanes {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  margin-top: clamp(48px, 7vw, 96px);
}

.lane {
  display: grid;
  gap: 16px;
}

.lane__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 650;
  color: var(--fg-heading);
}

.lane__body {
  min-width: 0;
}

.lane__diagram {
  --inset: 10px;
  --track-y: 60px;
  --x-device: 0;
  --x-provider: 0.36;
  --x-server: 0.68;
  --x-site: 1;
  position: relative;
  isolation: isolate;
  height: calc(var(--track-y) + 66px);
}

.lane__track {
  position: absolute;
  top: var(--track-y);
  left: var(--inset);
  right: var(--inset);
  height: 0;
}

.lane__seg {
  position: absolute;
  top: 0;
  height: 1px;
  transform: translateY(-50%);
}

.lane__seg--open,
.lane__seg--exit {
  background-color: rgba(6, 34, 56, 0.42);
}

.lane__seg--open {
  left: 0;
  right: 0;
}

.lane__seg--exit {
  left: calc(var(--x-server) * 100%);
  right: 0;
}

/* защищённый канал до сервера: «труба» из двух линий */
.lane__seg--tunnel {
  left: 0;
  width: calc(var(--x-server) * 100%);
  height: 12px;
  border: 1px solid rgba(11, 79, 125, 0.78);
  border-radius: 6px;
  background-color: rgba(15, 119, 160, 0.2);
}

.lane__nodes {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lane__node {
  --x: 0;
  position: absolute;
  top: var(--track-y);
  left: calc(var(--inset) + var(--x) * (100% - 2 * var(--inset)));
  width: 0;
  height: 0;
}

.lane__node--device { --x: var(--x-device); }
.lane__node--provider { --x: var(--x-provider); }
.lane__node--server { --x: var(--x-server); }
.lane__node--site { --x: var(--x-site); }

/* узел — кольцо прибора с точкой в центре */
.lane__node::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--c-deep);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-deep) 0 2px, #F3FAFD 2.6px);
  transition: box-shadow var(--dur) var(--ease-out);
}

.lane__node--server::before {
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-color: var(--c-deep);
  background: var(--c-deep);
}

.lane__node.is-hit::before {
  box-shadow: 0 0 0 5px rgba(15, 119, 160, 0.2);
}

.lane__server-mark {
  position: absolute;
  z-index: 1;
  left: -7px;
  top: -6px;
  width: 14px;
  max-width: none;
  height: auto;
  fill: #E8F4FA;
}

.lane__label {
  position: absolute;
  top: 18px;
  left: 0;
  width: max-content;
  max-width: 9.5em;
  transform: translateX(-50%);
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
  color: var(--fg);
}

.lane__node--server .lane__label {
  top: 24px;
}

.lane__node--device .lane__label {
  left: calc(-1 * var(--inset));
  transform: none;
  text-align: left;
}

.lane__node--site .lane__label {
  left: auto;
  right: calc(-1 * var(--inset));
  transform: none;
  text-align: right;
}

/* выноска наблюдателя над узлом провайдера */
.lane__observer {
  position: absolute;
  z-index: 1;
  left: calc(var(--inset) + var(--x-provider) * (100% - 2 * var(--inset)) - 0.5px);
  bottom: calc(100% - var(--track-y) + 16px);
  max-width: min(24em, calc((1 - var(--x-provider)) * (100% - 2 * var(--inset)) + var(--inset)));
  padding-left: 12px;
  border-left: 1px solid rgba(6, 34, 56, 0.42);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--fg);
  transition: border-color var(--dur) ease;
}

/* выноска продолжается до кольца узла */
.lane__observer::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 100%;
  width: 0;
  height: 8px;
  border-left: 1px solid rgba(6, 34, 56, 0.42);
  transition: border-color var(--dur) ease;
}

.lane__observer.is-active,
.lane__observer.is-active::after {
  border-color: var(--c-deep);
}

/* пакет данных */
.packet {
  position: absolute;
  top: 0;
  left: calc(var(--x-provider) * 100%);
  z-index: 3;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(6, 34, 56, 0.24);
  border-radius: var(--r-tag);
  background-color: #FFFFFF;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: pre;
  transform: translate(-50%, -50%);
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.packet__text {
  display: block;
  width: 10.9em;
  overflow: hidden;
  text-align: center;
}

.packet.is-cipher {
  border-color: var(--c-deep);
  background-color: var(--c-deep);
  color: #E8F4FA;
}

.lane--secure .packet {
  left: calc((var(--x-provider) + var(--x-server)) / 2 * 100%);
}

/* JS ведёт пакет сам (translate3d в пикселях) */
.lane.is-live .packet {
  left: 0;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}

.lane__caption {
  max-width: 40em;
  margin-top: 8px;
  color: var(--fg);
}

@media (max-width: 599.98px) {
  .lane__diagram {
    --inset: 8px;
    --track-y: 72px;
    --x-provider: 0.345;
    --x-server: 0.665;
    height: calc(var(--track-y) + 58px);
  }

  .lane__label {
    max-width: 7.2em;
    font-size: 0.75rem;
  }

  .lane__node--server .lane__label {
    top: 22px;
  }

  .lane__node--server::before {
    left: -12px;
    top: -12px;
    width: 24px;
    height: 24px;
  }

  .lane__server-mark {
    left: -6px;
    top: -5px;
    width: 12px;
  }

  .lane__observer {
    padding-left: 8px;
    font-size: 0.75rem;
  }

  .packet {
    height: 24px;
    padding: 0 5px;
    font-size: 0.6875rem;
  }
}

/* самые узкие экраны: подписи узлов мельче, провайдер и сервер правее,
   чтобы «устройство», «провайдер» и «Сервер V-VPN» не соприкасались */
@media (max-width: 399.98px) {
  .lane__diagram {
    --x-provider: 0.38;
    --x-server: 0.69;
  }

  .lane__label {
    font-size: 0.6875rem;
  }
}

@media (min-width: 900px) {
  .lane {
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 40px;
  }

  .lane__title {
    /* заголовок дорожки на уровне линии */
    padding-top: calc(var(--lane-track-y, 60px) - 0.62em);
  }

  .lane__caption {
    margin-top: 12px;
  }
}

@media (min-width: 1024px) {
  .route__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    column-gap: 64px;
  }

  .route__lead {
    padding-bottom: 0.35em;
  }

  .lane__diagram {
    --track-y: 56px;
  }

  .lane {
    --lane-track-y: 56px;
  }
}


/* --------------------------------------------------------------------------
   3. Тропопауза — 12 км: переходная полоса без контента
   -------------------------------------------------------------------------- */

.tropopause {
  height: 80vh;
  height: 80svh;
  min-height: 440px;
  background: linear-gradient(180deg, var(--c-sky) 0%, var(--c-brand) 50%, var(--c-deep) 100%);
}

.tropopause__boundary {
  padding-top: clamp(24px, 5vh, 48px);
}

/* граница слоя — пунктир на всю ширину, как на атмосферной диаграмме */
.tropopause__boundary::after {
  content: "";
  display: block;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, rgba(6, 34, 56, 0.5) 0 6px, rgba(6, 34, 56, 0) 6px 12px);
}

.tropopause__label {
  padding-bottom: 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--c-ink);
}


/* --------------------------------------------------------------------------
   4. Подключение — 30 км
   -------------------------------------------------------------------------- */

.connect {
  /* #9DB9CC на #0B4F7D — 4.2:1, поэтому приглушённый текст светлее */
  --fg-muted: #B4CCDA;
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-strato-low) 100%);
}

.connect__title {
  max-width: 14ch;
}

.steps {
  --num-size: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
  --node: 15px;
  margin-top: clamp(40px, 6vw, 72px);
}

.steps__list {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  --fill: 1;
  position: relative;
  padding-left: 40px;
}

.steps__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--num-size);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1;
  color: var(--fg-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.steps__node {
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc(var(--num-size) / 2 - var(--node) / 2);
  width: var(--node);
  height: var(--node);
  border: 1.5px solid var(--c-glow);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-glow) 0 2.5px, #0A4471 3px);
  box-shadow: 0 0 0 4px rgba(139, 230, 255, 0.1), 0 0 14px rgba(139, 230, 255, 0.45);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease;
}

.steps.is-live .steps__item:not(.is-reached) .steps__node {
  border-color: var(--line-strong);
  background: radial-gradient(circle, rgba(157, 185, 204, 0.55) 0 2px, #0A4471 2.5px);
  box-shadow: none;
}

/* траектория: отрезок от узла шага до узла следующего шага */
.steps__item:not(:last-child)::before,
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 0.5px);
  top: calc(var(--num-size) / 2);
  bottom: calc(-40px - var(--num-size) / 2);
  width: 1px;
}

.steps__item:not(:last-child)::before {
  background-color: var(--line-strong);
}

.steps__item:not(:last-child)::after {
  left: calc(var(--node) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--c-btn-dark), var(--c-glow));
  box-shadow: 0 0 10px rgba(139, 230, 255, 0.5);
  transform-origin: 50% 0;
  transform: scaleY(var(--fill));
}

.steps__title {
  margin-top: 16px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--fg-strong);
}

.steps__text {
  max-width: 36ch;
  margin-top: 12px;
  color: var(--fg-muted);
}

.connect__more {
  margin-top: clamp(40px, 6vw, 64px);
  font-weight: 500;
}

@media (min-width: 900px) {
  .steps {
    --num-size: clamp(3.5rem, 1.6rem + 3vw, 5.25rem);
    --gap: clamp(32px, 4vw, 64px);
  }

  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .steps__item {
    padding-left: 0;
  }

  .steps__node {
    position: relative;
    top: auto;
    display: block;
    margin: 20px 0 0;
  }

  .steps__item:not(:last-child)::before,
  .steps__item:not(:last-child)::after {
    top: calc(var(--num-size) + 20px + var(--node) / 2 - 0.5px);
    bottom: auto;
    left: calc(var(--node) / 2);
    width: calc(100% + var(--gap));
    height: 1px;
  }

  .steps__item:not(:last-child)::after {
    top: calc(var(--num-size) + 20px + var(--node) / 2 - 1px);
    height: 2px;
    background: linear-gradient(90deg, var(--c-btn-dark), var(--c-glow));
    transform-origin: 0 50%;
    transform: scaleX(var(--fill));
  }

  .steps__title {
    margin-top: 28px;
    padding-right: 12px;
  }
}


/* --------------------------------------------------------------------------
   5. Возможности — 70 км
   -------------------------------------------------------------------------- */

.features {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--c-strato-low) 0%, var(--c-strato) 100%);
}

.features__title {
  max-width: 16ch;
}

.features__list {
  display: grid;
  margin: clamp(40px, 6vw, 72px) 0 0;
}

.feature {
  padding-block: 28px 32px;
  border-top: 1px solid var(--line);
}

.feature:last-child {
  border-bottom: 1px solid var(--line);
}

.feature__term {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-strong);
}

.feature__icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--c-glow);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature__dot,
.feature__fill {
  fill: currentColor;
  stroke: none;
}

.feature__desc {
  max-width: 44ch;
  margin: 12px 0 0 44px;
  color: var(--fg-muted);
}

@media (max-width: 379.98px) {
  .feature__desc {
    margin-left: 0;
  }
}

@media (min-width: 800px) {
  .features__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 6vw, 104px);
  }

  .feature {
    padding-block: 32px 40px;
  }

  .feature:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }
}


/* --------------------------------------------------------------------------
   6. Устройства — 100 км, линия Кармана
   -------------------------------------------------------------------------- */

.devices {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--c-strato) 0%, var(--c-karman) 100%);
}

.devices__head {
  display: grid;
  gap: 20px;
}

.devices__title {
  max-width: 15ch;
}

.devices__text {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
}

.karman {
  margin-top: clamp(56px, 8vw, 104px);
}

.karman__note {
  padding-bottom: 14px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

.karman__rail {
  --rail-y: 0px;
  position: relative;
}

/* светящаяся линия на всю ширину окна */
.karman__rail::before,
.karman__rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.karman__rail::before {
  top: calc(var(--rail-y) - 0.5px);
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 230, 255, 0) 0%, rgba(139, 230, 255, 0.85) 12%, #8BE6FF 50%, rgba(139, 230, 255, 0.85) 88%, rgba(139, 230, 255, 0) 100%);
}

.karman__rail::after {
  top: calc(var(--rail-y) - 28px);
  height: 56px;
  background:
    radial-gradient(50% 8% at 50% 50%, rgba(139, 230, 255, 0.55) 0%, rgba(139, 230, 255, 0) 100%),
    radial-gradient(50% 50% at 50% 50%, rgba(139, 230, 255, 0.24) 0%, rgba(27, 154, 199, 0.1) 45%, rgba(27, 154, 199, 0) 100%);
}

.stations {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.station {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding-left: 32px;
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--r-tag);
}

.station__node {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1.5px solid rgba(139, 230, 255, 0.75);
  border-radius: 50%;
  background-color: var(--c-karman);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur) ease, border-color var(--dur-fast) ease;
}

.station__glyph {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--c-paper-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--dur-fast) ease;
}

.station__fill {
  fill: currentColor;
  stroke: none;
}

.station__name {
  font-weight: 500;
  line-height: 1.3;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(157, 185, 204, 0.35);
  transition: text-decoration-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.station:hover,
.station:focus-visible {
  color: var(--fg-strong);
}

.station:hover .station__name,
.station:focus-visible .station__name {
  text-decoration-color: currentColor;
}

.station:hover .station__glyph,
.station:focus-visible .station__glyph {
  color: var(--c-glow);
}

.station:hover .station__node,
.station:focus-visible .station__node {
  border-color: var(--c-glow);
  background-color: var(--c-glow);
  box-shadow: 0 0 0 5px rgba(139, 230, 255, 0.14), 0 0 16px rgba(139, 230, 255, 0.7);
}

/* мобильные: станции висят на вертикальном тросе от линии */
@media (max-width: 719.98px) {
  .stations {
    padding-top: 12px;
  }

  .stations::before {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 0;
    bottom: 28px;
    width: 1px;
    background-color: rgba(139, 230, 255, 0.32);
  }
}

@media (min-width: 720px) {
  .karman__rail {
    --rail-y: 6px;
  }

  .stations {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }

  .station {
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 0 4px 8px;
    text-align: center;
  }

  .station__node {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
  }

  /* короткий «трос» от линии к значку */
  .station::before {
    content: "";
    width: 1px;
    height: 18px;
    order: 1;
    background-color: rgba(139, 230, 255, 0.3);
    transition: background-color var(--dur-fast) ease;
  }

  .station__node { order: 0; }
  .station__glyph { order: 2; margin-top: 8px; }
  .station__name { order: 3; margin-top: 10px; }

  .station:hover::before,
  .station:focus-visible::before {
    background-color: var(--c-glow);
  }
}

.devices__linux {
  margin-top: clamp(40px, 6vw, 64px);
  color: var(--fg-muted);
}


/* --------------------------------------------------------------------------
   7. Тарифы — 400 км
   -------------------------------------------------------------------------- */

.pricing {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--c-karman) 0%, var(--c-exo) 100%);
}

.pricing__head {
  display: grid;
  gap: 32px;
}

.pricing__lead {
  max-width: 34em;
  margin-top: 20px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
}

/* Степпер устройств */
.stepper {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.stepper__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* без JS кнопки не работают — место оставляем, элементы не показываем */
.stepper:not(.is-ready) .stepper__row {
  visibility: hidden;
}

.stepper__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-strong);
}

.stepper__control {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
}

.stepper__btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background-color: transparent;
  color: var(--fg-strong);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.stepper__btn::before,
.stepper__btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background-color: currentColor;
}

.stepper__btn--minus::after {
  display: none;
}

.stepper__btn--plus::after {
  transform: rotate(90deg);
}

.stepper__btn:hover {
  background-color: var(--ghost-hover-bg);
}

.stepper__btn:active {
  background-color: rgba(139, 230, 255, 0.18);
}

.stepper__btn[aria-disabled="true"] {
  background-color: transparent;
  color: rgba(157, 185, 204, 0.4);
  cursor: default;
}

/* Режим высокой контрастности: глифы −/+ нарисованы фоном псевдоэлементов,
   который система иначе сбрасывает — кнопки превратились бы в пустые рамки */
@media (forced-colors: active) {
  .stepper__btn {
    border: 1px solid ButtonText;
  }

  .stepper__btn::before,
  .stepper__btn::after {
    forced-color-adjust: none;
    background-color: ButtonText;
  }

  .stepper__btn[aria-disabled="true"] {
    border-color: GrayText;
  }

  .stepper__btn[aria-disabled="true"]::before,
  .stepper__btn[aria-disabled="true"]::after {
    background-color: GrayText;
  }
}

.stepper__value {
  min-width: 2.6ch;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--fg-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.stepper__hint {
  max-width: 32ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

@media (min-width: 900px) {
  .pricing__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 64px;
  }

  .stepper {
    justify-items: end;
    text-align: right;
  }

  .stepper__row {
    justify-content: flex-end;
  }
}

/* Единая панель тарифов */
.plans {
  --plan-pad: clamp(20px, 2.2vw, 32px);
  display: grid;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(139, 230, 255, 0.05), rgba(139, 230, 255, 0.015));
}

.plan {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "term orbit"
    "price price"
    "meta cta";
  align-items: center;
  column-gap: 16px;
  padding: var(--plan-pad);
  container-type: inline-size;
}

.plan + .plan {
  border-top: 1px solid var(--line);
}

.plan__orbit {
  grid-area: orbit;
  justify-self: end;
  width: 72px;
  height: auto;
  overflow: visible;
}

.plan__path {
  fill: none;
  stroke: rgba(157, 185, 204, 0.62);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.plan__planet {
  fill: var(--c-brand);
}

.plan__sat {
  fill: var(--c-glow);
}

.plan__term {
  grid-area: term;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--fg-strong);
}

.plan__price {
  grid-area: price;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--fg-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

@supports (container-type: inline-size) {
  .plan__price {
    /* «24 099 ₽» ≈ 4.5em: цена всегда помещается в колонку */
    font-size: min(var(--fs-price), 21cqi);
  }
}

.plan__meta {
  grid-area: meta;
  align-self: end;
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.plan__monthly {
  color: var(--fg);
}

.plan__save {
  color: var(--c-glow);
}

.plan__cta {
  grid-area: cta;
  align-self: end;
  justify-self: end;
}

.plan__badge {
  position: absolute;
  top: 0;
  left: var(--plan-pad);
  transform: translateY(-50%);
  padding: 3px 10px 4px;
  border-radius: var(--r-tag);
  background-color: var(--c-btn-dark);
  color: var(--c-btn-dark-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* 12 месяцев: подсвеченная рамка поверх панели */
.plan--best {
  z-index: 1;
  margin: -1px;
  border-radius: var(--r-panel);
  background:
    linear-gradient(180deg, rgba(139, 230, 255, 0.1), rgba(139, 230, 255, 0.03)),
    linear-gradient(180deg, #07183A, #051130);
  box-shadow:
    inset 0 0 0 1px rgba(139, 230, 255, 0.55),
    0 0 0 1px rgba(139, 230, 255, 0.08),
    0 18px 60px -24px rgba(139, 230, 255, 0.42);
}

.plan + .plan--best {
  border-top-color: transparent;
}

.plan--best .plan__path {
  stroke: rgba(139, 230, 255, 0.85);
}

.plan--best .plan__term {
  padding-top: 8px;
}

.plan--best + .plan {
  border-top-color: transparent;
}

@media (max-width: 379.98px) {
  .plan {
    grid-template-areas:
      "term orbit"
      "price price"
      "meta meta"
      "cta cta";
  }

  .plan__cta {
    justify-self: start;
    margin-top: 16px;
  }
}

/* Планшет: 2 × 2 */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan + .plan {
    border-top: 0;
  }

  .plan:nth-child(2n) {
    border-left: 1px solid var(--line);
  }

  .plan:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .plan.plan--best {
    border-color: transparent;
  }
}

@media (min-width: 640px) {
  .plan {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "orbit"
      "term"
      "price"
      "meta"
      "cta";
    grid-template-rows: auto auto auto 1fr auto;
    align-items: start;
    padding-block: 28px var(--plan-pad);
  }

  .plan__orbit {
    justify-self: start;
    width: 80px;
    margin: 0 0 20px -2px;
  }

  .plan__price {
    margin-top: 10px;
  }

  .plan__meta {
    align-self: start;
    margin-top: 10px;
  }

  .plan__cta {
    justify-self: stretch;
    margin-top: 28px;
  }

  .plan--best .plan__term {
    padding-top: 0;
  }
}

/* Десктоп: 4 колонки, выгодная колонка выступает над панелью */
@media (min-width: 1024px) {
  .plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plan + .plan {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .plan {
    padding-block: 32px;
  }

  .plan.plan--best {
    margin: -14px -1px;
    padding-block: 46px;
    border-left-color: transparent;
  }
}

.pricing__notes {
  display: grid;
  gap: 8px 40px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

@media (min-width: 1024px) {
  .pricing__notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 40px;
  }
}


/* --------------------------------------------------------------------------
   8. Вопросы — 1 000 км
   -------------------------------------------------------------------------- */

.questions {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--c-exo) 0%, var(--c-space) 100%);
}

.questions__grid {
  display: grid;
  gap: 40px;
}

.questions__title {
  max-width: 12ch;
}

.questions__mail {
  max-width: 30ch;
  margin-top: 20px;
  color: var(--fg-muted);
}

.questions__mail a {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .questions__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    column-gap: 64px;
  }

  .questions__aside {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}


/* --------------------------------------------------------------------------
   9. Геостационарная орбита — 35 786 км
   -------------------------------------------------------------------------- */

.launch {
  background: var(--c-space);
}

.launch__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(88px, 13vh, 160px);
  text-align: center;
}

@media (min-width: 1100px) {
  /* симметричные поля, чтобы центр композиции не смещался из-за альтиметра */
  .page-home main .launch__inner {
    padding-left: var(--pad-r);
  }
}

.constellation {
  display: block;
  width: clamp(188px, 30vw, 340px);
  height: auto;
  margin-bottom: clamp(32px, 5vh, 56px);
  overflow: visible;
}

.constellation__guide path {
  fill: none;
  stroke: rgba(139, 230, 255, 0.5);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.constellation.is-built .constellation__guide {
  opacity: 0;
}

.constellation__point {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.constellation__point.is-on {
  opacity: 1;
}

.constellation__line {
  stroke: rgba(139, 230, 255, 0.46);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.constellation__star {
  fill: #CDEFFB;
}

.constellation__star--bright {
  fill: #FFFFFF;
}

.constellation__halo {
  fill: rgba(139, 230, 255, 0.16);
}

.launch__title {
  max-width: 16ch;
}

.launch__text {
  max-width: 34em;
  margin-top: 20px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
}

.launch__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.launch__alt {
  max-width: 38ch;
  margin-top: clamp(48px, 8vh, 88px);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

.launch__alt::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 16px;
  background-color: var(--line-strong);
}

@media (max-width: 479.98px) {
  .launch__actions {
    align-self: stretch;
  }

  .launch__actions .btn {
    flex: 1 1 100%;
  }
}


/* --------------------------------------------------------------------------
   10. Альтиметр (≥ 1100px)
   Позицию маркера задаёт --alt-progress на #altimeter (0 — метка «0»,
   1 — «35 786»); значение пишет scene.js.
   -------------------------------------------------------------------------- */

.altimeter {
  display: none;
}

@media (min-width: 1100px) {
  .altimeter {
    --alt-h: min(600px, calc(100vh - var(--header-h) - 96px));
    --scale-top: 80px;
    --scale-bottom: 12px;
    --scale-x: 78px;
    --alt-ink: #2E5268;
    --alt-ink-strong: #062238;
    --alt-rule: rgba(6, 34, 56, 0.34);
    --alt-accent: var(--c-btn);
    --alt-halo: rgba(234, 246, 251, 0.9);
    --focus: var(--c-deep);
    position: fixed;
    z-index: 30;
    top: calc(var(--header-h) + (100vh - var(--header-h) - var(--alt-h)) / 2);
    right: 0;
    display: block;
    width: var(--altimeter-w);
    height: var(--alt-h);
    color: var(--alt-ink);
    isolation: isolate;
    contain: layout style;
    transition: opacity var(--dur) var(--ease-out), visibility 0s linear 0s;
  }

  html[data-sky="dark"] .altimeter {
    --alt-ink: #B4CCDA;
    --alt-ink-strong: #F2F9FD;
    --alt-rule: rgba(157, 185, 204, 0.4);
    --alt-accent: var(--c-glow);
    --alt-halo: rgba(3, 9, 22, 0.9);
    --focus: var(--c-glow);
  }

  /* подложка-дымка под шкалой: держит контраст над облаками и переходами неба */
  .altimeter::before,
  .altimeter::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -28px;
    bottom: -28px;
    left: -36px;
    right: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    /* короткий кроссфейд: на смене темы обе подложки полупрозрачны, контраст проседает */
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .altimeter::before {
    /* полная плотность уже в 12px левее шкалы: подписи меток и табло целиком на подложке */
    background: linear-gradient(90deg, rgba(234, 246, 251, 0) 0, rgba(234, 246, 251, 0.7) 24px);
  }

  .altimeter::after {
    background: linear-gradient(90deg, rgba(3, 9, 22, 0) 0, rgba(3, 9, 22, 0.72) 24px);
    opacity: 0;
  }

  html[data-sky="dark"] .altimeter::before {
    opacity: 0;
  }

  html[data-sky="dark"] .altimeter::after {
    opacity: 1;
  }

  /* 10–17 км (data-transit ставит scene.js): шкала растянута через весь
     переход неба и самый плотный облачный слой — подложка плотнее, полная
     плотность по всей высоте, включая табло сверху и метку «0» снизу */
  .altimeter[data-transit]::before,
  .altimeter[data-transit]::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }

  .altimeter[data-transit]::before {
    background: linear-gradient(90deg, rgba(234, 246, 251, 0) 0, rgba(234, 246, 251, 0.8) 36px);
  }

  .altimeter[data-transit]::after {
    background: linear-gradient(90deg, rgba(3, 9, 22, 0) 0, rgba(3, 9, 22, 0.8) 36px);
  }

  /* ≥ 400 км (data-orbit ставит scene.js): светящийся край Земли проходит под
     нижними метками — плотная подложка опускается ниже метки «0», мягкий
     вертикальный край маски остаётся (без жёсткой границы поперёк лимба) */
  .altimeter[data-orbit]::after {
    bottom: -72px;
    background: linear-gradient(90deg, rgba(3, 9, 22, 0) 0, rgba(3, 9, 22, 0.85) 64px);
  }

  /* у подвала альтиметр уходит: иначе метки ложатся на колонки футера
     (класс is-footer-near ставит home.js) */
  .altimeter.is-footer-near {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* visibility переключается после затухания — фокус и клики уходят вместе с видом */
    transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }

  .altimeter__readout {
    position: absolute;
    top: 0;
    left: -8px;
    right: 14px;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: right;
    color: var(--alt-ink);
    /* ореол вокруг знаков: цифры читаются и над облаками, и на переходе неба */
    text-shadow: 0 0 2px var(--alt-halo), 0 0 6px var(--alt-halo);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .altimeter__km {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--alt-ink-strong);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .altimeter__layer {
    display: block;
    margin-top: 4px;
    line-height: 1.25;
    text-wrap: balance;
  }

  .altimeter__scale {
    position: absolute;
    top: var(--scale-top);
    bottom: var(--scale-bottom);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .altimeter__scale::before,
  .altimeter__scale::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .altimeter__scale::before {
    left: calc(var(--scale-x) - 0.5px);
    width: 1px;
    background-color: var(--alt-rule);
  }

  /* набранная высота */
  .altimeter__scale::after {
    left: calc(var(--scale-x) - 1px);
    width: 2px;
    background-color: var(--alt-accent);
    transform-origin: 50% 100%;
    transform: scaleY(var(--alt-progress, 0));
  }

  /* метки на равных интервалах, сверху вниз */
  .altimeter__tick {
    position: absolute;
    left: 0;
    width: var(--scale-x);
    height: 0;
  }

  .altimeter__tick:nth-child(1) { top: 0%; }
  .altimeter__tick:nth-child(2) { top: 12.5%; }
  .altimeter__tick:nth-child(3) { top: 25%; }
  .altimeter__tick:nth-child(4) { top: 37.5%; }
  .altimeter__tick:nth-child(5) { top: 50%; }
  .altimeter__tick:nth-child(6) { top: 62.5%; }
  .altimeter__tick:nth-child(7) { top: 75%; }
  .altimeter__tick:nth-child(8) { top: 87.5%; }
  .altimeter__tick:nth-child(9) { top: 100%; }

  .altimeter__tick a {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 60px;
    min-height: 24px;
    padding: 2px 0 2px 4px;
    border-radius: var(--r-tag);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--alt-ink);
    text-decoration: none;
    font-variant-numeric: lining-nums tabular-nums;
    text-shadow: 0 0 2px var(--alt-halo), 0 0 6px var(--alt-halo);
    transform: translateY(-50%);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .altimeter__tick a::after {
    content: "";
    flex: none;
    width: 12px;
    height: 1px;
    background-color: var(--alt-rule);
    transform-origin: 100% 50%;
    transform: scaleX(0.55);
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease;
  }

  .altimeter__tick a:hover {
    color: var(--alt-ink-strong);
  }

  .altimeter__tick a:hover::after {
    transform: none;
  }

  .altimeter__tick a[aria-current="true"] {
    font-weight: 700;
    color: var(--alt-ink-strong);
  }

  .altimeter__tick a[aria-current="true"]::after {
    background-color: var(--alt-accent);
    transform: none;
  }

  .altimeter__marker {
    position: absolute;
    top: var(--scale-top);
    left: calc(var(--scale-x) - 12px);
    width: 24px;
    height: 20px;
    margin-top: -10px;
    transform: translateY(calc((1 - var(--alt-progress, 0)) * (var(--alt-h) - var(--scale-top) - var(--scale-bottom))));
    will-change: transform;
  }

  .altimeter__marker svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: var(--c-brand);
    filter: drop-shadow(0 0 3px rgba(234, 246, 251, 0.9));
  }

  html[data-sky="dark"] .altimeter__marker svg {
    filter: drop-shadow(0 0 6px rgba(139, 230, 255, 0.6));
  }
}

/* Невысокие окна: шкала компактнее */
@media (min-width: 1100px) and (max-height: 640px) {
  .altimeter {
    --alt-h: calc(100vh - var(--header-h) - 48px);
    --scale-top: 64px;
  }

  .altimeter__layer {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   11. Уменьшение движения и печать
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .packet,
  .lane__node::before,
  .steps__node,
  .altimeter,
  .altimeter.is-footer-near,
  .altimeter__tick a::after {
    transition: none;
  }
}

@media print {
  .sky,
  .altimeter,
  .hero__visual,
  .lane__track,
  .lane__nodes,
  .lane__observer,
  .constellation,
  .stepper__row {
    display: none !important;
  }

  .page-home main > section {
    background: none !important;
    color: #000000;
  }

  .hero__stage,
  .launch__inner,
  .tropopause {
    min-height: 0;
    height: auto;
  }

  .lane__diagram {
    height: auto;
  }
}