/* ═══════════════════════════════════════════════════════════
   EDGE · светлая редакционная тема
   Система из DESIGN.md («spa brochure on vellum paper»), адаптированная
   под наш хаб: белое полотно на всю страницу, один фиолетовый акцент,
   крупная типографика в одной гарнитуре, большие радиусы и длинные мягкие
   тени. Ни одной тёмной полосы, ни одной залитой цветом кнопки.

   Отступления от спеки и почему — помечены по месту словом АДАПТАЦИЯ.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Псевдонимы поверх токенов из tokens.css. Правится только этот слой:
     сами значения приходят из хендоффа и остаются нетронутыми. */
  --violet:var(--color-hims-violet);
  --ink:var(--color-carbon-black);
  --paper:var(--color-paper-white);
  --graphite:var(--color-graphite);
  --linen:var(--color-linen);
  --vellum:var(--color-vellum-gray);
  --iris:var(--color-iris);

  /* ОТСТУПЛЕНИЕ ОТ ХЕНДОФФА. --color-stone (#8f8f8f) назначен на muted body
     copy, но на белом это 3.23:1 — ниже нормы 4.5:1 для текста. Держим
     собственное значение 5.1:1; токен при этом не трогаем. */
  --stone:#6E6E6E;
  --index:#BDBDBD;               /* только порядковые номера, декоративны */
  --violet-ink:#4A38C4;          /* наведение на обводке */
  --violet-wash:#F1EEFC;         /* подложка бейджей */

  /* Шкала для данных — тинты того же фиолетового, а не второй акцент.
     Каждая ступень даёт ≥3:1 к белому. */
  --d1:#3A2BA6; --d2:#5D48DB; --d3:#7A67C9; --d4:#9285B8;

  --r-card:var(--radius-cards);
  --r-feature:var(--radius-feature-cards);
  --r-nav:var(--radius-nav);

  --sh-card:var(--shadow-xl);
  --sh-feature:var(--shadow-xl-2);
  --sh-device:var(--shadow-xl-3);
  --sh-nav:var(--shadow-xl-4);

  --wrap:var(--page-max-width);
  --sec-gap:var(--section-gap);
  --pad-card:var(--card-padding);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:400; font-size:18px; line-height:1.33; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

/* Вес 400 везде — это подпись системы. 500 только для точечного акцента. */
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.017em; line-height:1.15; color:var(--ink); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.lime-txt{ color:var(--violet); }   /* имя класса осталось от прежней темы */

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--paper);
  color:var(--ink); border:1px solid var(--ink); padding:14px 22px; border-radius:0 0 var(--r-card) 0; }
.skip-link:focus{ left:0; }

:where(a, button, [tabindex]):focus-visible{
  outline:2px solid var(--violet); outline-offset:3px; border-radius:12px; }

/* Атмосферы в интерфейсе нет: единственное свечение живёт за телефоном. */
.page-glow{ display:none; }

/* ─────────────── Кнопки: жидкое стекло ───────────────
   Порт LiquidButton из React-компонента. Тело прозрачное, объём даёт
   стеклянный кант из наложенных внутренних теней, а фон под кнопкой
   преломляет SVG-фильтр через backdrop-filter (разметка фильтра — в конце
   index.html).

   Два отступления от оригинала, оба вынужденные:
   1. Плотности теней ослаблены. Оригинал рассчитан на тёмный фон; на белом
      листе его внутренние заливки (6px разлёта чёрным на 12%) читались бы
      серым пятном посреди кнопки.
   2. Тонкая обводка оставлена. В оригинале её нет — там кнопка лежит на
      цветной подложке и кант виден сам по себе. На белом без обводки кнопка
      превращается в призрак, а это единственное действие на странице. */
.btn{ position:relative; z-index:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:16px; font-weight:400; line-height:1.43; letter-spacing:-.012em;
  padding:16px 22px; border-radius:var(--r-card); background:transparent;
  border:1px solid var(--ink); color:var(--ink); cursor:pointer; white-space:nowrap;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }

/* Стеклянный кант */
.btn::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none;
  box-shadow:
    0 0 6px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.06),
    inset 3px 3px .5px -3px rgba(0,0,0,.55),
    inset -3px -3px .5px -3px rgba(0,0,0,.5),
    inset 1px 1px 1px -.5px rgba(0,0,0,.35),
    inset -1px -1px 1px -.5px rgba(0,0,0,.35),
    inset 0 0 6px 6px rgba(0,0,0,.04),
    inset 0 0 2px 2px rgba(0,0,0,.02),
    0 0 12px rgba(255,255,255,.15);
  transition:box-shadow .3s var(--ease); }

/* Преломление фона. Работает там, где backdrop-filter принимает url(): вне
   этих браузеров слой просто ничего не делает, кант и текст остаются. */
.btn{ -webkit-backdrop-filter:url("#container-glass"); backdrop-filter:url("#container-glass"); }

.btn svg{ width:17px; height:17px; }
.btn:hover{ transform:scale(1.04); }
.btn:active{ transform:scale(.99); }
@media (prefers-reduced-motion:reduce){ .btn:hover,.btn:active{ transform:none; } }

.btn--lime{ border-color:var(--violet); color:var(--violet); }
.btn--lime:hover{ border-color:var(--violet-ink); color:var(--violet-ink); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--graphite); }

.btn--sm{ padding:12px 18px; font-size:14px; }
.btn--lg{ padding:18px 30px; font-size:18px; }

/* ─────────────── Навигация ───────────────
   Плавающая белая пилюля 52px с мягкой тенью. */
.nav{ position:sticky; top:0; z-index:100; padding:18px 0 0; background:transparent; }
/* Панель — то же жидкое стекло, что и кнопки. Здесь оно работает
   по-настоящему: под липкой шапкой едет содержимое страницы, есть что
   размывать. Смещающий фильтр на панель НЕ вешаю — на широкой полосе поверх
   бегущего текста он даёт кашу; хватает размытия и канта.
   ОТСТУПЛЕНИЕ ОТ ХЕНДОФФА: там поверхность навигации задана сплошным #ffffff.
   Полупрозрачность обязательна, иначе стекло нечем наполнить. */
.nav__inner{ position:relative; z-index:0; display:flex; align-items:center; gap:24px;
  padding:16px 22px; border-radius:var(--r-nav);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:var(--sh-nav);
  transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.nav__inner::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 3px 3px .5px -3px rgba(0,0,0,.5),
    inset -3px -3px .5px -3px rgba(0,0,0,.45),
    inset 1px 1px 1px -.5px rgba(0,0,0,.3),
    inset -1px -1px 1px -.5px rgba(0,0,0,.3),
    inset 0 0 6px 6px rgba(0,0,0,.03),
    0 0 12px rgba(255,255,255,.15); }
.nav.is-stuck .nav__inner{ background:rgba(255,255,255,.9); box-shadow:rgba(0,0,0,.1) 0 12px 40px 0; }

.brand{ display:inline-flex; align-items:center; gap:10px; font-size:20px; letter-spacing:-.017em; }
.brand__mark{ width:28px; height:28px; display:grid; place-items:center; }
.brand__mark img{ width:100%; height:100%; object-fit:contain; }

/* Слайд-табы. Контейнер — обведённая пилюля, как в оригинале: без неё
   пункты в покое читаются обычным текстом, а не сегментами. Стеклянный кант
   тот же, что у панели и кнопок.
   Бегунок виден всегда и в покое стоит на первом пункте — это и даёт
   скольжение при заходе мышью. Текст белый с mix-blend-difference: на светлой
   подложке читается чёрным, под чёрным бегунком выворачивается в белое. */
.nav__links{ position:relative; z-index:0; display:flex; gap:0; margin-left:12px;
  padding:4px; border-radius:999px; border:1px solid var(--ink);
  background:rgba(255,255,255,.5); }
.nav__links::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 2px 2px .5px -2px rgba(0,0,0,.45),
    inset -2px -2px .5px -2px rgba(0,0,0,.4),
    inset 0 0 5px 5px rgba(0,0,0,.03),
    0 0 10px rgba(255,255,255,.15); }
.nav__links a{ position:relative; z-index:1; display:block;
  padding:8px 16px; font-size:15px; letter-spacing:-.012em;
  color:#fff; mix-blend-mode:difference; }
.nav__cursor{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0;
  border-radius:999px; background:var(--ink); opacity:0; transform:translateX(0);
  pointer-events:none;
  transition:transform .35s var(--ease), width .35s var(--ease), opacity .25s var(--ease); }
@media (prefers-reduced-motion:reduce){ .nav__cursor{ transition:opacity .2s linear; } }

.nav__actions{ margin-left:auto; }

/* Полоса прочитанного — тонкая, в акцентном цвете */
.mo-prog{ position:fixed; left:0; top:0; z-index:110; width:100%; height:2px; pointer-events:none;
  background:var(--violet); transform:scaleX(0); transform-origin:0 50%; }
@media (prefers-reduced-motion:reduce){ .mo-prog{ display:none; } }

/* ─────────────── Герой ───────────────
   Центрированный столбец: заголовок → подпись → метки → действия → телефон. */
.hero{ position:relative; padding:64px 0 var(--sec-gap); text-align:center; overflow:hidden; }
.hero__in{ position:relative; z-index:2; }

.hero__title{
  font-size:clamp(38px,6.4vw,96px); line-height:1.04; letter-spacing:-.045em;
  color:var(--violet); text-wrap:balance; }
.hero__sub{ margin:32px auto 0; max-width:52ch; font-size:20px; line-height:1.25;
  letter-spacing:-.012em; color:var(--stone); }

/* Свечение за устройством — единственный атмосферный элемент системы */
.hero__halo{ position:absolute; z-index:0; left:50%; top:46%; transform:translate(-50%,-50%);
  width:1100px; height:900px; max-width:150%; pointer-events:none;
  background:radial-gradient(46% 52% at 50% 50%, rgba(93,72,219,.20), rgba(93,72,219,.06) 46%, transparent 72%); }

.tags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:40px; }
.tag{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px 12px 14px;
  border-radius:var(--r-card); background:var(--paper); border:1px solid var(--linen);
  font-size:16px; letter-spacing:-.012em; color:var(--graphite); }
.tag i{ width:18px; height:18px; border-radius:50%; border:1px solid var(--ink);
  display:grid; place-items:center; flex:none; }
.tag i svg{ width:10px; height:10px; color:var(--ink); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:40px; }

/* ─────────────── Сцена с устройством ─────────────── */
.stage{ position:relative; margin-top:64px; }
.aurora-wrap{ position:absolute; z-index:0; left:50%; top:50%; width:1000px; max-width:170%;
  aspect-ratio:6/5; pointer-events:none;
  transform:translate(-50%, calc(-50% + var(--par,0px))) scale(var(--sc,1));
  background:radial-gradient(44% 48% at 50% 50%, rgba(150,133,255,.26), rgba(93,72,219,.08) 52%, transparent 74%); }
.aurora{ display:none; }   /* прежний растровый вихрь системе не нужен */

.phone-wrap{ position:relative; z-index:2; transform-origin:50% 42%; }

/* ─── Рука с устройством ───
   Один слой: сцена собрана в фотошопе, экран уже внутри кадра. Прежняя
   схема с прозрачным окном и скриншотом под ним больше не нужна.
   Тень рисуем через drop-shadow, а не box-shadow: она должна повторять
   контур выреза, а не прямоугольник картинки. */
.hand{ --hw:min(460px, 84vw); position:relative; width:var(--hw); margin-inline:auto; }
.hand picture{ display:block; }
.hand__img{ position:relative; z-index:2; width:100%; height:auto; display:block;
  filter:drop-shadow(0 9px 23px rgba(0,0,0,.25)); }
/* Парящие карточки вокруг устройства — белые, различимы тенью и радиусом */
.float{ position:absolute; z-index:3; background:var(--paper); border-radius:var(--r-card);
  box-shadow:var(--sh-card); }
.float--integrate{ bottom:14%; left:0; width:288px; padding:var(--pad-card); text-align:left; }
.panel-h{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; }
.panel-h b{ font-size:16px; font-weight:500; }
.panel-h span{ font-size:14px; color:var(--stone); white-space:nowrap; }
.appicons{ display:flex; gap:10px; margin-bottom:20px; }
.appicons i{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--linen); color:var(--ink); }
.appicons i svg{ width:19px; height:19px; }
.addapp{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--violet); }
.addapp b{ width:24px; height:24px; border-radius:9px; border:1px solid var(--violet);
  display:grid; place-items:center; font-weight:400; font-size:15px; }

.statchip{ position:absolute; z-index:3; top:22%; right:4%;
  background:var(--paper); border-radius:var(--r-card); padding:20px 24px; text-align:left;
  box-shadow:var(--sh-card); }
.statchip b{ font-size:32px; font-weight:400; letter-spacing:-.017em; line-height:1.2; }
.statchip span{ display:block; font-size:14px; color:var(--stone); margin-top:4px; }

/* Искры по клику лежат поверх, но кликов не ловят */
.spark{ position:absolute; inset:0; z-index:5; display:block; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .spark{ display:none; } }

/* ─────────────── Секции ───────────────
   Полотно одно на всю страницу: чередования тёмных и светлых полос нет. */
.section{ position:relative; padding:var(--sec-gap) 0; }
.section--tight{ padding:64px 0 var(--sec-gap); }
.light, .section--glow{ background:transparent; }   /* модификаторы прежней темы обезврежены */

.sec-head{ max-width:760px; margin:0 auto 64px; text-align:center; }
.sec-head--left{ margin-left:0; text-align:left; }
.sec-kick{ display:inline-flex; align-items:center; gap:12px; margin-bottom:32px;
  font-size:14px; letter-spacing:-.012em; color:var(--stone); }
.sec-kick i{ width:44px; height:44px; border-radius:16px; display:grid; place-items:center;
  background:var(--paper); box-shadow:var(--sh-nav); color:var(--ink); }
.sec-kick i svg{ width:20px; height:20px; }
.sec-title{ font-size:clamp(32px,4.6vw,68px); line-height:1.1; letter-spacing:-.017em;
  color:var(--ink); text-wrap:balance; }
.sec-lead{ margin:32px auto 0; max-width:56ch; font-size:18px; line-height:1.33; color:var(--stone); }
.sec-head--left .sec-lead{ margin-left:0; }

/* Сборка заголовка из букв на скролле (порт CharacterV1).
   Перспектива нужна на родителе, иначе rotateX у букв плоский. */
[data-converge]{ perspective:500px; }
.conv{ display:inline-block; will-change:transform; }
.conv--sp{ width:.28em; }

/* Мягкая подложка под кругами.
   ОТСТУПЛЕНИЕ ОТ ХЕНДОФФА: там всё полотно белое, а единственное свечение
   живёт за устройством. Здесь оно нужно по делу — стеклу нечего размывать
   на ровном белом, и круги выглядели бы просто обведёнными. Цвет тот же
   фиолетовый, второго акцента не появляется. */
.section#pick{ position:relative; isolation:isolate; }
.section#pick::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(56% 58% at 50% 64%, rgba(150,133,255,.18), rgba(93,72,219,.06) 46%, transparent 72%); }

/* ─────────────── Направления — три круга дугой ───────────────
   Смещение по дуге пишем в отдельное свойство `translate`: появление секции
   Motion рисует через transform, и обычный translateY он бы затёр.
   Увеличение по наведению висит на внутреннем круге — по той же причине. */
.dirlist{ display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(12px,3vw,44px); padding:32px 0 44px; }
.dir{ display:flex; flex-direction:column; align-items:center; gap:34px;
  width:clamp(190px,24vw,290px); text-align:center; }
.dirlist > .dir:nth-child(odd){ translate:0 30px; }
.dirlist > .dir:nth-child(even){ translate:0 -24px; }

/* Круг — то же жидкое стекло, что у кнопок и шапки */
.dir__ring{ position:relative; z-index:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  width:100%; aspect-ratio:1; border-radius:50%;
  border:1px solid var(--linen); background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
  backdrop-filter:blur(12px) saturate(1.5);
  transition:transform .45s var(--ease), border-color .45s var(--ease); }
.dir__ring::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none;
  box-shadow:
    0 0 6px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.05),
    inset 3px 3px .5px -3px rgba(0,0,0,.5),
    inset -3px -3px .5px -3px rgba(0,0,0,.45),
    inset 1px 1px 1px -.5px rgba(0,0,0,.3),
    inset -1px -1px 1px -.5px rgba(0,0,0,.3),
    inset 0 0 6px 6px rgba(0,0,0,.035),
    0 0 12px rgba(255,255,255,.15);
  transition:box-shadow .45s var(--ease); }

.dir:hover .dir__ring{ transform:scale(1.07); border-color:var(--violet); }
.dir:hover .dir__ring::before{ box-shadow:
    0 0 8px rgba(0,0,0,.04),
    0 10px 30px rgba(0,0,0,.08),
    inset 3px 3px .5px -3px rgba(0,0,0,.55),
    inset -3px -3px .5px -3px rgba(0,0,0,.5),
    inset 1px 1px 1px -.5px rgba(0,0,0,.35),
    inset -1px -1px 1px -.5px rgba(0,0,0,.35),
    inset 0 0 6px 6px rgba(0,0,0,.04),
    0 0 14px rgba(255,255,255,.2); }
@media (prefers-reduced-motion:reduce){ .dir:hover .dir__ring{ transform:none; } }

.dir__n{ font-size:15px; letter-spacing:.02em; color:var(--index);
  font-variant-numeric:tabular-nums; transition:color .45s var(--ease); }
.dir:hover .dir__n{ color:var(--violet); }
.dir__title{ font-size:clamp(19px,2vw,25px); line-height:1.15; letter-spacing:-.017em;
  color:var(--ink); max-width:88%; }
.dir__cat{ font-size:13px; color:var(--stone); letter-spacing:-.012em;
  padding:5px 13px; border:1px solid var(--linen); border-radius:999px; }

/* Стрелка сидит на нижней кромке круга и наполовину выходит наружу */
.dir__go{ position:absolute; left:50%; bottom:-21px; translate:-50% 0;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--ink); color:var(--ink);
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), translate .45s var(--ease); }
.dir__go svg{ width:18px; height:18px; }
.dir:hover .dir__go{ background:var(--ink); color:var(--paper); border-color:var(--ink);
  translate:-50% 4px; }

.dir__desc{ font-size:16px; line-height:1.43; color:var(--stone); max-width:34ch; }

@media (max-width:860px){
  .dirlist{ flex-direction:column; align-items:center; gap:52px; padding:24px 0; }
  .dir{ width:min(320px,86vw); }
  .dirlist > .dir:nth-child(odd),
  .dirlist > .dir:nth-child(even){ translate:0 0; }
}

/* ─────────────── Плитки-иконки и карточки ─────────────── */
.icon-tile{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:var(--paper); box-shadow:var(--sh-nav); color:var(--ink); }
.icon-tile svg{ width:26px; height:26px; }
.icon-tile--blue,.icon-tile--cyan,.icon-tile--violet,
.icon-tile--emerald,.icon-tile--amber,.icon-tile--pink{ color:var(--ink); }

.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tri__card{ padding:var(--pad-card); border-radius:var(--r-feature); background:var(--paper);
  box-shadow:var(--sh-feature); transition:transform .3s var(--ease); }
.tri__card:hover{ transform:translateY(-4px); }
.tri__card h3{ font-size:32px; line-height:1.2; margin:32px 0 20px; }
.tri__card p{ font-size:18px; line-height:1.33; color:var(--stone); }

.grid6{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cell{ padding:var(--pad-card); border-radius:var(--r-card); background:var(--paper);
  border:1px solid var(--linen); transition:transform .3s var(--ease), border-color .3s var(--ease); }
.cell:hover{ transform:translateY(-4px); border-color:var(--stone); }
.cell h3{ font-size:20px; line-height:1.25; margin:24px 0 12px; letter-spacing:-.012em; }
.cell p{ font-size:16px; line-height:1.43; color:var(--stone); }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ padding:var(--pad-card); border-radius:var(--r-feature); background:var(--paper);
  box-shadow:var(--sh-feature); transition:transform .3s var(--ease); }
.step:hover{ transform:translateY(-4px); }
.step__n{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:18px;
  font-size:20px; color:var(--violet); border:1px solid var(--violet); margin-bottom:32px; }
.step h3{ font-size:32px; line-height:1.2; margin-bottom:20px; }
.step p{ font-size:18px; line-height:1.33; color:var(--stone); }

/* ─────────────── Радиальная схема ─────────────── */
.diagram{ position:relative; max-width:620px; margin:0 auto; aspect-ratio:1/.82; }
.rings{ position:absolute; left:50%; top:50%; width:min(460px,86%); aspect-ratio:1;
  transform:translate(-50%,-50%); }
.ring{ position:absolute; inset:0; border-radius:50%; border:1px dashed var(--linen); }
.ring--2{ inset:15%; border-color:var(--linen); }
.ring--3{ inset:30%; border-style:solid; border-color:var(--vellum); }
/* Центрирование ядра и узлов вынесено в отдельное свойство `translate`:
   бесконечные анимации крутят `transform`, и совмещать их с центрирующим
   translate в одних кейфреймах — верный способ однажды сбить позицию. */
.dgm-core{ position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:120px; height:120px; border-radius:var(--r-feature); display:grid; place-items:center;
  background:var(--violet); box-shadow:0 18px 44px -18px rgba(93,72,219,.55); }
.dgm-core img{ width:auto; height:46px; object-fit:contain; }

.dgm-node{ position:absolute; width:56px; height:56px; border-radius:18px; display:grid;
  place-items:center; background:var(--paper); box-shadow:var(--sh-nav); color:var(--ink); }
.dgm-node svg{ width:24px; height:24px; }
.dgm-node--1{ top:4%; left:50%; translate:-50% 0; }
.dgm-node--2{ top:50%; right:2%; translate:0 -50%; }
.dgm-node--3{ bottom:4%; left:50%; translate:-50% 0; }
.dgm-node--4{ top:50%; left:2%; translate:0 -50%; }

/* Точки, бегущие по кольцам: «через хаб постоянно что-то идёт».
   Контейнер вращается, точка сидит на его кромке — так надёжнее offset-path. */
.orb{ position:absolute; border-radius:50%; pointer-events:none; }
.orb i{ position:absolute; top:-5px; left:50%; translate:-50% 0;
  width:9px; height:9px; border-radius:50%; background:var(--violet);
  box-shadow:0 0 12px rgba(93,72,219,.55); }
.orb--1{ inset:0; }
.orb--2{ inset:15%; }
.orb--2 i{ width:7px; height:7px; background:var(--iris); }
.orb--3{ inset:30%; }
.orb--3 i{ width:6px; height:6px; opacity:.7; }

.dgm-callout{ position:absolute; z-index:3; width:250px; background:var(--paper);
  border-radius:var(--r-card); padding:24px; text-align:left; box-shadow:var(--sh-card); }
.dgm-callout b{ display:block; margin-bottom:8px; font-size:18px; font-weight:500; color:var(--ink); }
.dgm-callout p{ font-size:16px; line-height:1.43; color:var(--stone); }
.dgm-callout--tr{ top:0; right:-3%; }
.dgm-callout--bl{ bottom:6%; left:-3%; }
.dgm-callout--br{ bottom:0; right:2%; }

@keyframes dgmSpin{ to{ transform:rotate(360deg); } }
@keyframes dgmSpinRev{ to{ transform:rotate(-360deg); } }
@keyframes dgmFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes dgmNode{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes dgmCore{
  0%,100%{ transform:scale(1); box-shadow:0 18px 44px -18px rgba(93,72,219,.55); }
  50%    { transform:scale(1.035); box-shadow:0 24px 60px -18px rgba(93,72,219,.75); }
}
.ring{ animation:dgmSpin 46s linear infinite; }
.ring--2{ animation:dgmSpinRev 34s linear infinite; }
.ring--3{ animation:dgmSpin 62s linear infinite; }
.orb--1{ animation:dgmSpin 22s linear infinite; }
.orb--2{ animation:dgmSpinRev 16s linear infinite; }
.orb--3{ animation:dgmSpin 11s linear infinite; }
.dgm-core{ animation:dgmCore 5.5s ease-in-out infinite; }
.dgm-node{ animation:dgmNode 6.5s ease-in-out infinite; }
.dgm-node--2{ animation-delay:1.1s; }
.dgm-node--3{ animation-delay:2.2s; }
.dgm-node--4{ animation-delay:3.3s; }
.dgm-callout{ animation:dgmFloat 7s ease-in-out infinite; }
.dgm-callout--bl{ animation-delay:1.3s; } .dgm-callout--br{ animation-delay:2.6s; }

/* Сборка схемы при появлении: ядро, затем узлы, затем точки.
   Анимируем только прозрачность — бесконечные циклы выше уже заняли
   transform, и второй источник за то же свойство их бы сбил. */
html.mo .dgm-core, html.mo .dgm-node, html.mo .orb{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .ring,.ring--2,.ring--3,.orb,.orb--1,.orb--2,.orb--3,
  .dgm-core,.dgm-node,.dgm-callout{ animation:none; }
  html.mo .dgm-core, html.mo .dgm-node, html.mo .orb{ opacity:1; }
}

/* ─────────────── Дашборд ─────────────── */
.dash-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:stretch; }
.dash{ border-radius:var(--r-feature); padding:var(--pad-card); background:var(--paper);
  box-shadow:var(--sh-feature); color:var(--ink); }
.dash__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dash__top b{ font-size:18px; font-weight:500; }
.dash__tabs{ display:flex; gap:8px; }
.dash__tabs span{ font-size:14px; padding:8px 16px; border-radius:var(--r-card);
  color:var(--stone); border:1px solid var(--linen); }
.dash__tabs span.on{ color:var(--ink); border-color:var(--ink); }
.dash__big{ font-size:clamp(40px,5vw,84px); line-height:1.1; letter-spacing:-.017em; margin:8px 0 4px; }
.dash__big em{ font-style:normal; color:var(--violet); }
.dash__sub{ font-size:16px; color:var(--stone); }
.dash__chart{ margin-top:32px; }

.dash-side{ display:flex; flex-direction:column; gap:20px; }
.dash-card{ background:var(--paper); border-radius:var(--r-card); padding:var(--pad-card);
  border:1px solid var(--linen); }
.dash-card h3{ font-size:20px; line-height:1.25; letter-spacing:-.012em; margin-bottom:24px; }

.bars{ display:flex; flex-direction:column; gap:16px; }
.bar{ display:flex; align-items:center; gap:14px; font-size:16px; color:var(--stone); }
.bar .dot{ width:10px; height:10px; border-radius:3px; flex:none; }
.bar .track{ flex:1; height:8px; border-radius:999px; background:var(--vellum); overflow:hidden; }
.bar .fill{ display:block; height:100%; border-radius:999px; }
.bar b{ color:var(--ink); font-weight:400; min-width:42px; text-align:right;
  font-variant-numeric:tabular-nums; }

.status{ display:flex; flex-direction:column; gap:14px; }
.status li{ display:flex; align-items:center; justify-content:space-between;
  font-size:16px; color:var(--graphite); }
/* Значение несёт текст, не цвет: второго акцента система не допускает */
.status .badge{ font-size:14px; padding:6px 14px; border-radius:var(--r-card); }
.badge--ok{ background:var(--violet-wash); color:var(--violet); }
.badge--wait{ background:var(--vellum); color:var(--graphite); }
.badge--no{ background:var(--paper); color:var(--stone); border:1px solid var(--linen); }

/* ─────────────── Финальный призыв ─────────────── */
.cta{ position:relative; text-align:center; padding:100px 40px; border-radius:var(--r-feature);
  background:var(--paper); box-shadow:var(--sh-card); }
.cta h2{ font-size:clamp(32px,4.6vw,68px); line-height:1.1; letter-spacing:-.017em;
  max-width:18ch; margin-inline:auto; color:var(--ink); text-wrap:balance; }
.cta p{ margin:32px auto 0; max-width:52ch; color:var(--stone); font-size:18px; line-height:1.33; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:40px; }

/* ─────────────── Подвал ─────────────── */
.foot{ border-top:1px solid var(--vellum); padding:100px 0 64px; background:var(--paper); }
.foot__inner{ display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between; }
.foot__contacts{ display:flex; flex-wrap:wrap; gap:32px; }
.foot__contacts a{ font-size:16px; color:var(--stone); transition:color .25s var(--ease); }
.foot__contacts a:hover{ color:var(--ink); }
.foot__copy{ font-size:14px; color:var(--stone); }

/* ─────────────── Наклон по курсору ─────────────── */
.tilt3d{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d; transition:transform .3s var(--ease); will-change:transform; }
.tilt3d .lift{ transform:translateZ(10px); }
@media (hover:none),(prefers-reduced-motion:reduce){ .tilt3d{ transform:none !important; } }

/* ─────────────── Появление ───────────────
   Прячет только класс `mo` на <html>: страховка в <head> снимет его,
   если моушн-модуль не поднялся, и страница останется видимой. */
.reveal, [data-mo]{ opacity:1; }
html.mo .reveal{ opacity:0; transform:translateY(24px); }
html.mo [data-mo]{ opacity:0; }
html.mo .float, html.mo .statchip{ will-change:transform; }
@media (prefers-reduced-motion:reduce){
  html.mo .reveal, html.mo [data-mo]{ opacity:1; transform:none; }
}

/* График выручки прочерчивается переходом, а не Motion */
html.mo .chart-line{ transition:stroke-dashoffset 1.5s var(--ease); }
html.mo .chart-fill{ opacity:0; transition:opacity .9s var(--ease) .45s; }
html.mo .chart-dot{ opacity:0; transition:opacity .35s var(--ease) 1.35s; }
html.mo .dash__chart.is-drawn .chart-fill,
html.mo .dash__chart.is-drawn .chart-dot{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  html.mo .chart-line{ transition:none; }
  html.mo .chart-fill, html.mo .chart-dot{ opacity:1; transition:none; }
}

/* ─────────────── Адаптив ─────────────── */
@media (max-width:1080px){
  .tri,.grid6,.steps,.dash-wrap{ grid-template-columns:1fr 1fr; }
  .dash-wrap{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
  .diagram{ max-width:460px; }
  .dgm-callout{ position:static; width:auto; margin-top:20px; animation:none; }
  .float--integrate{ left:-8px; }
}
@media (max-width:720px){
  .wrap{ padding-inline:20px; }
  :root{ --sec-gap:64px; --pad-card:24px; }
  .tri,.grid6,.steps{ grid-template-columns:1fr; }
  .hero{ padding:40px 0 var(--sec-gap); }
  .hero__title{ max-width:none; }
  .hero__title br, .sec-title br{ display:none; }
  .stage{ margin-top:48px; }
  .float,.statchip{ position:static; margin:20px auto 0; width:auto; max-width:320px; }
  .float--integrate{ display:none; }
  .dir{ grid-template-columns:auto 1fr; column-gap:20px; row-gap:8px; padding:28px 4px; }
  .dir__go{ grid-column:1 / -1; justify-self:start; width:48px; height:48px; margin-top:10px; }
  .dir:hover{ padding-left:4px; }
  .cta{ padding:64px 24px; }
  .foot{ padding:64px 0 48px; }
}