/* Слой «дорогого» движения. Один файл на все сайты, цвета берутся из --m-accent / --m-accent2. */
:root{--m-accent:#E8C583;--m-accent2:#FFC014;--m-glow:rgba(232,197,131,.35)}

/* Пока JS не подтвердил, что анимации включены, ничего не прячем */
html.m-on [data-m="up"]{opacity:0;transform:translateY(28px)}
html.m-on .m-split.m-split .m-w{display:inline-block;opacity:0;transform:translateY(.6em);filter:blur(8px)}
html.m-on .m-split.m-rise .m-w{opacity:1;filter:none;transform:translateY(115%)}
.m-split .m-w{white-space:pre}
.m-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.m-scr .m-w{font-variant-numeric:tabular-nums}

/* Подчёркивание под заголовками рисуется при появлении */
html.m-on [data-m-line]::after{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s}
html.m-on [data-m-line].m-in::after{transform:scaleX(1)}

/* Кнопка: мягкое свечение и блик */
.m-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s ease,box-shadow .35s ease}
.m-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:m-shine 4.5s ease-in-out infinite}
.m-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -6px var(--m-glow),0 0 0 1px rgba(255,255,255,.15) inset}
@keyframes m-shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* Живой фон первого экрана: два медленных световых пятна */
.m-aurora{position:relative;overflow:hidden;isolation:isolate}
.m-aurora>.m-glow{position:absolute;z-index:-1;pointer-events:none;width:60vmax;height:60vmax;border-radius:50%;
  filter:blur(90px);opacity:.35;mix-blend-mode:screen}
.m-aurora>.m-glow.a{background:radial-gradient(circle,var(--m-accent) 0,transparent 60%);top:-30vmax;right:-15vmax;animation:m-float 18s ease-in-out infinite alternate}
.m-aurora>.m-glow.b{background:radial-gradient(circle,var(--m-accent2) 0,transparent 60%);bottom:-35vmax;left:-20vmax;opacity:.18;animation:m-float 22s ease-in-out infinite alternate-reverse}
@keyframes m-float{to{transform:translate(-8vmax,6vmax) scale(1.15)}}
/* тонкое «зерно», как на дорогих сайтах */
.m-aurora::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Карточки: свет идёт за курсором */
.m-spot{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.m-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--m-glow),transparent 45%)}
.m-spot:hover::before{opacity:1}
.m-spot:hover{transform:translateY(-4px);border-color:var(--m-accent)}

/* Бегущая строка */
.m-marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--m-line,rgba(232,197,131,.25));padding:14px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.m-marquee>div{display:inline-flex;gap:48px;padding-right:48px;animation:m-run 38s linear infinite}
.m-marquee span{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.m-marquee span::before{content:"✦";margin-right:48px;color:var(--m-accent)}
@keyframes m-run{to{transform:translateX(-50%)}}

/* Полоса прогресса чтения сверху */
.m-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:99;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--m-accent),var(--m-accent2))}

/* Технологичный фон: сеть точек и сетка */
.m-net{position:relative;isolation:isolate}
.m-net-c{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
.m-gridbg{position:relative;isolation:isolate;overflow:hidden}
.m-gridbg::before{content:"";position:absolute;inset:-50% -10% 0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;transform:perspective(700px) rotateX(55deg);transform-origin:50% 100%;
  -webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%);animation:m-gridrun 6s linear infinite}
@keyframes m-gridrun{to{background-position:0 56px}}
.m-gridbg::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--m-accent),transparent);box-shadow:0 0 18px var(--m-accent);opacity:.7;animation:m-scan 5s ease-in-out infinite}
@keyframes m-scan{0%{transform:translateY(0)}100%{transform:translateY(900px)}}

/* Деньги: график и всплывающие ₽ */
.m-chart,.m-rubles{position:relative;isolation:isolate;overflow:hidden}
.m-chart-s{position:absolute;left:0;right:0;bottom:0;height:70%;width:100%;z-index:-1;pointer-events:none;opacity:.55}
.m-rub-box{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.m-rub-box i{position:absolute;font-style:normal;font-weight:800;color:var(--m-accent2);text-shadow:0 0 18px var(--m-glow)}

/* Печать «под защитой» ставится с ударом */
html.m-on .m-stamp{animation:m-stamp .9s cubic-bezier(.2,1.6,.4,1) 1.6s both}
@keyframes m-stamp{0%{opacity:0;transform:scale(2.6) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-6deg)}}

/* Сейф: кодовый диск медленно крутится и щёлкает */
.m-vault-host{position:relative;isolation:isolate;overflow:hidden}
.m-vault{color:var(--m-accent);position:absolute;z-index:-1;pointer-events:none;width:min(520px,70vw);aspect-ratio:1;right:-120px;top:50%;margin-top:calc(min(520px,70vw)/-2);opacity:.16}
.m-vault svg{width:100%;height:100%;display:block}

/* Буквы заголовка (динамичное появление) */
.m-split .m-c{display:inline-block;will-change:transform}

/* Шаги загораются по очереди */
.m-steps{position:relative}
.m-steps-line{position:absolute;left:0;right:0;top:-14px;height:2px;transform-origin:left;pointer-events:none;
  background:linear-gradient(90deg,var(--m-accent),var(--m-accent2));box-shadow:0 0 14px var(--m-accent)}
.m-steps>.m-lit{box-shadow:0 0 0 1px var(--m-accent),0 18px 40px -18px var(--m-glow);transition:box-shadow .5s}

/* Схема интеграций */
.m-hub-s{width:100%;height:auto;display:block;overflow:visible}
.m-hub-s .ln{stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:4 5}
.m-hub-s .core{fill:var(--m-accent)}
.m-hub-s .ring{fill:none;stroke:var(--m-accent);stroke-width:2}
.m-hub-s .ct{font:700 17px Unbounded,Arial,sans-serif;fill:#0D1B2E;text-anchor:middle}
.m-hub-s .cs{font:600 11px Onest,Arial,sans-serif;fill:#0D1B2E;text-anchor:middle}
.m-hub-s .nd rect{fill:#16273F;stroke:rgba(200,241,53,.45);stroke-width:1}
.m-hub-s .nd text{font:600 13px Onest,Arial,sans-serif;fill:#fff;text-anchor:middle}
.m-hub-s .dt{fill:var(--m-accent);filter:drop-shadow(0 0 6px var(--m-accent))}
.m-hub-s .dt.out{fill:#7FA2FF;filter:drop-shadow(0 0 6px #7FA2FF)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .m-btn::before,.m-aurora>.m-glow,.m-marquee>div,.m-gridbg::before,.m-gridbg::after{animation:none!important}
}