/* UNIO — лендинг-визитка.
   Десктоп (≥960px): за всей страницей — один общий фон (.world), закреплённый за окном. Каждый
   экран — высотой в окно; внутри — «артборд» в координатах макета, вписанный в окно целиком (по
   высоте, а в узком окне — по ширине). --u — один пиксель макета; --x/--y/--w/--h/--fs/--ls у
   элементов — в этих пикселях. «Фигура» экрана (.bg: монолит с воином, планета, путь, рукопожатие,
   руна) — картинка макета без текста и карточек с мягкой маской: окружение уходит в общий фон, и при
   прокрутке фигуры проявляются и тают над ним (site.js), без видимых границ между экранами.
   Карточки и кнопки — отдельные слои из спрайта экрана (.cut), текст и заголовки — сверху (HTML и SVG).
   Мобильные (<960px): те же элементы в обычном потоке, свои фоны и отступы. */

@font-face { font-family: 'Unio UI'; src: url(fonts/unio-ui-lat.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Unio UI'; src: url(fonts/unio-ui-cyr.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Unio Body'; src: url(fonts/unio-body-lat.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Unio Body'; src: url(fonts/unio-body-cyr.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Unio Cond'; src: url(fonts/unio-body-lat.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Unio Cond'; src: url(fonts/unio-cond-cyr.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto Condensed'; src: url(fonts/roboto-condensed-300-latin.woff2) format('woff2'); font-weight: 300; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto Condensed'; src: url(fonts/roboto-condensed-300-cyrillic.woff2) format('woff2'); font-weight: 300; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto Condensed'; src: url(fonts/roboto-condensed-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto Condensed'; src: url(fonts/roboto-condensed-400-cyrillic.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto Condensed'; src: url(fonts/roboto-condensed-500-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto Condensed'; src: url(fonts/roboto-condensed-500-cyrillic.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto'; src: url(fonts/roboto-500-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'Roboto'; src: url(fonts/roboto-500-cyrillic.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --bg: #060709;
  --text: #ecedef;
  --muted: #a9acb2;
  --accent: #f0743f;
  --accent-soft: rgba(240, 116, 63, .22);
  --line: rgba(222, 114, 72, .2);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Unio Body', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.f-ui { font-family: 'Unio UI', 'Arial Narrow', sans-serif; }
.f-body { font-family: 'Unio Body', 'Arial Narrow', sans-serif; }
.f-cond { font-family: 'Unio Cond', 'Arial Narrow', sans-serif; }
.f-rc { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; }
.f-rob { font-family: 'Roboto', Arial, sans-serif; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* иконки FAQ «+» — общие для обеих раскладок */
.fq-i circle { fill: none; stroke: #e2693a; stroke-width: 1.6; }
.fq-i path { fill: none; stroke: #ec7340; stroke-width: 1.9; stroke-linecap: round; transform-origin: 16px 16px; }
.fq.is-open .fq-i path { transform: rotate(45deg); }
.anim .fq-i path { transition: transform .25s; }

/* появление при прокрутке: класс .js ставит скрипт в <head>, .in — site.js, когда блок в окне;
   --d — очередь внутри экрана */
:root { --ease-out: cubic-bezier(.22, .7, .25, 1); }
.js .rv { opacity: 0; transform: translate3d(0, 24px, 0); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* «Присоединиться» — всплывающая ссылка на Telegram менеджера (site.js: класс .open) */
.tg-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 13px;
  border: 1px solid rgba(240, 116, 63, .6); border-radius: 7px; background: #09090b;
  box-shadow: 0 0 24px rgba(240, 116, 63, .18), 0 12px 30px rgba(0, 0, 0, .55); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: var(--tg-from); transform-origin: var(--tg-origin);
  transition: opacity .22s, transform .35s var(--ease-out), visibility 0s .35s;
}
.tg-card::before {
  content: ""; position: absolute; width: 10px; height: 10px; background: inherit;
  border: inherit; border-width: 0 0 1px 1px; border-radius: 0 0 0 2px;
}
.tg-pop.open .tg-card { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .35s var(--ease-out), visibility 0s; }
.tg-k { font: 400 14px/1.2 'Unio Cond', sans-serif; letter-spacing: .02em; color: #a9abb0; }
.tg-link { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1 'Unio UI', sans-serif; letter-spacing: .03em; color: #f6f6f7; }
.tg-link:hover, .tg-link:focus-visible { color: var(--accent); }
.tg-ico, .tg-go { flex: none; width: 20px; height: 20px; color: var(--accent); }
.tg-go { width: 16px; height: 16px; opacity: .8; }
.anim .tg-link { transition: color .18s; }
@media (prefers-reduced-motion: reduce) { .tg-card { transition: none; } }

/* ===================== десктоп: слайды с артбордами по макету ===================== */
@media (min-width: 960px) {
  :root { --cw: 100vw; --vh: 100vh; }
  @supports (width: 1cqw) { :root { --cw: 100cqw; } }
  @supports (height: 1svh) { :root { --vh: 100svh; } }
  main { container-type: inline-size; }
  /* общий фон — один на всю страницу, стоит на месте */
  .world { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  .world img { width: 100%; height: 100%; object-fit: cover; }
  .ab {
    position: relative; width: 100%; overflow: hidden;
    /* артборд целиком в окне; --sh — высота слайда: окно, но не выше фона с полями */
    --u: min(var(--cw) / var(--W), var(--vh) / var(--H));
    --sh: min(var(--vh), calc((var(--H) + 2 * var(--my, 0)) * var(--u)));
    height: calc(var(--sh) + var(--extra, 0) * var(--u));
  }
  /* фигуры заходят за границы своего экрана и смешиваются с соседними — без шва;
     по краям страницы и по горизонтали их обрезает main */
  @supports (overflow: clip) {
    main { overflow: clip; }
    .ab { overflow: visible; }
  }
  /* артборд — по центру слайда */
  .ab > .lay.blk {
    z-index: 1; inset: auto; left: calc((var(--cw) - var(--W) * var(--u)) / 2); top: calc((var(--sh) - var(--H) * var(--u)) / 2);
    width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u));
  }
  /* фон с полями: его часть под артбордом совпадает с макетом; если окно шире полей — края гаснут */
  .ab .bg {
    position: absolute;
    left: calc((var(--cw) - (var(--W) + 2 * var(--mx, 0)) * var(--u)) / 2);
    top: calc((var(--sh) - (var(--H) + 2 * var(--my, 0)) * var(--u)) / 2);
    width: calc((var(--W) + 2 * var(--mx, 0)) * var(--u)); height: calc((var(--H) + 2 * var(--my, 0)) * var(--u));
    z-index: 0; will-change: transform, opacity;
    -webkit-mask-image: var(--fig); mask-image: var(--fig);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .ab .bg img { width: 100%; height: 100%; }
  /* маски фигур: где 0 — виден общий фон */
  .s1 { --fig: url(mask/hero.png?v=16cc9074); }
  .sg { --fig: url(mask/geo.png?v=e42dbcf9); }
  .s2 { --fig: url(mask/steps.png?v=712b3b4f); }
  .s3 { --fig: url(mask/adv.png?v=1c9c1ef1); }
  .s4 { --fig: url(mask/cont.png?v=eec06e13); }
  .ab .lay { position: absolute; inset: 0; pointer-events: none; }
  /* позиция — через transform: left/top браузер округляет до пикселя, transform — нет */
  .ab .el, .ab .tx, .ab .v { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))); }
  .ab .box, .ab .v { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
  .ab .v { overflow: visible; }
  .ab .tx {
    font-size: calc(var(--fs) * var(--u)); letter-spacing: calc(var(--ls) * var(--u)); font-weight: var(--wg);
    line-height: 1; white-space: pre; transform-origin: 0 0;
    transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) scaleX(var(--sx));
  }
  .ab .el, .ab .el * { pointer-events: auto; }
  /* слой-обёртка внутри формы (подпись под кнопкой) растянут на всю форму — он не должен ловить клики */
  .ab .el .lay { pointer-events: none; }
  .ab .m-only { display: none; }
  .ab .anchor { width: 1px; height: 1px; pointer-events: none; }
  /* слой из спрайта экрана: --bx/--by — место в спрайте, --SW/--SH (у экрана) — размер спрайта, px макета */
  .ab i.cut {
    pointer-events: none; background-image: var(--spr); background-repeat: no-repeat;
    background-size: calc(var(--SW) * var(--u)) calc(var(--SH) * var(--u));
    background-position: calc(var(--bx) * var(--u) * -1) calc(var(--by) * var(--u) * -1);
  }
  /* спрайт грузится, когда экран рядом (класс .near — от site.js) */
  .js .ab:not(.near) i.cut { background-image: none; }
  /* cut:begin — спрайты слоёв, вырезанных из фона (пишет сборка фонов) */
  .s1 { --spr: -webkit-image-set(url(cut/hero-lo.webp?v=b574e452) 1x, url(cut/hero-hi.webp?v=9aee0e75) 2x); }
  .sg { --spr: -webkit-image-set(url(cut/geo-lo.webp?v=688a83ca) 1x, url(cut/geo-hi.webp?v=0d76dffb) 2x); }
  .s2 { --spr: -webkit-image-set(url(cut/steps-lo.webp?v=c5ea9dc0) 1x, url(cut/steps-hi.webp?v=3caa4c3c) 2x); }
  .s3 { --spr: -webkit-image-set(url(cut/adv-lo.webp?v=db1837e6) 1x, url(cut/adv-hi.webp?v=d20fb8f3) 2x); }
  .s4 { --spr: -webkit-image-set(url(cut/cont-lo.webp?v=457c853d) 1x, url(cut/cont-hi.webp?v=733f0b8f) 2x); }
  /* cut:end */

  /* всплывающая ссылка на Telegram — справа от «Присоединиться», вылетает от кнопки */
  .ab .tg-pop { pointer-events: none; --tg-from: translate3d(calc(-16 * var(--u)), 0, 0) scale(.94); --tg-origin: left center; }
  .ab .tg-pop.open, .ab .tg-pop.open * { pointer-events: auto; }
  .ab .tg-pop:not(.open) * { pointer-events: none; }
  .ab .tg-card {
    gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(13 * var(--u));
    border-width: max(1px, calc(1 * var(--u))); border-radius: calc(6 * var(--u));
    box-shadow: 0 0 calc(26 * var(--u)) rgba(240, 116, 63, .18), 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .55);
  }
  .ab .tg-card::before { left: calc(-6 * var(--u)); top: 50%; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(-5.5 * var(--u)); transform: rotate(45deg); }
  .ab .tg-k { font-size: calc(14.5 * var(--u)); }
  .ab .tg-link { gap: calc(10 * var(--u)); font-size: calc(23 * var(--u)); }
  .ab .tg-ico { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
  .ab .tg-go { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

  /* появление: сдвиги — в px макета */
  .js .ab .rv { transform: translate3d(0, calc(28 * var(--u)), 0); }
  .js .ab .rv-down { transform: translate3d(0, calc(-18 * var(--u)), 0); }
  .js .ab .rv-r { transform: translate3d(calc(46 * var(--u)), 0, 0); }
  .js .ab .rv-fade { transform: none; }
  .js .ab .rv-pop { transform: scale(.82); transform-origin: calc(var(--ox) * var(--u)) calc(var(--oy) * var(--u)); }
  .js .ab .rv { --dl: calc(var(--d, 0) * 90ms); }
  .js .ab .rv.in { transform: none; transition: opacity .7s var(--ease-out) var(--dl), transform .9s var(--ease-out) var(--dl); }
  @media (prefers-reduced-motion: reduce) { .js .ab .rv { opacity: 1; transform: none; transition: none; } }

  /* ссылки и кнопки поверх нарисованных в макете */
  .ab a.el, .ab button.el { cursor: pointer; border: 0; padding: 0; background: none; border-radius: calc(6 * var(--u)); }
  .ab a.el::after, .ab button.el::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
  .ab .nl:hover .tx { color: var(--accent) !important; }
  .ab .nl:hover .v path { fill: var(--accent); }
  .ab .btn-ol:hover::after { background: rgba(240, 116, 63, .08); box-shadow: 0 0 calc(22 * var(--u)) rgba(240, 116, 63, .22); }
  .ab .btn-or:hover::after { background: rgba(255, 255, 255, .1); box-shadow: 0 0 calc(26 * var(--u)) rgba(255, 128, 72, .35); }
  .ab .link .ul { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: #e9e9ea; }
  .ab .link:hover .tx { color: var(--accent) !important; }
  .ab .link:hover .ul { background: var(--accent); }

  /* переходы включаются после первой отрисовки (класс .anim от скрипта): иначе браузер
     анимирует стили при загрузке и элемент может «застыть» на полпути */
  .anim .ab a.el::after, .anim .ab button.el::after { transition: background-color .18s, box-shadow .18s; }
  .anim .ab .nl .tx, .anim .ab .nl .v path, .anim .ab .link .tx, .anim .ab .link .ul { transition: color .18s, fill .18s, background-color .18s; }
  .anim .ab .fq { transition: border-color .2s, background-color .2s; }
  .anim .ab .fq.rv.in { transition: border-color .2s, background-color .2s, opacity .7s var(--ease-out) var(--dl), transform .9s var(--ease-out) var(--dl); }

  /* форма заявки: поля поверх нарисованных */
  .ab .fld input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; outline: 0; background: transparent;
    /* строка ввода ровно в кегль: браузер центрирует текст в поле, поэтому высоту
       содержимого задаём равной строке, а базовую линию — отступами */
    padding: calc((var(--base) - .8 * var(--fs)) * var(--u)) calc(12 * var(--u)) calc((var(--h) - var(--base) - .2 * var(--fs)) * var(--u)) calc(var(--px) * var(--u));
    line-height: 1;
    font-size: calc(var(--fs) * var(--u)); letter-spacing: calc(var(--ls) * var(--u)); font-weight: var(--wg);
    color: #e9e9eb; border-radius: calc(4 * var(--u));
  }
  .ab .fld input::placeholder { color: #767576; opacity: 1; }
  .ab .fld input:focus-visible { outline: none; box-shadow: inset 0 0 0 calc(1.2 * var(--u)) rgba(240, 116, 63, .75), 0 0 calc(14 * var(--u)) rgba(240, 116, 63, .25); }
  .ab .fld input[aria-invalid="true"] { box-shadow: inset 0 0 0 calc(1.2 * var(--u)) rgba(255, 92, 72, .9); }
  .ab .submit[disabled] { cursor: progress; }
  .ab .submit[disabled]::after { background: rgba(0, 0, 0, .25); }
  .ab .form-msg { width: calc(400 * var(--u)); font: 400 calc(15 * var(--u)) / 1.35 'Unio Cond', sans-serif; letter-spacing: .01em; color: #cfd0d3; pointer-events: none; }
  .ab .form-msg.ok { color: #7fd1a0; }
  .ab .form-msg.err { color: #ff8a6a; }

  /* FAQ: пункты рисует CSS (раскрываются и сдвигают следующие) */
  .ab .faq { width: calc(var(--w) * var(--u)); }
  .ab .fq {
    position: relative; margin-bottom: calc(4.47 * var(--u));
    border: max(1px, calc(1 * var(--u))) solid rgba(222, 114, 72, .19); border-radius: calc(5 * var(--u));
    background: rgba(3, 3, 4, .42);
  }
  .ab .fq:hover, .ab .fq.is-open { border-color: rgba(240, 116, 63, .42); }
  .ab .fq.is-open { background: rgba(8, 7, 7, .78); }
  .ab .fq-q { position: relative; display: block; width: 100%; height: calc(53 * var(--u)); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: inherit; }
  .ab .fq-a { padding: 0 calc(58 * var(--u)) calc(16 * var(--u)) calc(76.5 * var(--u)); }
  .ab .fq-a p { font: 350 calc(15.5 * var(--u)) / 1.42 'Unio Cond', sans-serif; letter-spacing: .005em; color: #a9abb0; }
}

/* ===================== телефон и планшет: тот же контент обычным потоком ===================== */
@media (max-width: 959.98px) {
  .bg, .world, .ticks, .glabels, .link .ul, .cut { display: none; }
  .hdr.hdr4 { display: none; }
  .ab { position: relative; overflow: hidden; }
  .blk { position: relative; padding: 0 20px; isolation: isolate; }
  /* размер — от размера в макете (--w) и коэффициента блока (--k); max-width — без процента в width:
     иначе при подсчёте ширины кнопки браузер берёт «умолчательные» 300px у svg */
  .v { display: block; width: calc(var(--w) * var(--k, 1) * 1px); max-width: 100%; height: auto; aspect-ratio: var(--w) / var(--h); overflow: visible; }
  .ico { display: block; flex: none; width: 22px; height: 22px; }
  .anchor { display: block; height: 0; }
  .m-bg { display: block; position: relative; margin: 0 -20px; }
  .m-bg img { width: 100%; height: 100%; object-fit: cover; }
  .m-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6, 7, 9, .15) 30%, var(--bg) 100%); }
  .intro { position: relative; }
  .eyebrow { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 36px; text-transform: uppercase; }
  .eyebrow::before { content: ""; position: absolute; left: 0; top: .5em; width: 24px; height: 2px; border-radius: 1px; background: var(--accent); }
  .eyebrow .tx { font: 500 11px/1.25 'Roboto Condensed', sans-serif; letter-spacing: .26em; }
  .hd { margin-top: 16px; }
  .lead { margin-top: 18px; max-width: 34em; }
  .lead .tx { font-size: 16px; line-height: 1.5; }

  /* кнопки — нарисованы CSS (на десктопе они в фоне) */
  .btn-or, .btn-ol { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 22px; border-radius: 7px; cursor: pointer; }
  .btn-or { border: 0; color: #200a04; background: linear-gradient(90deg, #f98b5f, #fca37f); box-shadow: 0 8px 28px rgba(240, 116, 63, .25); }
  .btn-ol { border: 1.5px solid rgba(240, 116, 63, .85); color: #fff; background: rgba(6, 7, 9, .55); }
  .btn-or .tx, .btn-ol .tx { font-family: 'Unio UI', sans-serif; font-size: 19px; font-weight: 620; letter-spacing: .02em; }
  .btn-or:active, .btn-ol:active { transform: translateY(1px); }

  /* --- экран 1: герой --- */
  .hero { display: flex; flex-direction: column; min-height: 100svh; padding-top: 14px; padding-bottom: 30px; }
  .hero > .m-bg { position: absolute; inset: 0; margin: 0; z-index: -1; }
  .hero > .m-bg img { object-position: 64% 32%; }
  .hero > .m-bg::after { background: linear-gradient(rgba(6, 7, 9, .7) 0, rgba(6, 7, 9, .15) 20%, rgba(6, 7, 9, .25) 38%, rgba(6, 7, 9, .86) 56%, var(--bg) 74%); }
  .hdr { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; }
  .logo { --k: .9; }
  .cta { order: 2; margin-left: auto; min-height: 38px; padding: 0 14px; gap: 8px; font-size: 16px; }
  .cta .tx { font-size: 16px; font-weight: 500; }
  .cta .ico { width: 16px; height: 16px; }
  .burger { order: 4; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 10px; border: 1px solid rgba(240, 116, 63, .45); border-radius: 7px; background: rgba(6, 7, 9, .55); cursor: pointer; }
  .burger i { display: block; height: 2px; border-radius: 1px; background: #f2f2f2; }
  .nav { display: none; }
  .hdr.open .nav { display: flex; flex-direction: column; position: absolute; top: calc(100% + 10px); left: -6px; right: -6px; padding: 8px; background: rgba(9, 9, 11, .97); border: 1px solid rgba(222, 114, 72, .3); border-radius: 9px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
  .nl { display: block; padding: 13px 14px; border-radius: 6px; }
  .nl .tx { font-size: 20px; font-weight: 450; letter-spacing: .02em; }
  .nl:active { background: rgba(240, 116, 63, .1); }
  /* текст — к низу первого экрана, сверху остаётся арт; на коротком экране — не меньше 150px арта */
  .hero .intro { margin-top: auto; padding-top: max(24svh, 150px); }
  .hero .hd { --k: 1; }
  .hero .lead .tx { font-weight: 360; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }
  .link { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
  .link .tx { font-size: 19px; font-weight: 500; letter-spacing: .02em; border-bottom: 1.5px solid #e9e9ea; padding-bottom: 2px; }
  .link .ico { width: 20px; height: 20px; }
  .hcards { display: grid; gap: 10px; margin-top: 32px; }
  .hc { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid rgba(171, 118, 98, .38); border-radius: 8px; background: rgba(15, 14, 14, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hc .ico { width: 20px; height: 20px; color: #fff; }
  .hc-t { display: flex; flex-direction: column; gap: 2px; }
  .hc-t .tx { font-size: 16px; font-weight: 500; line-height: 1.15; letter-spacing: .02em; }
  .dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; }
  .dot.ok { background: #8ff3cf; box-shadow: 0 0 10px 3px rgba(70, 230, 170, .5); }
  .dot.live { background: #ffb39a; box-shadow: 0 0 10px 3px rgba(255, 90, 50, .6); }
  .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 30px; }
  .tags .tx { font: 500 11px 'Roboto Condensed', sans-serif; letter-spacing: .22em; }
  .sep { width: 16px; height: 2px; border-radius: 1px; background: var(--accent); }

  /* --- экран 1: GEO --- */
  .geo { padding-top: 68px; padding-bottom: 8px; }
  .geo .hd { --k: .92; }
  .geo .lead .tx { font-weight: 360; }
  .gbtn { margin-top: 26px; }
  .gbtn .v { --k: 1.05; }
  .gbtn .ico { width: 18px; height: 18px; }
  .globe { margin: 26px -20px 0; }
  .m-globe { display: block; }
  .m-globe img { width: 100%; height: auto; }

  /* --- экран 2: этапы --- */
  .s2 .blk { padding-bottom: 52px; }
  .s2 .m-bg { height: 230px; }
  .s2 .m-bg img { object-position: 74% 40%; }
  .s2 .intro { margin-top: -96px; }
  .s2 .eyebrow .tx { font-weight: 300; font-size: 13px; letter-spacing: .34em; }
  .s2 .hd { --k: .6; }
  .s2 .lead .tx { font-size: 17px; line-height: 1.45; }
  .steps { display: grid; gap: 12px; margin-top: 28px; }
  .step { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px 18px; padding: 18px 18px 20px; border: 1px solid rgba(222, 114, 72, .32); border-radius: 8px; background: rgba(12, 11, 11, .75); }
  .step .num { --k: .72; }
  .step .ico { width: 30px; height: 30px; color: #f0764a; }
  .st { grid-column: 1 / -1; }
  .st .v { --k: .82; }
  .sp { grid-column: 1 / -1; }
  .sp .tx { font-size: 16px; line-height: 1.45; }

  /* --- экран 3: преимущества --- */
  .s3 .blk { padding-bottom: 34px; }
  .s3 .m-bg { height: 250px; }
  .s3 .m-bg img { object-position: 66% 30%; }
  .s3 .intro { margin-top: -84px; }
  .s3 .eyebrow .tx { font-family: 'Roboto', sans-serif; font-size: 11px; letter-spacing: .3em; }
  .s3 .hd { --k: .66; }
  .s3 .lead .tx { font-size: 15.5px; line-height: 1.5; }
  .join { margin-top: 24px; }
  .joinw { position: relative; }
  .tg-pop { position: absolute; left: 0; top: calc(100% + 12px); z-index: 5; --tg-from: translate3d(0, -8px, 0) scale(.96); --tg-origin: 24px top; }
  .tg-pop:not(.open) { pointer-events: none; }
  .tg-card::before { left: 22px; top: -6px; transform: rotate(135deg); }
  .join .v { --k: 1.05; }
  .join .ico { width: 18px; height: 18px; color: #f07a52; }
  .adv { display: grid; gap: 10px; margin-top: 30px; }
  .ac { display: grid; gap: 12px; padding: 18px 18px 20px; border: 1px solid rgba(222, 114, 72, .26); border-radius: 8px; background: rgba(10, 10, 12, .72); }
  .ac .ico { width: 30px; height: 30px; color: #e08263; }
  .at .v { --k: .95; }
  .ap .tx { font-size: 15px; line-height: 1.45; }
  .sfoot { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .sfoot .tx { font: 500 10px 'Roboto Condensed', sans-serif; letter-spacing: .3em; }

  /* --- экран 4: заявка и FAQ --- */
  .s4 .blk { padding-bottom: 56px; }
  .s4 .m-bg { height: 270px; }
  .s4 .m-bg img { object-position: 52% 30%; }
  .s4 .intro { margin-top: -70px; }
  .s4 .eyebrow { padding-top: 1px; }
  .s4 .eyebrow .v { --k: 1.12; }
  .s4 .intro .hd { --k: .72; }
  .s4 .lead .tx { font-size: 16px; line-height: 1.5; }
  .lead-form { display: grid; gap: 10px; margin-top: 24px; padding: 16px; border: 1px solid rgba(222, 114, 72, .3); border-radius: 9px; background: rgba(8, 8, 9, .85); }
  .fld { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid rgba(222, 114, 72, .36); border-radius: 6px; background: rgba(5, 5, 6, .7); }
  .fld .ico { width: 22px; height: 22px; color: #e8692f; }
  .fld input { flex: 1; min-width: 0; height: 50px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font-family: 'Unio Cond', sans-serif; font-size: 17px; font-weight: 350; color: #e9e9eb; }
  .fld input::placeholder { color: #8a898b; opacity: 1; }
  .fld:focus-within { border-color: rgba(240, 116, 63, .85); box-shadow: 0 0 14px rgba(240, 116, 63, .2); }
  .fld:has(input[aria-invalid="true"]) { border-color: rgba(255, 92, 72, .95); }
  .submit { width: 100%; margin-top: 4px; background: linear-gradient(90deg, #f8782e, #fd8c47); color: #220a03; }
  .submit .tx { font-family: 'Unio Cond', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .03em; }
  .submit .ico { width: 20px; height: 20px; }
  .submit[disabled] { opacity: .7; cursor: progress; }
  .note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
  .note .ico { width: 15px; height: 18px; color: #de7841; }
  .nt { display: flex; flex-direction: column; }
  .nt .tx { font-size: 13px; line-height: 1.35; }
  .form-msg { min-height: 1.4em; text-align: center; font: 400 15px/1.4 'Unio Cond', sans-serif; color: #cfd0d3; }
  .form-msg:empty { display: none; }
  .form-msg.ok { color: #7fd1a0; }
  .form-msg.err { color: #ff8a6a; }
  .faqw { margin-top: 58px; }
  .faqw .eyebrow .v { --k: 1.15; }
  .faqw .hd { --k: .8; }
  .faq { display: grid; gap: 8px; margin-top: 20px; }
  .fq { border: 1px solid rgba(222, 114, 72, .24); border-radius: 7px; background: rgba(4, 4, 5, .6); }
  .fq.is-open { border-color: rgba(240, 116, 63, .5); }
  .fq-q { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 58px; padding: 10px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
  .fq-q .fq-n { --k: 1; flex: none; }
  .fq-q .tx { flex: 1; font-size: 16px; font-weight: 350; line-height: 1.3; }
  .fq-q .fq-i { width: 28px; height: 28px; }
  .fq-a { padding: 0 16px 16px 46px; }
  .fq-a p { font: 350 15px/1.5 'Unio Cond', sans-serif; color: #a9abb0; }

  /* шире телефона — карточки в две-три колонки */
  @media (min-width: 600px) {
    .blk { padding-left: 32px; padding-right: 32px; }
    .m-bg { margin: 0 -32px; }
    .hero > .m-bg { margin: 0; }
    .globe { margin-left: -32px; margin-right: -32px; }
    .hcards { grid-template-columns: repeat(3, 1fr); }
    .steps, .adv { grid-template-columns: repeat(2, 1fr); }
    .s2 .m-bg, .s3 .m-bg, .s4 .m-bg { height: 340px; }
  }
  @media (max-width: 479.98px) {
    .cta { display: none; }
    .burger { margin-left: auto; }
  }
}