/* =====================================================================
   Современный слой поверх его темы. Раскладка, цвета и блоки — как на сайте;
   здесь только исполнение: отрисовка, наведения, появление, переходы.
   ===================================================================== */
:root{--mx-brand:#8B1022;--mx-brand-2:#A8243A;--mx-ink:#2A0509;--mx-paper:#F1EBEB;--mx-stamp:#E9D85A;--mx-ease:cubic-bezier(.77,0,.18,1);--mx-soft:cubic-bezier(.22,1,.36,1)}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
::selection{background:var(--mx-brand);color:#fff}
:focus-visible{outline:2px solid var(--mx-brand);outline-offset:3px}

/* ---------- шапка: мягче тень, после прокрутки — плотнее и компактнее ---------- */
.page-header{transition:box-shadow .5s var(--mx-soft),background-color .5s,transform .6s var(--mx-ease),padding .5s var(--mx-soft)}
.page-header.mx-scrolled{background-color:rgba(232,234,229,.97);box-shadow:0 14px 40px -18px rgba(26,26,26,.28)}
@media (min-width:981px){.page-header.mx-hide{transform:translateY(-100%)}}
.page-header__nav a,.footer a{transition:color .3s}
.page-header__nav > div > ul > li > a,#menu-service_top > li > a{position:relative}
.page-header__nav > div > ul > li > a::after,#menu-service_top > li > a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--mx-brand);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--mx-ease)}
.page-header__nav > div > ul > li > a:hover::after,#menu-service_top > li > a:hover::after{transform:scaleX(1);transform-origin:left}
.sub-menu-wrap .sub-menu{border-radius:16px!important;box-shadow:0 30px 60px -24px rgba(26,26,26,.35)!important}
.sub-menu a{transition:color .25s,padding-left .35s var(--mx-soft)}
.sub-menu a:hover{color:var(--mx-brand)!important;padding-left:6px}

/* ---------- кнопки: блик, подъём, живая тень ---------- */
.button,.banner__button_lt,.white_btn,.header__button,input.wpcf7-submit{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s var(--mx-soft),box-shadow .45s var(--mx-soft),background-color .3s,color .3s!important}
.button::after,.banner__button_lt::after,.white_btn::after{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(-130%);transition:transform .9s var(--mx-ease)}
.button:hover,.header__button:hover,input.wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(139,16,34,.55)!important}
.button:hover::after,.banner__button_lt:hover::after,.white_btn:hover::after{transform:translateX(130%)}
.button:active{transform:translateY(0) scale(.98)}
.banner__button_lt:hover,.white_btn:hover{transform:translateY(-3px)}

/* ---------- карточки: подъём и мягкая тень вместо «вдавливания» ---------- */
.panel,.figimage,.news__item,.articles__item,.fig-block,.slide-gratitude,.widget,.first_screen_left,.first_screen_right,.figbox{transition:transform .6s var(--mx-soft),box-shadow .6s var(--mx-soft),background-color .4s}
.panel:hover{transform:translateY(-6px);background:#fff!important;box-shadow:0 26px 50px -26px rgba(26,26,26,.32)!important}
.panel img,.panel svg{transition:transform .7s var(--mx-soft),fill .4s}
.panel:hover img,.panel:hover svg{transform:scale(1.08) rotate(-4deg)}
.fig-block img,.fig-block svg{transition:transform .7s var(--mx-soft)}
.fig-block:hover img,.fig-block:hover svg{transform:translateY(-6px) scale(1.06)}
.news__item:hover,.articles__item:hover,.figimage:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(26,26,26,.3)}
.himg,.figimage__img{overflow:hidden}
.himg img,.figimage__img img,.figimage img{transition:transform 1.1s var(--mx-soft)}
.news__item:hover img,.articles__item:hover img,.figimage:hover img{transform:scale(1.06)}
.widget{transition:transform .5s var(--mx-soft),box-shadow .5s}
.widget:hover{transform:translateX(-4px) scale(1.04);box-shadow:0 18px 36px -16px rgba(26,26,26,.35)}

/* ---------- первый экран: живой фон и плавающая картинка ---------- */
.first_screen_left,.first_screen_right{position:relative;overflow:hidden}
.first_screen_left::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(139,16,34,.16),transparent 65%);animation:mx-glow 9s ease-in-out infinite alternate}
@keyframes mx-glow{to{transform:translate(-60px,60px) scale(1.15)}}
.first_screen_right::after{content:"";position:absolute;inset:-40%;pointer-events:none;background:conic-gradient(from 0deg,transparent,rgba(139,16,34,.10),transparent 30%);animation:mx-spin 14s linear infinite}
@keyframes mx-spin{to{transform:rotate(1turn)}}
.first_screen_right > *{position:relative;z-index:1}

/* ---------- формы: поля с фокусом и анимированной галочкой ---------- */
.wpcf7-form input[type=text],.wpcf7-form input[type=tel],.wpcf7-form input[type=email],.wpcf7-form textarea,.page-header__search-field{transition:border-color .3s,box-shadow .3s,background-color .3s}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{border-color:var(--mx-brand)!important;box-shadow:0 0 0 4px rgba(139,16,34,.16)!important;outline:none}
.form-banner{transition:background-position 1.2s var(--mx-soft)}
.mx-sent .wpcf7-response-output{display:block!important;border:0!important;margin:14px 0 0!important;padding:14px 18px!important;border-radius:12px;background:rgba(139,16,34,.10);color:#2A0509;font-weight:500;animation:mx-pop .6s var(--mx-soft)}
@keyframes mx-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* ---------- заголовки секций: отчёркивание проявляется ---------- */
.section__head h2,.section__title{position:relative}
.mx-ready .section__head h2::after{content:"";display:block;width:64px;height:4px;border-radius:2px;margin-top:14px;background:linear-gradient(90deg,var(--mx-brand),var(--mx-brand-2));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--mx-ease) .2s}
.mx-ready .section__head.mx-in h2::after{transform:scaleX(1)}

/* ---------- картинки проявляются по загрузке ---------- */
.mx-ready main img{transition:opacity .8s var(--mx-soft)}
.mx-ready main img.mx-wait{opacity:0}

/* ---------- полоса прогресса чтения ---------- */
.mx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1000;pointer-events:none;background:linear-gradient(90deg,var(--mx-brand),var(--mx-brand-2));transform-origin:left;transform:scaleX(0)}

/* ---------- шторка перехода между страницами ---------- */
.mx-curtain{position:fixed;inset:0;z-index:2000;pointer-events:none;visibility:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#8B1022 0%,#4A0812 100%);clip-path:inset(100% 0 0 0)}
.mx-curtain__t{font-family:"Roboto Condensed",Roboto,Arial,sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,64px);color:#F1EBEB;text-align:center;max-width:18ch;line-height:1.05;letter-spacing:-.01em;padding:0 20px}
.mx-curtain::after{content:"";position:absolute;left:8%;right:8%;bottom:10vh;height:2px;background:rgba(232,234,229,.3)}
html.arrive .mx-curtain{visibility:visible;clip-path:inset(0 0 0 0)}

.mx-demo-note{text-align:center;font-size:12px;opacity:.6;margin:12px 0 0}
.mx-logo{display:block;max-width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mx-curtain{display:none}
}

/* наши цвета: на ультрамарине текст светлый */
.button,.header__button,input.wpcf7-submit,.wpcf7-submit{color:#fff!important}
.button:hover,.header__button:hover{color:#fff!important}
.banner__button_lt:hover,.white_btn:hover{color:var(--mx-brand)!important}

/* ---------- логотип: галочка прорисовывается при загрузке и наведении ---------- */
.mx-logo{display:block;width:200px;max-width:100%;height:auto;overflow:visible}
.mx-logo__c{stroke-dasharray:14;stroke-dashoffset:14;animation:mx-check .9s var(--mx-soft) .5s forwards}
.mx-logo__b{transform-box:fill-box;transform-origin:center;animation:mx-brk .8s var(--mx-soft) .2s both}
.mx-logo circle{transform-box:fill-box;transform-origin:center;animation:mx-dot .6s var(--mx-soft) 1.1s both}
a:hover > .mx-logo .mx-logo__c,.page-header__logo:hover .mx-logo__c{animation:mx-check-re .9s var(--mx-soft)}
@keyframes mx-check{to{stroke-dashoffset:0}}
@keyframes mx-check-re{0%{stroke-dashoffset:14}100%{stroke-dashoffset:0}}
@keyframes mx-brk{from{transform:scaleX(.6);opacity:0}}
@keyframes mx-dot{from{transform:scale(0)}60%{transform:scale(1.35)}}
.footer .mx-logo text:first-of-type{fill:#fff}
.page-header__logo .mx-logo{width:200px!important;height:40px!important;max-width:none}
@media (max-width:640px){.page-header__logo .mx-logo{width:160px!important;height:32px!important}}
.banner__button_lt,a.button.banner__button_lt{color:var(--mx-brand)!important;background:#fff!important}
.banner__button_lt:hover{color:#fff!important;background:var(--mx-brand)!important}
/* появление блоков: CSS-переход по классу */
.mx-rv{opacity:0;transform:translate3d(0,40px,0);transition:opacity .9s var(--mx-soft),transform 1s var(--mx-soft)}
.mx-rv.mx-in{opacity:1;transform:none}
.mx-rv.mx-in:hover{transition-delay:0s!important}
.mx-btn-light,.mx-btn-light:link,.mx-btn-light:visited{color:var(--mx-brand)!important}
.mx-btn-light:hover{color:#fff!important;background:var(--mx-brand)!important}
.mx-rv.mx-in:is(.panel,.news__item,.articles__item,.figimage):hover{transform:translateY(-6px)}
.mx-rv.mx-in.widget:hover{transform:translateX(-4px) scale(1.04)}
.offer-popup .banner__button:not(.popup){color:var(--mx-brand)!important;background:#fff!important;border:1.5px solid var(--mx-brand)}
.offer-popup .banner__button:not(.popup):hover{color:#fff!important;background:var(--mx-brand)!important}
html,body{overflow-x:clip}
.mx-up{animation:mx-up .9s cubic-bezier(.22,1,.36,1) both}
@keyframes mx-up{from{opacity:0;transform:translate3d(0,28px,0)}}