/*
 * vnedrenie_fin_upr_uch-enhance.css
 * Decorative overlay for /vnedrenie_fin_upr_uch/
 * Базовая разметка не трогается — только overlay через id^="rec1687917"
 * Палитра: #5570eb (primary), #817af9 (violet), #c883e5 (pink-violet).
 */

:root {
  --vne-blue: #5570eb;
  --vne-violet: #817af9;
  --vne-pink: #c883e5;
  --vne-ink: #171717;
  --vne-bg-soft: #f7faff;
}

html { scroll-behavior: smooth; }

/* ───────────────────────────── 0. Scroll progress bar ───────────────────────────── */
.vne-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 999999;
  background: linear-gradient(90deg, var(--vne-blue), var(--vne-violet), var(--vne-pink));
  box-shadow: 0 0 12px rgba(85, 112, 235, 0.6);
  pointer-events: none;
  transition: width 80ms linear;
}

/* ───────────────────────────── 1. Декоративные орбы ───────────────────────────── */
/* Плавающие "blobs" — мягкий gradient flair поверх секций с #f7faff */
.vne-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: vne-float 14s ease-in-out infinite;
  will-change: transform;
}
.vne-orb--blue   { background: radial-gradient(circle at 30% 30%, rgba(85,112,235,0.65), rgba(85,112,235,0) 70%); }
.vne-orb--violet { background: radial-gradient(circle at 50% 50%, rgba(129,122,249,0.55), rgba(129,122,249,0) 70%); }
.vne-orb--pink   { background: radial-gradient(circle at 60% 40%, rgba(200,131,229,0.45), rgba(200,131,229,0) 70%); }

@keyframes vne-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(28px, -36px, 0) scale(1.08); }
  66%      { transform: translate3d(-32px, 24px, 0) scale(0.95); }
}

/* Чтобы рекорды стали "контейнером" для абсолютно позиционированных орбов */
.vne-host {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* Контент секций — поверх орбов */
.vne-host > * { position: relative; z-index: 2; }

/* ───────────────────────────── 2. Reveal-анимации ───────────────────────────── */
/* Все t396-элементы и t706-blocks начинают invisible, всплывают при попадании в viewport */
.vne-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  filter: blur(6px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1),
              filter 600ms ease;
  will-change: opacity, transform, filter;
}
.vne-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
/* Stagger — соседи всплывают с задержкой */
.vne-stagger > .vne-reveal:nth-child(1) { transition-delay: 0ms; }
.vne-stagger > .vne-reveal:nth-child(2) { transition-delay: 80ms; }
.vne-stagger > .vne-reveal:nth-child(3) { transition-delay: 160ms; }
.vne-stagger > .vne-reveal:nth-child(4) { transition-delay: 240ms; }
.vne-stagger > .vne-reveal:nth-child(5) { transition-delay: 320ms; }
.vne-stagger > .vne-reveal:nth-child(6) { transition-delay: 400ms; }
.vne-stagger > .vne-reveal:nth-child(7) { transition-delay: 480ms; }
.vne-stagger > .vne-reveal:nth-child(8) { transition-delay: 560ms; }

/* Респект к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .vne-reveal, .vne-orb, .vne-progress, .vne-sticky-cta, .vne-pulse, .vne-h2-underline::after {
    animation: none !important;
    transition: none !important;
  }
  .vne-reveal { opacity: 1; transform: none; filter: none; }
}

/* ───────────────────────────── 3. Hero (rec1687916951 — TE706) ───────────────────────────── */
#rec1687916951 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(85,112,235,0.18) 0%, rgba(85,112,235,0) 55%),
    radial-gradient(ellipse at 85% 80%, rgba(200,131,229,0.18) 0%, rgba(200,131,229,0) 55%),
    radial-gradient(ellipse at 50% 50%, rgba(129,122,249,0.10) 0%, rgba(129,122,249,0) 60%);
}
#rec1687916951::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(85,112,235,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(85,112,235,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
#rec1687916951 > * { position: relative; z-index: 2; }

/* Заголовок hero — gradient text */
#rec1687916951 h1 {
  background: linear-gradient(120deg, var(--vne-blue) 0%, var(--vne-violet) 40%, var(--vne-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  animation: vne-gradient-shift 8s ease-in-out infinite;
}
@keyframes vne-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Подзаголовок hero — мягкий glow */
#rec1687916951 h2 {
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* ───────────────────────────── 4. Price highlight ───────────────────────────── */
/* "Стоимость внедрения под ключ - 30 000 рублей, срок 1 неделя" */
.vne-price-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(85,112,235,0.12), rgba(200,131,229,0.12));
  border: 1px solid rgba(85,112,235,0.25);
  color: var(--vne-blue);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Большая цена в блоке "Стоимость услуги: 30 000 руб." — gradient + слабая пульсация glow */
#rec1687917091 [field*="tn_text"]:not(:first-child),
#rec1687917091 h2 + h2,
#rec1687917091 .tn-atom {
  /* deferred until JS targets конкретный элемент */
}

.vne-price-glow {
  background: linear-gradient(120deg, var(--vne-blue), var(--vne-violet) 60%, var(--vne-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 30px rgba(129,122,249,0.25);
  animation: vne-price-pulse 2.6s ease-in-out infinite;
}
@keyframes vne-price-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(129,122,249,0)); }
  50%      { filter: drop-shadow(0 0 18px rgba(129,122,249,0.5)); }
}

/* ───────────────────────────── 5. H2 — animated underline ───────────────────────────── */
.vne-h2-underline {
  position: relative;
  display: inline-block;
}
.vne-h2-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vne-blue), var(--vne-violet), var(--vne-pink));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1) 200ms;
}
.vne-h2-underline.is-in::after { transform: scaleX(1); }

/* ───────────────────────────── 6. Карточки t396 — lift on hover ───────────────────────────── */
/* Мягкий lift для всех элементов с фоновой плашкой (data-elem-type=605 или 604) */
[id^="rec168791"] .t396__elem[data-elem-type="605"],
[id^="rec168791"] .t396__elem[data-elem-type="652"],
[id^="rec168791"] .t396__elem[data-elem-type="654"] {
  transition: transform 380ms cubic-bezier(.22,.61,.36,1),
              box-shadow 380ms cubic-bezier(.22,.61,.36,1),
              filter 380ms ease;
}
[id^="rec168791"] .t396__elem[data-elem-type="605"]:hover,
[id^="rec168791"] .t396__elem[data-elem-type="652"]:hover,
[id^="rec168791"] .t396__elem[data-elem-type="654"]:hover {
  transform: translate3d(0, -6px, 0);
  filter: drop-shadow(0 18px 32px rgba(85,112,235,0.22));
}

/* Картинки в карточках — лёгкий scale + tilt при hover */
[id^="rec168791"] .t396__elem[data-elem-type="354"],
[id^="rec168791"] .t396__elem[data-elem-type="355"] {
  transition: transform 500ms cubic-bezier(.22,.61,.36,1), filter 500ms ease;
}
[id^="rec168791"] .t396__elem[data-elem-type="354"]:hover,
[id^="rec168791"] .t396__elem[data-elem-type="355"]:hover {
  transform: translate3d(0, -4px, 0) scale(1.015);
  filter: drop-shadow(0 16px 28px rgba(129,122,249,0.25));
}

/* ───────────────────────────── 7. Кнопки t396 + .t-btn — glow + pulse ───────────────────────────── */
[id^="rec168791"] .t396__elem[data-elem-type="button"],
[id^="rec168791"] a.t-btn,
[id^="rec168791"] a.t-submit,
#rec1687917391 .t-submit,
.t-btnflex {
  position: relative;
  transition: transform 220ms ease, box-shadow 280ms ease, filter 280ms ease !important;
}
[id^="rec168791"] .t396__elem[data-elem-type="button"]:hover,
[id^="rec168791"] a.t-btn:hover,
[id^="rec168791"] a.t-submit:hover,
#rec1687917391 .t-submit:hover {
  transform: translate3d(0, -2px, 0) scale(1.02);
  box-shadow: 0 12px 28px rgba(85,112,235,0.35), 0 0 0 4px rgba(129,122,249,0.12);
  filter: brightness(1.05);
}

/* CTA-кнопка в форме заявки — pulse halo */
#rec1687917391 .t-submit,
#rec1687917391 button[type="submit"] {
  animation: vne-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes vne-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85,112,235,0.55); }
  60%      { box-shadow: 0 0 0 18px rgba(85,112,235,0); }
}

/* ───────────────────────────── 8. Sticky bottom CTA ───────────────────────────── */
.vne-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate3d(-50%, 120%, 0);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 24px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--vne-blue) 0%, var(--vne-violet) 55%, var(--vne-pink) 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 40px rgba(85,112,235,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 480ms cubic-bezier(.22,.61,.36,1), box-shadow 280ms ease;
  font-family: 'Open Sans', system-ui, sans-serif;
  will-change: transform;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}
.vne-sticky-cta.is-visible { transform: translate3d(-50%, 0, 0); }
.vne-sticky-cta:hover {
  box-shadow: 0 22px 48px rgba(85,112,235,0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transform: translate3d(-50%, -3px, 0);
}
.vne-sticky-cta__price {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  font-weight: 700;
  font-size: 14px;
  backdrop-filter: blur(6px);
}
.vne-sticky-cta__arrow {
  display: inline-block;
  width: 18px; height: 18px;
  position: relative;
  transition: transform 220ms ease;
}
.vne-sticky-cta:hover .vne-sticky-cta__arrow { transform: translateX(4px); }
.vne-sticky-cta__arrow::before {
  content: '';
  position: absolute;
  top: 50%; right: 2px;
  width: 10px; height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 480px) {
  .vne-sticky-cta {
    font-size: 13px;
    padding: 11px 16px 11px 18px;
    gap: 10px;
  }
  .vne-sticky-cta__price { font-size: 12px; padding: 3px 8px; }
}

/* ───────────────────────────── 9. Кейс СтройПрогресс — highlight ───────────────────────────── */
/* rec1687917161 / rec1687917191 — секции с примером компании */
#rec1687917161, #rec1687917191 {
  position: relative;
}
#rec1687917161::before,
#rec1687917191::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(ellipse at 8% 12%, rgba(200,131,229,0.16) 0%, rgba(200,131,229,0) 60%),
    radial-gradient(ellipse at 92% 88%, rgba(85,112,235,0.12) 0%, rgba(85,112,235,0) 60%);
  z-index: 0;
}
#rec1687917161 > *, #rec1687917191 > * { position: relative; z-index: 1; }

/* ───────────────────────────── 10. Параллакс hero image ───────────────────────────── */
#rec1687916951 .t706__bgimg,
#rec1687916951 img[loading] {
  will-change: transform;
  transition: transform 80ms linear;
}

/* ───────────────────────────── 11. Footer (rec467319182) — мягкий тёмный градиент ───────────────────────────── */
#rec467319182 {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(85,112,235,0.18) 0%, rgba(85,112,235,0) 50%),
    radial-gradient(ellipse at 80% 100%, rgba(200,131,229,0.12) 0%, rgba(200,131,229,0) 50%),
    #171717 !important;
}

/* ───────────────────────────── 12. Лёгкая магнитная анимация для menu ───────────────────────────── */
#rec1687916861 .t-menu__list-item:hover {
  transition: transform 220ms ease, color 220ms ease;
  transform: translateY(-1px);
}

/* ───────────────────────────── 13. Smooth fade on form ───────────────────────────── */
#rec1687917391 .t-form__inputsbox input,
#rec1687917391 .t-form__inputsbox textarea {
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
}
#rec1687917391 .t-form__inputsbox input:focus,
#rec1687917391 .t-form__inputsbox textarea:focus {
  box-shadow: 0 0 0 4px rgba(85,112,235,0.12) !important;
  border-color: var(--vne-blue) !important;
}

/* ───────────────────────────── 14. Hide horizontal scrollbar from orbs overflow ───────────────────────────── */
body { overflow-x: hidden; }