/* ============================================================
   Liquid button — «жидкий» анимированный градиент на кнопках .lqb
   Порт ui-layouts liquid button (React/motion) на ванильный
   SVG + CSS + JS. Палитра — синяя гамма сайта (#1290F8).
   Стили активируются только при .lqb--on (ставит liquid-btn.js);
   без JS кнопка остаётся штатной outline-кнопкой.
   ============================================================ */

.pr-pricing-card__btn.lqb--on {
  position: relative;
  z-index: 0;
  background: transparent;
  border-color: rgba(18, 144, 248, 0.55);
  color: #fff;
}

.pr-pricing-card__btn.lqb--on:hover {
  background: transparent;
  color: #fff;
  border-color: rgba(18, 144, 248, 0.9);
}

.lqb__glow, .lqb__plate, .lqb__body, .lqb__liquid,
.lqb__layer, .lqb__core, .lqb__shine {
  display: block;
  pointer-events: none;
}

.lqb--on .lqb__label {
  position: relative;
  z-index: 3;
  transition: color 0.3s ease;
}

.lqb--on:hover .lqb__label { color: #cfe7fe; }

/* внешнее размытое свечение вокруг кнопки */
.lqb__glow {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 113%;
  height: 129%;
  transform: translateX(-50%);
  border-radius: 50px;
  overflow: hidden;
  filter: blur(14px);
  opacity: 0.55;
  z-index: -2;
}

/* тёмная «подложка-тень» под кнопкой */
.lqb__plate {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 113%;
  transform: translate(-50%, -40%);
  border-radius: 30px;
  background: #04182e;
  filter: blur(8px);
  z-index: -1;
}

/* тело кнопки: тёмно-синяя основа + жидкие слои */
.lqb__body {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: #041226;
  z-index: 1;
}

.lqb__liquid {
  position: absolute;
  inset: 0;
}

.lqb__layer {
  position: absolute;
  top: 50%;
  left: 50%;
}

.lqb__layer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lqb__layer--s { width: 308%; height: 281%; }
.lqb__layer--b { width: 525%; height: 481%; }
.lqb__layer--d { mix-blend-mode: difference; }
.lqb__layer--h { mix-blend-mode: hard-light; }

.lqb__liquid .lqb__layer:nth-child(1) { transform: translate(-50%, -50%); }
.lqb__liquid .lqb__layer:nth-child(2) { transform: translate(-50%, -50%) rotate(164.971deg); }
.lqb__liquid .lqb__layer:nth-child(3) { transform: translate(-53%, -53%) rotate(-11.61deg); }
.lqb__liquid .lqb__layer:nth-child(4) { transform: translate(-50%, -57%) rotate(-179.012deg); }
.lqb__liquid .lqb__layer:nth-child(5) { transform: translate(-57%, -50%) rotate(-29.722deg); }
.lqb__liquid .lqb__layer:nth-child(6) { transform: translate(-62%, -24%) rotate(160.227deg); }
.lqb__liquid .lqb__layer:nth-child(7) { transform: translate(-67%, -29%) rotate(180deg); }

/* глубокое синее свечение в центре, под текстом */
.lqb__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 71%;
  height: 45%;
  transform: translate(-50%, -40%);
  border-radius: 20px;
  background: #003d80;
  filter: blur(12px);
}

/* ============================================================
   Вариант lqb--air — светлая «воздушная» голубая гамма
   (градиент lqbGradAir подставляет liquid-btn.js)
   ============================================================ */
.lqb--air .lqb__body { background: #0b57a4; }
.lqb--air .lqb__plate { background: #9ccdf5; }
.lqb--air .lqb__core { background: #2e8fe0; }

/* ============================================================
   Фильтры галереи (index.html): эффект только у активной кнопки.
   Неактивная кнопка выглядит штатно — слои спрятаны.
   ============================================================ */
.filter-btn.lqb--on { position: relative; z-index: 0; }

.filter-btn.lqb--on .lqb__glow,
.filter-btn.lqb--on .lqb__plate,
.filter-btn.lqb--on .lqb__body {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.filter-btn.lqb--on.active .lqb__glow,
.filter-btn.lqb--on.active .lqb__plate,
.filter-btn.lqb--on.active .lqb__body {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

.filter-btn.lqb--on.active .lqb__glow { opacity: 0.5; }

.filter-btn.lqb--on.active,
.filter-btn.lqb--on.active:hover {
  background: transparent;
  border-color: rgba(74, 168, 250, 0.65);
  color: #fff;
  box-shadow: none;
}

/* ============================================================
   Телефон в шапке (index.html, только desktop-вариант;
   мобильная иконка header__phone--mobile не затрагивается)
   ============================================================ */
.header__phone.lqb--on {
  position: relative;
  z-index: 0;
  background: transparent;
  justify-content: center;
}

/* белый текст в обоих состояниях шапки (scrolled и нет) */
.header__phone.lqb--on,
.header .header__phone.lqb--on,
.header:not(.header--scrolled) .header__phone.lqb--on,
.header:not(.header--scrolled) .header__phone--desktop.lqb--on {
  color: #fff;
  border-color: rgba(74, 168, 250, 0.65);
}

.header__phone.lqb--on:hover {
  background: transparent;
  color: #fff;
  border-color: rgba(74, 168, 250, 0.9);
  box-shadow: none;
}

/* штатный radial-ореол ::before заменяется нашим .lqb__glow */
.header__phone--desktop.lqb--on::before { display: none; }

/* усиленное тёмное ядро под номером — белый текст читаем
   в любой фазе переливов светлой air-палитры */
.header__phone.lqb--on .lqb__core {
  width: 88%;
  height: 72%;
  background: #0a4b93;
  filter: blur(9px);
}

.header__phone.lqb--on .lqb__label {
  text-shadow: 0 1px 6px rgba(6, 50, 110, 0.6);
}

/* ============================================================
   «Читать все отзывы» на главной (#revAllBtn) — air-вариант,
   всегда включён; текст белый, тёмное ядро для читаемости
   ============================================================ */
.rev-all-btn.lqb--on {
  position: relative;
  z-index: 0;
  background: transparent;
  color: #fff;
}

.rev-all-btn.lqb--on:hover {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

/* у кнопки нет рамки — радиус тела равен радиусу .btn */
.rev-all-btn.lqb--on .lqb__body,
.rev-all-btn.lqb--on .lqb__shine { border-radius: 30px; }

.rev-all-btn.lqb--on .lqb__core {
  width: 88%;
  height: 72%;
  background: #0a4b93;
  filter: blur(9px);
}

.rev-all-btn.lqb--on .lqb__label {
  text-shadow: 0 1px 6px rgba(6, 50, 110, 0.6);
}

/* блик-кант по нижней кромке */
.lqb__shine {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 3px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.6) 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  mix-blend-mode: overlay;
  filter: blur(3px);
}

/* ============================================================
   «Читать Статьи» в карточке блога на главной (index, en/index)
   — air-вариант, всегда включён; иконка+текст белые,
   тёмное ядро для читаемости, как у телефона в шапке
   ============================================================ */
.blog-cta-card__btn.lqb--on {
  position: relative;
  z-index: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.blog-cta-card__btn.lqb--on:hover {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

/* у кнопки нет рамки — радиус тела равен радиусу кнопки (30px) */
.blog-cta-card__btn.lqb--on .lqb__body,
.blog-cta-card__btn.lqb--on .lqb__shine { border-radius: 30px; }

.blog-cta-card__btn.lqb--on .lqb__core {
  width: 88%;
  height: 72%;
  background: #0a4b93;
  filter: blur(9px);
}

/* иконка+текст внутри лейбла — та же flex-раскладка, что была у кнопки */
.blog-cta-card__btn.lqb--on .lqb__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 1px 6px rgba(6, 50, 110, 0.6);
}

/* extra.min.css ставит всем .container overflow-x:hidden, что по спеке
   превращает overflow-y в auto — выступающий за кнопку ореол .lqb__glow
   даёт вертикальный скроллбар на десктопе, когда lqb-кнопка стоит у нижнего
   края контейнера (кнопка блога, тарифы и т.п.). clip режет горизонталь так
   же, но скролл-контейнер не создаёт: вертикаль остаётся visible, ореол
   виден, полоса прокрутки невозможна. html в селекторе — чтобы перебить
   правило extra.min.css, который грузится позже. Старые браузеры без clip
   остаются на hidden-фолбэке (как было). */
html .container {
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
}