/* Базовые стили страницы и движка абсолютной раскладки блоков (.zb) */

html { -webkit-text-size-adjust: 100%; }
:root {
  --font-text: 'Gilroy', Arial, sans-serif;
  --font-head: 'Gilroy', Arial, sans-serif;
}
body { margin: 0; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.page { position: relative; }
.anchor { display: block; height: 0; }

/* Блок с абсолютной раскладкой: артборд фиксированной высоты, элементы позиционируются от сетки */
.zb { -webkit-text-size-adjust: 100%; }
.zb__ab { position: relative; width: 100%; overflow: hidden; }
.zb__carrier { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; }
.zb__filter { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; }
.z { position: absolute; box-sizing: border-box; display: table; }
.zb .z__a {
  display: table-cell; vertical-align: middle; width: 100%; -webkit-text-size-adjust: 100%;
  border-width: var(--z-borderwidth, 0); border-style: var(--z-borderstyle, solid); border-color: var(--z-bordercolor, transparent);
  transition: background-color var(--z-speedhover, 0s) ease-in-out, color var(--z-speedhover, 0s) ease-in-out,
    border-color var(--z-speedhover, 0s) ease-in-out, box-shadow var(--z-shadowshoverspeed, 0.2s) ease-in-out;
  text-shadow: var(--z-shadow-text-x, 0px) var(--z-shadow-text-y, 0px) var(--z-shadow-text-blur, 0px)
    rgba(var(--z-shadow-text-color), var(--z-shadow-text-opacity, 100%));
}
.zb .z__a ul, .zb .z__a ol { margin-bottom: 0; }
.zb a.z__a { text-decoration: none; }
.zb .z__img { width: 100%; display: block; }

/* Кнопки */
.zb .z[data-type="button"] { display: block; }
.zb .z[data-type="button"] .z__a {
  display: flex; box-sizing: border-box; width: 100%; height: 100%;
  flex-direction: row; justify-content: center; align-items: center; overflow: hidden;
}
.zb .z[data-type="button"] .z__a::after {
  content: ""; display: block; position: absolute; width: 100%; height: 100%;
  left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1;
}
.zb .z__bc { display: flex; flex-direction: row; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; }
.zb .z__bt { flex: 1 1 0; text-overflow: ellipsis; }
.zb .z__bb {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  transition-duration: inherit; transition-timing-function: inherit; pointer-events: none;
}
.zb .z__bb::before, .zb .z__bb::after {
  -webkit-backface-visibility: hidden; position: absolute; inset: 0; content: ""; border-radius: inherit; z-index: 1;
}
.zb .z__bb::after { opacity: 0; transition-property: opacity; transition-duration: inherit; transition-timing-function: inherit; }

/* Появление при прокрутке (только экраны от 1200 px — как в исходном макете) */
@media screen and (min-width: 1200px) {
  .js [data-anim] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  .js [data-anim="fadeindown"] { transform: translateY(var(--anim-dist, -100px)); }
  .js [data-anim].is-shown { opacity: 1; transform: none; }
}