/* ═══════════════════════════════════════════════════════════
   EDGE · bot.html в системе главной
   Слой поверх style.css. Разметку страницы (830 строк) не трогаем:
   style.css построен на переменных — 368 обращений к var() против 52
   зашитых цветов, поэтому перекраска делается переопределением токенов
   и точечной правкой тех компонентов, что расходятся структурно.

   Порядок подключения: tokens.css → style.css → этот файл.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Поверхности: полотно одно на всю страницу ── */
  --bg:         var(--color-paper-white);
  --surface:    var(--color-paper-white);
  --surface-2:  var(--color-paper-white);
  --surface-3:  var(--color-vellum-gray);

  /* ── Текст. --ink-3 держим на 5.1:1, а не на стоуновских 3.23:1 ── */
  --ink:        var(--color-carbon-black);
  --ink-2:      var(--color-graphite);
  --ink-3:      #6E6E6E;

  --line:       var(--color-linen);
  --line-2:     var(--color-linen);

  /* ── Один хроматический голос. Живая триада Aurora UI (синий, оранжевый,
        малиновый, бирюзовый, зелёный) схлопывается в фиолетовый: система
        второго акцента не допускает. ── */
  --violet:      #5D48DB;  --violet-soft: #F1EEFC;
  --blue:        #5D48DB;  --blue-soft:   #F1EEFC;
  --amber:       #5D48DB;  --amber-soft:  #F1EEFC;
  --pink:        #5D48DB;  --pink-soft:   #F1EEFC;
  --cyan:        #5D48DB;  --cyan-soft:   #F1EEFC;
  --green:       #5D48DB;  --green-soft:  #F1EEFC;
  --gold-bright: #5D48DB;
  --brand:       #5D48DB;

  /* ── Тени только длинные: короткие в системе запрещены, глубину дают
        разлёт и радиус, а не заливка ── */
  --sh-1: var(--shadow-xl-4);
  --sh-2: var(--shadow-xl-4);
  --sh-3: var(--shadow-xl-2);
  --sh-4: var(--shadow-xl);
  --sh-5: var(--shadow-xl);
  --sh-6: var(--shadow-xl);
  --sh-glow: var(--shadow-xl-2);

  /* ── Ровно три ступени радиуса ── */
  --r-sm: 30px; --r-md: 30px; --r-lg: 30px; --r-xl: 45px; --r-full: 999px;
  --r-nav: 52px;

  --container: 1200px;
  --nav-h: auto;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ─────────────── Типографика ───────────────
   Одна гарнитура на всё, вес 400. Playfair со страницы уходит — система
   требует единственного шрифта, и на главной он уже снят. */
h1,h2,h3,h4{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight:400; line-height:1.15; letter-spacing:-.017em; color:var(--ink);
}
body{ color:var(--ink-2); letter-spacing:-.012em; }

.hero__title{ font-size:clamp(34px,5.4vw,72px); line-height:1.06; letter-spacing:-.03em;
  text-wrap:balance; }
.section__title{ font-size:clamp(28px,4vw,52px); line-height:1.1; letter-spacing:-.017em;
  text-wrap:balance; }

/* Многоцветный градиент в заголовках — это второй, третий и четвёртый
   акценты разом. Заменяем сплошным фиолетовым. */
.grad{
  background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:var(--violet);
}

/* ─────────────── Кнопки: жидкое стекло ───────────────
   Тот же порт LiquidButton, что на главной: тело прозрачное, объём даёт
   стеклянный кант, фон преломляет SVG-фильтр (разметка — в конце bot.html).
   Залитых цветом кнопок в системе нет, поэтому градиентная --primary
   становится обводкой. */
.btn{
  position:relative; z-index:0;
  border-radius:var(--r-sm); background:transparent;
  border:1px solid var(--ink); color:var(--ink);
  font-weight:400; font-size:16px; letter-spacing:-.012em;
  box-shadow:none;
  -webkit-backdrop-filter:url("#container-glass");
  backdrop-filter:url("#container-glass");
  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);
}
.btn:hover{ transform:scale(1.04); }
.btn:active{ transform:scale(.99); }
@media (prefers-reduced-motion:reduce){ .btn:hover,.btn:active{ transform:none; } }

.btn--primary{ background:none; border-color:var(--violet); color:var(--violet);
  box-shadow:none; }
.btn--primary:hover{ background:none; filter:none; border-color:#4A38C4; color:#4A38C4;
  box-shadow:none; }
.btn--glass, .btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink);
  box-shadow:none; }
.btn--glass:hover, .btn--ghost:hover{ background:transparent; border-color:var(--ink-2);
  color:var(--ink); box-shadow:none; }

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

/* ─────────────── Шапка: плавающая стеклянная пилюля ───────────────
   Здесь стекло работает по-настоящему: под липкой шапкой едет содержимое. */
.nav{ height:auto; padding:18px 0 0; background:transparent; }
.nav::before{ display:none; }
.nav__inner{
  position:relative; z-index:0; height:auto;
  padding:14px 20px; 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(--shadow-xl-4);
}
.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__back{ color:var(--ink-3); }
.nav__back:hover{ color:var(--ink); }
/* :not(.btn) обязателен: в .nav__links лежат ещё и кнопки, а селектор
   .nav__links a специфичнее .btn--primary и забирал у них цвет и радиус. */
.nav__links a:not(.btn){ color:var(--ink-3); font-weight:400; }
.nav__links a:not(.btn):hover{ color:var(--ink); background:transparent; }
.nav__links a.is-active:not(.btn){ color:var(--ink); }
.nav__links a.is-active::after{ background:var(--violet); }
/* Исходное .nav__links a из style.css (0,2,0) сильнее .btn--primary (0,1,0),
   поэтому кнопкам в мобильном меню нужен селектор той же весовой категории. */
.nav__links a.btn{ border-radius:30px; padding:12px 18px; }
.nav__links a.btn--primary{ color:var(--violet); border-color:var(--violet); }
.nav__links a.btn--primary:hover{ color:#4A38C4; border-color:#4A38C4; background:transparent; }
.nav__links a.btn--glass{ color:var(--ink); border-color:var(--ink); }
.nav__links a.btn--glass:hover{ color:var(--ink); background:transparent; }

/* ─────────────── Фон ───────────────
   Цветные пятна Aurora UI сводим к одному фиолетовому дыханию: в системе
   единственный атмосферный элемент, и он в акцентном цвете. */
.bg-grid, .bg-noise{ display:none; }
.aurora{ filter:blur(110px); opacity:.5; }
.aurora--1{ background:radial-gradient(circle, rgba(150,133,255,.26), transparent 66%); }
.aurora--2{ background:radial-gradient(circle, rgba(93,72,219,.18), transparent 68%); }
.aurora--3{ background:radial-gradient(circle, rgba(150,133,255,.20), transparent 70%); }

/* ─────────────── Мелочи, выбивавшиеся из системы ─────────────── */
.eyebrow{ border-radius:999px; border:1px solid var(--line); background:var(--surface);
  box-shadow:none; color:var(--ink-3); font-weight:400; font-size:14px; }
.eyebrow__dot{ background:var(--violet); }

/* Цветные плитки иконок — в один тон */
.ico, .ico--violet, .ico--indigo, .ico--cyan, .ico--emerald,
.ico--amber, .ico--rose, .ico--pink{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--shadow-xl-4);
}

/* Карточки: различаются тенью и радиусом, а не заливкой */
.feat, .faq__item, .float-card, .admin, .calc, .gallery, .card{
  background:var(--surface); border-radius:var(--r-lg);
}

:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:12px; }

/* Заставка и кастомный курсор со страницы сняты — на главной их нет,
   и они первыми выбивались из системы. Разметка удалена, эти правила
   стоят страховкой на случай, если что-то из них вернётся. */
.intro, .cursor-ring, .cursor-dot{ display:none !important; }

/* ─────────────── Финальный призыв ───────────────
   Был тёмной плашкой с белым текстом. В системе тёмных полос нет:
   белая карточка, различимая тенью и радиусом, как на главной. */
.cta{ background:var(--surface); color:var(--ink-3); box-shadow:var(--shadow-xl);
  border-radius:var(--r-xl); }
.cta h2, .cta h3{ color:var(--ink); }
.cta p{ color:var(--ink-3); }
.cta .grad{ background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:var(--violet); }
.cta .btn--primary{ background:transparent; color:var(--violet); border-color:var(--violet); }
.cta .btn--primary:hover{ background:transparent; }
.cta .btn--glass{ background:transparent; color:var(--ink); border-color:var(--ink); }
.cta .btn--glass:hover{ background:transparent; }
.cta__glow{ display:none; }

/* ─────────────── Слайд-табы в шапке ───────────────
   Та же механика, что на главной. Только на десктопе: ниже 1081px шапка
   уходит в выпадающее меню, и пилюля-контейнер там не нужна.
   На внутренних страницах опорный пункт — тот, что main.js пометил как
   is-active по прокрутке, так что бегунок показывает текущий раздел. */
@media (min-width:1081px){
  .nav__links{
    position:relative; z-index:0; gap:0; 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:not(.btn){
    position:relative; z-index:1; padding:8px 14px; font-size:15px;
    color:#fff; mix-blend-mode:difference; background:transparent;
  }
  .nav__links a:not(.btn):hover{ color:#fff; background:transparent; }
  /* Подчёркивание активного пункта заменяет бегунок — оно бы дублировало. */
  .nav__links a.is-active::after{ display:none; }

  .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; } }

/* ─────────────── Классы, встречающиеся только в dev.html ─────────────── */
.ico--blue, .ico--green{ background:var(--surface); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--shadow-xl-4); }
.accent-amber{ color:var(--violet); }
.marquee-wrap, .marquee{ background:transparent; }
.marquee__track span{ color:var(--ink-3); }

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