/* ============================================================
   НЕБО ПОД КОСМОСОМ (блок «Как мы работаем»), 25.09.2026
   Градиент начинается ровно цветом космоса (#04050b), поэтому шва
   между полосами нет: тьма → ночная синева → голубое небо → белый
   страницы к карточкам заявки. Шаги стоят на насыщенном голубом,
   где белый текст ещё читается; карточки — уже на почти белом.
   ============================================================ */
.sky{
  position:relative;
  isolation:isolate;
  /* по вертикали не режем: ::before заходит на низ космоса */
  overflow-x:clip;
  padding-top:clamp(190px, 20vw, 340px);
  /* внизу запас под светлеющее небо и полёт огонька к земле */
  padding-bottom:clamp(150px, 15vw, 260px);
  /* доли подобраны по замеру 25.09 (1440): заголовок 37–46%, шаги 53–72%.
     До конца шагов — насыщенная синева под белый текст, дальше быстрое
     осветление к дымке, с которой начинается земля (#e6f2fb). */
  background:linear-gradient(180deg,
    #04050b 0%,
    #081634 8%,
    #123f80 18%,
    #1d62b0 30%,
    #2472c0 40%,
    #2e7ccb 54%,
    #3f8fd6 72%,
    #8fc4ec 83%,
    #cde5f7 93%,
    #e6f2fb 100%);
}
/* Шов с космосом. У полосы космоса внизу звёзды и сиреневая дымка,
   а небо начинается ровным #04050b — без перехода виден край.
   Затемнение заходит на низ космоса и гасит его в цвет начала неба. */
.sky::before{
  content:""; position:absolute; left:0; right:0;
  top:-260px; height:261px;
  background:linear-gradient(180deg, rgba(4,5,11,0), #04050b 92%);
  pointer-events:none;
}
.sky__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.sky__clouds{ position:absolute; left:0; width:100%; display:block; }
/* дальний слой — сквозь него проходит комета на спуске */
.sky__clouds--far { top:4%;  height:17%; opacity:.34; }
/* ближний — над заголовком, в переходе к синеве. Под шагами облаков
   нет нарочно: белое облако под белым текстом его съедает. */
.sky__clouds--near{ top:14%; height:21%; opacity:.78; }

/* над этой частью шапка остаётся тёмной, как над космосом */
.sky__dark{ position:absolute; left:0; right:0; top:0; height:24%; pointer-events:none; }

/* --- текст на синеве --- */
.sky .proc__head .eyebrow{ color:#a9d8ff; }
.sky .proc__head .h2{ color:#fff; }
.sky .proc__head .h2 em{ color:#bfe6ff; }
.sky .step__name{ color:#fff; }
.sky .step__text{ color:rgba(255,255,255,.84); }
.sky .step__num{ color:rgba(255,255,255,.72); }
.sky .step__icon{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), opacity .45s var(--ease); }

/* Линия между шагами: заливается светом слева направо по --fill,
   который пишет sky.js. Без скрипта --fill не задан — линия целиком. */
.sky .step__top::after{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, #fff var(--fill, 100%), rgba(255,255,255,.26) var(--fill, 100%));
}
.sky .step__top::before{ border-color:rgba(255,255,255,.7); }

/* Со скриптом шаги ждут огня. Класс ставит sky.js, поэтому без него
   ничего не приглушено. */
.sky--armed .step:not(.is-lit) .step__icon{ opacity:.5; transform:scale(.88); }
.sky--armed .step:not(.is-lit) .step__name,
.sky--armed .step:not(.is-lit) .step__text{ opacity:.55; }
.sky .step__name, .sky .step__text{ transition:opacity .45s var(--ease); }
.sky .step.is-lit .step__icon{
  box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 0 34px 6px rgba(170,220,255,.75);
}

/* Шаг 05 «Запуск и поддержка»: когда самолёт долетает — кружок зелёный.
   Без анимации (reduce-motion) — зелёный сразу: это финальное состояние. */
.sky .step:last-child.is-lit .step__icon,
.sky:not(.sky--armed) .step:last-child .step__icon{
  background:var(--metric);
  color:#fff;
  box-shadow:0 0 0 6px rgba(23,132,90,.22), 0 0 34px 8px rgba(70,210,140,.55);
}

/* текст шага поднимается и проявляется, когда над ним пролетел самолёт */
.sky--armed .step .step__name,
.sky--armed .step .step__text{ transition:opacity .5s var(--ease), transform .5s var(--ease); }
.sky--armed .step:not(.is-lit) .step__name,
.sky--armed .step:not(.is-lit) .step__text{ transform:translateY(10px); }

/* --- самолёт --- */
.plane{
  position:fixed; left:0; top:0; z-index:29;
  width:0; height:0;
  pointer-events:none;
  opacity:0;
  will-change:transform, opacity;
}
.plane__svg{
  position:absolute; left:-72px; top:-22px;
  width:144px; height:43px;
  max-width:none;                  /* общее svg{max-width:100%} при нулевом родителе сжимало до 4px */
  filter:drop-shadow(0 6px 10px rgba(10,40,80,.28));
}
/* инверсионный след: тянется назад от хвоста и тает */
.plane__trail{
  position:absolute; right:62px; top:-1px;
  width:clamp(160px, 22vw, 320px); height:3px; border-radius:3px;
  background:linear-gradient(270deg, rgba(255,255,255,.9), rgba(255,255,255,.45) 45%, rgba(255,255,255,0));
  filter:blur(.6px);
}
@media (max-width: 640px){
  .plane__svg{ left:-42px; top:-13px; width:84px; height:25px; }
  .plane__trail{ right:36px; }
}

/* --- комета: светящаяся точка с хвостом, живёт поверх страницы --- */
.comet{
  position:fixed; left:0; top:0; z-index:30;
  width:0; height:0;
  pointer-events:none;
  opacity:0;
  will-change:transform, opacity;
}
.comet__head{
  position:absolute; left:-9px; top:-9px;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle, #fff 0 32%, rgba(200,232,255,.95) 46%, rgba(120,185,255,0) 72%);
  box-shadow:0 0 22px 8px rgba(150,205,255,.7), 0 0 64px 22px rgba(80,150,255,.35);
  transform:scale(var(--cs, 1));
}
.comet__tail{
  position:absolute; left:0; top:-2px;
  width:var(--len, 0px); height:4px; border-radius:4px;
  transform-origin:0 50%;
  transform:rotate(var(--ang, 0deg));
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(170,215,255,.45) 38%, rgba(120,180,255,0));
}
.comet__ring{
  position:absolute; left:-12px; top:-12px;
  width:24px; height:24px; border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  opacity:0;
}
.comet.is-hit .comet__ring{ animation:comet-hit .75s cubic-bezier(.2,.8,.2,1) forwards; }
/* над светлым (дымка неба, земля) белый огонёк теряется — там он голубой */
.comet.is-light .comet__head{
  background:radial-gradient(circle, #fff 0 22%, #6bc1ff 38%, rgba(28,120,186,.9) 52%, rgba(28,120,186,0) 74%);
  box-shadow:0 0 18px 6px rgba(28,120,186,.45), 0 0 48px 16px rgba(107,193,255,.35);
}
.comet.is-light .comet__tail{
  background:linear-gradient(90deg, rgba(28,120,186,.9), rgba(107,193,255,.45) 40%, rgba(107,193,255,0));
}
.comet.is-light .comet__ring{ border-color:rgba(28,120,186,.85); }
@keyframes comet-hit{
  from{ opacity:.95; transform:scale(1); }
  to  { opacity:0;   transform:scale(6.5); }
}

@media (max-width: 640px){
  .sky{ padding-top:clamp(140px, 36vw, 220px); }
  .sky__clouds--far { top:3%;  height:12%; }
  .sky__clouds--near{ top:9%;  height:14%; }
}
@media (prefers-reduced-motion:reduce){
  .sky .step__icon, .sky .step__name, .sky .step__text{ transition:none; }
}