/* =========================================================
MosDomofon — MAIN STYLES (header + hero + quiz + LP)
Вариант B — Premium Glass + Симметрия + Hero Start Device
UPDATED / CLEAN
========================================================= */

/* ---------- 1. БАЗА / ПЕРЕМЕННЫЕ ---------- */

:root {
  --bg: #000f5a;
  --glass: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --text-soft: rgba(255,255,255,.9);
  --accent: #007bff;
  --accent-soft: rgba(0,123,255,0.8);
  --border-soft: rgba(255,255,255,0.18);
  --shadow: 0 20px 40px rgba(0,0,0,0.4);
  --radius: 18px;
  --header-h: 72px;
  --admin-bar-h: 46px;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.22);
  --glass-border-light: rgba(255,255,255,0.12);
  --thumb-glass: rgba(255,255,255,0.12);
  --thumb-border: rgba(255,255,255,0.32);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-xl: 0 32px 70px rgba(0,0,0,0.60);
  --shadow-lg: 0 28px 60px rgba(0,0,0,0.55);
  --shadow-md: 0 20px 45px rgba(0,0,0,0.45);
  --shadow-sm: 0 10px 25px rgba(0,0,0,0.25);
}

/* =========================================================
FIX: Background always stays + remove extra horizontal scroll
========================================================= */

/* единый box-sizing (без дублей) */
*,
*::before,
*::after { box-sizing: border-box; }

/* =========================
   BASE LAYOUT (NO SIDE SCROLL)
   ключевое: НЕ max-width:97%
========================= */
html {
  height: 100%;
  width: 100%;
  max-width: none;
  overflow-x: clip; /* стабильнее чем clip в старых браузерах */
}

body {
  min-height: 100%;
  width: 100%;
  max-width: none;
  overflow-x: visible; /* убираем горизонтальный скролл */
  position: relative;
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  color: var(--text);
  line-height: 1.5;
  /* фон рисуем НЕ на body, а на ::before */
  background: none !important;
  background-color: #02092d; /* fallback */
}

/* page layout */
#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#primary { flex: 1 0 auto; }
footer { flex-shrink: 0; }

/* =========================
   BACKGROUND FIX (fast LCP)
   1) сначала ТОЛЬКО градиент
   2) картинку подключаем после load через класс .mdf-bg-loaded
========================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;

  /* быстрый старт */
  background-color: #02092d;
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.78) 0%,
      rgb(0 0 0 / 50%) 45%,
      rgb(0 0 0 / 74%) 100%
    );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  transform: translateZ(0);
}
.mdf-hero__kit {
  max-width: 60%;
  position: absolute;
  left: 0;
  top: -150px;
}
.mdf-video-play{
  border: 1px solid #ffffff;
  padding: 10px;
  border-radius: 50%;
}
.mdf-hero-order{
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
/* Подгружаем фон-картинку ПОСЛЕ первого экрана */
body.mdf-bg-loaded::before {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.78) 0%,
      rgb(0 0 0 / 50%) 45%,
      rgb(0 0 0 / 74%) 100%
    ),
    url(../img/bg-desktop.webp);
}

/* Мобильный фон (после load) */
@media (max-width: 767px) {
  body.mdf-bg-loaded::before {
    background-image:
      linear-gradient(
        to bottom,
        rgb(0 0 0 / 60%) 0%,
        rgb(0 0 0 / 60%) 60%,
        rgb(0 0 0 / 60%) 100%
      ),
      url(../img/bg-mobile.webp);
    background-position: center top;
  }

  .hero-start__device img { filter: none; }

  /* если нужен отступ под fixed header */
  body { padding-top: 60px; }
}

/* desktop offset под header (как у тебя было) */
@media (min-width: 768px) {
  body { margin-top: 75px; }
}

/* =========================
   MOBILE PERF TUNING (LCP)
   убираем тяжёлый blur/тени на телефонах
========================= */
@media (max-width: 767px) {
  .hero__content,
  .hero-start,
  .quiz,
  .review-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero__content,
  .hero-start,
  .quiz {
    box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
  }

  .section-kicker {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =========================
   ВАЖНО: 100vw -> 100%
   100vw часто даёт "лишний" скролл из-за scrollbar
========================= */
.mobile-menu {
  width: 100% !important;
  max-width: 100% !important;
}

/* страховка от абсолютов/декора */
.hero,
.lp-intro,
.lp-section{
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
}

/* manrope */
@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2');
}

/* =========================================================
SECTION HEAD
========================================================= */
.section-head { text-align: center; margin-bottom: 48px; }

.section-kicker {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 40px;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.06);
  margin-bottom: 14px;
}

.section-title {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.25;
}
.section-title span { color: var(--accent); }

.section-subtitle {
  font-size: 18px;
  color: var(--text-soft);
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================================
BUTTONS
========================================================= */
.mdf-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 50%;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;

  background: #23292d;
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.mdf-video-btn:hover {
  background: rgba(10, 28, 82, 0.9);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.mdf-video-btn:active {
  transform: translateY(0);
}

.mdf-video-btn:focus-visible {
  outline: none;
  border-color: rgba(0, 195, 255, 0.7);
  box-shadow:
    0 0 0 3px rgba(0, 195, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

.mdf-video-btn__icon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-block;

  border-radius: 50%;
  background: linear-gradient(135deg, #11e1d4 0%, #1890ff 100%);
  box-shadow: 0 4px 10px rgba(24, 144, 255, 0.28);
}

.mdf-video-btn__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 0;
  height: 0;

  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #ffffff;

  transform: translate(-35%, -50%);
}

@media (max-width: 767px) {
  .mdf-video-btn {
    min-height: 42px;
    padding: 11px 14px;
    font-size: 13px;
    gap: 8px;
    white-space: normal;
  }

  .mdf-video-btn__icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }

  .mdf-video-btn__icon::before {
    border-top-width: 3.5px;
    border-bottom-width: 3.5px;
    border-left-width: 5px;
  }
}
.btn,
.quiz__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(10,20,60,0.35);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.btn:hover,
.quiz__btn:hover {
  background: rgba(18,32,80,0.75);
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  transform: translateY(-1px);
}
.btn:active,
.quiz__btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
.btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #007bff, #00e5ff);
  box-shadow: 0 14px 34px rgba(0,123,255,0.7);
}
.btn--primary:hover { box-shadow: 0 18px 42px rgba(0,123,255,0.85); }

/* A11y focus */
.glass-btn:focus-visible,
.btn:focus-visible,
.quiz__btn:focus-visible,
.nav__list a:focus-visible,
.mobile-menu__list a:focus-visible,
.mdf-submenu-toggle:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}
.mobile-menu__btn{ margin-top: 50px; }

/* =========================================================
HEADER
========================================================= */
.header {
  position: fixed;
  padding: 0 10px;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h, 72px);
  z-index: 9999;
  display: flex;
  align-items: center;
  background: rgb(8 18 68 / 75%);
  border-bottom: 1px solid rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .45s ease,backdrop-filter .45s ease,border .45s ease,height .35s ease;
}
.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* pulse aura */
.header-call::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(rgba(0,255,180,0.55), rgba(0,255,150,0));
  filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  animation: pulseGlow 2.5s infinite ease-in-out;
}
@keyframes pulseGlow {
  0% { opacity: .2; transform: scale(.95); }
  50% { opacity: .55; transform: scale(1.07); }
  100% { opacity: .2; transform: scale(.95); }
}

@media (max-width: 768px) {
  .header { height: 58px; }
  .header.scrolled {
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(16px);
  }
  body.scroll-up .header {
    background: rgba(255,255,255,0);
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
  }
}

/* logo */
/* logo (horizontal, no circle crop) */
.header .logo{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  height: 45px;
  width: auto;              /* было 45px */
  border-radius: 0;         /* было 50% */
}

.header .logo__img{
  display: block;
  height: 38px;             /* чуть меньше высоты шапки */
  width: auto;              /* было inherit */
  max-width: 220px;         /* чтобы не расползался */
  z-index: 5;
  image-rendering: auto;

  border: 0;                /* было 3px */
  border-radius: 0;         /* было 50% */
  object-fit: contain;
}

/* mobile */
@media (max-width: 480px){
  .header .logo{
    height: 42px;
  }
  .header .logo__img{
    height: 32px;
    max-width: 190px;
  }
}

/* nav */
.nav { display: flex; }
.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center; gap: 32px;
}
.nav__list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  padding: 4px 0;
  position: relative;
}
.nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00e5e5, #007bff);
  opacity: 0;
  transition: width .22s ease, opacity .22s ease;
}
.nav__list > li > a:hover::after { width: 100%; opacity: 1; }
.nav__list > li.current-menu-item > a { color: #fff; }
.nav__list > li.current-menu-item > a::after { width: 100%; opacity: 1; }

.nav__list > li.menu-item-has-children { position: relative; }
.nav__list > li.menu-item-has-children > a { padding-right: 16px; }
.nav__list > li.menu-item-has-children > a::before {
  content: "▾";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-55%);
  font-size: 11px;
  opacity: .9;
}
.nav__list > li.menu-item-has-children > .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: rgba(10,18,45,0.97);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav__list > li.menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__list > li.menu-item-has-children > .sub-menu li a {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  color: rgba(255,255,255,0.95);
}
.nav__list > li.menu-item-has-children > .sub-menu li a:hover {
  background: rgba(255,255,255,0.08);
}

/* burger */

/* toast */
#toast.toast {
  position: fixed !important;
  left: 50% !important;
  bottom: 32px !important;
  transform: translateX(-50%) translateY(20px);
  min-width: 220px;
  max-width: 90vw;
  padding: 14px 18px 14px 46px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2147483647 !important;
  isolation: isolate;
}
#toast.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast.toast-success {
  background: linear-gradient(135deg, rgba(47,143,255,0.98), rgba(0,111,255,0.98));
}
#toast.toast-error {
  background: linear-gradient(135deg, rgba(220,38,38,0.98), rgba(185,28,28,0.98));
}
#toast::before {
  content: "✔";
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: .95;
}
#toast.toast-error::before { content: "⚠"; }
@media (max-width: 575px) {
  #toast.toast {
    bottom: 20px;
    font-size: 14px;
    padding: 12px 16px 12px 42px;
  }
}

/* share btn */
/* .share-modern { display: flex; gap: 12px; margin-top: 12px; }
.share-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: .25s ease;
}
.share-btn svg { width: 20px; height: 20px; fill: #fff; opacity: .9; }
.share-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
} */

/* header call */
.header-call {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-right: 12px;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.header-call:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
@media (max-width: 768px) {
  .header-call { width: 44px; height: 44px; margin-right: 8px; }
}

/* header phone: иконка в боксе + кликабельный номер */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.header-phone .header-call { margin-right: 0; flex: 0 0 auto; }
.header-phone svg { display: block; }
.header-phone__number { font-size: 17px; letter-spacing: .2px; }
.header-phone:hover .header-phone__number { opacity: .85; }
@media (max-width: 768px) {
  /* на мобилке оставляем только иконку */
  .header-phone__number { display: none; }
}

.header-spacer { height: var(--header-h); }

/* =========================================================
   BURGER + MOBILE MENU + SUBMENU (FINAL CLEAN)
   фикс: убираем горизонтальный скролл (ездит только panel)
========================================================= */

/* ✅ ВАЖНО: НЕ ставим html,body overflow-x:hidden — ломает fixed background
   Глобальный фикс уже выше: html overflow-x:clip, body overflow-x:visible */

/* BURGER BUTTON */
.burger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 1100;

  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.burger span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #fff;
  transition: transform .28s ease, opacity .22s ease;
}

.burger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* MOBILE OVERLAY (фикс: overlay НЕ уезжает, только fade) */
.mobile-menu {
  z-index: 1090;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  overflow: hidden; /* ✅ чтобы ничего не распирало вбок */
  transition: opacity .28s ease, visibility .28s ease;

  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  transform: none !important;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* RIGHT PANEL (ездит только панель) */
.mobile-menu__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;

  width: min(360px, 92vw);
  max-width: 92vw;

  padding: 26px 20px 28px;
  border-left: 1px solid rgba(255,255,255,.16);
  background: rgba(8,14,44,.82);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  transition: transform .28s ease;
  transform: translateX(110%);
  will-change: transform;

  contain: layout paint; /* ✅ дополнительно режем распирание/overflow */
}

.mobile-menu.active .mobile-menu__panel {
  transform: translateX(0);
}

@media (max-width: 360px) {
  .mobile-menu__panel {
    width: 92vw;
    padding: 22px 16px 24px;
  }
}

/* MENU LIST */
.mobile-menu__list {
  list-style: none;
  margin: calc(var(--header-h, 64px) + 20px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 768px) {
  .mobile-menu__list { margin-top: 88px; }
}

.mobile-menu__list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

/* PARENT WITH SUBMENU */
.mobile-menu__list .menu-item-has-children {
  display: block;
}

.mobile-menu__list .menu-item-has-children > a {
  padding-right: 0;
}

/* TOGGLE BUTTON (JS inserts it inside <a>) */
.mdf-submenu-toggle {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.mdf-submenu-toggle svg {
  width: 35px;
  height: 35px;
  transition: transform .25s ease;
}

.mobile-menu__list .menu-item-has-children.open > a .mdf-submenu-toggle svg {
  transform: rotate(180deg);
}

/* SUBMENU */
.mobile-menu__list .menu-item-has-children > .sub-menu {
  width: 100%;
  margin: 8px 0 0;
  padding: 6px 0 4px 14px;
  border-left: 1px solid rgba(255,255,255,.12);

  display: none;
}

.mobile-menu__list .menu-item-has-children.open > .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-menu__list .sub-menu a {
  color: rgba(255,255,255,.84);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}

.mobile-menu__list .sub-menu a:hover,
.mobile-menu__list .sub-menu a:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* BREAKPOINTS */
@media (max-width: 1024px) {
  .burger { display: inline-flex; }
  .nav { display: none !important; }
}

/* A11Y FOCUS */
.burger:focus-visible,
.mobile-menu__list a:focus-visible,
.mdf-submenu-toggle:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

/* =========================================================
HERO
========================================================= */
.hero{
  position: relative;
  min-height: calc(100svh - 88px);
  display: flex;
  align-items: center;
  padding: 24px 0;
  overflow: hidden;
  background: #02092d;
}

@supports not (height: 100svh){
  .hero{
    min-height: calc(100vh - 88px);
  }
}

.hero__bg-picture{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__bg-seo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* твой градиент оставляем */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  animation: heroContentIn .8s ease-out .15s both;
}

@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__content,
.hero__right {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.hero__content-wrap.hero__right{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(18px, 3vw, 34px);
  width: 100%;
  max-width: 760px;
}

.hero__content-wrap.hero__right .hero__content{
  width: 100%;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: 24px;
  background: rgb(10 16 35 / 84%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
  color: #fff;
}

.hero__content-wrap.hero__right .hero__title{
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(26px, 2.35vw, 44px);
  text-wrap: balance;
}

.hero__content-wrap.hero__right .hero__subtitle{
  margin: 0 0 16px;
  color: rgba(255,255,255,0.88);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  max-width: 58ch;
}

.hero__content-wrap.hero__right .hero__benefits{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hero__content-wrap.hero__right .hero__benefits li{
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.45;
}

.hero__content-wrap.hero__right .hero__benefits li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 255, 214, 0.95);
  box-shadow: 0 0 0 4px rgba(0,255,214,0.14);
}

.hero__content-wrap.hero__right .hero__brands{
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 2px 0 10px;
}

.hero__content-wrap.hero__right .hero__brands .brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}

.hero__content-wrap.hero__right .hero__rating{
  margin: 0 0 16px;
  color: rgba(255,255,255,0.82);
  font-size: 13px;
}

.hero__content-wrap.hero__right .offer__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  align-self: center; /* кнопка «Узнать стоимость» по центру блока */
  margin-left: auto;
  margin-right: auto;
  height: 54px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(90deg, rgba(0,255,214,0.95), rgba(0,140,255,0.95));
  color: #ffffff !important;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.hero__content-wrap.hero__right .offer__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 20px 36px rgba(0,0,0,0.42);
}

.hero__content-wrap.hero__right .offer__btn:active{
  transform: translateY(0);
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
.quiz__intro{
  width: 50%;
  padding: 20px;
}
@media (max-width: 980px){
  .hero{
    min-height: auto;
    padding: 20px 0;
    align-items: flex-start;
  }

  .hero__content-wrap.hero__right{
    max-width: none;
    padding: 0;
  }

  .hero__content-wrap.hero__right .hero__content{
    border-radius: 20px;
  }

  .hero__grid{
    align-items: flex-start;
  }
}

@media (max-width: 560px){
  .hero__content-wrap.hero__right .hero__benefits{
    gap: 9px;
  }

  .hero__content-wrap.hero__right .hero__benefits li{
    font-size: 13px;
    padding-left: 26px;
  }

  .hero__content-wrap.hero__right .offer__btn{
    height: 52px;
    max-width: none;
  }
}
/* =========================================================
QUIZ
========================================================= */
.quiz {
  position: relative;
  min-height: 450px;
  display: flex;
  width: 100%;
  gap: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 22px 22px 10px;
  background: rgb(0 9 88 / 58%);
  border: 1px solid rgb(255 255 255 / 39%);
  backdrop-filter: blur(80px) saturate(0.5);
  color: #fff;
  font-size: 14px;
}

/* one quiz error block + one keyframes */
.quiz-error {
  animation: quizShake .35s ease;
  box-shadow: 0 0 0 3px rgba(255,70,70,0.28);
  border-radius: 18px;
}
.quiz-error .quiz__options .opt span {
  box-shadow: 0 0 0 2px rgba(248,113,113,0.45);
}
@keyframes quizShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.quiz__benefits{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 40px;
}
.hero-start__title{

}
.hero-start__content{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-start__subtitle{
  margin-bottom: 50px;
}
.quiz__progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.quiz__progress .dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
  transition: all .25s ease;
}
.quiz__progress .dot.dot--active {
  width: 26px;
  background: linear-gradient(135deg, #00e5e5, #007bff);
}

.quiz__title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
}
.quiz__subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 16px;
}

/* options */
.quiz__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 24px;
}
.quiz__options .opt {
  display: block;
  cursor: pointer;
}
.quiz__options .opt input { display: none; }
.quiz__options .opt span {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.10);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.quiz__options .opt:hover span {
  box-shadow: 0 12px 28px rgba(15,23,42,.28);
  transform: translateY(-1px);
}
.quiz__options .opt input:checked + span {
  border-color: rgba(0,229,229,0.9);
  box-shadow: 0 0 0 1px rgba(0,229,229,0.45), 0 16px 32px rgba(15,23,42,.22);
  background: rgba(240,249,255,0.92);
  color: #0b1120;
  font-weight: 600;
}
@media (max-width: 480px) {
  .quiz__options .opt span { padding: 12px 14px; font-size: 14px; }
}

/* fields */
.quiz .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.quiz .field span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.quiz .field input,
.quiz .field textarea,
.quiz__field input,
.quiz__field textarea,
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.40);
  background: rgba(3,10,40,0.92);
  color: #fff;
  outline: none;
  font-size: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.65);
}
.quiz .field textarea,
.quiz__field textarea,
.field textarea {
  resize: none;
  min-height: 60px;
}
.quiz__field input::placeholder,
.quiz__field textarea::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255,255,255,0.55);
}
.quiz__field input:focus,
.quiz__field textarea:focus,
.field input:focus,
.field textarea:focus,
.quiz .field input:focus,
.quiz .field textarea:focus {
  border-color: rgba(0,229,229,0.8);
}

/* upload (single final block) */
.upload {
  position: relative;
  margin-top: 8px;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.upload input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
}
.upload__hint {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.upload__hint svg { color: #fff; flex-shrink: 0; }
.upload__text strong {
  display: block;
  font-size: 15px;
  color: #fff;
}
.upload__text small {
  display: block;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

.quiz__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.quiz__nav { display: flex; gap: 8px; margin-top: 10px; }

.mdf-policy a {
  color: #d9d9d9ba;
  text-decoration: underline;
}

.quiz__prev {
  background: rgba(8,16,54,0.3);
  border-color: rgba(255,255,255,0.45);
  box-shadow: none;
}
.quiz__prev:hover { background: rgba(18,32,80,0.7); }

.quiz__submit {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(34,197,94,0.7);
}
.quiz__submit:hover { box-shadow: 0 18px 42px rgba(34,197,94,0.9); }

.quiz__note {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.quiz__step { display: none; }
.quiz__step.quiz__step--active { display: block; }

#quizStartGlass.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}

/* glass blocks/buttons */
.glass-block {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(22px);
  border-radius: 28px;
  padding: 40px 48px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 51%), inset 0 0 30px rgba(255,255,255,0.15);
  transition: all .35s ease;
}
.glass-block:hover {
  background: rgba(255,255,255,0.10);
  box-shadow: 0 25px 70px rgba(0,0,0,0.65), inset 0 0 35px rgba(255,255,255,0.22);
}

.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.08), 0 4px 18px rgba(0,0,0,0.25);
  transition: all .25s ease;
  cursor: pointer;
}
.glass-btn:hover {
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.14), 0 4px 22px rgba(0,0,0,0.35);
}
.glass-btn:active {
  transform: scale(0.97);
  box-shadow: inset 0 0 22px rgba(255,255,255,0.22), 0 2px 12px rgba(0,0,0,0.4);
}

/* responsive perf tuning */
@media (max-width: 768px) {
  .hero{
    background: none;
  }
  .glass-block {
    padding: 24px;
    border-radius: 22px;
    backdrop-filter: blur(14px);
  }
}
@media (max-width: 480px) {
  .glass-block { padding: 18px; border-radius: 18px; }
  .hero-start__title { font-size: 28px; }
  .glass-btn {
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 16px;
  }
}

/* =========================================================
LP-БЛОКИ (Premium Glass)
ВАЖНО: СКОУПИМ НА LP, чтобы не ломать весь сайт
Нужно: обертка .mdf-lp вокруг LP-страницы/блоков
========================================================= */

/* 1) Секция LP: reveal только внутри LP */
.mdf-lp .lp-section {
  position: relative;
  padding: 72px 0;
  color: rgba(255,255,255,0.92);

  opacity: 0;
  transform: translateY(24px);

  overflow: visible;
  transition: opacity .7s ease, transform .7s ease;
}

/* Активная секция — показывается */
.mdf-lp .lp-section.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2) Текст внутри секций LP — ОДИН раз, без дублей */
.mdf-lp .lp-section > .container > p {
  max-width: 820px;
  margin: 24px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
}

/* 3) Заголовки LP */
.mdf-lp .lp-title {
  font-size: 38px;
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 28px;
  max-width: 620px;
  color: #fff;
  text-shadow: 0 4px 22px rgba(0,0,0,0.45);
  letter-spacing: -0.3px;
}

.mdf-lp .lp-title--wide {
  width: 100%;
  max-width: none;
  text-align: center;
  font-size: 42px;
  margin: 0 0 12px;
}

/* =========================================================
PREMIUM GRID SYSTEM — универсальная сетка LP-блоков
(ОДНА версия: без дублей .mdf-lp и без повторов)
========================================================= */

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
  margin-top: 32px;
}

.lp-card {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: rgba(8, 18, 68, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
/* сияние */
.lp-card::before {
  content: "";
  position: absolute;
  inset: -60%;
  background:
    radial-gradient(circle at top left, rgba(0, 229, 229, 0.25), transparent 60%),
    radial-gradient(circle at bottom right, rgba(0, 123, 255, 0.25), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Появление карточек (если ты используешь card-visible) */
.lp-card.card-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all .65s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Hover */
.lp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 65px rgba(0,0,0,0.70);
  border-color: rgba(0,229,229,0.55);
  background: rgba(14, 28, 90, 0.92);
}
.lp-card:hover::before { opacity: 0.4; }

/* Текст внутри */
.lp-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}
.lp-card p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}
.lp-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/* Иконки для карточек */
.lp-card__icon {
  font-size: 34px;
  margin-bottom: 12px;
  opacity: .92;
}

/* Кнопка внутри карточки */
.lp-card .lp-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-top: auto;
  border-radius: 12px;
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  transition: background .25s ease, transform .25s ease;
}
.lp-card .lp-btn:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
}

/* 7) Адаптив LP */
@media (max-width: 768px) {
  .mdf-lp .lp-section { padding: 56px 0; }
  .mdf-lp .lp-title { font-size: 28px; margin-bottom: 18px; }
  .mdf-lp .lp-title--wide { font-size: 30px; }
}

/* =========================================================
7A. LP INTRO — Почему выбирают MosDomofon
========================================================= */

.lp-intro {
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Слой 1.5 — фото-фон на весь экран (добавь url(...) если нужно фото) */
.lp-intro::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.70) 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.45;
  transform: scale(1.02) translateY(var(--intro-bg-shift, 0px));
  pointer-events: none;
  z-index: 0;
}

/* Слой 2 — светящиеся блюры, мягкое сияние */
.lp-intro::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 0% 20%, rgba(0,229,229,0.34), transparent 60%),
    radial-gradient(circle at 100% 80%, rgba(0,123,255,0.40), transparent 65%);
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Контент над слоями */
.lp-intro > .container {
  position: relative;
  z-index: 2;
}

/* GRID */
.lp-intro__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 52px;
  max-width: 1280px;
  margin: 0 auto;
}

/* СТЕКЛО: Левая карточка (текст) */
.lp-intro__content {
  position: relative;
  max-width: 620px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(5,15,55,0.96), rgba(10,25,80,0.78));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 26px 60px rgba(0,0,0,0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.lp-intro__content p {
  margin-bottom: 14px;
  max-width: 780px;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.90);
}
.lp-intro__content p strong {
  font-weight: 700;
  color: #fff;
}

/* Правая колонка — glass-карточки УТП */
.lp-intro__side {
  max-width: 560px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.lp-intro__features {
  width: 100%;
  max-width: 430px;
  display: grid;
  gap: 18px;
}

.lp-intro-feature {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(8, 18, 68, 0.75);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 22px 48px rgba(0,0,0,0.68);
  backdrop-filter: blur(18px);

  opacity: 0;
  transform: translateY(22px);

  transition:
    opacity .6s ease-out,
    transform .6s ease-out,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

/* сияние */
.lp-intro-feature::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at top left, rgba(0,229,229,0.30), transparent 65%),
    radial-gradient(circle at bottom right, rgba(0,123,255,0.28), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.lp-intro-feature:hover {
  border-color: rgba(0,229,229,0.55);
  background: rgba(12, 27, 90, 0.96);
  box-shadow: 0 30px 70px rgba(0,0,0,0.90);
}
.lp-intro-feature:hover::before { opacity: 0.45; }

.lp-intro-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.18), rgba(8,18,68,0.92));
  box-shadow: 0 12px 28px rgba(0,0,0,0.7);
}

.lp-intro-feature__text h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.lp-intro-feature__text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

/* Появление при скролле */
.lp-section.section-visible .lp-intro-feature {
  opacity: 1;
  transform: translateY(0);
}
.lp-section.section-visible .lp-intro-feature:nth-child(1) { transition-delay: .05s; }
.lp-section.section-visible .lp-intro-feature:nth-child(2) { transition-delay: .12s; }
.lp-section.section-visible .lp-intro-feature:nth-child(3) { transition-delay: .19s; }
.lp-section.section-visible .lp-intro-feature:nth-child(4) { transition-delay: .26s; }

/* 3 PNG — плавающие устройства (3D-эффект) */
.lp-intro__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.lp-intro__device {
  position: absolute;
  opacity: 0.75;
  filter: drop-shadow(0 32px 60px rgba(0,0,0,0.85));
  transform-origin: center center;
}

/* Панель CTV — справа сверху */
.lp-intro__device--panels {
  right: -40px;
  top: 6%;
  width: 420px;
  animation: introFloatA 8s ease-in-out infinite;
}

/* Модуль МСК — справа снизу */
.lp-intro__device--module {
  right: 16%;
  bottom: -40px;
  width: 280px;
  animation: introFloatB 10s ease-in-out infinite;
}

/* Монитор — слева снизу */
.lp-intro__device--monitor {
  left: -60px;
  bottom: -70px;
  width: 340px;
  opacity: 0.55;
  animation: introFloatC 11s ease-in-out infinite;
}

/* Плавные покачивания */
@keyframes introFloatA {
  0%, 100% { transform: translate3d(0,0,0) rotate(-2deg); }
  50%      { transform: translate3d(0,-12px,0) rotate(1deg); }
}
@keyframes introFloatB {
  0%, 100% { transform: translate3d(0,0,0) rotate(1.5deg); }
  50%      { transform: translate3d(0,-10px,0) rotate(-1deg); }
}
@keyframes introFloatC {
  0%, 100% { transform: translate3d(0,0,0) rotate(-3deg); }
  50%      { transform: translate3d(0,-14px,0) rotate(0deg); }
}
/* =========================================================
USLUGI — NEW DESIGN (под текущую разметку)
Селекторы: .lp-services__grid + .lp-services-card
========================================================= */

.lp-services__lead{
  max-width: 920px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.86);
  text-align: center;
}

/* сетка */
.lp-services__grid{
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 22px;
}

/* карточка */
.lp-services-card{
  position: relative;
  flex: 1 1 300px;
  max-width: 300px;
  width: 100%;

  padding: 20px 10px 18px;
  border-radius: 22px;

  background: rgba(8, 18, 68, 0.62);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  display: flex;
  flex-direction: column;

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

.lp-services-card::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at top left, rgba(0,229,229,0.25), transparent 60%),
    radial-gradient(circle at bottom right, rgba(0,123,255,0.25), transparent 60%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .3s ease;
}

.lp-services-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 65px rgba(0,0,0,0.70);
  border-color: rgba(0,229,229,0.55);
  background: rgba(14, 28, 90, 0.92);
}
.lp-services-card:hover::before{ opacity: .45; }

/* =========================================================
   МЕДИА
   ВАЖНО: картинку выпускаем на края карточки (full-bleed),
   а текст остаётся с padding карточки.
========================================================= */

.lp-services-card__media{
  width: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  margin: 0 0 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* вариант с иконкой */
.lp-services-card__icon{
  width: 64px;
  height: 64px;
  border-radius: 18px;

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

  font-size: 28px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.10);
  margin: 18px 0;
}

/* вариант с картинкой — full-bleed до краёв карточки */
.lp-services-card__media.lp-services-card__media--img{
  aspect-ratio: 1 / 1;

  /* выпускаем на края: компенсируем padding карточки (20px) */
  margin: -20px -10px 14px;

  /* чтобы картинка прилегала к краям красиво */
  border-radius: 22px 22px 0 0;

  /* обычно рамка/фон мешают "вплотную", убираем */
  border: 0;
  background: transparent;
}

.lp-services-card__media.lp-services-card__media--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* текст */
.lp-services-card__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.lp-services-card__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
}

/* кнопка вниз */
.lp-services-card__actions{
  margin-top: auto;
  padding-top: 16px;
}

.lp-services-card__btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 18px;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 600;

  color: #fff;
  border: 1px solid rgba(0,255,204,0.55);
  background: linear-gradient(90deg,#00ffd0 0%,#00aaff 100%);
  box-shadow: 0 0 22px rgba(0,255,255,0.25);

  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}

.lp-services-card__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(0,255,255,0.45);
  filter: brightness(1.02);
}

.lp-services-card__btn:active{
  transform: translateY(0);
}

@media (max-width: 575px){
  /* .lp-services-card{
    max-width: 520px;
  } */
}

/* ЦЕНЫ */
.lp-card--price {
  border: 1px solid rgba(0, 229, 229, 0.5);
  background:
    radial-gradient(circle at top left, rgba(0, 229, 229, 0.15), transparent 55%),
    rgba(8, 18, 68, 0.8);
}
.lp-card--price .lp-price {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #00e5e5;
}
.lp-card--price ul { margin-top: 10px; }

/* ПРЕИМУЩЕСТВА */
.lp-advantages .lp-card {
  padding: 20px 18px 18px;
}

/* БРЕНДЫ */
.lp-brands-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 16px;
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(8, 18, 68, 0.8);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* КАК МЫ РАБОТАЕМ — Steps */
.lp-steps { background: transparent; }

.lp-steps-list {
  counter-reset: step-count;
  margin-top: 24px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.lp-steps-list li {
  position: relative;
  padding: 18px 18px 16px 56px;
  border-radius: 18px;
  background: rgba(8, 18, 68, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 14px;
  line-height: 1.6;
}

.lp-steps-list li::before {
  counter-increment: step-count;
  content: counter(step-count);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e5e5, #007bff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #020b3a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.lp-steps-list strong {
  display: block;
  margin-bottom: 4px;
}
/* =========================================================
   LP SEO block — BEAUTY (MosDomofon)
========================================================= */
.lp-seo{
  padding-top: 34px;
  padding-bottom: 34px;
}

.lp-seo .lp-seo__panel{
  max-width: none;      /* было 980px */
  width: 100%;
  margin: 0;            /* было auto */
  padding: 28px 28px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 46px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

.lp-seo .lp-seo__panel h3{
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  color: rgba(255,255,255,0.96);
  letter-spacing: 0.2px;
}

.lp-seo .lp-seo__panel h3 + p{
  margin-top: 0;
}

.lp-seo .lp-seo__panel p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
}

.lp-seo .lp-seo__panel p:last-of-type{
  margin-bottom: 0;
}

/* subtle divider between sections */
.lp-seo .lp-seo__panel h3:not(:first-child){
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* actions */
.lp-seo .lp-seo__actions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-seo .lp-seo__btn{
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* mobile */
@media (max-width: 767px){
  .lp-seo .lp-seo__panel{
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .lp-seo .lp-seo__panel h3{
    font-size: 18px;
  }

  .lp-seo .lp-seo__panel p{
    font-size: 15px;
    line-height: 1.7;
    max-width: 100%;
  }

  .lp-seo .lp-seo__actions{
    gap: 8px;
  }

  .lp-seo .lp-seo__btn{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
/* ========= PREMIUM GALLERY — V3 ========= */

.lp-subtitle--wide {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  color: rgba(255,255,255,.85);
}

/* GRID */
.lp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 32px;
}

/* =========================================================
PREMIUM GALLERY — V3 (Glass Reveal)
========================================================= */

.lp-gallery-card {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: opacity .7s ease, transform .7s ease, box-shadow .35s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);

  opacity: 0;
  transform: translateY(40px);

  display: flex;
  flex-direction: column;
}

/* активная карточка */
.lp-gallery-card.card-visible {
  opacity: 1;
  width: 100%;
  transform: translateY(0);
  transition: all .7s ease;
}

.lp-gallery-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 20px 45px rgba(0,0,0,0.55);
}

/* обёртка для изображения */
.lp-gallery-image-wrap {
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* изображение */
.lp-gallery-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s ease;
}

.lp-gallery-card:hover .lp-gallery-image-wrap img {
  transform: scale(1.06);
}

/* контент */
.lp-gallery-content {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  flex: 1;
}

/* иконка + h3 в линию */
.lp-card__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lp-gallery-icon {
  font-size: 26px;
  line-height: 1;
  display: flex;
}

/* CAPTION */
.lp-gallery-caption {
  padding: 22px 20px 28px;
}
.lp-gallery-caption h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.lp-gallery-caption p {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
}

/* BUTTON */
.lp-gallery-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  backdrop-filter: blur(12px);
  transition: background .3s ease, transform .3s ease;
  margin-top: auto;
}
.lp-gallery-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

/* =========================================================
MosDomofon — TESTIMONIALS (Premium Glass Frosted)
========================================================= */

.lp-testimonials {
  position: relative;
  padding: 72px 0 80px;
  color: var(--text, #ffffff);
  z-index: 2;
}

.lp-testimonials .lp-container {
  position: relative;
  z-index: 2;
}

.lp-testimonials-head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.lp-testimonials-head .lp-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
}

.lp-testimonials-head .lp-title {
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.lp-testimonials-head .lp-title span {
  color: var(--accent, #007bff);
}

.lp-testimonials-head .lp-subtitle {
  font-size: 15px;
  opacity: .9;
}

/* GRID */
.lp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* CARD BASE */
.review-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: 24px;
  background:
    radial-gradient(140% 220% at 0% 0%,
      rgba(255,255,255,0.24),
      rgba(11,24,72,0.95));
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #fff;
  display: flex;
  isolation: isolate;
  flex-direction: column;
  gap: 18px;
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

.review-card__glow {
  content: "";
  position: absolute;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,229,229,0.4), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0,123,255,0.35), transparent 55%);
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  inset: -30%;
}

/* HOVER / FOCUS */
.review-card:hover,
.review-card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 26px 60px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  border-color: rgba(255,255,255,0.6);
}

/* TOP ROW */
.review-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.review-card__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.9), rgba(0,123,255,1));
  color: #051332;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.review-card__avatar--office {
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.review-card__info {
  flex: 1 1 auto;
  min-width: 0;
}

.review-card__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.review-card__name {
  font-size: 17px;
  font-weight: 600;
}

.review-card__city {
  font-size: 14px;
  opacity: .8;
}

.review-card__meta {
  font-size: 13px;
  opacity: .9;
}

.review-card__tag {
  display: inline-flex;
  align-items: center;
  text-align: center;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.22);
}

/* QUOTE ICON */
.review-card__quote-icon {
  margin-left: auto;
  font-size: 40px;
  line-height: 1;
  opacity: 0.32;
  transform: translateY(-4px);
}

/* BODY */
.review-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft, rgba(255,255,255,0.94));
}
.review-card__body p { margin: 0; }

/* BOTTOM */
.review-card__bottom {
  margin-top: auto;
  font-size: 13px;
  opacity: .9;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.review-card__service {
  display: inline-flex;
  align-items: center;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .lp-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .lp-testimonials { padding: 56px 0 60px; }
  .lp-testimonials-grid { grid-template-columns: minmax(0, 1fr); }
  .review-card { padding: 22px 20px 20px; }
}

@media (max-width: 600px) {
  .lp-testimonials-head .lp-title { font-size: 24px; }
  .review-card__top { align-items: center; }
  .review-card__quote-icon { display: none; }
}

/* ===========================================================
CTA MASTER — SECTION BACKGROUND
=========================================================== */
.lp-cta-master { padding: 80px 0 90px; }

/* Заголовок по центру */
.cta-master-title {
  text-align: center;
  margin-bottom: 36px;
}

.cta-master-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

/* ===========================================================
CARD — GLASSMORPHISM CONTAINER (по центру)
=========================================================== */
.cta-master-card {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0; /* внутренний паддинг внутри .cta-master-inner */
  border-radius: 26px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

/* Внутренняя сетка: 60% / 40% */
.cta-master-inner {
  display: grid;
  grid-template-columns: 2fr 2fr; /* 60 / 40 */
  align-items: flex-start;
  gap: 0;
}

/* =========================================
LEFT SIDE (PHOTO + TEXT FOR TABLET/MOBILE)
========================================= */
.cta-master-left {
  position: relative;
  padding: 32px 34px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Фото мастера — только для desktop */
.cta-master-photo {
  display: block;
  text-align: center;
  position: absolute;
  inset: 0;
  transform: translateY(292%);
}

.cta-master-photo img {
  max-width: 70%;
  height: 600px;
  display: inline-block;
}

/* Текст-призыв — по умолчанию скрыт (на ПК не нужен) */
.cta-master-copy {
  display: none;
  color: #fff;
}

.cta-master-copy h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.cta-master-copy p {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 14px;
}

.cta-master-copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta-master-copy ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
  font-size: 15px;
  opacity: 0.95;
}

.cta-master-copy ul li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
}

/* =========================================
RIGHT SIDE (FORM)
========================================= */
.cta-master-right {
  padding: 32px 34px;
  border-left: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
}

.cta-master-form { width: 100%; }

/* большие поля ввода */
.cta-master-form .form-group { margin-bottom: 16px; }

.cta-master-form input,
.cta-master-form textarea {
  width: 100%;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 12px;
}

/* иконки в полях */
.icon-wrap { position: relative; }

.icon-field {
  position: absolute;
  left: 14px;
  top: 50%;
  font-size: 18px;
  opacity: 0.9;
  pointer-events: none;
}

.icon-wrap input,
.icon-wrap textarea {
  padding-left: 44px !important;
}

/* кнопка */
.cta-master-form .submit-btn {
  width: 100%;
  margin-top: 6px;
}

/* ===========================================================
ADAPTIVE — TABLET (<= 1024px)
=========================================================== */
@media (max-width: 1024px) {

  .lp-cta-master { padding: 60px 0 70px; }

  .cta-master-card { max-width: 960px; }

  .cta-master-inner { grid-template-columns: 1fr 1fr; /* текст слева, форма справа */ }

  /* скрываем фото мастера, показываем текст */
  .cta-master-photo { display: none; }
  .cta-master-copy { display: block; }

  .cta-master-left,
  .cta-master-right { padding: 26px 26px; }

  .cta-master-title h2 { font-size: 28px; }
}

/* ===========================================================
ADAPTIVE — MOBILE (<= 768px)
=========================================================== */
@media (max-width: 768px) {

  .lp-cta-master { padding: 50px 0 60px; }

  .cta-master-card { border-radius: 22px; }

  .cta-master-inner { grid-template-columns: 1fr; /* стек вниз */ }

  /* порядок: сначала текст, потом форма */
  .cta-master-left { order: 1; }

  .cta-master-right {
    order: 2;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.16);
  }

  /* на мобильном оставляем только текст, фото не показываем */
  .cta-master-photo { display: none; }
  .cta-master-copy { display: block; }
}

/* ===========================================================
SMALL MOBILE (<= 480px)
=========================================================== */
@media (max-width: 480px) {

  .cta-master-title h2 { font-size: 24px; }

  .cta-master-left,
  .cta-master-right { padding: 10px; }

  .cta-master-copy h3 { font-size: 20px; }

  .cta-master-copy p { font-size: 14px; }

  .cta-master-copy ul li { font-size: 13px; }
}

/* =========================================================
SEO TEXT — Premium Readable Glass Block
========================================================= */

.faq-seo-text {
  margin-top: 48px;
  padding: 28px 32px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Заголовки внутри SEO-блока */
.faq-seo-text h3 {
  margin: 28px 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  position: relative;
  padding-left: 16px;
}

/* Акцентная вертикальная линия */
.faq-seo-text h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: calc(100% - 6px);
  border-radius: 2px;
  background: linear-gradient(180deg, #4fc3ff, #0084ff);
  box-shadow: 0 0 12px rgba(0,140,255,0.6);
}

/* Первый заголовок — без лишнего отступа сверху */
.faq-seo-text h3:first-child { margin-top: 0; }

/* Текст */
.faq-seo-text p {
  position: relative;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  padding-bottom: 10px;
}

.faq-seo-text p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.3);
}

/* Выделения */
.faq-seo-text strong {
  color: #ffffff;
  font-weight: 600;
}

/* Последний абзац — без отступа */
.faq-seo-text p:last-child { margin-bottom: 0; }

/* Адаптив */
@media (max-width: 768px) {
  .faq-seo-text { padding: 22px 20px; }
  .faq-seo-text h3 { font-size: 18px; }
  .faq-seo-text p { font-size: 15px; line-height: 1.65; }
}

/* =========================================================
FAQ — Premium Glass + iOS Accordion Style
MosDomofon — FINAL VERSION
========================================================= */

/* Контейнер списка вопросов */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

/* Одна карточка */
.faq-item {
  position: relative;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Активная карточка — лёгкое “приподнимание” */
.faq-item.active {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* Левый актив-бар */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 0;
  opacity: 0;
  background: linear-gradient(to bottom, #0084ff, #4fc3ff);
  box-shadow: 0 0 12px rgba(0,140,255,0.6);
  transition: height .35s ease, opacity .25s ease;
}
.faq-item.active::before {
  height: 100%;
  opacity: 1;
}

/* Кнопка вопроса */
.faq-question {
  width: 100%;
  padding: 20px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  transition: background .25s ease;
}

/* Hover эффект */
.faq-question:hover { background: rgba(255,255,255,0.07); }

/* Стрелка iOS */
.faq-arrow {
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255,255,255,0.88);
  border-bottom: 2px solid rgba(255,255,255,0.88);
  transform: rotate(45deg);
  transition: transform .25s ease, opacity .25s ease;
  opacity: 0.9;
}

/* Активация стрелки */
.faq-item.active .faq-arrow {
  transform: rotate(-135deg);
  opacity: 1;
}

/* Ответ */
.faq-answer {
  height: 0;
  overflow: hidden;
  padding: 14px 20px 22px;
  background: rgb(3 3 3 / 23%);
  transition: height .45s cubic-bezier(.4,0,.2,1);
}

/* Текст ответа */
.faq-answer p {
  padding: 16px 0 22px;
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  line-height: 1.6;
}

/* Адаптив */
@media (max-width: 768px) {
  .faq-question { padding: 18px 20px; font-size: 16px; }
  .faq-answer p { font-size: 15px; }
}
.faq-item,
.faq-answer { box-sizing: border-box; }

/* =========================================================
9. ADAPTIVE GLOBAL
========================================================= */

@media (max-width: 1100px) {
  .hero {
    padding: 24px 0 54px;
    height: auto;
    min-height: 0;
    align-items: flex-start;
  }
  .hero__content-wrap.hero__right .hero__content {
    width: 80%;
  }
  .hero__grid {
    flex-direction: column;
    gap: 34px;
    height: auto;
  }
  .hero__content-layers { max-width: 620px; }
  .quiz { width: 100%; }

  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-gallery .lp-grid--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lp-intro__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
  }

  .burger { display: inline-flex; }
  .nav { display: none; }
}

@media (max-width: 1024px) {
  .hero__bg-layer {
    background-image:
      linear-gradient(to bottom,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.35) 95%),
      url('../img/hero-bg-tablet.jpg');
    background-position: center bottom;
  }

  .nav { display: none; }

  .lp-intro__grid {
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    gap: 28px;
  }
}

@media (max-width: 991px) {
  .hero { background: none;}
  .lp-section { padding: 56px 0; }
  .nav { display: none; }
  .lp-title { font-size: 24px; }
  .lp-grid { gap: 18px; }
  .lp-steps-list li { padding-left: 52px; }
  .lp-intro__grid { grid-template-columns: 1fr; }
  .lp-intro__side,
  .lp-intro__content { max-width: 100%; }
  .hero__content-wrap.hero__right .hero__content{
    width: 67%;
  }
}

@media (max-width: 768px) {
  .nav { display: none; }

  .share-btn { margin:0 auto; display: none; }

  .header__inner { gap: 10px; }
    .hero__bg-seo {
    object-fit: cover;
    object-position: center top;
  }
  .hero {
    padding: 18px 0 40px;
    align-items: flex-start;
    min-height: 1000px;

  }

  .hero__grid {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    height: 100%;
  }

    .hero__content-wrap.hero__right .hero__content {
    padding: 20px 18px 18px;
    border-radius: 20px;
    width: 100%;
  }

  .hero__title { font-size: 32px; }
  .hero__subtitle { font-size: 16px; }

  .hero-start {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .hero-start__device { margin-right: -20px; }
  .hero-start__device img { width: 100%; }

  .quiz {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    flex-direction: column;
  }
  .quiz__intro{
    width: auto;
  }
  .share-menu__inner {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .hero__bg-layer {
    background-image:
      linear-gradient(to bottom,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,0.55) 95%),
      url('../img/hero-bg-mobile.jpg');
    background-position: center center;
  }

  .lp-section { padding: 44px 0; }

  .lp-title {
    font-size: 20px;
    margin-bottom: 16px;
    max-width: 100%;
  }

  .lp-section > .container > p {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .lp-grid,
  .lp-prices .lp-grid--prices,
  .lp-reviews .lp-grid--reviews {
    grid-template-columns: 1fr;
  }

  .lp-steps-list { grid-template-columns: 1fr; }

  .lp-gallery .lp-grid--gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lp-card { padding: 18px 10px 16px; }

  .lp-cta-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .lp-intro-feature {
    padding: 12px 13px;
    grid-template-columns: 42px minmax(0,1fr);
  }

  .lp-intro-feature__icon {
    width: 36px;
    height: 36px;
  }

  .lp-intro-feature__text h3 { font-size: 14px; }
  .lp-intro-feature__text p { font-size: 12.5px; }
}

@media (max-width: 480px) {
  .container { padding: 10px; }

  .logo__text { font-size: 16px; }

  .hero__title { font-size: 28px; }

  .hero__benefits { font-size: 14px; }

  .btn,
  .quiz__btn {
    font-size: 13px;
    padding: 9px 16px;
  }

  .hero-start {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-start__device {
    margin-right: 0;
    align-self: center;
  }

  .hero-start__device img { width: 90%; }
}

@media (max-width: 375px) {
  .hero__title { font-size: 26px; }
  .hero__bg { background-position: center 20%; }
}


/* =========================================================
MosDomofon — Комплекты видеодомофонов (Premium Navy Glass)
========================================================= */

/* СЕКЦИЯ */
.special-offer {
position: relative;
padding: 80px 0;
z-index: 2;
}
.special-offer__head {
text-align: center;
margin-bottom: 50px;
}
.special-offer__sub {
color: rgba(255,255,255,.75);
max-width: 640px;
margin: 0 auto;
}

/* FLEX-ГРИД КАРТОЧЕК */
.special-offer-wrap {
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: center;
}

/* =========================================================
ОСНОВНАЯ КАРТОЧКА
========================================================= */
.special-offer-card .mdf-share{
  top: 50px;
  position: relative;
}
.special-offer-card {
width: calc(33.333% - 20px);
display: flex;
flex-direction: column;

border-radius: 28px;
padding: 0; /* теперь внутри __inner */

background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(25px);

box-shadow: 0 30px 60px rgba(0,0,0,0.50);

transition: 0.35s ease;
overflow: hidden;
}
.special-offer-card:hover {
transform: translateY(-6px);
background: rgba(255,255,255,0.11);
border-color: rgba(0,255,204,0.55);
}
.special-offer-card__price-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
/* NEW STRUCTURE */
.special-offer-card__inner {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

/* FOOTER — всегда прижат вниз */
.special-offer-card__footer {
border-top: 1px solid rgba(255,255,255,0.12);
margin-top: auto;
}

/* =========================================================
БЕЙДЖ
========================================================= */
.special-offer-card__badge {
display: inline-block;
padding: 4px 12px;
margin: 20px 0 4px 24px;

font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;

color: #fff;
background: rgba(0,0,0,0.45);
border-radius: 10px;
backdrop-filter: blur(12px);
}
.special-offer-card__badge--hit { background: #ff4e4e; }
.special-offer-card__badge--pro { background: #007aff; }

/* =========================================================
HEADER
========================================================= */
.special-offer-card__title {
color: #fff;
font-size: 18px;
margin-bottom: 8px;
font-weight: 600;
}
.special-offer-card__subtitle {
color: rgba(255,255,255,.7);
font-size: 14px;
margin-bottom: 18px;
}

/* =========================================================
MEDIА
========================================================= */
.special-offer-card__media img {
width: 100%;
height: 240px;
object-fit: contain;
border-radius: 20px;
background: rgba(0,0,0,0.20);
border: 1px solid rgba(255,255,255,0.12);
padding: 10px;
transition: transform .3s ease;
}
.special-offer-card:hover .special-offer-card__media img {
transform: scale(1.03);
}

/* =========================================================
FEATURES
========================================================= */
.special-offer-card__name {
  color: #fff;
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 700;
}
.special-offer-card__list {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: rgba(255,255,255,.85);
}
.special-offer-card__list li::marker {
color: #00ffd0;
}
.special-offer-card__note {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-top: 12px;
}

/* =========================================================
PRICE BLOCK
========================================================= */
.special-offer-card__price {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
.new-price {
color: #00ffd0;
font-size: 22px;
font-weight: 700;
}
.special-offer-card__discount {
font-size: 14px;
color: #fff;
}

/* =========================================================
SHARE ROW — МОДЕРН
========================================================= */
.share-like-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 22px 0 26px;
}

.share-title {
display: block;
font-size: 13px;
margin-bottom: 6px;
color: rgba(255,255,255,0.8);
}

.share-icons {
display: flex;
gap: 12px;
}

/* КРУГЛЫЕ МОДЕРН-КНОПКИ */
.share-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(12px);

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

cursor: pointer;
transition: 0.25s ease;
}
.share-btn:hover {
background: rgba(255,255,255,0.14);
transform: translateY(-3px);
}

/* SVG внутри */
.share-btn svg {
width: 22px;
height: 22px;
}

/* LIKE */
.review-like {
display: flex;
align-items: center;
gap: 6px;

background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
padding: 8px 12px;
border-radius: 12px;

cursor: pointer;
transition: 0.25s ease;
}
.review-like:hover {
background: rgba(255,255,255,0.18);
}
.review-like__icon {
font-size: 12px;
}
.like-count {
font-size: 12px;
color: #fff;
}

/* =========================================================
CTA BUTTON
========================================================= */
.offer__btn {
width: 100%;
padding: 14px 20px;

font-size: 15px;
font-weight: 600;
color: #fff;
text-align: center;

border-radius: 100px;
border: 1px solid rgba(0,255,204,0.55);

background: linear-gradient(90deg,#00ffd0 0%,#00aaff 100%);
box-shadow: 0 0 22px rgba(0,255,255,0.25);

cursor: pointer;
transition: 0.25s ease;
}
.offer__btn:hover {
transform: translateY(-3px);
box-shadow: 0 0 28px rgba(0,255,255,0.45);
}

/* =========================================================
АДАПТИВ
========================================================= */

@media (max-width: 1199px) {
.special-offer-card { width: calc(33.333% - 20px); }
}

@media (max-width: 991px) {
.special-offer-card { width: calc(50% - 16px); }
.special-offer-card__media img { height: 220px; }
}

@media (max-width: 767px) {
.special-offer-card { width: calc(50% - 12px); }
.special-offer-card__media img { height: 200px; }
}

@media (max-width: 575px) {
.special-offer-card { width: 100%; }
.special-offer-card__media img { height: 220px; }
}


/* =========================================================
PHONE INPUT — PREMIUM STYLE
========================================================= */

input[name="phone"] {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
outline: none;
transition: all .25s ease;
backdrop-filter: blur(8px);
}

input[name="phone"]::placeholder {
color: rgba(255,255,255,0.55);
}

input[name="phone"]:focus {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.35);
box-shadow: 0 0 0 3px rgba(0,123,255,0.28);
}

/* ===================================================================
FOOTER FORM — PREMIUM GLASS STYLE (FULL CSS)
=================================================================== */

.footer-form {
padding: 10px;
border-radius: 20px;
width: 100%;
max-width: 580px;
margin-left: auto;
margin-right: auto;

/* glass */
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(18px);

box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

/* ---------- Заголовки ----------- */

.footer-form .modal-title {
font-size: 24px;
font-weight: 600;
color: #fff;
margin-bottom: 6px;
}

.footer-form .modal-subtitle {
font-size: 15px;
color: rgba(255,255,255,0.75);
margin-bottom: 22px;
}

/* ---------- Группы полей ---------- */

.footer-form .form-group {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

.footer-form .form-group label {
font-size: 14px;
color: rgba(255,255,255,0.75);
margin-bottom: 6px;
}

/* ---------- Inputs / Textarea ---------- */

.footer-form input,
.footer-form textarea {
width:auto;
padding: 14px 16px;
font-size: 15px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 14px;
color: #fff;
outline: none;
transition: all .25s ease;
backdrop-filter: blur(10px);

/* отступ под иконку */
padding-left: 46px !important;
}

.footer-form input::placeholder,
.footer-form textarea::placeholder {
color: rgba(255,255,255,0.55);
}

.footer-form input:focus,
.footer-form textarea:focus {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.35);
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.footer-form textarea {
min-height: 90px;
resize: vertical;
}

/* ---------- Кнопка отправки ---------- */

.footer-form .modal-submit {
width: 100%;
padding: 16px;
border-radius: 14px;
background: #007bff;
color: #fff;
font-size: 17px;
border: none;
cursor: pointer;
font-weight: 600;
transition: background .25s ease, transform .2s ease;
box-shadow: 0 10px 32px rgba(0,123,255,0.35);
}

.footer-form .modal-submit:hover {
background: #0069e0;
transform: translateY(-2px);
}

.footer-form .modal-submit:active {
transform: translateY(0);
}

/* ---------- Статус отправки ---------- */

.footer-form .modal-status {
margin-top: 14px;
color: #fff;
text-align: center;
font-size: 14px;
opacity: 0;
transition: opacity .35s ease;
}

/* =========================================================
MODAL — PREMIUM GLASS STYLE
========================================================= */

.modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
z-index: 9999;
opacity: 0;
transition: opacity .25s ease;
}

.modal.open {
opacity: 1;
}

.glass-modal {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(18px);
padding: 28px;
width: 100%;
max-width: 480px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.45);
position: relative;
transform: translateY(22px);
transition: transform .35s ease;
}

.modal.open .glass-modal {
transform: translateY(0);
}

.modal-close {
position: absolute;
top: 12px;
right: 14px;
background: rgba(255,255,255,0.14);
border: none;
color: #fff;
font-size: 22px;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
transition: background .25s ease;
}

.modal-close:hover {
background: rgba(255,255,255,0.22);
}

/* =========================================================
FORM FIELDS INSIDE MODAL
========================================================= */

.form-group {
display: flex;
flex-direction: column;
margin-bottom: 18px;
position: relative; /* для metro-list */
}

.form-group label {
font-size: 14px;
color: rgba(255,255,255,0.75);
margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 14px 16px;
font-size: 15px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 14px;
color: #fff;
outline: none;
transition: all .25s ease;
backdrop-filter: blur(10px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255,255,255,0.55);
}

.form-group input:focus,
.form-group textarea:focus {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.35);
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

textarea {
min-height: 80px;
resize: vertical;
}

.modal-submit {
width: 100%;
padding: 14px;
border-radius: 14px;
background: #007bff;
color: #fff;
font-size: 16px;
border: none;
cursor: pointer;
font-weight: 600;
transition: background .25s ease;
}

.modal-submit:hover {
background: #0069e0;
}

.modal-status {
margin-top: 14px;
color: #fff;
text-align: center;
}


/* =========================================================
METRO AUTOCOMPLETE — PREMIUM
========================================================= */
/* ===== FIXED METRO LIST POSITION (FOOTER + MODAL) ===== */
.metro-list {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px); /* ✔ всегда строго под инпутом */
max-height: 220px;
overflow-y: auto;
background: rgb(0 0 0 / 86%);
backdrop-filter: blur(16px);
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.18);
display: none;
z-index: 50;
animation: metroFade .25s ease;
}
/* ===== END FIXED METRO LIST POSITION (FOOTER + MODAL) ===== */

@keyframes metroFade {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}

.metro-list-item {
padding: 12px 14px;
font-size: 15px;
color: #fff;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background .2s ease;
}

.metro-list-item:last-child {
border-bottom: none;
}

.metro-list-item:hover,
.metro-list-item.active {
background: rgba(255,255,255,0.18);
}

/* =========================================================
FIX: МОБИЛЬНАЯ МОДАЛКА
========================================================= */

@media (max-width: 480px) {
.glass-modal {
padding: 22px;
border-radius: 16px;
}

.modal-title {
font-size: 20px;
}

.modal-subtitle {
font-size: 14px;
}
}

/* =========================================================
MOSDOMOFON — VIDEO MODAL (FULL PREMIUM STYLES)
Reels / Shorts Style + Glass + Fade + Controls
========================================================= */

/* BASE MODAL WRAPPER */
.mdf-video-modal {
position: fixed;
inset: 0;
z-index: 99990;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}

.mdf-video-modal.mdf-open {
opacity: 1;
pointer-events: auto;
}

/* BACKDROP */
.mdf-video-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(12px);
opacity: 0;
transition: opacity .35s ease;
}

.mdf-video-modal.mdf-open .mdf-video-backdrop {
opacity: 1;
}

/* INNER */
.mdf-video-inner {
position: relative;
width: 100%;
max-width: 420px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(18px);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.55);
transform: translateY(20px);
opacity: 0;
transition: all .35s ease;
}

.mdf-video-modal.mdf-open .mdf-video-inner {
opacity: 1;
transform: translateY(0);
}

/* HEADER */
.mdf-video-header {
padding: 12px 16px;
background: rgba(0,0,0,0.45);
border-bottom: 1px solid rgba(255,255,255,0.18);
}

.mdf-video-title {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
}
/* =============================
BOTTOM NAVIGATION PANEL
============================= */

/* PLAYER BLOCK */
.mdf-video-player {
width: 100%;
background: #000;
position: relative;
}

/* Контейнер нижних контроллов */
.mdf-video-controls-bottom {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;

background: rgba(0,0,0,0.35);
backdrop-filter: blur(12px);
border-radius: 14px;
}

/* Чтобы кнопки не были разбросаны */
.mdf-video-back,
.mdf-video-forward,
.mdf-video-volume,
.mdf-video-toggle {
position: static !important;
transform: none !important;
margin: 0;
z-index: 30;
}

/* Делаем play/pause крупнее */
.mdf-video-toggle {
width: 60px;
height: 60px;
}

/* Кнопки -10 / +10 */
.mdf-video-back,
.mdf-video-forward {
padding: 8px 14px;
font-size: 14px;
}

/* Volume справа */
.mdf-video-volume {
margin-left: auto;
}

.mdf-video-el {
width: 100%;
height: auto;
display: block;
max-height: 80vh;
object-fit: contain;
}

/* PLAY OVERLAY (если autoplay заблокирован) */
.mdf-video-modal.mdf-video-show-play .mdf-video-player::after {
content: "▶";
position: absolute;
inset: 0;
margin: auto;
width: 72px;
height: 72px;
color: #ffffffd9;
font-size: 52px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.45);
border-radius: 50%;
backdrop-filter: blur(4px);
cursor: pointer;
}

/* CLOSE BY TAP OUTSIDE */
.mdf-video-modal.mdf-open {
cursor: pointer;
}
.mdf-video-inner {
cursor: default;
}

/* MOBILE FIXES */
@media (max-width: 480px) {
.mdf-video-inner {
max-width: 95%;
border-radius: 18px;
}
.mdf-video-title {
font-size: 14px;
}
}
/* CLOSE BUTTON */
.mdf-video-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity .25s ease, background .25s ease;
}

.mdf-video-close::before,
.mdf-video-close::after {
content: "";
position: absolute;
width: 18px;
height: 2px;
background: #fff;
border-radius: 2px;
}

.mdf-video-close::before {
transform: rotate(45deg);
}
.mdf-video-close::after {
transform: rotate(-45deg);
}

.mdf-video-close:hover {
background: rgba(0,0,0,0.65);
}
/* PLAY BUTTON */
.mdf-video-toggle {
position: static;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .25s ease, border .25s ease;
}
.mdf-video-toggle:hover {
background: rgba(0,0,0,0.75);
}
.mdf-video-toggle::before {
content: '';
width: 0;
height: 0;
border-left: 22px solid white;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
margin-left: 4px; /* легкое смещение вправо как в YouTube */
transition: all .2s ease;
}

/* PAUSE (две палочки) */
.mdf-video-toggle.is-pause::before {
content: '';
width: 22px;
height: 22px;
border-left: 6px solid white;
border-right: 6px solid white;
border-top: 0;
border-bottom: 0;
background: none;
transform: none;
margin-left: 0;
}

/* VOLUME */
.mdf-video-volume {
position: absolute;
bottom: 14px;
right: 14px;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
cursor: pointer;
}

.mdf-video-volume::before {
content: '🔊';
font-size: 20px;
color: #fff;
position: relative;
left: 0;
top: 0;
}

.mdf-video-volume.is-muted::before {
content: '🔇';
}

/* SKIP BUTTONS */
.mdf-video-back,
.mdf-video-forward {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
color: #fff;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
cursor: pointer;
}

.mdf-video-back { left: 8px; }
.mdf-video-forward { right: 8px; }
/* ================================
VIDEO PROGRESS BAR
================================ */
.mdf-video-progress {
position: absolute;
bottom: 3px;
left: 0;
height: 4px;
width: 100%;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(6px);
overflow: hidden;
}

.mdf-video-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00eaff, #007bff);
box-shadow: 0 0 12px #00aaff;
transition: width 0.12s linear;
}

.mdf-share__btn{
    touch-action: manipulation;
}











/*-------------------------- Главная страница стили выше ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* =========================================================
   MosDomofon — ARCHIVE INTERCOMS (PREMIUM GLASS / FINAL)
   Вставь целиком в конец main.css (или в отдельный archive-intercoms.css)
========================================================= */
.intercoms-archive .container{
max-width:1240px;
margin:0 auto;
}
.intercoms-archive__layout{
display:grid;
grid-template-columns:300px minmax(0,1fr);
gap:24px;
align-items:start;
}
/* =========================================================
   MosDomofon — ARCHIVE FILTERS: SEARCH (FINAL for wrap+buttons)
   ЗАМЕНЯЕТ старый блок .intercoms-search-input с background-image
========================================================= */

.intercoms-search-wrap{
  position: relative;
  display: block;
}

/* input */
.intercoms-search-wrap .intercoms-search-input{
  width: 100%;
  height: 48px;

  /* место справа под clear + submit */
  padding: 0 92px 0 14px;

  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--glass-border-light, rgba(255,255,255,.18));
  background-color: rgba(10,14,25,.35);

  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.25));

  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  appearance: none;

  /* ВАЖНО: убираем старую лупу-фон */
  background-image: none;
}

/* placeholder */
.intercoms-search-wrap .intercoms-search-input::placeholder{
  color: rgba(255,255,255,.55);
}

/* hover/focus */
.intercoms-search-wrap .intercoms-search-input:hover{
  border-color: rgba(255,255,255,.28);
}

.intercoms-search-wrap .intercoms-search-input:focus{
  outline: none;
  border-color: rgba(255,255,255,.38);
  background-color: rgba(10,14,25,.45);
  box-shadow: var(--shadow-lg, 0 14px 40px rgba(0,0,0,.35));
}

/* Тонкий "живой" glow */
.intercoms-search-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius-lg, 14px) + 2px);
  pointer-events:none;
  opacity:0;
  transition: opacity .2s ease;
  background: radial-gradient(120px 60px at 25% 50%, rgba(255,255,255,.22), rgba(255,255,255,0));
  filter: blur(6px);
}
.intercoms-search-wrap:focus-within::before{
  opacity:1;
}

/* Clear × */
.intercoms-search-wrap .intercoms-search-clear{
  position: absolute;
  top: 50%;
  right: 52px;
  transform: translateY(-50%);

  width: 30px;
  height: 30px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);

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

  padding: 0;
  line-height: 1;
  cursor: pointer;

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.intercoms-search-wrap .intercoms-search-clear:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.intercoms-search-wrap .intercoms-search-clear:active{
  transform: translateY(-50%) scale(.97);
}

/* hidden реально скрывает */
.intercoms-search-wrap .intercoms-search-clear[hidden]{
  display:none;
}

/* Submit (лупа-кнопка справа) */
.intercoms-search-wrap .intercoms-search-submit{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);

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

  padding: 0;
  cursor: pointer;

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.intercoms-search-wrap .intercoms-search-submit:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.intercoms-search-wrap .intercoms-search-submit:active{
  transform: translateY(-50%) scale(.97);
}

/* Убираем дефолтный крестик браузера (Safari/Chrome) */
.intercoms-search-wrap .intercoms-search-input::-webkit-search-decoration,
.intercoms-search-wrap .intercoms-search-input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 575px){
  .intercoms-search-wrap .intercoms-search-input{
    height: 44px;
    font-size: 14px;
    padding-right: 86px;
  }
}
/* =========================
   LEFT: FILTERS (GLASS)
========================= */
.intercoms-filters{
  width:300px;
  position: sticky;
  top: calc(var(--header-h, 72px) + 14px); /* всегда ниже fixed header */
  align-self: start; /* для grid */
  z-index: 20;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 16px 14px;
  backdrop-filter: blur(18px);
  
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.intercoms-filters__title{
font-size:16px;
font-weight:800;
letter-spacing:.02em;
margin:0 0 12px 0;
}
.intercoms-filters__group{
margin:0 0 14px 0;
padding:0 0 14px 0;
border-bottom:1px solid rgba(255,255,255,.10);
}
.intercoms-filters__group:last-child{
border-bottom:none;
padding-bottom:0;
margin-bottom:0;
}
.intercoms-filters__label{
font-size:12px;
text-transform:uppercase;
letter-spacing:.10em;
opacity:.85;
margin:0 0 10px 0;
}
.intercoms-filters__options{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.intercoms-chip{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:7px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(6,22,80,.55);
color:#fff;
font-size:13px;
font-weight:600;
line-height:1;
cursor:pointer;
white-space:nowrap;
transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
user-select:none;
-webkit-user-select:none;
}
.intercoms-chip:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.40);
box-shadow:0 12px 26px rgba(0,0,0,.30);
}
.intercoms-chip input{
display:none;
}
/* =========================================================
   INTERCOMS CHIP — ACTIVE STATE (RADIO)
========================================================= */
.intercoms-chip:has(input:checked){
  background: rgba(47,143,255,.22);
  border-color: rgba(47,143,255,.75);
  box-shadow: 0 0 0 3px rgba(47,143,255,.18);
}
.intercoms-check{
display:flex;
align-items:center;
min-width: 110px;
gap:10px;
padding:9px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.20);
background:rgba(255,255,255,.06);
cursor:pointer;
transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
user-select:none;
-webkit-user-select:none;
}
.intercoms-check:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.38);
box-shadow:0 12px 26px rgba(0,0,0,.28);
}
.intercoms-check input{
width:16px;
height:16px;
accent-color:var(--accent);
}
.intercoms-check span{
font-size:13px;
font-weight:600;
opacity:.95;
}
.intercoms-filters__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
  transition: opacity .25s ease, transform .25s ease;
}
.btn-glass-primary,
.btn-glass-secondary{
height:44px;
border-radius:999px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.btn-glass-primary{
background:linear-gradient(135deg,var(--accent),rgba(0,229,255,.85));
border:none;
color:#fff;
box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.btn-glass-primary:hover{
transform:translateY(-1px);
filter:saturate(1.08);
box-shadow:0 18px 38px rgba(0,0,0,.42);
}
.btn-glass-secondary{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.26);
color:#fff;
display: flex;
align-items: center;
justify-content: center;
}
.btn-glass-secondary:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.45);
box-shadow:0 14px 30px rgba(0,0,0,.30);
}

/* =========================
   RIGHT: TOP BAR (SORT)
========================= */
.intercoms-sortbar{
display:flex;
flex-direction:row-reverse;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px 16px;
margin-bottom:14px;
background:rgba(8,20,70,.72);
border:1px solid rgba(255,255,255,.16);
border-radius:20px;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:0 18px 40px rgba(0,0,0,.32);
color:#fff;
}

.intercoms-sortbar__count{
font-size:14px;
font-weight:600;
opacity:.9;
}

.intercoms-sortbar__controls{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
}

.intercoms-sortbar__controls span{
opacity:.85;
white-space:nowrap;
}

/* =========================
   SELECT
========================= */
.intercoms-sortbar__select-wrap{
position:relative;
}

.intercoms-sortbar__select-wrap select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding:10px 44px 10px 16px;
border-radius:999px;
background:linear-gradient(135deg,rgba(47,143,255,.95),rgba(0,200,255,.85));
border:none;
color:#fff;
font-size:14px;
font-weight:700;
cursor:pointer;
box-shadow:0 12px 26px rgba(0,0,0,.35);
transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}

.intercoms-sortbar__select-wrap select:hover{
transform:translateY(-1px);
filter:saturate(1.08);
box-shadow:0 16px 34px rgba(0,0,0,.45);
}

.intercoms-sortbar__select-wrap select:focus{
outline:none;
box-shadow:0 0 0 3px rgba(47,143,255,.35),0 18px 36px rgba(0,0,0,.45);
}

/* ARROW */
.intercoms-sortbar__select-wrap::after{
content:"";
position:absolute;
right:16px;
top:50%;
width:8px;
height:8px;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
transform:translateY(-60%) rotate(45deg);
pointer-events:none;
opacity:.95;
}

/* =========================
   DROPDOWN OPTIONS
========================= */
.intercoms-sortbar__select-wrap option{
background:#0b1636;
color:#ffffff;
font-weight:600;
}
.intercoms-sortbar__select-wrap option:hover{
background:#14265f;
}
.intercoms-sortbar__select-wrap option:checked{
background:#1f4ed8;
color:#ffffff;
}

/* =========================
   GRID
========================= */
.intercoms-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:16px;
align-items:stretch;
justify-items: center;
}
.intercoms-grid.is-compact{
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.intercoms-filters__group--features{
display: flex;
gap: 30px;
}
/* =========================
   CARD (GLASS)
========================= */
.intercom-card{
border-radius:12px;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
box-shadow:0 18px 40px rgba(0,0,0,.34);
transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
min-width:0;
max-width: 350px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.intercom-card:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.28);
box-shadow:0 24px 56px rgba(0,0,0,.44);
}
/* MEDIA / SLIDER */
.intercom-card__media{
position:relative;
width:100%;
aspect-ratio:4/3; /* либо 3/4 */
overflow:hidden;
background:rgba(0,0,0,.55);
touch-action:auto;
user-select:none;
-webkit-user-select:none;
}

.intercom-card__track{
display:flex;
width:100%;
height:100%;
position:relative;
will-change:transform;
transform:translate3d(0,0,0);
transition:transform .28s ease;
touch-action:manipulation;
z-index:1;
}
.intercom-card.is-dragging .intercom-card__track{
transition:none;
}
.intercom-card__slide{
width:100%;
height:100%;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
z-index:1;
opacity:0;
pointer-events:none;
position:absolute;
inset:0;
transition:opacity .25s ease;
}
.intercom-card__slide.is-active{
opacity:1;
pointer-events:auto;
position:relative;
}
.mdf-variations__list{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.mdf-variation.is-active{
  color: #fff;
  background: left;
  padding: 5px 10px;
  border: 1px solid #ffffff8a;
  border-radius: 5px;
}
.intercom-card__slide img{
width:100%;
height:100%;
object-fit:contain; /* как в каталоге */
display:block;
padding:0;
}
/* SLIDER DOTS (если есть) */
.intercom-card__dots{
position:absolute;
left:12px;
right:12px;
bottom:10px;
display:flex;
gap:6px;
justify-content:center;
z-index:3;
pointer-events:none;
}
.intercom-card__dot{
width:7px;
height:7px;
border-radius:999px;
background:rgba(255,255,255,.35);
box-shadow:0 0 0 1px rgba(0,0,0,.18);
opacity:.85;
}
.intercom-card__dot.is-active{
background:rgba(47,143,255,.95);
opacity:1;
}
/* actions (избранное/сравнение/поделиться — если есть) */
.intercom-card__like .icon{
display:inline-flex;
width:16px;
height:16px;
line-height:1;
}
.intercom-card__like .count{
display:inline-block;
line-height:1;
}
.intercom-card__like.is-liked{
background:rgba(255,77,109,.18);
border-color:rgba(255,77,109,.55);
}

.intercom-card__like.is-liked .icon{
color:#ff4d6d;
}

.intercom-card__action:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.35);
box-shadow:0 14px 30px rgba(0,0,0,.35);
background:rgba(255,255,255,.14);
}
/* BODY */
.intercom-card__body{
padding:10px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
.intercom-card__title{
margin:0;
font-size:15px;
font-weight:800;
line-height:1.25;
}
.intercom-card__title a{
color:#00f0c4;
text-decoration:none;
font-weight: 600;
letter-spacing: .2px;
}
.intercom-card__title a:hover{
text-decoration:none;
opacity:.92;
}
.intercom-card__meta{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.intercom-badge{
padding:5px 10px;
border-radius:999px;
white-space:nowrap;
opacity:.95;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
font-size: 12px;
}
.intercom-badge.is-accent{
background: rgba(0,123,255,.25);
border-color: rgba(0,123,255,.4);
}
/* =========================
   CARD BOTTOM — LIKE MAIN (ARCHIVE)
========================= */
.intercom-card__bottom{
  margin: 10px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}
.intercom-card__bottom-left{
display:flex;
justify-content: flex-end;
align-items:center;
gap:10px;
min-width:0;
}
.intercom-card__media .intercom-card__like{
position:absolute;
top:12px;
right:12px;
z-index:2;
background: rgb(255 77 109 / 61%);
display:flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:14px;
border:1px solid rgba(255,255,255,.22);
cursor:pointer;
font-size:14px;
color:#fff;
}
.intercom-card__btn-order{
  box-shadow: 0 8px 24px rgba(0,123,255,.35);
}

/* цена в одну строку, чтобы не прыгала */
.intercom-card__price .price-old{
  font-size:14px;
  color:rgba(255,255,255,.45);
  text-decoration:line-through;
}
.intercom-card__price .price-new{
  font-size:22px;
  font-weight:900;
  color:#00ffd0;
}
.intercom-card__btn{
margin-top: auto;
width: 90%;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
background:linear-gradient(135deg,var(--accent),rgba(0,229,255,.85));
color:#fff;
text-decoration:none;
font-weight:900;
font-size:13px;
white-space:nowrap;
box-shadow:0 14px 30px rgba(0,0,0,.30);
transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.intercom-card__btn:hover{
transform:translateY(-1px);
filter:saturate(1.08);
box-shadow:0 18px 38px rgba(0,0,0,.40);
}
.intercom-card__footer-right{
  display: flex;
  flex-direction: column;
}
/* =========================
   PAGINATION (WP .page-numbers)
========================= */
.intercoms-pagination{
margin-top:18px;
display:flex;
justify-content:center;
}
.intercoms-pagination .page-numbers{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
height:42px;
padding:0 12px;
margin:0 5px;
border-radius:14px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
color:#fff;
text-decoration:none;
font-weight:800;
box-shadow:0 14px 30px rgba(0,0,0,.28);
transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.intercoms-pagination .page-numbers:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.30);
box-shadow:0 18px 38px rgba(0,0,0,.38);
}
.intercoms-pagination .page-numbers.current{
background:rgba(47,143,255,.22);
border-color:rgba(47,143,255,.55);
box-shadow:0 0 0 3px rgba(47,143,255,.18), 0 18px 38px rgba(0,0,0,.35);
}
.intercoms-pagination .page-numbers.dots{
min-width:auto;
padding:0 10px;
opacity:.75;
box-shadow:none;
background:transparent;
border-color:transparent;
}

/* =========================
   EMPTY STATE (если выводишь)
========================= */
.intercoms-empty{
padding:28px 18px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:0 18px 40px rgba(0,0,0,.32);
text-align:center;
}
.intercoms-empty h3{
margin:0 0 8px 0;
font-size:18px;
font-weight:900;
}
.intercoms-empty p{
margin:0;
opacity:.85;
line-height:1.55;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1024px){
.intercoms-archive__layout{
grid-template-columns:280px minmax(0,1fr);
}
.intercoms-filters{
width:280px;
}
}
@media(max-width:900px){
.intercoms-archive__layout{
grid-template-columns:1fr;
}
.intercoms-filters{
position:relative;
top:auto;
width:100%;
}
}
@media(max-width:575px){
.intercoms-sortbar{
flex-direction:column-reverse;
align-items:flex-start;
}
.intercoms-sortbar__controls{
width:100%;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
}
.intercoms-sortbar__select-wrap{
width:100%;
}
.intercoms-sortbar__select-wrap select{
width:100%;
}
.intercoms-filters__actions{
grid-template-columns:1fr;
}
.intercom-card__btn{
padding:10px 12px;
}
.intercoms-filters__group--features{
display: flex; justify-content: flex-start;
}
}
/* ROW */
.intercom-card__actions-row{
display:flex;
align-items:center;
justify-content:flex-start;
margin:6px 0 4px;
}

/* =========================================================
   MDF SHARE ICONS — 1:1 КАК НА ГЛАВНОЙ
========================================================= */
/* ОБЩАЯ КНОПКА */
.mdf-share__btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.mdf-share__btn:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow:
    0 12px 26px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
/* === WHATSAPP === */
.mdf-share__btn[data-share-btn="whatsapp"] {
  background-image: url("/wp-content/themes/mosdomofon/assets/img/messenger/whatsapp-104.webp");
}

/* === TELEGRAM === */
.mdf-share__btn[data-share-btn="telegram"] {
  background-image: url("/wp-content/themes/mosdomofon/assets/img/messenger/telegram-104.webp");
}

/* === MAX === */
.mdf-share__btn[data-share-btn="max"] {
  background-image: url("/wp-content/themes/mosdomofon/assets/img/messenger/max-104.webp");
}
/* COPY — ТОЛЬКО SVG, без background-image */
.mdf-share__btn[data-share-btn="copy"] {
  background-image: none;
  background-color: rgba(255,255,255,.12);
}

.mdf-share__btn[data-share-btn="copy"] svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  opacity: .9;
}
.mdf-share__btn img,
.mdf-share__btn svg{
width:18px;
height:18px;
opacity:.9;
pointer-events:none;
}
.mdf-share__btn.is-copied{
  background-color: rgba(47,143,255,.28);
}
.mdf-share__btn:active{
transform:translateY(0);
box-shadow:0 6px 14px rgba(0,0,0,.22);
}
/* LIKE */
.intercom-card__like .icon{
color:#ff4d6d;
}
.mdf-share__btn:focus,
.mdf-share__btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    0 12px 26px rgba(0,0,0,.45);
}

/* =========================================================
  MDF Messenger — Vertical UP (Glass) — FIXED CLOSED STATE
========================================================= */
.mdf-messenger{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10000;
}

/* на мобилке поднимаем мессенджеры выше кнопки квиза Envybox, чтобы не лежали друг на друге */
@media (max-width: 768px){
  .mdf-messenger{
    bottom: 96px;
    right: 16px;
  }
}

/* ---------- MAIN BUTTON ---------- */
.mdf-messenger__main{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 3;
}

.mdf-messenger__main img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
  display: block;
}

/* ---------- ACTIONS WRAP (CLOSED by default) ---------- */
.mdf-messenger__actions{
  position: absolute;
  bottom: 74px;
  right: 0;

  display: flex;
  flex-direction: column;
  gap: 12px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s linear .35s;

  z-index: 2;
}

/* OPEN */
.mdf-messenger.open .mdf-messenger__actions{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s;
}

/* ---------- ACTION ITEM ---------- */
.mdf-messenger__item{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);

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

  position: relative;
  z-index: 2;

  transition: transform .25s ease, box-shadow .25s ease;
}

/* страховка от "просвечивания" в закрытом состоянии */
.mdf-messenger__actions .mdf-messenger__item{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;

  pointer-events: none;
}

.mdf-messenger.open .mdf-messenger__actions .mdf-messenger__item{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s;

  pointer-events: auto;
}

.mdf-messenger__item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* hover */
.mdf-messenger__item:hover{
  transform: scale(1.08);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}

/* COLORS (optional glow) */
.mdf-messenger__item.whatsapp{ box-shadow: 0 0 0 rgba(37,211,102,.0); }
.mdf-messenger__item.whatsapp:hover{ box-shadow: 0 0 18px rgba(37,211,102,.55); }

.mdf-messenger__item.telegram:hover{ box-shadow: 0 0 18px rgba(34,158,217,.55); }
.mdf-messenger__item.max:hover{ box-shadow: 0 0 18px rgba(170,120,255,.55); }
.mdf-messenger__item.phone:hover{ box-shadow: 0 0 18px rgba(47,143,255,.55); }



/* ACTIONS — ОТКРЫТИЕ ВПРАВО */
.mdf-share__actions{
  display: flex;
  gap: 8px;
  background: #000;
  padding: 10px 14px;
  border-radius: 30px;

  position: absolute;
  left: 100%;              /* старт от правого края кнопки */
  top: 50%;
  margin-left: 10px;       /* зазор от кнопки */

  transform: translateY(-50%) translateX(-6px) scale(.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease;
}
/* OPEN */
.mdf-share.is-open .mdf-share__actions{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0) scale(1);
  pointer-events:auto;
}
/* SHARE TOGGLE — ОСНОВНАЯ КНОПКА */
.mdf-share__toggle{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background: rgb(12 11 11 / 74%);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity: .6;
  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.mdf-share__toggle:hover{
  transform:translateY(-1px) scale(1.05);
  background: rgb(12 11 11 / 74%);
  opacity: 1;
  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.intercoms-filters__actions[style*="display: none"]{
  opacity: 0;
  transform: translateY(6px);
}

.intercom-card__bottom-right{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  gap:10px;
  margin-top: auto;
  padding: 10px 0;
}
.price-old{
  font-size:14px;
  color:rgba(255,255,255,.45);
  text-decoration:line-through;
}

.price-new{
  color:#00ffd0;
  font-weight: 700;
  font-size: 20px;
}

.price-request{
  font-size:14px;
  font-weight:800;
  opacity:.9;
}
/* =========================
   CARD EXCERPT (ARCHIVE)
========================= */
.intercom-card__excerpt{
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media(max-width:575px){
  .intercom-card__excerpt{
    -webkit-line-clamp:2;
    font-size:12.5px;
  }
}
.price-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px;
}


/*--------------------------- intercoms-archive енд ---------------------------------------- */





/*--------------------------- Карточка товара ---------------------------------------- */
/* ============================================================
SINGLE INTERCOM — PREMIUM GLASS PRODUCT PAGE (MosDomofon)
Полный CSS (FIXED: ORDER MODAL no-conflict + isolation)
============================================================ */

/* ---------- БАЗОВЫЕ ПЕРЕМЕННЫЕ ---------- */
/* ============================================================
СЕКЦИЯ
============================================================ */
.mdf-product-section {
padding: 40px 0 80px;
color: var(--text);
}

/* ============================================================
ОБЩИЕ СТЕКЛЯННЫЕ ПАНЕЛИ (верх + табы)
============================================================ */
.mdf-glass-block {
background: rgb(36 36 36 / 25%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(22px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 32px;
margin-bottom: 40px;
box-shadow: var(--shadow-xl);
}

/* ============================================================
ВЕРХНИЙ БЛОК: 2 КОЛОНКИ (ГАЛЕРЕЯ + ИНФО)
============================================================ */
.mdf-product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid #868383;
}

.mdf-product-left {
  width: 50%;
  max-width: 50%;
  padding: 10px;           /* оставляем один */
  /* padding-right: 24px;  убрать */
}

.mdf-product-right {
  width: 50%;
  max-width: 50%;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #0404046b;
}
/* STOCK */
.mdf-stock {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #6ee7a8;
}

.mdf-stock-dot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
}
/* TITLE */
.mdf-title {
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}

/* SHORT */
.mdf-short {
  font-size: 14px;
  line-height: 1.55;
  color: rgb(255 255 255 / 72%);
}
/* ============================================================
ГАЛЕРЕЯ
============================================================ */
.mdf-slider {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}

/* Главное фото — фиксированная высота (как у CTV) */
.mdf-main-wrap {
overflow: hidden;
width: 100%;
background: rgba(0,0,0,0.45);
border: 1px solid var(--glass-border-light);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow-lg);
padding: 18px;
height: 360px; /* desktop */
display: flex;
align-items: center;
justify-content: center;
position: relative;
aspect-ratio: 1 / 1;
}

@media (max-width: 1200px) {
.mdf-main-wrap {
height: 320px; /* laptop */
}
}

@media (max-width: 575px) {
  .mdf-main-wrap {
  height: 260px; /* mobile */
  padding: 12px;
  border-radius: 5px;
  }
}


/* ============================================================
ЛУПА MAGNIFIER (круглая, zoom x2)
============================================================ */
.mdf-magnifier-lens{
  z-index: 6;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);

  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transform-origin: center center;
  transition: opacity .15s ease, transform .15s ease;
}
.mdf-magnifier-lens.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.mdf-main-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   МИНИАТЮРЫ СНИЗУ — OWL-LIKE (CENTERED / TRANSFORM ONLY)
============================================================ */

/* ВЕСЬ БЛОК: стрелка | viewport | стрелка */
.mdf-slider-thumbs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 6;
}


/* СТРЕЛКИ */
.mdf-thumbs-arrow {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  user-select: none;
}

.mdf-thumbs-arrow:hover {
  background: rgba(0,0,0,0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mdf-thumbs-arrow:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* VIEWPORT — ОКНО НА 3 МИНИАТЮРЫ */
.mdf-slider-thumbs-viewport {
  overflow: hidden;
  width: calc((60px * 3) + (12px * 2)); /* 3 миниатюры */
  height: 72px;
  margin: 0 auto;
  position: relative;
}

/* ЛЕНТА — ДВИГАЕТСЯ ТОЛЬКО TRANSFORM */
.mdf-slider-thumbs{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;    
  transition:transform .35s ease;
  will-change:transform;
}
/* Когда миниатюр мало и прокрутка не нужна — центрируем и запрещаем сдвиг */
.mdf-slider-thumbs.is-centered{
  justify-content:center;
  transform: none !important;
}
/* ОТДЕЛЬНАЯ МИНИАТЮРА */
.mdf-thumb {
  width: 60px;
  height: 60px;
  padding: 6px;
  flex: 0 0 60px;
  box-sizing: border-box;
  background: var(--thumb-glass);
  border-radius: 14px;
  border: 1px solid var(--thumb-border);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

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

  cursor: pointer;
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  transition:
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

.mdf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* HOVER */
.mdf-thumb:hover {
  background: rgba(255,255,255,0.18);
  box-shadow: var(--shadow-md);
}

/* ACTIVE — ТЕКУЩАЯ МИНИАТЮРА */
.mdf-thumb.is-active {
  border-color: var(--accent);
  background: rgba(0,0,0,0.75);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    var(--shadow-md);
}

/* MOBILE */
@media (max-width: 575px) {
  .mdf-slider-thumbs-viewport {
    width: calc((60px * 3) + (12px * 2));
  }
}
/* ===== ICONS ===== */
.mdf-ico{
    width:18px;
    height:18px;
    display:inline-block;
    flex-shrink:0;
    opacity:.85;
}
.mdf-ico-display{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.mdf-ico-resolution{background:linear-gradient(135deg,#34d399,#059669)}
.mdf-ico-sd{background:linear-gradient(135deg,#fbbf24,#d97706)}
.mdf-ico-camera{background:linear-gradient(135deg,#f472b6,#db2777)}
.mdf-ico-intercom{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.mdf-ico-power{background:linear-gradient(135deg,#f87171,#dc2626)}
.mdf-ico-temp{background:linear-gradient(135deg,#67e8f9,#0891b2)}
.mdf-ico-warranty{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}
.mdf-ico-dimensions{
  width:20px;
  height:20px;
  display:inline-block;
  background:url("/wp-content/themes/mosdomofon/assets/img/icons/dimensions.svg") center/contain no-repeat;
  opacity:.9;
}

/* ===== BADGES ===== */
.mdf-product-badges{display:flex;gap:8px;margin:10px 0 14px}
.mdf-badge{font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(47,143,255,.15);color:#c7ddff;border:1px solid rgba(47,143,255,.35)}
/* ============================================================
   PRICE + STATUS ROW
============================================================ */

.mdf-price-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
margin-top:6px;
}

/* PRICES */
.mdf-prices{
display:flex;
align-items:baseline;
gap:12px;
}

.mdf-price-old{
font-size:16px;
opacity:.45;
text-decoration:line-through;
}

.mdf-price-current{
font-size:28px;
font-weight:700;
color:var(--accent);
}

/* ============================================================
   SPECS LIST — BASE
============================================================ */

.mdf-specs{
  display: flex;
  flex-direction: column;
  gap: 12px 20px;
  margin-top: 20px;
}

/* SPEC ROW */
.mdf-spec{
  display:flex;
  font-size:14px;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.9);
}

/* SHARE */
.mdf-share {
width: 15%;
gap: 10px;
flex-direction: row;
position:absolute;
display:flex;
align-items:center;
top: 10px;
left: 10px;
z-index: 1;
}
.mdf-share-btn {
background: rgba(255,255,255,0.08);
border: 1px solid var(--glass-border-light);
border-radius: 999px;
padding: 6px 14px;
font-size: 14px;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}

.mdf-share-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border-light);
border-radius: 14px;
padding: 10px;
display: none;
flex-direction: column;
gap: 6px;
z-index: 10;
}

.mdf-share-panel.is-open {
display: flex;
}

.mdf-share-link,
.mdf-share-copy {
background: none;
border: none;
color: #fff;
font-size: 14px;
text-align: left;
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
}

.mdf-share-link:hover,
.mdf-share-copy:hover {
background: rgba(255,255,255,0.12);
}

/* ICONS */
.mdf-spec-label{
  white-space:nowrap;
  font-weight:400;
}

.mdf-spec-line{
  flex:1 1 auto;
  min-width:16px;
  margin:0 12px;
  height:1px;
  background:linear-gradient(
    to right,
    rgba(255,255,255,.15),
    rgba(255,255,255,.35),
    rgba(255,255,255,.15)
  );
  transform:translateY(-2px);
}

.mdf-spec-value{
  font-weight:500;
  color:#fff;
  text-align:right;
  min-width:0;
}
/* primary кнопка*/
.mdf-btn-primary{
  background:linear-gradient(135deg,#2f8fff,#5fb4ff);
  color:#ffffff;
  width: 100%;
  max-width: 50%;
  padding: 10px;
}

.mdf-btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 30px rgba(47,143,255,.45);
}
/* ============================
   CALLPANEL — HERO SPECS ICONS
============================ */

.mdf-spec-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .9;
}

.mdf-spec-icon::before {
  display: block;
  font-size: 16px;
  line-height: 1;
}
/* ============================
   INTERCOM — HERO SPECS ICONS
============================ */

/* базовый класс уже есть:
.mdf-spec-icon { … }
*/

.mdf-spec-icon.mdf-ico-display::before {
  content: "🖥️";
}

.mdf-spec-icon.mdf-ico-channels::before {
  content: "🎞️";
}

.mdf-spec-icon.mdf-ico-ai::before {
  content: "🤖";
}

.mdf-spec-icon.mdf-ico-wifi::before {
  content: "📶";
}

.mdf-spec-icon.mdf-ico-sd::before {
  content: "💾";
}

.mdf-spec-icon.mdf-ico-camera::before {
  content: "📷";
}

.mdf-spec-icon.mdf-ico-monitor::before {
  content: "🖥️";
}


/* === ICON MAP (STRICT) === */

.mdf-spec-icon.mdf-ico-video::before {
  content: "🎥";
}

.mdf-spec-icon.mdf-ico-ir::before {
  content: "🌙";
}

.mdf-spec-icon.mdf-ico-angle::before {
  content: "📐";
}

.mdf-spec-icon.mdf-ico-color::before {
  content: "🎨";
}

.mdf-spec-icon.mdf-ico-signal::before {
  content: "📡";
}

/* ============================================================
   LABEL / LINE / VALUE
============================================================ */

.mdf-spec-label{
white-space:nowrap;
opacity:.85;
}

.mdf-spec-value{
white-space:nowrap;
font-weight:500;
}
/* ============================================================
   MOBILE ADAPTIVE — VALUE UNDER LABEL
============================================================ */

@media (max-width:768px){
  .mdf-product-right {
    padding: 10px !important;
  }
  .mdf-title{
  font-size:24px;
  }

  .mdf-price-current{
  font-size:22px;
  }

  .mdf-spec-icon{
  grid-area:icon;
  }

  .mdf-spec-label{
  grid-area:label;
  }

  .mdf-spec-value{
    grid-area:value;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    opacity:.9;
    text-align:left;
  }
}

/* BUTTON */
.mdf-btn-order {
margin-top: 14px;
padding: 14px 26px;
border-radius: var(--radius-md);
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 16px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.mdf-btn-order:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.mdf-btn-order-wrap{
display: flex;
justify-content: center;
}
/* =========================================================
   MDF MAGNIFIER — FIX (VARIANT A)
   Линза считает координаты по img, а не по контейнеру
========================================================= */

.mdf-main-image-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mdf-main-image{
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* ============================================================
FULLSCREEN LIGHTBOX (FIX: классы как в HTML = mdf-*)
============================================================ */

/* базово скрыт */
.mdf-lightbox {
position: fixed;
inset: 0;
z-index: 9999;

display: flex;
align-items: center;
justify-content: center;
padding: 24px;

opacity: 0;
pointer-events: none;
transition: opacity .20s ease;
}

/* открыто */
.mdf-lightbox.mdf-open {
opacity: 1;
pointer-events: auto;
}

/* подложка */
.mdf-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgb(102 102 102 / 78%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

/* картинка */
.mdf-lightbox-img {
position: relative;
z-index: 1;
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}

/* кнопка закрытия */
.mdf-lightbox-close {
position: absolute;
top: calc(24px + var(--wp-admin--admin-bar-height, 0px));
right: 24px;

width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(0,0,0,0.75);
color: #fff;
cursor: pointer;
font-size: 20px;

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

z-index: 5;
}

/* стрелки навигации */
.mdf-lightbox-prev,
.mdf-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);

width: 46px;
height: 46px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(0,0,0,0.75);
color: #fff;
cursor: pointer;
font-size: 26px;

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

z-index: 5;
}

.mdf-lightbox-prev { left: 32px; }
.mdf-lightbox-next { right: 32px; }

.mdf-lightbox-close:hover,
.mdf-lightbox-prev:hover,
.mdf-lightbox-next:hover {
background: rgba(0,0,0,0.90);
}

/* ============================================================
АДАПТИВ
============================================================ */
@media (max-width: 1024px) {
.mdf-title { font-size: 28px; }
.mdf-price { font-size: 32px; }
}

@media (max-width: 768px) {
.mdf-glass-block {
padding: 24px;
border-radius: var(--radius-lg);
}

.mdf-product-top {
flex-direction: column;
gap: 24px;
}

.mdf-product-top::after {
display: none;
}

.mdf-product-left,
.mdf-product-right {
width: 100%;
max-width: 100%;
padding: 0;
}

.mdf-slider {
align-items: center;
}
}

@media (max-width: 575px) {
.mdf-product-section {
padding: 24px 0 48px;
}

.mdf-glass-block {
padding: 10px;
}

.mdf-title {
font-size: 24px;
}

.mdf-price {
font-size: 28px;
}

.mdf-lightbox-close {
top: calc(16px + var(--wp-admin--admin-bar-height, 0px));
right: 16px;
}

.mdf-lightbox-prev,
.mdf-lightbox-next {
width: 40px;
height: 40px;
font-size: 22px;
}

.mdf-lightbox-prev { left: 14px; }
.mdf-lightbox-next { right: 14px; }
}

/* ============================================================
SECTION 2 — INSTALL SERVICES (FINAL, ALIGNED)
MosDomofon / Premium Glass
ТОЛЬКО услуги установки
MosDomofon — INSTALL SERVICES + STICKY SUMMARY (FINAL)
Premium Glass / CTV Style
============================================================ */

/* ============================================================
SECTION BASE
============================================================ */
.mdf-install-section {
margin: 80px 0;
}

/* ============================================================
LAYOUT (2 COLUMNS)
============================================================ */
.mdf-install-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 32px;
align-items: flex-start;
}

/* MOBILE */
@media (max-width: 991px) {
  .mdf-install-layout {
    grid-template-columns: 1fr;
  }

  .mdf-install-sticky {
    display: block;
    position: static;
  }
}

/* ============================================================
LEFT COLUMN (SERVICES)
============================================================ */
.mdf-install-left {
min-width: 0;
}
/* ============================================================
SERVICES CARD
============================================================ */
.mdf-install-services {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(18px);
border-radius: 28px;
color: #fff;
}

/* ============================================================
HEADER
============================================================ */
.mdf-install-head {
text-align: center;
margin-bottom: 40px;
}

.mdf-install-kicker {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 6px;
}

.mdf-install-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 8px;
}

.mdf-install-subtitle {
font-size: 15px;
color: rgba(255,255,255,.8);
}

/* ============================================================
BLOCK BASE
============================================================ */
.mdf-install-block {
margin-top: 42px;
}

.mdf-install-block__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 18px;
}

/* ============================================================
STEP 1 — OBJECT TYPE (CARDS)
============================================================ */
.mdf-install-object-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

@media (max-width: 991px) {
  .mdf-install-object-grid {
  grid-template-columns: 1fr;
  }
}

.mdf-choice-card {
cursor: pointer;
}

.mdf-choice-card input {
display: none;
}

.mdf-choice-ui {
height: 100%;
padding: 18px 20px;
border-radius: 18px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
display: flex;
flex-direction: column;
gap: 8px;
transition: all .25s ease;
}

.mdf-choice-ui strong {
font-size: 15px;
font-weight: 600;
}

.mdf-choice-ui span {
font-size: 13px;
line-height: 1.45;
color: rgba(255,255,255,.75);
}

.mdf-choice-card input:checked + .mdf-choice-ui {
border-color: #2f8fff;
background: rgba(47,143,255,.14);
box-shadow: 0 0 0 1px rgba(47,143,255,.55);
}
.mdf-stock.is-in .mdf-stock-dot {
    background: #22c55e; /* зелёный */
}
.mdf-stock.is-out .mdf-stock-dot {
    background: #f59e0b; /* оранжевый */
}

/* ============================================================
STEP 2 — SERVICES LIST (PSEUDO TABLE)
============================================================ */
.mdf-install-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.mdf-service-row {
position: relative;
}

.mdf-service-row input {
display: none;
}

.mdf-service-row:hover .mdf-service-ui {
background: rgba(255,255,255,0.08);
}

.mdf-service-ui span {
font-size: 14px;
font-weight: 500;
}

.mdf-service-ui strong {
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}

.mdf-service-row input:checked + .mdf-service-ui {
background: rgb(15 41 137 / 33%);
box-shadow: 0 0 0 1px rgba(47,143,255,.55);
}

/* ============================================================
STEP 3 — CABLE
============================================================ */
.mdf-cable-meter {
display: none;
margin-top: 18px;
padding: 16px 20px;
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px dashed rgba(255,255,255,0.18);
}

.mdf-install-services.is-cable-active .mdf-cable-meter {
display: block;
}

.mdf-cable-meter__label {
font-size: 14px;
margin-bottom: 10px;
color: rgba(255,255,255,.85);
}

.mdf-cable-meter__label small {
display: block;
font-size: 12px;
color: rgba(255,255,255,.6);
margin-top: 4px;
}

.mdf-cable-meter__controls {
display: flex;
align-items: center;
gap: 10px;
}

.mdf-meter-minus,
.mdf-meter-plus {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.08);
color: #fff;
font-size: 18px;
cursor: pointer;
}

.mdf-meter-input {
width: 80px;
height: 36px;
text-align: center;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(0,0,0,.25);
color: #fff;
}

/* ============================================================
TOTAL (BOTTOM OF SERVICES)
============================================================ */
.mdf-install-total {
margin-top: 36px;
padding-top: 18px;
}

.mdf-install-total__row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 15px;
}

.mdf-install-total__row.is-grand {
font-size: 18px;
font-weight: 700;
}

/* ============================================================
CTA (LEFT)
============================================================ */
.mdf-install-cta {
margin-top: 32px;
text-align: center;
}

/* ============================================================
RIGHT COLUMN — STICKY SUMMARY (CTV STYLE)
============================================================ */
.mdf-install-sticky {
position: sticky;
top: 110px;
height: fit-content;
}

.mdf-sticky-card {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 26px;
padding: 22px 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.mdf-sticky-head {
display: flex;
justify-content: space-between;
align-items: center;
}

.mdf-sticky-label {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
}

.mdf-sticky-total {
font-size: 22px;
font-weight: 700;
color: #2f8fff;
}

/* ============================================================
STICKY LIST
============================================================ */
.mdf-sticky-list {
margin: 18px 0 22px;
display: flex;
flex-direction: column;
gap: 10px;
}

.mdf-sticky-item {
display: flex;
justify-content: space-between;
font-size: 14px;
color: rgba(255,255,255,.9);
}

.mdf-sticky-item strong {
white-space: nowrap;
}

/* ============================================================
STICKY CTA
============================================================ */
.mdf-sticky-footer .mdf-btn-order--sticky {
width: 100%;
padding: 14px 18px;
border-radius: 16px;
font-size: 15px;
}
/* =========================================================
   INSTALL SERVICES — FINAL (NO BLUE ACTIVE, EDGE LINE)
========================================================= */

.mdf-install-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mdf-service-row{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  

  transition: background .2s ease, box-shadow .2s ease;
}

/* LEFT BLUE LINE — EDGE */
.mdf-service-row::before{
  content:"";
  position:absolute;
  left:0;                 /* ← ПРИЖАТО К КРАЮ */
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:#2f8fff;
  opacity:1;
}

/* hide checkbox */
.mdf-service-row > input{
  display:none;
}

/* TOP STRIP */
.mdf-service-ui{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:18px 18px 18px 24px; /* меньше отступ слева */
  background: rgba(255,255,255,.12);
}

/* TITLE */
.mdf-service-title{
  font-size:16px;
  font-weight:700;
  color:#fff;
  line-height:1.35;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* PRICE */
.mdf-service-price{
  font-size:18px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

/* BOTTOM DESCRIPTION */
.mdf-service-desc{
  padding:14px 18px 16px 24px;
  background: rgba(0,0,0,.28);
  border-top:1px solid rgba(255,255,255,.14);

  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.80);

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* HOVER — LIGHT, NO BLUE */
.mdf-service-row:hover{
  background: rgba(255,255,255,.09);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* CHECKED — NO VISUAL CHANGE (INTENTIONAL) */
.mdf-service-row:has(input:checked){
  box-shadow:none;
  border-color: #007bff;
}

/* MOBILE */
@media (max-width:575px){
  .mdf-service-ui{
    padding:16px 14px 16px 22px;
  }
  .mdf-service-desc{
    padding:12px 14px 14px 22px;
  }
  .mdf-service-price{
    font-size:16px;
  }
}


/* =========================================================
   SINGLE — TABS ACTIVE PANEL (FAQ STYLE)
========================================================= */

.mdf-tab-panel{
position:relative;
padding-left:28px;
}

.mdf-tab-panel::before{
content:"";
position:absolute;
left:0;
top:14px;
bottom:14px;
width:4px;
border-radius:4px;
background:linear-gradient(
180deg,
rgba(47,143,255,1),
rgba(47,143,255,0.35)
);
opacity:0;
transform:scaleY(0.9);
transition:opacity .25s ease,transform .25s ease;
}

.mdf-tab-panel.is-active::before{
  opacity:1;
  transform:scaleY(1);
}

/* Mobile tuning */
@media (max-width:480px){
  .mdf-tab-panel{
  padding-left:20px;
  }
  .mdf-tab-panel::before{
  width:3px;
  top:10px;
  bottom:10px;
  }
}
.mdf-char-label{
  display:flex;
  align-items:center;
  gap:8px;
}

/* =========================================================
   SINGLE — CHARACTERISTICS TABLE (ZEBRA / NO BORDERS)
========================================================= */

.mdf-ctv-table{
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:15px;
color:rgba(255,255,255,.95);
}

.mdf-ctv-table tr{
background:transparent;
}

.mdf-ctv-table tr:nth-child(even){
background:rgba(255,255,255,.09);
}

.mdf-ctv-table th,
.mdf-ctv-table td{
padding:14px 18px;
border:none;
vertical-align:top;
}

/* левая колонка */
.mdf-ctv-table th{
width:38%;
font-weight:500;
color:rgba(255,255,255,.75);
text-align:left;
}

/* правая колонка */
.mdf-ctv-table td{
font-weight:400;
color:#ffffff;
}

/* убираем любые внешние рамки */
.mdf-ctv-table-wrap{
  padding:0;
  background:none;
  margin: 30px 0;
  border: 1px solid #ffffff4d;
}
@media (max-width:420px){
.mdf-ctv-table tr{
display:block;
padding:12px 14px;
}
.mdf-ctv-table th,
.mdf-ctv-table td{
display:block;
width:100%;
padding:0;
}
.mdf-ctv-table th{
margin-bottom:6px;
opacity:.7;
font-size:13px;
}
}

/* =========================================================
MDF ORDER MODAL — PREMIUM DARK GLASS (FINAL)
STYLE MATCH: QUIZ UI
NO HTML / NO JS CHANGES
========================================================= */
.mdf-order-modal{
position:fixed;
inset:0;
z-index:100000;
display:none;
align-items:center;
justify-content:center;
isolation:isolate;
}
.mdf-order-modal.active{
display:flex;
}
/* ================= BACKDROP ================= */
.mdf-order-backdrop{
position:absolute;
inset:0;
background:radial-gradient(1200px 600px at 50% 20%,rgba(47,143,255,0.12),transparent 60%),rgba(6,10,24,0.88);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
/* ================= CARD ================= */
.mdf-order-content{
position:relative;
z-index:2;
width:100%;
max-width:520px;
max-height:92vh;
display:flex;
flex-direction:column;
background: linear-gradient(180deg, rgb(0 21 104 / 55%), rgb(85 85 85 / 73%));
-webkit-backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,0.18);
border-radius:32px;
box-shadow:0 40px 120px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.25);
overflow:hidden;
}
/* ================= SUMMARY ================= */
.mdf-order-summary{
padding:15px;
border-bottom:1px solid rgba(255,255,255,0.12);
}
.mdf-order-row:has(.mdf-order-product:empty){
display:none;
}
.mdf-order-row:has([data-order-product-price]:empty){
display:none;
}
.mdf-order-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
font-size:12px;
}
.mdf-order-row+.mdf-order-row{
margin-top:8px;
}
.mdf-order-label{
color:rgba(255,255,255,0.65);
}
.mdf-order-product{
font-weight:600;
color:#ffffff;
}
.mdf-order-product:empty::before{
content:"Выберите комплект";
opacity:0.5;
font-weight:400;
}
.mdf-order-value{
color:rgba(255,255,255,0.85);
}
.mdf-order-divider{
height:1px;
margin:12px 0;
background:linear-gradient(to right,transparent,rgba(255,255,255,0.25),transparent);
}
.mdf-order-row--total{
font-size:16px;
}
.mdf-order-total{
  font-size:22px;
  font-weight:700;
  color:#2f8fff;
  text-shadow:0 0 18px rgba(47,143,255,0.45);
}
/* ================= FORM ================= */
.mdf-order-content .mdf-form{
display:flex;
flex-direction:column;
min-height:100%;
}
.mdf-form__grid{
padding:22px 24px 26px;
display:grid;
grid-template-columns:1fr;
row-gap:16px;
}
/* ================= LABEL ================= */
.mdf-label{
font-size:13px;
margin-bottom:6px;
color:rgba(255,255,255,0.85);
}
/* ================= INPUT ================= */
.mdf-field--full{
display: flex;
flex-direction: column;
gap:5px;
}
.mdf-input{
width:100%;
padding:14px 18px;
border-radius:18px;
background:rgba(0,0,0,0.35);
border:1px solid rgba(255,255,255,0.16);
color:#ffffff;
font-size:15px;
outline:none;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.mdf-input::placeholder{
color:rgba(255,255,255,0.45);
}
.mdf-input:focus{
background:rgba(0,0,0,0.45);
border-color:rgba(47,143,255,0.75);
box-shadow:0 0 0 3px rgba(47,143,255,0.25);
}
/* ================= TEXTAREA ================= */
.mdf-textarea{
width:100%;
height:10px;
padding:14px 18px;
border-radius:20px;
background:rgba(0,0,0,0.35);
border:1px solid rgba(255,255,255,0.16);
color:#ffffff;
font-size:15px;
resize:none;
outline:none;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.mdf-textarea::placeholder{
color:rgba(255,255,255,0.45);
}
.mdf-textarea:focus{
background:rgba(0,0,0,0.45);
border-color:rgba(47,143,255,0.75);
box-shadow:0 0 0 3px rgba(47,143,255,0.25);
}
/* ================= SUBMIT ================= */
.mdf-order-content .mdf-btn{
width:100%;
margin-top:8px;
padding:16px 22px;
border-radius:22px;
background:linear-gradient(135deg,#2f8fff,#1c6fe8);
box-shadow:0 16px 40px rgba(47,143,255,0.45),inset 0 1px 0 rgba(255,255,255,0.35);
color:#ffffff;
font-size:16px;
font-weight:600;
letter-spacing:.2px;
border:none;
cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.mdf-order-content .mdf-btn:hover{
transform:translateY(-1px);
box-shadow:0 22px 50px rgba(47,143,255,0.55),inset 0 1px 0 rgba(255,255,255,0.45);
filter:brightness(1.06);
}
.mdf-order-content .mdf-btn:active{
transform:translateY(0);
box-shadow:0 10px 22px rgba(47,143,255,0.35),inset 0 2px 6px rgba(0,0,0,0.35);
}
.mdf-order-content .mdf-btn:disabled{
opacity:.6;
cursor:default;
filter:grayscale(.4);
box-shadow:none;
}
/* ================= STATUS ================= */
.mdf-form__status{
margin-top:8px;
font-size:13px;
color:rgba(255,255,255,0.75);
}
/* ================= MOBILE ================= */
@media(max-width:575px){
.mdf-order-content{
max-width:95%;
border-radius:26px;
}
.mdf-form__grid{
padding:20px 20px 24px;
}
}
.mdf-policy{display:flex;align-items: center;gap:10px;margin:12px 0 0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.8);}
.mdf-policy input{margin-top:3px;}
.mdf-policy a{color:#2f8fff;text-decoration:none;}
.mdf-policy a:hover{text-decoration:underline;}
/* =========================================================
   MDF FOOTER — WP_NAV_MENU + DROPDOWN (FINAL / STABLE)
   Scope: footer only
========================================================= */

/* ================= BASE ================= */

.mdf-footer{
  background: rgb(8 18 68 / 75%);
  padding:48px 0 32px;
  color:#ffffff;
  position:relative;
  overflow:visible; /* важно — не обрезать dropdown */
  z-index:10;
}

/* ================= NAV ================= */

.mdf-footer-nav{
  margin-bottom:40px;
  position:relative;
  z-index:50;
}

/* RESET */
.mdf-footer-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* MAIN MENU (wp_nav_menu -> menu_class: mdf-footer-menu) */
.mdf-footer-nav .mdf-footer-menu{
  display:flex;
  gap:32px;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* TOP LEVEL ITEMS */
.mdf-footer-nav .mdf-footer-menu > li{
  position:relative;
  overflow:visible;
}

/* TOP LEVEL LINKS */
.mdf-footer-nav .mdf-footer-menu > li > a{
  position:relative;
  display:inline-block;
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  padding:6px 0;
  transition:color .2s ease;
}

.mdf-footer-nav .mdf-footer-menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#2f8fff;
  transition:width .25s ease;
}

.mdf-footer-nav .mdf-footer-menu > li > a:hover{
  color:#ffffff;
}

.mdf-footer-nav .mdf-footer-menu > li > a:hover::after{
  width:100%;
}

/* =========================================================
   DROPDOWN SUB MENU — FIX (НЕ ПРОПАДАЕТ / МОЖНО КЛИКНУТЬ)
========================================================= */

/* 1) HOVER BRIDGE: убираем “зазор” между пунктом и меню */
.mdf-footer-nav .mdf-footer-menu li.menu-item-has-children{
  padding-bottom:14px; /* зона удержания */
}

.mdf-footer-nav .mdf-footer-menu li.menu-item-has-children::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:14px; /* равен padding-bottom */
  background:transparent;
}

/* 2) SUBMENU: перебиваем любые глобальные display:none */
.mdf-footer-nav .sub-menu{
  display:block !important;     /* критично, если в теме есть .sub-menu{display:none} */
  position:absolute;
  top:100%;
  left:0;

  min-width:260px;

  /* визуальный отступ вниз, hover не рвётся из-за bridge */
  margin-top:10px;

  background:rgba(12, 26, 82, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius:16px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);

  padding:8px 0;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(6px);

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;

  z-index:999;
}

/* SHOW ON HOVER / FOCUS */
.mdf-footer-nav .mdf-footer-menu li.menu-item-has-children:hover > .sub-menu,
.mdf-footer-nav .mdf-footer-menu li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* SUB ITEMS */
.mdf-footer-nav .sub-menu li{
  margin:0;
}

/* SUB LINKS */
.mdf-footer-nav .sub-menu a{
  display:block;
  line-height:42px;
  padding:0 18px;

  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.9);
  text-decoration:none;

  transition:background .2s ease, color .2s ease;
}

/* DOT */
.mdf-footer-nav .sub-menu a::before{
  content:"•";
  margin-right:8px;
  opacity:.45;
}

/* HOVER */
.mdf-footer-nav .sub-menu a:hover{
  background:rgba(120,170,255,0.16);
  color:#ffffff;
}

/* =========================================================
   GRID
========================================================= */

.mdf-footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:flex-start;
  margin-bottom:32px;
  gap:24px;
}

/* LEFT */
.mdf-footer-col--left{
  justify-self:start;
  text-align:left;
}

/* CENTER */
.mdf-footer-col--center{
  justify-self:center;
  text-align:center;
}

/* RIGHT */
.mdf-footer-col--right{
  justify-self:end;
  text-align:right;
}

/* ================= CONTENT ================= */

.mdf-footer-brand{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
}

.mdf-footer-desc{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,0.8);
  max-width:360px;
}

.mdf-footer-inn-label{
  font-size:13px;
  color:rgba(255,255,255,0.7);
  margin-bottom:4px;
}

.mdf-footer-inn{
  font-size:15px;
  font-weight:600;
  margin-bottom:6px;
}

.mdf-footer-owner{
  font-size:14px;
  color:rgba(255,255,255,0.8);
}

.mdf-footer-phone{
  display:inline-block;
  font-size:18px;
  font-weight:600;
  color:#ffffff;
  text-decoration:none;
  margin-bottom:10px;
}

.mdf-footer-support{
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,0.75);
}

/* ================= BOTTOM ================= */

.mdf-footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:13px;
  color:rgba(255,255,255,0.65);
  gap:12px;
  flex-wrap:wrap;
}

.mdf-footer-bottom a{
  color:rgba(255,255,255,0.75);
  text-decoration:none;
}

.mdf-footer-bottom a:hover{
  color:#ffffff;
}


/* ================= RESPONSIVE ================= */

@media(max-width:1024px){
  .mdf-footer-nav .mdf-footer-menu{
    justify-content:center;
    gap:20px;
  }
}

@media(max-width:768px){
  .mdf-footer-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .mdf-footer-col--left,
  .mdf-footer-col--center,
  .mdf-footer-col--right{
    justify-self:start;
    text-align:left;
  }

  .mdf-footer-bottom{
    flex-direction:column;
    gap:10px;
    text-align:center;
    align-items:center;
  }

  /* MOBILE — ALWAYS SHOW SUBMENU */
  .mdf-footer-nav .mdf-footer-menu li.menu-item-has-children{
    padding-bottom:0;
  }
  .mdf-footer-nav .mdf-footer-menu li.menu-item-has-children::after{
    display:none;
  }

  .mdf-footer-nav .sub-menu{
    position:static;
    margin-top:8px;

    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;

    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    padding:0;
    border-radius:0;
  }
}

/* FIX */
footer#colophon{
  flex-shrink:0;
}


/* ---------------------- энд главная ----------------------------- */


/* ---------------------------------------------------------
   ARCHIVE SEO TEXT — auto left divider for first paragraph
--------------------------------------------------------- */
.archive-seo-text__inner h2 + p,
.archive-seo-text__inner h3 + p{
  position: relative;
  padding-left: 18px;
  margin: 24px 0;
}
.archive-seo-text{
  margin-top: 50px;
}
.archive-seo-text__inner h2 + p::before,
.archive-seo-text__inner h3 + p::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 4px;
  height: calc(100% - 0.8em);
  background: #1e6bff;
  border-radius: 2px;
}


/* ---------------------------------------------------------
   SINGLE — CTA в блоке "Монтаж"
--------------------------------------------------------- */
.mdf-install-cta{
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.mdf-install-cta .special-offer-card__cta{
  width: auto;
  min-width: 260px;
  max-width: 420px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 16px;
}


/* =========================================================
   SINGLE — DESCRIPTION: line under each paragraph
========================================================= */

.mdf-description p{
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: rgb(255 255 255 / 66%);
}

.mdf-description p::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.30);
}

/* надёжно: убираем линию у последнего абзаца */
.mdf-description > p:last-of-type{
  margin-bottom: 0;
  padding-bottom: 0;
}

.mdf-description > p:last-of-type::after{
  display: none;
}


/* =========================================================
   SINGLE — DESCRIPTION: blue left line ONLY for subheadings
   only h3 inside .mdf-description
========================================================= */

.mdf-description h3{
  position: relative;
  padding-left: 18px;
  margin: 28px 0 14px;
}

.mdf-description h3::before{
  content:"";
  position:absolute;
  left:0;
  top:0.25em;
  bottom:0.25em;
  width:4px;
  border-radius:4px;
  background: linear-gradient(
    180deg,
    rgba(47,143,255,1),
    rgba(47,143,255,0.35)
  );
}

@media (max-width:480px){
  .mdf-description h3{
    padding-left: 14px;
  }
  .mdf-description h3::before{
    width:3px;
  }
}
.archive-seo-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding: 10px;
  margin:14px 0 6px;
  text-decoration:none;
  white-space:nowrap;
}

/* ================= COOKIE CONSENT ================= */
.mdf-cookie{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  background:rgba(15,15,20,.95);
  color:#fff;
  padding:16px;
  border: 1px solid #898989cc;
  margin: 10px auto;
  max-width: 1440px;
  width: 100%;
}
.mdf-cookie[hidden]{ display:none !important; }

.mdf-cookie__inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction: row-reverse;
  gap:16px;
  align-items:center;
  justify-content:space-evenly;
  flex-wrap:wrap;
}
.mdf-cookie__text{
  font-size:14px;
  line-height:1.4;
}
.mdf-cookie__text a{
  color:#8ab4ff;
  text-decoration:underline;
}
.mdf-cookie__actions{
  display:flex;
  gap:10px;
}
.mdf-cookie__btn{
  padding:8px 14px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  border:none;
}
.mdf-cookie__btn--accept{
  background:#4caf50;
  color:#fff;
}
.mdf-cookie__btn--reject{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  opacity: 0.15;
}
.mdf-cookie-settings{
  cursor:pointer;
  text-decoration:underline;
}
@media (max-width: 575px) {
  .mdf-cookie__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* =========================================================
   MOBILE HERO: карточка сверху, мастер уменьшен и снизу
   (правки по просьбе заказчика, 02.07.2026)
========================================================= */
@media (max-width: 768px){
  .hero{
    flex-direction: column;
    background: #02092d;
    min-height: 0;
  }
  .hero__bg-picture{
    position: relative;
    inset: auto;
    order: 2;
    width: min(72vw, 320px);
    height: auto;
    margin: 14px auto 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(0,0,0,0.4);
  }
  .hero__bg-seo{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

/* =========================================================
   MOBILE: плавающие виджеты одинакового размера,
   ровно друг под другом (мессенджер над кнопкой квиза)
========================================================= */
@media (max-width: 768px){
  .ws-quiz-btn-el-container{
    right: 14px !important;
    left: auto !important;
    bottom: 14px !important;
  }
  .mdf-messenger{
    right: 14px;
    bottom: 76px;
  }
  .mdf-messenger__main{
    width: 50px;
    height: 50px;
  }
  .mdf-messenger__actions{
    bottom: 60px;
  }
}

/* якорь на встроенный квиз: не прятать заголовок под фиксированной шапкой */
#quiz-embed{
  scroll-margin-top: calc(var(--header-h, 72px) + 14px);
}

/* =========================================================
   QUIZ-EMBED: отступ от первого блока + шапка секции,
   на мобилке убираем большой отступ после квиза
========================================================= */
.quiz-embed-section{
  padding: 64px 0 24px;
}
.quiz-embed-section .section-head{
  margin-bottom: 28px;
}
@media (max-width: 768px){
  .quiz-embed-section{
    padding: 36px 0 0;
  }
  #domofon-komplekty{
    padding-top: 28px;
  }
}