/* ==========================================================================
   База: сброс, типографика, сетка, кнопки, утилиты.
   Все значения берутся из tokens.css — литеральных цветов здесь быть не должно.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip на html — страховка от горизонтального скролла на мобильных.
   Именно html скроллит вьюпорт на телефонах, а клип на одном body там не всегда
   срабатывает. clip (в отличие от hidden) не создаёт scroll-контейнер, поэтому
   не ломает position: sticky у шапки. Это подстраховка — корневые причины
   (ширина контента) чиним отдельно, чтобы ничего не обрезалось. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--mm-font);
  font-size: var(--mm-fs-base);
  line-height: var(--mm-lh-base);
  color: var(--mm-ink);
  background: var(--mm-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Атрибут hidden не работает на элементах с явным display (у карточек стоит
   flex) — авторский стиль перебивает стиль браузера. Возвращаем ему силу. */
[hidden] { display: none !important; }

/* Иконка по умолчанию. Без явного размера инлайновый SVG растягивается
   на всю ширину контейнера — компоненты переопределяют размер под себя. */
.mm-i { width: 1.15em; height: 1.15em; flex: none; }
.mm-btn .mm-i { width: 18px; height: 18px; }

a { color: var(--mm-brand); text-decoration: none; }
a:hover { color: var(--mm-brand-strong); }

h1, h2, h3, h4 {
  margin: 0 0 var(--mm-space-2);
  font-weight: 800;
  line-height: var(--mm-lh-tight);
  letter-spacing: -.02em;
  color: var(--mm-ink);
  /* Не даём последнему слову заголовка висеть одиноко на своей строке. */
  text-wrap: balance;
}
h1 { font-size: var(--mm-fs-h1); }
h2 { font-size: var(--mm-fs-h2); }
h3 { font-size: var(--mm-fs-h3); font-weight: 700; line-height: var(--mm-lh-snug); letter-spacing: -.01em; }
h4 { font-size: var(--mm-fs-lg); font-weight: 700; line-height: var(--mm-lh-snug); letter-spacing: 0; }

p { margin: 0 0 var(--mm-space-2); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--mm-space-2); padding-left: 1.25em; }

:focus-visible { outline: none; box-shadow: var(--mm-ring); border-radius: var(--mm-radius-sm); }

/* --- Сетка ---------------------------------------------------------------- */

.mm-container {
  width: 100%;
  max-width: var(--mm-container);
  margin-inline: auto;
  padding-inline: var(--mm-gutter);
}

.mm-section { padding-block: var(--mm-section-y); }
.mm-section--tight { padding-block: calc(var(--mm-section-y) * .6); }
.mm-section--tint { background: var(--mm-brand-tint); }

/* Две соседние секции с ОДИНАКОВЫМ фоном складывали отступы: 96 снизу плюс
   96 сверху — до трети экрана пустоты, и она читалась как незакрытый блок.
   Схлопываем только там, где фон не меняется: на стыке белого и голубого
   отступ нужен, иначе полосы слипнутся.
   Обнулять целиком нельзя — заголовок следующей секции садился вплотную на
   рамку карточки сверху. Оставляем половину шага. */
.mm-section:not(.mm-section--tint) + .mm-section:not(.mm-section--tint) { padding-top: calc(var(--mm-section-y) * .5); }
.mm-section--tint + .mm-section--tint { padding-top: calc(var(--mm-section-y) * .5); }

.mm-grid { display: grid; gap: var(--mm-space-3); }
.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .mm-grid--3, .mm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mm-grid--2, .mm-grid--3, .mm-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Сироты: при четырёх или пяти карточках в трёхколоночной сетке последний ряд
   остаётся с одной карточкой и двумя третями пустоты. В таких случаях
   переключаемся на две колонки — ряды заполняются ровно.
   Правило распространено и на сетки внутри контента: там сирот было больше. */
@media (min-width: 1001px) {
  .mm-grid--3:has(> :last-child:nth-child(4)),
  .mm-grid--3:has(> :last-child:nth-child(5)),
  .mm-tiles:has(> :last-child:nth-child(4)),
  .mm-tiles:has(> :last-child:nth-child(5)),
  .mm-also:has(> :last-child:nth-child(4)),
  .mm-also:has(> :last-child:nth-child(5)),
  .mm-works:has(> :last-child:nth-child(4)),
  .mm-works:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Два элемента в трёхколоночной сетке прижимались к центру, слева зияла
     пустая колонка — ряд должен начинаться от левого края. */
  .mm-tiles:has(> :last-child:nth-child(2)),
  .mm-grid--3:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Числовые диапазоны не должны рваться переносом: text-wrap: balance
   разрывал «3–7 дней» между строками. */
.mm-nowrap, .mm-range { white-space: nowrap; }

/* --- Заголовок секции: «световая линия» ------------------------------------ */

.mm-head { max-width: 780px; margin: 0 0 var(--mm-space-4); }
.mm-head--center { margin-inline: auto; text-align: center; }

.mm-head__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--mm-fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mm-brand);
  margin-bottom: var(--mm-space-1);
}
.mm-head__eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--mm-gradient-line);
}

.mm-head h2 { margin-bottom: var(--mm-space-2); }

.mm-head__sub { color: var(--mm-ink-muted); font-size: var(--mm-fs-lg); margin: 0; }

/* --- Кнопки ---------------------------------------------------------------- */

.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--mm-radius);
  font: inherit; font-weight: 700; font-size: var(--mm-fs-sm);
  line-height: 1.2; text-align: center; cursor: pointer;
  transition: transform var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease),
              background-color var(--mm-dur) var(--mm-ease),
              border-color var(--mm-dur) var(--mm-ease),
              color var(--mm-dur) var(--mm-ease);
}
.mm-btn:hover { transform: translateY(-2px); }
.mm-btn:active { transform: translateY(0); }

.mm-btn--primary {
  background: var(--mm-brand); color: #fff;
  box-shadow: var(--mm-shadow-brand);
}
.mm-btn--primary:hover { background: var(--mm-brand-strong); color: #fff; box-shadow: 0 12px 26px rgba(37,99,235,.32); }

.mm-btn--ghost {
  background: var(--mm-surface); color: var(--mm-brand);
  border-color: var(--mm-line);
  box-shadow: var(--mm-shadow-sm);
}
.mm-btn--ghost:hover { border-color: var(--mm-brand); color: var(--mm-brand-strong); }

.mm-btn--success { background: var(--mm-success); color: #fff; box-shadow: 0 8px 20px rgba(16,185,129,.26); }
.mm-btn--success:hover { background: #059669; color: #fff; }

.mm-btn--on-dark { background: #fff; color: var(--mm-brand-strong); box-shadow: 0 10px 26px rgba(2,6,23,.24); }
.mm-btn--on-dark:hover { background: #fff; color: var(--mm-brand-deep); }

.mm-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.mm-btn--outline-light:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.1); }

.mm-btn--lg { padding: 17px 32px; font-size: var(--mm-fs-base); }
.mm-btn--block { width: 100%; }

/* На телефоне кнопки разной ширины выглядели недоделанными и в узкие
   было неудобно попадать пальцем. Внутри контента растягиваем на колонку. */
@media (max-width: 620px) {
  .mm-section .mm-btn,
  .entry-content .mm-btn { width: 100%; }
  .mm-hero__cta, .mm-cta__buttons, .mm-midcta__buttons { flex-direction: column; align-items: stretch; }
  .mm-header .mm-btn { width: auto; }
}

/* --- Чипы и бейджи ---------------------------------------------------------- */

.mm-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-pill);
  font-size: var(--mm-fs-sm); font-weight: 600; color: var(--mm-ink-soft);
  box-shadow: var(--mm-shadow-sm);
}
.mm-chip svg { width: 17px; height: 17px; flex: none; color: var(--mm-brand); }
.mm-chip--success { border-color: var(--mm-success-soft); background: var(--mm-success-soft); color: #065F46; box-shadow: none; }
.mm-chip--success svg { color: var(--mm-success); }

.mm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--mm-radius-pill);
  font-size: var(--mm-fs-xs); font-weight: 700; letter-spacing: .01em;
  background: var(--mm-brand-soft); color: var(--mm-brand-strong);
}
.mm-badge--accent { background: var(--mm-accent-soft); color: #0E7490; }
.mm-badge--success { background: var(--mm-success-soft); color: #065F46; }

/* --- Карточка-«стекло» ------------------------------------------------------- */

.mm-card {
  position: relative;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-xl);
  box-shadow: var(--mm-shadow);
  transition: transform var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease),
              border-color var(--mm-dur) var(--mm-ease);
}
a.mm-card:hover, .mm-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--mm-shadow-lg);
  border-color: rgba(37, 99, 235, .38);
}

/* --- Фон «стеклянная сетка»: тонкие стойки остекления ------------------------ */

.mm-glass-bg { position: relative; isolation: isolate; }
.mm-glass-bg::before {
  content: ""; position: absolute; inset: -6%; z-index: -1;
  background:
    radial-gradient(60% 70% at 88% 4%, rgba(6, 182, 212, .16), transparent 62%),
    radial-gradient(52% 62% at 6% 0%, rgba(37, 99, 235, .13), transparent 60%);
  pointer-events: none;
  /* Живой hero: цветной ореол медленно «дышит» и дрейфует — портальное ощущение. */
  animation: mm-aurora 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mm-aurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2.5%, 1.8%, 0) scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-glass-bg::before { animation: none; }
}
/* Фактура «стоек остекления» — нарисованный паттерн вместо линий на CSS:
   у него есть второй, более редкий слой, поэтому фон не выглядит миллиметровкой. */
.mm-glass-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("../img/pattern-glazing.svg");
  background-size: 200px 200px;
  opacity: .8;
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  pointer-events: none;
}

/* Волна-разделитель между секциями разного фона */
.mm-wave { display: block; width: 100%; height: 76px; line-height: 0; }
.mm-wave svg, .mm-wave img { display: block; width: 100%; height: 100%; }
.mm-wave--up { transform: rotate(180deg); }

/* Волна уже даёт паузу — секции под ней верхний отступ не нужен целиком,
   иначе между блоками снова копится треть экрана. */
.mm-wave + .mm-section { padding-top: calc(var(--mm-section-y) * .45); }

/* --- Утилиты ------------------------------------------------------------------ */

.mm-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}
.mm-stack > * + * { margin-top: var(--mm-space-2); }
.mm-muted { color: var(--mm-ink-muted); }
.mm-nowrap { white-space: nowrap; }

/* --- Появление на скролле ------------------------------------------------------ */

/* Скрываем только если JS точно есть и умеет вернуть блок: класс mm-js ставит
   инлайновый скрипт в шапке. Без JS контент виден сразу — анимация не должна
   быть условием того, что страницу вообще можно прочитать. */
.mm-js .mm-reveal { opacity: 0; transform: translateY(18px); }
.mm-js .mm-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--mm-ease), transform .5s var(--mm-ease);
  transition-delay: var(--mm-reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .mm-js .mm-reveal { opacity: 1; transform: none; }
}