/* =========================================================
   МЕРА — Projects UI FINAL
   ACF Pro + Elementor Pro
   Version: 1.3.0

   Required Elementor structure for project hero:
   .mera-project-hero
     .mera-project-visual
       Image widget class: .mera-project-bg-image
     .mera-project-glow-fx
     .mera-project-inner
       [mera_project_meta]
     Heading widget class: .mera-project-title
     Text widget class: .mera-project-subtitle
     [mera_project_params]

   Header CTA:
   Standard Elementor Button widget class: .mera-header-cta-clean
========================================================= */


/* =========================================================
   0. VARIABLES
========================================================= */

:root {
  --mera-black: #08090c;
  --mera-black-deep: #040609;
  --mera-black-soft: #101216;
  --mera-header: #171719;

  --mera-white: #ffffff;
  --mera-soft: #f4f4f2;
  --mera-muted: rgba(244, 244, 242, .66);
  --mera-faint: rgba(244, 244, 242, .42);

  --mera-accent: #baff36;
  --mera-accent-soft: rgba(186, 255, 54, .16);
  --mera-accent-border: rgba(186, 255, 54, .32);

  --mera-line: rgba(255, 255, 255, .12);
  --mera-line-soft: rgba(255, 255, 255, .06);

  --mera-font: "Inter", "Geist", "Be Vietnam Pro", Arial, sans-serif;
}


/* =========================================================
   1. PAGE RESET FOR SINGLE PROJECT
========================================================= */

.mera_project-template-default,
.single-mera_project,
.single-mera_project body,
.single-mera_project #pxl-main {
  background: var(--mera-black) !important;
}

.single-mera_project .pxl-page-title,
.single-mera_project .page-title,
.single-mera_project .page-title-wrap,
.single-mera_project .pxl-breadcrumb,
.single-mera_project .breadcrumb,
.single-mera_project #pxl-page-title-default,
.single-mera_project .pxl--page-title,
.single-mera_project .pxl-page-title-default {
  display: none !important;
}

.single-mera_project #pxl-main,
.single-mera_project .site-main,
.single-mera_project .content-area,
.single-mera_project .elementor-section-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-mera_project #pxl-footer-default {
  display: none !important;
}

/* Скрытие случайного пустого контейнера темы/шаблона, если он остался */
.elementor-7038 .elementor-element.elementor-element-ba2a967 {
  display: none !important;
}


/* =========================================================
   2. HEADER
========================================================= */

#pxl-header-elementor,
#pxl-header-elementor .pxl-header-elementor-main,
#pxl-header-elementor .pxl-header-elementor-sticky {
  background: var(--mera-header) !important;
}

#pxl-header-elementor .elementor-871 .elementor-element.elementor-element-a5f9277 {
  min-height: 124px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--mera-header) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

#pxl-header-elementor .elementor-871 .elementor-element.elementor-element-a5f9277 > .e-con-inner {
  min-height: 124px !important;
  max-width: 1480px !important;
  display: flex !important;
  align-items: center !important;
}

#pxl-header-elementor .elementor-871 .elementor-element.elementor-element-b1b3771 {
  width: 240px !important;
  min-width: 240px !important;
  padding: 0 !important;
  background: transparent !important;
}

#pxl-header-elementor .pxl-logo img,
#pxl-header-mobile .pxl-header-branding img,
#pxl-header-mobile .pxl-logo-mobile img {
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}


/* ---------------------------------------------------------
   Header menu
--------------------------------------------------------- */

#pxl-header-elementor .elementor-871 .elementor-element.elementor-element-ed54a4d {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}

#pxl-header-elementor .pxl-nav-menu,
#pxl-header-elementor .pxl-nav-menu * {
  box-shadow: none !important;
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -23px;
  top: 50%;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.14);
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li > a,
#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li > a span {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li > a {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 0 !important;

  color: rgba(255,255,255,.72) !important;
  font-family: var(--mera-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li > a::before {
  content: "";
  display: none;
}

#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li:hover > a,
#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li.current-menu-item > a,
#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li.current-menu-ancestor > a {
  color: #fff !important;
}


/* ---------------------------------------------------------
   Header CTA
   Use standard Elementor Button widget with class:
   mera-header-cta-clean
--------------------------------------------------------- */

/* Скрываем старую кнопку премиум-темы, если она осталась */
#pxl-header-elementor .pxl-button {
  display: none !important;
}

#pxl-header-elementor .mera-header-cta-clean {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

#pxl-header-elementor .mera-header-cta-clean .elementor-widget-container {
  position: relative !important;
  display: inline-flex !important;
}

/* внешняя контурная рамка */
#pxl-header-elementor .mera-header-cta-clean .elementor-widget-container::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(186,255,54,.32);
  border-radius: 5px;
  pointer-events: none;
  box-shadow:
    0 0 18px rgba(186,255,54,.06),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

#pxl-header-elementor .mera-header-cta-clean .elementor-button {
  position: relative !important;

  width: auto !important;
  min-width: auto !important;
  height: 50px !important;
  min-height: 50px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 40px 0 20px !important;

  background: var(--mera-accent) !important;
  color: #08090c !important;

  border: 1px solid rgba(186,255,54,.90) !important;
  border-radius: 3px !important;

  font-family: var(--mera-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.18),
    0 0 0 1px rgba(186,255,54,.08) !important;

  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

/* левая вертикальная линия */
#pxl-header-elementor .mera-header-cta-clean .elementor-button::before {
  content: "";
  position: absolute;
  left: 12px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 2px !important;
  background: #101114 !important;
  opacity: .94;
}

/* стрелка */
#pxl-header-elementor .mera-header-cta-clean .elementor-button::after {
  content: "→";
  position: absolute;
  right: 20px !important;
  top: 50%;
  transform: translateY(-53%);
  color: #08090c;
  font-size: 23px !important;
  font-weight: 500;
  line-height: 1;
  transition: transform .25s ease;
}

/* убираем исходный текст/точки, подставляем чистый */
#pxl-header-elementor .mera-header-cta-clean .elementor-button-content-wrapper,
#pxl-header-elementor .mera-header-cta-clean .elementor-button-text {
  font-size: 0 !important;
  line-height: 0 !important;
}

#pxl-header-elementor .mera-header-cta-clean .elementor-button-text::after {
  content: "ОБСУДИТЬ ПРОЕКТ";
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

#pxl-header-elementor .mera-header-cta-clean .elementor-button:hover {
  transform: translateY(-1px);
  background: #c8ff4f !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.22),
    0 8px 26px rgba(186,255,54,.10) !important;
}

#pxl-header-elementor .mera-header-cta-clean .elementor-button:hover::after {
  transform: translate(4px, -53%);
}


/* =========================================================
   3. PROJECT HERO
   Background mode: rectangular image + smooth black reveal
========================================================= */

.mera-project-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  min-height: calc(100vh - 124px) !important;

  padding-top: 54px !important;
  padding-bottom: 54px !important;
  padding-left: clamp(48px, 5.4vw, 92px) !important;
  padding-right: clamp(48px, 5.4vw, 92px) !important;

  background:
radial-gradient(circle at 66% 47%, rgba(186,255,54,.055), transparent 30%),    radial-gradient(circle at 18% 18%, rgba(255,255,255,.035), transparent 30%),    linear-gradient(135deg, var(--mera-header) !important 0%, #07090d 56%, var(--mera-black-deep) 100%) !important;

  color: var(--mera-soft) !important;
}

.mera-project-hero > .e-con-inner {
  position: relative !important;
  z-index: 2 !important;

  max-width: 1480px !important;
  width: min(100%, 1480px) !important;
  min-height: calc(100vh - 232px) !important;

  display: block !important;
  margin: 0 auto !important;
}


/* ---------------------------------------------------------
   Visual scene: no geometric crop, only soft reveal
--------------------------------------------------------- */

/* старый background-контейнер больше не используем */
.mera-project-bg {
  display: none !important;
}

.mera-project-visual {
  position: absolute !important;
  z-index: 1 !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: min(1040px, 64vw) !important;
  height: 100% !important;

  pointer-events: none !important;
  overflow: hidden !important;

  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Главная маска-свет: изображение плавно проявляется из чёрного слева */
.mera-project-visual::before {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  pointer-events: none !important;

  inset: 0 !important;
  left: -18% !important;
  width: 118% !important;

  background:
    linear-gradient(
      90deg,
      rgba(4,6,9,1) 0%,
      rgba(4,6,9,1) 16%,
      rgba(4,6,9,.96) 25%,
      rgba(4,6,9,.84) 34%,
      rgba(4,6,9,.64) 43%,
      rgba(4,6,9,.40) 52%,
      rgba(4,6,9,.20) 61%,
      rgba(4,6,9,.08) 70%,
      rgba(4,6,9,.00) 82%
    ) !important;
}

/* Виньетка + тонкие дуги, без обрезки картинки */



/* ---------------------------------------------------------
   Hero image widget
   Class on Elementor Image widget: mera-project-bg-image
--------------------------------------------------------- */

.mera-project-bg-image {
  position: absolute !important;
  z-index: 1 !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: min(1040px, 64vw) !important;
  height: 100% !important;
  min-height: 610px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;

  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;

  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.mera-project-bg-image .elementor-widget-container,
.mera-project-bg-image .elementor-image,
.mera-project-bg-image figure {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.mera-project-bg-image img {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;

  object-fit: cover !important;
  object-position: 64% 50% !important;

  opacity: .90 !important;
  filter: saturate(.86) contrast(1.06) brightness(.70) !important;

  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  border-radius: 0 !important;
}

/* Мягкое зелёное свечение поверх зоны проявления, без геометрической обрезки */
.mera-project-bg-image::before {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;

  left: -8%;
  top: 8%;

  width: 72%;
  height: 86%;
  border-radius: 50%;

  background:
    radial-gradient(circle at 42% 68%,
      rgba(186,255,54,.30) 0%,
      rgba(186,255,54,.18) 18%,
      rgba(186,255,54,.09) 34%,
      rgba(186,255,54,.035) 52%,
      transparent 72%),
    radial-gradient(circle at 52% 42%,
      rgba(186,255,54,.13) 0%,
      rgba(186,255,54,.045) 34%,
      transparent 66%);

  filter: blur(30px);
  opacity: .95;
  mix-blend-mode: screen;
}

/* Дополнительная тёмная вуаль прямо на изображении */
.mera-project-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(4,6,9,.98) 0%,
      rgba(4,6,9,.90) 12%,
      rgba(4,6,9,.70) 25%,
      rgba(4,6,9,.42) 38%,
      rgba(4,6,9,.18) 52%,
      rgba(4,6,9,.04) 67%,
      rgba(4,6,9,.00) 82%
    ),
    linear-gradient(
      180deg,
      rgba(4,6,9,.34) 0%,
      rgba(4,6,9,.04) 34%,
      rgba(4,6,9,.28) 100%
    ) !important;
}


/* ---------------------------------------------------------
   Decorative diagonal segmented line
--------------------------------------------------------- */

.mera-project-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 6 !important;
  pointer-events: none !important;

  right: min(37vw, 570px) !important;
  top: 116px !important;

  width: 1px !important;
  height: 760px !important;

  background: repeating-linear-gradient(
    to bottom,
    transparent 0 76px,
    rgba(255,255,255,.13) 76px 144px,
    transparent 144px 198px,
    rgba(255,255,255,.075) 198px 232px,
    transparent 232px 316px
  ) !important;

  transform: rotate(42deg) !important;
  transform-origin: top !important;
  opacity: .46 !important;
}


/* =========================================================
   4. CONTENT LAYERS
========================================================= */

.mera-project-inner,
.mera-project-title,
.mera-project-subtitle,
.mera-project-params,
.mera-project-hero .elementor-widget-shortcode {
  position: relative !important;
  z-index: 10 !important;
}


/* =========================================================
   5. META SHORTCODE
========================================================= */

.mera-project-inner {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 130px !important;
}

.mera-project-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: min(100%, 1080px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mera-project-meta > .mera-meta-cell {
  position: relative;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;

  padding: 0 38px 0 0 !important;
  margin: 0 38px 0 0 !important;

  color: rgba(244,244,242,.52) !important;
  font-family: var(--mera-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

.mera-project-meta > .mera-meta-cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 34px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.16);
}

.mera-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mera-meta-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  color: var(--mera-accent) !important;
  filter: drop-shadow(0 0 10px rgba(186,255,54,.16));
  flex: 0 0 auto !important;
}

.mera-meta-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.mera-meta-label {
  color: rgba(244,244,242,.42) !important;
}

.mera-project-meta strong,
.mera-project-meta b {
  color: rgba(255,255,255,.9) !important;
  font-weight: 650 !important;
}


/* =========================================================
   6. TITLE / SUBTITLE
========================================================= */

.mera-project-title {
  position: relative !important;
  z-index: 10 !important;
  max-width: 780px !important;
  width: min(100%, 780px) !important;
  margin: 0 0 24px !important;
  padding-left: 32px !important;
}

.mera-project-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: calc(100% - 18px);
  min-height: 90px;
  border-radius: 10px;
  background: var(--mera-accent);
  box-shadow: 0 0 20px rgba(186,255,54,.22);
}

.mera-project-title .elementor-heading-title {
  max-width: 780px !important;
  margin: 0 !important;

  color: #fff !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(42px, 3.25vw, 66px) !important;
  line-height: 1.075 !important;
  letter-spacing: -.052em !important;
  font-weight: 690 !important;

  text-wrap: balance;
  text-shadow: 0 16px 44px rgba(0,0,0,.34) !important;
}

.mera-project-subtitle {
  position: relative !important;
  z-index: 10 !important;

  max-width: 780px !important;
  width: min(100%, 780px) !important;
  margin: 0 0 68px !important;
  padding-left: 32px !important;

  color: rgba(244,244,242,.72) !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(17px, 1.22vw, 21px) !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
}


/* =========================================================
   7. PARAMETER CARDS
   Shortcode: [mera_project_params]
========================================================= */

.mera-project-params {
  --mera-param-accent: var(--mera-accent);

  position: relative !important;
  z-index: 10 !important;

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  align-items: stretch !important;
}

.mera-param-card {
  position: relative !important;
  min-height: 220px !important;
  padding: 31px 18px 24px !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;

  border-radius: 12px !important;

  background:
    radial-gradient(circle at 50% 18%, rgba(186,255,54,.082), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
    rgba(14,16,20,.68) !important;

  border: 1px solid rgba(255,255,255,.13) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.24) !important;

  backdrop-filter: blur(15px) !important;
  overflow: visible !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* мягкое внутреннее свечение */
.mera-param-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 18%, rgba(186,255,54,.09), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 62%);
  opacity: 0;
}

/* дополнительная внутренняя обводка с отступом */
.mera-param-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
}

.mera-param-card:hover,
.mera-param-card.is-accent {
  transform: translateY(-5px);
  border-color: rgba(186,255,54,.32) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 48px rgba(0,0,0,.34),
    0 0 42px rgba(186,255,54,.09) !important;
}

.mera-param-card .mera-icon {
  --mera-icon-size: 62px;
  --mera-icon-color: var(--mera-param-accent);
  --mera-icon-duration: 1.35s;
  --mera-icon-delay-step: .06s;

  position: relative;
  z-index: 2;
  width: var(--mera-icon-size);
  height: var(--mera-icon-size);
  color: var(--mera-icon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  filter:
    drop-shadow(0 0 12px rgba(186,255,54,.22))
    drop-shadow(0 0 26px rgba(186,255,54,.10));
}

.mera-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.mera-param-line {
  position: relative;
  z-index: 2;
  display: block;
  width: 55px;
  height: 1px;
  margin: 0 0 14px;
  background: transparent;
  opacity: .9;
  overflow: hidden;
}

.mera-param-line::before,
.mera-param-line::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 1px;
  transform: scaleX(0);
  animation: meraLineToCenter .75s cubic-bezier(.22, .61, .36, 1) forwards;
}

.mera-param-line::before {
  left: 0;
  transform-origin: left center;
	background: linear-gradient(270deg, #bff747, transparent);
}

.mera-param-line::after {
  right: 0;
  transform-origin: right center;
	background: linear-gradient(90deg, #bff747, transparent);
}

@keyframes meraLineToCenter {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.mera-param-name {
  position: relative;
  z-index: 2;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(244,244,242,.57);
  font-family: var(--mera-font);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .095em;
  margin-bottom: 8px;
}

.mera-param-value {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(19px, 1.25vw, 24px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.03em;
}


/* =========================================================
   8. ICON STROKE + SVG DRAW ANIMATION
========================================================= */

/* 1px линии */
.mera-icon svg [stroke],
.mera-meta-icon svg [stroke] {
  stroke-width: 0.7px !important;
  vector-effect: non-scaling-stroke !important;
}

.mera-meta-icon svg {
  shape-rendering: geometricPrecision;
}

/* Draw animation */
.mera-icon--draw svg path,
.mera-icon--draw svg line,
.mera-icon--draw svg polyline,
.mera-icon--draw svg polygon,
.mera-icon--draw svg circle,
.mera-icon--draw svg rect,
.mera-icon--draw svg ellipse {
  stroke-dasharray: var(--mera-line-length, 1);
  stroke-dashoffset: var(--mera-line-length, 1);
  opacity: 0;
  transition:
    stroke-dashoffset var(--mera-icon-duration) cubic-bezier(.22, .61, .36, 1),
    opacity .25s ease;
  transition-delay: calc(var(--mera-line-index, 0) * var(--mera-icon-delay-step));
}

.mera-icon--draw.is-visible svg path,
.mera-icon--draw.is-visible svg line,
.mera-icon--draw.is-visible svg polyline,
.mera-icon--draw.is-visible svg polygon,
.mera-icon--draw.is-visible svg circle,
.mera-icon--draw.is-visible svg rect,
.mera-icon--draw.is-visible svg ellipse {
  stroke-dashoffset: 0;
  opacity: 1;
}


/* =========================================================
   9. ADMIN NOTES
========================================================= */

.mera-admin-note {
  padding: 14px 16px;
  border: 1px solid #d7a400;
  background: #fff8df;
  color: #4a3600;
  border-radius: 8px;
  font-size: 14px;
}


/* =========================================================
   10. RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
  #pxl-header-elementor .pxl-nav-menu .pxl-menu-primary {
    gap: 28px !important;
  }

  #pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li:not(:last-child)::after {
    right: -14px;
  }

  .mera-project-visual {
    width: 68vw !important;
  }

  .mera-project-bg-image {
    right: 0 !important;
    width: 68vw !important;
    opacity: 1 !important;
  }

  .mera-project-title .elementor-heading-title {
    font-size: clamp(36px, 3vw, 56px) !important;
  }

  .mera-project-params {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  #pxl-header-elementor .elementor-871 .elementor-element.elementor-element-ed54a4d {
    display: none !important;
  }

  .mera-project-meta > .mera-meta-cell {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }

  .mera-project-meta > .mera-meta-cell:not(:last-child)::after {
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;
    transform: none !important;
    background: rgba(255,255,255,.09) !important;
  }
}

@media (max-width: 767px) {
  #pxl-header-elementor .elementor-871 .elementor-element.elementor-element-a5f9277 {
    min-height: 90px !important;
  }

  #pxl-header-elementor .elementor-871 .elementor-element.elementor-element-a5f9277 > .e-con-inner {
    min-height: 90px !important;
  }

  #pxl-header-elementor .pxl-logo img {
    max-height: 32px !important;
  }

  #pxl-header-elementor .mera-header-cta-clean .elementor-button {
    width: 184px !important;
    min-width: 184px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 42px 0 22px !important;
  }

  #pxl-header-elementor .mera-header-cta-clean .elementor-button::after {
    right: 16px !important;
    font-size: 20px !important;
  }

  #pxl-header-elementor .mera-header-cta-clean .elementor-button::before {
    left: 9px !important;
    top: 7px !important;
    bottom: 7px !important;
  }

  #pxl-header-elementor .mera-header-cta-clean .elementor-button-text::after {
    font-size: 10px !important;
  }

  .mera-project-hero {
    min-height: auto !important;
    padding-top: 36px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 70px !important;
  }

  .mera-project-hero > .e-con-inner {
    min-height: auto !important;
  }

  .mera-project-visual {
    top: 105px !important;
    right: -44vw !important;
    width: 124vw !important;
    height: 540px !important;
    opacity: .54 !important;
  }

  .mera-project-bg-image {
    right: 0 !important;
    width: 124vw !important;
    height: 540px !important;
    min-height: 540px !important;
  }


  .mera-project-bg-image img {
    object-position: 62% 50% !important;
    opacity: .86 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }


  .mera-project-visual::after,
  .mera-project-hero::after {
    display: none !important;
  }

  .mera-project-inner {
    margin-bottom: 34px !important;
  }

  .mera-project-title {
    max-width: 100% !important;
    padding-left: 18px !important;
    margin-bottom: 22px !important;
  }

  .mera-project-title::before {
    width: 3px !important;
    min-height: 40px !important;
        height: stretch;
  }

  .mera-project-title .elementor-heading-title {
    font-size: clamp(20px, 5vw, 34px) !important;
        line-height: 1.22 !important;
        letter-spacing: -.025em !important;
  }

  .mera-project-subtitle {
    padding-left: 18px !important;
    font-size: 16px !important;
    margin-bottom: 34px !important;
  }

  .mera-project-params {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .mera-param-card {
    min-height: 188px !important;
    padding: 22px 12px 18px !important;
  }

  .mera-param-card .mera-icon {
    --mera-icon-size: 50px;
  }

  .mera-param-name {
    font-size: 11px;
    min-height: 32px;
  }

  .mera-param-value {
    font-size: 20px;
  }
}


/* =========================================================
   11. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .mera-param-card,
  .mera-icon--draw svg path,
  .mera-icon--draw svg line,
  .mera-icon--draw svg polyline,
  .mera-icon--draw svg polygon,
  .mera-icon--draw svg circle,
  .mera-icon--draw svg rect,
  .mera-icon--draw svg ellipse {
    transition: none !important;
    animation: none !important;
  }

  .mera-icon--draw svg path,
  .mera-icon--draw svg line,
  .mera-icon--draw svg polyline,
  .mera-icon--draw svg polygon,
  .mera-icon--draw svg circle,
  .mera-icon--draw svg rect,
  .mera-icon--draw svg ellipse {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}
.mera-project-glow-fx, .mera-project-visual::after, .mera-project-hero::after {
	display: none;
}

#pxl-header-elementor .mera-header-cta-clean .elementor-button::after {
    top: 47%;
}
#pxl-header-elementor .mera-header-cta-clean .elementor-button::before {
    display: none;
}
#pxl-header-elementor .mera-header-cta-clean .elementor-button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 40px 0 20px !important;
    border: 1px solid rgba(186, 255, 54, .90) !important;
    border-radius: 4px !important;
}
#pxl-header-elementor .mera-header-cta-clean
 {
    border: 1px solid #bff74775;
    padding: 5px;
    border-radius: 5px;
	 width: auto !important;
    min-width: auto !important;
}
.mera-param-name {
    font-size: 11px;
}

.mera-param-value {
    font-size: clamp(14px, 1.05vw, 17px);
}
#pxl-header-elementor .elementor-871 .elementor-element.elementor-element-a5f9277 > .e-con-inner {
    min-height: 90px !important;
    max-width: 1480px !important;
}
#pxl-header-elementor .elementor-871 .elementor-element.elementor-element-a5f9277 {
    min-height: 90px !important;
    max-width: 1200px;
}

.mera-header-cta-clean .elementor-button-content-wrapper {
    padding-right: 12px;
}

#pxl-header-elementor .pxl-logo img {
    height: 22px;
}
.mera-icon--draw:not(.is-visible) svg path,
.mera-icon--draw:not(.is-visible) svg line,
.mera-icon--draw:not(.is-visible) svg polyline,
.mera-icon--draw:not(.is-visible) svg polygon,
.mera-icon--draw:not(.is-visible) svg circle,
.mera-icon--draw:not(.is-visible) svg rect,
.mera-icon--draw:not(.is-visible) svg ellipse {
  stroke-dasharray: var(--mera-line-length, 1000);
  stroke-dashoffset: var(--mera-line-length, 1000);
  opacity: 0;
}

.mera-icon--draw.is-visible svg path,
.mera-icon--draw.is-visible svg line,
.mera-icon--draw.is-visible svg polyline,
.mera-icon--draw.is-visible svg polygon,
.mera-icon--draw.is-visible svg circle,
.mera-icon--draw.is-visible svg rect,
.mera-icon--draw.is-visible svg ellipse {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* =========================================================
   MERA — Solution features
   Shortcode: [mera_project_solution_features]
========================================================= */

.mera-solution-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.mera-feature-card {
  position: relative;
  min-height: 236px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 16%, rgba(186,255,54,.075), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(14,16,20,.64);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(15px);
  overflow: visible;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.mera-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 20%, rgba(186,255,54,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 62%);
}

.mera-feature-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.mera-feature-card:hover,
.mera-feature-card.is-accent {
  transform: translateY(-4px);
  border-color: rgba(186,255,54,.32);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 48px rgba(0,0,0,.34),
    0 0 42px rgba(186,255,54,.08);
}

.mera-feature-icon {
  --mera-icon-size: 52px;
  --mera-icon-color: var(--mera-accent);
  --mera-icon-duration: 1.35s;
  --mera-icon-delay-step: .06s;

  position: relative;
  z-index: 2;
  width: var(--mera-icon-size);
  height: var(--mera-icon-size);
  color: var(--mera-icon-color);
  margin-bottom: 26px;
  filter:
    drop-shadow(0 0 12px rgba(186,255,54,.20))
    drop-shadow(0 0 26px rgba(186,255,54,.08));
}

.mera-feature-body {
  position: relative;
  z-index: 2;
}

.mera-feature-title {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(19px, 1.35vw, 25px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.025em;
}

.mera-feature-text {
  margin: 0;
  color: rgba(244,244,242,.64);
  font-family: var(--mera-font);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .mera-solution-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mera-solution-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mera-feature-card {
    min-height: auto;
    padding: 24px 18px 22px;
  }

  .mera-feature-icon {
    --mera-icon-size: 46px;
    margin-bottom: 20px;
  }
}
/* =========================================================
   MERA — Project story + client requirements
========================================================= */

/* ---------------------------------------------------------
   Story: request + solution
--------------------------------------------------------- */

.mera-project-story {
  position: relative;
  padding: clamp(72px, 7vw, 120px) clamp(24px, 5.4vw, 92px) 0;
  background: #05070b;
  color: var(--mera-soft);
}

.mera-project-story__grid {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mera-story-card {
  position: relative;
  min-height: 360px;
  padding: clamp(30px, 3vw, 48px);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 16%, rgba(186,255,54,.07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(14,16,20,.68);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 18px 48px rgba(0,0,0,.26);
  overflow: visible;
}

.mera-story-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.mera-story-card__kicker,
.mera-section-kicker {
  margin-bottom: 18px;
  color: var(--mera-accent);
  font-family: var(--mera-font);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mera-story-card__title,
.mera-section-title {
  margin: 0;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(28px, 2.8vw, 48px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.045em;
}

.mera-story-card__text {
  max-width: 680px;
  margin-top: 26px;
  color: rgba(244,244,242,.68);
  font-family: var(--mera-font);
  font-size: clamp(16px, 1.08vw, 19px);
  line-height: 1.62;
  font-weight: 400;
}

.mera-story-card__text p {
  margin: 0 0 14px;
}

.mera-story-card__text p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Requirements list
--------------------------------------------------------- */

.mera-project-requirements {
  position: relative;
  padding: clamp(64px, 6vw, 104px) clamp(24px, 5.4vw, 92px) 0;
  background: #05070b;
  color: var(--mera-soft);
}

.mera-project-requirements__head {
  width: min(100%, 1480px);
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  gap: 44px;
  align-items: end;
}

.mera-requirements-list {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.mera-requirement-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-height: 116px;
  padding: 24px 30px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(186,255,54,.055), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
    rgba(14,16,20,.60);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.016),
    0 10px 28px rgba(0,0,0,.20);
  overflow: hidden;
}

.mera-requirement-item::before {
  content: "";
  position: absolute;
  left: 92px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(186,255,54,.28), transparent);
}

.mera-requirement-item::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.045);
  pointer-events: none;
}

.mera-requirement-item.is-accent {
  border-color: rgba(186,255,54,.30);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 18px 44px rgba(0,0,0,.28),
    0 0 34px rgba(186,255,54,.065);
}

.mera-requirement-number {
  position: relative;
  z-index: 2;
  color: rgba(186,255,54,.94);
  font-family: var(--mera-font);
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .08em;
}

.mera-requirement-content {
  position: relative;
  z-index: 2;
}

.mera-requirement-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(19px, 1.35vw, 25px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.025em;
}

.mera-requirement-text {
  max-width: 820px;
  margin: 0;
  color: rgba(244,244,242,.62);
  font-family: var(--mera-font);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 1024px) {
  .mera-project-story__grid {
    grid-template-columns: 1fr;
  }

  .mera-project-requirements__head {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .mera-project-story,
  .mera-project-requirements {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mera-story-card {
    min-height: auto;
    padding: 26px 20px;
  }

  .mera-requirement-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 18px;
  }

  .mera-requirement-item::before {
    display: none;
  }
}
/* =========================================================
   MERA — Story / Requirements / Client Result v2.1
   Новый дизайн после hero
========================================================= */

/* ---------------------------------------------------------
   Shared section headings
--------------------------------------------------------- */

.mera-section-kicker {
  color: var(--mera-accent);
  font-family: var(--mera-font);
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mera-section-title {
  margin: 0;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: -.045em;
}

/* ---------------------------------------------------------
   1. Story: request + solution without cards
--------------------------------------------------------- */

.mera-story-v2 {
  position: relative;
  padding: clamp(72px, 7vw, 118px) clamp(24px, 5.4vw, 92px) 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(186,255,54,.045), transparent 24%),
    linear-gradient(180deg, #05070b 0%, #040609 100%);
  color: var(--mera-soft);
}

.mera-story-v2__inner {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}

.mera-story-v2__request,
.mera-story-v2__solution {
  position: relative;
}

.mera-request-quote {
  position: relative;
  margin: 24px 0 0;
  padding: 0 0 0 34px;
  border: 0;
}

.mera-request-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 6px;
  width: 4px;
  border-radius: 10px;
  background: var(--mera-accent);
  box-shadow: 0 0 22px rgba(186,255,54,.22);
}

.mera-request-quote::after {
  content: "“";
  position: absolute;
  left: 18px;
  top: -34px;
  color: rgba(186,255,54,.16);
  font-family: Georgia, serif;
  font-size: 108px;
  line-height: 1;
  pointer-events: none;
}

.mera-request-quote p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(32px, 3.2vw, 58px);
  line-height: 1.08;
  font-weight: 680;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.mera-story-v2__title {
  margin: 24px 0 0;
  max-width: 660px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.mera-story-v2__text {
  margin-top: 28px;
  max-width: 720px;
  color: rgba(244,244,242,.68);
  font-family: var(--mera-font);
  font-size: clamp(16px, 1.08vw, 19px);
  line-height: 1.68;
  font-weight: 400;
}

.mera-story-v2__text--request {
  padding-left: 34px;
}

.mera-story-v2__text p {
  margin: 0 0 15px;
}

.mera-story-v2__text p:last-child {
  margin-bottom: 0;
}

/* Styled solution list */
.mera-solution-list {
  margin-top: 34px;
  max-width: 760px;
}

.mera-solution-list__title {
  margin-bottom: 18px;
  color: rgba(255,255,255,.90);
  font-family: var(--mera-font);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: .02em;
}

.mera-solution-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.mera-solution-list li {
  position: relative;
  min-height: 34px;
  padding-left: 42px;
  display: flex;
  align-items: flex-start;
  color: rgba(244,244,242,.70);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.48;
}

.mera-solution-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(186,255,54,.74);
  box-shadow:
    0 0 0 5px rgba(186,255,54,.035),
    0 0 18px rgba(186,255,54,.12);
}

.mera-solution-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(.35em + 8px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mera-accent);
  box-shadow: 0 0 12px rgba(186,255,54,.34);
}

/* ---------------------------------------------------------
   2. Requirements: stylized list, no cards
--------------------------------------------------------- */

.mera-requirements-v2 {
  position: relative;
  padding: clamp(62px, 6vw, 104px) clamp(24px, 5.4vw, 92px) 0;
  background: #040609;
  color: var(--mera-soft);
}

.mera-requirements-v2__inner {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: start;
}

.mera-requirements-v2__head {
  position: sticky;
  top: 120px;
}

.mera-requirements-v2__head .mera-section-title {
  margin-top: 18px;
  max-width: 460px;
}

.mera-requirements-v2__list {
  display: grid;
  gap: 24px;
}

.mera-requirement-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.mera-requirement-v2:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mera-requirement-v2__dot {
  position: relative;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid rgba(186,255,54,.76);
  box-shadow:
    0 0 0 6px rgba(186,255,54,.035),
    0 0 18px rgba(186,255,54,.12);
}

.mera-requirement-v2__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--mera-accent);
  box-shadow: 0 0 12px rgba(186,255,54,.36);
}

.mera-requirement-v2__content h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(20px, 1.45vw, 27px);
  line-height: 1.16;
  font-weight: 620;
  letter-spacing: -.025em;
}

.mera-requirement-v2__content p {
  max-width: 820px;
  margin: 0;
  color: rgba(244,244,242,.62);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.58;
  font-weight: 400;
}

.mera-requirement-v2.is-accent .mera-requirement-v2__content h3 {
  color: #f6ffe3;
}

/* ---------------------------------------------------------
   3. Client result: exactly 3-card grid
--------------------------------------------------------- */

.mera-result-v2 {
  position: relative;
  padding: clamp(72px, 7vw, 118px) clamp(24px, 5.4vw, 92px) 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(186,255,54,.04), transparent 24%),
    #040609;
  color: var(--mera-soft);
}

.mera-result-v2__inner {
  width: min(100%, 1480px);
  margin: 0 auto;
}

.mera-result-v2__head {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr);
  gap: 44px;
  align-items: end;
}

.mera-result-v2__head .mera-section-title {
  max-width: 720px;
}

.mera-result-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mera-result-card {
  position: relative;
  min-height: 300px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 18%, rgba(186,255,54,.075), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(14,16,20,.66);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(15px);
  overflow: visible;
}

.mera-result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(186,255,54,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 62%);
}

.mera-result-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.mera-result-card__icon {
  --mera-icon-size: 54px;
  --mera-icon-color: var(--mera-accent);
  --mera-icon-duration: 1.35s;
  --mera-icon-delay-step: .06s;

  position: relative;
  z-index: 2;
  width: var(--mera-icon-size);
  height: var(--mera-icon-size);
  color: var(--mera-icon-color);
  margin-bottom: 34px;
  filter:
    drop-shadow(0 0 12px rgba(186,255,54,.20))
    drop-shadow(0 0 26px rgba(186,255,54,.08));
}

.mera-result-card__title {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(22px, 1.75vw, 32px);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -.035em;
}

.mera-result-card__text {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(244,244,242,.64);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.58;
  font-weight: 400;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 1200px) {
  .mera-result-card {
    padding: 26px 22px 24px;
  }
}

@media (max-width: 1024px) {
  .mera-story-v2__inner,
  .mera-requirements-v2__inner,
  .mera-result-v2__head {
    grid-template-columns: 1fr;
  }

  .mera-requirements-v2__head {
    position: relative;
    top: auto;
  }

  .mera-result-v2__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .mera-story-v2,
  .mera-requirements-v2,
  .mera-result-v2 {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mera-story-v2__inner {
    gap: 48px;
  }

  .mera-request-quote {
    padding-left: 20px;
  }

  .mera-story-v2__text--request {
    padding-left: 20px;
  }

  .mera-request-quote::before {
    width: 3px;
  }

  .mera-solution-list li {
    padding-left: 36px;
  }
}
/* =========================================================
   MERA — Story / Requirements / Client Result v2.2
   Новый дизайн после hero
========================================================= */

/* ---------------------------------------------------------
   Shared section headings
--------------------------------------------------------- */

.mera-section-kicker {
  color: var(--mera-accent);
  font-family: var(--mera-font);
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mera-section-title {
  margin: 0;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: -.045em;
}

.mera-section-subtitle {
  max-width: 640px;
  margin: 18px auto 0;
  color: rgba(244,244,242,.58);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.58;
  font-weight: 400;
}

/* ---------------------------------------------------------
   1. Story: request + solution as horizontal rows
--------------------------------------------------------- */

.mera-story-v2 {
  position: relative;
  padding: clamp(74px, 7vw, 118px) clamp(24px, 5.4vw, 92px) 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(186,255,54,.038), transparent 24%),
    linear-gradient(180deg, #05070b 0%, #040609 100%);
  color: var(--mera-soft);
}

.mera-story-v2__inner {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: grid;
  gap: clamp(54px, 6vw, 92px);
}

.mera-story-v2__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .31fr) minmax(0, 1fr);
  gap: clamp(42px, 5vw, 86px);
  align-items: start;
}

.mera-story-v2__row:not(:last-child) {
  padding-bottom: clamp(54px, 6vw, 92px);
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.mera-story-v2__side {
  position: relative;
  padding-top: 10px;
}

.mera-story-v2__side::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--mera-accent), transparent);
  opacity: .75;
}

.mera-story-v2__main {
  max-width: 880px;
}

/* Minimal quote instead of bright card */
.mera-request-quote {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.mera-request-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .2em;
  width: 3px;
  border-radius: 10px;
  background: var(--mera-accent);
  box-shadow: 0 0 18px rgba(186,255,54,.18);
}

.mera-request-quote::after {
  content: "“";
  position: absolute;
  left: 13px;
  top: -36px;
  color: rgba(186,255,54,.09);
  font-family: Georgia, serif;
  font-size: 92px;
  line-height: 1;
  pointer-events: none;
}

.mera-request-quote p {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(31px, 3vw, 54px);
  line-height: 1.08;
  font-weight: 660;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.mera-story-v2__title {
  margin: 0;
  max-width: 720px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(31px, 3vw, 54px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.mera-story-v2__text {
  margin-top: 28px;
  max-width: 800px;
  color: rgba(244,244,242,.66);
  font-family: var(--mera-font);
  font-size: clamp(16px, 1.08vw, 19px);
  line-height: 1.68;
  font-weight: 400;
}

.mera-story-v2__text--request {
  padding-left: 28px;
}

.mera-story-v2__text p {
  margin: 0 0 15px;
}

.mera-story-v2__text p:last-child {
  margin-bottom: 0;
}

/* Styled solution list */
.mera-solution-list {
  margin-top: 36px;
  max-width: 820px;
}

.mera-solution-list__title {
  margin-bottom: 18px;
  color: rgba(255,255,255,.90);
  font-family: var(--mera-font);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: .02em;
}

.mera-solution-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.mera-solution-list li {
  position: relative;
  min-height: 34px;
  padding-left: 42px;
  display: flex;
  align-items: flex-start;
  color: rgba(244,244,242,.70);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.48;
}

.mera-solution-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(186,255,54,.74);
  box-shadow:
    0 0 0 5px rgba(186,255,54,.035),
    0 0 18px rgba(186,255,54,.12);
}

.mera-solution-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(.35em + 8px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mera-accent);
  box-shadow: 0 0 12px rgba(186,255,54,.34);
}

/* ---------------------------------------------------------
   2. Requirements: stylized list, no cards
--------------------------------------------------------- */

.mera-requirements-v2 {
  position: relative;
  padding: clamp(62px, 6vw, 104px) clamp(24px, 5.4vw, 92px) 0;
  background: #040609;
  color: var(--mera-soft);
}

.mera-requirements-v2__inner {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: start;
}

.mera-requirements-v2__head {
  position: sticky;
  top: 120px;
}

.mera-requirements-v2__head .mera-section-title {
  margin-top: 18px;
  max-width: 460px;
}

.mera-requirements-v2__list {
  display: grid;
  gap: 24px;
}

.mera-requirement-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.mera-requirement-v2:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mera-requirement-v2__dot {
  position: relative;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid rgba(186,255,54,.76);
  box-shadow:
    0 0 0 6px rgba(186,255,54,.035),
    0 0 18px rgba(186,255,54,.12);
}

.mera-requirement-v2__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--mera-accent);
  box-shadow: 0 0 12px rgba(186,255,54,.36);
}

.mera-requirement-v2__content h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(20px, 1.45vw, 27px);
  line-height: 1.16;
  font-weight: 620;
  letter-spacing: -.025em;
}

.mera-requirement-v2__content p {
  max-width: 820px;
  margin: 0;
  color: rgba(244,244,242,.62);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.58;
  font-weight: 400;
}

.mera-requirement-v2.is-accent .mera-requirement-v2__content h3 {
  color: #f6ffe3;
}

/* ---------------------------------------------------------
   3. Client result: centered heading + 3-card grid
--------------------------------------------------------- */

.mera-result-v2 {
  position: relative;
  padding: clamp(72px, 7vw, 118px) clamp(24px, 5.4vw, 92px) 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(186,255,54,.04), transparent 24%),
    #040609;
  color: var(--mera-soft);
}

.mera-result-v2__inner {
  width: min(100%, 1480px);
  margin: 0 auto;
}

.mera-result-v2__head {
  max-width: 780px;
  margin: 0 auto 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mera-result-v2__head .mera-section-kicker {
  margin-bottom: 18px;
}

.mera-result-v2__head .mera-section-title {
  max-width: 780px;
}

.mera-result-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mera-result-card {
  position: relative;
  min-height: 300px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 18%, rgba(186,255,54,.075), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(14,16,20,.66);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(15px);
  overflow: visible;
}

.mera-result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(186,255,54,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 62%);
}

.mera-result-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.mera-result-card__icon {
  --mera-icon-size: 54px;
  --mera-icon-color: var(--mera-accent);
  --mera-icon-duration: 1.35s;
  --mera-icon-delay-step: .06s;

  position: relative;
  z-index: 2;
  width: var(--mera-icon-size);
  height: var(--mera-icon-size);
  color: var(--mera-icon-color);
  margin-bottom: 34px;
  filter:
    drop-shadow(0 0 12px rgba(186,255,54,.20))
    drop-shadow(0 0 26px rgba(186,255,54,.08));
}

.mera-result-card__title {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--mera-font);
  font-size: clamp(22px, 1.75vw, 32px);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -.035em;
}

.mera-result-card__text {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(244,244,242,.64);
  font-family: var(--mera-font);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.58;
  font-weight: 400;
}

/* ---------------------------------------------------------
   Extra polish
--------------------------------------------------------- */

.mera-story-v2 + .mera-requirements-v2,
.mera-requirements-v2 + .mera-result-v2,
.mera-story-v2 + .mera-result-v2 {
  margin-top: 0;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 1200px) {
  .mera-story-v2__row {
    grid-template-columns: minmax(190px, .28fr) minmax(0, 1fr);
  }

  .mera-result-card {
    padding: 26px 22px 24px;
  }
}

@media (max-width: 1024px) {
  .mera-story-v2__row,
  .mera-requirements-v2__inner {
    grid-template-columns: 1fr;
  }

  .mera-story-v2__side::after {
    margin-top: 16px;
  }

  .mera-requirements-v2__head {
    position: relative;
    top: auto;
  }

  .mera-result-v2__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .mera-story-v2,
  .mera-requirements-v2,
  .mera-result-v2 {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mera-story-v2__inner {
    gap: 48px;
  }

  .mera-story-v2__row:not(:last-child) {
    padding-bottom: 48px;
  }

  .mera-request-quote {
    padding-left: 20px;
  }

  .mera-story-v2__text--request {
    padding-left: 20px;
  }

  .mera-request-quote::before {
    width: 3px;
  }

  .mera-solution-list li {
    padding-left: 36px;
  }
}
/* =========================================================
   MERA — HOTFIX story block v2.2
   Вставить В САМЫЙ КОНЕЦ:
   /wp-content/plugins/mera-projects-ui-v1-1/assets/css/mera-projects-ui.css

   Цель:
   - переопределить старые стили v2/v2.1;
   - сделать "Запрос клиента" и "Решение МЕРЫ" построчно;
   - убрать яркую зелёную цитату-карточку;
   - вернуть нормальную ширину текста.
========================================================= */

/* Общая секция */
.mera-story-v2 {
  position: relative !important;
  padding: clamp(74px, 7vw, 118px) clamp(24px, 5.4vw, 92px) 0 !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(186,255,54,.038), transparent 24%),
    linear-gradient(180deg, #05070b 0%, #040609 100%) !important;
  color: var(--mera-soft) !important;
}

/* Главное: убираем старую двухколоночную сетку всего блока */
.mera-story-v2 .mera-story-v2__inner {
  width: min(100%, 1480px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(54px, 6vw, 92px) !important;
  align-items: start !important;
}

/* Каждая строка: слева label, справа контент */
.mera-story-v2 .mera-story-v2__row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .31fr) minmax(0, 1fr) !important;
  gap: clamp(42px, 5vw, 86px) !important;
  align-items: start !important;
  min-width: 0 !important;
}

.mera-story-v2 .mera-story-v2__row:not(:last-child) {
  padding-bottom: clamp(54px, 6vw, 92px) !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

/* Сбрасываем старые классы, если они остались в DOM/CSS */
.mera-story-v2 .mera-story-v2__request,
.mera-story-v2 .mera-story-v2__solution {
  display: block !important;
  min-width: 0 !important;
}

.mera-story-v2 .mera-story-v2__side {
  position: relative !important;
  padding-top: 10px !important;
  min-width: 0 !important;
}

.mera-story-v2 .mera-story-v2__side::after {
  content: "" !important;
  display: block !important;
  width: 46px !important;
  height: 1px !important;
  margin-top: 22px !important;
  background: linear-gradient(90deg, var(--mera-accent), transparent) !important;
  opacity: .75 !important;
}

.mera-story-v2 .mera-story-v2__main {
  max-width: 880px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Минималистичная цитата вместо яркой зелёной плашки/круга */
.mera-story-v2 .mera-request-quote {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 0 28px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  transform: none !important;
}

/* Убираем старый яркий круг/плашку и рисуем только тонкую линию */
.mera-story-v2 .mera-request-quote::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .18em !important;
  bottom: .2em !important;
  width: 3px !important;
  height: auto !important;
  border-radius: 10px !important;
  background: var(--mera-accent) !important;
  box-shadow: 0 0 18px rgba(186,255,54,.18) !important;
  opacity: 1 !important;
}

/* Едва заметная кавычка */
.mera-story-v2 .mera-request-quote::after {
  content: "“" !important;
  position: absolute !important;
  left: 13px !important;
  top: -36px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: rgba(186,255,54,.09) !important;
  font-family: Georgia, serif !important;
  font-size: 92px !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Нормальная ширина заголовка запроса */
.mera-story-v2 .mera-request-quote p {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  max-width: 760px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(31px, 2vw, 54px) !important;
  line-height: 1.08 !important;
  font-weight: 660 !important;
  letter-spacing: -.052em !important;
  text-wrap: balance !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Заголовок решения */
.mera-story-v2 .mera-story-v2__title {
  display: block !important;
  width: auto !important;
  max-width: 720px !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(31px, 2vw, 54px) !important;
  line-height: 1.08 !important;
  font-weight: 650 !important;
  letter-spacing: -.048em !important;
  text-wrap: balance !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Основной текст */
.mera-story-v2 .mera-story-v2__text {
  display: block !important;
  width: auto !important;
  max-width: 800px !important;
  min-width: 0 !important;
  margin-top: 28px !important;
  color: rgba(244,244,242,.66) !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(16px, 1.08vw, 19px) !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.mera-story-v2 .mera-story-v2__text--request {
  padding-left: 28px !important;
}

.mera-story-v2 .mera-story-v2__text p {
  margin: 0 0 15px !important;
}

.mera-story-v2 .mera-story-v2__text p:last-child {
  margin-bottom: 0 !important;
}

/* Список "В котельной предусмотрели" */
.mera-story-v2 .mera-solution-list {
  margin-top: 36px !important;
  max-width: 820px !important;
}

.mera-story-v2 .mera-solution-list__title {
  margin-bottom: 18px !important;
  color: rgba(255,255,255,.90) !important;
  font-family: var(--mera-font) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
}

.mera-story-v2 .mera-solution-list ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 13px !important;
}

.mera-story-v2 .mera-solution-list li {
  position: relative !important;
  min-height: 34px !important;
  padding-left: 42px !important;
  display: flex !important;
  align-items: flex-start !important;
  color: rgba(244,244,242,.70) !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.48 !important;
}

.mera-story-v2 .mera-solution-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .35em !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(186,255,54,.74) !important;
  background: transparent !important;
  box-shadow:
    0 0 0 5px rgba(186,255,54,.035),
    0 0 18px rgba(186,255,54,.12) !important;
}

.mera-story-v2 .mera-solution-list li::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: calc(.35em + 8px) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--mera-accent) !important;
  box-shadow: 0 0 12px rgba(186,255,54,.34) !important;
}

/* Центровка заголовка блока "Что получил клиент" */
.mera-result-v2 .mera-result-v2__head {
  max-width: 780px !important;
  margin: 0 auto 38px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.mera-result-v2 .mera-result-v2__head .mera-section-kicker {
  margin-bottom: 18px !important;
}

.mera-result-v2 .mera-section-subtitle {
  max-width: 640px !important;
  margin: 18px auto 0 !important;
  text-align: center !important;
}

/* Адаптив */
@media (max-width: 1024px) {
  .mera-story-v2 .mera-story-v2__row {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .mera-story-v2 .mera-story-v2__side::after {
    margin-top: 16px !important;
  }
}

@media (max-width: 767px) {
  .mera-story-v2 {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mera-story-v2 .mera-story-v2__inner {
    gap: 48px !important;
  }

  .mera-story-v2 .mera-story-v2__row:not(:last-child) {
    padding-bottom: 48px !important;
  }

  .mera-story-v2 .mera-request-quote {
    padding-left: 20px !important;
  }

  .mera-story-v2 .mera-story-v2__text--request {
    padding-left: 20px !important;
  }

  .mera-story-v2 .mera-request-quote::before {
    width: 3px !important;
  }

  .mera-story-v2 .mera-solution-list li {
    padding-left: 36px !important;
  }
}

.mera-story-v2, .mera-result-v2  {
    background: transparent !important;
}

/* =========================================================
   MERA — v3 request / requirements / solution layout
========================================================= */

/* Общая ширина контента */
.mera-request-v3,
.mera-solution-v3 {
  position: relative !important;
  padding: clamp(76px, 7vw, 118px) clamp(24px, 5.4vw, 92px) 0 !important;
  background: #040609 !important;
  color: var(--mera-soft) !important;
}

.mera-request-v3__inner,
.mera-solution-v3__inner {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr) !important;
  gap: clamp(42px, 5vw, 84px) !important;
  align-items: start !important;
}

.mera-request-v3__side,
.mera-solution-v3__side {
  padding-top: 10px !important;
}

.mera-request-v3__side::after,
.mera-solution-v3__side::after {
  content: "" !important;
  display: block !important;
  width: 46px !important;
  height: 1px !important;
  margin-top: 22px !important;
  background: linear-gradient(90deg, var(--mera-accent), transparent) !important;
  opacity: .75 !important;
}

.mera-request-v3__main,
.mera-solution-v3__main {
  max-width: 840px !important;
  min-width: 0 !important;
}

/* Запрос клиента */
.mera-request-v3__quote {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 28px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mera-request-v3__quote::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .15em !important;
  bottom: .18em !important;
  width: 3px !important;
  border-radius: 10px !important;
  background: var(--mera-accent) !important;
  box-shadow: 0 0 18px rgba(186,255,54,.18) !important;
}

.mera-request-v3__quote::after {
  content: "“" !important;
  position: absolute !important;
  left: 12px !important;
  top: -36px !important;
  color: rgba(186,255,54,.08) !important;
  font-family: Georgia, serif !important;
  font-size: 94px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.mera-request-v3__quote p {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(34px, 3.2vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 680 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

.mera-request-v3__text,
.mera-solution-v3__text {
  margin-top: 30px !important;
  max-width: 820px !important;
  color: rgba(244,244,242,.66) !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(16px, 1.08vw, 19px) !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
}

.mera-request-v3__text {
  padding-left: 28px !important;
}

.mera-request-v3__text p,
.mera-solution-v3__text p {
  margin: 0 0 15px !important;
}

.mera-request-v3__text p:last-child,
.mera-solution-v3__text p:last-child {
  margin-bottom: 0 !important;
}

/* Решение */
.mera-solution-v3 {
  padding-top: clamp(72px, 6.5vw, 110px) !important;
}

.mera-solution-v3__title {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(34px, 3.2vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 680 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

/* Full-width блок важных требований */
.mera-requirements-v3 {
  position: relative !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-top: clamp(76px, 7vw, 118px) !important;
  padding: clamp(84px, 7.5vw, 132px) clamp(24px, 5.4vw, 92px) !important;
  color: var(--mera-soft) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(186,255,54,.11), transparent 26%),
    radial-gradient(circle at 82% 72%, rgba(186,255,54,.055), transparent 30%),
    linear-gradient(180deg, rgba(4,6,9,.90), rgba(4,6,9,.96)),
    #05070b !important;
}

.mera-requirements-v3[style*="--mera-req-bg"] {
  background-image:
    radial-gradient(circle at 18% 28%, rgba(186,255,54,.13), transparent 26%),
    radial-gradient(circle at 82% 72%, rgba(186,255,54,.06), transparent 30%),
    linear-gradient(90deg, rgba(4,6,9,.97) 0%, rgba(4,6,9,.84) 46%, rgba(4,6,9,.72) 100%),
    var(--mera-req-bg) !important;
  background-size: auto, auto, auto, cover !important;
  background-position: center !important;
}

.mera-requirements-v3::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

.mera-requirements-v3::after {
  content: "" !important;
  position: absolute !important;
  width: 520px !important;
  height: 520px !important;
  right: 6vw !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(186,255,54,.13) !important;
  box-shadow: 0 0 70px rgba(186,255,54,.045) !important;
  pointer-events: none !important;
}

.mera-requirements-v3__inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr) !important;
  gap: clamp(44px, 6vw, 96px) !important;
  align-items: start !important;
}

.mera-requirements-v3__head {
  position: relative !important;
}

.mera-requirements-v3__head .mera-section-title {
  margin-top: 22px !important;
  max-width: 460px !important;
}

.mera-requirements-v3__list {
  display: grid !important;
  gap: 26px !important;
}

.mera-requirement-v3 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 22px !important;
  padding-bottom: 26px !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

.mera-requirement-v3:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.mera-requirement-v3__dot {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  margin-top: 2px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(186,255,54,.78) !important;
  box-shadow:
    0 0 0 6px rgba(186,255,54,.04),
    0 0 22px rgba(186,255,54,.16) !important;
}

.mera-requirement-v3__dot::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  background: var(--mera-accent) !important;
  box-shadow: 0 0 14px rgba(186,255,54,.42) !important;
}

.mera-requirement-v3__content h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(21px, 1.55vw, 28px) !important;
  line-height: 1.16 !important;
  font-weight: 650 !important;
  letter-spacing: -.028em !important;
}

.mera-requirement-v3__content p {
  max-width: 780px !important;
  margin: 0 !important;
  color: rgba(244,244,242,.66) !important;
  font-family: var(--mera-font) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.58 !important;
}

/* Список в решении */
.mera-solution-v3 .mera-solution-list {
  margin-top: 36px !important;
  max-width: 820px !important;
}

/* Адаптив */
@media (max-width: 1024px) {
  .mera-request-v3__inner,
  .mera-solution-v3__inner,
  .mera-requirements-v3__inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .mera-requirements-v3::after {
    right: -180px !important;
  }
}

@media (max-width: 767px) {
  .mera-request-v3,
  .mera-solution-v3,
  .mera-requirements-v3 {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mera-request-v3__quote,
  .mera-request-v3__text {
    padding-left: 20px !important;
  }

  .mera-request-v3__quote::before {
    width: 3px !important;
  }

  .mera-requirements-v3 {
    margin-top: 64px !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .mera-requirements-v3::before {
    inset: 10px !important;
    border-radius: 14px !important;
  }
}
/* =========================================================
   MERA — v3 final layout patch
   Request / Requirements / Solution / Result
========================================================= */

/* 1. Запрос и решение — прозрачный фон, больше воздуха */
.mera-request-v3,
.mera-solution-v3 {
  background: transparent !important;
  padding: clamp(76px, 10vw, 118px) clamp(24px, 5.4vw, 92px) 0 !important;
}

/* Заголовки чуть спокойнее */
.mera-request-v3__quote p,
.mera-solution-v3__title {
  font-size: clamp(34px, 2.2vw, 58px) !important;
}

/* Фикс глобального blockquote темы */
blockquote:not(.pxl-blockquote)::before {
  height: auto !important;
}

/* 2. Требования — больше не full-width баннер, а спокойный блок как request/solution */
.mera-requirements-v3.mera-req-band {
  width: auto !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding: clamp(76px, 10vw, 118px) clamp(24px, 5.4vw, 92px) 0 !important;
  background: transparent !important;
  color: var(--mera-soft) !important;
  overflow: visible !important;
}

.mera-requirements-v3.mera-req-band::before,
.mera-requirements-v3.mera-req-band::after {
  display: none !important;
}

/* Внутри такая же ширина и логика, как у соседних блоков */
.mera-requirements-v3.mera-req-band .mera-requirements-v3__inner {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr) !important;
  gap: clamp(42px, 5vw, 84px) !important;
  align-items: start !important;
}

/* Убираем подзаголовок "Важные требования клиента" */
.mera-requirements-v3.mera-req-band .mera-section-kicker {
  display: none !important;
}

/* Оставляем только "Что нужно было учесть в проекте" */
.mera-requirements-v3.mera-req-band .mera-requirements-v3__head {
  position: relative !important;
  padding-top: 6px !important;
}

.mera-requirements-v3.mera-req-band .mera-requirements-v3__head::after {
  content: "" !important;
  display: block !important;
  width: 46px !important;
  height: 1px !important;
  margin-top: 24px !important;
  background: linear-gradient(90deg, var(--mera-accent), transparent) !important;
  opacity: .75 !important;
}

.mera-requirements-v3.mera-req-band .mera-section-title {
  margin: 0 !important;
  max-width: 420px !important;
  font-size: clamp(34px, 2.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em !important;
}

/* Список требований — чище и премиальнее */
.mera-requirements-v3.mera-req-band .mera-requirements-v3__list {
  display: grid !important;
  gap: 28px !important;
  max-width: 820px !important;
}

.mera-requirements-v3.mera-req-band .mera-requirement-v3 {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 22px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.mera-requirements-v3.mera-req-band .mera-requirement-v3:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.mera-requirements-v3.mera-req-band .mera-requirement-v3__content h3 {
  font-size: clamp(21px, 1.35vw, 27px) !important;
  line-height: 1.16 !important;
}

.mera-requirements-v3.mera-req-band .mera-requirement-v3__content p {
  color: rgba(244,244,242,.64) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.6 !important;
}

/* 3. Блок "Что получил клиент" — убираем kicker "Результат для клиента" */
.mera-result-v2 .mera-result-v2__head .mera-section-kicker {
  display: none !important;
}

.mera-result-v2 .mera-result-v2__head {
  margin-bottom: 44px !important;
}

.mera-result-v2 .mera-section-title {
  text-align: center !important;
}

/* Если подзаголовок не нужен — скрываем */
.mera-result-v2 .mera-section-subtitle {
  display: none !important;
}

/* 4. Больше воздуха между крупными смысловыми блоками */
.mera-request-v3 + .mera-requirements-v3,
.mera-requirements-v3 + .mera-solution-v3,
.mera-solution-v3 + .mera-project-gallery,
.mera-project-gallery + .mera-result-v2 {
  margin-top: clamp(18px, 2vw, 34px) !important;
}



/* Адаптив */
@media (max-width: 1024px) {
  .mera-requirements-v3.mera-req-band .mera-requirements-v3__inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .mera-requirements-v3.mera-req-band .mera-section-title {
    max-width: 720px !important;
  }
}

@media (max-width: 767px) {
  .mera-request-v3,
  .mera-solution-v3,
  .mera-requirements-v3.mera-req-band {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mera-requirements-v3.mera-req-band .mera-requirement-v3 {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 18px !important;
  }
}

.mera-requirements-v3.mera-req-band .mera-section-title {
    color: var(--mera-accent);
    font-family: var(--mera-font);
    font-size: 12px !important;
    line-height: 1.7 !important;
    font-weight: 650;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}
.mera-request-v3__quote p, .mera-solution-v3__title {
    font-size: clamp(21px, 1.35vw, 27px) !important;
    line-height: 1.3 !important;
}

.mera-requirements-v3.mera-req-band .mera-requirements-v3__inner {
    grid-template-columns: minmax(170px, .26fr) minmax(0, 1fr) !important;
    gap: clamp(42px, 5vw, 84px) !important;
}
.mera-solution-v3__inner {
    grid-template-columns: minmax(240px, .26fr) minmax(0, 1fr) !important;
}
/* =========================================================
   MERA — Project Gallery
   Shortcode: [mera_project_gallery]
========================================================= */

.mera-project-gallery {
  position: relative !important;
  padding: clamp(76px, 10vw, 122px) clamp(24px, 5.4vw, 92px) 0 !important;
  background: transparent !important;
  color: var(--mera-soft) !important;
}

.mera-project-gallery__inner {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
}

.mera-project-gallery__head {
  max-width: 760px !important;
  margin: 0 auto clamp(34px, 4vw, 54px) !important;
  text-align: center !important;
}

.mera-project-gallery__head .mera-section-kicker {
  margin-bottom: 18px !important;
}

.mera-project-gallery__head .mera-section-subtitle {
  display: block !important;
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  color: rgba(244,244,242,.58) !important;
  text-align: center !important;
}

.mera-project-gallery__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.mera-project-gallery__main,
.mera-project-gallery__thumb {
  position: relative !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 22px 58px rgba(0,0,0,.28) !important;
}

.mera-project-gallery__main::before,
.mera-project-gallery__thumb::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(186,255,54,.10), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22)) !important;
}

.mera-project-gallery__main::after,
.mera-project-gallery__thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

.mera-project-gallery img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.001) !important;
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s cubic-bezier(.2,.7,.2,1) !important;
}

.mera-project-gallery__main {
  min-height: clamp(420px, 48vw, 690px) !important;
}

.mera-project-gallery__thumbs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.mera-project-gallery__thumb {
  min-height: 210px !important;
}

.mera-project-gallery__main:hover img,
.mera-project-gallery__thumb:hover img {
  transform: scale(1.035) !important;
  filter: brightness(1.04) contrast(1.04) !important;
}

.mera-project-gallery figcaption {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 4 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-family: var(--mera-font) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}

/* Связка с соседними блоками */
.mera-solution-v3 + .mera-project-gallery,
.mera-project-gallery + .mera-result-v2 {
  margin-top: clamp(18px, 2vw, 34px) !important;
}

/* В блоке результата оставляем только "Что получил клиент" */
.mera-result-v2 .mera-result-v2__head .mera-section-kicker,
.mera-result-v2 .mera-section-subtitle {
  display: none !important;
}

.mera-result-v2 .mera-result-v2__head {
  max-width: 780px !important;
  margin: 0 auto 44px !important;
  text-align: center !important;
}

/* Адаптив */
@media (max-width: 1024px) {
  .mera-project-gallery__grid {
    grid-template-columns: 1fr !important;
  }

  .mera-project-gallery__thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .mera-project-gallery__thumb {
    min-height: 160px !important;
  }
}

@media (max-width: 767px) {
  .mera-project-gallery {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mera-project-gallery__main {
    min-height: 360px !important;
  }

  .mera-project-gallery__thumbs {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .mera-project-gallery__thumb {
    min-height: 145px !important;
  }

  .mera-project-gallery__grid {
    gap: 12px !important;
  }
}
/* =========================================================
   MERA — Project Gallery + Lightbox
   Shortcode: [mera_project_gallery]
========================================================= */

.mera-project-gallery {
  position: relative !important;
  padding: clamp(76px, 10vw, 122px) clamp(24px, 5.4vw, 92px) 0 !important;
  background: transparent !important;
  color: var(--mera-soft) !important;
}

.mera-project-gallery__inner {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
}

.mera-project-gallery__head {
  max-width: 760px !important;
  margin: 0 auto clamp(34px, 4vw, 54px) !important;
  text-align: center !important;
}

.mera-project-gallery__head .mera-section-kicker {
  margin-bottom: 18px !important;
}

.mera-project-gallery__head .mera-section-subtitle {
  display: block !important;
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  color: rgba(244,244,242,.58) !important;
  text-align: center !important;
}

.mera-project-gallery__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.mera-project-gallery__main,
.mera-project-gallery__thumb {
  position: relative !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 22px 58px rgba(0,0,0,.28) !important;
}

.mera-project-gallery__main::before,
.mera-project-gallery__thumb::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(186,255,54,.10), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22)) !important;
}

.mera-project-gallery__main::after,
.mera-project-gallery__thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

.mera-gallery-lightbox {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
  cursor: zoom-in !important;
}

.mera-project-gallery img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.001) !important;
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s cubic-bezier(.2,.7,.2,1) !important;
}

.mera-project-gallery__main {
  min-height: clamp(420px, 48vw, 690px) !important;
}

.mera-project-gallery__thumbs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.mera-project-gallery__thumb {
  min-height: 210px !important;
}

.mera-project-gallery__main:hover img,
.mera-project-gallery__thumb:hover img {
  transform: scale(1.035) !important;
  filter: brightness(1.04) contrast(1.04) !important;
}

.mera-gallery-zoom {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  z-index: 5 !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--mera-accent) !important;
  border-radius: 50% !important;
  background: rgba(4,6,9,.54) !important;
  border: 1px solid rgba(186,255,54,.38) !important;
  box-shadow: 0 0 24px rgba(186,255,54,.11) !important;
  backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  transform: translateY(-6px) scale(.94) !important;
  transition:
    opacity .34s ease,
    transform .34s ease !important;
}

.mera-gallery-zoom svg {
  width: 20px !important;
  height: 20px !important;
}

.mera-gallery-lightbox:hover .mera-gallery-zoom {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.mera-project-gallery figcaption {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 4 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-family: var(--mera-font) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}

/* Lightbox overlay */
.mera-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  padding: clamp(18px, 3vw, 42px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(186,255,54,.045), transparent 36%),
    rgba(1,2,4,.92) !important;
  backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity .28s ease,
    visibility .28s ease !important;
}

.mera-lightbox.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mera-lightbox__stage {
  position: relative !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.mera-lightbox__image {
  display: block !important;
  max-width: min(100%, 1480px) !important;
  max-height: calc(100vh - 150px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.10) !important;
  opacity: 0 !important;
  transform: scale(.985) !important;
  transition:
    opacity .24s ease,
    transform .24s ease !important;
}

.mera-lightbox.is-loaded .mera-lightbox__image {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.mera-lightbox__caption {
  min-height: 24px !important;
  max-width: 980px !important;
  margin: 18px auto 0 !important;
  color: rgba(244,244,242,.72) !important;
  font-family: var(--mera-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.mera-lightbox__close,
.mera-lightbox__prev,
.mera-lightbox__next {
  position: absolute !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  color: #fff !important;
  background: rgba(14,16,20,.62) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(14px) !important;
  cursor: pointer !important;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s ease !important;
}

.mera-lightbox__close:hover,
.mera-lightbox__prev:hover,
.mera-lightbox__next:hover {
  color: var(--mera-accent) !important;
  border-color: rgba(186,255,54,.56) !important;
  background: rgba(20,24,22,.74) !important;
  transform: translateY(-1px) !important;
}

.mera-lightbox__close {
  top: clamp(16px, 2vw, 28px) !important;
  right: clamp(16px, 2vw, 28px) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.mera-lightbox__prev,
.mera-lightbox__next {
  top: 50% !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
}

.mera-lightbox__prev {
  left: clamp(16px, 2vw, 28px) !important;
}

.mera-lightbox__next {
  right: clamp(16px, 2vw, 28px) !important;
}

.mera-lightbox__close svg,
.mera-lightbox__prev svg,
.mera-lightbox__next svg {
  width: 22px !important;
  height: 22px !important;
}

html.mera-lightbox-lock,
body.mera-lightbox-lock {
  overflow: hidden !important;
}

/* Связка с соседними блоками */
.mera-solution-v3 + .mera-project-gallery,
.mera-project-gallery + .mera-result-v2 {
  margin-top: clamp(18px, 2vw, 34px) !important;
}

/* В блоке результата оставляем только "Что получил клиент" */
.mera-result-v2 .mera-result-v2__head .mera-section-kicker,
.mera-result-v2 .mera-section-subtitle {
  display: none !important;
}

.mera-result-v2 .mera-result-v2__head {
  max-width: 780px !important;
  margin: 0 auto 44px !important;
  text-align: center !important;
}

/* Адаптив */
@media (max-width: 1024px) {
  .mera-project-gallery__grid {
    grid-template-columns: 1fr !important;
  }

  .mera-project-gallery__thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .mera-project-gallery__thumb {
    min-height: 160px !important;
  }
}

@media (max-width: 767px) {
  .mera-project-gallery {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mera-project-gallery__main {
    min-height: 360px !important;
  }

  .mera-project-gallery__thumbs {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .mera-project-gallery__thumb {
    min-height: 145px !important;
  }

  .mera-project-gallery__grid {
    gap: 12px !important;
  }

  .mera-gallery-zoom {
    opacity: 1 !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
    right: 12px !important;
    top: 12px !important;
  }

  .mera-lightbox {
    padding: 14px !important;
  }

  .mera-lightbox__image {
    max-height: calc(100vh - 124px) !important;
    border-radius: 10px !important;
  }

  .mera-lightbox__close {
    width: 44px !important;
    height: 44px !important;
  }

  .mera-lightbox__prev,
  .mera-lightbox__next {
    width: 46px !important;
    height: 46px !important;
    top: auto !important;
    bottom: 24px !important;
  }

  .mera-lightbox__prev {
    left: 18px !important;
  }

  .mera-lightbox__next {
    right: 18px !important;
  }
}
/* =========================================================
   MERA — Heating Key Button
   Shortcode: [mera_heat_key]
========================================================= */

.mera-heat-key {
  --heat-green: #baff36;
  --heat-green-soft: rgba(186, 255, 54, .48);
  --heat-orange: #ff7a18;
  --heat-orange-soft: rgba(255, 122, 24, .72);

  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 238px !important;
  min-height: 74px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #f7f7f2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  perspective: 800px !important;
}

.mera-heat-key::before {
  content: "" !important;
  position: absolute !important;
  inset: 9px 11px -7px !important;
  z-index: -2 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(186,255,54,.28), transparent 52%),
    linear-gradient(180deg, rgba(24,30,22,.9), rgba(4,6,9,.96)) !important;
  filter: blur(5px) !important;
  opacity: .95 !important;
  transform: translateY(8px) scale(.96) !important;
  transition:
    background .28s ease,
    opacity .28s ease,
    transform .28s ease,
    filter .28s ease !important;
}

.mera-heat-key::after {
  content: "" !important;
  position: absolute !important;
  inset: -28px -36px !important;
  z-index: -3 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle, rgba(186,255,54,.22), transparent 56%) !important;
  opacity: .7 !important;
  filter: blur(18px) !important;
  transform: scale(.88) !important;
  transition:
    background .28s ease,
    opacity .28s ease,
    transform .28s ease !important;
  animation: mera-heat-key-breathe 2.8s ease-in-out infinite !important;
}

.mera-heat-key__surface {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 0 28px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 38%, rgba(0,0,0,.25)),
    linear-gradient(180deg, #151a18 0%, #090d0b 100%) !important;
  border: 1px solid rgba(186,255,54,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -12px 24px rgba(0,0,0,.34),
    0 0 0 1px rgba(186,255,54,.08),
    0 12px 0 rgba(0,0,0,.48),
    0 22px 48px rgba(0,0,0,.42),
    0 0 42px rgba(186,255,54,.16) !important;
  transform: translateY(0) rotateX(0deg) !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
}

.mera-heat-key__surface::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent),
    radial-gradient(circle at 22% 12%, rgba(186,255,54,.20), transparent 32%) !important;
  opacity: .56 !important;
  transform: translateX(-38%) !important;
  transition:
    opacity .25s ease,
    transform .55s ease,
    background .25s ease !important;
}

.mera-heat-key__surface::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 9px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(186,255,54,.9), transparent) !important;
  box-shadow: 0 0 18px rgba(186,255,54,.36) !important;
  opacity: .85 !important;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    opacity .22s ease !important;
}

.mera-heat-key__text {
  position: relative !important;
  z-index: 3 !important;
  color: #f7f7f2 !important;
  font-family: var(--mera-font, inherit) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 16px rgba(186,255,54,.24),
    0 1px 0 rgba(0,0,0,.6) !important;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .18s ease !important;
}

.mera-heat-key__glow {
  position: absolute !important;
  inset: 11px !important;
  z-index: -1 !important;
  border-radius: 22px !important;
  background: rgba(186,255,54,.18) !important;
  filter: blur(26px) !important;
  opacity: .85 !important;
  transition:
    background .24s ease,
    opacity .24s ease,
    filter .24s ease !important;
}

.mera-heat-key:hover .mera-heat-key__surface {
  border-color: rgba(186,255,54,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -12px 24px rgba(0,0,0,.32),
    0 0 0 1px rgba(186,255,54,.14),
    0 12px 0 rgba(0,0,0,.48),
    0 24px 54px rgba(0,0,0,.44),
    0 0 58px rgba(186,255,54,.25) !important;
}

.mera-heat-key:hover .mera-heat-key__surface::before {
  opacity: .86 !important;
  transform: translateX(32%) !important;
}

.mera-heat-key:active .mera-heat-key__surface,
.mera-heat-key.is-heating-on .mera-heat-key__surface {
  transform: translateY(8px) rotateX(4deg) !important;
  border-color: rgba(255,122,24,.9) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 38%, rgba(0,0,0,.30)),
    linear-gradient(180deg, #24150d 0%, #090604 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -10px 22px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,122,24,.22),
    0 4px 0 rgba(0,0,0,.55),
    0 12px 36px rgba(0,0,0,.46),
    0 0 72px rgba(255,122,24,.52) !important;
}

.mera-heat-key:active::after,
.mera-heat-key.is-heating-on::after {
  background: radial-gradient(circle, rgba(255,122,24,.52), transparent 58%) !important;
  opacity: 1 !important;
  transform: scale(1.04) !important;
  animation: mera-heat-key-orange-pulse .72s ease-out 1 !important;
}

.mera-heat-key:active::before,
.mera-heat-key.is-heating-on::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,122,24,.46), transparent 54%),
    linear-gradient(180deg, rgba(34,18,8,.94), rgba(4,6,9,.98)) !important;
  transform: translateY(4px) scale(.96) !important;
}

.mera-heat-key:active .mera-heat-key__surface::after,
.mera-heat-key.is-heating-on .mera-heat-key__surface::after {
  background: linear-gradient(90deg, transparent, rgba(255,122,24,1), transparent) !important;
  box-shadow: 0 0 24px rgba(255,122,24,.72) !important;
}

.mera-heat-key:active .mera-heat-key__text,
.mera-heat-key.is-heating-on .mera-heat-key__text {
  color: #fff8ef !important;
  text-shadow:
    0 0 18px rgba(255,122,24,.62),
    0 1px 0 rgba(0,0,0,.7) !important;
  transform: translateY(1px) !important;
}

.mera-heat-key:active .mera-heat-key__glow,
.mera-heat-key.is-heating-on .mera-heat-key__glow {
  background: rgba(255,122,24,.48) !important;
  filter: blur(34px) !important;
  opacity: 1 !important;
}

@keyframes mera-heat-key-breathe {
  0%, 100% {
    opacity: .48;
    transform: scale(.86);
  }

  50% {
    opacity: .82;
    transform: scale(.98);
  }
}

@keyframes mera-heat-key-orange-pulse {
  0% {
    transform: scale(.88);
    opacity: .45;
  }

  45% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(1.02);
    opacity: .82;
  }
}

@media (max-width: 767px) {
  .mera-heat-key {
    min-width: 218px !important;
    min-height: 66px !important;
  }

  .mera-heat-key__surface {
    min-height: 66px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
  }

  .mera-heat-key__text {
    font-size: 12px !important;
    letter-spacing: .075em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mera-heat-key,
  .mera-heat-key *,
  .mera-heat-key::before,
  .mera-heat-key::after {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   MERA — Heating Switch Key v2
   Shortcode: [mera_heat_switch]
========================================================= */

.mera-heat-switch {
  --mera-switch-green: #baff36;
  --mera-switch-green-rgb: 186, 255, 54;
  --mera-switch-orange: #ff7a18;
  --mera-switch-orange-rgb: 255, 122, 24;
  --mera-switch-active-rgb: var(--mera-switch-green-rgb);
  --mx: 50%;
  --my: 35%;

  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  width: min(100%, 330px) !important;
  min-width: 260px !important;
  height: 132px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #f6f7f2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  perspective: 900px !important;
}

/* Большое мягкое свечение вокруг клавиши */
.mera-heat-switch__aura {
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  z-index: -4 !important;
  width: 280px !important;
  height: 220px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(var(--mera-switch-active-rgb), .22),
      rgba(var(--mera-switch-active-rgb), .07) 30%,
      transparent 64%
    ) !important;
  filter: blur(22px) !important;
  opacity: .72 !important;
  transform: translate(-50%, -50%) scale(.95) !important;
  animation: mera-switch-aura-breathe 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* Нижняя массивная база клавиши */
.mera-heat-switch__base {
  position: absolute !important;
  left: 50% !important;
  top: 46px !important;
  z-index: -2 !important;
  width: 228px !important;
  height: 94px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.42)),
    linear-gradient(180deg, #121416 0%, #030406 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -16px 28px rgba(0,0,0,.65),
    0 12px 0 rgba(0,0,0,.66),
    0 28px 54px rgba(0,0,0,.62),
    0 0 0 1px rgba(0,0,0,.84) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

/* Нижнее горизонтальное свечение, как в референсе */
.mera-heat-switch__base::after {
  content: "" !important;
  position: absolute !important;
  left: 26px !important;
  right: 26px !important;
  bottom: 11px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(var(--mera-switch-active-rgb), .95) !important;
  box-shadow:
    0 0 14px rgba(var(--mera-switch-active-rgb), .95),
    0 0 34px rgba(var(--mera-switch-active-rgb), .52),
    0 0 72px rgba(var(--mera-switch-active-rgb), .32) !important;
  opacity: .92 !important;
  filter: blur(.2px) !important;
}

/* Верхняя клавиша */
.mera-heat-switch__key {
  position: absolute !important;
  left: 50% !important;
  top: 28px !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 202px !important;
  min-height: 78px !important;
  padding: 0 24px !important;
  border-radius: 25px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.20), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 42%, rgba(0,0,0,.35)),
    linear-gradient(180deg, #37393b 0%, #17191b 54%, #08090b 100%) !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    inset 0 -16px 24px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 1px 0 rgba(255,255,255,.04),
    0 13px 0 rgba(0,0,0,.56),
    0 24px 38px rgba(0,0,0,.55) !important;
  transform: translateX(-50%) translateY(0) rotateX(0deg) !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

/* Внутренняя вдавленная площадка */
.mera-heat-switch__key::before {
  content: "" !important;
  position: absolute !important;
  inset: 16px 24px !important;
  z-index: 0 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    linear-gradient(180deg, #2d2f31, #17191b) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -12px 18px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.035) !important;
  pointer-events: none !important;
}

/* Светящийся контур. Становится ярче на hover */
.mera-heat-switch__key::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--mera-switch-active-rgb), .82),
      rgba(var(--mera-switch-active-rgb), .06) 34%,
      rgba(255,255,255,.05) 52%,
      rgba(var(--mera-switch-active-rgb), .72)
    ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: .16 !important;
  transition: opacity .22s ease, background .22s ease !important;
  pointer-events: none !important;
}

/* Двигающийся блик */
.mera-heat-switch__shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255,255,255,.28),
      rgba(255,255,255,.08) 16%,
      transparent 34%
    ),
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.12) 38%,
      transparent 58%
    ) !important;
  opacity: .38 !important;
  transform: translateX(-18%) !important;
  transition: opacity .22s ease, transform .52s ease !important;
}

/* Текст внутри клавиши */
.mera-heat-switch__text {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  max-width: 138px !important;
  color: rgba(246,247,242,.86) !important;
  font-family: var(--mera-font, inherit) !important;
  font-size: 12px !important;
  line-height: 1.16 !important;
  font-weight: 720 !important;
  letter-spacing: .09em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.8),
    0 0 14px rgba(var(--mera-switch-active-rgb), .18) !important;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .18s ease !important;
}

/* Маленькая точка под клавишей */
.mera-heat-switch__indicator {
  position: absolute !important;
  left: 50% !important;
  bottom: 2px !important;
  z-index: 5 !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(var(--mera-switch-active-rgb), 1) !important;
  box-shadow:
    0 0 8px rgba(var(--mera-switch-active-rgb), .95),
    0 0 24px rgba(var(--mera-switch-active-rgb), .72),
    0 0 54px rgba(var(--mera-switch-active-rgb), .44) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

/* Hover-состояние */
.mera-heat-switch:hover .mera-heat-switch__aura {
  opacity: .95 !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
}

.mera-heat-switch:hover .mera-heat-switch__key {
  border-color: rgba(var(--mera-switch-active-rgb), .32) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.24),
    inset 0 -16px 24px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 1px 0 rgba(255,255,255,.045),
    0 13px 0 rgba(0,0,0,.56),
    0 24px 44px rgba(0,0,0,.58),
    0 0 34px rgba(var(--mera-switch-active-rgb), .18) !important;
}

.mera-heat-switch:hover .mera-heat-switch__key::after {
  opacity: .78 !important;
}

.mera-heat-switch:hover .mera-heat-switch__shine {
  opacity: .62 !important;
  transform: translateX(12%) !important;
}

.mera-heat-switch:hover .mera-heat-switch__text {
  color: #ffffff !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 0 16px rgba(var(--mera-switch-active-rgb), .34) !important;
}

/* Click / active: ярко-оранжевое прожатие */
.mera-heat-switch:active,
.mera-heat-switch.is-heat-pressed {
  --mera-switch-active-rgb: var(--mera-switch-orange-rgb);
}

.mera-heat-switch:active .mera-heat-switch__key,
.mera-heat-switch.is-heat-pressed .mera-heat-switch__key {
  transform: translateX(-50%) translateY(9px) rotateX(6deg) !important;
  border-color: rgba(255,122,24,.72) !important;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,189,94,.22), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 42%, rgba(0,0,0,.38)),
    linear-gradient(180deg, #3d322b 0%, #1d130d 54%, #090604 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -12px 20px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,122,24,.06),
    0 1px 0 rgba(255,255,255,.025),
    0 4px 0 rgba(0,0,0,.62),
    0 14px 34px rgba(0,0,0,.58),
    0 0 58px rgba(255,122,24,.42) !important;
}

.mera-heat-switch:active .mera-heat-switch__key::after,
.mera-heat-switch.is-heat-pressed .mera-heat-switch__key::after {
  opacity: .95 !important;
}

.mera-heat-switch:active .mera-heat-switch__text,
.mera-heat-switch.is-heat-pressed .mera-heat-switch__text {
  color: #fff7ec !important;
  transform: translateY(1px) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 0 20px rgba(255,122,24,.72) !important;
}

.mera-heat-switch:active .mera-heat-switch__indicator,
.mera-heat-switch.is-heat-pressed .mera-heat-switch__indicator {
  width: 9px !important;
  height: 9px !important;
}

.mera-heat-switch.is-heat-pressed .mera-heat-switch__aura {
  animation: mera-switch-orange-pop .9s ease-out 1 !important;
}

/* Анимации */
@keyframes mera-switch-aura-breathe {
  0%, 100% {
    opacity: .56;
    transform: translate(-50%, -50%) scale(.92);
  }

  50% {
    opacity: .88;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes mera-switch-orange-pop {
  0% {
    opacity: .55;
    transform: translate(-50%, -50%) scale(.88);
  }

  36% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16);
  }

  100% {
    opacity: .78;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* Модификатор: компактная версия */
.mera-heat-switch.is-small {
  transform: scale(.82) !important;
  transform-origin: center !important;
}

/* Мобильная адаптация */
@media (max-width: 767px) {
  .mera-heat-switch {
    width: 286px !important;
    min-width: 246px !important;
    height: 122px !important;
  }

  .mera-heat-switch__base {
    width: 216px !important;
    height: 88px !important;
  }

  .mera-heat-switch__key {
    width: 192px !important;
    min-height: 74px !important;
  }

  .mera-heat-switch__text {
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mera-heat-switch,
  .mera-heat-switch *,
  .mera-heat-switch::before,
  .mera-heat-switch::after {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   MERA — Heating Key FX
   Shortcode: [mera_heating_key_fx]
========================================================= */

.mera-keyfx {
  --key-green: 186, 255, 54;
  --key-orange: 255, 122, 24;
  --key-color: var(--key-green);
  --key-x: 50%;
  --key-y: 34%;

  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 240px !important;
  height: 188px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #f5f5f0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  appearance: none !important;
  perspective: 900px !important;
}

/* большой мягкий ореол за кнопкой */
.mera-keyfx__halo {
  position: absolute !important;
  left: 50% !important;
  top: 55% !important;
  z-index: -4 !important;
  width: 210px !important;
  height: 170px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(var(--key-color), .22),
      rgba(var(--key-color), .08) 34%,
      transparent 68%
    ) !important;
  filter: blur(22px) !important;
  opacity: .72 !important;
  transform: translate(-50%, -50%) scale(.94) !important;
  animation: mera-keyfx-breathe 3.1s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* нижняя тёмная база, без длинной полосы */
.mera-keyfx__shadow {
  position: absolute !important;
  left: 50% !important;
  top: 48px !important;
  z-index: -2 !important;
  width: 166px !important;
  height: 112px !important;
  border-radius: 32px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.48)),
    linear-gradient(180deg, #101214 0%, #030405 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -18px 30px rgba(0,0,0,.72),
    0 12px 0 rgba(0,0,0,.64),
    0 28px 54px rgba(0,0,0,.64),
    0 0 0 1px rgba(0,0,0,.88) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

/* локальный glow под нижней гранью, не длинный слайдер */
.mera-keyfx__shadow::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  width: 74px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(var(--key-color), .95) !important;
  box-shadow:
    0 0 12px rgba(var(--key-color), .95),
    0 0 30px rgba(var(--key-color), .55),
    0 0 70px rgba(var(--key-color), .32) !important;
  opacity: .9 !important;
  transform: translateX(-50%) !important;
  transition:
    background .2s ease,
    box-shadow .2s ease,
    width .2s ease !important;
}

/* сама клавиша */
.mera-keyfx__key {
  position: absolute !important;
  left: 50% !important;
  top: 28px !important;
  z-index: 3 !important;
  width: 150px !important;
  height: 126px !important;
  border-radius: 30px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--key-x) var(--key-y), rgba(255,255,255,.18), transparent 27%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 44%, rgba(0,0,0,.40)),
    linear-gradient(180deg, #3b3d3f 0%, #191b1d 55%, #08090a 100%) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -18px 26px rgba(0,0,0,.43),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 1px 0 rgba(255,255,255,.04),
    0 13px 0 rgba(0,0,0,.56),
    0 25px 42px rgba(0,0,0,.58) !important;
  transform: translateX(-50%) translateY(0) rotateX(0deg) !important;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

/* светящийся контур, как в референсе */
.mera-keyfx__key::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 4 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--key-color), .95),
      rgba(var(--key-color), .05) 35%,
      rgba(255,255,255,.05) 52%,
      rgba(var(--key-color), .86)
    ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: .18 !important;
  pointer-events: none !important;
  transition: opacity .22s ease, background .22s ease !important;
}

/* внутренняя вдавленная площадка */
.mera-keyfx__inner {
  position: absolute !important;
  inset: 22px 20px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--key-x) var(--key-y), rgba(255,255,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.015)),
    linear-gradient(180deg, #2e3032, #17191b) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.14),
    inset 0 -12px 18px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.035) !important;
}

/* двигающийся мягкий блик */
.mera-keyfx__shine {
  position: absolute !important;
  inset: -20% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at var(--key-x) var(--key-y),
      rgba(255,255,255,.34),
      rgba(255,255,255,.08) 16%,
      transparent 34%
    ),
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.13) 39%,
      transparent 58%
    ) !important;
  opacity: .34 !important;
  transform: translateX(-16%) !important;
  transition: opacity .22s ease, transform .5s ease !important;
}

.mera-keyfx__text {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  max-width: 92px !important;
  color: rgba(246,247,242,.88) !important;
  font-family: var(--mera-font, inherit) !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: .115em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.82),
    0 0 14px rgba(var(--key-color), .18) !important;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .16s ease !important;
}

/* маленькая светящаяся точка снизу */
.mera-keyfx__dot {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  z-index: 5 !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(var(--key-color), 1) !important;
  box-shadow:
    0 0 8px rgba(var(--key-color), .95),
    0 0 22px rgba(var(--key-color), .72),
    0 0 52px rgba(var(--key-color), .46) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  transition:
    width .2s ease,
    height .2s ease,
    background .2s ease,
    box-shadow .2s ease !important;
}

/* Hover */
.mera-keyfx:hover .mera-keyfx__halo {
  opacity: .95 !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
}

.mera-keyfx:hover .mera-keyfx__key {
  border-color: rgba(var(--key-color), .34) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -18px 26px rgba(0,0,0,.41),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 1px 0 rgba(255,255,255,.045),
    0 13px 0 rgba(0,0,0,.56),
    0 25px 46px rgba(0,0,0,.60),
    0 0 34px rgba(var(--key-color), .20) !important;
}

.mera-keyfx:hover .mera-keyfx__key::after {
  opacity: .86 !important;
}

.mera-keyfx:hover .mera-keyfx__shine {
  opacity: .60 !important;
  transform: translateX(12%) !important;
}

.mera-keyfx:hover .mera-keyfx__text {
  color: #fff !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.86),
    0 0 16px rgba(var(--key-color), .38) !important;
}

/* Active / click — оранжевое прожатие */
.mera-keyfx:active,
.mera-keyfx.is-keyfx-pressed {
  --key-color: var(--key-orange);
}

.mera-keyfx:active .mera-keyfx__key,
.mera-keyfx.is-keyfx-pressed .mera-keyfx__key {
  transform: translateX(-50%) translateY(8px) rotateX(5deg) !important;
  border-color: rgba(255,122,24,.74) !important;
  background:
    radial-gradient(circle at var(--key-x) var(--key-y), rgba(255,190,95,.24), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.03) 44%, rgba(0,0,0,.42)),
    linear-gradient(180deg, #3d322b 0%, #1c130d 55%, #090604 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -12px 20px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,122,24,.06),
    0 1px 0 rgba(255,255,255,.025),
    0 5px 0 rgba(0,0,0,.62),
    0 15px 34px rgba(0,0,0,.60),
    0 0 58px rgba(255,122,24,.42) !important;
}

.mera-keyfx:active .mera-keyfx__shadow::after,
.mera-keyfx.is-keyfx-pressed .mera-keyfx__shadow::after {
  width: 92px !important;
}

.mera-keyfx:active .mera-keyfx__dot,
.mera-keyfx.is-keyfx-pressed .mera-keyfx__dot {
  width: 9px !important;
  height: 9px !important;
}

.mera-keyfx:active .mera-keyfx__text,
.mera-keyfx.is-keyfx-pressed .mera-keyfx__text {
  color: #fff7ed !important;
  transform: translateY(1px) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.86),
    0 0 20px rgba(255,122,24,.78) !important;
}

.mera-keyfx.is-keyfx-pressed .mera-keyfx__halo {
  animation: mera-keyfx-orange-pop .82s ease-out 1 !important;
}

@keyframes mera-keyfx-breathe {
  0%, 100% {
    opacity: .56;
    transform: translate(-50%, -50%) scale(.92);
  }

  50% {
    opacity: .86;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes mera-keyfx-orange-pop {
  0% {
    opacity: .56;
    transform: translate(-50%, -50%) scale(.88);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16);
  }

  100% {
    opacity: .78;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@media (max-width: 767px) {
  .mera-keyfx {
    width: 220px !important;
    height: 176px !important;
  }

  .mera-keyfx__key {
    width: 146px !important;
    height: 122px !important;
  }

  .mera-keyfx__text {
    font-size: 12px !important;
    max-width: 88px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mera-keyfx,
  .mera-keyfx *,
  .mera-keyfx::before,
  .mera-keyfx::after {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   MERA — Source-like Heating Key
   Shortcode: [mera_heat_source_key]
========================================================= */

.mera-src-key {
  --src-green: 186, 255, 54;
  --src-orange: 255, 122, 24;
  --src-color: var(--src-green);

  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 260px !important;
  height: 260px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #f5f6f0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

/* Тёмная подложка как в исходнике */
.mera-src-key__bg {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: -4 !important;
  width: 236px !important;
  height: 236px !important;
  border-radius: 42px !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.05), transparent 34%),
    linear-gradient(180deg, #171817 0%, #050606 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -32px 48px rgba(0,0,0,.72),
    0 24px 60px rgba(0,0,0,.68),
    0 0 0 1px rgba(0,0,0,.95) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
}

/* Два блика на фоне */
.mera-src-key__shine {
  position: absolute !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  filter: blur(18px) !important;
  opacity: .32 !important;
}

.mera-src-key__shine--1 {
  width: 180px !important;
  height: 70px !important;
  left: -20px !important;
  top: 18px !important;
  background: rgba(255,255,255,.18) !important;
  transform: rotate(-18deg) !important;
}

.mera-src-key__shine--2 {
  width: 150px !important;
  height: 90px !important;
  right: -34px !important;
  bottom: -4px !important;
  background: rgba(var(--src-color), .20) !important;
  transform: rotate(22deg) !important;
}

/* Пульсирующий glow вокруг всей клавиши */
.mera-src-key__bg-glow {
  position: absolute !important;
  left: 50% !important;
  top: 53% !important;
  z-index: -5 !important;
  width: 245px !important;
  height: 245px !important;
  border-radius: 46px !important;
  background:
    radial-gradient(circle at 50% 68%,
      rgba(var(--src-color), .36) 0%,
      rgba(var(--src-color), .18) 24%,
      rgba(var(--src-color), .07) 44%,
      transparent 70%
    ) !important;
  filter: blur(20px) !important;
  opacity: .72 !important;
  transform: translate(-50%, -50%) scale(.92) !important;
  animation: mera-src-glow-pulse 2.35s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* Лёгкий шум, как в исходнике */
.mera-src-key__noise {
  position: absolute !important;
  inset: -18px !important;
  z-index: -3 !important;
  opacity: .08 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 1px, transparent 1px) !important;
  background-size: 5px 5px, 7px 7px !important;
}

/* Основная клавиша */
.mera-src-key__button {
  position: relative !important;
  z-index: 3 !important;
  width: 168px !important;
  height: 168px !important;
  border-radius: 34px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.035) 40%, rgba(0,0,0,.42)),
    linear-gradient(180deg, #3a3c3c 0%, #181a1b 54%, #060707 100%) !important;
  border: 1px solid rgba(var(--src-color), .42) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.22),
    inset 0 -28px 36px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 2px 0 rgba(255,255,255,.035),
    0 14px 0 rgba(0,0,0,.58),
    0 30px 42px rgba(0,0,0,.62),
    0 0 26px rgba(var(--src-color), .22) !important;
  transform: translateY(0) scale(1) !important;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
  overflow: hidden !important;
}

/* Светящийся контур */
.mera-src-key__button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--src-color), .50),
    inset 0 0 18px rgba(var(--src-color), .16),
    0 0 20px rgba(var(--src-color), .26) !important;
  opacity: .72 !important;
  pointer-events: none !important;
  animation: mera-src-border-pulse 2.35s ease-in-out infinite !important;
}

/* Глянцевый угол */
.mera-src-key__corner {
  position: absolute !important;
  z-index: 2 !important;
  right: -18px !important;
  bottom: -22px !important;
  width: 108px !important;
  height: 108px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.12), rgba(0,0,0,.62) 62%, transparent 72%) !important;
  filter: blur(.2px) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}

/* Внутренняя вдавленная площадка */
.mera-src-key__inner {
  position: relative !important;
  z-index: 5 !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 26px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.20), transparent 38%),
    linear-gradient(180deg, #323434 0%, #202222 58%, #141515 100%) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.14),
    inset 0 -18px 24px rgba(0,0,0,.38),
    0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden !important;
}

/* Блик внутри */
.mera-src-key__inner::before {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  z-index: 1 !important;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255,255,255,.16) 44%, transparent 62%) !important;
  opacity: .42 !important;
  transform: translateX(-46%) rotate(8deg) !important;
  animation: mera-src-inner-shine 3.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* Текст вместо bluetooth-иконки */
.mera-src-key__text {
  position: relative !important;
  z-index: 4 !important;
  max-width: 92px !important;
  color: rgba(247,247,242,.94) !important;
  font-family: var(--mera-font, inherit) !important;
  font-size: 13px !important;
  line-height: 1.13 !important;
  font-weight: 780 !important;
  letter-spacing: .12em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.78),
    0 0 14px rgba(var(--src-color), .18) !important;
  transition:
    color .2s ease,
    text-shadow .2s ease,
    transform .16s ease !important;
}

/* LED */
.mera-src-key__led {
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  z-index: 8 !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: rgb(var(--src-color)) !important;
  box-shadow:
    0 0 8px rgba(var(--src-color), .95),
    0 0 22px rgba(var(--src-color), .82),
    0 0 52px rgba(var(--src-color), .58),
    0 0 88px rgba(var(--src-color), .32) !important;
  transform: translateX(-50%) !important;
  animation: mera-src-led-pulse 1.55s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* Hover */
.mera-src-key:hover .mera-src-key__button {
  border-color: rgba(var(--src-color), .72) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.24),
    inset 0 -28px 36px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 2px 0 rgba(255,255,255,.04),
    0 14px 0 rgba(0,0,0,.58),
    0 30px 46px rgba(0,0,0,.66),
    0 0 42px rgba(var(--src-color), .38) !important;
}

.mera-src-key:hover .mera-src-key__bg-glow {
  opacity: 1 !important;
  filter: blur(24px) !important;
}

.mera-src-key:hover .mera-src-key__text {
  color: #fff !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.80),
    0 0 18px rgba(var(--src-color), .45) !important;
}

/* Нажатие — оранжевый импульс */
.mera-src-key:active,
.mera-src-key.is-src-key-pressed {
  --src-color: var(--src-orange);
}

.mera-src-key:active .mera-src-key__button,
.mera-src-key.is-src-key-pressed .mera-src-key__button {
  transform: translateY(10px) scale(.985) !important;
  border-color: rgba(255,122,24,.9) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,190,95,.28), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.035) 40%, rgba(0,0,0,.44)),
    linear-gradient(180deg, #43352c 0%, #1d130d 54%, #080504 100%) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.18),
    inset 0 -20px 28px rgba(0,0,0,.54),
    inset 0 0 0 1px rgba(255,122,24,.08),
    0 2px 0 rgba(255,255,255,.025),
    0 5px 0 rgba(0,0,0,.62),
    0 18px 34px rgba(0,0,0,.64),
    0 0 68px rgba(255,122,24,.58) !important;
}

.mera-src-key:active .mera-src-key__bg-glow,
.mera-src-key.is-src-key-pressed .mera-src-key__bg-glow {
  animation: mera-src-orange-burst .82s ease-out 1 !important;
}

.mera-src-key:active .mera-src-key__led,
.mera-src-key.is-src-key-pressed .mera-src-key__led {
  width: 17px !important;
  height: 17px !important;
}

.mera-src-key:active .mera-src-key__text,
.mera-src-key.is-src-key-pressed .mera-src-key__text {
  color: #fff7ed !important;
  transform: translateY(1px) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.82),
    0 0 20px rgba(255,122,24,.75) !important;
}

/* Анимации */
@keyframes mera-src-glow-pulse {
  0%, 100% {
    opacity: .50;
    transform: translate(-50%, -50%) scale(.88);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  70% {
    opacity: .72;
    transform: translate(-50%, -50%) scale(.98);
  }
}

@keyframes mera-src-border-pulse {
  0%, 100% {
    opacity: .44;
    box-shadow:
      inset 0 0 0 1px rgba(var(--src-color), .36),
      inset 0 0 14px rgba(var(--src-color), .12),
      0 0 14px rgba(var(--src-color), .18);
  }

  50% {
    opacity: 1;
    box-shadow:
      inset 0 0 0 1px rgba(var(--src-color), .78),
      inset 0 0 20px rgba(var(--src-color), .22),
      0 0 36px rgba(var(--src-color), .40);
  }
}

@keyframes mera-src-led-pulse {
  0%, 100% {
    opacity: .78;
    transform: translateX(-50%) scale(.88);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}

@keyframes mera-src-inner-shine {
  0%, 100% {
    opacity: .22;
    transform: translateX(-58%) rotate(8deg);
  }

  52% {
    opacity: .52;
    transform: translateX(34%) rotate(8deg);
  }
}

@keyframes mera-src-orange-burst {
  0% {
    opacity: .42;
    transform: translate(-50%, -50%) scale(.86);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.22);
  }

  100% {
    opacity: .74;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@media (max-width: 767px) {
  .mera-src-key {
    width: 236px !important;
    height: 236px !important;
  }

  .mera-src-key__bg {
    width: 218px !important;
    height: 218px !important;
  }

  .mera-src-key__button {
    width: 156px !important;
    height: 156px !important;
  }

  .mera-src-key__inner {
    width: 104px !important;
    height: 104px !important;
  }

  .mera-src-key__text {
    font-size: 12px !important;
  }
}
/* =========================================================
   MERA — Source-like Heating Key FIX
   Пульсирующий glow как в исходнике
   Shortcode: [mera_heat_source_key]
========================================================= */

.mera-src-key {
  --src-green: 186, 255, 54;
  --src-orange: 255, 122, 24;
  --src-color: var(--src-green);

  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 260px !important;
  height: 260px !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f5f6f0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;

  --radius: 30px;
  --bg: #2c3238;
}

/* внешняя мягкая мутная подложка */
.mera-src-key::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  width: 350px !important;
  height: 300px !important;
  border-radius: 50px !important;
  background-color: rgba(255,255,255,.05) !important;
  filter: blur(60px) !important;
  transform: skewY(-20deg) !important;
  pointer-events: none !important;
}

/* нижняя чёрная тень, как wrap:after */
.mera-src-key::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50px !important;
  background-color: rgba(0,0,0,.50) !important;
  filter: blur(30px) !important;
  pointer-events: none !important;
}

/* большая тёмная база */
.mera-src-key__bg {
  position: absolute !important;
  z-index: 2 !important;
  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: calc(var(--radius) * 1.25) !important;
  background-color: #000 !important;
  overflow: hidden !important;

  box-shadow:
    0 20px 10px -10px rgba(0,0,0,.30),
    inset 0 -2px 0 -1px rgba(var(--src-color), .32),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;

  transition: all .3s ease !important;
  pointer-events: none !important;
}

/* важный слой: контур/внутренняя подсветка базы */
.mera-src-key__bg::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 -2px 0 -1px rgba(var(--src-color), .46),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;
  pointer-events: none !important;
}

/* ПУЛЬС 1: маленькая точка снизу превращается в мягкое пятно */
.mera-src-key__shine--1 {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;

  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgb(var(--src-color)) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-source-bg-pulse 2.4s linear .3s infinite !important;
  transition: all .3s ease !important;
}

/* ПУЛЬС 2: второй слой с другим таймингом */
.mera-src-key__shine--2 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 1 !important;
  transition: all .5s linear !important;
}

.mera-src-key__shine--2::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;

  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgb(var(--src-color)) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-source-bg-pulse 2.4s linear infinite !important;
}

/* ПУЛЬС 3: большая волна свечения вокруг кнопки */
.mera-src-key__bg-glow {
  position: absolute !important;
  z-index: 4 !important;
  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;
  border-radius: var(--radius) !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.mera-src-key__bg-glow::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 36px !important;

  background:
    linear-gradient(
      180deg,
      rgba(var(--src-color), .70),
      rgba(var(--src-color), .16) 38%,
      rgba(0,0,0,0) 78%
    ) !important;

  filter: blur(13px) !important;
  opacity: 0 !important;
  transform: translateY(18px) scale(.78) !important;

  animation: mera-source-bg-glow 3s linear infinite !important;
  pointer-events: none !important;
}

/* Основная кнопка */
.mera-src-key__button {
  position: relative !important;
  z-index: 6 !important;

  width: 154px !important;
  height: 150px !important;
  border-radius: var(--radius) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-color: var(--bg) !important;
  border: 0 !important;
  overflow: hidden !important;

  opacity: 1 !important;
  transform: scale(1.02) translateY(0) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.40),
    inset 0 -6px 1px -4px rgba(var(--src-color), .90),
    inset 0 -15px 6px -8px rgba(var(--src-color), .86),
    0 14px 0 rgba(0,0,0,.58),
    0 30px 42px rgba(0,0,0,.62) !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease !important;
}

/* тяжёлые внутренние грани через border-trick как в исходнике */
.mera-src-key__button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: calc(var(--radius) * .8) !important;
  filter: blur(6px) !important;

  border: 40px solid #2b2b2c !important;
  border-top: 50px solid #414244 !important;
  border-bottom: 50px solid #15161a !important;

  transition: all .5s ease !important;
  pointer-events: none !important;
}

/* светящийся общий контур */
.mera-src-key__button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  border-radius: inherit !important;

  box-shadow:
    inset 0 0 0 1px rgba(var(--src-color), .44),
    inset 0 -8px 18px rgba(var(--src-color), .18),
    0 0 18px rgba(var(--src-color), .20) !important;

  opacity: .78 !important;
  pointer-events: none !important;
  animation: mera-source-border-breathe 2.4s ease-in-out infinite !important;
}

/* угловые белые блики */
.mera-src-key__corner {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  opacity: .15 !important;
  transition: all .4s ease !important;
  pointer-events: none !important;
}

.mera-src-key__corner::before,
.mera-src-key__corner::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;

  border-top: 55px solid #fff !important;
  border-left: 15px solid transparent !important;
  border-right: 15px solid transparent !important;

  filter: blur(6px) !important;
}

.mera-src-key__corner::before {
  left: 8px !important;
  transform: rotate(-40deg) !important;
}

.mera-src-key__corner::after {
  right: 8px !important;
  transform: rotate(40deg) !important;
}

/* внутренняя площадка */
.mera-src-key__inner {
  position: absolute !important;
  z-index: 9 !important;

  top: 22px !important;
  right: 20px !important;
  bottom: 22px !important;
  left: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: calc(var(--radius) * .85) !important;

  background:
    linear-gradient(#232324 5%, #46484b) !important;

  box-shadow:
    inset 0 -5px 15px -1px rgba(0,0,0,.30),
    inset 0 -4px 3px -3px #000,
    inset 0 -10px 20px -8px rgba(255,255,255,.40),
    inset 0 1px 0 1px rgba(255,255,255,.20) !important;

  transition: all .3s ease !important;
  overflow: hidden !important;
}

/* тёмная нижняя дуга внутри */
.mera-src-key__inner::after {
  content: "" !important;
  position: absolute !important;
  right: -34px !important;
  bottom: -44px !important;
  width: 118px !important;
  height: 118px !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.10),
      rgba(0,0,0,.70) 55%,
      transparent 74%
    ) !important;

  opacity: .72 !important;
  pointer-events: none !important;
}

/* блик внутри площадки */
.mera-src-key__inner::before {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  z-index: 1 !important;

  background:
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(255,255,255,.18) 43%,
      transparent 60%
    ) !important;

  opacity: .34 !important;
  transform: translateX(-50%) rotate(8deg) !important;
  animation: mera-source-inner-shine 3.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* текст вместо bluetooth */
.mera-src-key__text {
  position: relative !important;
  z-index: 5 !important;

  max-width: 96px !important;
  color: rgba(247,247,242,.96) !important;

  font-family: var(--mera-font, inherit) !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  text-shadow:
    0 2px 0 rgba(0,0,0,.84),
    0 0 14px rgba(var(--src-color), .20) !important;

  transition:
    color .3s ease,
    text-shadow .3s ease,
    transform .3s ease !important;
}

/* LED как в исходнике, но зелёный */
.mera-src-key__led {
  position: absolute !important;
  z-index: 10 !important;

  left: 50% !important;
  top: calc(50% + 106px) !important;

  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;

  background-color: rgb(var(--src-color)) !important;

  transform: translateX(-50%) !important;

  box-shadow:
    0 -10px 35px 17px rgba(var(--src-color), .70),
    inset 0 1px 2px rgba(255,255,255,.60),
    0 0 0 3px rgba(0,0,0,.60),
    0 0 2px 4px rgba(var(--src-color), .70) !important;

  transition: all .3s ease !important;
  animation: mera-source-led-breathe 1.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* шум */
.mera-src-key__noise {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  opacity: .08 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0) !important;
  background-size: 7px 7px !important;

  mask-image: linear-gradient(transparent 5%, #fff 30%, #fff 70%, transparent 95%) !important;
}

/* hover */
.mera-src-key:hover .mera-src-key__button {
  transform: scale(1.045) translateY(-1px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.44),
    inset 0 -6px 1px -4px rgba(var(--src-color), 1),
    inset 0 -15px 9px -8px rgba(var(--src-color), 1),
    0 14px 0 rgba(0,0,0,.58),
    0 32px 48px rgba(0,0,0,.68),
    0 0 44px rgba(var(--src-color), .38) !important;
}

.mera-src-key:hover .mera-src-key__corner {
  opacity: .24 !important;
}

.mera-src-key:hover .mera-src-key__text {
  color: #fff !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.86),
    0 0 18px rgba(var(--src-color), .48) !important;
}

/* active / click: оранжевый */
.mera-src-key:active,
.mera-src-key.is-src-key-pressed {
  --src-color: var(--src-orange);
}

.mera-src-key:active .mera-src-key__button,
.mera-src-key.is-src-key-pressed .mera-src-key__button {
  transform: scale(.99) translateY(8px) !important;
  background-color: #332820 !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -5px 1px -4px rgba(255,122,24,1),
    inset 0 -15px 10px -8px rgba(255,122,24,1),
    0 5px 0 rgba(0,0,0,.64),
    0 16px 34px rgba(0,0,0,.66),
    0 0 72px rgba(255,122,24,.64) !important;
}

.mera-src-key:active .mera-src-key__button::before,
.mera-src-key.is-src-key-pressed .mera-src-key__button::before {
  border-top-color: #4a3b31 !important;
  border-bottom-color: #1b1009 !important;
  border-left-color: #2c211b !important;
  border-right-color: #2c211b !important;
}

.mera-src-key:active .mera-src-key__inner,
.mera-src-key.is-src-key-pressed .mera-src-key__inner {
  background:
    linear-gradient(#2a221d 5%, #564033) !important;
}

.mera-src-key:active .mera-src-key__bg-glow::before,
.mera-src-key.is-src-key-pressed .mera-src-key__bg-glow::before {
  animation: mera-source-orange-burst .85s ease-out 1 !important;
}

.mera-src-key:active .mera-src-key__text,
.mera-src-key.is-src-key-pressed .mera-src-key__text {
  color: #fff7ed !important;
  transform: translateY(1px) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.86),
    0 0 22px rgba(255,122,24,.84) !important;
}

/* =========================================================
   Keyframes — самое важное
========================================================= */

/* аналог исходного @keyframes bg */
@keyframes mera-source-bg-pulse {
  0% {
    transform: translateY(0) scale(0);
    opacity: .0;
  }

  14% {
    opacity: 1;
  }

  44% {
    transform: translateY(-32px) scale(9.5);
    opacity: .38;
  }

  72% {
    transform: translateY(-58px) scale(16);
    opacity: .08;
  }

  100% {
    transform: translateY(-72px) scale(22);
    opacity: 0;
  }
}

/* аналог исходного @keyframes bgGlow */
@keyframes mera-source-bg-glow {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.72);
  }

  18% {
    opacity: .80;
  }

  42% {
    opacity: .42;
    transform: translateY(0) scale(1.06);
  }

  72% {
    opacity: .16;
    transform: translateY(-6px) scale(1.22);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.36);
  }
}

@keyframes mera-source-border-breathe {
  0%, 100% {
    opacity: .48;
  }

  50% {
    opacity: .96;
  }
}

@keyframes mera-source-led-breathe {
  0%, 100% {
    opacity: .76;
    transform: translateX(-50%) scale(.86);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }
}

@keyframes mera-source-inner-shine {
  0%, 100% {
    opacity: .18;
    transform: translateX(-56%) rotate(8deg);
  }

  52% {
    opacity: .46;
    transform: translateX(34%) rotate(8deg);
  }
}

@keyframes mera-source-orange-burst {
  0% {
    opacity: .10;
    transform: translateY(22px) scale(.72);
  }

  28% {
    opacity: 1;
    transform: translateY(0) scale(1.18);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.42);
  }
}

/* адаптив */
@media (max-width: 767px) {
  .mera-src-key {
    width: 236px !important;
    height: 236px !important;
  }

  .mera-src-key__bg {
    top: 42px !important;
    right: 42px !important;
    bottom: 42px !important;
    left: 42px !important;
  }

  .mera-src-key__bg-glow {
    top: 42px !important;
    right: 42px !important;
    bottom: 42px !important;
    left: 42px !important;
  }

  .mera-src-key__button {
    width: 146px !important;
    height: 142px !important;
  }

  .mera-src-key__inner {
    top: 20px !important;
    right: 18px !important;
    bottom: 20px !important;
    left: 18px !important;
  }

  .mera-src-key__text {
    font-size: 12px !important;
  }

  .mera-src-key__led {
    top: calc(50% + 98px) !important;
  }
}

/* =========================================================
   MERA — Origin Heating Key
   Clean isolated version
   Shortcode: [mera_origin_key]
========================================================= */

.mera-origin-key {
  --ok-radius: 30px;
  --ok-bg: #2c3238;

  --ok-green: #baff36;
  --ok-green-rgb: 186, 255, 54;

  --ok-orange: #ff7a18;
  --ok-orange-rgb: 255, 122, 24;

  --ok-color: var(--ok-green);
  --ok-color-rgb: var(--ok-green-rgb);

  position: relative !important;
  isolation: isolate !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 260px !important;
  height: 260px !important;

  padding: 0 !important;
  margin: 0 !important;

  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* скрытый input */
.mera-origin-key__input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;

  width: 100% !important;
  height: 100% !important;

  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: all !important;
}

/* мягкое белое облако за клавишей */
.mera-origin-key::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  width: 350px !important;
  height: 300px !important;

  border-radius: 50px !important;
  background-color: rgba(255, 255, 255, .05) !important;
  filter: blur(60px) !important;
  transform: skewY(-20deg) !important;

  pointer-events: none !important;
}

/* общая тёмная тень */
.mera-origin-key::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  border-radius: 50px !important;
  background-color: rgba(0, 0, 0, .50) !important;
  filter: blur(30px) !important;

  pointer-events: none !important;
}

/* тёмная база */
.mera-origin-key__bg {
  position: absolute !important;
  z-index: 2 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: calc(var(--ok-radius) * 1.25) !important;
  background-color: #000 !important;

  overflow: hidden !important;
  pointer-events: none !important;

  box-shadow:
    0 20px 10px -10px rgba(0, 0, 0, .30),
    inset 0 -2px 0 -1px rgba(var(--ok-color-rgb), .42),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;

  transition: all .3s ease !important;
}

/* внутренний контур базы */
.mera-origin-key__bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;

  border-radius: inherit !important;

  box-shadow:
    inset 0 -2px 0 -1px rgba(var(--ok-color-rgb), .46),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;

  pointer-events: none !important;
}

/* главный пульс снизу — первый слой */
.mera-origin-key__shine-1 {
  position: absolute !important;
  z-index: 1 !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 10px !important;
  height: 10px !important;
  margin: auto !important;

  border-radius: 50% !important;
  background: var(--ok-color) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-origin-bg-pulse 2.4s linear .3s infinite !important;

  pointer-events: none !important;
}

/* главный пульс снизу — второй слой */
.mera-origin-key__shine-2 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  opacity: 1 !important;
  pointer-events: none !important;
}

.mera-origin-key__shine-2::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 10px !important;
  height: 10px !important;
  margin: auto !important;

  border-radius: 50% !important;
  background: var(--ok-color) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-origin-bg-pulse 2.4s linear infinite !important;

  pointer-events: none !important;
}

/* большая пульсирующая волна */
.mera-origin-key__bg-glow {
  position: absolute !important;
  z-index: 3 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: var(--ok-radius) !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.mera-origin-key__bg-glow::before {
  content: "" !important;
  position: absolute !important;

  inset: -14px !important;
  border-radius: 38px !important;

  background:
    linear-gradient(
      180deg,
      rgba(var(--ok-color-rgb), .86) 0%,
      rgba(var(--ok-color-rgb), .32) 34%,
      rgba(var(--ok-color-rgb), .10) 58%,
      transparent 86%
    ) !important;

  filter: blur(14px) !important;
  opacity: 0 !important;

  transform: translateY(18px) scale(.74) !important;
  animation: mera-origin-bg-glow 3s linear infinite !important;

  pointer-events: none !important;
}

/* кнопка */
.mera-origin-key__button {
  position: relative !important;
  z-index: 6 !important;

  width: 154px !important;
  height: 150px !important;

  border-radius: var(--ok-radius) !important;
  border: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-color: var(--ok-bg) !important;
  overflow: hidden !important;

  opacity: 1 !important;
  transform: scale(1.02) translateY(0) !important;

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .40),
    inset 0 -6px 1px -4px rgba(var(--ok-color-rgb), .92),
    inset 0 -15px 6px -8px rgba(var(--ok-color-rgb), .86),
    0 14px 0 rgba(0, 0, 0, .58),
    0 30px 42px rgba(0, 0, 0, .62) !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease !important;

  pointer-events: none !important;
}

/* тяжёлые внутренние грани */
.mera-origin-key__button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  border-radius: calc(var(--ok-radius) * .8) !important;

  filter: blur(6px) !important;

  border: 40px solid #2b2b2c !important;
  border-top: 50px solid #414244 !important;
  border-bottom: 50px solid #15161a !important;

  transition: all .5s ease !important;
  pointer-events: none !important;
}

/* пульсирующий контур кнопки */
.mera-origin-key__button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  border-radius: inherit !important;

  box-shadow:
    inset 0 0 0 1px rgba(var(--ok-color-rgb), .48),
    inset 0 -8px 18px rgba(var(--ok-color-rgb), .18),
    0 0 18px rgba(var(--ok-color-rgb), .20) !important;

  opacity: .78 !important;
  animation: mera-origin-border-breathe 2.4s ease-in-out infinite !important;

  pointer-events: none !important;
}

/* угловые блики */
.mera-origin-key__corner {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;

  opacity: .15 !important;
  transition: all .4s ease !important;

  pointer-events: none !important;
}

.mera-origin-key__corner::before,
.mera-origin-key__corner::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;

  border-top: 55px solid #fff !important;
  border-left: 15px solid transparent !important;
  border-right: 15px solid transparent !important;

  filter: blur(6px) !important;
}

.mera-origin-key__corner::before {
  left: 8px !important;
  transform: rotate(-40deg) !important;
}

.mera-origin-key__corner::after {
  right: 8px !important;
  transform: rotate(40deg) !important;
}

/* внутренняя площадка */
.mera-origin-key__inner {
  position: absolute !important;
  z-index: 9 !important;

  top: 22px !important;
  right: 20px !important;
  bottom: 22px !important;
  left: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: calc(var(--ok-radius) * .85) !important;

  background:
    linear-gradient(#232324 5%, #46484b) !important;

  box-shadow:
    inset 0 -5px 15px -1px rgba(0, 0, 0, .30),
    inset 0 -4px 3px -3px #000,
    inset 0 -10px 20px -8px rgba(255, 255, 255, .40),
    inset 0 1px 0 1px rgba(255, 255, 255, .20) !important;

  overflow: hidden !important;
  transition: all .3s ease !important;
}

/* проходящий блик */
.mera-origin-key__inner::before {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  z-index: 1 !important;

  background:
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(255,255,255,.18) 43%,
      transparent 60%
    ) !important;

  opacity: .34 !important;
  transform: translateX(-50%) rotate(8deg) !important;
  animation: mera-origin-inner-shine 3.4s ease-in-out infinite !important;

  pointer-events: none !important;
}

/* тёмная дуга внутри */
.mera-origin-key__inner::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;

  right: -34px !important;
  bottom: -44px !important;

  width: 118px !important;
  height: 118px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.10),
      rgba(0,0,0,.70) 55%,
      transparent 74%
    ) !important;

  opacity: .72 !important;
  pointer-events: none !important;
}

/* текст */
.mera-origin-key__text {
  position: relative !important;
  z-index: 5 !important;

  max-width: 96px !important;

  color: rgba(247,247,242,.96) !important;

  font-family: var(--mera-font, inherit) !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  text-shadow:
    0 2px 0 rgba(0,0,0,.84),
    0 0 14px rgba(var(--ok-color-rgb), .20) !important;

  transition:
    color .3s ease,
    text-shadow .3s ease,
    transform .3s ease !important;
}

/* LED */
.mera-origin-key__led {
  position: absolute !important;
  z-index: 10 !important;

  left: 50% !important;
  top: calc(50% + 106px) !important;

  width: 6px !important;
  height: 6px !important;

  border-radius: 50% !important;
  background-color: var(--ok-color) !important;

  transform: translateX(-50%) !important;

  box-shadow:
    0 -10px 35px 17px rgba(var(--ok-color-rgb), .70),
    inset 0 1px 2px rgba(255,255,255,.60),
    0 0 0 3px rgba(0,0,0,.60),
    0 0 2px 4px rgba(var(--ok-color-rgb), .70) !important;

  transition: all .3s ease !important;
  animation: mera-origin-led-breathe 1.8s ease-in-out infinite !important;

  pointer-events: none !important;
}

/* лёгкий шум */
.mera-origin-key__noise {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;

  opacity: .08 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0) !important;
  background-size: 7px 7px !important;

  mask-image: linear-gradient(transparent 5%, #fff 30%, #fff 70%, transparent 95%) !important;
}

/* hover */
.mera-origin-key:hover .mera-origin-key__button {
  transform: scale(1.045) translateY(-1px) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.44),
    inset 0 -6px 1px -4px rgba(var(--ok-color-rgb), 1),
    inset 0 -15px 9px -8px rgba(var(--ok-color-rgb), 1),
    0 14px 0 rgba(0,0,0,.58),
    0 32px 48px rgba(0,0,0,.68),
    0 0 44px rgba(var(--ok-color-rgb), .38) !important;
}

.mera-origin-key:hover .mera-origin-key__corner {
  opacity: .24 !important;
}

.mera-origin-key:hover .mera-origin-key__text {
  color: #fff !important;

  text-shadow:
    0 2px 0 rgba(0,0,0,.86),
    0 0 18px rgba(var(--ok-color-rgb), .48) !important;
}

/* checked/click — оранжевый */
.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color: var(--ok-orange);
  --ok-color-rgb: var(--ok-orange-rgb);
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__button,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__button {
  transform: scale(.99) translateY(8px) !important;
  background-color: #332820 !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -5px 1px -4px rgba(255,122,24,1),
    inset 0 -15px 10px -8px rgba(255,122,24,1),
    0 5px 0 rgba(0,0,0,.64),
    0 16px 34px rgba(0,0,0,.66),
    0 0 72px rgba(255,122,24,.64) !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__button::before,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__button::before {
  border-top-color: #4a3b31 !important;
  border-bottom-color: #1b1009 !important;
  border-left-color: #2c211b !important;
  border-right-color: #2c211b !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__inner,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__inner {
  background:
    linear-gradient(#2a221d 5%, #564033) !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__bg-glow::before,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__bg-glow::before {
  animation: mera-origin-orange-burst .85s ease-out 1 !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__text,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__text {
  color: #fff7ed !important;
  transform: translateY(1px) !important;

  text-shadow:
    0 2px 0 rgba(0,0,0,.86),
    0 0 22px rgba(255,122,24,.84) !important;
}

/* animations */
@keyframes mera-origin-bg-pulse {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  44% {
    transform: translateY(-32px) scale(9.5);
    opacity: .38;
  }

  72% {
    transform: translateY(-58px) scale(16);
    opacity: .08;
  }

  100% {
    transform: translateY(-72px) scale(22);
    opacity: 0;
  }
}

@keyframes mera-origin-bg-glow {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.72);
  }

  18% {
    opacity: .82;
  }

  42% {
    opacity: .42;
    transform: translateY(0) scale(1.06);
  }

  72% {
    opacity: .16;
    transform: translateY(-6px) scale(1.22);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.36);
  }
}

@keyframes mera-origin-border-breathe {
  0%, 100% {
    opacity: .48;
  }

  50% {
    opacity: .96;
  }
}

@keyframes mera-origin-led-breathe {
  0%, 100% {
    opacity: .76;
    transform: translateX(-50%) scale(.86);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }
}

@keyframes mera-origin-inner-shine {
  0%, 100% {
    opacity: .18;
    transform: translateX(-56%) rotate(8deg);
  }

  52% {
    opacity: .46;
    transform: translateX(34%) rotate(8deg);
  }
}

@keyframes mera-origin-orange-burst {
  0% {
    opacity: .10;
    transform: translateY(22px) scale(.72);
  }

  28% {
    opacity: 1;
    transform: translateY(0) scale(1.18);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.42);
  }
}
/* =========================================================
   MERA — Origin Key moving edge light
   Добавляется поверх текущего CSS
========================================================= */

.mera-origin-key {
  --ok-pulse-time: 2.4s;
}

/* SVG-слой бегущей обводки */
.mera-origin-key__edge {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;

  width: 100% !important;
  height: 100% !important;

  overflow: visible !important;
  pointer-events: none !important;

  mix-blend-mode: screen !important;
}

/* тихий базовый контур, чтобы кнопка не выглядела пустой между импульсами */
.mera-origin-key__edge-base {
  fill: none !important;
  stroke: rgba(var(--ok-color-rgb), .18) !important;
  stroke-width: 1.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  filter:
    drop-shadow(0 0 3px rgba(var(--ok-color-rgb), .22)) !important;

  opacity: .72 !important;
  transition:
    stroke .3s ease,
    opacity .3s ease !important;
}

/* широкое мягкое сияние, которое идёт снизу вверх */
.mera-origin-key__edge-glow {
  fill: none !important;
  stroke: rgba(var(--ok-color-rgb), .62) !important;
  stroke-width: 8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  stroke-dasharray: 28 250 !important;
  stroke-dashoffset: 0 !important;

  opacity: 0 !important;
  filter:
    blur(7px)
    drop-shadow(0 0 15px rgba(var(--ok-color-rgb), .70))
    drop-shadow(0 0 30px rgba(var(--ok-color-rgb), .38)) !important;

  animation: mera-origin-edge-rise var(--ok-pulse-time) linear infinite !important;

  transition: stroke .3s ease !important;
}

/* тонкая яркая линия внутри сияния */
.mera-origin-key__edge-run {
  fill: none !important;
  stroke: rgba(255,255,255,.92) !important;
  stroke-width: 1.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  stroke-dasharray: 20 258 !important;
  stroke-dashoffset: 0 !important;

  opacity: 0 !important;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.52))
    drop-shadow(0 0 12px rgba(var(--ok-color-rgb), .95))
    drop-shadow(0 0 26px rgba(var(--ok-color-rgb), .48)) !important;

  animation: mera-origin-edge-rise var(--ok-pulse-time) linear infinite !important;
}

/* правая сторона чуть позже, чтобы было ощущение живого электрического импульса */
.mera-origin-key__edge-glow--right,
.mera-origin-key__edge-run--right {
  animation-delay: .06s !important;
}

/* синхронизируем нижнюю точку с бегущей обводкой */
.mera-origin-key__led {
  animation: mera-origin-led-sync var(--ok-pulse-time) linear infinite !important;
}

/* чуть усиливаем контур на hover */
.mera-origin-key:hover .mera-origin-key__edge-base {
  stroke: rgba(var(--ok-color-rgb), .30) !important;
  opacity: .95 !important;
}

/* при нажатии оранжевый импульс должен быть плотнее */
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__edge-glow,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__edge-glow {
  stroke-width: 10 !important;
  stroke: rgba(255,122,24,.88) !important;

  filter:
    blur(8px)
    drop-shadow(0 0 18px rgba(255,122,24,.92))
    drop-shadow(0 0 42px rgba(255,122,24,.58)) !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__edge-run,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__edge-run {
  stroke: rgba(255,246,232,.98) !important;

  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.62))
    drop-shadow(0 0 16px rgba(255,122,24,1))
    drop-shadow(0 0 34px rgba(255,122,24,.72)) !important;
}

/* движение: стартует снизу и уходит вверх по боковым граням */
@keyframes mera-origin-edge-rise {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  8% {
    opacity: .95;
  }

  22% {
    opacity: 1;
  }

  54% {
    stroke-dashoffset: -118;
    opacity: .76;
  }

  78% {
    stroke-dashoffset: -190;
    opacity: .24;
  }

  100% {
    stroke-dashoffset: -235;
    opacity: 0;
  }
}

/* нижняя точка в том же ритме, что и обводка */
@keyframes mera-origin-led-sync {
  0% {
    opacity: .42;
    transform: translateX(-50%) scale(.78);
    box-shadow:
      0 -6px 22px 10px rgba(var(--ok-color-rgb), .32),
      inset 0 1px 2px rgba(255,255,255,.56),
      0 0 0 3px rgba(0,0,0,.60),
      0 0 2px 4px rgba(var(--ok-color-rgb), .42);
  }

  10% {
    opacity: 1;
    transform: translateX(-50%) scale(1.28);
    box-shadow:
      0 -12px 42px 20px rgba(var(--ok-color-rgb), .86),
      inset 0 1px 2px rgba(255,255,255,.72),
      0 0 0 3px rgba(0,0,0,.60),
      0 0 4px 5px rgba(var(--ok-color-rgb), .88);
  }

  36% {
    opacity: .88;
    transform: translateX(-50%) scale(1.02);
  }

  72% {
    opacity: .58;
    transform: translateX(-50%) scale(.88);
  }

  100% {
    opacity: .42;
    transform: translateX(-50%) scale(.78);
  }
}
/* =========================================================
   MERA — Origin Key moving edge v3
   Реальная бегущая обводка снизу вверх
========================================================= */

.mera-origin-key {
  --ok-pulse-time: 2.4s;
}

/* важно: иначе внешнее сияние SVG режется */
.mera-origin-key__button {
  overflow: visible !important;
}

/* чтобы старый статичный контур не забивал бегущую обводку */
.mera-origin-key__button::after {
  opacity: .18 !important;
  animation: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--ok-color-rgb), .28),
    inset 0 -8px 18px rgba(var(--ok-color-rgb), .10),
    0 0 14px rgba(var(--ok-color-rgb), .12) !important;
}

/* чтобы внутренние тяжёлые грани не вылезали после overflow: visible */
.mera-origin-key__button::before {
  clip-path: inset(0 round calc(var(--ok-radius) * .8)) !important;
}

.mera-origin-key__edge-v3 {
  position: absolute !important;
  inset: -1px !important;
  z-index: 12 !important;

  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;

  overflow: visible !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

/* тихий постоянный контур */
.mera-origin-key__edge-v3-base {
  fill: none !important;
  stroke: rgba(var(--ok-color-rgb), .24) !important;
  stroke-width: 1.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .8 !important;

  filter:
    drop-shadow(0 0 4px rgba(var(--ok-color-rgb), .20)) !important;
}

/* широкое сияние, которое едет по краям */
.mera-origin-key__edge-v3-glow {
  fill: none !important;
  stroke: rgba(var(--ok-color-rgb), .82) !important;
  stroke-width: 7.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  stroke-dasharray: 16 100 !important;
  stroke-dashoffset: 0 !important;

  opacity: 0 !important;

  filter:
    blur(5px)
    drop-shadow(0 0 12px rgba(var(--ok-color-rgb), .90))
    drop-shadow(0 0 28px rgba(var(--ok-color-rgb), .54)) !important;

  animation: mera-origin-edge-v3-rise var(--ok-pulse-time) linear infinite !important;
}

/* яркое ядро внутри сияния */
.mera-origin-key__edge-v3-core {
  fill: none !important;
  stroke: rgba(255,255,255,.96) !important;
  stroke-width: 1.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  stroke-dasharray: 10 100 !important;
  stroke-dashoffset: 0 !important;

  opacity: 0 !important;

  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.65))
    drop-shadow(0 0 12px rgba(var(--ok-color-rgb), 1))
    drop-shadow(0 0 28px rgba(var(--ok-color-rgb), .70)) !important;

  animation: mera-origin-edge-v3-rise var(--ok-pulse-time) linear infinite !important;
}

/* правая сторона с микрозадержкой — выглядит живее */
.mera-origin-key__edge-v3-glow--right,
.mera-origin-key__edge-v3-core--right {
  animation-delay: .05s !important;
}

/* синхронная нижняя точка */
.mera-origin-key__led {
  animation: mera-origin-led-v3-sync var(--ok-pulse-time) linear infinite !important;
}

/* активное состояние — насыщенный оранжевый */
.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color: var(--ok-orange) !important;
  --ok-color-rgb: var(--ok-orange-rgb) !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__edge-v3-glow,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__edge-v3-glow {
  stroke: rgba(255,122,24,.95) !important;
  stroke-width: 9 !important;

  filter:
    blur(6px)
    drop-shadow(0 0 16px rgba(255,122,24,1))
    drop-shadow(0 0 42px rgba(255,122,24,.70)) !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__edge-v3-core,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__edge-v3-core {
  stroke: rgba(255,246,232,1) !important;

  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.75))
    drop-shadow(0 0 16px rgba(255,122,24,1))
    drop-shadow(0 0 36px rgba(255,122,24,.78)) !important;
}

/* движение: старт снизу, подъём по бокам, затухание наверху */
@keyframes mera-origin-edge-v3-rise {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  7% {
    opacity: 1;
  }

  18% {
    opacity: 1;
  }

  52% {
    stroke-dashoffset: -55;
    opacity: .72;
  }

  82% {
    stroke-dashoffset: -92;
    opacity: .20;
  }

  100% {
    stroke-dashoffset: -108;
    opacity: 0;
  }
}

@keyframes mera-origin-led-v3-sync {
  0% {
    opacity: .45;
    transform: translateX(-50%) scale(.78);
  }

  7% {
    opacity: 1;
    transform: translateX(-50%) scale(1.32);
  }

  18% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }

  52% {
    opacity: .78;
    transform: translateX(-50%) scale(.96);
  }

  100% {
    opacity: .45;
    transform: translateX(-50%) scale(.78);
  }
}
/* =========================================================
   MERA — Origin Key edge flow
   Реальная бегущая обводка снизу вверх
========================================================= */

.mera-origin-key {
  --ok-flow-time: 2.4s;
}

/* важно: слой должен выходить чуть за кнопку */
.mera-origin-key__button {
  overflow: visible !important;
}

/* чтобы тяжёлая внутренняя грань не расползалась после overflow: visible */
.mera-origin-key__button::before {
  z-index: 1 !important;
  clip-path: inset(0 round calc(var(--ok-radius) * .8)) !important;
}

/* старый "дышащий" контур приглушаем, иначе он забивает бегущую дорожку */
.mera-origin-key__button::after {
  z-index: 4 !important;
  opacity: .22 !important;
  animation: none !important;

  box-shadow:
    inset 0 0 0 1px rgba(var(--ok-color-rgb), .24),
    inset 0 -8px 18px rgba(var(--ok-color-rgb), .10),
    0 0 14px rgba(var(--ok-color-rgb), .12) !important;
}

/* общий слой бегущей обводки */
.mera-origin-key__edge-flow {
  position: absolute !important;
  inset: -4px !important;
  z-index: 8 !important;

  border-radius: calc(var(--ok-radius) + 4px) !important;
  pointer-events: none !important;
  overflow: hidden !important;

  mix-blend-mode: screen !important;
}

/* тихий постоянный контур */
.mera-origin-key__edge-flow::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;

  border-radius: calc(var(--ok-radius) + 1px) !important;
  border: 1px solid rgba(var(--ok-color-rgb), .24) !important;

  box-shadow:
    inset 0 0 12px rgba(var(--ok-color-rgb), .10),
    0 0 14px rgba(var(--ok-color-rgb), .16) !important;

  opacity: .85 !important;
}

/* широкое мягкое сияние слева и справа */
.mera-origin-key__edge-glow::before,
.mera-origin-key__edge-glow::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;

  width: 18px !important;
  height: 78px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      to top,
      transparent 0%,
      rgba(var(--ok-color-rgb), .10) 10%,
      rgba(var(--ok-color-rgb), .95) 42%,
      rgba(255,255,255,.72) 52%,
      rgba(var(--ok-color-rgb), .40) 68%,
      transparent 100%
    ) !important;

  filter:
    blur(5px)
    drop-shadow(0 0 14px rgba(var(--ok-color-rgb), .95))
    drop-shadow(0 0 32px rgba(var(--ok-color-rgb), .55)) !important;

  opacity: 0 !important;
  animation: mera-origin-edge-flow-rise var(--ok-flow-time) linear infinite !important;
}

.mera-origin-key__edge-glow::before {
  left: 2px !important;
}

.mera-origin-key__edge-glow::after {
  right: 2px !important;
  animation-delay: .04s !important;
}

/* тонкое яркое ядро поверх мягкого сияния */
.mera-origin-key__edge-core::before,
.mera-origin-key__edge-core::after {
  content: "" !important;
  position: absolute !important;
  bottom: 4px !important;

  width: 2px !important;
  height: 54px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      to top,
      transparent 0%,
      rgba(255,255,255,.20) 12%,
      rgba(255,255,255,.98) 48%,
      rgba(var(--ok-color-rgb), .95) 62%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 6px rgba(255,255,255,.70),
    0 0 13px rgba(var(--ok-color-rgb), 1),
    0 0 28px rgba(var(--ok-color-rgb), .70) !important;

  opacity: 0 !important;
  animation: mera-origin-edge-core-rise var(--ok-flow-time) linear infinite !important;
}

.mera-origin-key__edge-core::before {
  left: 10px !important;
}

.mera-origin-key__edge-core::after {
  right: 10px !important;
  animation-delay: .04s !important;
}

/* нижняя вспышка, из которой стартует обводка */
.mera-origin-key__edge-bottom {
  position: absolute !important;
  left: 50% !important;
  bottom: 2px !important;

  width: 12px !important;
  height: 12px !important;

  border-radius: 999px !important;
  background: rgb(var(--ok-color-rgb)) !important;

  transform: translateX(-50%) scale(.2) !important;
  opacity: 0 !important;

  box-shadow:
    0 0 10px rgba(var(--ok-color-rgb), .95),
    0 0 28px rgba(var(--ok-color-rgb), .64),
    0 0 58px rgba(var(--ok-color-rgb), .34) !important;

  animation: mera-origin-edge-bottom-pulse var(--ok-flow-time) linear infinite !important;
}

.mera-origin-key__edge-bottom::before {
  content: "" !important;
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 130px !important;
  height: 4px !important;

  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--ok-color-rgb), .78),
      rgba(255,255,255,.82),
      rgba(var(--ok-color-rgb), .78),
      transparent
    ) !important;

  filter: blur(4px) !important;
  transform: translate(-50%, -50%) scaleX(0) !important;
  opacity: 0 !important;

  animation: mera-origin-edge-bottom-line var(--ok-flow-time) linear infinite !important;
}

/* LED синхронизирован с нижним стартом обводки */
.mera-origin-key__led {
  animation: mera-origin-led-edge-sync var(--ok-flow-time) linear infinite !important;
}

/* активное состояние — насыщенный оранжевый */
.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color: var(--ok-orange) !important;
  --ok-color-rgb: var(--ok-orange-rgb) !important;
}

/* движение мягкой дорожки снизу вверх */
@keyframes mera-origin-edge-flow-rise {
  0% {
    transform: translateY(38px) scaleY(.52);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  22% {
    transform: translateY(-4px) scaleY(1);
    opacity: 1;
  }

  52% {
    transform: translateY(-72px) scaleY(1.06);
    opacity: .72;
  }

  78% {
    transform: translateY(-122px) scaleY(.86);
    opacity: .24;
  }

  100% {
    transform: translateY(-166px) scaleY(.70);
    opacity: 0;
  }
}

/* движение тонкого яркого ядра */
@keyframes mera-origin-edge-core-rise {
  0% {
    transform: translateY(32px) scaleY(.45);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  24% {
    transform: translateY(-2px) scaleY(1);
    opacity: 1;
  }

  54% {
    transform: translateY(-76px) scaleY(1);
    opacity: .76;
  }

  82% {
    transform: translateY(-126px) scaleY(.8);
    opacity: .20;
  }

  100% {
    transform: translateY(-164px) scaleY(.65);
    opacity: 0;
  }
}

@keyframes mera-origin-edge-bottom-pulse {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(.35);
  }

  7% {
    opacity: 1;
    transform: translateX(-50%) scale(1.28);
  }

  18% {
    opacity: .86;
    transform: translateX(-50%) scale(.96);
  }

  42% {
    opacity: .28;
    transform: translateX(-50%) scale(.72);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(.35);
  }
}

@keyframes mera-origin-edge-bottom-line {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }

  8% {
    opacity: .95;
    transform: translate(-50%, -50%) scaleX(.45);
  }

  18% {
    opacity: .58;
    transform: translate(-50%, -50%) scaleX(1);
  }

  34% {
    opacity: .18;
    transform: translate(-50%, -50%) scaleX(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }
}

@keyframes mera-origin-led-edge-sync {
  0% {
    opacity: .46;
    transform: translateX(-50%) scale(.78);
  }

  7% {
    opacity: 1;
    transform: translateX(-50%) scale(1.32);
  }

  18% {
    opacity: .92;
    transform: translateX(-50%) scale(1.08);
  }

  50% {
    opacity: .62;
    transform: translateX(-50%) scale(.88);
  }

  100% {
    opacity: .46;
    transform: translateX(-50%) scale(.78);
  }
}
/* =========================================================
   MERA — Origin Key source bg pulse patch
   Свечение между bg и button, как в исходнике
========================================================= */

/* убираем все старые SVG/edge-слои */
.mera-origin-key__edge,
.mera-origin-key__edge-v3,
.mera-origin-key__edge-flow,
.mera-origin-key__edge-flow-v6,
.mera-origin-key__edge-orbit-v7 {
  display: none !important;
}

/* активный цвет */
.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color: var(--ok-orange) !important;
  --ok-color-rgb: var(--ok-orange-rgb) !important;
}

/* кнопка должна быть выше bg и сама обрезать свои внутренние грани */
.mera-origin-key__button {
  position: relative !important;
  z-index: 6 !important;
  overflow: hidden !important;
}

/* bg — под кнопкой, но чуть шире неё. Именно он режет волну свечения */
.mera-origin-key__bg {
  position: absolute !important;
  z-index: 2 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: calc(var(--ok-radius) * 1.25) !important;
  background-color: #000 !important;
  overflow: hidden !important;

  box-shadow:
    0 20px 10px -10px rgba(0,0,0,.30),
    inset 0 -2px 0 -1px rgba(var(--ok-color-rgb), .42),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;
}

/* внутренний контур bg — поверх свечения, но под button */
.mera-origin-key__bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  border-radius: inherit !important;

  box-shadow:
    inset 0 -2px 0 -1px rgba(var(--ok-color-rgb), .52),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;

  pointer-events: none !important;
}

/* первая волна: маленькая точка снизу раздувается внутри bg */
.mera-origin-key__shine-1 {
  position: absolute !important;
  z-index: 1 !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 10px !important;
  height: 10px !important;
  margin: auto !important;

  border-radius: 50% !important;
  background: rgb(var(--ok-color-rgb)) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-origin-source-bg-v8 2.4s linear .3s infinite !important;
}

/* вторая волна — чуть раньше, чтобы пульс был живее */
.mera-origin-key__shine-2 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.mera-origin-key__shine-2::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 10px !important;
  height: 10px !important;
  margin: auto !important;

  border-radius: 50% !important;
  background: rgb(var(--ok-color-rgb)) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-origin-source-bg-v8 2.4s linear infinite !important;
}

/* мягкая вертикальная волна между bg и button */
.mera-origin-key__bg-glow {
  position: absolute !important;
  z-index: 3 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: var(--ok-radius) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.mera-origin-key__bg-glow::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      to top,
      rgba(var(--ok-color-rgb), .02) 0%,
      rgba(var(--ok-color-rgb), .52) 24%,
      rgba(var(--ok-color-rgb), .22) 52%,
      rgba(var(--ok-color-rgb), .00) 84%
    ) !important;

  filter: blur(11px) !important;
  opacity: 0 !important;
  transform: translateY(22px) scale(.74) !important;

  animation: mera-origin-source-bg-glow-v8 2.4s linear infinite !important;
}

/* LED в тот же ритм */
.mera-origin-key__led {
  background: rgb(var(--ok-color-rgb)) !important;
  animation: mera-origin-source-led-v8 2.4s linear infinite !important;

  box-shadow:
    0 -10px 35px 17px rgba(var(--ok-color-rgb), .70),
    inset 0 1px 2px rgba(255,255,255,.60),
    0 0 0 3px rgba(0,0,0,.60),
    0 0 2px 4px rgba(var(--ok-color-rgb), .70) !important;
}

/* важно: старую дышащую обводку кнопки приглушаем, чтобы она не конкурировала */
.mera-origin-key__button::after {
  opacity: .34 !important;
  animation: none !important;
}

/* аналог исходного @keyframes bg, но чуть аккуратнее */
@keyframes mera-origin-source-bg-v8 {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  38% {
    transform: translateY(-28px) scale(8.4);
    opacity: .42;
  }

  66% {
    transform: translateY(-52px) scale(13.5);
    opacity: .14;
  }

  100% {
    transform: translateY(-68px) scale(18);
    opacity: 0;
  }
}

@keyframes mera-origin-source-bg-glow-v8 {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.72);
  }

  16% {
    opacity: .74;
  }

  40% {
    opacity: .48;
    transform: translateY(0) scale(1.04);
  }

  68% {
    opacity: .18;
    transform: translateY(-7px) scale(1.18);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.32);
  }
}

@keyframes mera-origin-source-led-v8 {
  0%, 100% {
    opacity: .72;
    transform: translateX(-50%) scale(.84);
  }

  14% {
    opacity: 1;
    transform: translateX(-50%) scale(1.20);
  }

  40% {
    opacity: .92;
    transform: translateX(-50%) scale(1.04);
  }

  70% {
    opacity: .62;
    transform: translateX(-50%) scale(.88);
  }
}
/* =========================================================
   MERA — Origin Key source-like pulse v9
   Более близко к исходнику: волна внутри bg + нижний рефлекс button
========================================================= */

/* bg должен остаться под button и резать волну */
.mera-origin-key__bg {
  z-index: 2 !important;
  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;
  overflow: hidden !important;
  border-radius: calc(var(--ok-radius) * 1.25) !important;
}

/* сама кнопка выше bg */
.mera-origin-key__button {
  z-index: 6 !important;
  overflow: hidden !important;
}

/* нижний размытый рефлекс внутри button, как в исходнике .button:after */
.mera-origin-key__button::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;

  top: 101% !important;
  left: 0 !important;
  right: 0 !important;

  width: 120px !important;
  height: 50px !important;
  margin: auto !important;

  border-radius: 50px 50px 0 0 !important;
  background: rgb(var(--ok-color-rgb)) !important;

  filter: contrast(10) blur(7px) !important;
  opacity: .72 !important;

  box-shadow: none !important;
  animation: mera-origin-button-reflex-v9 2.4s linear infinite !important;
  pointer-events: none !important;
}

/* первая волна внутри bg */
.mera-origin-key__shine-1 {
  width: 10px !important;
  height: 10px !important;
  background: rgb(var(--ok-color-rgb)) !important;
  filter: blur(2px) !important;
  opacity: 0 !important;

  animation: mera-origin-source-bg-v9 2.4s linear .3s infinite !important;
}

/* вторая волна внутри bg */
.mera-origin-key__shine-2 {
  opacity: .72 !important;
}

.mera-origin-key__shine-2::before {
  content: "" !important;

  width: 10px !important;
  height: 10px !important;
  background: rgb(var(--ok-color-rgb)) !important;
  filter: blur(2px) !important;
  opacity: 0 !important;

  animation: mera-origin-source-bg-v9 2.4s linear infinite !important;
}

/* bg-glow между bg и button */
.mera-origin-key__bg-glow {
  z-index: 5 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  overflow: hidden !important;
  border-radius: calc(var(--ok-radius) * 1.25) !important;
  mix-blend-mode: screen !important;
}

.mera-origin-key__bg-glow::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;

  border-radius: 38px !important;

  background:
    linear-gradient(
      180deg,
      rgba(var(--ok-color-rgb), .72) 0%,
      rgba(var(--ok-color-rgb), .36) 28%,
      rgba(var(--ok-color-rgb), .12) 58%,
      transparent 84%
    ) !important;

  filter: blur(12px) !important;
  opacity: 0 !important;

  animation: mera-origin-source-bg-glow-v9 2.4s linear infinite !important;
  pointer-events: none !important;
}

/* LED в том же ритме */
.mera-origin-key__led {
  animation: mera-origin-source-led-v9 2.4s linear infinite !important;
}

/* активное состояние — оранжевый */
.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color: var(--ok-orange) !important;
  --ok-color-rgb: var(--ok-orange-rgb) !important;
}

/* более исходная волна: сильно раздувается снизу и уходит вверх */
@keyframes mera-origin-source-bg-v9 {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }

  8% {
    transform: translateY(0) scale(4);
    opacity: .88;
  }

  16% {
    transform: translateY(-4px) scale(17);
    opacity: .62;
  }

  38% {
    transform: translateY(-74px) scale(19);
    opacity: .30;
  }

  64% {
    transform: translateY(-145px) scale(16);
    opacity: .11;
  }

  100% {
    transform: translateY(-230px) scale(12);
    opacity: 0;
  }
}

/* широкое мягкое дыхание между bg и button */
@keyframes mera-origin-source-bg-glow-v9 {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.74);
  }

  14% {
    opacity: .60;
    transform: translateY(14px) scale(.92);
  }

  34% {
    opacity: .74;
    transform: translateY(0) scale(1.04);
  }

  62% {
    opacity: .22;
    transform: translateY(-18px) scale(1.18);
  }

  100% {
    opacity: 0;
    transform: translateY(-42px) scale(1.34);
  }
}

/* нижний рефлекс внутри самой кнопки */
@keyframes mera-origin-button-reflex-v9 {
  0% {
    opacity: .32;
    transform: scaleX(.82);
  }

  10% {
    opacity: .95;
    transform: scaleX(1);
  }

  34% {
    opacity: .66;
    transform: scaleX(1.08);
  }

  70% {
    opacity: .28;
    transform: scaleX(.96);
  }

  100% {
    opacity: .32;
    transform: scaleX(.82);
  }
}

@keyframes mera-origin-source-led-v9 {
  0%, 100% {
    opacity: .68;
    transform: translateX(-50%) scale(.84);
  }

  10% {
    opacity: 1;
    transform: translateX(-50%) scale(1.22);
  }

  34% {
    opacity: .94;
    transform: translateX(-50%) scale(1.06);
  }

  70% {
    opacity: .58;
    transform: translateX(-50%) scale(.88);
  }
}

/* =========================================================
   MERA — Origin Key FINAL reset v10
   Механика как в исходнике: bg → shine → button
========================================================= */

/* убираем все экспериментальные edge-слои */
.mera-origin-key__edge,
.mera-origin-key__edge-v3,
.mera-origin-key__edge-flow,
.mera-origin-key__edge-flow-v6,
.mera-origin-key__edge-orbit-v7 {
  display: none !important;
}

/* базовые цвета */
.mera-origin-key {
  --ok-radius: 30px !important;
  --ok-bg: #2c3238 !important;

  --ok-green: #baff36 !important;
  --ok-green-rgb: 186, 255, 54 !important;

  --ok-orange: #ff7a18 !important;
  --ok-orange-rgb: 255, 122, 24 !important;

  --ok-color: var(--ok-green) !important;
  --ok-color-rgb: var(--ok-green-rgb) !important;

  position: relative !important;
  isolation: isolate !important;
}

/* active/click = оранжевый */
.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color: var(--ok-orange) !important;
  --ok-color-rgb: var(--ok-orange-rgb) !important;
}

/* тёмная база как .bg в исходнике */
.mera-origin-key__bg {
  position: absolute !important;
  z-index: 2 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: calc(var(--ok-radius) * 1.25) !important;
  background-color: #000 !important;
  overflow: hidden !important;

  box-shadow:
    0 20px 10px -10px rgba(0,0,0,.30) !important;

  pointer-events: none !important;
}

/* внутренний контур bg */
.mera-origin-key__bg::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;

  border-radius: inherit !important;

  box-shadow:
    inset 0 -2px 0 -1px rgba(var(--ok-color-rgb), .32),
    inset 0 0 5px 1px #000,
    inset 0 0 0 1px #000 !important;

  pointer-events: none !important;
}

/* первый пульс внутри bg */
.mera-origin-key__shine-1 {
  position: absolute !important;
  z-index: 0 !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 10px !important;
  height: 10px !important;
  margin: auto !important;

  border-radius: 50% !important;
  background: rgb(var(--ok-color-rgb)) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-origin-bg-source-v10 2.4s linear .3s infinite !important;

  pointer-events: none !important;
}

/* второй пульс внутри bg */
.mera-origin-key__shine-2 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  opacity: .85 !important;
  transition: all .5s linear !important;
  pointer-events: none !important;
}

.mera-origin-key__shine-2::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 10px !important;
  height: 10px !important;
  margin: auto !important;

  border-radius: 50% !important;
  background: rgb(var(--ok-color-rgb)) !important;
  filter: blur(2px) !important;

  transform: translateY(0) scale(0) !important;
  animation: mera-origin-bg-source-v10 2.4s linear infinite !important;

  pointer-events: none !important;
}

/* мягкий общий glow, но не вместо shine */
.mera-origin-key__bg-glow {
  position: absolute !important;
  z-index: 3 !important;

  top: 46px !important;
  right: 46px !important;
  bottom: 46px !important;
  left: 46px !important;

  border-radius: var(--ok-radius) !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.mera-origin-key__bg-glow::before {
  content: "" !important;
  position: absolute !important;

  inset: 0 !important;
  border-radius: 30px !important;

  background:
    linear-gradient(
      rgb(var(--ok-color-rgb)),
      #000
    ) !important;

  filter: blur(12px) !important;
  opacity: 0 !important;

  animation: mera-origin-bg-glow-source-v10 3s linear infinite backwards !important;
  pointer-events: none !important;
}

/* кнопка строго поверх bg */
.mera-origin-key__button {
  position: relative !important;
  z-index: 6 !important;

  width: 154px !important;
  height: 150px !important;

  border-radius: var(--ok-radius) !important;
  border: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-color: var(--ok-bg) !important;
  overflow: hidden !important;

  opacity: 1 !important;
  transform: scale(1.02) translateY(0) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.40),
    inset 0 -6px 1px -4px rgba(var(--ok-color-rgb), .88),
    inset 0 -15px 6px -8px rgba(var(--ok-color-rgb), .78),
    0 14px 0 rgba(0,0,0,.58),
    0 30px 42px rgba(0,0,0,.62) !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease !important;

  pointer-events: none !important;
}

/* внутренняя тяжёлая грань */
.mera-origin-key__button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  border-radius: calc(var(--ok-radius) * .8) !important;

  filter: blur(6px) !important;

  border: 40px solid #2b2b2c !important;
  border-top: 50px solid #414244 !important;
  border-bottom: 50px solid #15161a !important;

  transition: all .5s ease !important;
  pointer-events: none !important;
}

/* ВАЖНО: это не контур, а нижний рефлекс, как .button:after в исходнике */
.mera-origin-key__button::after {
  content: "" !important;
  position: absolute !important;

  top: 101% !important;
  left: 0 !important;
  right: 0 !important;

  width: 120px !important;
  height: 50px !important;
  margin: auto !important;

  border-radius: 50px 50px 0 0 !important;
  background: rgb(var(--ok-color-rgb)) !important;

  filter: contrast(10) blur(7px) !important;
  opacity: 1 !important;

  box-shadow: none !important;
  animation: none !important;
  transition: all .3s ease !important;

  pointer-events: none !important;
}

/* внутренняя площадка и текст остаются сверху */
.mera-origin-key__inner {
  z-index: 9 !important;
}

.mera-origin-key__text {
  z-index: 10 !important;
}

/* LED */
.mera-origin-key__led {
  z-index: 10 !important;
  background-color: rgb(var(--ok-color-rgb)) !important;

  box-shadow:
    0 -10px 35px 17px rgba(var(--ok-color-rgb), .70),
    inset 0 1px 2px rgba(255,255,255,.60),
    0 0 0 3px rgba(0,0,0,.60),
    0 0 2px 4px rgba(var(--ok-color-rgb), .55) !important;

  animation: mera-origin-led-source-v10 2.4s linear infinite !important;
}

/* прожатие */
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__button,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__button {
  transform: scale(.99) translateY(8px) !important;
  background-color: #332820 !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -5px 1px -4px rgba(255,122,24,1),
    inset 0 -15px 10px -8px rgba(255,122,24,.95),
    0 5px 0 rgba(0,0,0,.64),
    0 16px 34px rgba(0,0,0,.66),
    0 0 58px rgba(255,122,24,.46) !important;
}

/* ключевой source-like motion */
@keyframes mera-origin-bg-source-v10 {
  0% {
    transform: translateY(0) scale(0);
  }

  12% {
    transform: translateY(0) scale(25);
  }

  60%,
  100% {
    transform: translateY(-280px) scale(20, 18);
  }
}

@keyframes mera-origin-bg-glow-source-v10 {
  0% {
    opacity: 0;
  }

  40% {
    opacity: .72;
  }

  80%,
  100% {
    opacity: 0;
  }
}

@keyframes mera-origin-led-source-v10 {
  0%,
  100% {
    opacity: .72;
    transform: translateX(-50%) scale(.86);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }

  40% {
    opacity: .86;
    transform: translateX(-50%) scale(1);
  }

  70% {
    opacity: .58;
    transform: translateX(-50%) scale(.88);
  }
}

/* =========================================================
   MERA — Origin Key v10 pulse restore
   Возвращаем пульсацию shine внутри bg
========================================================= */

.mera-origin-key__button::after {
  opacity: .48 !important;
  animation: mera-origin-button-reflex-v11 2.4s ease-in-out infinite !important;
}

.mera-origin-key__shine-1 {
  opacity: 0 !important;
  animation: mera-origin-bg-source-v11 2.4s linear .3s infinite !important;
}

.mera-origin-key__shine-2::before {
  content: "" !important;
  opacity: 0 !important;
  animation: mera-origin-bg-source-v11 2.4s linear infinite !important;
}

.mera-origin-key__bg-glow::before {
  opacity: 0 !important;
  animation: mera-origin-bg-glow-source-v11 2.4s linear infinite !important;
}

/* ключевая волна: появляется снизу, раздувается и уходит вверх */
@keyframes mera-origin-bg-source-v11 {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }

  8% {
    transform: translateY(0) scale(5);
    opacity: .95;
  }

  18% {
    transform: translateY(-6px) scale(18);
    opacity: .58;
  }

  42% {
    transform: translateY(-68px) scale(22);
    opacity: .28;
  }

  68% {
    transform: translateY(-138px) scale(18);
    opacity: .10;
  }

  100% {
    transform: translateY(-230px) scale(12);
    opacity: 0;
  }
}

@keyframes mera-origin-bg-glow-source-v11 {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.74);
  }

  16% {
    opacity: .58;
    transform: translateY(10px) scale(.92);
  }

  40% {
    opacity: .46;
    transform: translateY(0) scale(1.04);
  }

  72% {
    opacity: .14;
    transform: translateY(-12px) scale(1.20);
  }

  100% {
    opacity: 0;
    transform: translateY(-28px) scale(1.32);
  }
}

@keyframes mera-origin-button-reflex-v11 {
  0%, 100% {
    opacity: .36;
  }

  12% {
    opacity: .78;
  }

  42% {
    opacity: .50;
  }

  72% {
    opacity: .30;
  }
}
/* =========================================================
   MERA — Origin Key final press tuning
   Внешняя часть не двигается, нажимается только inner
========================================================= */

/* фирменный зелёный */
.mera-origin-key {
  --ok-green-rgb: 191, 247, 71 !important; /* #bff747 */
  --ok-color-rgb: var(--ok-green-rgb) !important;
}

.mera-origin-key:has(.mera-origin-key__input:checked),
.mera-origin-key.is-origin-key-pressed {
  --ok-color-rgb: var(--ok-orange-rgb) !important;
}

/* ВНЕШНЯЯ КНОПКА: всегда один размер, без смещения и без изменения тени */
.mera-origin-key__button,
.mera-origin-key:hover .mera-origin-key__button,
.mera-origin-key:active .mera-origin-key__button,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__button,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__button {
  width: 154px !important;
  height: 150px !important;

  transform: scale(1.02) translateY(0) !important;
  transform-origin: center center !important;

  box-shadow: none !important;
}

/* убираем лишний внутренний слой/перекрытие */
.mera-origin-key__inner::after {
  display: none !important;
}

/* мягкий нижний рефлекс */
.mera-origin-key__button-reflex-v12 {
  bottom: -30px !important;
  width: 122px !important;
  height: 48px !important;

  background: rgba(var(--ok-color-rgb), .53) !important;

  filter: contrast(7) blur(6px) !important;
  opacity: .52 !important;

  animation-duration: 2.05s !important;
}

/* контур bg аккуратнее */
.mera-origin-key__bg::before {
  box-shadow:
    inset 0 -1px 0 -1px rgba(var(--ok-color-rgb), .52),
    inset 0 0 4px 2px #000,
    inset 0 0 0 1px #000 !important;
}

/* нажимается только внутренняя площадка */
.mera-origin-key__inner {
  transform: scale(1) translateY(0) !important;
  transform-origin: center center !important;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    background .18s ease !important;
}

.mera-origin-key:active .mera-origin-key__inner,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__inner,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__inner {
  transform: scale(.88) translateY(5px) !important;
  transform-origin: center center !important;

  box-shadow:
    inset 0 -5px 15px -1px rgba(0,0,0,.46),
    inset 0 -4px 3px -3px #000,
    inset 0 -8px 18px -8px rgba(255,255,255,.28),
    inset 0 1px 0 1px rgba(255,255,255,.12),
    0 0 18px rgba(var(--ok-color-rgb), .10) !important;
}

/* текст уходит вместе с внутренней площадкой */
.mera-origin-key__text {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), text-shadow .18s ease !important;
}

.mera-origin-key:active .mera-origin-key__text,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__text,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__text {
  transform: translateY(1px) scale(.98) !important;
}

/* ускоряем движение свечения */
.mera-origin-key__source-pulse-v12,
.mera-origin-key__source-glow-v12,
.mera-origin-key__button-reflex-v12,
.mera-origin-key__led {
  animation-duration: 2.05s !important;
}

.mera-origin-key__source-pulse-v12--second {
  animation-delay: .26s !important;
}

/* =========================================================
   MERA — Origin Key text style
   Надпись в стиле вдавленной тёмной иконки
========================================================= */

.mera-origin-key__text {
  position: relative !important;
  z-index: 10 !important;

  display: inline-block !important;
  text-align: center !important;

  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1.02 !important;

  color: #1a1d22 !important;
  -webkit-text-fill-color: #1a1d22 !important;

  /* эффект тёмного вдавленного символа */
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 2px 2px rgba(0,0,0,.38),
    0 -1px 0 rgba(0,0,0,.72),
    1px 0 0 rgba(0,0,0,.34),
    -1px 0 0 rgba(255,255,255,.03),
    0 0 1px rgba(0,0,0,.55) !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.03))
    drop-shadow(0 2px 3px rgba(0,0,0,.20)) !important;

  transform: translateY(0) scale(1) !important;
  transform-origin: center center !important;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    color .18s ease,
    text-shadow .18s ease,
    filter .18s ease,
    opacity .18s ease !important;
}

/* если хочешь чуть сильнее “вдавить” именно блок текста */
.mera-origin-key__text::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px -8px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 12px !important;
  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.015) 26%,
      rgba(0,0,0,.10) 72%,
      transparent 100%
    ) !important;
  opacity: .55 !important;
}

/* hover — почти без изменений, чтобы не было “прыжка” */
.mera-origin-key:hover .mera-origin-key__text {
  color: #1b1f24 !important;
  -webkit-text-fill-color: #1b1f24 !important;
}

/* при нажатии текст должен вести себя как иконка в референсе:
   чуть глубже утапливаться и становиться немного темнее */
.mera-origin-key:active .mera-origin-key__text,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__text,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__text {
  color: #111418 !important;
  -webkit-text-fill-color: #111418 !important;

  transform: translateY(2px) scale(.965) !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.03),
    0 1px 1px rgba(0,0,0,.22),
    0 -1px 0 rgba(0,0,0,.82),
    1px 0 0 rgba(0,0,0,.40),
    -1px 0 0 rgba(255,255,255,.02),
    0 0 1px rgba(0,0,0,.72) !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.02))
    drop-shadow(0 1px 2px rgba(0,0,0,.16)) !important;
}

/* чтобы текст нажимался синхронно с inner */
.mera-origin-key:active .mera-origin-key__inner .mera-origin-key__text,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__inner .mera-origin-key__text,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__inner .mera-origin-key__text {
  transform: translateY(2px) scale(.965) !important;
}
/* =========================================================
   MERA — Origin Key text refine
   Больше шрифт + динамическое внутреннее свечение текста
========================================================= */

/* слегка расширяем внутреннюю площадку, а не внешнюю кнопку */
.mera-origin-key__inner {
  left: 16px !important;
  right: 16px !important;
}

/* текст: крупнее, читаемее, в стиле тёмной вдавленной иконки */
.mera-origin-key__text {
  position: relative !important;
  z-index: 10 !important;

  display: block !important;
  width: 100% !important;
  text-align: center !important;

  font-size: 18px !important;
  line-height: .96 !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;

  color: #161a1f !important;
  -webkit-text-fill-color: #161a1f !important;

  /* более "иконный" тёмный вдавленный вид */
  text-shadow:
    0 1px 0 rgba(255,255,255,.045),
    0 -1px 0 rgba(0,0,0,.88),
    0 2px 2px rgba(0,0,0,.38),
    1px 0 0 rgba(0,0,0,.32),
    -1px 0 0 rgba(255,255,255,.02),
    0 0 1px rgba(0,0,0,.65),
    0 0 6px rgba(var(--ok-color-rgb), .00) !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.03))
    drop-shadow(0 2px 2px rgba(0,0,0,.16)) !important;

  transform: translateY(0) scale(1) !important;
  transform-origin: center center !important;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    color .18s ease,
    text-shadow .18s ease,
    filter .18s ease !important;

  /* динамическое внутреннее свечение */
  animation: mera-origin-text-glow-idle 2.05s linear infinite !important;
}

/* лёгкая внутренняя "линза" под текстом */
.mera-origin-key__text::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: -1 !important;

  width: 120px !important;
  height: 58px !important;

  transform: translate(-50%, -50%) scale(.88) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--ok-color-rgb), .12) 0%,
      rgba(var(--ok-color-rgb), .06) 28%,
      rgba(var(--ok-color-rgb), .02) 50%,
      transparent 75%
    ) !important;

  filter: blur(8px) !important;
  opacity: 0 !important;
  pointer-events: none !important;

  animation: mera-origin-text-backglow-idle 2.05s linear infinite !important;
}

/* при нажатии текст уходит чуть глубже, как иконка */
.mera-origin-key:active .mera-origin-key__text,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__text,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__text {
  color: #0f1317 !important;
  -webkit-text-fill-color: #0f1317 !important;

  transform: translateY(2px) scale(.965) !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.02),
    0 -1px 0 rgba(0,0,0,.94),
    0 1px 1px rgba(0,0,0,.26),
    1px 0 0 rgba(0,0,0,.42),
    -1px 0 0 rgba(255,255,255,.01),
    0 0 1px rgba(0,0,0,.72),
    0 0 9px rgba(var(--ok-color-rgb), .16) !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.02))
    drop-shadow(0 1px 2px rgba(0,0,0,.12)) !important;

  animation: mera-origin-text-glow-pressed 2.05s linear infinite !important;
}

.mera-origin-key:active .mera-origin-key__text::before,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__text::before,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__text::before {
  animation: mera-origin-text-backglow-pressed 2.05s linear infinite !important;
}

/* idle glow текста */
@keyframes mera-origin-text-glow-idle {
  0%, 100% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.045),
      0 -1px 0 rgba(0,0,0,.88),
      0 2px 2px rgba(0,0,0,.38),
      1px 0 0 rgba(0,0,0,.32),
      -1px 0 0 rgba(255,255,255,.02),
      0 0 1px rgba(0,0,0,.65),
      0 0 4px rgba(var(--ok-color-rgb), .00);
  }

  10% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.05),
      0 -1px 0 rgba(0,0,0,.88),
      0 2px 2px rgba(0,0,0,.38),
      1px 0 0 rgba(0,0,0,.32),
      -1px 0 0 rgba(255,255,255,.02),
      0 0 1px rgba(0,0,0,.65),
      0 0 6px rgba(var(--ok-color-rgb), .08);
  }

  34% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.055),
      0 -1px 0 rgba(0,0,0,.84),
      0 2px 2px rgba(0,0,0,.34),
      1px 0 0 rgba(0,0,0,.28),
      -1px 0 0 rgba(255,255,255,.02),
      0 0 1px rgba(0,0,0,.60),
      0 0 10px rgba(var(--ok-color-rgb), .18);
  }

  62% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.045),
      0 -1px 0 rgba(0,0,0,.88),
      0 2px 2px rgba(0,0,0,.38),
      1px 0 0 rgba(0,0,0,.32),
      -1px 0 0 rgba(255,255,255,.02),
      0 0 1px rgba(0,0,0,.65),
      0 0 5px rgba(var(--ok-color-rgb), .06);
  }
}

/* pressed glow текста */
@keyframes mera-origin-text-glow-pressed {
  0%, 100% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.02),
      0 -1px 0 rgba(0,0,0,.94),
      0 1px 1px rgba(0,0,0,.26),
      1px 0 0 rgba(0,0,0,.42),
      -1px 0 0 rgba(255,255,255,.01),
      0 0 1px rgba(0,0,0,.72),
      0 0 5px rgba(var(--ok-color-rgb), .06);
  }

  12% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.02),
      0 -1px 0 rgba(0,0,0,.94),
      0 1px 1px rgba(0,0,0,.24),
      1px 0 0 rgba(0,0,0,.42),
      -1px 0 0 rgba(255,255,255,.01),
      0 0 1px rgba(0,0,0,.72),
      0 0 10px rgba(var(--ok-color-rgb), .16);
  }

  38% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.02),
      0 -1px 0 rgba(0,0,0,.92),
      0 1px 1px rgba(0,0,0,.22),
      1px 0 0 rgba(0,0,0,.40),
      -1px 0 0 rgba(255,255,255,.01),
      0 0 1px rgba(0,0,0,.68),
      0 0 14px rgba(var(--ok-color-rgb), .24);
  }

  70% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.02),
      0 -1px 0 rgba(0,0,0,.94),
      0 1px 1px rgba(0,0,0,.26),
      1px 0 0 rgba(0,0,0,.42),
      -1px 0 0 rgba(255,255,255,.01),
      0 0 1px rgba(0,0,0,.72),
      0 0 6px rgba(var(--ok-color-rgb), .08);
  }
}

@keyframes mera-origin-text-backglow-idle {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }

  12% {
    opacity: .22;
    transform: translate(-50%, -50%) scale(.96);
  }

  36% {
    opacity: .34;
    transform: translate(-50%, -50%) scale(1.04);
  }

  68% {
    opacity: .10;
    transform: translate(-50%, -50%) scale(.96);
  }
}

@keyframes mera-origin-text-backglow-pressed {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
  }

  10% {
    opacity: .20;
    transform: translate(-50%, -50%) scale(.94);
  }

  34% {
    opacity: .30;
    transform: translate(-50%, -50%) scale(1.02);
  }

  70% {
    opacity: .08;
    transform: translate(-50%, -50%) scale(.94);
  }
}
/* =========================================================
   MERA — Origin Key icon + caption
   Иконка внутри кнопки, подпись вынесена наружу
========================================================= */

/* даём место под подпись */
.mera-origin-key {
  padding-bottom: 92px !important;
}

/* старый текст внутри кнопки больше не нужен */
.mera-origin-key__text {
  display: none !important;
}

/* внутренняя площадка — центрирование иконки */
.mera-origin-key__inner {
  left: 16px !important;
  right: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* иконка в стиле вдавленного тёмного символа */
.mera-origin-key__icon {
  position: relative !important;
  z-index: 10 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 74px !important;
  height: 74px !important;

  color: #161a1f !important;

  transform: translateY(0) scale(1) !important;
  transform-origin: center center !important;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    color .18s ease,
    filter .18s ease !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.04))
    drop-shadow(0 2px 2px rgba(0,0,0,.18)) !important;
}

.mera-origin-key__icon svg {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  overflow: visible !important;
}

.mera-origin-key__icon svg * {
  stroke: currentColor !important;
  stroke-width: 10 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

/* псевдо-объём и вдавленность */
.mera-origin-key__icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.03) 0%,
      rgba(255,255,255,.015) 22%,
      rgba(0,0,0,.10) 72%,
      transparent 100%
    ) !important;

  opacity: .7 !important;
}

/* idle состояние иконки */
.mera-origin-key__icon {
  text-shadow: none !important;
}

/* при нажатии иконка уходит глубже, как в референсе */
.mera-origin-key:active .mera-origin-key__icon,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon {
  color: #0f1317 !important;
  transform: translateY(2px) scale(.95) !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.02))
    drop-shadow(0 1px 1px rgba(0,0,0,.10)) !important;
}

/* подпись вынесена под кнопку */
.mera-origin-key__caption {
  position: absolute !important;
  top: calc(100% + 42px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;

  display: block !important;
  width: max-content !important;
  max-width: 260px !important;

  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  white-space: nowrap !important;

  color: rgba(255,255,255,.86) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.45),
    0 0 12px rgba(0,0,0,.18) !important;

  pointer-events: none !important;
}

/* при нажатии подпись можно чуть подсветить */
.mera-origin-key:active .mera-origin-key__caption,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__caption,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__caption {
  color: rgba(255,255,255,.94) !important;
}
/* =========================================================
   MERA — Origin Key power icon final
========================================================= */

/* 1. без лишнего отступа снизу */
.mera-origin-key {
  padding-bottom: 0 !important;
}

/* подпись под кнопкой — если оставил её, регулируй отдельно */
.mera-origin-key__caption {
  top: calc(100% + 42px) !important;
}

/* иконка */
.mera-origin-key__icon {
  position: relative !important;
  z-index: 10 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 78px !important;
  height: 78px !important;

  transform: translateY(0) scale(1) !important;
  transform-origin: center center !important;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    filter .18s ease !important;
}

.mera-origin-key__icon svg {
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  overflow: visible !important;
}

/* базовая тёмная иконка — ближе к референсу */
.mera-origin-key__icon-base {
  stroke: #151a20 !important;
  stroke-width: 9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.04))
    drop-shadow(0 2px 2px rgba(0,0,0,.22)) !important;
}

/* дополнительная “вдавленность” */
.mera-origin-key__icon-ring-base {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.04))
    drop-shadow(0 2px 2px rgba(0,0,0,.24))
    drop-shadow(0 0 1px rgba(0,0,0,.35)) !important;
}

.mera-origin-key__icon-stem-base {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.03))
    drop-shadow(0 2px 2px rgba(0,0,0,.24)) !important;
}

/* glow-слой */
.mera-origin-key__icon-glow {
  stroke: rgb(var(--ok-color-rgb)) !important;
  stroke-width: 8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0 !important;

  filter:
    blur(2px)
    drop-shadow(0 0 8px rgba(var(--ok-color-rgb), .80))
    drop-shadow(0 0 18px rgba(var(--ok-color-rgb), .38)) !important;
}

/* яркое ядро */
.mera-origin-key__icon-core {
  stroke: rgba(255,255,255,.92) !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0 !important;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.42))
    drop-shadow(0 0 10px rgba(var(--ok-color-rgb), .80)) !important;
}

/* движение по кольцу */
.mera-origin-key__icon-ring-glow,
.mera-origin-key__icon-ring-core {
  stroke-dasharray: 74 150 !important;
  stroke-dashoffset: 0 !important;
}

/* движение по вертикальной линии */
.mera-origin-key__icon-stem-glow,
.mera-origin-key__icon-stem-core {
  stroke-dasharray: 12 40 !important;
  stroke-dashoffset: 0 !important;
}

/* idle состояние: почти без свечения */
.mera-origin-key__icon-glow,
.mera-origin-key__icon-core {
  animation: none !important;
}

/* при нажатии сама иконка слегка утапливается */
.mera-origin-key:active .mera-origin-key__icon,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon {
  transform: translateY(2px) scale(.95) !important;
}

/* при нажатии запускаем glow и движение */
.mera-origin-key:active .mera-origin-key__icon-glow,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon-glow,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon-glow {
  animation: mera-origin-icon-glow-trace 2.05s linear infinite !important;
}

.mera-origin-key:active .mera-origin-key__icon-core,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon-core,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon-core {
  animation: mera-origin-icon-core-trace 2.05s linear infinite !important;
}

/* лёгкое свечение иконки даже в idle — очень слабое */
.mera-origin-key__icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: -1 !important;

  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;

  transform: translate(-50%, -50%) scale(.9) !important;
  background:
    radial-gradient(
      circle at center,
      rgba(var(--ok-color-rgb), .08) 0%,
      rgba(var(--ok-color-rgb), .03) 34%,
      transparent 72%
    ) !important;

  filter: blur(8px) !important;
  opacity: .18 !important;
  transition: opacity .18s ease !important;
}

/* при нажатии общий halo усиливается */
.mera-origin-key:active .mera-origin-key__icon::after,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon::after,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon::after {
  opacity: .42 !important;
}

/* АНИМАЦИИ */
@keyframes mera-origin-icon-glow-trace {
  0% {
    opacity: 0;
  }

  8% {
    opacity: .85;
  }

  24% {
    opacity: .95;
  }

  70% {
    opacity: .34;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mera-origin-icon-core-trace {
  0% {
    opacity: 0;
  }

  8% {
    opacity: .92;
  }

  26% {
    opacity: 1;
  }

  66% {
    opacity: .38;
  }

  100% {
    opacity: 0;
  }
}

/* движение для кольца */
.mera-origin-key:active .mera-origin-key__icon-ring-glow,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon-ring-glow,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon-ring-glow {
  animation:
    mera-origin-icon-glow-trace 2.05s linear infinite,
    mera-origin-icon-ring-run 2.05s linear infinite !important;
}

.mera-origin-key:active .mera-origin-key__icon-ring-core,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon-ring-core,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon-ring-core {
  animation:
    mera-origin-icon-core-trace 2.05s linear infinite,
    mera-origin-icon-ring-run 2.05s linear infinite !important;
}

/* движение для вертикальной ножки */
.mera-origin-key:active .mera-origin-key__icon-stem-glow,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon-stem-glow,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon-stem-glow {
  animation:
    mera-origin-icon-glow-trace 2.05s linear infinite,
    mera-origin-icon-stem-run 2.05s linear infinite !important;
}

.mera-origin-key:active .mera-origin-key__icon-stem-core,
.mera-origin-key:has(.mera-origin-key__input:checked) .mera-origin-key__icon-stem-core,
.mera-origin-key.is-origin-key-pressed .mera-origin-key__icon-stem-core {
  animation:
    mera-origin-icon-core-trace 2.05s linear infinite,
    mera-origin-icon-stem-run 2.05s linear infinite !important;
}

@keyframes mera-origin-icon-ring-run {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -150;
  }
}

@keyframes mera-origin-icon-stem-run {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -52;
  }
}
.mera-origin-key__button::after {
    opacity: .0 !important;
}
.mera-origin-key__button-reflex-v12 {
    background: rgb(135 197 0 / 23%) !important;
    filter: contrast(1) blur(19px) !important;
    opacity: .62 !important;
}
.mera-origin-key__icon {
    color: #1012147a !important;
}
.mera-result-card__title {
    font-size: clamp(18px, 1.0vw, 22px);
}
/* =========================================================
   MERA — separated boiler room checklist
   Shortcode: [mera_project_boiler_room]
========================================================= */

.mera-solution-v3--boiler {
  padding-top: clamp(26px, 3vw, 44px) !important;
}

.mera-solution-v3--boiler .mera-solution-list {
  margin-top: 0 !important;
}

.mera-solution-v3__spacer {
  min-width: 0 !important;
}

@media (max-width: 1024px) {
  .mera-solution-v3--boiler {
    padding-top: 24px !important;
  }

  .mera-solution-v3--boiler .mera-solution-v3__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .mera-solution-v3__spacer {
    display: none !important;
  }
}
.mera-solution-v3__inner {
    display: flex !important;
}
.mera-solution-v3 {
    padding: 0px !important;
}
.mera-solution-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}
.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-grid-img {
    padding-right: 15px;
}
.pxl-grid-img img {
    height: 100%;
    object-fit: cover;
}
.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner {
    padding: 15px 30px;
	min-height: 110px;
}
/* =========================================================
   MERA — Reveal safety for Header / Hero
   Чтобы универсальный reveal случайно не ломал шапку и первый экран
========================================================= */

#pxl-header-elementor.mera-reveal,
#pxl-header-elementor .mera-reveal,
#pxl-header-mobile.mera-reveal,
#pxl-header-mobile .mera-reveal,
.mera-project-hero.mera-reveal,
.mera-project-hero .mera-reveal,
.mera-project-visual.mera-reveal,
.mera-project-bg-image.mera-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}
/* =========================================================
   MERA — Safe universal reveal
   Не ломает Header / Hero / transform-эффекты темы
========================================================= */

[data-mera-reveal-ready="1"] {
  --mera-reveal-x: 0px;
  --mera-reveal-y: 34px;
  --mera-reveal-blur: 8px;
  --mera-reveal-duration: 900ms;
  --mera-reveal-delay: 0ms;
  --mera-reveal-ease: cubic-bezier(.2, .72, .2, 1);

  opacity: 0 !important;
  transform: translate3d(var(--mera-reveal-x), var(--mera-reveal-y), 0) !important;
  filter: blur(var(--mera-reveal-blur)) !important;

  transition:
    opacity var(--mera-reveal-duration) var(--mera-reveal-ease) var(--mera-reveal-delay),
    transform var(--mera-reveal-duration) var(--mera-reveal-ease) var(--mera-reveal-delay),
    filter var(--mera-reveal-duration) var(--mera-reveal-ease) var(--mera-reveal-delay) !important;

  will-change: opacity, transform, filter;
}

[data-mera-reveal-ready="1"].is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: blur(0) !important;
}

/* Варианты направления */
[data-mera-reveal-ready="1"].mera-reveal--left {
  --mera-reveal-x: -34px;
  --mera-reveal-y: 0px;
}

[data-mera-reveal-ready="1"].mera-reveal--right {
  --mera-reveal-x: 34px;
  --mera-reveal-y: 0px;
}

[data-mera-reveal-ready="1"].mera-reveal--up {
  --mera-reveal-x: 0px;
  --mera-reveal-y: 34px;
}

[data-mera-reveal-ready="1"].mera-reveal--down {
  --mera-reveal-x: 0px;
  --mera-reveal-y: -34px;
}

[data-mera-reveal-ready="1"].mera-reveal--soft {
  --mera-reveal-y: 20px;
  --mera-reveal-blur: 5px;
  --mera-reveal-duration: 760ms;
}

[data-mera-reveal-ready="1"].mera-reveal--strong {
  --mera-reveal-y: 54px;
  --mera-reveal-blur: 12px;
  --mera-reveal-duration: 1050ms;
}

[data-mera-reveal-ready="1"].mera-reveal--delay-1 {
  --mera-reveal-delay: 120ms;
}

[data-mera-reveal-ready="1"].mera-reveal--delay-2 {
  --mera-reveal-delay: 220ms;
}

[data-mera-reveal-ready="1"].mera-reveal--delay-3 {
  --mera-reveal-delay: 340ms;
}

/* Elementor editor */
.elementor-editor-active [data-mera-reveal-ready="1"] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Отключение анимаций */
@media (prefers-reduced-motion: reduce) {
  [data-mera-reveal-ready="1"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

.ow-vis {
	overflow: visible;
}
.mera-project-hero {
    background: black !important;
}

.mera-result-v2 {
    padding: clamp(72px, 13vw, 180px) clamp(24px, 5.4vw, 92px) clamp(72px, 9vw, 90px);
}

.mera-solution-detail__intro p {
    font-weight: 600;
    font-size: 29px;
    line-height: 1.5;
    letter-spacing: -0.5px;
}
.mera-fade-borders {
  position: relative !important;
}

.mera-fade-borders::before,
.mera-fade-borders::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  pointer-events: none !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 18%,
    rgba(186,255,54,0.42) 50%,
    rgba(255,255,255,0.06) 82%,
    transparent 100%
  ) !important;

  box-shadow: 0 0 18px rgba(186,255,54,0.08) !important;
}

.mera-fade-borders::before {
  top: 0 !important;
}

.mera-fade-borders::after {
  bottom: 0 !important;
}

.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-grid-img {
    gap: 11px;
}
.pxl-service-grid-layout1 .pxl-grid-item a {
  pointer-events: none;
  cursor: default;
}

.pxl-service-grid-layout1 .pxl-grid-item {
  cursor: default;
}

.pxl-service-grid-layout1 .pxl-grid-item:hover .pxl-post--inner {
  border: 1px solid var(--primary-color);
}
.detail .pxl-service-grid-layout2 .pxl-post--inner .pxl-post--content, .pxl-service-grid-layout2 .pxl-post--inner .pxl-post--content {
    font-size: 17px;
    font-weight: 600;
	-webkit-line-clamp: 3;
}

.single-portfolio #pxl-main {
    padding: 0px 0px 105px 0px !important;
}
.mera-project-meta > .mera-meta-cell {
    padding: 0 20px 0 0 !important;
    font-size: 12px !important;
}
.mera-project-meta {
    width: min(100%, 1120px) !important;
}
.pxl-swiper-slider .pxl-post--featured img, .hover-imge-effect2 img {
    aspect-ratio: 4 / 3;
}
.pxl-swiper-slider .pxl-post--title a {
    font-size: 11px;
}
.single-portfolio #pxl-main {
    padding: 0px 0px 0px 0px !important;
}
.mera-project-title .elementor-heading-title {
    font-family: "Exo 2", Sans-serif  !important;
}
@media (max-width: 767px) {
.mera-solution-detail__intro p {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}
	.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner {
    padding: 20px 20px;
}
	.project_steps .pxl-grid-item .pxl-post--inner .pxl-grid-img {
        width: 100% !important;
    }
	}