/*
 * Мозгва — главная страница.
 * Самостоятельный набор: все классы и переменные с префиксом mz-, чтобы не пересекаться с app.css.
 * Порядок: токены → база → каркас → блоки сверху вниз → модалки, тост, плавающая кнопка → анимации.
 * Брейкпоинты (только эти): 1180, 1140 (min), 1100, 1040, 1024 (min), 900, 760, 700, 640, 560.
 * Источники: Figma «Mozgva | Мозгва» → «• Макеты» (Desctop 7833:43948, Mobile 7035:26866), прототип v67.
 */

/* ===================== токены ===================== */
@font-face { font-family: "Graublau Slab"; font-weight: 600; font-display: swap; src: url("../fonts/graublau-slab-600.woff2") format("woff2"); }
@font-face { font-family: "Graublau Slab"; font-weight: 700; font-display: swap; src: url("../fonts/graublau-slab-700.woff2") format("woff2"); }

:root {
  /* цвета */
  --mz-bg: #070815;            /* basic/black: фон страницы, тёмные блоки, баннер */
  --mz-ink: #070815;           /* текст на светлых кнопках */
  --mz-panel: #11132B;         /* панели, хиро, модалки */
  --mz-panel-2: #0F1126;       /* верх футера */
  --mz-card: rgba(105, 88, 255, 0.2);  /* карточка игры, FAQ, низ футера */
  --mz-text: #F2F3FF;          /* basic/white */
  --mz-text-2: rgba(242, 243, 255, 0.8);
  --mz-muted: rgba(242, 243, 255, 0.6);
  --mz-grey-light: #E3E4F1;    /* большие заголовки блоков */
  --mz-action: #B1B3CB;        /* ховер outline-кнопок в карточке, точки галереи */
  --mz-border-card: #6958FF;   /* border/card: рамка тёмных блоков и баннера, кольцо фокуса */
  --mz-border-card-hover: #8A7DFF; /* ховер рамки баннера — в Figma токена нет, уточнить */
  --mz-line: rgba(242, 243, 255, 0.14);
  --mz-line-hero: rgba(242, 243, 255, 0.4);
  --mz-field: rgba(242, 243, 255, 0.08);
  --mz-field-hover: rgba(242, 243, 255, 0.12);
  --mz-field-dark: rgba(7, 8, 21, 0.5);        /* поля фильтра в хиро */
  --mz-field-dark-hover: rgba(7, 8, 21, 0.72);
  --mz-border-field: rgba(242, 243, 255, 0.3);
  --mz-border-white: rgba(242, 243, 255, 0.9);
  --mz-blue: #1A00FF;
  --mz-green: #94FF29;
  --mz-purple: #9900FF;
  --mz-orange: #FFE1BA;
  --mz-magenta: #FF00EA;
  --mz-btn-grad: linear-gradient(180deg, #FFFFFF 0%, #E3E4F1 100%);  /* Button Type=Fill */

  /* шрифты */
  --mz-sans: "Onest", "Helvetica Neue", Arial, sans-serif;
  --mz-slab: "Graublau Slab", "Rockwell", "Roboto Slab", Georgia, serif;

  /* радиусы */
  --mz-r-sm: 8px;
  --mz-r-md: 12px;
  --mz-r-lg: 16px;
  --mz-r-xl: 20px;
  --mz-r-2xl: 24px;
  --mz-r-full: 9999px;

  /* отступы */
  --mz-s1: 4px;
  --mz-s3: 8px;
  --mz-s4: 12px;
  --mz-s5: 16px;
  --mz-s6: 20px;
  --mz-s7: 24px;
  --mz-s8: 32px;
  --mz-s9: 40px;

  /* движение */
  --mz-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===================== база ===================== */
.mz-page, .mz-page *, .mz-page *::before, .mz-page *::after,
.mz-modal, .mz-modal *, .mz-toasts, .mz-toasts * { box-sizing: border-box; }

body.mz-body {
  margin: 0;
  padding: 12px 16px 48px;
  background: var(--mz-bg);
  color: var(--mz-text);
  font: 500 16px/1.4 var(--mz-sans);
  -webkit-font-smoothing: antialiased;
}
/* базовые правила — через :where(), с нулевой специфичностью: классы блоков всегда сильнее */
:where(.mz-page, .mz-modal) a { color: inherit; }
:where(.mz-page, .mz-modal) :where(button, input, select) { font: inherit; color: inherit; }
:where(.mz-page, .mz-modal) img { max-width: 100%; }
:where(.mz-page, .mz-modal) :where(h1, h2, h3, p, figure) { margin: 0; }
.mz-page :focus-visible, .mz-modal :focus-visible { outline: 2px solid var(--mz-border-card); outline-offset: 2px; }
.mz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* кнопки */
.mz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px;
  border-radius: var(--mz-r-md); border: 1px solid transparent;
  font: 500 16px/1 var(--mz-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform 160ms var(--mz-ease-out);
}
.mz-btn img { width: 24px; height: 24px; flex: none; }
.mz-btn:active { transform: scale(0.97); }
/* Button Type=Fill: белый градиент. Никогда без border: 0 — иначе по краю виден повтор градиента */
.mz-btn-fill {
  border: 0; background-color: var(--mz-text); background-image: var(--mz-btn-grad); color: var(--mz-ink);
  box-shadow: inset 0 2px 2px var(--mz-text), inset 0 -1px 2px var(--mz-ink);
}
/* ховер — сплошной цвет; градиент снимаем без transition, иначе «моргает» */
@media (hover: hover) and (pointer: fine) { .mz-btn-fill:hover { background-image: none; } }
.mz-btn-fill:active { background-image: none; }
.mz-btn-outline { border-color: var(--mz-border-field); background: transparent; color: var(--mz-text); }
@media (hover: hover) and (pointer: fine) { .mz-btn-outline:hover { border-color: var(--mz-border-white); background: var(--mz-field); } }

/* заголовочный блок (Level=H2) */
.mz-tb { display: flex; flex-direction: column; gap: var(--mz-s7); min-width: 0; }
.mz-tb h2 { font: 700 clamp(32px, 3.6vw, 52px)/0.8 var(--mz-slab); letter-spacing: -0.03em; text-wrap: balance; }
.mz-tb-sub { font: 500 clamp(18px, 2vw, 24px)/1.15 var(--mz-sans); color: var(--mz-text-2); max-width: 46ch; }
.mz-tb-center { align-items: center; text-align: center; }
.mz-tb-center .mz-tb-sub { color: var(--mz-grey-light); }
.mz-tb-big { gap: var(--mz-s4); }
.mz-tb-big h2 { font-size: clamp(40px, 5.6vw, 80px); line-height: 0.9; color: var(--mz-grey-light); }

/* ===================== каркас ===================== */
/* оболочка 1280 по центру, блоки-панели через 12 */
.mz-page { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--mz-s4); }
.mz-page > * { min-width: 0; }

/* Фон главной — Vector 75 из макета: сам вектор 1924×1426, размытие вокруг него.
   Картинка 2524×2303: по ширине вектор как в Фигме (1924), по высоте растянут с 976 до 1426.
   Родитель обрезает форму, поэтому страница не разъезжается. */
.mz-page-glow { position: absolute; left: 0; right: 0; top: 0; height: 1760px; z-index: 0; pointer-events: none; overflow: hidden; }
.mz-page-glow .mz-shape { position: absolute; left: 50%; top: -573px; width: 3030px; height: 2303px; transform: translateX(-50%); }
.mz-page-glow .mz-shape img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
/* Лучи макета лежат на фоне страницы (слой 1920×981), карточка их закрывает.
   В полях по краям они добавляют свет, внутри блока остаётся только блюр вектора. */
.mz-rays { position: absolute; left: 0; top: 0; width: 100%; height: 981px; pointer-events: none; }

/* светлая панель */
.mz-sec { display: flex; flex-direction: column; gap: var(--mz-s7); padding: clamp(20px, 3vw, 32px); border-radius: var(--mz-r-2xl); background: var(--mz-panel); }

/* тёмный блок: «Что такое Мозгва», «Партнёры» */
.mz-dblock {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: var(--mz-s8);
  padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 32px);
  border-radius: var(--mz-r-2xl); background: var(--mz-bg); border: 1px solid var(--mz-border-card);
}
.mz-dblock-glow { position: absolute; left: 50%; bottom: -112px; width: 1490px; height: 756px; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.mz-dblock-glow img { position: absolute; left: -13.42%; top: -26.46%; width: 126.84%; height: 152.92%; max-width: none; }

/* плавающие ленты конфетти в тёмных блоках */
.mz-confetti { position: absolute; z-index: -1; width: var(--cw, 92px); pointer-events: none; opacity: 0.95; transform: rotate(var(--rot, 0deg)); }
@media (prefers-reduced-motion: no-preference) {
  .mz-confetti { animation: mz-float 6s ease-in-out infinite alternate; }
  .mz-confetti:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
}
@media (max-width: 1100px) { .mz-confetti.mz-hide-md { display: none; } }  /* ленты у цифр закрывали «120» и «18/50» */
@media (max-width: 700px) { .mz-confetti { width: calc(var(--cw, 92px) * 0.61); } }

@media (max-width: 640px) {
  /* телефон: блоки во всю ширину экрана, как в мобильном макете (x=0, зазор 12) */
  body.mz-body { padding: 0; }
  .mz-dblock { padding: 32px 16px; }
  .mz-dblock .mz-confetti { display: none; }
}
@media (max-width: 560px) { .mz-sec { padding: var(--mz-s5); } }

/* ===================== баннер «Предстоящая игра» (Card-Compact 7833:43949 / 8165:9868) ===================== */
.mz-ug {
  position: relative; display: flex; align-items: center; color: var(--mz-text);
  background: var(--mz-bg); border: 1px solid var(--mz-border-card); border-radius: var(--mz-r-2xl);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: border-color .2s ease;
}
.mz-ug[hidden] { display: none; }
.mz-ug-a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 24px; min-height: 42px; padding: 4px 64px 4px 24px; color: inherit; text-decoration: none; border-radius: inherit; }
.mz-ug-title { flex: none; font: 500 16px/1.25 var(--mz-sans); white-space: nowrap; }
.mz-ug-details { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 2px; }
.mz-ug-item { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 14px/1.25 var(--mz-sans); }
.mz-ug-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; overflow: visible; }
.mz-ug-ic img { max-width: none; }
.mz-ug-x {
  position: absolute; right: 23px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 6px; display: grid; place-items: center;
  border: 0; border-radius: var(--mz-r-sm); background: transparent; cursor: pointer;
  transition: background-color .2s ease, transform 160ms var(--mz-ease-out);
}
.mz-ug-x:active { transform: translateY(-50%) scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .mz-ug:hover { border-color: var(--mz-border-card-hover); }
  .mz-ug-x:hover { background: var(--mz-field-hover); }
}
/* на главной баннер выводится дважды: над шапкой (десктоп) и в хиро (мобайл) */
@media (min-width: 901px) { .mz-ug--hero { display: none; } }
@media (max-width: 900px) {
  .mz-ug--top.mz-ug--home { display: none; }
  .mz-ug { align-items: flex-start; }
  .mz-ug-a { flex-direction: column; align-items: flex-start; gap: 24px; padding: 16px; }
  .mz-ug-details { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; }
  .mz-ug-x { top: 7px; right: 7px; transform: none; }
  .mz-ug-x:active { transform: scale(0.95); }
}

/* ===================== шапка (Header 6933:8378) ===================== */
.mz-hd { position: relative; z-index: 3; }
.mz-hd-row { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.mz-hd-brand { display: flex; align-items: center; gap: 24px; flex: none; }
.mz-hd-logo { display: block; flex: none; }
.mz-hd-logo img { display: block; width: 147px; height: 40px; }
.mz-hd-city {
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--mz-text);
  font: 500 16px/1.25 var(--mz-sans);
  text-decoration: underline dotted; text-decoration-thickness: 8%; text-underline-position: from-font;
}
.mz-hd-nav { flex: 1 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.mz-hd-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px;
  border: 0; border-radius: var(--mz-r-md); background: transparent;
  font: 500 16px/1.25 var(--mz-sans); color: var(--mz-text); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.mz-hd-btn img { width: 24px; height: 24px; flex: none; }
.mz-hd-btn.is-current { background: var(--mz-field); }
@media (hover: hover) and (pointer: fine) { .mz-hd-btn:hover { background: var(--mz-field); } }
.mz-hd-cab { gap: 4px; padding: 12px; }
.mz-hd-count { min-width: 22px; padding: 4px; border-radius: var(--mz-r-full); background: var(--mz-text); color: var(--mz-ink); font: 600 14px/1 var(--mz-sans); text-align: center; }

.mz-hd-mob { display: none; align-items: center; gap: 16px; padding-block: 12px; }
.mz-hd-mob .mz-grow { flex: 1; }
.mz-hd-logo-m img { display: block; width: 72px; height: 20px; }
.mz-hd-mob .mz-hd-city { font: 500 13px/1.15 var(--mz-sans); }
.mz-hd-icon { display: inline-grid; place-content: center; width: 40px; height: 40px; margin: -8px; border: 0; border-radius: var(--mz-r-sm); background: transparent; cursor: pointer; }
.mz-hd-icon img { width: 24px; height: 24px; display: block; }
@media (hover: hover) and (pointer: fine) { .mz-hd-icon:hover { background: var(--mz-field); } }

.mz-mnav { display: none; flex-direction: column; gap: 4px; margin-top: 8px; padding: var(--mz-s3); border-radius: var(--mz-r-xl); background: var(--mz-panel); border: 1px solid var(--mz-line); }
.mz-mnav.is-open { display: flex; }
.mz-mnav a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--mz-r-md); text-decoration: none; }
.mz-mnav a img { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .mz-mnav a:hover { background: var(--mz-field); } }

@media (max-width: 1180px) {
  .mz-hd-nav { gap: 4px; }
  .mz-hd-nav .mz-hd-btn { padding-inline: 12px; }
  .mz-hd-nav .mz-hd-btn img { display: none; }
}
/* около 1010 город наезжает на «Расписание игр» — до 1040 мобильная шапка с бургером */
@media (max-width: 1040px) {
  .mz-hd-row { display: none; }
  .mz-hd-mob { display: flex; }
}

/* ===================== верх главной: хиро + игры одной панелью ===================== */
.mz-top { display: flex; flex-direction: column; border-radius: var(--mz-r-2xl); background: var(--mz-panel); }

/* ----- хиро (Hero 7833:43965 / мобайл 7035:28070) ----- */
.mz-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 12px 32px 32px;
  border-radius: var(--mz-r-2xl) var(--mz-r-2xl) 0 0;
}
.mz-hero > .mz-hd { align-self: stretch; }
/* фон — статичная форма Vector 75 с медленным «переливанием» */
.mz-hero-shape { position: absolute; left: 50%; top: -135px; width: 1924px; height: 976px; transform: translateX(-50%) rotate(180deg); z-index: -2; pointer-events: none; }
.mz-hero-shape img { position: absolute; left: -300px; top: -300px; width: 2524px; height: 1576px; max-width: none; }
.mz-hero-shape .mz-shape-b { opacity: 0; transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .mz-hero-shape img { animation: mz-sh-drift 17s ease-in-out infinite alternate; will-change: transform, opacity; }
  .mz-hero-shape .mz-shape-b { animation: mz-sh-swap 11s ease-in-out -4s infinite alternate; }
}
/* низ хиро плавно уходит в цвет панели с играми */
.mz-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(17, 19, 43, 0) 0%, var(--mz-panel) 100%); }

.mz-hero-body { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 40px; padding-block: 16px; }
.mz-hero-title { width: min(100%, 960px); min-height: clamp(180px, 17vw, 248px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.mz-hero-title h1 { font: 700 clamp(56px, 5.6vw, 80px)/0.9 var(--mz-slab); letter-spacing: -0.03em; text-wrap: balance; }
.mz-hero-title p { font: 500 clamp(18px, 1.7vw, 24px)/1.15 var(--mz-sans); color: #fff; opacity: 0.8; }

/* кнопки-пилюли с картинками, вылезающими за край */
.mz-offers { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.mz-offer {
  height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 24px 8px 16px; border: 1px solid var(--mz-line-hero); border-radius: 32px; background: transparent;
  font: 500 16px/1.25 var(--mz-sans); color: var(--mz-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .mz-offer:hover { background: var(--mz-field); border-color: rgba(242, 243, 255, 0.7); } }
.mz-offer-pic { position: relative; width: 64px; height: 64px; flex: none; }
.mz-offer-pic img { position: absolute; max-width: none; }
.mz-offer--corp .mz-offer-pic img { left: 6px; top: -7px; width: 52px; height: 78px; object-fit: cover; }
.mz-offer--franchise .mz-offer-crop { position: absolute; left: 1px; top: -2px; width: 63px; height: 68px; overflow: hidden; }
/* кроп из imageTransform Figma: картинка повёрнута ~29.6° внутри рамки 63×68 */
.mz-offer--franchise .mz-offer-crop img { left: 0; top: 0; width: 133px; height: 200px; transform-origin: 0 0; transform: matrix(0.468206, 0.266401, -0.269643, 0.460267, 23.139, -29.737); }

/* восемь лент конфетти вокруг заголовка; координаты — от макета 1440 */
.mz-hcf { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; translate: -50% 0; }
.mz-hcf img { width: 93.407px; height: 62.833px; max-width: none; flex: none; }
.mz-hcf-1 { left: calc(4.17% - 7.07px); top: -11.07px; width: 112.482px; height: 105.903px; }
.mz-hcf-1 img, .mz-hcf-7 img { transform: rotate(143.75deg) scaleY(-1); }
.mz-hcf-2 { left: calc(8.33% - 7.98px); top: 91.81px; width: 96.504px; height: 67.537px; }
.mz-hcf-2 img { transform: rotate(177.06deg) scaleY(-1); }
.mz-hcf-3 { left: calc(87.5% + 39.41px); top: 252.01px; width: 106.044px; height: 83.981px; }
.mz-hcf-3 img { transform: rotate(-165.68deg) scaleY(-1); }
.mz-hcf-4 { left: calc(95.83% - 26.49px); top: 51.03px; width: 106.487px; height: 84.868px; }
.mz-hcf-4 img { transform: rotate(165deg) scaleY(-1); }
.mz-hcf-5 { left: calc(4.17% + 4.32px); top: 233.19px; width: 110.696px; height: 94.812px; }
.mz-hcf-5 img { transform: rotate(-23.45deg); }
.mz-hcf-6 { left: calc(4.17% + 11.89px); top: 211.52px; width: 93.407px; height: 62.833px; }
.mz-hcf-7 { left: calc(91.67% + 19.69px); top: 4.31px; width: 112.482px; height: 105.903px; }
.mz-hcf-8 { left: calc(79.17% + 37.56px); top: 4.72px; width: 106.487px; height: 84.868px; }
.mz-hcf-8 img { transform: rotate(-15deg); }
@media (max-width: 1199px) { .mz-hcf-8 { display: none; } }  /* уже 1200 лента ложится на конец заголовка */
@media (prefers-reduced-motion: no-preference) {
  .mz-hcf { animation: mz-float-hcf 6s ease-in-out infinite alternate; }
  .mz-hcf:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
}

/* фильтр: в проекте уже есть partials/filter — здесь только внешний вид полей в хиро */
.mz-filters { align-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mz-s5); }
.mz-field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mz-field > label { padding-inline: 4px; font: 400 14px/1.25 var(--mz-sans); color: var(--mz-text); }
.mz-select {
  width: 100%; height: 56px; padding: 0 40px 0 16px;
  border: 1px solid transparent; border-radius: var(--mz-r-lg); outline: none;
  background: var(--mz-field-dark) url("../img/icons/chevron-down.svg") no-repeat right 16px center;
  color: var(--mz-text); appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.mz-select option { background: var(--mz-panel); }
@media (hover: hover) and (pointer: fine) { .mz-select:hover { background-color: var(--mz-field-dark-hover); } }
.mz-select:focus { border-color: var(--mz-border-card); }
.mz-check { flex: none; height: 56px; display: inline-flex; align-items: center; gap: 10px; padding-inline: 8px; font: 400 14px/1.35 var(--mz-sans); white-space: nowrap; cursor: pointer; }
.mz-check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--mz-border-field); border-radius: 5px; display: grid; place-content: center; cursor: pointer; }
.mz-check input:checked { background: var(--mz-blue); border-color: var(--mz-blue); }
.mz-check input:checked::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

.mz-hero-ug { align-self: stretch; }

@media (max-width: 900px) {
  .mz-hero { padding: 12px 16px 24px; gap: 24px; }
  .mz-hero-body { gap: 24px; padding-block: 8px; }
  .mz-hero-title { min-height: 0; }
  .mz-hero-title h1 { font-size: 44px; letter-spacing: -1.3px; }
  .mz-hero-title p { font-size: 17px; }
  .mz-hero-title p br { display: none; }
  .mz-offers { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .mz-filters { flex-direction: column; align-items: stretch; gap: 12px; }
  .mz-field { flex: none; }
  .mz-hcf { display: none; }  /* ленты ложились на заголовок */
}

/* ----- игры ----- */
.mz-games { display: flex; flex-direction: column; align-items: center; gap: var(--mz-s8); padding: 0 clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); }
.mz-games-grid {
  width: 100%; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 326px), 1fr));
  column-gap: var(--mz-s7); row-gap: calc(var(--mz-s5) + 22px);  /* +22 под стикеры над карточкой */
  padding-top: 22px;
}
/* широкая первая карточка — только при трёх колонках, иначе последняя остаётся одна в ряду */
@media (min-width: 1140px) { .mz-games-grid > .mz-gc:first-child { grid-column: span 2; } }
@media (max-width: 1023px) { .mz-games-grid > .mz-gc--extra { display: none; } }  /* 8 игр на ≥ 1024, 6 — ниже: чётное число рядов */
.mz-games-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.mz-games-empty p { color: var(--mz-text-2); }
@media (max-width: 560px) { .mz-games { padding: 0 var(--mz-s5) var(--mz-s5); } }

/* ----- карточка игры (Card-1.2) — не ссылка, действия только у кнопок ----- */
.mz-gc {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--mz-s6);
  padding: var(--mz-s8); border-radius: var(--mz-r-xl);
  border: 1px solid var(--mz-card); background: var(--mz-card);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: background-color .3s ease;
}
.mz-gc-hover { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.mz-gc-hover img { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none; }
@media (hover: hover) and (pointer: fine) {
  .mz-gc:hover { background: rgba(7, 8, 21, 0.5); }
  .mz-gc:hover .mz-gc-hover { opacity: 1; }
}
.mz-gc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mz-gc-head h3 { font: 600 28px/0.8 var(--mz-slab); letter-spacing: -0.84px; }
.mz-gc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-tag { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--mz-r-full); font: 400 14px/1.25 var(--mz-sans); white-space: nowrap; }
.mz-tag--newcomer { background: var(--mz-green); color: var(--mz-ink); }
.mz-tag--classic { background: var(--mz-blue); color: var(--mz-text); }
.mz-tag--thematic, .mz-tag--teens { background: var(--mz-purple); color: var(--mz-text); }
.mz-tag--final { background: var(--mz-orange); color: var(--mz-ink); }
.mz-gc-mine { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.25 var(--mz-sans); color: var(--mz-green); }
.mz-gc-details { display: flex; flex-direction: column; gap: var(--mz-s5); min-height: 124px; }
.mz-gc-item { display: flex; gap: 8px; align-items: flex-start; }
.mz-gc-item img { width: 24px; height: 24px; flex: none; }
.mz-gc-main { display: block; font: 500 16px/1.25 var(--mz-sans); }
.mz-gc-sub { display: block; margin-top: 4px; font: 400 14px/1.25 var(--mz-sans); color: var(--mz-text-2); }
.mz-gc-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--mz-s4); margin-top: auto; }
.mz-gc-info {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--mz-text); border-radius: var(--mz-r-md); background: transparent; color: var(--mz-text); text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--mz-ease-out);
}
.mz-gc-info img { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .mz-gc-info:hover { background: var(--mz-action); border-color: var(--mz-action); } }
.mz-gc-info:active { background: var(--mz-action); border-color: var(--mz-action); transform: scale(0.97); }
.mz-gc-price { height: 48px; padding: 12px 16px; gap: 6px; font: 500 16px/1.25 var(--mz-sans); }
.mz-gc-price .mz-m { display: none; }
.mz-gc-badges { position: absolute; top: -22px; right: 31px; display: flex; align-items: center; pointer-events: none; }
.mz-gc-badges img { display: block; width: 44px; height: 44px; }
.mz-gc-new { margin-right: -14px; padding: 4px; border-radius: 2px; transform: rotate(-10deg) skewX(-10deg); background: var(--mz-magenta); color: var(--mz-text); font: 600 11px/1.15 var(--mz-sans); letter-spacing: 0.33px; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) {
  .mz-gc { padding: var(--mz-s5); }
  .mz-gc-head h3 { font-size: 24px; letter-spacing: -0.72px; }
  .mz-gc-details { min-height: 0; }
  .mz-gc-sub { font-size: 12px; line-height: 1.15; color: var(--mz-text); opacity: 0.7; }
  .mz-gc-badges { right: 15px; }
  .mz-gc-price .mz-d { display: none; }
  .mz-gc-price .mz-m { display: inline; }
}

/* ===================== «Что такое Мозгва» (Block-Numbers 7833:44017) ===================== */
.mz-nb-stats { display: flex; gap: var(--mz-s5); padding-block: var(--mz-s7); width: min(100%, 676px); text-align: center; }
.mz-nb-stats > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--mz-s7); }
.mz-nb-stats b { font: 700 52px/0.8 var(--mz-slab); letter-spacing: -1.56px; white-space: nowrap; }
.mz-nb-stats span { font: 500 16px/1.15 var(--mz-sans); color: var(--mz-grey-light); }
@media (max-width: 640px) {
  .mz-nb-stats { flex-wrap: wrap; row-gap: var(--mz-s7); padding-block: 0; }
  .mz-nb-stats > div { flex: 1 1 calc(50% - 8px); gap: var(--mz-s4); }
  .mz-nb-stats b { font-size: 40px; }
}

/* ===================== общий заголовок со стрелками (площадки, партнёры) ===================== */
.mz-vb-head { align-self: stretch; display: flex; align-items: flex-start; gap: var(--mz-s5); }
.mz-vb-head .mz-tb { flex: 1 1 auto; }
.mz-vb-nav { flex: none; display: flex; gap: var(--mz-s5); }
.mz-arrow {
  width: 132px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--mz-text); border-radius: var(--mz-r-full); background: transparent; color: var(--mz-text); cursor: pointer;
  transition: background-color .2s ease, transform 160ms var(--mz-ease-out);
}
.mz-arrow img { width: 24px; height: 24px; }
.mz-arrow--prev img { transform: scaleX(-1); }
.mz-arrow:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mz-arrow:hover { background: var(--mz-field); } }
@media (max-width: 900px) { .mz-arrow { width: 96px; } }
@media (max-width: 760px) { .mz-vb-nav { display: none; } }  /* на телефоне листают свайпом */

/* ===================== «Где проходят игры»: Swiper ===================== */
.mz-venues .swiper { width: 100%; overflow: hidden; }
.mz-venues .swiper-slide { width: 46%; }
@media (max-width: 760px) { .mz-venues .swiper-slide { width: 86%; } }
.mz-bar { display: flex; flex-direction: column; gap: var(--mz-s6); min-width: 0; cursor: pointer; }
.mz-bar-photo { position: relative; aspect-ratio: 656 / 364; border-radius: var(--mz-r-lg); overflow: hidden; background: linear-gradient(170deg, #2b2457, var(--mz-panel) 70%); }
.mz-bar-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; -webkit-user-drag: none; user-select: none; }
.mz-bar-photo img.is-on { opacity: 1; }
.mz-bar-dots { position: absolute; left: 16px; bottom: 16px; display: flex; }
.mz-bar-dots i { display: block; padding: 4px; }
.mz-bar-dots i::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 24px; background: var(--mz-action); transition: width 160ms var(--mz-ease-out), background-color 160ms ease; }
.mz-bar-dots i.is-on::before { width: 16px; background: var(--mz-text); }
.mz-bar-info { display: flex; align-items: center; gap: var(--mz-s4); min-width: 0; }
.mz-bar-logo { flex: none; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: var(--mz-r-lg); background: var(--mz-text); border: 1.333px solid #E0E0E0; }
.mz-bar-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mz-bar-name { display: flex; align-items: center; gap: 8px; font: 600 18px/1.15 var(--mz-sans); }
.mz-bar-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mz-bar:hover .mz-bar-open { text-decoration: underline 1px; text-underline-offset: 4px; } }
.mz-bar-rate { display: inline-flex; align-items: center; gap: 2px; padding-inline: 2px; font: 400 14px/1.25 var(--mz-sans); }
.mz-bar-addr { display: flex; align-items: center; gap: 4px; font: 400 14px/1.25 var(--mz-sans); }
@media (hover: hover) and (pointer: fine) { .mz-venues .swiper { cursor: grab; } }

/* ===================== «Вопрос-ответ» ===================== */
.mz-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mz-s8); align-items: start; }
.mz-faq-left { display: flex; flex-direction: column; gap: 40px; padding-right: 40px; min-width: 0; }
@media (min-width: 901px) { .mz-faq-left { position: sticky; top: 96px; align-self: start; } }
.mz-faq-side { display: flex; flex-direction: column; gap: var(--mz-s8); min-width: 0; }
.mz-faq-tabs { display: flex; flex-wrap: wrap; gap: var(--mz-s4); }
.mz-ptab {
  height: 48px; padding: 0 24px; border: 1px solid var(--mz-text); border-radius: 36px; background: transparent; color: var(--mz-text);
  font: 500 16px/1.25 var(--mz-sans); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform 160ms var(--mz-ease-out);
}
.mz-ptab:active { transform: scale(0.97); }
.mz-ptab[aria-pressed="true"] { background: var(--mz-text); color: var(--mz-ink); }
.mz-faq-list { display: flex; flex-direction: column; gap: var(--mz-s7); }
.mz-faq-list[hidden] { display: none; }
.mz-fq { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--mz-r-xl); background: var(--mz-card); transition: background-color .25s ease; }
.mz-fq[open] { background: var(--mz-bg); }
.mz-fq summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--mz-s4); min-height: 90px; padding: 24px; cursor: pointer; }
.mz-fq summary::-webkit-details-marker { display: none; }
.mz-fq-t { align-self: center; min-width: 0; font: 600 24px/1.15 var(--mz-sans); }
.mz-fq-ico { flex: none; width: 28px; align-self: stretch; display: grid; place-items: center; }
.mz-fq-x { display: none; margin-block: -12px; }
.mz-fq[open] .mz-fq-plus { display: none; }
.mz-fq[open] .mz-fq-x { display: block; }
.mz-fq p { margin: -12px 0 0; padding: 0 64px 24px 24px; font: 500 16px/1.25 var(--mz-sans); color: var(--mz-text-2); }
.mz-fq-glow { position: absolute; left: -20px; bottom: -60px; width: 275px; height: 340px; transform: scaleX(-1); z-index: -1; pointer-events: none; display: none; }
.mz-fq-glow img { position: absolute; left: -30.55%; top: -24.71%; width: 161.1%; height: 149.42%; max-width: none; }
.mz-fq[open] .mz-fq-glow { display: block; }
@media (max-width: 900px) {
  .mz-faq { grid-template-columns: 1fr; }
  .mz-faq-left { padding-right: 0; gap: 24px; }
}
@media (max-width: 560px) {
  .mz-fq summary { padding: 16px; min-height: 0; }
  .mz-fq p { padding: 0 16px 16px; }
}

/* ===================== «Партнёры» (Hero 7833:44127) ===================== */
.mz-partners.mz-dblock { padding: 32px; }
.mz-pb-wrap { position: relative; width: 100%; }
.mz-pb-wrap::before, .mz-pb-wrap::after { content: ""; position: absolute; z-index: 1; top: 0; width: 70px; height: 200px; pointer-events: none; }
.mz-pb-wrap::before { left: -1px; background: linear-gradient(270deg, rgba(7, 8, 21, 0), var(--mz-bg)); }
.mz-pb-wrap::after { right: -1px; background: linear-gradient(90deg, rgba(7, 8, 21, 0), var(--mz-bg)); }
.mz-pb-track { overflow: hidden; touch-action: pan-y; }
.mz-pb-track::-webkit-scrollbar { display: none; }
.mz-pb-marquee { display: flex; width: max-content; will-change: transform; }
.mz-pb-set { display: flex; gap: 40px; padding-right: 40px; }
.mz-pb-item { flex: none; width: 200px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--mz-s8); }
.mz-pb-sign { width: 200px; height: 200px; display: grid; place-items: center; border-radius: 136px; background: var(--mz-text); }
.mz-pb-sign img { flex: none; max-width: none; transform: scale(var(--pb-k, 1)); }
.mz-pb-item figcaption { font: 400 14px/1.25 var(--mz-sans); text-align: center; }
@media (prefers-reduced-motion: reduce) { .mz-pb-track { overflow-x: auto; scrollbar-width: none; } }
@media (max-width: 900px) {
  .mz-pb-set { gap: var(--mz-s7); padding-right: var(--mz-s7); }
  .mz-pb-item { width: 160px; gap: var(--mz-s5); }
  .mz-pb-sign { width: 160px; height: 160px; --pb-k: 0.8; }
  .mz-pb-wrap::before, .mz-pb-wrap::after { height: 160px; width: 48px; }
}
@media (max-width: 560px) {
  .mz-partners.mz-dblock { padding: 32px 16px; gap: var(--mz-s7); }
  .mz-pb-set { gap: var(--mz-s5); padding-right: var(--mz-s5); }
  .mz-pb-item { width: 120px; gap: var(--mz-s4); }
  .mz-pb-sign { width: 120px; height: 120px; --pb-k: 0.6; }
  .mz-pb-wrap::before, .mz-pb-wrap::after { height: 120px; width: 32px; }
  .mz-partners > .mz-btn { align-self: stretch; }
}

/* ===================== футер (Footer 7833:44170) ===================== */
.mz-ft { display: flex; flex-direction: column; }
.mz-ft-top { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: center; padding: var(--mz-s8); border-radius: var(--mz-r-2xl) var(--mz-r-2xl) 0 0; background: var(--mz-panel-2); }
.mz-ft-glow { position: absolute; left: 50%; bottom: -112px; width: 1490px; height: 756px; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.mz-ft-glow img { position: absolute; left: -13.42%; top: -26.46%; width: 126.84%; height: 152.92%; max-width: none; }
.mz-ft-body { position: relative; display: flex; justify-content: center; width: 100%; padding-block: var(--mz-s5); }
.mz-ft-title { display: flex; align-items: center; justify-content: center; width: 682px; max-width: 100%; height: 248px; text-align: center; }
.mz-ft-title h2 { font: 700 80px/0.9 var(--mz-slab); letter-spacing: -2.4px; }
.mz-ft-conf { position: absolute; display: flex; align-items: center; justify-content: center; translate: -50% 0; pointer-events: none; }
.mz-ft-conf img { flex: none; width: 93.407px; height: 62.833px; max-width: none; }
.mz-ft-bot { display: flex; flex-direction: column; gap: var(--mz-s8); padding: var(--mz-s8); border-radius: 0 0 var(--mz-r-2xl) var(--mz-r-2xl); background: var(--mz-card); }
.mz-ft-row { display: flex; gap: var(--mz-s7); align-items: flex-start; }
.mz-ft-brand { flex: none; width: 209px; }
.mz-ft-brand img { display: block; width: 147px; height: 40px; }
.mz-ft-links { flex: 1 0 0; display: flex; gap: var(--mz-s7); min-width: 0; }
.mz-ft-col { flex: 1 0 0; display: flex; flex-direction: column; gap: var(--mz-s5); min-width: 0; }
.mz-ft-link { display: flex; align-items: center; gap: 8px; font: 500 16px/1.25 var(--mz-sans); color: var(--mz-text-2); text-decoration: none; }
.mz-ft-link img { width: 24px; height: 24px; flex: none; }
@media (hover: hover) and (pointer: fine) { .mz-ft-link:hover { color: var(--mz-text); } }
.mz-ft-contact { flex: none; width: 443px; display: flex; flex-direction: column; gap: var(--mz-s8); }
.mz-ft-info { display: flex; flex-direction: column; gap: var(--mz-s5); }
.mz-ft-hours { display: flex; align-items: center; gap: var(--mz-s4); font: 400 14px/1.25 var(--mz-sans); }
.mz-ft-hours .mz-end { flex: 1 0 0; display: flex; justify-content: flex-end; gap: var(--mz-s4); }
.mz-ft-pair { display: inline-flex; gap: 6px; white-space: nowrap; }
.mz-ft-mut { color: var(--mz-muted); }
.mz-ft-city { padding: 0; border: 0; background: none; cursor: pointer; color: var(--mz-text); font: 400 14px/1.25 var(--mz-sans); text-decoration: underline dotted; text-decoration-thickness: 8%; text-underline-position: from-font; }
.mz-ft-phone { display: flex; gap: var(--mz-s4); align-items: baseline; color: var(--mz-text); text-decoration: none; white-space: nowrap; font: 700 52px/0.8 var(--mz-slab); letter-spacing: -1.56px; }
.mz-ft-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mz-s4); }
.mz-ft-btn { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 12px 16px; border: 1px solid var(--mz-text); border-radius: var(--mz-r-md); background: transparent; color: var(--mz-text); font: 500 16px/1.25 var(--mz-sans); white-space: nowrap; cursor: pointer; }
.mz-ft-btn img { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .mz-ft-btn:hover { background: var(--mz-field); } }
.mz-ft-soc { display: flex; gap: var(--mz-s4); }
.mz-ft-soc img { display: block; width: 40px; height: 40px; }
.mz-ft-legal { display: flex; align-items: center; gap: var(--mz-s7); padding-top: var(--mz-s7); font: 400 14px/1.25 var(--mz-sans); }
.mz-ft-docs { flex: 1 0 0; display: flex; flex-wrap: wrap; gap: 8px; color: var(--mz-muted); }
.mz-ft-docs a, .mz-ftm-docs a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .mz-ft-docs a:hover, .mz-ftm-docs a:hover { text-decoration: underline; } }
.mz-ft-copy { color: var(--mz-action); }

/* мобильный футер — отдельная разметка */
.mz-ftm { display: none; flex-direction: column; gap: var(--mz-s8); padding: var(--mz-s5); border-radius: var(--mz-r-xl); background: var(--mz-card); }
.mz-ftm-links { display: flex; flex-direction: column; }
.mz-ftm .mz-ft-link { gap: var(--mz-s4); padding-block: 12px; }
.mz-ftm-contact { display: flex; flex-direction: column; gap: var(--mz-s7); margin-top: 28px; }
.mz-ftm-loc { display: flex; flex-direction: column; gap: var(--mz-s5); font: 400 14px/1.25 var(--mz-sans); }
.mz-ftm-hours { display: flex; flex-direction: column; gap: var(--mz-s4); }
.mz-ftm-phone { display: flex; gap: var(--mz-s4); font: 600 28px/0.8 var(--mz-slab); letter-spacing: -0.84px; user-select: all; }
.mz-ftm-call { height: 48px; }
.mz-ftm-row { display: flex; align-items: flex-start; justify-content: space-between; }
.mz-ftm-back { height: 36px; padding: 8px 12px; border: 1px solid var(--mz-text); border-radius: var(--mz-r-sm); background: transparent; color: var(--mz-text); font: 500 16px/1.25 var(--mz-sans); cursor: pointer; }
.mz-ftm .mz-ft-soc img { width: 32px; height: 32px; }
.mz-ftm-docs { display: flex; flex-direction: column; gap: var(--mz-s5); font: 400 14px/1.5 var(--mz-sans); color: var(--mz-muted); }
.mz-ftm-brand { display: flex; align-items: flex-end; justify-content: space-between; font: 400 14px/1.25 var(--mz-sans); color: var(--mz-muted); }
.mz-ftm-brand img { display: block; width: 86px; height: 23.4px; }
@media (max-width: 1180px) {
  .mz-ft-row { flex-wrap: wrap; }
  .mz-ft-brand, .mz-ft-contact { width: 100%; }
}
@media (max-width: 760px) {
  .mz-ft-top, .mz-ft-bot { display: none; }
  .mz-ftm { display: flex; }
}

/* ===================== модалки ===================== */
.mz-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px 16px; }
.mz-modal[hidden] { display: none; }
.mz-modal-back { position: absolute; inset: 0; background: rgba(7, 8, 21, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 150ms ease; }
.mz-modal-wrap { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 12px; max-height: 100%; opacity: 0; transform: scale(0.96); transition: opacity 150ms ease, transform 150ms ease; }
.mz-modal.is-open .mz-modal-back { opacity: 1; transition-duration: 220ms; }
.mz-modal.is-open .mz-modal-wrap { opacity: 1; transform: none; transition: opacity 220ms var(--mz-ease-out), transform 220ms var(--mz-ease-out); }
.mz-modal-box {
  position: relative; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(242, 243, 255, 0.2) transparent;
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  border-radius: var(--mz-r-2xl); background: var(--mz-panel); color: var(--mz-text);
}
.mz-modal-box:focus { outline: none; }
.mz-modal-x { flex: none; width: 48px; height: 48px; border: 0; border-radius: var(--mz-r-md); background: transparent url("../img/icons/modal-close.svg") center / 24px no-repeat; cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--mz-ease-out); }
@media (hover: hover) and (pointer: fine) { .mz-modal-x:hover { background-color: var(--mz-field); } }
.mz-modal-x:active { transform: scale(0.97); }
html.mz-lock, html.mz-lock body { overflow: hidden; }
@media (max-width: 640px) {
  /* телефон: нижняя шторка */
  .mz-modal { padding: 12px 0 0; align-items: end; }
  .mz-modal-wrap { flex-direction: column-reverse; align-items: flex-end; gap: 8px; width: 100%; transform: translateY(16px); }
  .mz-modal-box { width: 100%; max-height: calc(100dvh - 72px); padding: 16px; border-radius: var(--mz-r-2xl) var(--mz-r-2xl) 0 0; }
  .mz-modal-x { width: 40px; height: 40px; margin-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .mz-modal-wrap { transform: none !important; } }

/* видео: на телефоне не шторка, а ролик по центру с полями 16 */
.mz-modal--video .mz-modal-box { width: min(1100px, calc(100vw - 92px)); padding: 0; background: transparent; overflow: hidden; border-radius: var(--mz-r-xl); }
.mz-vid { position: relative; aspect-ratio: 1376 / 771; border-radius: var(--mz-r-xl); overflow: hidden; background: #000; }
.mz-vid > img, .mz-vid > iframe, .mz-vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* width: max-content — с left: 50% кнопка иначе сжимается до половины ролика и обрезает текст */
.mz-vid-play { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -50%); }
.mz-vid-play:active { transform: translate(-50%, -50%) scale(0.97); }
@media (max-width: 640px) {
  .mz-modal--video { align-items: center; padding: 16px; }
  .mz-modal--video .mz-modal-wrap { transform: scale(0.96); }
  .mz-modal--video.is-open .mz-modal-wrap { transform: none; }
  .mz-modal--video .mz-modal-box { width: 100%; max-height: none; border-radius: var(--mz-r-xl); }
  .mz-modal--video .mz-modal-x { margin-right: -8px; }
}

/* ===================== тост ===================== */
.mz-toasts { position: fixed; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 90; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.mz-toast { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 10px; background: var(--mz-text); color: var(--mz-ink); font: 500 16px/1.15 var(--mz-sans); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); pointer-events: auto; animation: mz-toast-in 220ms var(--mz-ease-out) both; }
.mz-toast.is-out { animation: mz-toast-out 150ms ease-in both; }
.mz-toast-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--mz-blue); color: var(--mz-text); }
.mz-toast-txt { flex: 1 1 auto; min-width: 0; }
.mz-toast-txt a { color: var(--mz-blue); font-weight: 600; }
.mz-toast-x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--mz-r-sm); background: transparent; color: #33363F; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mz-toast, .mz-toast.is-out { animation-name: mz-fade-in; } .mz-toast.is-out { animation-direction: reverse; } }

/* ===================== плавающая кнопка «?» ===================== */
.mz-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 75; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)); transition: transform 160ms var(--mz-ease-out); }
.mz-fab img { display: block; }
@media (hover: hover) and (pointer: fine) { .mz-fab:hover { transform: translateY(-2px); } }
.mz-fab:active { transform: scale(0.95); }
.mz-fab:focus-visible { outline: 2px solid var(--mz-border-card); outline-offset: 2px; border-radius: 50%; }

/* ===================== появление при загрузке ===================== */
@media (prefers-reduced-motion: no-preference) {
  .mz-page.is-entering > * { animation: mz-page-in 360ms var(--mz-ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .mz-page.is-entering .mz-gc { animation: mz-card-in 320ms var(--mz-ease-out) both; animation-delay: calc(80ms + var(--c, 0) * 40ms); }
}
@media (prefers-reduced-motion: reduce) {
  .mz-page.is-entering > *, .mz-page.is-entering .mz-gc { animation: mz-fade-in 200ms ease both; }
}

/* Подключение к уже существующим фильтрам, городу и кнопке обратного звонка.
   Выпадающие списки не должны обрезаться скруглением хиро.
   Форма фона шире экрана и лежит в .mz-hero-bg: сам хиро остаётся overflow:visible,
   иначе календарь и город обрезаются, но страница не разъезжается вширь
   (на телефоне при отдалении контент оставался узкой колонкой слева). */
.mz-body .cb-fab { display: none; }
html:has(body.mz-body),
body.mz-body { overflow-x: hidden; }
.mz-hero { overflow: visible; isolation: auto; }
.mz-hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.mz-hero-body,
.mz-hero-ug { position: relative; z-index: 1; }
.mz-hd, .mz-filters { position: relative; z-index: 6; }
.mz-hero .sorter { display: none !important; }
.mz-hero .filter.only-desktop { display: flex !important; margin-top: 0; width: 100%; }
.mz-hd .city-select, .mz-ft .city-select { position: relative; }
.mz-hd .nav__city, .mz-ft .nav__city {
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  font: inherit; text-decoration: underline dotted; text-underline-position: from-font;
}
@media (max-width: 900px) {
  .mz-hero .filter { flex-direction: column; align-items: stretch; }
  .mz-hero .field, .mz-hero .field--grow { flex: none; width: 100%; min-width: 0; }
}

@keyframes mz-page-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes mz-card-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes mz-fade-in { from { opacity: 0; } }
@keyframes mz-float { from { transform: translateY(-6px) rotate(var(--rot, 0deg)); } to { transform: translateY(8px) rotate(calc(var(--rot, 0deg) + 6deg)); } }
@keyframes mz-float-hcf { from { transform: translateY(-6px); } to { transform: translateY(8px) rotate(6deg); } }
@keyframes mz-sh-drift { from { transform: translate3d(-90px, -10px, 0) scale(1); opacity: 0.75; } to { transform: translate3d(90px, 50px, 0) scale(1.1); opacity: 1; } }
@keyframes mz-sh-swap { from { transform: scaleX(-1) translate3d(80px, 0, 0); opacity: 0; } to { transform: scaleX(-1) translate3d(-80px, 40px, 0) scale(1.08); opacity: 0.9; } }
@keyframes mz-toast-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes mz-toast-out { to { opacity: 0; transform: translateX(12px); } }