/* Only UI for preview + modal. Не трогает .merch-hero и ваши стили.
   Все правила максимально заскоуплены, чтобы глобальные стили темы не влияли на модалку. */

/* Картинка внутри плашки-лого (если используете лого-изображение) */
.mhl-logo-img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Lock page scroll while modal is open */
html.mhl-lock,
body.mhl-lock{
  overflow:hidden !important;
}

/* ------------------------------
   Hover preview
------------------------------ */

.mhl-preview-float[data-mhl-ui]{
  position:fixed;
  z-index:999999;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease;
  padding:8px;
  background:rgba(0,0,0,.72);
  border-radius:12px;
  max-width:260px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.mhl-preview-float.is-open{ opacity:1; transform:translateY(0); }

/* Reset image against theme globals */
.mhl-preview-float[data-mhl-ui] img{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100%;
  height:auto;
  max-height:190px;
  object-fit:cover;
  object-position:center center;
  border-radius:10px;
}

/* ------------------------------
   Modal
------------------------------ */

.mhl-modal[data-mhl-ui]{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:999998;
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.mhl-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease;
}

/* Scoped reset bits */
.mhl-modal[data-mhl-ui],
.mhl-modal[data-mhl-ui] *{
  box-sizing:border-box;
}

.mhl-modal__backdrop{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.6);
}

.mhl-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(.965);
  opacity:0;
  transition:transform .22s cubic-bezier(.16,1,.3,1), opacity .22s ease;
  width:92vw;
  max-width:1180px;
  height:88vh;
  max-height:88vh;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
}

.mhl-modal.is-open .mhl-modal__panel{ transform:translate(-50%, -50%) scale(1); opacity:1; }

.mhl-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.mhl-modal__title{
  font:700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Reset button against theme globals */
.mhl-modal__close{
  all:unset;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:transparent;
  border-radius:12px;
  height:36px;
  width:44px;
  font:800 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor:pointer;
}
.mhl-modal__close:focus-visible{
  outline:2px solid rgba(0,0,0,.5);
  outline-offset:2px;
}

.mhl-modal__body{
  display:flex;
  gap:0;
  flex:1;
  min-height:0; /* allow inner scroll */
}

.mhl-modal__left{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#0b0b0b;
}

.mhl-modal__right{
  flex:0 0 380px;
  max-width:380px;
  border-left:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:14px 16px;
  overflow:auto;
  min-height:0;
}

.mhl-modal__desc{
  font:600 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
  white-space:pre-wrap; /* сохраняем переносы пользователя */
}

.mhl-modal__stage{
  position:relative;
  background:#0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  height:auto;
}

/* Main image: hard reset to ignore theme global img rules */
.mhl-modal__img{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Nav buttons: reset */
.mhl-modal__nav{
  all:unset;
  box-sizing:border-box;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.35);
  color:#fff;
  height:44px;
  width:44px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}
.mhl-modal__nav:hover{ background:rgba(0,0,0,.5); }
.mhl-modal__nav:focus-visible{ outline:2px solid rgba(255,255,255,.55); outline-offset:2px; }
.mhl-modal__prev{ left:12px; }
.mhl-modal__next{ right:12px; }

.mhl-modal__thumbs{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  padding:10px 12px;
  display:flex;
  gap:8px;
  overflow:auto;
}

.mhl-modal__thumb{
  all:unset;
  box-sizing:border-box;
  flex:0 0 auto;
  width:76px;
  height:52px;
  border-radius:10px;
  border:2px solid transparent;
  overflow:hidden;
  background:#eee;
  cursor:pointer;
}
.mhl-modal__thumb:focus-visible{ outline:2px solid rgba(0,0,0,.5); outline-offset:2px; }

.mhl-modal__thumb img{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.mhl-modal__thumb.is-active{ border-color:rgba(0,0,0,.45); }

.mhl-modal__empty{
  color:#fff;
  font:700 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:22px;
  text-align:center;
}

/* Mobile */
@media (max-width: 860px){
  .mhl-modal__panel{
    width:94vw;
    height:92vh;
    max-height:92vh;
  }
  .mhl-modal__body{
    flex-direction:column;
  }
  .mhl-modal__left{
    flex:0 0 auto;
  }
  .mhl-modal__stage{
    height:38vh;
    min-height:220px;
  }
  .mhl-modal__right{
    flex:1;
    max-width:none;
    border-left:0;
    border-top:1px solid rgba(0,0,0,.08);
    padding:14px 16px;
  }
}

/* ------------------------------
   HERO Mosaic (full area)
------------------------------ */

.mhl-hero{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  background:#0b0b10;
  /* Full viewport hero (без белых полос на любом разрешении)
     Высота = видимая область минус верхний оффсет секции (если шапка в потоке, block-spacing и т.п.). */
  height:calc(var(--mhl-vh, 1vh) * 100 - var(--mhl-top, 0px));
  min-height:calc(var(--mhl-vh, 1vh) * 100 - var(--mhl-top, 0px)) !important;
  /* tile size будет выставляться JS (responsive), тут fallback */
  --mhl-tile: 150px;
  --mhl-mx:50%;
  --mhl-my:30%;
  --mhl-spot:0;
  --mhl-mosaic-x:0px;
  --mhl-mosaic-y:0px;
  --mhl-card-x:0px;
  --mhl-card-y:0px;
  --mhl-card-rx:0deg;
  --mhl-card-ry:0deg;
}

.mhl-hero.is-pointer{ perspective:1100px; }


.mhl-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 520px at 20% 22%, rgba(120,120,255,.22), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 86% 16%, rgba(0,220,255,.18), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 52%, rgba(0,0,0,.35));
  pointer-events:none;
}
.mhl-hero::after{
  content:none !important; /* убираем белое свечение/spotlight */
  display:none !important;
  opacity:0 !important;
  pointer-events:none;
}


.mhl-hero__mosaic{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:auto !important;
}
.mhl-hero.is-pointer .mhl-hero__mosaic{
  transform:translate3d(var(--mhl-mosaic-x, 0px), var(--mhl-mosaic-y, 0px), 0);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}


.mhl-hero__layer{
  position:absolute;
  inset:0;
  display:grid;
  grid-auto-flow:row;
  gap:10px;
  padding:0;
  justify-content:start;
  align-content:start;
  place-content:start;
  opacity:0;
  transform:translate3d(0, 10px, 0) scale(1.012);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  filter:none;
  pointer-events:none !important;
}

.mhl-hero__layer.is-active{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
  pointer-events:auto !important;
}

/* Плавный "перелив" кадров autoplay (вместо резкого появления) */
.mhl-hero__layer.is-flow-in{
  /* стартовое состояние входящего слоя */
}
.mhl-hero__layer.is-flow-in .mhl-tile{
  opacity:0 !important;
  transform:translate3d(0, 8px, 0) scale(.992) !important;
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease,
    filter .22s ease !important;
  transition-delay:calc(var(--mhl-flow-phase, 0ms) + (var(--d, 0ms) * .12)) !important;
}
.mhl-hero__layer.is-flow-in.is-active .mhl-tile{
  opacity:1 !important;
  transform:none !important;
}
.mhl-hero__layer.is-flow-out{
  filter:none;
}
.mhl-hero__layer.is-flow-out .mhl-tile{
  transition:
    opacity .55s ease,
    transform .55s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

.mhl-tile{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100%;
  height:100%;
  border-radius:24px;
  background:#101019;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  overflow:hidden;
  transform:translateZ(0);
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  opacity:0;
  transform:translateY(8px) scale(.99);
  transition:
    opacity .62s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1),
    box-shadow .26s ease,
    filter .26s ease;
  transition-delay:var(--d, 0ms);
  will-change:transform, filter;
  backface-visibility:hidden;
  pointer-events:auto !important;
  touch-action:manipulation;
}

/* Inline expanded tile (pushes grid neighbors) */
.mhl-tile.is-expanded{
  grid-column:span 2;
  grid-row:span 2;
  z-index:5;
  transform:translateY(-1px) scale(1.008);
  box-shadow:0 16px 42px rgba(0,0,0,.28);
  filter:none;
  cursor:pointer;
}
.mhl-tile.is-expanded::before{ opacity:.42; }
.mhl-tile.is-expanded::after{ opacity:.95; animation:mhl-shine .85s ease; }
.mhl-tile.is-expanded:hover{
  transform:translateY(-2px) scale(1.01)
    rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg));
}

.mhl-hero__layer.is-ready .mhl-tile{
  opacity:1;
  transform:none;
}


/* --- FIX: hover/expand must win against `.mhl-hero__layer.is-ready .mhl-tile{ transform:none; }`
   Some themes/minifiers reorder rules and the more specific selector above disables :hover transforms.
   We also support JS-driven hover via `.is-hot` (если поверх мозаики есть перекрывающий слой). --- */

.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot{
  transform:translateY(-2px) scale(1.015)
    rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg));
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  filter:none;
}
.mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::before{ opacity:.48; }
.mhl-hero__layer.is-ready .mhl-tile:hover::after,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::after{ opacity:.95; animation:mhl-shine .85s ease; }

.mhl-hero__layer.is-ready .mhl-tile.is-expanded{
  grid-column:span 2;
  grid-row:span 2;
  z-index:5;
  transform:translateY(-1px) scale(1.008);
  box-shadow:0 16px 42px rgba(0,0,0,.28);
  filter:none;
  cursor:pointer;
}
.mhl-hero__layer.is-ready .mhl-tile.is-expanded::before{ opacity:.42; }
.mhl-hero__layer.is-ready .mhl-tile.is-expanded::after{ opacity:.95; animation:mhl-shine .85s ease; }

.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform:translateY(-2px) scale(1.01)
    rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg));
}


.mhl-tile:focus-visible{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:3px;
}

.mhl-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  opacity:.65;
  transition:opacity .3s ease;
}

.mhl-tile::after{
  content:none !important; /* убираем белый блик/shine */
  display:none !important;
  opacity:0 !important;
}

@keyframes mhl-shine{
  from{ transform:none; }
  to{ transform:none; }
}

.mhl-tile:hover{
  transform:translateY(-2px) scale(1.015)
    rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg));
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  filter:none;
}
.mhl-tile:hover::before{ opacity:.48; }
.mhl-tile:hover::after{ opacity:.95; animation:mhl-shine .85s ease; }

/* Более крупные плитки на больших экранах */
@media (min-width: 1280px){
  .mhl-hero{ --mhl-tile: 170px; }
}
@media (min-width: 1600px){
  .mhl-hero{ --mhl-tile: 190px; }
}

/* На очень узких экранах уменьшаем внутренние поля, чтобы мозаика была «до краёв» */
@media (max-width: 520px){
  .mhl-hero__layer{ inset:-14px; padding:14px; gap:9px; }
}

.mhl-hero__wrap{
  position:relative;
  z-index:2;
  min-height:inherit;
  display:flex;
  align-items:center;
  padding:clamp(36px, 6vw, 96px) clamp(16px, 6vw, 80px);
  /* Важно: обертка занимает весь HERO и может перекрывать мозаику.
     Делаем её «прозрачной» для событий мыши, чтобы hover/click по плиткам работал.
     Интерактив (кнопка/ссылки) включаем обратно на .mhl-hero__content. */
  pointer-events:none !important;
  /* Если шапка фиксированная и перекрывает верх — отступим контентом вниз,
     но сама мозаика остаётся «в край». */
  padding-top:calc(clamp(36px, 6vw, 96px) + var(--mhl-safe-top, 0px));
}

.mhl-hero__content{
  max-width:620px;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:28px;
  padding:26px 26px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 28px 90px rgba(0,0,0,.22);
  pointer-events:auto !important;
  margin-top:clamp(18px, 3.6vh, 46px);
}
.mhl-hero__content{
  transform:translate3d(0,0,0);
  transition:transform .18s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.mhl-hero.is-pointer .mhl-hero__content{
  transform:translate3d(var(--mhl-card-x, 0px), var(--mhl-card-y, 0px), 0)
    rotateX(var(--mhl-card-rx, 0deg)) rotateY(var(--mhl-card-ry, 0deg));
}


.mhl-hero__kicker{
  font:700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.86;
  margin:0 0 10px;
}

.mhl-hero__title{
  margin:0;
  font:900 clamp(28px, 3.6vw, 54px)/1.02 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.02em;
}

.mhl-hero__desc{
  margin:14px 0 18px;
  font:650 14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  opacity:.92;
  max-width:54ch;
}

.mhl-hero__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

.mhl-hero__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#111;
  text-decoration:none;
  font:800 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  transition:transform .2s ease, filter .2s ease;
}
.mhl-hero__btn:hover{ transform:translateY(-1px); filter:brightness(.98); }

.mhl-hero__btn--ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.mhl-hero__btn--ghost:hover{
  filter:none;
  background:rgba(255,255,255,.14);
}

@media (max-width: 860px){
  .mhl-hero__wrap{ padding:28px 16px 32px; padding-top:calc(28px + var(--mhl-safe-top, 0px)); align-items:flex-end; }
  .mhl-hero__content{ max-width:unset; width:100%; padding:18px 16px; border-radius:22px; margin-top:8px; }
  .mhl-hero__actions{ gap:8px; }
  .mhl-hero__btn{ padding:11px 14px; font-size:13px; }
}


/* Усиленные правила (на случай, если тема перекрывает button:hover и grid-правила) */
.mhl-hero .mhl-tile{
  display:block;
  border-radius:24px;
  overflow:hidden;
}
.mhl-hero .mhl-tile.is-expanded{
  grid-column:span 2 !important;
  grid-row:span 2 !important;
}
.mhl-hero .mhl-tile:hover{
  transform:translateY(-1px) scale(1.01)
    rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg)) !important;
}
.mhl-hero .mhl-tile.is-expanded:hover{
  transform:translateY(-2px) scale(1.01)
    rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg)) !important;
}



/* Performance/SEO: мягче и легче для GPU */
.mhl-hero{ contain:layout paint style; }
.mhl-hero__mosaic{ will-change:auto; }
.mhl-hero__layer{ contain:layout paint; }
.mhl-tile{
  content-visibility:auto;
  contain:layout paint style;
}
.mhl-hero__content{
  will-change:auto;
}
@media (prefers-reduced-motion: reduce){
  .mhl-hero::before,
  .mhl-hero__mosaic,
  .mhl-hero__content,
  .mhl-hero__layer,
  .mhl-tile{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ------------------------------
   Hero stats strip (below hero)
------------------------------ */

.mhl-hero-stats{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
  background:linear-gradient(180deg, #f7f9fc 0%, #ffffff 58%, #ffffff 100%);
  border-top:1px solid rgba(15,17,21,.06);
  border-bottom:1px solid rgba(15,17,21,.06);
}

.mhl-hero-stats::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:22px;
  background:linear-gradient(180deg, rgba(9,10,18,.12), rgba(9,10,18,0));
  pointer-events:none;
}

.mhl-hero-stats__inner{
  width:min(1600px, calc(100vw - 24px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(10px, 1.2vw, 18px);
  padding:clamp(14px, 1.8vw, 22px) 0;
}

.mhl-hero-stats__item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(10px, 1.2vw, 16px);
  padding:clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 18px);
  border-radius:20px;
  border:1px solid rgba(15,17,21,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.96));
  box-shadow:0 8px 24px rgba(15,17,21,.05);
}

.mhl-hero-stats__value{
  flex:0 0 auto;
  font:900 clamp(26px, 2.2vw, 40px)/.9 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.03em;
  color:#0f1115;
  white-space:nowrap;
}

.mhl-hero-stats__label{
  min-width:0;
  color:rgba(15,17,21,.78);
  font:700 clamp(13px, .95vw, 16px)/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-wrap:balance;
}

@media (max-width: 960px){
  .mhl-hero-stats__inner{ width:calc(100vw - 16px); grid-template-columns:1fr; gap:8px; padding:10px 0 12px; }
  .mhl-hero-stats__item{ border-radius:16px; padding:12px 14px; }
  .mhl-hero-stats__value{ min-width:86px; font-size:clamp(24px, 7vw, 34px); }
  .mhl-hero-stats__label{ font-size:14px; line-height:1.2; }
}

/* ------------------------------
   After-hero blocks (stats / grid / process)
   цель: как на слайдах — чисто, графично, без "карточного" мусора
------------------------------ */

:root{
  --mhl-dark:#241b46;
  --mhl-dark-2:#2b2153;
  --mhl-accent:#baff3b;
  --mhl-accent-2:#7c5cff;
  --mhl-white:#ffffff;
  --mhl-muted:rgba(255,255,255,.72);
  --mhl-line:rgba(255,255,255,.16);
}

.mhl-block{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:clamp(40px, 5vw, 88px) 0;
  overflow:hidden;
}

.mhl-block__inner{
  position:relative;
  width:calc(100vw - 18px);
  margin:0 auto;
}

.mhl-block__title{
  margin:0 0 clamp(18px, 2.4vw, 28px);
  font:900 clamp(28px, 3.2vw, 56px)/1.12 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.04em;
  text-wrap:balance;
  padding-bottom:6px;
  overflow:visible !important;
  white-space:normal !important;
  text-overflow:clip !important;

}

/* --- STATS --- */
.mhl-block--stats{
  background:var(--mhl-dark);
  color:var(--mhl-white);
}
.mhl-block--stats::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 520px at 10% 10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(760px 420px at 92% 18%, rgba(186,255,59,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  pointer-events:none;
}
.mhl-block--stats::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.35;
  pointer-events:none;
}
.mhl-block--stats .mhl-block__title{ text-align:center; }

.mhl-stats{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:clamp(12px, 2vw, 28px);
  padding:clamp(18px, 2.2vw, 26px) 0;
}
.mhl-stats__item{ min-width:0; text-align:center; }
.mhl-stats__value{
  font:950 clamp(52px, 7vw, 120px)/.92 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.06em;
  color:#fff;
}
.mhl-stats__label{
  margin-top:10px;
  font:700 clamp(14px, 1.2vw, 18px)/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--mhl-muted);
}
.mhl-stats__sep{
  width:2px;
  height:clamp(56px, 7vw, 96px);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(186,255,59,0), rgba(186,255,59,.85), rgba(186,255,59,0));
}

/* --- GRID (8 пунктов) --- */
.mhl-block--grid{
  background:var(--mhl-dark);
  color:var(--mhl-white);
  padding-top:clamp(34px, 4.6vw, 74px);
}
.mhl-block--grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 88% 18%, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(760px 420px at 12% 30%, rgba(186,255,59,.10), transparent 60%);
  pointer-events:none;
}
.mhl-block--grid::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:96px 96px;
  opacity:.25;
  pointer-events:none;
}
.mhl-block--grid .mhl-block__title{ max-width:22ch; }

.mhl-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid var(--mhl-line);
  border-left:1px solid var(--mhl-line);
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.mhl-grid__item{
  position:relative;
  min-height:clamp(140px, 16vw, 220px);
  padding:clamp(18px, 2.2vw, 28px);
  display:flex;
  align-items:flex-end;
  border-right:1px solid var(--mhl-line);
  border-bottom:1px solid var(--mhl-line);
  background:rgba(255,255,255,.00);
}
.mhl-grid__item::before{
  content:"";
  position:absolute;
  top:clamp(14px, 1.8vw, 22px);
  left:clamp(18px, 2.2vw, 28px);
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
  opacity:.9;
}
/* лёгкая "иконка" штрихами внутри круга */
.mhl-grid__item::after{
  content:"";
  position:absolute;
  top:clamp(14px, 1.8vw, 22px);
  left:clamp(18px, 2.2vw, 28px);
  width:40px;
  height:40px;
  border-radius:999px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}
.mhl-grid__name{
  font:850 clamp(16px, 1.35vw, 20px)/1.18 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.02em;
  color:#fff;
}

/* --- ICONS (per-card) --- */
.mhl-grid__item:nth-child(1)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M12%203v5M12%2016v5M3%2012h5M16%2012h5M5.2%205.2l3.6%203.6M15.2%2015.2l3.6%203.6M18.8%205.2l-3.6%203.6M8.8%2015.2l-3.6%203.6'%20stroke='%2523ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%20opacity='.9'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(2)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%207h14M5%2012h14M5%2017h10'%20stroke='%2523ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%20opacity='.9'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(3)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='12'%20cy='12'%20r='7.5'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.55'/%3E%3Cpath%20d='M12%204.5a7.5%207.5%200%200%201%200%2015'%20stroke='%2523baff3b'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(4)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='8'%20cy='8'%20r='3'%20stroke='%2523baff3b'%20stroke-width='1.8'/%3E%3Ccircle%20cx='16'%20cy='8'%20r='3'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.5'/%3E%3Ccircle%20cx='8'%20cy='16'%20r='3'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.5'/%3E%3Ccircle%20cx='16'%20cy='16'%20r='3'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.5'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(5)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M7%207h10v10H7z'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.55'/%3E%3Cpath%20d='M9%209h2M13%209h2M9%2013h2M13%2013h2'%20stroke='%2523baff3b'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(6)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='7'%20cy='17'%20r='2'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.55'/%3E%3Ccircle%20cx='17'%20cy='7'%20r='2'%20stroke='%2523baff3b'%20stroke-width='1.8'/%3E%3Cpath%20d='M8.5%2015.5L15.5%208.5'%20stroke='%2523baff3b'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(7)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='12'%20cy='12'%20r='7.5'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.55'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.8'%20stroke='%2523baff3b'%20stroke-width='1.8'/%3E%3Cpath%20d='M12%207.3v1.2M16.7%2012h-1.2M12%2016.7v-1.2M7.3%2012h1.2'%20stroke='%2523baff3b'%20stroke-width='1.6'%20stroke-linecap='round'%20opacity='.9'/%3E%3C/svg%3E"); }
.mhl-grid__item:nth-child(8)::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M6.5%207.5h11M6.5%2012h11M6.5%2016.5h7'%20stroke='%2523baff3b'%20stroke-width='1.9'%20stroke-linecap='round'/%3E%3Cpath%20d='M18%2016.5h0'%20stroke='%2523ffffff'%20stroke-width='1.6'%20opacity='.5'/%3E%3C/svg%3E"); }
.mhl-grid__item--accent{
  background:linear-gradient(180deg, rgba(186,255,59,.10), rgba(186,255,59,.04));
}
.mhl-grid__item--accent::before{ border-color:rgba(186,255,59,.65); }
.mhl-grid__item--accent .mhl-grid__name{ color:rgba(186,255,59,.98); }

@media (hover:hover){
  .mhl-grid__item{
    transition:background .2s ease, transform .2s ease;
  }
  .mhl-grid__item:hover{
    background:rgba(255,255,255,.04);
    transform:translateY(-2px);
  }
}

/* --- PROCESS --- */
.mhl-block--process{
  background:var(--mhl-dark);
  color:var(--mhl-white);
}
.mhl-block--process::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 14%, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(820px 520px at 92% 38%, rgba(186,255,59,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  pointer-events:none;
}

.mhl-block--process::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.26;
  pointer-events:none;
}

.mhl-steps{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:clamp(12px, 1.6vw, 22px);
  counter-reset:mhlstep;
}
.mhl-step{
  position:relative;
  grid-column:span 4;
  border-radius:22px;
  padding:clamp(18px, 2.2vw, 26px);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid var(--mhl-line);
  box-shadow:0 0 0 1px rgba(0,0,0,.10) inset;
  counter-increment:mhlstep;
}
.mhl-step::before{
  content:counter(mhlstep, decimal-leading-zero);
  position:absolute;
  top:14px;
  left:16px;
  font:800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.18em;
  color:rgba(255,255,255,.52);
}
.mhl-step__title{
  margin:0 0 10px;
  padding-left:34px;
  font:950 clamp(18px, 1.7vw, 22px)/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.03em;
}
.mhl-step__text{
  margin:0;
  font:650 clamp(14px, 1.2vw, 16px)/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:rgba(255,255,255,.74);
}

/* раскладка этапов как "плитки" (примерно как на слайде) */
.mhl-step:nth-child(1){ grid-column:2 / span 4; }
.mhl-step:nth-child(2){ grid-column:6 / span 4; }
.mhl-step:nth-child(3){ grid-column:10 / span 3; }
.mhl-step:nth-child(4){ grid-column:4 / span 4; }
.mhl-step:nth-child(5){ grid-column:8 / span 4; }
.mhl-step:nth-child(6){ grid-column:5 / span 4; }
.mhl-step:nth-child(7){ grid-column:9 / span 4; }

@media (max-width: 900px){
  .mhl-block__inner{ width:calc(100vw - 18px); }
  .mhl-stats{ grid-template-columns:1fr; }
  .mhl-stats__sep{ display:none; }
  .mhl-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); border-radius:18px; }
  .mhl-grid__item{ min-height:140px; }
  .mhl-steps{ grid-template-columns:1fr; }
  .mhl-step,
  .mhl-step:nth-child(n){ grid-column:auto; }
  .mhl-step__title{ padding-left:0; }
  .mhl-step::before{ left:auto; right:14px; }
}


/* ------------------------------
   Cases page
------------------------------ */

.mhl-cases{
  width:min(1840px, calc(100vw - 24px));
  max-width:none;
  margin:0 auto;
  padding:clamp(20px, 2vw, 34px) 0 clamp(42px, 4vw, 76px);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0f1115;
}

.mhl-cases__title{
  margin:0 0 clamp(18px, 2vw, 28px);
  padding:0 clamp(6px, .5vw, 10px);
  font:900 clamp(34px, 4vw, 64px)/.98 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.mhl-case{
  position:relative;
  padding:clamp(18px, 1.6vw, 28px);
  margin:0 0 clamp(16px, 1.4vw, 22px);
  border:1px solid rgba(15,17,21,.08);
  border-radius:28px;
  background:
    radial-gradient(1200px 240px at 0% -10%, rgba(59,130,246,.05), transparent 60%),
    radial-gradient(900px 220px at 100% 110%, rgba(16,185,129,.045), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  box-shadow:0 14px 38px rgba(15,17,21,.06);
  overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size: 820px;
}

.mhl-case::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(15,17,21,.08), transparent);
  pointer-events:none;
}

.mhl-case__layout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(360px, .9fr);
  gap:clamp(18px, 1.9vw, 34px);
  align-items:start;
}

.mhl-case.is-reverse .mhl-case__layout{
  grid-template-columns:minmax(360px, .9fr) minmax(0, 1.35fr);
}

.mhl-case.is-reverse .mhl-case__media{ order:2; }
.mhl-case.is-reverse .mhl-case__content{ order:1; }

.mhl-case.is-no-media .mhl-case__layout{
  grid-template-columns:minmax(0,1fr);
}

.mhl-case__media{
  min-width:0;
}

.mhl-case__gallery{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  grid-auto-flow:row;
  gap:clamp(10px, .85vw, 14px);
  align-content:start;
  content-visibility:auto;
  contain-intrinsic-size: 560px;
}

.mhl-case__thumb{
  margin:0;
  grid-column:span 2;
  border-radius:18px;
  overflow:hidden;
  background:#eef2f7;
  border:1px solid rgba(15,17,21,.07);
  box-shadow:0 4px 18px rgba(15,17,21,.05);
  aspect-ratio: 4 / 3;
  transform:translateZ(0);
}

/* Clean collage pattern without internal holes ("выбитые зубы") */
.mhl-case__thumb:nth-child(1){ grid-column:span 4; aspect-ratio: 16 / 10; border-radius:22px; }
.mhl-case__thumb:nth-child(2){ grid-column:span 2; aspect-ratio: 4 / 5; }
.mhl-case__thumb:nth-child(3),
.mhl-case__thumb:nth-child(4),
.mhl-case__thumb:nth-child(5){ grid-column:span 2; aspect-ratio: 4 / 3; }
.mhl-case__thumb:nth-child(6),
.mhl-case__thumb:nth-child(7){ grid-column:span 3; aspect-ratio: 16 / 10; }
.mhl-case__thumb:nth-child(n+8){ grid-column:span 2; aspect-ratio: 4 / 3; }

/* Better small-gallery fallbacks */
.mhl-case__thumb:first-child:last-child{ grid-column:1 / -1; aspect-ratio: 16 / 10; }
.mhl-case__thumb:nth-child(3):last-child{ grid-column:1 / -1; aspect-ratio: 16 / 10; }
.mhl-case__thumb:nth-child(4):last-child{ grid-column:span 4; }

.mhl-case__thumb-img,
.mhl-case__thumb > img.mhl-case__thumb-img{
  all:unset;
  box-sizing:border-box;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100%;
  min-height:100%;
  object-fit:cover !important;
  object-position:center;
  transform:translateZ(0);
}

.mhl-case__content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(2px, .4vw, 8px) 0;
  align-self:stretch;
}

.mhl-case__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.mhl-case__name{
  margin:0;
  font:900 clamp(26px, 2.25vw, 42px)/1.02 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:-.03em;
  color:#0f1115;
  text-wrap:balance;
}

.mhl-case__anchor{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  text-decoration:none;
  color:rgba(15,17,21,.45);
  background:rgba(15,17,21,.045);
  border:1px solid rgba(15,17,21,.06);
  font:800 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.mhl-case__anchor:hover{
  color:#0f1115;
  background:rgba(15,17,21,.08);
  border-color:rgba(15,17,21,.1);
}

.mhl-case__desc{
  color:rgba(15,17,21,.9);
  font:600 clamp(15px, .95vw, 17px)/1.75 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-wrap:pretty;
}

.mhl-case__desc br{ content:""; display:block; margin-top:.5em; }

.mhl-case__meta{
  margin-top:auto;
  padding-top:4px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.mhl-case__meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(15,17,21,.08);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(120%) blur(6px);
  color:rgba(15,17,21,.78);
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.01em;
}

.mhl-case__meta-chip::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:#2d8cff;
  box-shadow:0 0 0 3px rgba(45,140,255,.12);
}



/* Many photos: compact premium slider instead of endless tile column */
.mhl-case__media.is-slider{
  align-self:start;
}

.mhl-case__gallery.is-slider{
  display:block;
  content-visibility:visible;
  contain-intrinsic-size:auto;
}

.mhl-case-slider{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:10px;
}

.mhl-case-slider__stage{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,17,21,.08);
  background:#eef2f7;
  box-shadow:0 6px 22px rgba(15,17,21,.06);
  aspect-ratio: 16 / 10;
  min-height: clamp(260px, 28vw, 520px);
}

.mhl-case-slider__slides{
  position:relative;
  width:100%;
  height:100%;
}

.mhl-case-slider__slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:scale(1.015);
  transition:opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}

.mhl-case-slider__slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}

.mhl-case-slider__slide img{
  all:unset;
  box-sizing:border-box;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.mhl-case-slider__nav{
  all:unset;
  box-sizing:border-box;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  background:rgba(15,17,21,.38);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px) saturate(120%);
  transition:background .18s ease, transform .18s ease;
}
.mhl-case-slider__nav:hover{ background:rgba(15,17,21,.55); }
.mhl-case-slider__nav:active{ transform:translateY(-50%) scale(.97); }
.mhl-case-slider__nav:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }
.mhl-case-slider__nav--prev{ left:10px; }
.mhl-case-slider__nav--next{ right:10px; }

.mhl-case-slider__count{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(15,17,21,.48);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.01em;
  backdrop-filter: blur(6px) saturate(120%);
}

.mhl-case-slider__thumbs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(72px, 1fr);
  gap:8px;
  overflow:auto;
  padding:2px;
  scrollbar-width:thin;
}

.mhl-case-slider__thumb-btn{
  all:unset;
  box-sizing:border-box;
  display:block;
  cursor:pointer;
  border-radius:14px;
  overflow:hidden;
  border:2px solid transparent;
  background:#eef2f7;
  aspect-ratio: 4 / 3;
  box-shadow:0 2px 10px rgba(15,17,21,.04);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mhl-case-slider__thumb-btn:hover{ transform:translateY(-1px); }
.mhl-case-slider__thumb-btn.is-active{
  border-color:rgba(45,140,255,.95);
  box-shadow:0 0 0 3px rgba(45,140,255,.16), 0 8px 18px rgba(15,17,21,.08);
}
.mhl-case-slider__thumb-btn:focus-visible{
  outline:2px solid rgba(45,140,255,.75);
  outline-offset:2px;
}
.mhl-case-slider__thumb-btn img{
  all:unset;
  box-sizing:border-box;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

@media (max-width: 1360px){
  .mhl-cases{
    width:min(1600px, calc(100vw - 22px));
  }
  .mhl-case__layout,
  .mhl-case.is-reverse .mhl-case__layout{
    grid-template-columns:minmax(0, 1.18fr) minmax(320px, .92fr);
  }
}

@media (max-width: 1160px){
  /* many photos slider tweaks */
  .mhl-case-slider__stage{ min-height: clamp(240px, 46vw, 460px); }
  .mhl-case-slider__thumbs{ grid-auto-columns: 92px; }
  .mhl-case__layout,
  .mhl-case.is-reverse .mhl-case__layout{
    grid-template-columns:minmax(0, 1fr);
  }
  .mhl-case.is-reverse .mhl-case__media,
  .mhl-case.is-reverse .mhl-case__content{
    order:initial;
  }
  .mhl-case__gallery{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  .mhl-case__thumb{ grid-column:span 2; aspect-ratio: 4 / 3; }
  .mhl-case__thumb:nth-child(1){ grid-column:span 4; border-radius:20px; aspect-ratio: 16 / 10; }
  .mhl-case__thumb:nth-child(2),
  .mhl-case__thumb:nth-child(3),
  .mhl-case__thumb:nth-child(4),
  .mhl-case__thumb:nth-child(5),
  .mhl-case__thumb:nth-child(6),
  .mhl-case__thumb:nth-child(7),
  .mhl-case__thumb:nth-child(8),
  .mhl-case__thumb:nth-child(n+9){ grid-column:span 2; aspect-ratio: 4 / 3; }
  .mhl-case__thumb:first-child:last-child,
  .mhl-case__thumb:nth-child(3):last-child{ grid-column:1 / -1; aspect-ratio: 16 / 10; }
  .mhl-case__thumb:nth-child(4):last-child{ grid-column:span 4; }
}

@media (max-width: 760px){
  .mhl-case-slider{ gap:8px; }
  .mhl-case-slider__stage{ border-radius:16px; min-height: 0; aspect-ratio: 16 / 11; }
  .mhl-case-slider__nav{ width:36px; height:36px; }
  .mhl-case-slider__thumbs{ grid-auto-columns: 76px; gap:6px; }
  .mhl-case-slider__thumb-btn{ border-radius:10px; }
  .mhl-cases{
    width:calc(100vw - 16px);
    padding-top:16px;
  }
  .mhl-cases__title{
    font-size:clamp(28px, 8.2vw, 42px);
    line-height:1.02;
    margin-bottom:16px;
    padding-inline:2px;
  }
  .mhl-case{
    border-radius:20px;
    padding:12px;
    margin-bottom:12px;
  }
  .mhl-case__gallery{
    gap:8px;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .mhl-case__thumb{ border-radius:14px; grid-column:span 1; aspect-ratio: 4 / 3; }
  .mhl-case__thumb:nth-child(1){ grid-column:span 2; border-radius:16px; aspect-ratio: 16 / 10; }
  .mhl-case__thumb:nth-child(2),
  .mhl-case__thumb:nth-child(3),
  .mhl-case__thumb:nth-child(4),
  .mhl-case__thumb:nth-child(5),
  .mhl-case__thumb:nth-child(6),
  .mhl-case__thumb:nth-child(7),
  .mhl-case__thumb:nth-child(8),
  .mhl-case__thumb:nth-child(n+9){ grid-column:span 1; aspect-ratio: 4 / 3; }
  .mhl-case__thumb:first-child:last-child{ grid-column:1 / -1; }
  .mhl-case__name{ text-wrap:pretty; }
  .mhl-case__anchor{ display:none; }
  .mhl-case__desc{ font-size:15px; line-height:1.68; }
}

@media (max-width: 480px){
  .mhl-case__gallery{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
  }
  .mhl-case__thumb,
  .mhl-case__thumb:nth-child(2),
  .mhl-case__thumb:nth-child(3),
  .mhl-case__thumb:nth-child(4),
  .mhl-case__thumb:nth-child(5),
  .mhl-case__thumb:nth-child(6),
  .mhl-case__thumb:nth-child(7),
  .mhl-case__thumb:nth-child(8),
  .mhl-case__thumb:nth-child(n+9){ grid-column:span 1 !important; aspect-ratio: 4 / 3 !important; }
  .mhl-case__thumb:nth-child(1){ grid-column:span 2 !important; aspect-ratio: 16 / 10 !important; }
}

@media (hover:none){
  .mhl-case-slider__nav:hover{ background:rgba(15,17,21,.38); }
  .mhl-case-slider__thumb-btn:hover{ transform:none; }
  .mhl-case__anchor:hover{ color:rgba(15,17,21,.55); background:rgba(15,17,21,.05); }
}

/* Extra fallback for forced hover state */
.mhl-hero .mhl-tile.is-hot{
  transform:translateY(-1px) scale(1.01) rotateX(var(--mhl-rx, 0deg)) rotateY(var(--mhl-ry, 0deg)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
  filter:none !important;
}

/* During grid reflow (expand/collapse), damp hover to avoid jitter/jumps */
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot{
  transform:translateY(-1px) scale(1.01) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
  filter:none !important;
}
.mhl-hero__layer.is-reflowing .mhl-tile{
  transition: transform .26s ease, box-shadow .22s ease, filter .22s ease, opacity .4s ease !important;
}


/* v1.7.21 smooth hover anti-jitter: no hover scaling on hero tiles (JS keeps highlight/shadow) */
.mhl-hero .mhl-tile:hover,
.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.11) !important;
  filter: none !important;
}


/* v1.7.22 production anti-jitter: no geometry-changing hover transform on hero tiles.
   Use shadow/overlay only, so hit-testing stays stable and плитки не трясутся. */
.mhl-hero .mhl-tile,
.mhl-hero__layer .mhl-tile{
  transition:
    opacity .52s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease,
    filter .22s ease,
    background-position .28s ease !important;
  will-change: auto !important;
}

.mhl-hero .mhl-tile:hover,
.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot,
.mhl-hero .mhl-tile.is-expanded,
.mhl-hero .mhl-tile.is-expanded:hover,
.mhl-hero .mhl-tile.is-expanded.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.09) !important;
  filter: none !important;
}

.mhl-hero .mhl-tile.is-expanded,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded{
  box-shadow: 0 10px 22px rgba(0,0,0,.15) !important;
}

.mhl-hero .mhl-tile:hover::before,
.mhl-hero .mhl-tile.is-hot::before,
.mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::before{
  opacity: .55 !important;
}


/* v1.7.23 production anti-jitter hardening
   Цель: hover без геометрических изменений и без дергания при глобальном hit-test. */
.mhl-hero .mhl-tile,
.mhl-hero__layer .mhl-tile{
  transform:none !important;
  filter:none !important;
  will-change:auto !important;
  transition:
    opacity .44s cubic-bezier(.22,.61,.36,1),
    border-color .18s ease,
    box-shadow .18s ease,
    outline-color .18s ease !important;
}

.mhl-hero .mhl-tile::before,
.mhl-hero__layer .mhl-tile::before{
  transition: opacity .16s ease !important;
}

/* Hover только визуальный — без scale/tilt/translate, чтобы hit-area оставался стабильным */
.mhl-hero .mhl-tile:hover,
.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot{
  transform:none !important;
  filter:none !important;
  box-shadow:0 3px 8px rgba(0,0,0,.08) !important;
  border-color:rgba(255,255,255,.14) !important;
}

.mhl-hero .mhl-tile:hover::before,
.mhl-hero .mhl-tile.is-hot::before,
.mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::before,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover::before,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot::before{
  opacity:.58 !important;
}

/* Expanded — мягко и стабильно */
.mhl-hero .mhl-tile.is-expanded,
.mhl-hero .mhl-tile.is-expanded:hover,
.mhl-hero .mhl-tile.is-expanded.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform:none !important;
  filter:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
}

.mhl-hero__layer.is-reflowing .mhl-tile{
  transition:
    opacity .30s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}


/* v1.7.24 production anti-jitter final:
   - используем JS-класс .is-hot как единственный hover-сигнал для HERO
   - нативный :hover без .is-hot не подсвечиваем (иначе возможен boundary flicker)
   - параллакс мозаики делаем медленнее/мягче */
.mhl-hero.is-pointer .mhl-hero__mosaic{
  transition: transform .22s cubic-bezier(.22,.61,.36,1) !important;
}

.mhl-hero .mhl-tile:hover:not(.is-hot),
.mhl-hero__layer.is-ready .mhl-tile:hover:not(.is-hot),
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover:not(.is-hot){
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
  border-color:rgba(255,255,255,.08) !important;
}
.mhl-hero .mhl-tile:hover:not(.is-hot)::before,
.mhl-hero__layer.is-ready .mhl-tile:hover:not(.is-hot)::before,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover:not(.is-hot)::before{
  opacity:.65 !important;
}

.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot{
  box-shadow:0 5px 12px rgba(0,0,0,.10) !important;
  border-color:rgba(255,255,255,.16) !important;
}



/* --- Режим "плывущей" мозаики: непрерывное движение вбок без сброса --- */
.mhl-hero[data-mhl-flow="drift"] .mhl-hero__layer{
  animation:none !important;
}
.mhl-hero[data-mhl-flow="drift"] .mhl-hero__layer.is-active{
  animation:none !important;
  transform:translate3d(var(--mhl-drift-x, 0px), 0, 0) scale(1) !important;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) !important;
  will-change:transform;
}
.mhl-hero[data-mhl-flow="drift"] .mhl-hero__layer.is-flow-in,
.mhl-hero[data-mhl-flow="drift"] .mhl-hero__layer.is-flow-out{
  animation:none !important;
}
/* В бесконечном дрейфе нельзя откладывать рендер плиток у края экрана,
   иначе видна временная тёмная полоса, которая потом "дополняется". */
.mhl-hero[data-mhl-flow="drift"] .mhl-tile{
  content-visibility:visible !important;
}


/* v1.7.25 edge clip fix for drift mode:
   Убираем paint-containment у слоя, иначе браузер обрезает дополнительные колонки справа
   (видна тёмная полоса до следующего шага). Также явно разрешаем выход сетки за границы слоя. */
.mhl-hero[data-mhl-flow="drift"] .mhl-hero__layer{
  contain:layout style !important;
  overflow:visible !important;
}



/* v1.7.25 aggressive perf mode (CPU/GPU) without changing drift logic */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__content{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 14px 42px rgba(0,0,0,.18) !important;
}
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile{
  will-change:auto !important;
  transition:opacity .36s ease, transform .18s ease !important;
}
/* В агрессивном режиме убираем дорогой hover/hot repaint на десятках плиток,
   оставляем клики/expand и само непрерывное движение. */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot{
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot::before{
  opacity:.65 !important;
}


/* v1.7.25+ responsive/SEO polish (hero + cases) */
.mhl-hero,
.mhl-cases{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}

.mhl-hero__content{
  width:min(100%, 720px);
  max-width:min(720px, calc(100vw - clamp(24px, 5vw, 72px)));
  padding:clamp(16px, 1.8vw, 28px);
  border-radius:clamp(18px, 1.8vw, 28px);
}

.mhl-hero__kicker{
  font-size:clamp(11px, .35vw + 10px, 13px);
  line-height:1.2;
}

.mhl-hero__title{
  font-size:clamp(28px, 1.9vw + 22px, 62px);
  line-height:1.01;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.mhl-hero__desc{
  margin:clamp(10px, .9vw, 14px) 0 clamp(14px, 1.2vw, 18px);
  font-size:clamp(14px, .45vw + 12.5px, 18px);
  line-height:1.58;
  max-width:56ch;
  text-wrap:pretty;
}

.mhl-hero__btn{
  min-height:44px;
  padding:12px 16px;
  font-size:clamp(14px, .28vw + 13px, 15px);
}

.mhl-cases{
  width:min(1880px, calc(100vw - clamp(12px, 2vw, 32px)));
}

.mhl-cases__title{
  max-width:22ch;
}

.mhl-case{
  border-radius:clamp(18px, 1.5vw, 28px);
  padding:clamp(12px, 1.35vw, 24px);
}

.mhl-case__layout{
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
  gap:clamp(14px, 1.35vw, 28px);
  align-items:start;
}
.mhl-case.is-reverse .mhl-case__layout{
  grid-template-columns:minmax(320px, .92fr) minmax(0, 1.08fr);
}

.mhl-case__gallery{
  gap:clamp(8px, .8vw, 14px);
}

.mhl-case__content{
  gap:clamp(10px, .9vw, 14px);
  min-width:0;
}
@media (min-width: 1280px){
  .mhl-case:not(.is-no-media) .mhl-case__content{
    position:sticky;
    top:clamp(12px, 1.5vw, 24px);
    align-self:start;
  }
}

.mhl-case__name{
  font-size:clamp(26px, 1.45vw + 14px, 44px);
  line-height:1.02;
  overflow-wrap:anywhere;
}

.mhl-case__desc{
  font-size:clamp(14px, .4vw + 12.5px, 18px);
  line-height:1.72;
  overflow-wrap:anywhere;
}

.mhl-case-slider__stage{
  aspect-ratio: 16 / 10;
  min-height: clamp(240px, 26vw, 520px);
}
.mhl-case-slider__thumbs{
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
}
.mhl-case-slider__thumb-btn{
  scroll-snap-align:start;
}

@media (max-width: 1160px){
  .mhl-case__content{
    position:static !important;
  }
}

@media (max-width: 860px){
  .mhl-hero__wrap{
    padding-inline:14px;
    padding-bottom:22px;
  }
  .mhl-hero__content{
    width:min(100%, 640px);
    margin-inline:auto;
    border-radius:18px;
    padding:14px 14px 15px;
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.2);
  }
  .mhl-hero__title{
    font-size:clamp(26px, 6.6vw, 40px);
  }
  .mhl-hero__desc{
    font-size:clamp(14px, 3.5vw, 16px);
    line-height:1.5;
    max-width:none;
  }
  .mhl-hero__btn{
    min-height:46px;
    width:100%;
    justify-content:center;
  }

  .mhl-cases{
    width:calc(100vw - 12px);
    padding-bottom:28px;
  }
  .mhl-cases__title{
    margin-bottom:12px;
    padding-inline:2px;
  }
  .mhl-case{
    padding:10px;
    margin-bottom:10px;
    border-radius:16px;
  }
  .mhl-case__layout{
    gap:10px;
  }
  .mhl-case__head{
    gap:8px;
  }
  .mhl-case__name{
    font-size:clamp(22px, 7.6vw, 34px);
  }
  .mhl-case__desc{
    font-size:clamp(14px, 3.6vw, 16px);
    line-height:1.62;
  }
  .mhl-case__meta-chip{
    padding:8px 11px;
    font-size:11px;
  }
}

@media (max-width: 420px){
  .mhl-hero__kicker{
    letter-spacing:.11em;
  }
  .mhl-hero__content{
    padding:13px 12px 14px;
  }
  .mhl-case-slider__stage{
    aspect-ratio: 16 / 11.5;
  }
  .mhl-case-slider__thumbs{
    grid-auto-columns:68px;
  }
}

/* v1.7.25 hero stats + CTA spacing tune (full-width stats, lower hero card, larger buttons) */
.mhl-hero-stats{
  margin-top:0;
}
.mhl-hero-stats__inner{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box;
  padding-left:clamp(10px, 1.8vw, 22px);
  padding-right:clamp(10px, 1.8vw, 22px);
}

/* Опускаем стеклянную карточку чуть ниже в hero */
.mhl-hero__content{
  margin-top:clamp(54px, 8vh, 130px) !important;
}

/* Больше воздуха между заголовком и кнопками (описание уже удалено) */
.mhl-hero__actions{
  margin-top:clamp(18px, 2vw, 28px) !important;
  gap:clamp(10px, .9vw, 14px) !important;
}

/* Кнопки крупнее и визуально солиднее */
.mhl-hero__btn{
  min-height:52px !important;
  padding:14px 70px !important;
  font-size:clamp(14px, .35vw + 13px, 16px) !important;
  border-radius:999px;
}

@media (max-width: 1200px){
  .mhl-hero__content{
    margin-top:clamp(38px, 6vh, 92px) !important;
  }
}

@media (max-width: 860px){
  .mhl-hero-stats__inner{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .mhl-hero__wrap{
    padding-bottom:16px !important;
  }
  .mhl-hero__content{
    margin-top:24px !important;
  }
  .mhl-hero__actions{
    margin-top:14px !important;
    gap:10px !important;
  }
  .mhl-hero__btn{
    min-height:50px !important;
    padding:13px 16px !important;
    font-size:14px !important;
  }
}


/* v1.7.25 hero services block (below stats) */
.mhl-hero-services{
  position:relative;
  background:
    radial-gradient(1200px 220px at 50% -40px, rgba(255,255,255,.95), rgba(255,255,255,.86) 52%, rgba(248,250,252,.95) 100%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border-top:1px solid rgba(16,24,40,.06);
  border-bottom:1px solid rgba(16,24,40,.05);
  margin:0;
}
.mhl-hero-services__inner{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  padding:clamp(18px, 2vw, 28px) clamp(10px, 1.8vw, 22px) clamp(22px, 2.6vw, 34px);
}
.mhl-hero-services__title{
  margin:0 0 clamp(12px, 1.4vw, 18px);
  font-size:clamp(18px, .8vw + 14px, 28px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  color:#0f172a;
}
.mhl-hero-services__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(10px, 1vw, 14px);
}
.mhl-hero-services__item{
  position:relative;
  min-height:84px;
  display:flex;
  align-items:flex-start;
  padding:14px 16px 14px 42px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)),
    linear-gradient(135deg, rgba(59,130,246,.05), rgba(99,102,241,.04));
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 28px rgba(15,23,42,.05);
  color:#0f172a;
  font-size:clamp(14px, .35vw + 12px, 16px);
  line-height:1.28;
  font-weight:500;
  text-wrap:balance;
}
.mhl-hero-services__item::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:999px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 28%, rgba(255,255,255,0) 29%),
    linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #22c55e 100%);
  box-shadow:
    0 0 0 3px rgba(37,99,235,.10),
    0 4px 10px rgba(14,165,233,.22);
}
@media (max-width: 1180px){
  .mhl-hero-services__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px){
  .mhl-hero-services__inner{
    padding:16px 10px 18px;
  }
  .mhl-hero-services__title{
    margin-bottom:10px;
    font-size:20px;
  }
  .mhl-hero-services__grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .mhl-hero-services__item{
    min-height:66px;
    border-radius:14px;
    padding:12px 12px 12px 38px;
    font-size:14px;
    line-height:1.22;
  }
  .mhl-hero-services__item::before{
    left:12px;
    width:14px;
    height:14px;
  }
}


/* v1.7.25 hotfix: no services block (CSS can stay unused), remove subtle tile seam lines,
   lightweight hover without scaling (prevents bottom-row cropping), keep performance cheap */
.mhl-hero .mhl-tile,
.mhl-hero__layer .mhl-tile{
  border-color:rgba(255,255,255,.04) !important;
  box-shadow:none;
  /* Стабилизация краёв при дрейфе/скейле родителя */
  outline:1px solid transparent;
  outline-offset:-1px;
  background-clip:padding-box;
}

/* Лёгкий hover-эффект без transform (не обрезается у нижнего ряда и почти не грузит) */
.mhl-hero .mhl-tile:hover,
.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot{
  transform:none !important;
  filter:none !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.08) !important;
}

.mhl-hero .mhl-tile:hover::before,
.mhl-hero .mhl-tile.is-hot::before,
.mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::before,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover::before,
.mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot::before{
  opacity:.56 !important;
}

/* Не даём hover-состоянию «поднимать» картинку у expanded-плитки тоже */
.mhl-hero .mhl-tile.is-expanded:hover,
.mhl-hero .mhl-tile.is-expanded.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform:translateY(-1px) scale(1.008) !important;
}

/* --- HOTFIX: visible lightweight hover for HERO tiles + no bottom-row crop on hover --- */
/* Делаем эффект заметным без scale/translate (чтобы нижний ряд не обрезался краем HERO). */
.mhl-hero .mhl-tile,
.mhl-hero .mhl-tile.is-expanded,
.mhl-hero__layer.is-ready .mhl-tile,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded{
  transform:none !important;
}

.mhl-hero .mhl-tile:hover,
.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero .mhl-tile.is-expanded:hover,
.mhl-hero .mhl-tile.is-expanded.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform:none !important; /* не двигаем/не масштабируем => нет обрезки нижнего ряда */
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 6px 14px rgba(0,0,0,.16) !important;
  filter:brightness(1.06) saturate(1.04) !important;
}

.mhl-hero .mhl-tile:hover::before,
.mhl-hero .mhl-tile.is-hot::before,
.mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::before,
.mhl-hero .mhl-tile.is-expanded:hover::before,
.mhl-hero .mhl-tile.is-expanded.is-hot::before,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot::before{
  opacity:.28 !important; /* было слишком незаметно */
}

/* v1.7.25 FINAL HOTFIX: visible cheap hover in aggressive mode + no bottom-row image crop
   Причина: более специфичные правила `[data-mhl-perf="aggressive"]` выше по файлу гасили hover,
   а старые hover/expanded-transform иногда всё ещё поднимали плитку и она резалась нижней границей HERO. */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-expanded,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-expanded:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-expanded.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-expanded,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform:none !important; /* ключевой фикс от обрезки нижнего ряда */
  filter:brightness(1.08) saturate(1.05) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 4px 12px rgba(0,0,0,.12) !important;
}

/* Делаем подсветку заметнее даже если :hover глушится и JS ставит только .is-hot */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-expanded:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-expanded.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot::before{
  opacity:.16 !important;
}

/* На всякий случай убираем любые инлайн transform, которые могли остаться после старых ховеров. */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile[style*="transform"]:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile[style*="transform"].is-hot{
  transform:none !important;
}


/* v1.7.25 hotfix2: visible hover in aggressive mode + no lower-row crop on expand handled in JS */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot{
  transform:none !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.14) !important;
  filter:brightness(1.08) saturate(1.05) !important;
}
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded):hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-reflowing .mhl-tile:not(.is-expanded).is-hot::before{
  opacity:.42 !important; /* базово .65 затемняет; на hover делаем светлее и заметнее */
}


/* v1.7.25 hotfix: visible lightweight hover in aggressive mode + bottom-row expand shift */
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover{
  transform:none !important;
  filter:none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.10) !important;
  border-color:rgba(255,255,255,.18) !important;
}
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-tile:hover::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile.is-hot::before,
.mhl-hero[data-mhl-perf="aggressive"] .mhl-hero__layer.is-ready .mhl-tile:hover::before{
  opacity:.56 !important;
}

/* Bottom-row expanded tiles: visually shift up (no crop at hero нижней границе) */
.mhl-hero .mhl-tile.is-expanded.is-expand-up,
.mhl-hero .mhl-tile.is-expanded.is-expand-up:hover,
.mhl-hero .mhl-tile.is-expanded.is-expand-up.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-expand-up,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-expand-up:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-expand-up.is-hot{
  transform:translateY(-8px) !important;
}



/* v1.7.25 FINAL FIX (hero):
   1) Видимый hover без transform (не режется нижним краем HERO).
   2) Expand тоже без transform — позиционирование делаем grid-start'ами в JS. */
.mhl-hero .mhl-tile:hover,
.mhl-hero .mhl-tile.is-hot,
.mhl-hero__layer.is-ready .mhl-tile:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-hot{
  transform:none !important;
  filter:brightness(1.12) saturate(1.08) !important;
  border-color:rgba(255,255,255,.26) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 26px rgba(0,0,0,.22) !important;
}

/* На некоторых темах/оверлеях .is-hot может не ставиться мгновенно.
   Не гасим обычный :hover — делаем такой же лёгкий эффект и для :hover:not(.is-hot). */
.mhl-hero .mhl-tile:hover:not(.is-hot),
.mhl-hero__layer.is-ready .mhl-tile:hover:not(.is-hot){
  transform:none !important;
  filter:brightness(1.12) saturate(1.08) !important;
  border-color:rgba(255,255,255,.26) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 26px rgba(0,0,0,.22) !important;
}

.mhl-hero .mhl-tile:hover::before,
.mhl-hero .mhl-tile.is-hot::before,
.mhl-hero__layer.is-ready .mhl-tile:hover::before,
.mhl-hero__layer.is-ready .mhl-tile.is-hot::before{
  opacity:.36 !important;
}

.mhl-hero .mhl-tile.is-expanded,
.mhl-hero .mhl-tile.is-expanded:hover,
.mhl-hero .mhl-tile.is-expanded.is-hot,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded:hover,
.mhl-hero__layer.is-ready .mhl-tile.is-expanded.is-hot{
  transform:none !important;
}



/* --- Unified background for blocks under HERO (remove seams between sections) --- */
.mhl-block--stats,
.mhl-block--grid,
.mhl-block--process{
  background:var(--mhl-dark);
  color:var(--mhl-white);
}

.mhl-block--stats::before,
.mhl-block--grid::before,
.mhl-block--process::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(980px 560px at 16% 18%, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(860px 520px at 88% 34%, rgba(186,255,59,.11), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  background-attachment:fixed;
  pointer-events:none;
}

.mhl-block--stats::after,
.mhl-block--grid::after,
.mhl-block--process::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:84px 84px;
  background-attachment:fixed;
  opacity:.28;
  pointer-events:none;
}

/* Make the 3 sections feel like one continuous block */
.mhl-block--stats{ padding-bottom:clamp(26px, 3vw, 54px); }
.mhl-block--grid{ padding-top:clamp(18px, 2.4vw, 38px); padding-bottom:clamp(18px, 2.8vw, 46px); }
.mhl-block--process{ padding-top:clamp(18px, 2.4vw, 38px); }



/* ------------------------------
   FIX: seamless background between after-hero sections
   + replace decorative circles with minimal icons
------------------------------ */

/* remove per-section overlays that create visible seams */
.mhl-block--stats,
.mhl-block--grid,
.mhl-block--process{
  background:var(--mhl-dark) !important;
}

.mhl-block--stats::before,
.mhl-block--stats::after,
.mhl-block--grid::before,
.mhl-block--grid::after,
.mhl-block--process::before,
.mhl-block--process::after{
  content:none !important;
  display:none !important;
}

/* unified overlay applied equally to each block (no seams) */
.mhl-block::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 560px at 12% 12%, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(860px 520px at 88% 22%, rgba(186,255,59,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  pointer-events:none;
}
.mhl-block::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:84px 84px;
  opacity:.22;
  pointer-events:none;
}

/* keep inner content above overlays */
.mhl-block__inner{ position:relative; z-index:1; }

/* ICONS instead of circles */
.mhl-grid__item::before{
  width:34px;
  height:34px;
  border:none;
  border-radius:0;
  box-shadow:none;
  background-color:rgba(255,255,255,.78);
  -webkit-mask-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M12%202v5%22/%3E%3Cpath%20d%3D%22M12%2017v5%22/%3E%3Cpath%20d%3D%22M2%2012h5%22/%3E%3Cpath%20d%3D%22M17%2012h5%22/%3E%0A%3Cpath%20d%3D%22M4.5%204.5l3.2%203.2%22/%3E%3Cpath%20d%3D%22M16.3%2016.3l3.2%203.2%22/%3E%0A%3Cpath%20d%3D%22M19.5%204.5l-3.2%203.2%22/%3E%3Cpath%20d%3D%22M7.7%2016.3l-3.2%203.2%22/%3E%0A%3C/svg%3E');
  mask-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M12%202v5%22/%3E%3Cpath%20d%3D%22M12%2017v5%22/%3E%3Cpath%20d%3D%22M2%2012h5%22/%3E%3Cpath%20d%3D%22M17%2012h5%22/%3E%0A%3Cpath%20d%3D%22M4.5%204.5l3.2%203.2%22/%3E%3Cpath%20d%3D%22M16.3%2016.3l3.2%203.2%22/%3E%0A%3Cpath%20d%3D%22M19.5%204.5l-3.2%203.2%22/%3E%3Cpath%20d%3D%22M7.7%2016.3l-3.2%203.2%22/%3E%0A%3C/svg%3E');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.95;
}

/* remove the old inner decoration layer */
.mhl-grid__item::after{
  content:none !important;
  display:none !important;
}

.mhl-grid__item--accent::before{
  background-color:rgba(186,255,59,.95);
}

/* === Title alignment tweaks (requested) === */
.mhl-block--stats .mhl-block__title,
.mhl-block--grid  .mhl-block__title,
.mhl-block--process .mhl-block__title{
  text-align:left !important;
  padding-left:clamp(16px, 4vw, 64px) !important;
}

/* Keep the "Создаем результат — под задачу" title in one line */
.mhl-block--grid .mhl-block__title{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}


/* === Final responsive/stability overrides v1.7.27 === */
.mhl-hero,
.mhl-cases,
.mhl-case,
.mhl-case__layout,
.mhl-case__gallery{
  max-width:100%;
}

.mhl-hero,
.mhl-cases{
  overflow:hidden;
}

.mhl-hero__title,
.mhl-case__name,
.mhl-case__desc,
.mhl-cases__title{
  overflow-wrap:anywhere;
  word-break:normal;
}

.mhl-cases__empty{
  margin:0 auto;
  max-width:1320px;
  padding:24px 20px 0;
  color:rgba(15,17,21,.72);
  font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.mhl-case__thumb,
.mhl-case-slider__slide{
  overflow:hidden;
}

.mhl-case__thumb-img,
.mhl-case-slider__slide img{
  display:block;
}

@supports (min-height: 100dvh){
  .mhl-hero{
    min-height:100dvh !important;
  }
}

@media (max-width: 860px){
  .mhl-case__layout{
    gap:18px !important;
  }
  .mhl-case__content{
    padding:24px 18px !important;
  }
}

@media (max-width: 480px){
  .mhl-case__content{
    padding:20px 16px !important;
  }
  .mhl-case__meta{
    gap:8px;
    flex-wrap:wrap;
  }
  .mhl-hero__actions{
    width:100%;
  }
  .mhl-hero__btn{
    width:100%;
    justify-content:center;
  }
}

@media (max-height: 720px) and (orientation: landscape){
  .mhl-hero{
    min-height:100dvh !important;
  }
  .mhl-hero__wrap{
    padding-top:calc(18px + var(--mhl-safe-top, 0px)) !important;
    padding-bottom:18px !important;
    align-items:flex-end !important;
  }
  .mhl-hero__content{
    max-width:min(640px, 100%) !important;
    padding:16px 18px !important;
    border-radius:20px !important;
  }
}


/* === Mobile cases hotfix v1.7.29 ===
   Fixes broken two-column layout on the cases page in mobile view.
   Scoped only to the cases block so nothing else on the site is affected. */
@media (max-width: 1160px){
  .mhl-cases .mhl-case__layout,
  .mhl-cases .mhl-case.is-reverse .mhl-case__layout{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .mhl-cases .mhl-case.is-reverse .mhl-case__media,
  .mhl-cases .mhl-case.is-reverse .mhl-case__content{
    order:initial !important;
  }

  .mhl-cases .mhl-case__media,
  .mhl-cases .mhl-case__content,
  .mhl-cases .mhl-case-slider,
  .mhl-cases .mhl-case-slider__stage,
  .mhl-cases .mhl-case-slider__thumbs{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width: 860px){
  .mhl-cases .mhl-case__layout{
    gap:10px !important;
  }

  .mhl-cases .mhl-case__content{
    padding:0 !important;
  }

  .mhl-cases .mhl-case__head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .mhl-cases .mhl-case__name,
  .mhl-cases .mhl-case__desc{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
  }
}

@media (max-width: 480px){
  .mhl-cases .mhl-case-slider__thumbs{
    grid-auto-columns:68px !important;
    gap:6px !important;
  }
}