/* ==========================================================================
   Nova Tax — enhance.css
   Анимации и декоративные улучшения поверх существующего дизайна.
   НЕ меняет палитру, шрифты, размеры и порядок блоков.

   Подключение:  <link rel="stylesheet" href="assets/css/enhance.css">
   Уровень:      <html lang="ru" class="fx" data-fx="2">
                 data-fx="1" — деликатный
                 data-fx="2" — премиальный   (рекомендуется)
                 data-fx="3" — максимум
   Отключить:    убрать class="fx" — сайт вернётся к исходному виду.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Токены анимации (никаких новых цветов — только существующие переменные)
   -------------------------------------------------------------------------- */
html.fx {
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
  --fx-fast: 200ms;
  --fx-mid: 380ms;
  --fx-slow: 700ms;
  --fx-lift: 0 2px 4px rgba(0, 62, 84, .05), 0 18px 40px rgba(0, 62, 84, .12);
  --fx-glow: 0 0 0 1px rgba(228, 155, 60, .35), 0 14px 34px rgba(152, 95, 0, .16);
  scroll-behavior: smooth;
}

html.fx body { overflow-x: hidden; }

/* Видимый фокус для клавиатуры (доступность) */
html.fx :focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Внутри блоков с overflow:hidden внешнюю рамку обрезает — рисуем её внутри элемента:
   вопрос FAQ (.faq-item) и переключатель языка RU/EN (капсула .pill). */
html.fx .faq-item > summary:focus-visible {
  outline-offset: -3px;
  border-radius: 16px;
}
html.fx .nav-lang a:focus-visible,
html.fx .mobile-nav-lang a:focus-visible {
  outline-offset: -3px;
  border-radius: 999px;
}

/* ==========================================================================
   УРОВЕНЬ 1 — ДЕЛИКАТНЫЙ
   Появление при скролле, аккуратные hover-состояния, плавные переходы.
   ========================================================================== */

/* --- 1.1 Появление блоков при скролле -------------------------------------
   Класс .fx-rv ставит JS. Без JS всё остаётся видимым.                     */
/* will-change здесь не ставим: на длинных страницах сотни таких блоков, и Firefox
   предупреждал о превышении бюджета памяти will-change. Переход opacity/transform
   и без него идёт на композиторе. */
html.fx .fx-rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--fx-slow) var(--fx-ease),
    transform var(--fx-slow) var(--fx-ease);
}
html.fx .fx-rv.fx-in {
  opacity: 1;
  transform: none;
}

/* Появление сбоку — для колонки с фото в hero */
html.fx .fx-rv-right { transform: translate(24px, 12px); }

/* --- 1.2 Карточки услуг ---------------------------------------------------- */
html.fx .services-grid > a,
html.fx .ar-cards > .ar-card {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease),
    border-color var(--fx-mid) var(--fx-ease);
}
html.fx .services-grid > a:hover,
html.fx .ar-cards > .ar-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent) !important;
  box-shadow: var(--fx-lift);
}
html.fx .services-grid > a > svg {
  transition: transform var(--fx-mid) var(--fx-ease);
}
html.fx .services-grid > a:hover > svg {
  transform: translateY(-2px) scale(1.08);
}
/* строка «Подробнее →»: стрелка уезжает вправо; на телефоне карточка «вдавливается» при нажатии */
html.fx .services-grid .svc-more svg { transition: transform var(--fx-fast) var(--fx-ease); }
@media (hover: hover) and (pointer: fine) {
  html.fx .services-grid > a:hover .svc-more { color: var(--accent); }
  html.fx .services-grid > a:hover .svc-more svg { transform: translateX(4px); }
}
html.fx .services-grid > a:active { transform: scale(.985); border-color: var(--accent) !important; }
html.fx .services-grid > a:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }

/* Ссылки «или сразу запишитесь на консультацию — от $…» (первый экран) и «Консультация от $…» (карточка цены) */
html.fx .hero-book-link svg,
html.fx .sv-book svg { transition: transform var(--fx-fast) var(--fx-ease); }
html.fx .hero-book-link:hover svg,
html.fx .sv-book:hover svg { transform: translateX(4px); }

/* --- 1.3 Кнопки ------------------------------------------------------------ */
html.fx .btn-primary,
html.fx .btn-secondary {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--fx-fast) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease),
    background-color var(--fx-fast) var(--fx-ease),
    border-color var(--fx-fast) var(--fx-ease),
    color var(--fx-fast) var(--fx-ease);
}
html.fx .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(152, 95, 0, .28);
}
html.fx .btn-secondary:hover { transform: translateY(-2px); }
html.fx .btn-primary:active,
html.fx .btn-secondary:active { transform: translateY(0); }

/* Стрелка внутри кнопки уезжает вправо */
html.fx .btn-primary svg,
html.fx .btn-secondary svg {
  transition: transform var(--fx-mid) var(--fx-ease);
}
html.fx .btn-primary:hover svg,
html.fx .btn-secondary:hover svg { transform: translateX(4px); }

/* --- 1.4 Навигация: анимированное подчёркивание ----------------------------- */
html.fx .nav-links a {
  position: relative;
  transition: color var(--fx-fast) var(--fx-ease);
}
html.fx .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--fx-mid) var(--fx-ease);
}
html.fx .nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* активный пункт уже подчёркнут инлайн-стилем — дубль не рисуем */
html.fx .nav-links a[style*="border-bottom"]::after { content: none; }

/* --- 1.5 Ссылки в футере и соцсети ------------------------------------------ */
html.fx .footer-grid a {
  transition: color var(--fx-fast) var(--fx-ease), transform var(--fx-fast) var(--fx-ease);
  display: inline-block;
}
html.fx .footer-grid a:hover { color: var(--accent-dark) !important; }
html.fx .social-link {
  transition: transform var(--fx-mid) var(--fx-ease), color var(--fx-fast) var(--fx-ease);
}
html.fx .social-link:hover { transform: translateY(-3px) scale(1.1); }

/* --- 1.6 Карточки сертификатов и блоки-карточки ------------------------------ */
html.fx .badge-card {
  transition:
    transform var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease),
    border-color var(--fx-mid) var(--fx-ease);
}
html.fx .badge-card:hover { border-color: var(--accent) !important; }
html.fx .badge-icon { transition: transform var(--fx-slow) var(--fx-ease); }
html.fx .badge-card:hover .badge-icon { transform: scale(1.05); }

html.fx .arrow-btn {
  transition:
    transform var(--fx-fast) var(--fx-ease),
    border-color var(--fx-fast) var(--fx-ease),
    color var(--fx-fast) var(--fx-ease),
    background-color var(--fx-fast) var(--fx-ease);
}
html.fx .arrow-btn:hover { transform: scale(1.08); background: var(--accent-soft); }
html.fx .arrow-btn:active { transform: scale(.96); }

html.fx #qualThumb { transition: width var(--fx-mid) var(--fx-ease), left var(--fx-mid) var(--fx-ease); }

/* --- 1.7 Поля формы --------------------------------------------------------- */
html.fx .contact-field-input {
  transition:
    border-color var(--fx-fast) var(--fx-ease),
    box-shadow var(--fx-fast) var(--fx-ease);
}
html.fx .contact-field-input:focus {
  box-shadow: 0 0 0 3px rgba(228, 155, 60, .22);
}
html.fx .contact-method-btn {
  transition:
    border-color var(--fx-fast) var(--fx-ease),
    background-color var(--fx-fast) var(--fx-ease),
    color var(--fx-fast) var(--fx-ease),
    transform var(--fx-fast) var(--fx-ease);
}
html.fx .contact-method-btn:hover { transform: translateY(-1px); }
html.fx .contact-method-btn:active { transform: translateY(0); }

/* Ошибка поля — мягкое встряхивание */
html.fx .contact-field-error { animation: fxShake 420ms var(--fx-ease); }
@keyframes fxShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Карточка «заявка отправлена» — мягкое появление */
html.fx #contactSuccessCard { animation: fxPopIn 520ms var(--fx-ease); }
@keyframes fxPopIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* --- 1.7a Honeypot-поле формы (антиспам) -------------------------------------
   Настоящим пользователям не видно и не доступно с клавиатуры; боты, которые
   заполняют все поля формы, обычно заполняют и его — тогда сервер молча
   отклоняет заявку. Работает и без класса .fx.                                */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- 1.7b Блок согласий в форме (SMS + Условия) ------------------------------
   Оформление чекбоксов A2P 10DLC. Цвета — только из палитры сайта.
   Работает и без класса .fx, поэтому селектор без префикса html.fx.           */
.consent-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px 12px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .2s cubic-bezier(.22, .61, .36, 1);
}
.consent-row:hover { background: rgba(251, 233, 210, .4); }
.consent-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}
.consent-box:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}
.consent-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.consent-text b { color: var(--ink); font-weight: 700; }
.consent-text a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-text a:hover { color: var(--accent); }
.consent-req {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}
.consent-error {
  font-size: 12.5px;
  line-height: 1.45;
  color: #C0392B;
  padding: 0 0 2px 40px;
}
/* Невыполненное обязательное согласие — подсветка рамкой */
.consent-group.consent-invalid { border-top-color: #C0392B; }

@media (max-width: 640px) {
  .consent-text { font-size: 13.5px; }
  .consent-row { padding: 13px 8px; }
  .consent-error { padding-left: 8px; }
}

/* --- 1.7c Нижняя строка футера — перенос вместо сжатия -----------------------
   .footer-bottom — это display:flex (инлайновый style) без flex-wrap на двух
   детях: левый кластер (копирайт + ссылки Privacy/Terms) и длинный дисклеймер
   справа. Без wrap на внешнем ряду flexbox сжимает оба блока, чтобы уместить
   их в одну строку на ширине max-width:1440px — и последняя ссылка левого
   кластера («Условия использования») переносится одна, в стороне от общего
   ряда, и теряется из виду. Разрешаем перенос всего правого блока целиком —
   левый кластер (и обе его ссылки) тогда всегда остаётся на своей строке.
   Работает и без класса .fx.                                                  */
.footer-bottom { flex-wrap: wrap; row-gap: 8px; }

/* --- 1.8 Мобильное меню ------------------------------------------------------ */
html.fx .mobile-nav-menu.open { animation: fxSlideDown 300ms var(--fx-ease); }
@keyframes fxSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
html.fx .mobile-nav-link { transition: color var(--fx-fast) var(--fx-ease), padding-left var(--fx-fast) var(--fx-ease); }
html.fx .mobile-nav-link:hover { padding-left: 10px; }

/* --- 1.9 Карточки «блоки доверия» / преимуществ ------------------------------- */
html.fx .credibility-grid > div {
  transition: transform var(--fx-mid) var(--fx-ease);
}
html.fx .credibility-grid > div:hover { transform: translateY(-3px); }

/* --- 1.9b Внутренние страницы: карточки услуг (services.html) ---------------- */
html.fx .service-card {
  transition:
    transform var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease),
    border-color var(--fx-mid) var(--fx-ease);
}
html.fx .service-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent) !important;
  box-shadow: var(--fx-lift);
}
html.fx .service-icon-wrap {
  transition: transform var(--fx-mid) var(--fx-ease), background-color var(--fx-mid) var(--fx-ease);
}
html.fx .service-card:hover .service-icon-wrap {
  transform: scale(1.07) rotate(-4deg);
  background: var(--accent);
}
html.fx .service-list li {
  transition: transform var(--fx-fast) var(--fx-ease), color var(--fx-fast) var(--fx-ease);
}
html.fx .service-list li:hover { transform: translateX(3px); color: var(--ink); }
html.fx .service-price-btn {
  transition:
    transform var(--fx-fast) var(--fx-ease),
    border-color var(--fx-fast) var(--fx-ease),
    background-color var(--fx-fast) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease);
}
html.fx .service-price-btn:hover { transform: translateY(-2px); }

/* --- 1.9c Внутренние страницы: аккордеоны цен (pricing.html) ----------------- */
html.fx .pricing-accordion {
  transition:
    border-color var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease),
    transform var(--fx-mid) var(--fx-ease);
}
html.fx .pricing-accordion:hover { border-color: var(--accent) !important; }
html.fx .pricing-accordion.open { box-shadow: var(--fx-lift); }
html.fx .pricing-accordion-header { transition: background-color var(--fx-fast) var(--fx-ease); }
html.fx .pricing-accordion-header:hover { background: rgba(251, 233, 210, .38); }
html.fx .pricing-accordion-icon {
  transition: transform var(--fx-mid) var(--fx-ease), background-color var(--fx-mid) var(--fx-ease);
}
html.fx .pricing-accordion:hover .pricing-accordion-icon { transform: scale(1.06); }
html.fx .pricing-accordion.open .pricing-accordion-icon { background: var(--accent); }
/* строки прайса появляются каскадом при раскрытии */
html.fx .pricing-accordion.open .pricing-line-item { animation: fxRowIn 420ms var(--fx-ease) both; }
html.fx .pricing-accordion.open .pricing-line-item:nth-child(2)  { animation-delay: 30ms; }
html.fx .pricing-accordion.open .pricing-line-item:nth-child(3)  { animation-delay: 60ms; }
html.fx .pricing-accordion.open .pricing-line-item:nth-child(4)  { animation-delay: 90ms; }
html.fx .pricing-accordion.open .pricing-line-item:nth-child(5)  { animation-delay: 120ms; }
html.fx .pricing-accordion.open .pricing-line-item:nth-child(6)  { animation-delay: 150ms; }
html.fx .pricing-accordion.open .pricing-line-item:nth-child(n+7){ animation-delay: 180ms; }
@keyframes fxRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
html.fx .pricing-line-item { transition: color var(--fx-fast) var(--fx-ease); }
html.fx .pricing-line-item:hover { color: var(--ink); }

/* --- 1.9e Внутренние страницы: блок «Часто задаваемые вопросы» --------------- */
html.fx .faq-item {
  transition: border-color var(--fx-mid) var(--fx-ease), box-shadow var(--fx-mid) var(--fx-ease);
}
html.fx .faq-item:hover { border-color: var(--accent); }
html.fx .faq-item[open] { box-shadow: var(--fx-lift); }
html.fx .faq-item summary { transition: background-color var(--fx-fast) var(--fx-ease); }
html.fx .faq-item summary:hover { background: rgba(251, 233, 210, .38); }
html.fx .faq-num { transition: transform var(--fx-mid) var(--fx-ease), background-color var(--fx-mid) var(--fx-ease), color var(--fx-mid) var(--fx-ease); }
html.fx .faq-item:hover .faq-num { transform: scale(1.06); }
html.fx .faq-chev {
  transition: transform var(--fx-mid) var(--fx-ease), background-color var(--fx-mid) var(--fx-ease),
              border-color var(--fx-mid) var(--fx-ease), color var(--fx-mid) var(--fx-ease);
}
html.fx .faq-item.fx-closing .faq-chev { transform: none; background: transparent; border-color: var(--line); color: var(--ink-soft); }
html.fx .faq-item.fx-closing .faq-num { background: var(--accent-soft); color: var(--accent-dark); }
html.fx .faq-item[open]:not(.fx-closing) .faq-a-inner > * { animation: fxRowIn 420ms var(--fx-ease) 60ms both; }
html.fx .faq-cta svg { transition: transform var(--fx-fast) var(--fx-ease); }
html.fx .faq-cta:hover svg { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
  html.fx .faq-item[open] .faq-a-inner > * { animation: none; }
}

/* --- 1.9d Внутренние страницы: карточки контактов (contacts.html) ------------
   Поднимаются только карточки-ссылки (телефон, email); адрес и часы — обычные блоки.
   transition перечисляет и opacity, чтобы не сбить появление .fx-rv. */
html.fx .contact-info-card {
  transition:
    opacity var(--fx-slow) var(--fx-ease),
    transform var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease),
    border-color var(--fx-mid) var(--fx-ease);
}
html.fx a.contact-info-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent) !important;
  box-shadow: var(--fx-lift);
}
html.fx a.contact-info-card:active { transform: scale(.985); border-color: var(--accent) !important; }
html.fx .contact-info-icon {
  transition: transform var(--fx-mid) var(--fx-ease), background-color var(--fx-mid) var(--fx-ease);
}
html.fx a.contact-info-card:hover .contact-info-icon { transform: scale(1.08) rotate(-5deg); }
html.fx .contact-info-go {
  transition: background-color var(--fx-fast) var(--fx-ease), border-color var(--fx-fast) var(--fx-ease), color var(--fx-fast) var(--fx-ease);
}
html.fx .contact-info-go svg { transition: transform var(--fx-fast) var(--fx-ease); }
html.fx a.contact-info-card:hover .contact-info-go,
html.fx a.contact-info-card:active .contact-info-go { background: var(--accent); border-color: var(--accent); color: var(--ink); }
html.fx a.contact-info-card:hover .contact-info-go svg { transform: translateX(3px); }
html.fx .contact-info-value { transition: color var(--fx-fast) var(--fx-ease); }
html.fx a.contact-info-card:hover .contact-info-value { color: var(--accent-dark); }

/* --- 1.9e Внутренние страницы: политика конфиденциальности ------------------- */
html.fx .policy-toc a {
  transition: transform var(--fx-fast) var(--fx-ease), color var(--fx-fast) var(--fx-ease);
  display: inline-flex;
}
html.fx .policy-toc a:hover { transform: translateX(4px); }
html.fx .policy-toc-num { transition: color var(--fx-fast) var(--fx-ease); }
html.fx .policy-toc a:hover .policy-toc-num { color: var(--accent-dark); }

/* --- 1.10 Шаги «Как проходит работа» ----------------------------------------- */
html.fx .hiw-circle {
  transition: transform var(--fx-mid) var(--fx-ease), box-shadow var(--fx-mid) var(--fx-ease);
}
html.fx .hiw-step:hover .hiw-circle { transform: scale(1.06); }

/* --- 1.11 «Кому мы помогаем» (главная) и «Примеры стоимости» (цены) ----------
   Карточки не кликабельные — без подъёма, только рамка, тень и иконка.
   transition перечисляет и opacity/transform, чтобы не сбить появление .fx-rv. */
html.fx .audience-card,
html.fx .pex-card {
  transition:
    opacity var(--fx-slow) var(--fx-ease),
    transform var(--fx-slow) var(--fx-ease),
    border-color var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease);
}
html.fx .audience-card:hover,
html.fx .pex-card:hover { border-color: var(--accent); box-shadow: var(--fx-lift); }
html.fx .audience-icon { transition: transform var(--fx-mid) var(--fx-ease); }
html.fx .audience-card:hover .audience-icon { transform: scale(1.08); }
html.fx .pex-total-price { transition: transform var(--fx-mid) var(--fx-ease); transform-origin: right center; }
html.fx .pex-card:hover .pex-total-price { transform: scale(1.05); }

/* --- 1.12 «Статьи по теме» на страницах услуг --------------------------------
   Карточки-ссылки: рамка, тень и стрелка «Читать →». Базовые правила .sv-art-*
   лежат в head/service-page.html, здесь только анимации. transition перечисляет
   и opacity/transform, чтобы не сбить появление .fx-rv. */
html.fx .sv-art-card {
  transition:
    opacity var(--fx-slow) var(--fx-ease),
    transform var(--fx-slow) var(--fx-ease),
    border-color var(--fx-mid) var(--fx-ease),
    box-shadow var(--fx-mid) var(--fx-ease);
}
html.fx .sv-art-card:hover { border-color: var(--accent); box-shadow: var(--fx-lift); }
html.fx .sv-art-meta b {
  display: inline-block;
  transition: transform var(--fx-fast) var(--fx-ease), color var(--fx-fast) var(--fx-ease);
}
html.fx .sv-art-card:hover .sv-art-meta b { transform: translateX(3px); color: var(--accent); }

/* --- 1.13 Финальный призыв на страницах услуг (partials/sv-final.njk) --------
   Появляется при прокрутке (группа '.sv-final' в enhance.js); у главной кнопки на тёмном фоне — тень темнее. */
html.fx .sv-final .btn-primary:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }


/* ==========================================================================
   УРОВЕНЬ 2 — ПРЕМИАЛЬНЫЙ  (включает всё из уровня 1)
   Декоративные фоны, бликующие карточки, «прочерчивание» линий, свечения.
   ========================================================================== */

/* --- 2.1 Декоративный фон в hero (только оттенки текущей палитры) -----------
   Макет сайта ограничен 1440px, а фон страницы того же цвета, что и фон
   контейнера. Поэтому градиент рисуем не на самой секции, а на слое во всю
   ширину окна, который растворяется книзу — иначе на широком мониторе видны
   вертикальные швы по краям контейнера и горизонтальный обрыв внизу секции. */
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-grid,
html.fx:is([data-fx="2"], [data-fx="3"]) .page-hero-section {
  position: relative;
  isolation: isolate;
  background-image: none;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-grid::before,
html.fx:is([data-fx="2"], [data-fx="3"]) .page-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
}
/* Главная: тёплый свет справа сверху, где стоит фотография */
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-grid::before {
  background-image:
    radial-gradient(900px 560px at 76% 8%, rgba(228, 155, 60, .18), transparent 70%),
    radial-gradient(700px 420px at 4% 96%, rgba(0, 62, 84, .055), transparent 74%);
}
/* Внутренние страницы: заголовок по центру — свет тоже по центру */
html.fx:is([data-fx="2"], [data-fx="3"]) .page-hero-section::before {
  background-image:
    radial-gradient(1100px 520px at 50% -14%, rgba(228, 155, 60, .17), transparent 70%),
    radial-gradient(700px 400px at 8% 108%, rgba(0, 62, 84, .055), transparent 74%);
}

/* Тонкая линия-«росчерк» над контентом hero */
html.fx:is([data-fx="2"], [data-fx="3"]) .contact-section {
  position: relative;
  background-image:
    radial-gradient(680px 420px at 12% 0%, rgba(228, 155, 60, .14), transparent 70%) !important;
  background-repeat: no-repeat !important;
}

html.fx:is([data-fx="2"], [data-fx="3"]) .credibility-section {
  background-image:
    radial-gradient(560px 360px at 92% 100%, rgba(228, 155, 60, .12), transparent 72%) !important;
  background-repeat: no-repeat !important;
}

/* Тонкий штрих под h1 внутренних страниц — как под h2 на главной */
html.fx:is([data-fx="2"], [data-fx="3"]) .page-hero-h1 {
  position: relative;
  padding-bottom: 14px;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .page-hero-h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 68px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 800ms var(--fx-ease) 260ms;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .page-hero-h1.fx-in::after {
  transform: translateX(-50%) scaleX(1);
}

/* --- 2.2 Липкая шапка с тенью при прокрутке --------------------------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .nav-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg);
  transition: box-shadow var(--fx-mid) var(--fx-ease), background-color var(--fx-mid) var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .nav-bar.fx-stuck {
  box-shadow: 0 1px 0 var(--line), 0 10px 28px rgba(0, 62, 84, .08);
  /* почти непрозрачный фон: при .88 тёмные блоки под шапкой снижали контраст пунктов меню до ~3.9:1 */
  background: rgba(249, 244, 239, .97);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* На планшете и телефоне шапка не липкая: иначе открытое бургер-меню
   оказывается выше видимой области. */
@media (max-width: 900px) {
  html.fx:is([data-fx="2"], [data-fx="3"]) .nav-bar {
    position: static;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }
}

/* --- 2.3 Фото основателя: градиентная рамка и мягкое свечение --------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-photo-card {
  position: relative;
  box-shadow:
    0 2px 6px rgba(0, 62, 84, .06),
    0 26px 60px rgba(0, 62, 84, .16);
  transition: transform var(--fx-slow) var(--fx-ease), box-shadow var(--fx-slow) var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg, var(--accent) 0%, rgba(228, 155, 60, 0) 42%, rgba(0, 62, 84, .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-card-col:hover .hero-photo-card {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0, 62, 84, .06), 0 34px 70px rgba(0, 62, 84, .2);
}
/* бейдж под фото приезжает с задержкой */
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-photo-badge.fx-rv { transform: translateY(26px); }
html.fx:is([data-fx="2"], [data-fx="3"]) .hero-photo-badge.fx-rv.fx-in { transform: none; }

/* --- 2.4 Заголовки h2: штрих-подчёркивание, которое прочерчивается ---------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .section-h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .section-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms var(--fx-ease) 120ms;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .section-h2.fx-in::after { transform: scaleX(1); }
/* заголовок «Как проходит работа» выровнен по центру — штрих тоже */
html.fx:is([data-fx="2"], [data-fx="3"]) .how-it-works-section .section-h2::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .how-it-works-section .section-h2.fx-in::after {
  transform: translateX(-50%) scaleX(1);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .contact-section .section-h2::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .contact-section .section-h2.fx-in::after {
  transform: translateX(-50%) scaleX(1);
}

/* --- 2.5 Плашки-эйблы (pill): мягкое «дыхание» точки ------------------------ */
html.fx:is([data-fx="2"], [data-fx="3"]) .pill.sans {
  transition: transform var(--fx-mid) var(--fx-ease), box-shadow var(--fx-mid) var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .pill.sans:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(152, 95, 0, .14);
}

/* --- 2.6 Панель доверия: иконки в кружках ---------------------------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .trust-grid > div > svg {
  box-sizing: content-box;
  padding: 10px;
  border-radius: 50%;
  background: var(--accent-soft);
  transition:
    background-color var(--fx-mid) var(--fx-ease),
    transform var(--fx-mid) var(--fx-ease),
    stroke var(--fx-mid) var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .trust-grid > div:hover > svg {
  background: var(--accent);
  stroke: var(--ink);
  transform: translateY(-2px) rotate(-4deg);
}

/* --- 2.7 Карточки услуг: блик следует за курсором --------------------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .services-grid > a::before,
html.fx:is([data-fx="2"], [data-fx="3"]) .ar-cards > .ar-card::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  left: var(--fx-mx, 50%);
  top: var(--fx-my, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 155, 60, .22), rgba(228, 155, 60, 0) 66%);
  opacity: 0;
  transition: opacity var(--fx-mid) var(--fx-ease);
  pointer-events: none;
  z-index: 0;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .services-grid > a:hover::before,
html.fx:is([data-fx="2"], [data-fx="3"]) .ar-cards > .ar-card:hover::before { opacity: 1; }
html.fx:is([data-fx="2"], [data-fx="3"]) .services-grid > a > *,
html.fx:is([data-fx="2"], [data-fx="3"]) .ar-cards > .ar-card > * { position: relative; z-index: 1; }

/* --- 2.8 Кнопка primary: пробегающий блик ---------------------------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .btn-primary:hover::after {
  animation: fxShine 800ms var(--fx-ease);
}
@keyframes fxShine {
  from { left: -140%; }
  to   { left: 160%; }
}

/* --- 2.9 Сертификаты: 3D-наклон и золотое свечение -------------------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) #qualTrack { perspective: 1000px; }
html.fx:is([data-fx="2"], [data-fx="3"]) .badge-card {
  transform-style: preserve-3d;
}
html.fx:is([data-fx="2"], [data-fx="3"]) .badge-card:hover {
  box-shadow: var(--fx-glow);
}

/* --- 2.10 «Как проходит работа»: линия заполняется по мере скролла ---------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .hiw-connector::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  transition: height 620ms var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .hiw-step.fx-active .hiw-connector::after { height: 100%; }
html.fx:is([data-fx="2"], [data-fx="3"]) .hiw-step.fx-active .hiw-circle {
  box-shadow: 0 0 0 6px rgba(228, 155, 60, .2);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .hiw-step .hiw-content > div:first-child > svg {
  transition: transform var(--fx-mid) var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .hiw-step:hover .hiw-content > div:first-child > svg {
  transform: scale(1.12) rotate(-5deg);
}

/* --- 2.11 Карточка формы: мягкое свечение при фокусе внутри ----------------- */
html.fx:is([data-fx="2"], [data-fx="3"]) .contact-card {
  transition: box-shadow var(--fx-slow) var(--fx-ease);
}
html.fx:is([data-fx="2"], [data-fx="3"]) .contact-card:focus-within {
  box-shadow: 0 2px 6px rgba(0, 62, 84, .06), 0 28px 64px rgba(0, 62, 84, .14);
}

/* --- 2.12 Кнопка «наверх» (создаётся скриптом) ------------------------------ */
/* --fx-totop-lift — высота нижней плашки калькулятора (.calc-mbar), если она видна:
   кнопка поднимается над ней и не закрывает сумму (ставит enhance.js). */
html.fx .fx-totop {
  position: fixed;
  right: 26px;
  bottom: calc(26px + var(--fx-totop-lift, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 95;
  box-shadow: 0 6px 20px rgba(0, 62, 84, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--fx-mid) var(--fx-ease),
    transform var(--fx-mid) var(--fx-ease),
    visibility var(--fx-mid),
    border-color var(--fx-fast) var(--fx-ease),
    color var(--fx-fast) var(--fx-ease);
}
html.fx .fx-totop.fx-show { opacity: 1; visibility: visible; transform: none; }
html.fx .fx-totop:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
@media (max-width: 640px) {
  html.fx .fx-totop { right: 16px; bottom: calc(16px + var(--fx-totop-lift, 0px)); width: 44px; height: 44px; }
}


/* ==========================================================================
   УРОВЕНЬ 3 — МАКСИМУМ  (включает всё из уровней 1 и 2)
   Пословное появление заголовка, параллакс, прогресс чтения, магнитные кнопки.
   ========================================================================== */

/* --- 3.1 Полоса прогресса чтения ------------------------------------------- */
html.fx[data-fx="3"] .fx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  z-index: 100;
  pointer-events: none;
}

/* --- 3.2 Заголовок hero появляется по словам -------------------------------- */
html.fx[data-fx="3"] .fx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 620ms var(--fx-ease),
    transform 620ms var(--fx-ease);
}
html.fx[data-fx="3"] .fx-word.fx-in { opacity: 1; transform: none; }

/* --- 3.3 Параллакс ---------------------------------------------------------- */
html.fx[data-fx="3"] .hero-card-col > div { will-change: transform; }

/* --- 3.4 Секции приходят с лёгким масштабом --------------------------------- */
html.fx[data-fx="3"] .fx-rv { transform: translateY(24px) scale(.985); }
html.fx[data-fx="3"] .fx-rv.fx-in { transform: none; }
html.fx[data-fx="3"] .fx-rv-right { transform: translate(30px, 14px) scale(.985); }

/* --- 3.5 Магнитные кнопки --------------------------------------------------- */
html.fx[data-fx="3"] .fx-magnet { will-change: transform; }

/* --- 3.6 Бейдж под фото слегка покачивается --------------------------------- */
html.fx[data-fx="3"] .hero-photo-badge.fx-in {
  animation: fxFloat 6s ease-in-out 900ms infinite;
}
@keyframes fxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* --- 3.7 Подсказка «листайте» пульсирует ------------------------------------ */
html.fx[data-fx="3"] .qual-progress-row { position: relative; }
html.fx[data-fx="3"] #qualThumb { box-shadow: 0 0 10px rgba(228, 155, 60, .6); }


/* ==========================================================================
   ДОСТУПНОСТЬ: полное уважение к системной настройке «меньше движения»
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.fx,
  html.fx * ,
  html.fx *::before,
  html.fx *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.fx .fx-rv,
  html.fx .fx-word {
    opacity: 1 !important;
    transform: none !important;
  }
  html.fx .section-h2::after { transform: scaleX(1) !important; }
  html.fx .how-it-works-section .section-h2::after,
  html.fx .contact-section .section-h2::after,
  html.fx .page-hero-h1::after { transform: translateX(-50%) scaleX(1) !important; }
  html.fx .hiw-connector::after { height: 100% !important; }
  html.fx .pricing-accordion.open .pricing-line-item { animation: none !important; opacity: 1 !important; }
}

/* Печать: никакой декоративной графики */
@media print {
  html.fx .fx-rv, html.fx .fx-word { opacity: 1 !important; transform: none !important; }
  html.fx .fx-totop, html.fx .fx-progress { display: none !important; }
  html.fx .hero-grid, html.fx .contact-section,
  html.fx .credibility-section, html.fx .page-hero-section { background-image: none !important; }
  html.fx .hero-grid::before, html.fx .page-hero-section::before { display: none !important; }
}