/* ------------------------------------------------------------------
   theme-lime.css — перекраска клона в лаймовую тёмную палитру.

   Донор построен на инверсной паре токенов:
     --color-surface-primary  = «бумага» (белый): фон светлых поверхностей
                                И цвет текста НА тёмных блоках
     --color-neutral-black    = «чернила» (чёрный): текст на светлом
                                И фон тёмных блоков (футер, тёмные пилюли)

   Поэтому достаточно поменять их местами, чтобы весь сайт перевернулся
   консистентно. Точечные правила ниже нужны там, где донор писал цвет
   литералом мимо токенов.

   ⚠ НЕ трогаем литералы #fff/#000 внутри mask-image / -webkit-mask —
   там они значат яркость маски, а не цвет. Замена сломает обрезку
   лого-марки и аудит-полосы.
   ------------------------------------------------------------------ */

:root {
  /* ——— инверсная пара ——— */
  --color-surface-primary: #0d130e;   /* было #ffffff */
  --color-neutral-black:   #e9ebe8;   /* было #000000 */

  /* ——— поверхности ——— */
  --color-surface-secondary: #121a13; /* было #ededed */
  --color-surface-card:      #1b231d; /* было #e1e1e1 */
  --color-surface-warm:      #111811; /* было #f4f0ec — тёплая бежевая секция */
  --color-surface-warm-transparent: rgba(17, 24, 17, 0);
  --color-surface-dark:      rgba(6, 10, 6, .92);

  /* ——— текст ——— */
  --color-text-display:     #e9ebe8;  /* было #1f1f1f */
  --color-text-secondary:   #8fa393;  /* было #707070 */
  --color-text-on-dark:     #c9d6c4;  /* было #cfcdca */
  --color-text-audit:       #9ab09d;  /* было #5d5d5d */
  --color-text-audit-muted: #3c4a3d;  /* было #d5d5d5 */

  /* ——— акцент: лайм вместо синего ——— */
  --color-accent-blue:      #ccff00;  /* было #1d8dff */
  --color-accent-blue-dark: #a8e63c;  /* было #003fc8 */
  --color-cursor-risk:      #ccff00;

  /* ——— границы и оверлеи ——— */
  --color-border-default: #24302610;
  --color-border-audit:   #26332880;
  --color-overlay-black-5: rgba(233, 235, 232, .05);
  --color-overlay-black-8: rgba(233, 235, 232, .08);

  /* ——— тёплая шкала: из коричневой в зелёную ——— */
  --color-warm-800: rgb(214, 224, 210);
  --color-warm-600: rgb(168, 186, 166);
  --color-warm-500: rgb(129, 150, 128);
  --color-warm-300: rgb(74, 92, 74);
  --color-warm-200: rgb(50, 65, 51);

  --shadow-card-elevated: 0 3px 24px rgba(0, 0, 0, .45);

  /* ——— наши брендовые ——— */
  --lime: #ccff00;
  --lime-2: #a8e63c;
  --ink-deep: #0d130e;
  --ink-raised: #1b231d;
}

/* Тело страницы: инверсия сделала бы поля вокруг контейнера кремовыми. */
html,
body {
  background: var(--ink-deep);
  color: var(--color-neutral-black);
}

/* ——— герой и его тёмный фон ——— */
.hero-top-shell { background: var(--ink-deep); }
.hero-top-background { background: linear-gradient(180deg, #080c08, #1b231d); }
.hero-top-background:before { background: #060a06; }
.hero-shell { background: linear-gradient(180deg, #080c08, #1b231d); }
.hero-top-mobile-menu { background: #0d130eeb; }

/* ——— главные кнопки: лайм ——— */
.pill-button-white,
.pill-button-dark {
  background: var(--lime);
  color: var(--ink-deep);
}
.hero-pill,
.step-card__number {
  background: var(--lime);
  color: var(--ink-deep);
}

/* ——— карточки шагов: поднимаем над фоном, тень на тёмном не читается ——— */
.step-card {
  background: var(--ink-raised);
  box-shadow: inset 0 0 0 1px #2b3a2d;
}
.audit-logo {
  background: var(--ink-raised);
}

/* Точечные иллюстрации трёх колонок — не векторные заливки, а встроенный
   растр внутри svg, поэтому hex-заменой их не перекрасить. Сдвигаем оттенок:
   у донора точки синие (~213°), нам нужен лайм (~79°), отсюда 226deg. */
.three-column-placeholder-grid__intro img {
  filter: hue-rotate(226deg) saturate(1.35);
}

/* ——— бежевая секция «фаз активации» (литералы мимо токенов) ——— */
.section-activation-phases-desktop {
  background-color: var(--color-surface-warm);
  color: var(--color-text-display);
}
.activation-phases-heading,
.activation-phases-copy { color: var(--color-text-display); }
.activation-phases-mobile-row + .activation-phases-mobile-row { border-top: 1px solid #2b3a2d; }

/* ——— «активация»: белый круг в центре тёмной карточки становится лаймовым ——— */
.hero-activation-center { background: var(--lime); box-shadow: inset 0 0 0 1px #00000022; }
.hero-activation-stage-complete .hero-activation-center { background: var(--ink-deep); }
.hero-activation-center__ring-progress { stroke: var(--ink-deep); }
.hero-activation-center__ring-track { stroke: #0d130e29; }
.hero-activation-center__count { color: #0d130e8a; }
.hero-activation-center__step { color: var(--ink-deep); }
.hero-activation-center:before { background: linear-gradient(180deg, #e4ff6b, #a8e63c); }

.hero-activation-new-mobile { background: var(--ink-raised); }
.hero-activation-new-mobile__center { background: var(--lime); }
.hero-activation-new-mobile__center span { color: var(--ink-deep); }
.hero-activation-new__center-face { background: linear-gradient(180deg, #3d4a34, #0b0f0a); }

.hero-activation-pill { background: #1b231df5; border-color: rgba(204, 255, 0, .14); }
.hero-activation-eyebrow { color: #e9ebe88f; }
.hero-activation-stage__halo--top { background: rgba(204, 255, 0, .10); }
.hero-activation-stage-mobile__orb { background: var(--lime); color: var(--ink-deep); }
.hero-activation-stage-mobile__pill {
  background: #1b231dd1;
  border: 1px solid rgba(233, 235, 232, .12);
  color: #e9ebe8b8;
}

/* ——— предфутерная CTA-полоса: тёплый серый градиент в зелёный ——— */
.section-cta-split-desktop {
  background: linear-gradient(180deg, #0d130e, #16201a 12%, #24302a);
}
.section-cta-split-desktop:before { background: rgba(233, 235, 232, .15); }

/* ——— футер: лаймовый блок вместо чёрного ——— */
.section-footer-desktop {
  background: var(--lime);
  color: var(--ink-deep);
}
.section-footer-desktop a { color: var(--ink-deep); }
.footer-brand p { color: rgba(13, 19, 14, .68); }
.footer-links .animated-underline-link:after { background: rgba(13, 19, 14, .45); }
.footer-socials a { border: 1px solid rgba(13, 19, 14, .28); }
.footer-socials a:hover,
.footer-socials a:focus-visible { border-color: rgba(13, 19, 14, .6); }

/* Лого и вордмарк в футере — белые SVG-картинки. На лайме они пропадают,
   поэтому гасим их в чистый чёрный фильтром (works для одноцветных svg). */
.footer-logo,
.footer-wordmark,
.footer-socials img { filter: brightness(0); }

/* ——— модалка заявки ——— */
.request-demo-modal__card { box-shadow: 0 32px 80px #00000080; }
.request-demo-modal__input {
  background: var(--ink-raised);
  color: var(--color-text-display);
  box-shadow: inset 0 0 0 1px #2b3a2d;
}

/* ——— липкий хедер ——— */
.sticky-header-desktop {
  background: #0d130ef2;
  box-shadow: 0 1px 24px #00000066;
}
/* У донора шапка была белой, поэтому логотип гасился в чёрный. У нас она
   тёмная — фильтр снимаем, иначе вордмарк сливается с фоном. */
.sticky-header-desktop__logo { filter: none; }

/* ------------------------------------------------------------------
   Светлый текст на тёмных блоках.

   Донор красит такой текст тем же токеном --color-surface-primary,
   которым красит светлые ФОНЫ. После инверсии токен стал тёмным, и
   весь текст на тёмных блоках (герой, карточки карусели, счётчики)
   утонул в фоне. Разводим руками: перечисляем ровно те правила донора,
   где токен работал цветом текста, и возвращаем им светлый.

   Не включены сюда: .pill-button-dark, .step-card__number,
   .section-footer-desktop, .hero-activation-stage-mobile__orb — они
   стали лаймовыми, и текст на них наоборот должен быть тёмным.
   ------------------------------------------------------------------ */
.pill-button-outline-white,
.cta-card,
.hero-counter,
.hero-control,
.hero-card,
.hero-top-shell,
.hero-top-menu-toggle,
.hero-top-nav .animated-underline-link:hover,
.hero-top-nav .animated-underline-link:focus-visible,
.hero-top-mobile-menu,
.hero-top-menu-close,
.hero-top-mobile-menu__primary-link,
.hero-top-mobile-menu__secondary-link:hover,
.hero-top-mobile-menu__secondary-link:focus-visible {
  color: #e9ebe8;
}

/* Подпись внутри лаймового круга — наоборот, тёмная. */
.hero-activation-center__label { color: var(--ink-deep); }

/* ------------------------------------------------------------------
   Правки по замечаниям (детали, которые донор красил под свою тему)
   ------------------------------------------------------------------ */

/* Иконки соцсетей в шапке. Донор гасил их в чёрный (`brightness(0)`) — на
   тёмной шапке это чёрное на чёрном. Возвращаем белый и увеличиваем. */
.hero-top-socials a {
  width: 46px;
  height: 46px;
}
.hero-top-socials img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

/* Цифры статистики — тем же шрифтом, что и крупные заголовки страницы.
   Outfit на таком кегле читается как интерфейс, а не как заявление. */
.hero-stats-item__value {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Стрелка внутри лаймовой кнопки. У донора тёмной делалась только «белая»
   кнопка; наша основная — `pill-button-dark`, и на ней стрелка оставалась
   белой поверх лайма. */
.pill-button-dark .button-arrow__glyph img,
.pill-button-white .button-arrow__glyph img {
  filter: brightness(0);
}

/* Стрелки у ссылок в блоке рисков: саму иконку перекрасили в лайм в
   `rebrand.mjs`, здесь снимаем фильтр, который перебивал бы её цвет. */
.anchor-arrow img {
  filter: none;
}

/* ——— контурные кнопки ——— */
.pill-button-outline-white { box-shadow: inset 0 0 0 1px rgba(233, 235, 232, .3); }
.pill-button-outline-black { box-shadow: inset 0 0 0 1px rgba(233, 235, 232, .35); color: var(--color-text-display); }

/* ——— разделительная линия в CTA ——— */
.cta-shell:after { background: rgba(233, 235, 232, .15); }

/* ------------------------------------------------------------------
   Появление контента (пара к reveal.js)

   Начальное состояние висит на `.has-reveal` — класс ставит сам скрипт.
   Без JS правила не применяются вовсе, и контент виден сразу: невидимая
   страница из-за упавшего скрипта хуже, чем страница без анимации.
   ------------------------------------------------------------------ */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .62s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.has-reveal .reveal.is-revealed {
  opacity: 1;
  transform: none;
}
/* Ссылки рисков разъезжаются к своим краям — движение поддерживает раскладку,
   а не спорит с ней. */
.has-reveal .risk-row .anchor-link.reveal { transform: translateX(-24px); }
.has-reveal .risk-row .anchor-link-right.reveal { transform: translateX(24px); }
.has-reveal .risk-row .anchor-link.reveal.is-revealed,
.has-reveal .risk-row .anchor-link-right.reveal.is-revealed { transform: none; }
/* Карточки поднимаются заметнее — у них своя масса. */
.has-reveal .step-card.reveal,
.has-reveal .doc-card.reveal,
.has-reveal .three-column-placeholder-grid__column.reveal { transform: translateY(28px); }

/* ——— герой: появляется сразу на загрузке, без ожидания прокрутки ——— */
@keyframes stake-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.has-reveal .hero-top-title__line,
.has-reveal .hero-top-subtitle,
.has-reveal .hero-top-actions,
.has-reveal .hero-top-trusted {
  animation: stake-rise .78s cubic-bezier(.22, 1, .36, 1) both;
}
.has-reveal .hero-top-title__line:nth-child(1) { animation-delay: .06s }
.has-reveal .hero-top-title__line:nth-child(2) { animation-delay: .16s }
.has-reveal .hero-top-subtitle { animation-delay: .26s }
.has-reveal .hero-top-actions { animation-delay: .36s }
.has-reveal .hero-top-trusted { animation-delay: .48s }

/* Ротация тикера в заголовке: у донора слово просто подменяется, добавляем
   ему короткий подъём, чтобы смена читалась как смена, а не как рывок. */
@keyframes stake-word-swap {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: none }
}
.has-reveal .hero-top-title__word--animated {
  animation: stake-word-swap .5s cubic-bezier(.22, 1, .36, 1) both;
}

/* Кнопки и карточки: лёгкий отклик на наведение. */
.pill-button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.pill-button:hover { transform: translateY(-2px); }
.pill-button-white:hover,
.pill-button-dark:hover { box-shadow: 0 8px 24px rgba(204, 255, 0, .22); }
.step-card { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #3d5140, 0 12px 32px rgba(0, 0, 0, .45); }

@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal,
  .has-reveal .hero-top-title__line,
  .has-reveal .hero-top-subtitle,
  .has-reveal .hero-top-actions,
  .has-reveal .hero-top-trusted {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}