/* ============================================================
   ЗЕМЛЯ (под небом), 25.09.2026
   Верх — та же дымка, которой кончается небо (#e6f2fb), поэтому шва
   нет: горизонт, дальше светлая земля с горизонталями рельефа.
   Горизонтали рисует sky.js на .earth__relief; маска гасит их к горизонту.
   ============================================================ */
.earth{
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding-top:clamp(40px, 4vw, 72px);
  padding-bottom:clamp(40px, 4vw, 72px);   /* после точки назначения сразу футер */
  /* запасной фон, пока (или если) ландшафт не нарисован: те же краски земли */
  background:linear-gradient(180deg, #e6f2fb 0%, #cfdcc4 14%, #93a66f 30%, #7f9259 58%, #a39570 84%, var(--bg) 100%);
}
/* ландшафт рисует sky.js (половинное разрешение, растянут — поля мягкие) */
.earth__relief{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0;                                  /* проявляется, когда дорисован */
  transition:opacity .9s var(--ease);
}
/* спутниковый снимок вместо рисованной земли (когда положен в разметку) */
.earth__sat{
  position:absolute; left:0; top:0; z-index:-2;
  width:100%; height:100%;          /* на широком экране top и height пишет sky.js */
  object-fit:cover; object-position:50% 0;
  pointer-events:none;
}
/* центр, поставленный на объект снимка, а не в середину карты */
.earth__map.is-orbit .earth__hub.is-placed{ left:var(--x); top:var(--y); }

/* --- снимок: карта выше, дымка только под заголовком, подписи над метками --- */
.earth__map.is-orbit.is-sat{ height:clamp(560px, 50vw, 860px); }
/* под снимком дымка плотная до самого подзаголовка, иначе текст ложится на крыши */
.earth.has-sat::before{
  height:var(--fog-h, 34%);
  background:linear-gradient(180deg, #e6f2fb 0%, #e6f2fb 72%, rgba(230,242,251,.6) 86%, rgba(230,242,251,0) 100%);
}
.earth__pin{ display:none; }
.earth__map.is-sat .earth__nodes li{ transform:translate(-50%, calc(-100% - 20px)); }
.earth__map.is-sat .earth__pin{
  display:block; position:absolute; left:50%; top:calc(100% + 20px);
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb), .6), 0 2px 8px rgba(0,0,0,.45);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
.earth__map.is-sat .earth__pin::before{            /* ножка от подписи к метке */
  content:""; position:absolute; left:50%; bottom:100%;
  width:2px; height:14px; margin-left:-1px;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.9));
}
.earth__map.is-sat .earth__node.is-lit + .earth__pin{
  background:var(--accent-1);
  box-shadow:0 0 0 3px #fff, 0 0 18px 5px rgba(var(--accent-rgb), .75);
}
/* подписи на фото: плотнее, чтобы не сливались с крышами */
.earth__map.is-sat .earth__node{
  background:rgba(255,255,255,.96);
  box-shadow:0 2px 6px rgba(0,0,0,.18), 0 10px 26px rgba(0,0,0,.22);
}
.earth__map.is-sat .earth__node{ min-width:150px; padding:11px 16px; white-space:nowrap; }

/* --- сутки: закат и ночь поверх земли, огни поверх ночи --- */
.earth__sunset, .earth__night{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
}
.earth__sunset{
  /* soft-light закат почти съедал — overlay и плотнее: тёплый верх, розово-лиловый низ */
  background:linear-gradient(180deg, rgba(255,176,96,.85), rgba(255,122,84,.62) 50%, rgba(160,72,130,.55));
  mix-blend-mode:overlay;
  opacity:var(--sunset, 0);
}
.earth__night{
  background:linear-gradient(180deg, #1b2a55, #0b1630 60%, #070b16);
  mix-blend-mode:multiply;
  opacity:calc(var(--night, 0) * .86);
}
.earth__lights{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:var(--night, 0);
}
/* ночью линии и данные на них светятся сильнее, метка — тоже */
.earth__line{ transition:stroke .4s linear; }
.earth.is-night .earth__line{ stroke:rgba(255,240,200,.9); filter:drop-shadow(0 0 5px rgba(255,220,150,.8)); }
.earth.is-night .earth__hub-dot{ box-shadow:0 0 0 7px rgba(var(--accent-rgb), .2), 0 0 34px 10px rgba(107,193,255,.7); }
.earth.is-night .earth__head .eyebrow{ color:#a9d8ff; }

/* Сверху земля выходит из той же дымки, которой кончилось небо, —
   как горизонт с высоты. Заголовок стоит в дымке, тёмный текст читается. */
.earth::before{
  content:""; position:absolute; left:0; right:0; top:0; height:34%; z-index:-1;
  background:linear-gradient(180deg,
    #e6f2fb 0%, #e6f2fb 40%, rgba(230,242,251,.82) 58%,
    rgba(230,242,251,.35) 80%, rgba(230,242,251,0) 100%);
  pointer-events:none;
}
/* снизу — в белый страницы, перед синей полосой призыва */
.earth::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%; z-index:-1;
  background:linear-gradient(180deg, rgba(254,254,254,0), var(--earth-end, var(--bg)) 82%);
  pointer-events:none;
}

.earth__head{ max-width:760px; }
.earth__head .section__sub{ margin-top:clamp(10px, 1vw, 16px); max-width:44rem; }

/* --- карта: без скрипта узлы стоят сеткой, со скриптом — орбитой --- */
.earth__map{
  position:relative;
  margin-top:clamp(28px, 3vw, 48px);
}
.earth__nodes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.earth__node{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 18px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-inner);
  box-shadow:0 1px 2px rgba(13,15,32,.04), 0 6px 18px rgba(13,15,32,.06);
  text-decoration:none; color:var(--fg);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease);
}
.earth__node b{ font:600 clamp(15px, 1.05vw, 18px)/1.2 var(--font); }
.earth__node span{ font-size:clamp(12.5px, .85vw, 14px); color:var(--fg-mute); }
.earth__node:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.earth__node:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; }

.earth__hub{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:0 auto 16px; width:max-content;
  padding:18px 26px 16px;
  background:#fff; border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  text-align:center;
}
.earth__hub b{ font:600 clamp(17px, 1.3vw, 22px)/1.2 var(--font); }
.earth__hub > span:last-child{ font-size:13px; color:var(--fg-mute); }
.earth__hub-dot{
  width:12px; height:12px; border-radius:50%; margin-bottom:8px;
  background:var(--accent-1);
  box-shadow:0 0 0 5px rgba(var(--accent-rgb), .14);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
.earth__net{ display:none; }

/* Орбита: класс ставит sky.js, он же пишет координаты узлов (--x, --y). */
.earth__map.is-orbit{ height:clamp(520px, 44vw, 660px); }
.earth__map.is-orbit .earth__net{
  display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible;
}
.earth__map.is-orbit .earth__hub{
  position:absolute; left:50%; top:50%; margin:0;
  transform:translate(-50%, -50%);
  z-index:2;
}
.earth__map.is-orbit .earth__nodes{ display:block; position:absolute; inset:0; }
.earth__map.is-orbit .earth__nodes li{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%, -50%);
  z-index:2;
}
.earth__map.is-orbit .earth__node{ min-width:170px; align-items:center; text-align:center; }

/* линии: прорисовка по --draw (0..1), потом бегущие данные */
.earth__line{
  fill:none; stroke:rgba(255,255,255,.82); stroke-width:2;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.55));
  stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw, 1));
}
.earth__flow{
  fill:none; stroke:#fffbe8; stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:.014 .094;
  opacity:0; transition:opacity .5s var(--ease);
  filter:drop-shadow(0 0 5px rgba(255,236,170,.95));
  animation:earth-flow 2.4s linear infinite;
}
.earth__flow.is-on{ opacity:1; }
@keyframes earth-flow{ to{ stroke-dashoffset:-.108; } }

/* ждём огня: со скриптом узлы приглушены, пока линия до них не дошла */
.earth--armed .earth__node{ opacity:.72; transform:scale(.96); }
.earth--armed .earth__node.is-lit{
  opacity:1; transform:none;
  border-color:var(--accent-line);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb), .08), 0 10px 26px rgba(28,120,186,.18);
}
.earth--armed .earth__node.is-lit:hover{ transform:translateY(-2px); }
.earth__hub.is-lit .earth__hub-dot{
  box-shadow:0 0 0 7px rgba(var(--accent-rgb), .16), 0 0 26px 6px rgba(var(--accent-rgb), .55);
}

/* ================= ТОЧКА НАЗНАЧЕНИЯ ================= */
.dest{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:clamp(24px, 3vw, 56px);
  margin-top:clamp(56px, 6vw, 96px);
  padding:clamp(28px, 3vw, 52px);
  background:#fff;
  border-radius:var(--r-card);
  box-shadow:0 2px 6px rgba(13,15,32,.06), 0 30px 70px -30px rgba(13,40,60,.45);
}
/* метка над блоком: к ней тянется пунктир от «Ваш бизнес» */
.dest__pin{
  position:absolute; left:50%; top:0;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb), .25);
}
.dest__pin i{
  position:absolute; inset:5px; border-radius:50%;
  background:var(--accent-1);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.dest__pin::after{                       /* пульс «вы здесь» */
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(var(--accent-rgb), .6);
  animation:dest-pulse 2.2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes dest-pulse{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(2.6); opacity:0; } }
.earth--armed .dest__pin:not(.is-lit)::after{ animation:none; opacity:0; }
.earth--armed .dest__pin:not(.is-lit) i{ background:#b8c6d3; }
.dest__pin.is-lit i{ box-shadow:0 0 16px 4px rgba(var(--accent-rgb), .6); }

.dest__main .eyebrow{ color:var(--accent-1); }
.dest__title{
  margin:6px 0 clamp(12px, 1.2vw, 18px);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px, 2.9vw, 48px); line-height:1.06;
  letter-spacing:-.02em; text-transform:uppercase;
}
.dest__title em{ font-style:normal; color:var(--accent-1); }
.dest__lead{ margin:0 0 clamp(20px, 2vw, 30px); max-width:36rem; font-size:clamp(15px, 1.1vw, 18px); line-height:1.55; color:var(--fg-lead); }
.dest__btn{ align-self:flex-start; }
.dest__contacts{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px; margin-top:clamp(20px, 2vw, 28px); }
.dest__phone{
  font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:clamp(20px, 1.7vw, 28px); color:var(--fg); text-decoration:none;
}
.dest__link{ font-size:clamp(14px, 1vw, 16px); color:var(--fg-lead); text-decoration:none; }
.dest__phone:hover, .dest__link:hover{ color:var(--accent-1); }
.dest__reply{ margin:10px 0 0; font-size:14px; color:var(--fg-mute); }

.dest__next{
  padding-left:clamp(20px, 2.4vw, 44px);
  border-left:1px solid var(--line);
}
.dest__cap{
  margin:0 0 clamp(16px, 1.6vw, 24px);
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute);
}
.dest__steps{ list-style:none; margin:0; padding:0; counter-reset:dest; display:grid; gap:clamp(16px, 1.6vw, 24px); }
.dest__steps li{ position:relative; padding-left:48px; counter-increment:dest; }
.dest__steps li::before{
  content:counter(dest, decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font:600 13px/1 var(--font); color:var(--accent-1);
  background:var(--accent-wash);
}
.dest__steps b{ display:block; font:600 clamp(16px, 1.15vw, 19px)/1.3 var(--font); color:var(--fg); }
.dest__steps span{ display:block; margin-top:4px; font-size:clamp(14px, .95vw, 15.5px); line-height:1.5; color:var(--fg-lead); }

/* линия к метке — пунктиром, отличается от сплошных линий к узлам */
.earth__line--dest{ stroke-dasharray:.012 .018; stroke-dashoffset:0; opacity:calc(var(--draw, 1)); }

@media (max-width: 900px){
  .dest{ grid-template-columns:minmax(0, 1fr); }
  .dest__next{ padding-left:0; border-left:0; padding-top:clamp(20px, 4vw, 28px); border-top:1px solid var(--line); }
}
@media (prefers-reduced-motion:reduce){ .dest__pin::after{ animation:none; } }

@media (max-width: 900px){
  .earth__nodes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* нечётное число узлов: последний на всю ширину, а не сиротой в колонке */
  .earth__nodes li:last-child:nth-child(odd){ grid-column:1 / -1; }
}
/* на телефоне две колонки и карточки плотнее: девять в столбик — слишком длинно */
@media (max-width: 520px){
  .earth__nodes{ gap:8px; }
  .earth__node{ padding:11px 12px; }
  .earth__node b{ font-size:15px; }
  .earth__node span{ font-size:12px; line-height:1.3; }
}
@media (prefers-reduced-motion:reduce){
  .earth__node, .earth__hub-dot, .earth__flow{ transition:none; animation:none; }
}