/* Pixeo CMS — design system styles for Figma Make kit.
   Generated 19.06.2026 by proj/MakeKit/build.sh from compiled /css.
   Do not edit here — edit style/*.scss, recompile, rebuild. */

@charset "UTF-8";
:root {
  /* Стилистика основного сайта pixio.kz: Inter + моноширинные акценты */
  --MainFont:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --MonoFont:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --MaterialIcons:"Material Icons";
  --BG:"";
  --InLine:3;
  --InPLine:3;
  /* Палитра pixio.kz: чёрный + фиолетовый #6646D5 + лайм #99ba2b */
  --Color1:#000;
  --Color2:#6646D5;
  --Color6:#99BA2B;
  --Red:#EB2B1E;
  --Color3:#fff;
  --MainFrameBg:#EDF2F7;
  --Color4:#BFC3C8;
  --Gray8:#1E2939;
  --Gray7:#374151;
  --Gray5:#6A7282;
  --Gray4:#99A1AF;
  --Gray3:#D1D5DC;
  --Gray2:#E5E7EB;
  --Gray0:#F9FAFB;
  /* Фирменный градиент (и обратный — для градиентного текста) */
  --GradFrom:var(--Color2);
  --GradTo:var(--Color6);
  --Gradient:linear-gradient(90deg, var(--GradFrom), var(--GradTo));
  --GradientR:linear-gradient(90deg, var(--GradTo), var(--GradFrom));
  --Bfr:"";
  /*
     Адаптивная единица измерения (чистый CSS, без JS).
     Макет свёрстан под ширину 1760: --Unit — это «1px макета»,
     масштабируется пропорционально ширине viewport.
     cqw вместо vw: без контейнера-предка он равен ширине viewport,
     а внутри admin-превью (#sections, container-type:inline-size)
     — ширине превью. На мобильных переопределяется в мобайл-блоке main.scss.
  */
  --Unit:calc(100cqw/1760);
  /*
     Совместимость: генератор стилей секций (SectionsCSSView.php)
     пишет calc(Npx/var(--MainCoef)). tan(atan2(...)) даёт безразмерное
     отношение 1760/ширина — тот же коэффициент, но без core.js.
     Можно удалить после перевода генератора на var(--Unit).
  */
  --MainCoef:tan(atan2(1760px,100cqw));
  --MainGap:var(--30);
  --Gap:var(--30);
  --Body:var(--1760);
  --1:calc(1*var(--Unit));
  --2:calc(2*var(--Unit));
  --3:calc(3*var(--Unit));
  --4:calc(4*var(--Unit));
  --5:calc(5*var(--Unit));
  --6:calc(6*var(--Unit));
  --8:calc(8*var(--Unit));
  --9:calc(9*var(--Unit));
  --10:calc(10*var(--Unit));
  --12:calc(12*var(--Unit));
  --14:calc(14*var(--Unit));
  --15:calc(15*var(--Unit));
  --16:calc(16*var(--Unit));
  --18:calc(18*var(--Unit));
  --19:calc(19*var(--Unit));
  --20:calc(20*var(--Unit));
  --22:calc(22*var(--Unit));
  --24:calc(24*var(--Unit));
  --26:calc(26*var(--Unit));
  --29:calc(29*var(--Unit));
  --30:calc(30*var(--Unit));
  --32:calc(32*var(--Unit));
  --36:calc(36*var(--Unit));
  --40:calc(40*var(--Unit));
  --42:calc(42*var(--Unit));
  --44:calc(44*var(--Unit));
  --48:calc(48*var(--Unit));
  --50:calc(50*var(--Unit));
  --52:calc(52*var(--Unit));
  --60:calc(60*var(--Unit));
  --64:calc(64*var(--Unit));
  --72:calc(72*var(--Unit));
  --80:calc(80*var(--Unit));
  --96:calc(96*var(--Unit));
  --100:calc(100*var(--Unit));
  --128:calc(128*var(--Unit));
  --150:calc(150*var(--Unit));
  --192:calc(192*var(--Unit));
  --195:calc(195*var(--Unit));
  --230:calc(230*var(--Unit));
  --250:calc(250*var(--Unit));
  --395:calc(395*var(--Unit));
  --500:calc(500*var(--Unit));
  --550:calc(550*var(--Unit));
  --560:calc(560*var(--Unit));
  --600:calc(600*var(--Unit));
  --880:calc(880*var(--Unit));
  --970:calc(970*var(--Unit));
  --1015:calc(1015*var(--Unit));
  --1152:calc(1152*var(--Unit));
  --1280:calc(1280*var(--Unit));
  --1760:calc(1760*var(--Unit));
  --MainContentGap:var(--50);
  --MainPadding:var(--80);
  /* Боковые отступы основных секций (как на pixio.kz) */
  --SidePadding:var(--100);
  --MoreGap:var(--15);
  --HeaderSliderPaddingTB:var(--230);
  --HeaderSliderPaddingLR:var(--SidePadding);
  --HeaderSliderMinWidth:var(--550);
  --HeaderSliderMaxWidth:var(--600);
  --ContentVerticalGapTB:var(--40);
  --ContentVerticalGapLR:0;
  --MainBorderRadius:var(--10);
  --MainBlockPadding:var(--30);
  --ContentShortGap:var(--10);
  --HalfPadding:var(--880);
  --LogoHeight:var(--64);
  --LogoWidth:var(--250);
  --Type2-1Height:var(--395);
  --Type3Padding:var(--150);
  --PhotoSize:var(--150);
  --S5-8Padding:var(--970);
  --ButtonPaddingTB:var(--19);
  --ButtonPaddingLR:var(--32);
  /* Кнопки pixio.kz — прямоугольные */
  --ButtonsBorderRadius:0;
  --BlockIconWidth:var(--60);
  --BigIconWidth:var(--100);
  --SideTitleWidth:var(--500);
  --MainHeaderFontSize:var(--40);
  --Type2-1Width:var(--560);
  --Type4Height:auto;
  --ArrowRight:var(--40);
  --ArrowBottom:var(--40);
  --ArrowWidth:var(--50);
  --ArrowHeight:var(--50);
  --ArrowImageURL:url("/images/arrow.svg");
  --ArrowHoverImageURL:url("/images/arrow-h.svg");
  --BorderColor:var(--Color2);
  --HalfBorderRadius:50%;
  /* ============================================================
     Ролевые токены ТЕМЫ (характер облика, не контент).
     Дефолты равны текущему виду — пока тема молчит, вид не меняется.
     Тему включает класс body.theme-* (style/themes.scss), который
     переопределяет эти переменные. Не путать с примитивами размеров
     (--40, --96): здесь именно роли (заголовок, карточка, лейбл).
     Подробности — proj/Theme_Variants_Audit.md.
     ============================================================ */
  /* Типографика-характер */
  --HeadingWeight:800; /* вес h1–h5 / .h2 */
  --HeadingTracking:-0.01em; /* трекинг заголовков */
  --HeadingTransform:uppercase; /* регистр .h2 */
  --HeadingLine:block; /* градиентная линия под .h2: block|none */
  --HeadingLineFill:var(--Gradient);
  --H3Weight:700;
  --HeroSize:var(--96); /* hero-заголовок t0a (независим от счётчиков t18a) */
  --HeroWeight:900;
  --HeroTransform:uppercase;
  --SectionHeadSize:var(--48); /* крупные заголовки секций t2/t6 */
  --LabelFont:var(--MonoFont); /* mono-лейблы: .more/.btn/.annotation/подписи */
  --LabelTransform:uppercase;
  --LabelTracking:0.1em;
  /* Геометрия и фактура карточек */
  --CardRadius:var(--MainBorderRadius); /* t3a/t7a/t9/t13a/t16.form/t17a */
  --CardRadiusLg:var(--24); /* t6a */
  --CardSharpRadius:0; /* t2a — острые углы по умолчанию */
  --CardFill:var(--MainFrameBg); /* заливка карточек (≠ фон секции t1) */
  --CardShadow:0 var(--10) var(--15) rgba(0,0,0,.1), 0 var(--4) var(--6) rgba(0,0,0,.1); /* t2a */
  --CardBorderWidth:var(--2); /* рамка t6a */
  --CardAccentBorder:var(--4); /* кант слева t2a */
  --BadgeRadius:var(--12); /* номер-бейдж t6a */
  --DividerWidth:1px; /* разделитель аккордеона t15a */
  --DividerColor:var(--BorderColor);
  /* Кнопки */
  --ButtonBorderWidth:var(--2);
  --ButtonTransform:uppercase;
  --ButtonFont:var(--MonoFont);
}

textarea {
  -webkit-appearance: none;
}

*,
*:before,
*:after {
  font-family: var(--MainFont), serif;
  scroll-behavior: smooth;
  box-sizing: border-box;
  transform-style: flat;
  backface-visibility: hidden;
}

.description > * + * {
  margin-top: var(--20);
}
.description ul,
.description ol {
  margin-top: 0;
  margin-bottom: 0;
}
.description > p + ol, .description > p + ul {
  margin-top: var(--10);
}
.description:empty {
  display: none;
}
.description.annotation {
  font-size: var(--18);
  line-height: var(--26);
}

p {
  padding: 0;
  margin: 0;
}

p + p,
p + ul,
ul + p,
ol + p,
p + ol {
  margin: 0;
}

h1, h2, h3, h4, h5 {
  padding: 0;
  margin: 0;
  font-size: var(--40);
  font-weight: var(--HeadingWeight);
  letter-spacing: var(--HeadingTracking);
  color: var(--Color1);
}
h1:empty, h2:empty, h3:empty, h4:empty, h5:empty {
  display: none;
}

.h1,
h1.title {
  font-size: var(--40);
  font-weight: var(--HeadingWeight);
  color: var(--Color1);
}

/*
   Заголовки секций в стилистике pixio.kz:
   жирный uppercase + градиентная линия снизу,
   акцентные слова в <span> — градиентным текстом.
*/
.h2,
h2.title {
  font-size: var(--40);
  font-weight: var(--HeadingWeight);
  text-transform: var(--HeadingTransform);
  color: var(--Color1);
  position: relative;
  padding-bottom: var(--20);
}
.h2:after,
h2.title:after {
  content: "";
  display: var(--HeadingLine);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--2);
  background: var(--HeadingLineFill);
}
.h2 span,
h2.title span {
  background: var(--Gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.h3,
h3.title {
  font-size: var(--30);
  font-weight: var(--H3Weight);
  color: var(--Color1);
}

.h2.up,
h2.title.up {
  text-transform: uppercase;
}

.description,
.type33aaa:before {
  font-size: var(--20);
  line-height: 1.6;
  color: var(--Gray7);
  hyphens: auto;
}
.description a,
.type33aaa:before a {
  color: var(--Color1);
}
.description,
.type33aaa:before {
  /* моноширинная подпись-аннотация (как лейблы на pixio.kz) */
}
.description.annotation,
.type33aaa:before.annotation {
  font-family: var(--LabelFont);
  font-size: var(--15);
  line-height: 1.5;
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
  color: var(--Gray5);
}
.description,
.type33aaa:before {
  /* строка с кнопками */
}
.description p:has(.btn),
.type33aaa:before p:has(.btn) {
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  gap: var(--24);
}

/* Описание hero-слайда (порт pixio.kz): светлый текст, mono-подписи, градиентная цена.
   Вшито в структурные классы секций (бывший хелпер .HeaderSliderDescription удалён):
   t0a — описание слайда, t21a — текст отзыва. */
.t0a .info .description,
.t21a > .title {
  font-size: var(--24);
  line-height: 1.35;
  font-weight: 300;
  color: var(--Gray3);
  hyphens: none;
}
.t0a .info .description p,
.t21a > .title p {
  margin: 0 0 var(--24);
}
.t0a .info .description p + p,
.t21a > .title p + p {
  margin: 0;
}
.t0a .info .description p:has(.btn),
.t21a > .title p:has(.btn) {
  margin-top: var(--64);
  align-items: center;
  justify-content: center;
}
.t0a .info .description p.alt,
.t21a > .title p.alt {
  color: var(--Gray4);
  line-height: 1.625;
  font-size: var(--18);
  font-family: var(--MonoFont);
  margin-bottom: var(--32);
}
.t0a .info .description p.price,
.t21a > .title p.price {
  padding-top: var(--48);
  font-size: var(--72);
  line-height: 1;
  font-weight: 900;
  background: var(--GradientR);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: var(--8);
  display: inline-block;
}

/*
   Ссылка «подробнее» в mono-стилистике pixio.kz:
   uppercase, текстовая стрелка, градиентное подчёркивание на hover.
*/
.more {
  display: inline-flex;
  gap: var(--10);
  align-items: baseline;
  color: var(--Color2);
  font-family: var(--LabelFont);
  font-size: var(--15);
  line-height: 1.4;
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
  text-decoration: none;
  position: relative;
  padding-bottom: var(--5);
}
.more:empty {
  display: none;
}
.more {
  /* градиентная линия, растущая слева направо */
}
.more:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--2);
  background: var(--Gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.more:after {
  content: "→";
  font-family: var(--MonoFont);
  transition: transform 0.25s ease;
}
.more:hover {
  text-decoration: none;
}
.more:hover:before {
  transform: scaleX(1);
}
.more:hover:after {
  transform: translateX(var(--5));
}
.more.sm {
  font-size: var(--14);
}
.more.sm:after {
  content: none;
}

/* Заголовок карточки t2a (бывший .BlockTitleWhite) */
.t2a .title {
  color: var(--Color3);
  font-size: var(--30);
}

/* Заголовок карточки t3a (бывший .BlockTitle) */
.t3a .info .title {
  font-size: var(--20);
  font-weight: 500;
  line-height: var(--26);
  color: var(--Color1);
}

/*
   Кнопки pixio.kz: .btn — прозрачная «тихая» mono-кнопка,
   .btn.cl — главный CTA с градиентом.
   База адаптивная: цвет и рамка берутся от текущего цвета текста
   контекста (на тёмном фоне — светлая, на светлом — тёмная); раньше
   была жёстко белой и пропадала на светлых фонах.
*/
.btn {
  display: inline-block;
  color: inherit;
  letter-spacing: var(--LabelTracking);
  font-size: var(--14);
  line-height: 1.45;
  font-family: var(--ButtonFont);
  text-transform: var(--ButtonTransform);
  padding: var(--16) var(--32);
  border: var(--ButtonBorderWidth) solid color-mix(in srgb, currentColor 30%, transparent);
  background: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: var(--ButtonsBorderRadius);
  transform: scale(1);
  transform-origin: center;
  transition: all 0.3s linear;
}
.btn:hover {
  transform: scale(1.05);
  text-decoration: none;
}
.btn.cl {
  background: var(--Gradient);
  border: 0;
  color: var(--Color3);
  font-family: var(--MainFont);
  font-weight: 900;
  letter-spacing: 0.05em;
  font-size: var(--20);
  line-height: 1.4;
  padding: var(--24) var(--48);
}
.btn {
  /* t1 — исторический вариант «для светлых фонов»; после того как база
     стала адаптивной, совпадает с ней (оставлен для совместимости данных) */
}
.btn.t1 {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  color: inherit;
}

/* Значение показателя t7aa (бывший .ValueString) */
.t7aa .title {
  font-size: var(--32);
  color: var(--Color1);
}

/* Вопрос аккордеона t15a (бывший .Type21H) */
.t15a .title {
  font-size: var(--36);
  font-weight: 600;
  line-height: var(--42);
  cursor: pointer;
  padding: var(--ButtonPaddingTB) 0;
}

/* Заголовок главы прайса t23a (бывший .MenuDep) */
.t23a > .title {
  font-size: var(--64);
  color: var(--Color1);
}

/*
   Admin-превью секций: контейнер делает 100cqw внутри #sections
   равным ширине превью (задаётся inline-шириной в SectionAdminView),
   поэтому все размеры масштабируются без JS и --ActualSize.
   На публичных страницах #sections нет — правило ни на что не влияет.
*/
#sections {
  container-type: inline-size;
}

html {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  scroll-behavior: smooth;
}

/* Каркас страницы применяем только к фронту. Админка грузит этот же main.scss
   (единый источник стилей секций), но её <body data-language> не должен получать
   фронтовые body-правила (flex-колонка/font-size:0/фон), иначе ломается чрома админки. */
body:not([data-language]) {
  font-family: var(--MainFont), serif;
  width: 100%;
  min-height: 100vh;
  color: var(--Color1);
  font-style: normal;
  position: relative;
  scroll-behavior: smooth;
  background: var(--Color3);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 0;
}
body:not([data-language]):has(.popupBox.visible) {
  overflow: hidden;
}
body:not([data-language]) > div.mb {
  width: 100%;
}

@media print {
  body:has(.popupBox.visible) {
    overflow: auto !important;
    background: #fff !important;
  }
  body:has(.popupBox.visible) > *:not(.popupBox) {
    display: none !important;
  }
  .popupBox {
    padding: 0 !important;
    position: relative;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: #fff !important;
    height: auto;
  }
  .popupBox .popup {
    height: auto;
  }
  .popupBox .popup .cover {
    max-height: none !important;
  }
  .popupBox .popup a.close,
  .popupBox .popup a.print,
  .popupBox .popup a.arrow {
    display: none !important;
  }
}
.popupBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--Color3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s linear, visibility 0.3s linear, z-index 0.3s linear 0.3s;
  padding: var(--MainPadding);
  overflow: hidden;
  pointer-events: none;
}
.popupBox.visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 1000;
}
.popupBox .popup {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--Color3);
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
  max-height: calc(100% - var(--MainPadding) * 2);
  transition: all 0.3s linear;
}
.popupBox .popup > .title {
  color: var(--Color3);
  font-size: var(--24);
}
.popupBox .popup > a.close {
  display: block;
  width: var(--MainContentGap);
  height: var(--MainContentGap);
  background: url("/images/close.svg") no-repeat center center;
  background-size: var(--22);
  position: absolute;
  right: var(--20);
  top: var(--20);
}
.popupBox#requestPopup {
  display: flex;
  background: rgba(255, 255, 255, 0.9);
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  align-items: flex-start;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(0);
}
.popupBox#requestPopup.visible {
  backdrop-filter: blur(3px) saturate(180%);
}
.popupBox#requestPopup.visible .popup {
  transform: translateX(0);
}
.popupBox#requestPopup.visible .popup > a.close {
  background-image: url("/images/close-w.svg");
}
.popupBox#requestPopup .popup {
  background: var(--Color2);
  padding: var(--MainBlockPadding);
  flex: 0 0 var(--HeaderSliderMaxWidth);
  transform: translateX(100%);
  transition: transform 0.3s linear;
  border-radius: 0;
  max-height: 100%;
  height: 100%;
  gap: var(--MainGap);
  cursor: auto;
}
.popupBox#requestPopup .popup > .title, .popupBox#requestPopup .popup .list {
  padding: var(--10);
}
.popupBox#requestPopup .popup form {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
.popupBox#requestPopup .popup form .list {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
}
.popupBox#requestPopup .popup form .list .description {
  color: var(--Color3);
}
.popupBox#requestPopup .popup form .list .line {
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
}
.popupBox#requestPopup .popup form .list .line > label:first-child {
  cursor: pointer;
  font-size: var(--20);
  color: var(--Color3);
}
.popupBox#requestPopup .popup form .actions {
  display: flex;
  gap: var(--MainGap);
}
.popupBox#requestPopup .popup .cb + label {
  color: var(--Color3);
}
.popupBox#requestPopup .popup .cb + label:after {
  border-color: var(--Color3);
}

input[type=button],
input[type=submit],
input[type=reset] {
  -webkit-appearance: none;
}

:has(> .cb) {
  position: relative;
}

.cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.cb:checked label:after {
  display: block;
}
.cb + label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: var(--20);
  padding-left: var(--30);
}
.cb + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--24);
  height: var(--24);
  border: var(--2) solid var(--Color2);
  background-color: var(--Color3);
  border-radius: var(--3);
}
.cb + label:after {
  content: "";
  position: absolute;
  display: none;
  left: var(--8);
  top: var(--2);
  width: var(--8);
  height: var(--16);
  border: solid var(--Color2);
  border-width: 0 var(--2) var(--2) 0;
  transform: rotate(45deg);
}

img {
  height: auto;
  max-width: 100%;
}

a {
  color: var(--Color1);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}
a img {
  border: 0;
  max-width: 100%;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select::-ms-expand {
  display: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
main,
nav,
section,
summary {
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  clear: both;
}

option {
  color: var(--Color1);
}

div.text,
input.text,
select.text,
textarea.text {
  width: 100%;
  border: 1px solid var(--BorderColor);
  border-radius: var(--MainBorderRadius);
  padding: var(--ButtonPaddingTB);
  background: var(--Color3);
  color: var(--Color1);
  font-size: var(--22);
  line-height: var(--30);
}

textarea.text {
  resize: vertical;
}

.message {
  font-weight: 500;
  font-size: var(--20);
}
.message.error {
  color: var(--Red);
}
.message.success {
  color: var(--Color2);
}
.message.success:first-child {
  margin-bottom: var(--MainGap);
}

#requestPopup .message.success,
.type23 .message.success {
  color: var(--Color3);
}

.text + .message {
  margin-top: var(--10);
}

/*
   Без жёсткой ширины: width:auto заполняет доступное место
   С УЧЁТОМ внешних margin. Иначе секции, у которых класс body
   стоит на самом section.s, получали margin+width:100% и
   вылезали за правую границу экрана.
*/
.body {
  max-width: var(--Body);
  margin-inline: auto;
}

#mb {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--MainContentGap);
}

#gvp {
  padding: 0;
  background: var(--Color3);
  display: flex;
  flex-direction: column;
  /* дефолты стрелок попапа; переопределяются персональными стилями
     секции-галереи (ключи ".popup .photo" в StylesMapData 12/22) */
  --ArrowImageURL:url("/images/arrow-nb.svg");
  --ArrowHoverImageURL:url("/images/arrow-h.svg");
}
#gvp .popup {
  display: flex;
  gap: var(--MainBlockPadding);
  max-height: 100vh;
  width: 100%;
  background: var(--Color3);
  flex-direction: row;
  padding: var(--MainPadding);
  flex: 1;
}
#gvp .popup .info-block {
  flex: 0 0 var(--Type2-1Width);
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
#gvp .popup .photo {
  flex: 1;
  display: flex;
}
#gvp .popup .photo > .arrow {
  flex: 0 0 var(--MainContentGap);
  display: flex;
  align-items: center;
}
#gvp .popup .photo > .arrow.right .arrow {
  transform: rotate(180deg);
}
#gvp .popup .photo > .arrow .arrow {
  display: block;
  width: var(--MainContentGap);
  height: var(--MainContentGap);
  background: var(--ArrowImageURL) center center/contain no-repeat;
  transition: background-image 0.3s linear;
}
#gvp .popup .photo > .arrow .arrow:hover {
  background-image: var(--ArrowHoverImageURL);
}
#gvp .popup .photo > .cover {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* Футер в стилистике pixio.kz: чёрная полоса, приглушённый mono-текст */
footer.footer {
  background: var(--Color1);
  padding: var(--30) var(--SidePadding);
  display: flex;
  gap: var(--MainGap);
  align-items: center;
  margin-top: var(--MainPadding);
}
footer.footer .body {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  align-items: center;
}
footer.footer .description {
  flex: 1;
  color: var(--Gray4);
  font-family: var(--MonoFont);
  font-size: var(--15);
  letter-spacing: 0.05em;
}
footer.footer .description a {
  color: var(--Color3);
}
footer.footer .social {
  display: flex;
  gap: var(--MoreGap);
}
footer.footer .social a.s {
  display: block;
  width: var(--40);
  height: var(--40);
  background: var(--BG) center center/contain no-repeat;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
footer.footer .social a.s:hover {
  opacity: 1;
  transform: scale(1.1);
}

/*
   Шапка pixio.kz (порт из pixio.kz/css/main.css): фиксированная,
   mix-blend-mode:difference — элементы белые, на светлом фоне
   автоматически инвертируются. Текстовый логотип + mono-лейбл,
   контакты — круглые иконки. Клики проходят сквозь пустые области.
*/
@keyframes headerLogoSlideIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
header.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  mix-blend-mode: difference;
  pointer-events: none;
  padding: var(--24) var(--32);
  display: flex;
  justify-content: space-between;
  gap: var(--MainGap);
  align-items: center;
}
header.header .logo {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--3);
  animation: headerLogoSlideIn 1s ease-out;
}
header.header .logo .pixio {
  font-size: var(--30);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--Color3);
}
header.header .logo .label {
  font-family: var(--MonoFont);
  font-size: var(--12);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
}
header.header .menu {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: auto;
}
header.header .menu:empty {
  display: none;
}
header.header .menu a {
  display: inline-block;
  font-family: var(--MonoFont);
  font-size: var(--14);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--Color3);
}
header.header .menu a:hover {
  color: var(--Color6);
  text-decoration: none;
}
header.header .menu li {
  position: relative;
}
header.header .menu {
  /* текущая страница — градиентная линия в духе .more/h2 */
}
header.header .menu .current > a {
  background: var(--Gradient) left bottom/100% var(--2) no-repeat;
  padding-bottom: var(--5);
}
header.header .menu {
  /* пункт с дочерними страницами: шеврон + дропдаун */
}
header.header .menu .sub > a:after {
  content: "";
  display: inline-block;
  width: var(--6);
  height: var(--6);
  margin: 0 0 var(--2) var(--8);
  border-right: var(--2) solid currentColor;
  border-bottom: var(--2) solid currentColor;
  transform: rotate(45deg);
}
header.header .menu .sub menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--20));
  margin: 0;
  padding: var(--14) var(--20) var(--16);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--12);
  min-width: max-content;
  background: rgba(255, 255, 255, 0.1);
  border: var(--1) solid rgba(255, 255, 255, 0.2);
  border-radius: var(--MainBorderRadius);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--10));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
header.header .menu .sub:hover menu, header.header .menu .sub:focus-within menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
header.header .contacts {
  display: flex;
  align-items: center;
  gap: var(--16);
  pointer-events: auto;
}
header.header .contacts a {
  --BG:url("/images/phone.svg");
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--50);
  height: var(--50);
  background-color: rgba(255, 255, 255, 0.1);
  border: var(--1) solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
header.header .contacts a:before {
  content: "";
  background: var(--BG) center center/contain no-repeat;
  display: block;
  width: var(--20);
  height: var(--20);
}
header.header .contacts a span {
  display: none;
}
header.header .contacts a.whatsapp {
  --BG:url("/images/whatsapp.svg");
}
header.header .contacts a:hover {
  background-color: rgba(153, 186, 43, 0.25);
  transform: scale(1.1);
  text-decoration: none;
}
header.header {
  /* бургер-меню: разметка единая, на широких экранах скрыт (показывается в мобайл-блоке main.scss ниже) */
}
header.header .m {
  display: none;
}

/* ===================================================================
   SECTIONS — слито из sections.scss (раньше отдельный файл, грузился на
   страницах с секциями). С 19.06.2026 — часть единого main.scss.
   =================================================================== */
/* ============================================================
   Секции Pixeo (см. proj/Sections.md)

   Контент демо-страницы рекламирует сам конструктор, поэтому
   стили дополнены аккуратной интерактивностью: карточки и
   логотипы реагируют на наведение, аккордеон получил индикатор,
   слайды — плавное появление текста. Вся геометрия по-прежнему
   управляется css-переменными (variables.scss + StylesJSON).
   ============================================================ */
/* ============================================================
   Боковые отступы основных секций (стилистика pixio.kz).
   Секции с собственным фоном на всю ширину (hero, тёмные полосы)
   остаются full-bleed — отступ уходит во внутренний padding.
   ============================================================ */
#mb > .s {
  margin: 0 var(--SidePadding);
}

#mb > .s.t0,
#mb > .s.t16.dark,
#mb > .s.t18,
#mb > .s.t19,
#mb > .s.t21.dark {
  margin: 0;
}

#mb > .s.t16.dark,
#mb > .s.t21.dark {
  /* у 16/21 на секции класс body (ограничение ширины) — тёмные варианты
     full-bleed, ширину контента держит внутренний .body-блок */
  max-width: none;
}

#mb > .s.t18,
#mb > .s.t21.dark {
  padding-left: var(--SidePadding);
  padding-right: var(--SidePadding);
}

div.t0,
section.t0 {
  position: relative;
}

/* --- Общее: scroll-snap для лент и каруселей --------------- */
.t0 .container,
.t17 .container,
.t20 .container {
  scroll-snap-type: both mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.t0a,
.t12a,
.t17a,
.t20a {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* ============================================================
   Тип 0 — hero-слайдер («Создавайте сайты без кода»)
   Дети 0a: фон-обложка, h1, описание, ссылка; класс w — белый текст
   ============================================================ */
.t0 {
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  /* stretch: .container получает всю высоту секции (height:100% не
     работает при min-height у родителя); центрируют сами слайды .t0a */
  align-items: stretch;
  justify-content: center;
  background: var(--Color1);
}
.t0 .container {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.t0 {
  /* подпись-приглашение к скроллу (если выводится) */
}
.t0 .scroll {
  position: absolute;
  left: 50%;
  bottom: var(--48);
  display: inline-flex;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--14);
  font-family: var(--MonoFont);
  animation: t0scroll 1s ease-in-out infinite alternate;
  pointer-events: none;
}
.t0 .arrows {
  position: absolute;
  display: flex;
  height: 0;
  gap: var(--MainGap);
  align-items: flex-end;
  right: var(--ArrowRight);
  bottom: var(--ArrowBottom);
  z-index: 1;
  cursor: pointer;
}
.t0 .arrows .arrow {
  display: block;
  width: var(--ArrowWidth);
  height: var(--ArrowHeight);
  background: var(--ArrowImageURL) center center/contain no-repeat;
  transition: transform 0.2s ease;
}
.t0 .arrows .arrow:hover {
  background-image: var(--ArrowHoverImageURL);
  transform: scale(1.08);
}
.t0 .arrows .arrow.right {
  transform: rotate(180deg);
}
.t0 .arrows .arrow.right:hover {
  transform: rotate(180deg) scale(1.08);
}

.t0a {
  display: flex;
  /* вертикально центрирует flex родителя (min-height:100vh), как на pixio */
  padding: 0 var(--HeaderSliderPaddingLR);
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  position: relative;
  background: var(--BG) center center/cover no-repeat;
  /* декоративный svg-слой из контента слайда */
}
.t0a svg {
  opacity: 0.3;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: svgOpacity 1.5s linear;
}
.t0a {
  /* плавающие декорации: кольцо и квадрат */
}
.t0a:before {
  content: "";
  display: block;
  width: var(--128);
  height: var(--128);
  right: var(--80);
  top: var(--80);
  border-radius: 50%;
  border: var(--2) solid rgba(102, 70, 213, 0.3);
  position: absolute;
  pointer-events: none;
  animation: t0art 7s ease-in-out infinite alternate;
}
.t0a:after {
  content: "";
  display: block;
  width: var(--96);
  height: var(--96);
  bottom: var(--128);
  left: var(--128);
  background: rgba(153, 186, 43, 0.2);
  position: absolute;
  pointer-events: none;
  animation: t0alb 13s ease-in-out infinite alternate;
}
.t0a .lnk {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.t0a .body {
  max-width: var(--1152);
  position: relative;
  animation: t0aInit 1.5s ease-out 1 forwards;
  opacity: 0;
  /* акценты вокруг заголовка: лаймовый круг и фиолетовое кольцо */
}
.t0a .body:before {
  content: "";
  display: block;
  pointer-events: none;
  width: var(--48);
  height: var(--48);
  border-radius: 50%;
  background: var(--Color6);
  z-index: -1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: t0aInit 1.5s ease-out 1 forwards;
  animation-delay: 0.3s;
  opacity: 0;
}
.t0a .body:after {
  content: "";
  display: block;
  pointer-events: none;
  width: var(--64);
  height: var(--64);
  border-radius: 50%;
  border: var(--4) solid var(--Color2);
  position: absolute;
  right: 0;
  top: 0;
  animation: t0aInit 1.5s ease-out 1 forwards;
  animation-delay: 0.6s;
  opacity: 0;
}
.t0a .info {
  display: flex;
  flex-direction: column;
  gap: var(--32);
  text-align: center;
  will-change: transform;
  /* hero-типографика pixio.kz: огромный жирный uppercase,
     слайды на тёмном фоне — текст светлый */
}
.t0a .info .title {
  font-size: var(--HeroSize);
  line-height: 1.05;
  font-weight: var(--HeroWeight);
  text-transform: var(--HeroTransform);
  letter-spacing: -0.025em;
  color: var(--Color3);
}
.t0a .info .title span {
  background: linear-gradient(90deg, var(--GradTo), var(--GradFrom), var(--GradTo));
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: HeroGradient 4s ease-in-out infinite;
}
.t0a .info .description p {
  animation: t0aFromBottom 1.5s ease forwards;
  opacity: 0;
}
.t0a .info .description p:nth-child(1) {
  animation-delay: 0.6s;
}
.t0a .info .description p:nth-child(2) {
  animation-delay: 0.8s;
}
.t0a .info .description p:nth-child(3) {
  animation-delay: 1s;
}
.t0a .info .description p:nth-child(4) {
  animation-delay: 1.2s;
}
.t0a .info .description p:nth-child(5) {
  animation-delay: 1.4s;
}
.t0a .info .more {
  color: var(--Color6);
  align-self: center;
  position: relative;
  z-index: 1;
}
.t0a {
  /* плавное появление текста активного слайда */
}
.t0a.current .info {
  animation: SlideInfoIn 0.6s ease both;
}
.t0a.w .info .more,
.t0a.w .info .description,
.t0a.w .info .title {
  color: var(--Color3);
}

@keyframes SlideInfoIn {
  from {
    opacity: 0;
    transform: translateY(var(--20));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes t0scroll {
  0% {
    transform: translate(-50%, -25%);
  }
  100% {
    transform: translate(-50%, 25%);
  }
}
@keyframes svgOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes t0art {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(var(--150), calc(0px - var(--50))) rotate(360deg) scale(1.2);
  }
}
@keyframes t0alb {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(calc(0px - var(--150)), var(--50)) rotate(360deg) scale(1.2);
  }
}
@keyframes HeroGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes t0aInit {
  0% {
    opacity: 0;
    transform: translateY(var(--50));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes t0aFromBottom {
  0% {
    opacity: 0;
    transform: translateY(var(--50));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
   Тип 1 — «Pixeo — конструктор нового поколения»
   Текстовый блок с изображением слева (body:before — обложка).
   Вариант bg (бывший тип 3) — обложка фоном всей секции, см. ниже
   ============================================================ */
.s.t1:not(.bg) {
  background: var(--MainFrameBg);
}

.t1 .body,
.t5,
.t9 {
  display: flex;
  gap: var(--MainGap);
}

.t5.a,
.t9.a {
  flex-direction: row-reverse;
}

.t1 .body:before,
.t5:before {
  content: "";
  display: block;
  /* зажато процентом: фиксированная макетная ширина не должна
     выталкивать контент за пределы секции с боковыми отступами */
  flex: 0 0 min(var(--1015), 58%);
  background: var(--BG) center center/cover no-repeat;
}

.t5:before {
  border-radius: var(--MainBorderRadius);
  flex: 0 0 calc((100% - var(--MainGap)) / 2);
}

.t1 .body .info,
.t5 .info,
.t9 .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  justify-content: center;
  padding: var(--ContentVerticalGapTB) var(--ContentVerticalGapLR);
}

/* у t1 текст лежит на подложке секции — нужен внутренний отступ справа
   (слева роль отступа играет gap после картинки) */
.t1:not(.bg) .body .info {
  padding-right: var(--MainPadding);
}

/* ============================================================
   Типы 2, 7, 13, 15 — вертикальные контейнеры с сетками
   (2 — «Возможности», 7 — «Pixeo в цифрах»,
    13 — «Как запустить сайт», 15 — FAQ)
   ============================================================ */
.t2,
.t7,
.t13,
.t15 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

.t2 .items,
.t7 .items,
.t13 .items {
  display: flex;
  gap: var(--MainGap);
  flex-wrap: wrap;
}

/* Заголовок и сетка — как «НАШИ ИСТОРИИ» на pixio.kz */
.t2 {
  align-items: center;
}
.t2 h2.title {
  font-size: var(--SectionHeadSize);
  text-align: center;
}
.t2 .items {
  width: 100%;
  --MainGap:var(--32);
}

/* 2a — карточка-кейс pixio.kz: фото сверху, белая подложка,
   цветной кант слева, подъём на hover */
.t2a {
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  width: calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  background: var(--Color3);
  border-left: var(--CardAccentBorder) solid var(--Color2);
  border-radius: var(--CardSharpRadius);
  box-shadow: var(--CardShadow);
  display: flex;
  flex-direction: column;
  transform: none;
  transition: border-left-color 0.3s linear, transform 0.3s linear 0.3s;
}
.t2a:before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 380/192;
  background: var(--BG) center center/cover no-repeat;
}
.t2a .title {
  flex: 1;
  padding: var(--24);
  font-weight: 900;
  font-size: var(--20);
  line-height: 1.4;
  color: var(--Color1);
  transition: color 0.3s linear 0.3s;
}
.t2a .more {
  margin: 0 var(--24) var(--24);
  align-self: flex-start;
}
.t2a:hover {
  border-left-color: var(--Color6);
  transform: translateY(calc(0px - var(--10)));
  text-decoration: none;
}
.t2a:hover .title {
  color: var(--Color2);
}

/* ============================================================
   Тип 1, вариант bg — баннер-CTA (бывший тип 3,
   «Запустите сайт уже сегодня», Section_Join.md гр. F)
   ============================================================ */
.s.t1.bg {
  background: var(--BG) center center/cover no-repeat;
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
}
.s.t1.bg .body:before {
  display: none;
}
.s.t1.bg .info {
  padding: var(--Type3Padding) var(--MainPadding) var(--Type3Padding) min(var(--HalfPadding), 50%);
}

/* ============================================================
   Типы 3, 6 — сетки карточек
   (3 — «Сайты на Pixeo», 6 — «Что вы получаете»;
    6 — бывший 10, объединивший 10/11/12 — карточки с иконками,
    варианты il/it, Section_Join.md гр. B)
   ============================================================ */
.t3,
.t6 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
.t3 .items,
.t6 .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--MainGap);
}

/* 4a — карточка-кейс «фото сверху» */
.t3a {
  display: flex;
  flex-direction: column;
  border-radius: var(--CardRadius);
  overflow: hidden;
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t3a img {
  height: var(--Type4Height);
}
.t3a .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
  padding: var(--MainGap);
  background: var(--CardFill);
}
.t3a:hover {
  transform: translateY(calc(0px - var(--3)));
  box-shadow: 0 var(--10) var(--30) rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Тип 4 — широкий баннер преимуществ (бывший 5, объединивший 5/6/7/8,
   Section_Join.md гр. A). Варианты: r — текст справа (бывшие 6/8),
   d — тёмный текст (бывшие 7/8)
   ============================================================ */
.t4 {
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
  background: var(--BG) center center/cover no-repeat;
  padding: var(--HeaderSliderPaddingTB) var(--MainPadding);
}
.t4 .info {
  padding-right: var(--S5-8Padding);
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  color: var(--Color3);
}
.t4 {
  /* дефолт — светлый текст: глобальная типографика задаёт h2/.description
     собственные цвета, поэтому наследования от .info недостаточно —
     красим элементы адресно */
}
.t4:not(.d) .info .title,
.t4:not(.d) .info .description,
.t4:not(.d) .info .description a {
  color: var(--Color3);
}
.t4.r .info {
  padding-left: var(--S5-8Padding);
  padding-right: 0;
}
.t4.d .info {
  color: initial;
}

/* ============================================================
   Типы 5, 8, 9 — изображение + текст + кнопки
   (5 — «Почему выбирают Pixeo», 8 — полоса кнопок,
    9 — комбо: показатели + текст + кнопки)
   ============================================================ */
.t5 .info .items,
.t8 .items,
.t9 .items {
  display: flex;
  gap: var(--MainGap);
  flex-wrap: wrap;
}

.t5 .t5a {
  background: none;
}

/* Заголовок и сетка t6 — как «КАК МЫ РАБОТАЕМ» на pixio.kz */
.t6 {
  align-items: center;
}
.t6 h2.title {
  font-size: var(--SectionHeadSize);
  text-align: center;
}
.t6 > .description {
  text-align: center;
  font-weight: 300;
}
.t6 .items {
  width: 100%;
  counter-reset: section6;
  --MainGap:var(--48);
}

/* 6a — нумерованная карточка pixio.kz: рамка фирменного цвета,
   повёрнутый квадратный номер, соединительная линия между карточками.
   Цвета чередуются: фиолетовый/лайм. Иконка вместо номера —
   вариантами родителя .t6.il / .t6.it */
.t6a {
  --HeadColor:var(--Color2);
  counter-increment: section6;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--16);
  border: var(--CardBorderWidth) solid color-mix(in srgb, var(--HeadColor) 60%, transparent);
  border-radius: var(--CardRadiusLg);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  width: calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  padding: var(--32);
  transition: transform 0.5s ease-in-out 0.3s, border-color 0.3s ease-in-out;
}
.t6a:nth-child(odd) {
  --HeadColor:var(--Color2);
}
.t6a:nth-child(even) {
  --HeadColor:var(--Color6);
}
.t6a {
  /* соединительная линия к следующей карточке */
}
.t6a:after {
  content: "";
  display: block;
  height: var(--2);
  width: var(--50);
  background: color-mix(in srgb, var(--HeadColor) 60%, transparent);
  position: absolute;
  right: calc(0px - var(--50) / 2 - var(--MainGap) / 2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.t6a:nth-child(even):after, .t6a:last-child:after {
  content: none;
}
.t6a:before {
  content: "0" counter(section6);
  background: var(--HeadColor);
  color: var(--Color3);
  text-align: center;
  font-weight: 900;
  font-size: var(--24);
  border-radius: var(--BadgeRadius);
  width: var(--64);
  height: var(--64);
  line-height: var(--64);
  transform: rotateZ(6deg);
  transition: transform 0.3s ease-in-out 0.3s, background-color 0.3s ease-in-out 0s;
}
.t6a:hover {
  transform: scale(1.025);
}
.t6a:hover:before {
  transform: rotateZ(-2deg);
  animation: t6aHoverBg 2s ease-in-out infinite alternate;
}
.t6a .info {
  display: flex;
  flex-direction: column;
  gap: var(--16);
  flex: 1;
}
.t6a h3.title {
  color: var(--HeadColor);
  font-weight: 900;
  font-size: var(--24);
  line-height: 1.33;
}
.t6a .description {
  color: var(--Gray7);
  line-height: 1.625;
  font-size: var(--16);
}

@keyframes t6aHoverBg {
  0% {
    background: var(--HeadColor);
    transform: rotateZ(6deg) scale(1);
  }
  100% {
    background: color-mix(in srgb, var(--HeadColor) 60%, transparent);
    transform: rotateZ(-2deg) scale(1.05);
  }
}
.t6.il .t6a {
  flex-direction: row;
}

.t6.il .t6a .info,
.t6.it .t6a .info {
  gap: var(--MainGap);
}
.t6.il .t6a,
.t6.it .t6a {
  /* у вариантов с иконкой номер заменяется svg-иконкой */
}
.t6.il .t6a:before,
.t6.it .t6a:before {
  content: "";
  display: block;
  background: var(--BG) center top/cover no-repeat;
  width: var(--BlockIconWidth);
  height: var(--BlockIconWidth);
  border-radius: 0;
  line-height: normal;
  transform: none;
  padding-top: var(--ContentShortGap);
}
.t6.il .t6a:hover:before,
.t6.it .t6a:hover:before {
  animation: none;
  transform: none;
}

/* 7a — рамочная группа показателей, 7aa — показатель */
.t7a {
  display: flex;
  flex-direction: column;
  gap: var(--Gap);
  border-radius: var(--CardRadius);
  background: var(--CardFill);
  padding: var(--MainBlockPadding);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InPLine) - 1)) / var(--InPLine));
  width: calc((100% - var(--MainGap) * (var(--InPLine) - 1)) / var(--InPLine));
}

.t7aa {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--ContentShortGap);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  text-align: center;
}
.t7aa:before {
  content: "";
  display: block;
  width: var(--BlockIconWidth);
  height: var(--BlockIconWidth);
  background: var(--BG) center center/contain no-repeat;
}
.t7aa {
  /* значение показателя — акцентный цвет конструктора */
}
.t7aa .title {
  color: var(--Color2);
  font-weight: 600;
}

.t8 .items .s.t1 {
  background: none;
}

.t9 {
  border-radius: var(--CardRadius);
  padding: var(--MainBlockPadding);
  background: var(--CardFill);
}
.t9 .info {
  padding: 0;
}
.t9 > .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--MainGap);
  flex: 0 0 calc((100% - var(--MainGap)) / 2);
}

/* ============================================================
   Типы 10, 12 — изображения
   (10 — скриншот интерфейса, 12 — лента скриншотов)
   ============================================================ */
.t10,
.t13a {
  text-align: center;
  overflow: hidden;
}
.t10 img,
.t13a img {
  border-radius: var(--MainBorderRadius);
}

.t12 {
  display: flex;
  gap: var(--MainGap);
  overflow: auto;
  scroll-snap-type: both mandatory;
  -webkit-overflow-scrolling: touch;
}

.t12a {
  cursor: pointer;
}
.t12a span {
  display: block;
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
}
.t12a {
  /* ссылка на большую версию (клик перехватывается в попап-галерею gvp) */
}
.t12a a {
  display: block;
}
.t12a img {
  max-width: none;
  transition: transform 0.3s ease;
}
.t12a:hover img {
  transform: scale(1.03);
}

/* 13a — шаг запуска: большая иконка + текст */
.t13a {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  border-radius: var(--CardRadius);
  padding: var(--MainBlockPadding);
  background: var(--CardFill);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t13a:before {
  content: "";
  display: block;
  flex: 0 0 var(--BigIconWidth);
  background: var(--BG) center bottom/contain no-repeat;
}
.t13a:hover {
  transform: translateY(calc(0px - var(--3)));
  box-shadow: 0 var(--10) var(--30) rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Тип 14 — «Знакомьтесь: Pixeo» (боковой заголовок + текст)
   ============================================================ */
.t14 {
  display: flex;
  gap: var(--MainGap);
}
.t14 > .up {
  flex: 0 0 min(var(--SideTitleWidth), 40%);
}
.t14 .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

/* ============================================================
   Тип 15 — FAQ-аккордеон («Частые вопросы»)
   15a.current — раскрытый ответ; индикатор-стрелка на заголовке
   ============================================================ */
.t15 .items {
  display: flex;
  flex-direction: column;
}

.t15a {
  border-bottom: var(--DividerWidth) solid var(--DividerColor);
}
.t15a > .title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--MainGap);
}
.t15a > .title:after {
  content: "expand_more";
  font-family: var(--MaterialIcons), ui-serif;
  font-size: var(--MainHeaderFontSize);
  color: var(--Color2);
  transition: transform 0.25s ease;
}
.t15a .description {
  display: none;
  padding-bottom: var(--ButtonPaddingTB);
}
.t15a.current > .title:after {
  transform: rotate(180deg);
}
.t15a.current .description {
  display: block;
  animation: SlideInfoIn 0.3s ease both;
}

/* Reduce Motion: появление текста hero построено на анимациях
   (opacity:0 + animation … forwards). Если анимации не запускаются —
   системный Reduce Motion и/или обвязка вида
   @media (prefers-reduced-motion: reduce){*{animation:none!important}}
   (типовой kill-switch в шаблонах, в т.ч. Figma Make) — контент
   навсегда остаётся прозрачным. Здесь принудительно показываем. */
@media (prefers-reduced-motion: reduce) {
  .t0a .body,
  .t0a .body:before,
  .t0a .body:after,
  .t0a .info .description p {
    animation: none;
    opacity: 1;
  }
  .t0a.current .info,
  .t15a.current .description {
    animation: none;
  }
}
/* ============================================================
   Тип 16 — контакты / карта / форма (бывший 22, объединивший 22/23/24,
   Section_Join.md гр. D). Варианты: mr — карта справа,
   mt — карта сверху, f — форма,
   dark — тёмная full-bleed полоса.
   Контент обёрнут в .body (держит ширину при dark)
   ============================================================ */
.t16 .body {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

/* тёмная полоса — порт «НАЧНЁМ ИСТОРИЮ» с pixio.kz */
.t16.dark {
  background: var(--Color1);
  padding: var(--128) var(--SidePadding);
  color: var(--Color3);
}
.t16.dark a {
  color: var(--Color3);
}
.t16.dark .body {
  max-width: var(--1280);
  margin: 0 auto;
  gap: var(--48);
}
.t16.dark h2.title {
  color: var(--Color3);
  font-size: var(--72);
  line-height: 1.05;
}
.t16.dark .description {
  color: var(--Gray3);
  font-weight: 300;
  line-height: 1.625;
}
.t16.dark .line {
  gap: var(--80);
}

.t16 .line {
  display: flex;
  gap: var(--MainGap);
}
.t16 .line .content {
  display: flex;
  flex: 0 0 min(var(--SideTitleWidth), 40%);
  flex-direction: column;
  gap: var(--24);
}

/* карта справа (вариант mr) */
.t16.mr .line .map {
  flex: 1;
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
}

/* карта сверху (вариант mt) — flex-basis в колонке задаёт высоту */
.t16.mt .body > .map {
  flex: 0 0 min(var(--600), 45%);
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
}

/* 16a — строка контакта: Material-иконка в цветном кружке
   (фирменные цвета чередуются, как контакты на pixio.kz) */
.t16a {
  --BGC:var(--Color2);
  display: flex;
  gap: var(--16);
  align-items: center;
}
.t16a:nth-child(3n+2) {
  --BGC:var(--Color6);
}
.t16a:nth-child(3n) {
  --BGC:#25D366;
}
.t16a:before {
  content: var(--Bfr);
  display: block;
  flex: 0 0 var(--48);
  width: var(--48);
  height: var(--48);
  line-height: var(--48);
  text-align: center;
  border-radius: 50%;
  background: var(--BGC);
  color: var(--Color3);
  font-family: var(--MaterialIcons), ui-serif;
  font-size: var(--24);
}
.t16a .description {
  font-weight: 500;
}

.t16.dark .t16a .description {
  color: var(--Color3);
}
.t16.dark .t16a .description a {
  color: var(--Color3);
}

.icon-marker {
  cursor: pointer;
  width: 39px;
  height: 39px;
  position: relative;
  transform: translate(-50%, -50%);
  max-width: none;
  filter: drop-shadow(0 0 var(--10) var(--Color2));
}

/* форма заявки (вариант f); без варианта блок .form скрыт */
.t16 .form,
.t16 .form form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--24);
}

.t16 .form {
  padding: var(--32);
  background: var(--CardFill);
  border-radius: var(--CardRadius);
}

.t16:not(.f) .form {
  display: none;
}

/* поле формы: mono-подпись + поле «в линию» */
.t16b {
  display: flex;
  flex-direction: column;
  gap: var(--8);
}
.t16b > label {
  cursor: pointer;
  text-transform: var(--LabelTransform);
  color: var(--Gray5);
  letter-spacing: var(--LabelTracking);
  font-size: var(--14);
  font-family: var(--LabelFont);
}

/* тёмный вариант формы — стеклянная карточка pixio.kz */
.t16.dark .form {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: var(--1) solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
}
.t16.dark .form h3.title {
  font-weight: 900;
  font-size: var(--24);
  line-height: 1.33;
  color: var(--Color3);
}
.t16.dark .form .t16b > label {
  color: var(--Gray4);
}
.t16.dark .form .text {
  color: var(--Color3);
  padding: var(--12) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: var(--2) solid rgba(255, 255, 255, 0.3);
  font-size: var(--16);
  line-height: normal;
  transition: border-color 0.15s ease;
}
.t16.dark .form .text:focus {
  border-bottom-color: var(--Color6);
  outline: none;
}
.t16.dark .form .text::placeholder {
  color: var(--Gray5);
}
.t16.dark .form .btn {
  background: var(--Gradient);
  border: 0;
  margin-top: var(--16);
  text-align: center;
  color: var(--Color3);
  letter-spacing: 0.1em;
  font-weight: 900;
  font-family: var(--MainFont);
  font-size: var(--18);
  line-height: 1.55;
  padding: var(--16) 0;
  width: 100%;
}

/* ============================================================
   Тип 17 — «Команда Pixeo» (карусель с круглыми фото)
   ============================================================ */
.t17 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
.t17 .container {
  display: flex;
  gap: var(--Gap);
  overflow: auto;
}

.t17a {
  flex: 0 0 calc((100% - var(--Gap) * (var(--InLine) - 1)) / var(--InLine));
  padding-top: var(--MainPadding);
  text-align: center;
  position: relative;
}
.t17a:before {
  content: "";
  display: block;
  width: var(--PhotoSize);
  height: var(--PhotoSize);
  border-radius: var(--HalfBorderRadius);
  background: var(--BG) center center/cover no-repeat;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 var(--3) var(--Color3), 0 0 0 var(--5) var(--Color2);
}
.t17a .info {
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
  padding: var(--MainPadding) var(--MainBlockPadding) var(--MainBlockPadding);
  background: var(--CardFill);
  border-radius: var(--CardRadius);
}
.t17a .info .title.s {
  color: var(--Color4, );
  font-size: var(--22);
  line-height: var(--30);
}

/* ============================================================
   Тип 18 — «Pixeo в цифрах» (тёмная полоса счётчиков)
   ============================================================ */
.t18 {
  background: var(--Color1);
  padding: var(--MainPadding);
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  color: var(--Color3);
  text-align: center;
}
.t18 h2.title {
  color: var(--Color3);
}
.t18 .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--MainGap) var(--MainPadding);
  justify-content: center;
}
.t18 .description {
  color: var(--Gray4);
}

.t18a {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  /* счётчики — градиентные цифры, как цена на pixio.kz */
}
.t18a .title {
  font-size: var(--96);
  font-weight: 900;
  background: var(--Gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.t18a {
  /* подпись — mono uppercase, как лейблы на pixio.kz */
}
.t18a .description {
  font-family: var(--LabelFont);
  font-size: var(--14);
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
}

/* ============================================================
   Тип 19 — CTA «Готовы попробовать?» (центрированный блок)
   ============================================================ */
/* CTA-блок: компактная карточка с градиентной рамкой
   (как «3 дня до запуска» на pixio.kz) */
.t19 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--MainPadding) var(--SidePadding);
}
.t19 .info {
  background: var(--Color3);
  border: var(--3) solid;
  border-image: var(--Gradient) 1;
  padding: var(--36) var(--52);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--10);
  text-align: center;
  max-width: 100%;
}
.t19 .info h2.title {
  font-size: var(--30);
  padding-bottom: 0;
}
.t19 .info h2.title:after {
  content: none;
}
.t19 .info .description {
  text-transform: var(--LabelTransform);
  letter-spacing: var(--LabelTracking);
  font-family: var(--LabelFont);
  font-size: var(--14);
  color: var(--Gray5);
  /* акцентная строка (цена) — градиентным текстом */
}
.t19 .info .description strong,
.t19 .info .description b {
  display: block;
  font-family: var(--MainFont);
  font-weight: 900;
  font-size: var(--36);
  line-height: 1.2;
  letter-spacing: 0;
  background: var(--GradientR);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ============================================================
   Тип 20 — «Нам доверяют» (карусель логотипов:
   ч/б по умолчанию, цвет — при наведении)
   ============================================================ */
.t20 {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
.t20 .container {
  display: flex;
  gap: var(--MainGap);
  align-items: center;
  overflow: auto;
}

.t20a {
  flex: 0 0 var(--195);
}
.t20a a {
  display: block;
}
.t20a img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.t20a:hover img {
  filter: none;
  opacity: 1;
}

/* ============================================================
   Тип 21 — отзывы о конструкторе (бывший 29, объединивший 29/30,
   Section_Join.md гр. E). Вариант dark — тёмная full-bleed полоса.
   Контент всегда в .body (держит ширину при dark)
   ============================================================ */
.t21 .body {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  text-align: center;
}

.t21.dark {
  color: var(--Color3);
  background: var(--Color1);
  padding: var(--MainPadding);
}
.t21.dark h2.title {
  color: var(--Color3);
}
.t21.dark .description {
  color: var(--Gray3);
}

.t21 .container {
  display: flex;
  gap: var(--MainGap);
  overflow: hidden;
  scroll-behavior: smooth;
}

.t21 .bullets {
  display: flex;
  justify-content: center;
  gap: var(--ContentShortGap);
  align-items: center;
}
.t21 .bullets .item {
  display: inline-block;
  border-radius: var(--MainBorderRadius);
  background: var(--Color4);
  width: var(--MainBorderRadius);
  height: var(--MainBorderRadius);
  transition: all 0.3s linear;
}
.t21 .bullets .item:hover, .t21 .bullets .item.current {
  background: var(--Color2);
}

.t21.dark .bullets .item {
  background: var(--Color3);
}
.t21.dark .bullets .item:hover, .t21.dark .bullets .item.current {
  background: var(--Color4);
  width: var(--ButtonPaddingTB);
  height: var(--ButtonPaddingTB);
}

.t21a {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  flex: 0 0 100%;
}
.t21a .info {
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
}

/* ============================================================
   Тип 22 — «Pixeo изнутри» (галерея скриншотов с попапом)
   ============================================================ */
.t22 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  text-align: center;
}
.t22 .items {
  --Gap:0px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--Gap);
}

.t22a {
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  overflow: hidden;
}
.t22a a {
  display: block;
}
.t22a img {
  width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.t22a:hover img {
  transform: scale(1.04);
  opacity: 0.92;
}

/* ============================================================
   Тип 23 — «Тарифы Pixeo» (прайс-лист в N колонок)
   23a — категория, 23aa — подкатегория, 23aaa — позиция с ценой
   ============================================================ */
.t23 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
.t23 .items {
  columns: var(--InLine);
  column-gap: var(--MainGap);
}

.t23a {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}
.t23a + .t23a {
  margin-top: var(--MainGap);
}

.t23a .items,
.t23aa .items {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

.t23aa {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

.t23aaa {
  display: flex;
  gap: var(--MoreGap);
  break-inside: avoid;
}
.t23aaa .description {
  flex: 1;
  hyphens: auto;
  order: 1;
}
.t23aaa .description + .description {
  flex: none;
  white-space: nowrap;
  order: 3;
  color: var(--Color2);
  font-weight: 600;
}
.t23aaa {
  /* пунктирная подводка между позицией и ценой */
}
.t23aaa:after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  border-bottom: 1px dashed var(--Color4);
  transform: translateY(calc(0px - var(--5)));
  align-self: flex-end;
}

/* ===================================================================
   MOBILE — слито из mobile.scss (раньше отдельный файл с media-атрибутом
   <=1024px). Содержимое уже обёрнуто в @media (max-width:1024px).
   С 19.06.2026 — часть единого main.scss.
   =================================================================== */
/*
   Мобильная/узкая вёрстка: чистая CSS-адаптация по ширине viewport,
   без UA-определения и JS. Грузится всем, активна только в media query.
*/
@media (max-width: 1024px) {
  html {
    touch-action: manipulation;
  }
  body.menu {
    overflow: hidden;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  :root {
    /* на узких экранах размеры 1:1 в px, без масштабирования от 1760 */
    --Unit: 1px;
    --MainCoef: 1;
    --MainGap: var(--15);
    --MainBlockPadding: var(--20);
    --SidePadding: var(--16);
    --ImageHeight: var(--250);
    --ButtonPaddingTB: var(--10);
    --ButtonPaddingLR: var(--15);
    --MainHeaderFontSize: var(--30);
  }
  .btn {
    font-size: var(--16);
    line-height: normal;
  }
  input.text,
  select.text,
  textarea.text {
    font-size: var(--16);
    line-height: normal;
  }
  .type1 .body,
  .type4 .items,
  .type5,
  .type6,
  .type7,
  .type8,
  .type9,
  .type9.a,
  .type10 .items,
  .type11 .items,
  .type11a,
  .type12 .items,
  .type13 .items,
  .type15,
  .type15a,
  .type19 .items,
  .type20,
  .type22 .line,
  .type23 .line,
  .type24 .line,
  .type26 .items,
  footer.footer {
    flex-direction: column;
    flex-wrap: initial;
  }
  .h1, h1.title,
  .h2, h2.title,
  .h3, h3.title {
    font-size: var(--30);
    line-height: normal;
    hyphens: auto;
  }
  .h3,
  h3.title {
    font-size: var(--20);
  }
  .description,
  .type33aaa:before {
    font-size: var(--16);
    line-height: normal;
  }
  .t2a .title {
    font-size: var(--20);
    line-height: normal;
  }
  .more {
    font-size: var(--14);
  }
  .type1 .body:before,
  .type9:before {
    flex: 0 0 var(--ImageHeight);
  }
  .type1 .body .info,
  .type9 .info,
  .type15 .info {
    padding: 0 var(--MainBlockPadding) var(--MainBlockPadding);
  }
  .type2 h2.title,
  .type4 h2.title,
  .type10 h2.title,
  .type11 h2.title,
  .type12 h2.title,
  .type14,
  .type15 > .items,
  .type17,
  .type19 h2.title,
  .type20,
  .type21,
  .type22 h2.title,
  .type22 .line .content,
  .type24 h2.title,
  .type24 .line,
  .type25 h2.title,
  .type25 .container,
  .type28 h2.title,
  .type28 .container,
  .type29,
  .type31 h2.title,
  .type31 .description,
  #gvp .popup .info-block,
  .type33 {
    padding: 0 var(--MainBlockPadding);
  }
  .type15 > .items,
  #gvp .popup .info-block {
    padding-bottom: var(--MainBlockPadding);
  }
  .type5,
  .type6,
  .type7,
  .type8 {
    padding: 0;
    display: flex;
    background: var(--Color1);
  }
  .type5:before,
  .type6:before,
  .type7:before,
  .type8:before {
    content: "";
    background: var(--BG) right center/cover no-repeat;
    flex: 0 0 var(--ImageHeight);
  }
  .type5 .info,
  .type6 .info,
  .type7 .info,
  .type8 .info,
  .type23 .body,
  .type26,
  .type27,
  .type27 .info,
  .type30 {
    padding: var(--MainBlockPadding);
  }
  .type15,
  .type23,
  #gvp .popup {
    padding: 0;
  }
  .type22 .line .map,
  .type24 .map {
    flex: 0 0 var(--ImageHeight);
  }
  #gvp .popup {
    flex-direction: column;
  }
  #gvp .popup .info-block {
    flex: none;
  }
  #gvp .popup .photo {
    position: relative;
  }
  #gvp .popup .photo > .arrow {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
  }
  #gvp .popup .photo > .arrow.right {
    left: auto;
    right: 0;
  }
  #gvp .popup .photo > .arrow .arrow {
    background-color: rgba(255, 255, 255, 0.75);
  }
  header.header {
    /* на узких экранах шапка обычная, в потоке, на чёрном фоне */
    position: relative;
    mix-blend-mode: normal;
    background: var(--Color1);
    padding: var(--15) var(--SidePadding);
  }
  header.header .logo .pixio {
    font-size: var(--22);
  }
  header.header .contacts a {
    width: var(--40);
    height: var(--40);
  }
  header.header .contacts a:before {
    width: var(--18);
    height: var(--18);
  }
  header.header .logo {
    flex: none;
  }
  header.header .m {
    display: block;
    flex: 0 0 var(--20);
  }
  header.header .m .mb {
    display: block;
    width: var(--20);
    height: var(--20);
    position: relative;
  }
  header.header .m .mb:before {
    content: "";
    display: block;
    position: absolute;
    top: var(--3);
    height: var(--14);
    width: var(--14);
    left: var(--3);
    border-top: 2px solid var(--Color3);
    border-bottom: 2px solid var(--Color3);
    transition: all 0.3s linear;
  }
  header.header .m .mb:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: var(--3);
    height: 2px;
    width: var(--14);
    background: var(--Color3);
    transform: translateY(-50%);
    transition: all 0.3s linear;
  }
  header.header .menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    transition: all 0.3s linear;
    flex-direction: column;
    padding: var(--Type3Padding) var(--BlockIconWidth);
    gap: var(--MainBlockPadding);
  }
  header.header .menu a {
    font-size: var(--16);
  }
  header.header .menu {
    /* подменю страниц в оверлее раскрыто всегда: без дропдауна и шеврона */
  }
  header.header .menu .sub > a:after {
    display: none;
  }
  header.header .menu .sub menu {
    position: static;
    margin: 0;
    padding: var(--12) 0 0 var(--16);
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: var(--12);
  }
  .menu header.header .logo {
    z-index: 6;
    position: relative;
  }
  .menu header.header .m {
    z-index: 5;
  }
  .menu header.header .m .mb:before {
    height: 0;
    border-top-width: var(--1);
    border-bottom-width: var(--1);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .menu header.header .m .mb:after {
    transform: translateY(-50%) rotate(-45deg);
  }
  .menu header.header .menu {
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
  }
  .popupBox .popup > a.close {
    right: 0;
    top: 0;
    z-index: 2;
  }
  .popupBox#requestPopup .popup {
    flex: 0 0 100%;
  }
  .type0 .arrows {
    right: var(--15);
    bottom: var(--15);
  }
  .type0 .arrows .arrow {
    width: var(--30);
    height: var(--30);
  }
  .type0 .type0a {
    padding: var(--MainBlockPadding);
  }
  .type0 .type0a .info {
    --HeaderSliderMinWidth: 100%;
    --HeaderSliderMaxWidth: 100%;
  }
  .type2 .items {
    flex-direction: column;
  }
  .type3 {
    padding: var(--MainBlockPadding);
    background: none;
    position: relative;
  }
  .type3:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--BG);
    z-index: -1;
    opacity: 0.25;
  }
  .type4a {
    flex: none;
  }
  .type4a .info {
    flex: none;
  }
  .type6:before,
  .type8:before {
    background-position: left center;
  }
  .type7,
  .type8 {
    background: var(--Color3);
  }
  .type9 .info {
    padding-bottom: 0;
  }
  .type13aa {
    flex: 0 0 calc((100% - var(--MainGap)) / 2);
  }
  .type15 {
    flex-direction: column-reverse;
  }
  .type15 .info {
    padding: var(--MainBlockPadding);
  }
  .type18a {
    flex: 0 0 80%;
  }
  .type18a img {
    max-width: 100%;
  }
  .type20 > .up {
    flex: none;
  }
  .type22 .line .content,
  .type23 .line .content,
  .type24 .line .content {
    flex: none;
  }
  .type25a {
    flex: 0 0 80%;
  }
  .type26 .items {
    gap: var(--MainGap);
  }
  .type28a {
    flex: none;
    max-width: 70%;
  }
  .type29 .bullets,
  .type30 .bullets {
    flex-wrap: wrap;
  }
  .type31a {
    flex: 0 0 50%;
  }
  .type33 .items {
    column-count: 1;
  }
  /* --- Секции в стилистике pixio.kz на узких экранах ---------- */
  .t0 {
    min-height: 100svh;
  }
  .t0a:before, .t0a:after {
    display: none;
  }
  .t0a .info .title {
    font-size: var(--40);
  }
  .t0a .info .description, .t21a > .title {
    padding: 0;
    font-size: var(--18);
  }
  .t0a .info .description p.price, .t21a > .title p.price {
    font-size: var(--48);
  }
  /* сетки — в одну колонку */
  .t2 .items,
  .t6 .items {
    --InLine: 1;
  }
  .t2 h2.title,
  .t6 h2.title {
    font-size: var(--30);
  }
  /* соединительные линии между карточками не нужны в колонке */
  .t6a:after {
    content: none !important;
  }
  .t14 {
    flex-direction: column;
  }
  .t14 > .up {
    flex: none;
  }
  .t16.dark {
    padding: var(--64) var(--SidePadding);
  }
  .t16.dark h2.title {
    font-size: var(--36);
  }
  .t16 .line {
    flex-direction: column;
    gap: var(--32);
  }
  .t16 .line .content {
    flex: none;
  }
  .t18 .items {
    gap: var(--24);
  }
  .t18a .title {
    font-size: var(--60);
  }
}
/* конец @media (max-width: 1024px) */

/* ===== themes.css (пресеты-«характеры»: body.theme-soft / theme-brutal) ===== */
/* ============================================================
   Темы Pixeo — курируемые наборы «характера» облика.

   Тема = класс body.theme-* , переопределяющий РОЛЕВЫЕ токены из
   variables.scss (см. их блок «Ролевые токены ТЕМЫ»). HTML секций
   и геометрия макета не меняются — только характер: вес/регистр
   заголовков, наличие градиентной линии, фактура карточек, лейблы,
   плотность, трактовка акцента.

   Правило §0.2: только нативный CSS (css-переменные + селекторы).
   Никаких sass-переменных/миксинов — файл грузится в браузер сырым.

   Дефолт (без класса) = theme-pixeo, ничего не переопределяет.
   Карта токенов и обоснование — proj/Theme_Variants_Audit.md.
   ============================================================ */
/* ── theme-soft — редакционный/спокойный ─────────────────────
   Заголовки обычного веса без uppercase и без градиентной линии;
   лейблы основным шрифтом; карточки мягко скруглены с лёгкой тенью;
   кнопки скруглённые; акцент плоский (градиент схлопнут в цвет);
   больше воздуха. */
body.theme-soft {
  --HeadingWeight:600;
  --HeadingTransform:none;
  --HeadingTracking:-0.02em;
  --HeadingLine:none;
  --H3Weight:600;
  --HeroWeight:700;
  --HeroTransform:none;
  --LabelFont:var(--MainFont);
  --LabelTransform:none;
  --LabelTracking:0;
  --CardRadius:var(--24);
  --CardRadiusLg:var(--32);
  --CardSharpRadius:var(--24);
  --CardShadow:0 var(--4) var(--12) rgba(0,0,0,.06);
  --CardBorderWidth:var(--1);
  --ButtonsBorderRadius:var(--50);
  --ButtonTransform:none;
  --ButtonFont:var(--MainFont);
  /* плоский акцент: линии/цифры/рамки одноцветные */
  --Gradient:var(--Color2);
  --GradientR:var(--Color2);
  /* больше воздуха */
  --MainGap:var(--40);
  --MainPadding:var(--128);
}

/* ── theme-brutal — строгий/контрастный ──────────────────────
   Максимально жирно, плотно, прямоугольно; без скруглений, теней
   и градиентных линий; «живость» карточек приглушена. */
body.theme-brutal {
  --HeadingWeight:900;
  --HeadingTracking:-0.03em;
  --HeadingLine:none;
  --HeroWeight:900;
  --CardRadius:0;
  --CardRadiusLg:0;
  --CardSharpRadius:0;
  --BadgeRadius:0;
  --CardShadow:none;
  --CardBorderWidth:var(--3);
  --CardFill:var(--Color3);
  --ButtonBorderWidth:var(--3);
  --MainGap:var(--16);
}

/* движение нельзя вынести в токен (значение transform) — глушим
   hover-подъём карточек классом темы; hero-анимации не трогаем
   (у них своя reduce-motion-страховка в main.scss) */
body.theme-brutal .t2a:hover,
body.theme-brutal .t3a:hover,
body.theme-brutal .t6a:hover,
body.theme-brutal .t13a:hover {
  transform: none;
}

body.theme-brutal .t6a:hover:before {
  animation: none;
  transform: rotateZ(6deg);
}

/* ── Make kit overrides ────────────────────────────────────────
   Приклеивается build.sh в КОНЕЦ styles.css. Два фикса:

   1) Tailwind Фигмы содержит утилиту `.container` (max-width по
      брейкпоинтам), которая коллидирует с нашим структурным классом
      .container (t0/t17/t20/t21) и схлопывает контейнеры в 0.
      Нейтрализуем (найдено 07.06.2026, держать всегда).

   2) Въездные анимации hero отключены: контент обязан быть видимым
      независимо от поддержки анимаций; Make может добавить свои.
      (На боевом сайте анимации остаются — style/sections.scss.) */

.s .container,
#mb .container {
  max-width: none !important;
}

.t0a .body,
.t0a .body:before,
.t0a .body:after,
.t0a .info .HeaderSliderDescription p {
  opacity: 1;
  animation: none;
}
.t0a.current .info {
  animation: none;
}

/* PIXEO-STYLES-END — if you can read this comment at the end of the file, the stylesheet arrived complete. */

/* ===================================================================
   MASTER DOM — bespoke layer (master-dom, #122)
   friendly-service / «домашняя диспетчерская», Алматы
   Палитра: тёплый белый #F8F6F2 (60) · деним #1F3A5F (30) · оранж #FF8A00 (10)
   Шрифты: Rubik (дисплей) + Onest (текст), кириллица, self-hosted woff2
   Ведущий Ч7-эффект: #4 посекционная смена темы (утро-крем → день → вечер-деним)
   Фишка: «техника жалуется» — речевые пузыри от рисованных машин → визард
   Плоские кит-селекторы, НИКАКИХ .slug-скоупов.
   =================================================================== */

/* ---------- Шрифты (self-hosted) ---------- */
@font-face{ font-family:'Rubik'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/rubik-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Rubik'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/rubik-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/rubik-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/rubik-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Rubik'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/rubik-cyrillic-800-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Rubik'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/rubik-latin-800-normal.woff2') format('woff2'); }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/onest-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/onest-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/onest-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/onest-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/onest-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/onest-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/onest-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/onest-latin-700-normal.woff2') format('woff2'); }

/* ---------- Токены ---------- */
:root{
  /* бренд */
  --MdCream:#F8F6F2;         /* тёплый белый, утро */
  --MdCream2:#F1EBDF;        /* крем глубже (карточки на креме) */
  --MdDay:#FFFFFF;           /* день */
  --MdDenim:#1F3A5F;         /* деним-синий */
  --MdDenimDeep:#152A46;     /* деним глубокий (вечер/контакты) */
  --MdDenimSoft:#2A4A74;     /* карточки на дениме */
  --MdOrange:#FF8A00;        /* оранж-сервис */
  --MdOrangeDeep:#E67300;
  --MdInk:#22314A;           /* основной текст */
  --MdMuted:#5A6A85;         /* приглушённый текст */
  --MdLine:rgba(31,58,95,.14);
  --MdLineOnDark:rgba(248,246,242,.16);
  --MdCreamOnDark:rgba(248,246,242,.78);
  /* кривые движения */
  --EaseOut:cubic-bezier(.16,1,.3,1);
  --EaseUI:cubic-bezier(.4,0,.2,1);
  /* доп. размеры */
  --7:calc(7*var(--Unit));
  --11:calc(11*var(--Unit));
  --13:calc(13*var(--Unit));
  --17:calc(17*var(--Unit));
  --21:calc(21*var(--Unit));
  --28:calc(28*var(--Unit));
  --34:calc(34*var(--Unit));
  --38:calc(38*var(--Unit));
  --54:calc(54*var(--Unit));
  --56:calc(56*var(--Unit));
  --68:calc(68*var(--Unit));
  --90:calc(90*var(--Unit));
  --110:calc(110*var(--Unit));
  --120:calc(120*var(--Unit));
  --140:calc(140*var(--Unit));
  --160:calc(160*var(--Unit));
  --200:calc(200*var(--Unit));
  --260:calc(260*var(--Unit));
  --320:calc(320*var(--Unit));
  --360:calc(360*var(--Unit));
  --420:calc(420*var(--Unit));
  --480:calc(480*var(--Unit));
  --640:calc(640*var(--Unit));
  /* кит-роли под бренд */
  --MainFont:'Onest', system-ui, sans-serif;
  --DisplayFont:'Rubik', system-ui, sans-serif;
  --LabelFont:'Onest', system-ui, sans-serif;
  --MonoFont:'Onest', system-ui, sans-serif;
  --Color1:var(--MdDenim);
  --Color2:var(--MdOrange);
  --Color6:var(--MdDenim);
  --Color3:#FFFFFF;
  --Color4:#B9C3D4;
  --Gray7:var(--MdInk);
  --Gray5:var(--MdMuted);
  --Gray4:#8D9AB0;
  --Gray3:#DCE2EC;
  --MainFrameBg:#FFFFFF;
  --GradFrom:var(--MdOrange);
  --GradTo:var(--MdOrange);
  --Gradient:linear-gradient(90deg,#FF8A00,#FF8A00);
  --GradientR:linear-gradient(90deg,#FF8A00,#FF8A00);
  --BorderColor:var(--MdLine);
  /* характер: без капса, спокойные кегли, мягкая геометрия */
  --HeadingWeight:700;
  --HeadingTracking:-0.015em;
  --HeadingTransform:none;
  --HeadingLine:none;
  --H3Weight:700;
  --HeroSize:var(--56);
  --HeroWeight:800;
  --HeroTransform:none;
  --SectionHeadSize:var(--38);
  --LabelTransform:none;
  --LabelTracking:0;
  --MainHeaderFontSize:var(--28);
  /* геометрия: домашние скругления */
  --MainBorderRadius:var(--16);
  --CardRadius:var(--22);
  --CardRadiusLg:var(--24);
  --CardSharpRadius:var(--22);
  --CardFill:#FFFFFF;
  --CardShadow:0 var(--18) var(--40) rgba(31,58,95,.08);
  --CardBorderWidth:var(--1);
  --CardAccentBorder:0;
  --BadgeRadius:var(--14);
  --DividerColor:var(--MdLineOnDark);
  --ButtonsBorderRadius:999px;
  --ButtonTransform:none;
  --ButtonFont:'Onest', system-ui, sans-serif;
  --ButtonBorderWidth:var(--1);
  /* плотность: центр-колонка 1280, деловой-домашний ритм */
  --Body:var(--1280);
  --SidePadding:var(--80);
  --MainContentGap:var(--90);
  --MainPadding:var(--80);
  --MainGap:var(--24);
  --Gap:var(--24);
  /* стрелки и карта */
  --ArrowImageURL:url('../images/arrow.svg');
  --ArrowHoverImageURL:url('../images/arrow-h.svg');
}

/* ---------- Каркас: сцена дня (Ч7 #4 — посекционная смена темы) ---------- */
body:not([data-language]){
  background-color:var(--MdCream);
  /* фактура «тёплый текстиль-горошек» — ведущая фактура сайта */
  background-image:radial-gradient(circle, rgba(31,58,95,.055) calc(1.2*var(--Unit)), transparent calc(1.6*var(--Unit)));
  background-size:var(--26) var(--26);
  transition:background-color .8s var(--EaseUI);
  overflow-x:clip;
  color:var(--MdInk);
}
body.md-day:not([data-language]){ background-color:var(--MdDay); }
body.md-eve:not([data-language]){ background-color:var(--MdDenimDeep); }

#mb{ overflow-x:clip; }
#mb > .s.body{ margin:0 auto; }
.body{ width:var(--Body); max-width:calc(100% - 2*var(--SidePadding)); }
#mb > .s.t0, footer.footer{ max-width:none; }

/* типографика: заголовки — Rubik (детям тоже, кит-универсал перебивает) */
h1,h2,h3,h4,h5,.h1,.h2,.h3,
h1.title,h2.title,h3.title,
h1 span,h2 span,h3 span,
h2.title span,h1.title span{
  font-family:var(--DisplayFont), system-ui, sans-serif;
}
.h2, h2.title{ padding-bottom:0; }
.h2 span, h2.title span{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--MdOrange);
}
.description{ font-size:var(--18); line-height:1.65; }
.description.annotation{ font-size:var(--15); letter-spacing:0; text-transform:none; color:var(--MdMuted); }

/* кнопки: пилюли диспетчерской */
.btn{
  font-weight:600; font-size:var(--16); line-height:1.4;
  padding:var(--14) var(--30);
  border:var(--1) solid rgba(31,58,95,.32);
  border-radius:999px;
  transition:transform .25s var(--EaseUI), background-color .25s var(--EaseUI), color .25s var(--EaseUI), border-color .25s var(--EaseUI), box-shadow .25s var(--EaseUI);
}
.btn:hover{ transform:translateY(calc(0px - var(--2))); background:rgba(31,58,95,.06); }
.btn.cl{
  background:var(--MdOrange); color:#fff;
  font-family:var(--MainFont); font-weight:700; letter-spacing:0;
  font-size:var(--17); padding:var(--16) var(--36);
  box-shadow:0 var(--14) var(--30) rgba(255,138,0,.35);
}
.btn.cl:hover{ background:#F07E00; box-shadow:0 var(--8) var(--18) rgba(255,138,0,.4); }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:calc(2*var(--Unit)) solid var(--MdOrange); outline-offset:calc(2*var(--Unit));
}
.more{
  color:var(--MdOrange); font-weight:600; font-size:var(--15);
  letter-spacing:0; text-transform:none; padding-bottom:var(--4);
}
.more:before{ background:var(--MdOrange); }
.more:after{ content:"→"; font-family:var(--MainFont); }

/* ---------- Шапка: светлая диспетчерская планка ---------- */
header.header{
  mix-blend-mode:normal;
  padding:var(--16) var(--32);
  transition:background-color .5s var(--EaseUI), box-shadow .5s var(--EaseUI);
  background:linear-gradient(180deg, rgba(248,246,242,.92), rgba(248,246,242,0));
}
body.md-eve header.header{ background:linear-gradient(180deg, rgba(21,42,70,.94), rgba(21,42,70,0)); }
header.header .logo{ flex-direction:row; align-items:center; gap:var(--12); }
header.header .logo img{ width:var(--44); height:var(--44); display:block; }
header.header .logo .md-lgtx{ display:flex; flex-direction:column; gap:var(--2); }
header.header .logo .pixio{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--21); letter-spacing:0; text-transform:none; font-weight:800;
  color:var(--MdDenim); transition:color .5s var(--EaseUI);
}
header.header .logo .label{
  font-family:var(--MainFont); font-size:var(--12);
  color:var(--MdMuted); transition:color .5s var(--EaseUI);
}
body.md-eve header.header .logo .pixio{ color:#fff; }
body.md-eve header.header .logo .label{ color:var(--MdCreamOnDark); }
header.header .menu a{
  font-family:var(--MainFont); font-size:var(--15); font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--MdDenim);
  padding:var(--6) var(--2); transition:color .3s var(--EaseUI);
}
header.header .menu a:hover{ color:var(--MdOrange); }
body.md-eve header.header .menu a{ color:var(--MdCreamOnDark); }
body.md-eve header.header .menu a:hover{ color:var(--MdOrange); }
header.header .menu .current > a{ background:none; padding-bottom:var(--6); box-shadow:inset 0 calc(0px - var(--2)) 0 var(--MdOrange); }
/* контакты: скруглённый квадрат + иконка маской (перекрашивается темой) */
header.header .contacts{ gap:var(--10); }
header.header .contacts a{
  --BG:none;
  width:var(--44); height:var(--44);
  background-color:#fff;
  border:var(--1) solid var(--MdLine);
  border-radius:var(--14);
  box-shadow:0 var(--6) var(--16) rgba(31,58,95,.10);
  transition:background-color .3s var(--EaseUI), transform .3s var(--EaseUI), border-color .3s var(--EaseUI);
}
header.header .contacts a:before{
  background:none;
  background-color:var(--MdDenim);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color .3s var(--EaseUI);
}
header.header .contacts a.whatsapp:before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.27-1.38a9.9 9.9 0 0 0 4.72 1.2h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 17.96h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.05-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.23 8.24Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.13-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.6.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.29Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.27-1.38a9.9 9.9 0 0 0 4.72 1.2h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 17.96h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.05-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.23 8.24Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.13-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.6.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.29Z'/%3E%3C/svg%3E");
}
header.header .contacts a:hover{ background-color:var(--MdOrange); border-color:var(--MdOrange); transform:translateY(calc(0px - var(--2))); }
header.header .contacts a:hover:before{ background-color:#fff; }
header.header .contacts .md-callno{
  width:auto; height:var(--44); border-radius:999px;
  display:inline-flex; align-items:center;
  padding:0 var(--18);
  font-size:var(--15); font-weight:700; color:var(--MdDenim);
  text-decoration:none;
}
header.header .contacts .md-callno:before{ content:none; }
header.header .contacts .md-callno span{ display:inline; font-size:var(--15); }
header.header .contacts .md-callno:hover{ color:#fff; }

/* ---------- ГЕРОЙ t0 — утро на кухне, техника жалуется ---------- */
.t0{
  background:var(--MdCream);
  min-height:92vh;
  border-radius:0;
}
/* рассветное пятно + мягкий луч */
.t0:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(calc(620*var(--Unit)) calc(480*var(--Unit)) at 82% 18%, rgba(255,138,0,.16), transparent 65%),
    radial-gradient(calc(520*var(--Unit)) calc(420*var(--Unit)) at 8% 90%, rgba(31,58,95,.07), transparent 70%);
}
/* кит-декор героя (круг+квадрат) — глушим */
.t0a:before{ content:none; }
.t0a:after{ content:none; }
.t0a .body:before{ content:none; }
.t0a .body:after{ content:none; }
.t0a{ padding:var(--140) var(--SidePadding) var(--90); }
.t0a .body{
  width:min(var(--1280),100%); max-width:var(--1280);
  display:flex; align-items:center; gap:var(--48);
  position:relative; z-index:1;
}
.t0a .info{
  align-items:flex-start; text-align:left;
  flex:0 1 calc(56*var(--Unit)*10);
  max-width:56%;
  gap:var(--24);
}
.t0a .info:before{
  content:"Выездной ремонт бытовой техники · Алматы";
  display:inline-flex; align-items:center; gap:var(--8);
  font-size:var(--14); font-weight:600; color:var(--MdDenim);
  background:#fff; border:var(--1) solid var(--MdLine);
  border-radius:999px; padding:var(--8) var(--16);
  box-shadow:0 var(--6) var(--16) rgba(31,58,95,.08);
}
.t0a .info .title{
  color:var(--MdDenim);
  font-size:var(--56); line-height:1.08; letter-spacing:-0.02em;
}
.t0a .info .title span{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--MdOrange); animation:none;
  text-decoration:underline;
  text-decoration-color:rgba(255,138,0,.35);
  text-decoration-thickness:calc(3*var(--Unit));
  text-underline-offset:calc(6*var(--Unit));
}
.t0a .info .description{
  color:var(--MdInk); font-weight:400; font-size:var(--19); line-height:1.6;
  max-width:calc(520*var(--Unit));
}
.t0a .info .description p{ animation:none; opacity:1; }
/* траст-строка «как у диспетчера»: чипы */
.t0a .info .description p.alt{
  font-family:var(--MainFont); font-size:0; letter-spacing:0; color:var(--MdMuted);
  display:flex; flex-wrap:wrap; gap:var(--10); margin:var(--6) 0 0;
}
.t0a .info .description p.alt span{
  display:inline-flex; align-items:center; gap:var(--8);
  font-size:var(--14); font-weight:600; color:var(--MdDenim);
  background:rgba(255,255,255,.75); border:var(--1) solid var(--MdLine);
  border-radius:999px; padding:var(--8) var(--14);
}
.t0a .info .description p.alt span:before{
  content:""; width:var(--8); height:var(--8); border-radius:50%;
  background:var(--MdOrange);
}
.t0a .info .more{
  align-self:flex-start;
  background:var(--MdOrange); color:#fff;
  font-size:var(--16); font-weight:700; padding:var(--16) var(--34);
  border-radius:999px; box-shadow:0 var(--14) var(--30) rgba(255,138,0,.35);
  transition:transform .25s var(--EaseUI), box-shadow .25s var(--EaseUI), background-color .25s var(--EaseUI);
}
.t0a .info .more:before{ content:none; }
.t0a .info .more:after{ content:"→"; color:#fff; transform:none; }
.t0a .info .more:hover{ background:#F07E00; transform:translateY(calc(0px - var(--2))); }
.t0a .lnk{ z-index:0; }
/* сцена: рисованные стиралка+холодильник и пузыри-жалобы */
.t0a .md-stage{ flex:1 1 auto; position:relative; min-width:0; z-index:1; }
.t0a .md-stage > svg{
  position:static; opacity:1; pointer-events:none;
  width:100%; height:auto; animation:none;
}
.md-bubble{
  position:absolute; z-index:2; cursor:pointer;
  font-family:var(--MainFont); font-size:var(--14); font-weight:600; line-height:1.35;
  color:var(--MdDenim); text-align:left;
  background:#fff; border:var(--1) solid var(--MdLine);
  border-radius:var(--16); padding:var(--10) var(--14);
  max-width:calc(210*var(--Unit));
  box-shadow:0 var(--10) var(--24) rgba(31,58,95,.12);
  animation:mdFloat 5s ease-in-out infinite alternate;
  transition:transform .25s var(--EaseUI), border-color .25s var(--EaseUI), box-shadow .25s var(--EaseUI);
}
.md-bubble:after{
  content:""; position:absolute; width:var(--12); height:var(--12);
  background:#fff; border-right:var(--1) solid var(--MdLine); border-bottom:var(--1) solid var(--MdLine);
  bottom:calc(0px - var(--7)); left:var(--24); transform:rotate(45deg);
}
.md-bubble.md-flip:after{ left:auto; right:var(--24); }
.md-bubble.md-top:after{ bottom:auto; top:calc(0px - var(--7)); transform:rotate(225deg); }
.md-bubble b{ display:block; font-weight:400; font-size:var(--12); color:var(--MdMuted); margin-top:var(--3); font-family:var(--MainFont); }
.md-bubble:hover{ border-color:var(--MdOrange); transform:translateY(calc(0px - var(--3))) scale(1.03); box-shadow:0 var(--14) var(--30) rgba(255,138,0,.25); }
.md-bubble:nth-child(2){ animation-delay:.8s; }
.md-bubble:nth-child(3){ animation-delay:1.6s; }
.md-bubble:nth-child(4){ animation-delay:2.4s; }
.md-b1{ left:2%; top:-6%; }
.md-b2{ right:0%; top:2%; }
.md-b3{ left:-4%; bottom:34%; }
.md-b4{ right:-2%; bottom:24%; }
@keyframes mdFloat{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(calc(0px - var(--10))); }
}
/* стрелки слайдера не нужны (один слайд), но облик задан */
.t0 .arrows .arrow{ width:var(--44); height:var(--44); }

/* ---------- t11 ВИЗАРД — «заявка за 2 минуты», карта диспетчера ---------- */
.s.t11{ position:relative; }
.md-wiz{
  font-size:var(--16);
  background:#fff;
  border:var(--1) solid var(--MdLine);
  border-radius:var(--28);
  box-shadow:0 var(--30) var(--60) rgba(31,58,95,.10);
  overflow:hidden;
}
.md-wiz-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--24);
  padding:var(--28) var(--36) var(--22);
  border-bottom:var(--1) dashed var(--MdLine);
  flex-wrap:wrap;
}
.md-wiz-title{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--26); font-weight:800; color:var(--MdDenim);
  display:flex; align-items:center; gap:var(--12);
}
.md-wiz-title em{
  font-style:normal; font-family:var(--MainFont); font-weight:600; font-size:var(--13);
  color:var(--MdOrange); background:rgba(255,138,0,.12);
  padding:var(--6) var(--12); border-radius:999px;
}
/* маршрут-прогресс: 4 остановки, фургончик едет */
.md-route{ position:relative; display:flex; gap:var(--38); padding-top:var(--14); }
.md-route:before{
  content:""; position:absolute; left:var(--10); right:var(--10); top:calc(var(--14) + var(--9));
  border-top:calc(2*var(--Unit)) dashed var(--MdLine);
}
.md-stop{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--6); min-width:var(--54); }
.md-stop i{
  width:var(--20); height:var(--20); border-radius:50%;
  background:#fff; border:calc(2*var(--Unit)) solid var(--MdLine);
  transition:border-color .3s var(--EaseUI), background-color .3s var(--EaseUI), transform .3s var(--EaseUI);
}
.md-stop span{ font-size:var(--12); font-weight:600; color:var(--MdMuted); transition:color .3s var(--EaseUI); }
.md-stop.md-done i{ border-color:var(--MdOrange); background:var(--MdOrange); }
.md-stop.md-here i{ border-color:var(--MdOrange); background:#fff; transform:scale(1.2); }
.md-stop.md-here span, .md-stop.md-done span{ color:var(--MdDenim); }
.md-van{
  position:absolute; top:calc(0px - var(--8)); left:0;
  width:var(--34); height:var(--24); pointer-events:none;
  transition:left .6s var(--EaseOut);
}
.md-van svg{ width:100%; height:100%; display:block; }
/* панели шагов */
.md-wiz-panes{ position:relative; padding:var(--30) var(--36); min-height:calc(300*var(--Unit)); }
.md-pane{ display:none; }
.md-pane.md-on{ display:block; animation:mdPaneIn .5s var(--EaseOut) both; }
@keyframes mdPaneIn{
  from{ opacity:0; transform:translateY(var(--16)); }
  to{ opacity:1; transform:none; }
}
.md-q{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--20); font-weight:700; color:var(--MdDenim);
  margin:0 0 var(--20);
}
.md-q small{ display:block; font-family:var(--MainFont); font-weight:400; font-size:var(--14); color:var(--MdMuted); margin-top:var(--4); }
/* шаг 1: плитки типов */
.md-tiles{ display:flex; flex-wrap:wrap; gap:var(--14); }
.md-tile{
  cursor:pointer; font-family:var(--MainFont);
  flex:1 1 calc((100% - 4*var(--14))/5); min-width:calc(150*var(--Unit));
  display:flex; flex-direction:column; align-items:center; gap:var(--10);
  background:var(--MdCream); border:var(--1) solid var(--MdLine);
  border-radius:var(--20); padding:var(--20) var(--12) var(--16);
  transition:transform .25s var(--EaseUI), border-color .25s var(--EaseUI), background-color .25s var(--EaseUI), box-shadow .25s var(--EaseUI);
}
.md-tile svg{ width:var(--54); height:var(--54); display:block; }
.md-tile span{ font-size:var(--15); font-weight:600; color:var(--MdDenim); text-align:center; line-height:1.3; }
.md-tile small{ font-size:var(--12); color:var(--MdMuted); }
.md-tile:hover{ transform:translateY(calc(0px - var(--3))); border-color:rgba(255,138,0,.5); box-shadow:0 var(--12) var(--24) rgba(31,58,95,.10); }
.md-tile.md-sel{
  background:#fff; border-color:var(--MdOrange);
  box-shadow:0 0 0 calc(2*var(--Unit)) rgba(255,138,0,.35), 0 var(--12) var(--24) rgba(255,138,0,.18);
}
/* шаг 2: чипы брендов */
.md-chips{ display:flex; flex-wrap:wrap; gap:var(--12); }
.md-chip{
  cursor:pointer; font-family:var(--MainFont);
  font-size:var(--15); font-weight:600; color:var(--MdDenim);
  background:var(--MdCream); border:var(--1) solid var(--MdLine);
  border-radius:999px; padding:var(--12) var(--22);
  transition:transform .2s var(--EaseUI), border-color .2s var(--EaseUI), background-color .2s var(--EaseUI), color .2s var(--EaseUI);
}
.md-chip:hover{ transform:translateY(calc(0px - var(--2))); border-color:rgba(255,138,0,.5); }
.md-chip.md-sel{ background:var(--MdDenim); border-color:var(--MdDenim); color:#fff; }
/* шаг 3: жалобы-пузыри */
.md-faults{ display:flex; flex-wrap:wrap; gap:var(--14); }
.md-fault{
  cursor:pointer; position:relative; text-align:left; font-family:var(--MainFont);
  flex:1 1 calc((100% - var(--14))/2); min-width:calc(260*var(--Unit));
  background:var(--MdCream); border:var(--1) solid var(--MdLine);
  border-radius:var(--18); border-bottom-left-radius:var(--4);
  padding:var(--16) var(--20);
  transition:transform .25s var(--EaseUI), border-color .25s var(--EaseUI), background-color .25s var(--EaseUI), box-shadow .25s var(--EaseUI);
}
.md-fault b{ display:block; font-size:var(--16); font-weight:700; color:var(--MdDenim); line-height:1.35; }
.md-fault span{ display:block; font-size:var(--13); color:var(--MdMuted); margin-top:var(--5); }
.md-fault i{
  position:absolute; right:var(--16); top:var(--16); font-style:normal;
  font-size:var(--12); font-weight:700; color:var(--MdOrange);
}
.md-fault:hover{ transform:translateY(calc(0px - var(--3))); border-color:rgba(255,138,0,.5); box-shadow:0 var(--12) var(--24) rgba(31,58,95,.10); }
.md-fault.md-sel{ background:#fff; border-color:var(--MdOrange); box-shadow:0 0 0 calc(2*var(--Unit)) rgba(255,138,0,.35); }
/* шаг 4: результат */
.md-res{ display:flex; gap:var(--28); flex-wrap:wrap; }
.md-res-sum{ flex:1 1 calc(340*var(--Unit)); min-width:calc(280*var(--Unit)); }
.md-res-row{
  display:flex; justify-content:space-between; gap:var(--16);
  font-size:var(--15); color:var(--MdInk);
  padding:var(--10) 0; border-bottom:var(--1) dashed var(--MdLine);
}
.md-res-row b{ font-weight:700; color:var(--MdDenim); text-align:right; }
.md-res-price{
  flex:1 1 calc(300*var(--Unit)); min-width:calc(260*var(--Unit));
  background:var(--MdCream); border-radius:var(--22); padding:var(--24) var(--28);
  display:flex; flex-direction:column; gap:var(--8);
}
.md-res-price .md-p-label{ font-size:var(--13); font-weight:600; color:var(--MdMuted); }
.md-res-price .md-p-val{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--32); font-weight:800; color:var(--MdDenim); line-height:1.1;
}
.md-res-price .md-p-val em{ font-style:normal; color:var(--MdOrange); }
.md-res-price .md-p-time{ font-size:var(--14); color:var(--MdInk); }
.md-res-price .md-p-note{
  font-size:var(--13); color:var(--MdMuted);
  border-top:var(--1) dashed var(--MdLine); padding-top:var(--10); margin-top:var(--6);
}
.md-slots{ display:flex; flex-wrap:wrap; gap:var(--10); margin:var(--18) 0 0; }
.md-slot{
  cursor:pointer; font-family:var(--MainFont);
  font-size:var(--14); font-weight:600; color:var(--MdDenim);
  background:#fff; border:var(--1) solid var(--MdLine); border-radius:999px;
  padding:var(--10) var(--18);
  transition:border-color .2s var(--EaseUI), background-color .2s var(--EaseUI), color .2s var(--EaseUI);
}
.md-slot.md-sel{ background:var(--MdOrange); border-color:var(--MdOrange); color:#fff; }
.md-slot small{ display:block; font-size:var(--11); font-weight:400; opacity:.75; }
.md-cta-row{ display:flex; flex-wrap:wrap; gap:var(--14); margin-top:var(--24); align-items:center; }
.md-cta{
  cursor:pointer; font-family:var(--MainFont); text-decoration:none;
  display:inline-flex; align-items:center; gap:var(--10);
  font-size:var(--16); font-weight:700; color:#fff;
  background:var(--MdOrange); border:0; border-radius:999px;
  padding:var(--16) var(--32);
  box-shadow:0 var(--14) var(--30) rgba(255,138,0,.35);
  transition:transform .25s var(--EaseUI), background-color .25s var(--EaseUI), box-shadow .25s var(--EaseUI);
}
.md-cta:hover{ background:#F07E00; transform:translateY(calc(0px - var(--2))); text-decoration:none; }
.md-cta.md-wa{ background:#25D366; box-shadow:0 var(--14) var(--30) rgba(37,211,102,.3); color:#fff; }
.md-cta.md-wa:hover{ background:#1FBF5B; }
.md-wiz-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--20);
  padding:var(--18) var(--36) var(--26);
  border-top:var(--1) dashed var(--MdLine);
}
.md-back{
  cursor:pointer; font-family:var(--MainFont);
  display:inline-flex; align-items:center; gap:var(--8);
  font-size:var(--14); font-weight:600; color:var(--MdMuted);
  background:none; border:var(--1) solid var(--MdLine); border-radius:999px;
  padding:var(--10) var(--20);
  transition:color .2s var(--EaseUI), border-color .2s var(--EaseUI), opacity .2s var(--EaseUI);
}
.md-back:hover{ color:var(--MdDenim); border-color:var(--MdDenim); }
.md-back[disabled]{ opacity:.35; pointer-events:none; }
.md-hint{ font-size:var(--13); color:var(--MdMuted); }
.md-hint b{ color:var(--MdDenim); font-weight:700; }

/* ---------- t8 — быстрые входы по типам ---------- */
.t8 .items{ justify-content:center; gap:var(--12); }
.t8 .btn{
  display:inline-flex; align-items:center; gap:var(--10);
  background:#fff; border:var(--1) solid var(--MdLine);
  color:var(--MdDenim); font-weight:600; font-size:var(--15);
  box-shadow:0 var(--6) var(--16) rgba(31,58,95,.07);
}
.t8 .btn:before{
  content:""; width:var(--18); height:var(--18);
  background-color:var(--MdOrange);
  -webkit-mask:var(--MdIco) center/contain no-repeat;
  mask:var(--MdIco) center/contain no-repeat;
}
.t8 .btn:hover{ border-color:var(--MdOrange); background:#fff; transform:translateY(calc(0px - var(--2))); }
.t8 .btn{ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3Ccircle cx='7.5' cy='6' r='.6'/%3E%3C/svg%3E"); }
.t8 .t8a:nth-child(2) .btn{ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M5 9h14M9 5.5v1M9 12.5v2'/%3E%3C/svg%3E"); }
.t8 .t8a:nth-child(3) .btn{ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='7' y='11' width='10' height='5' rx='1'/%3E%3Cpath d='M7 8h2M12 8h5'/%3E%3C/svg%3E"); }
.t8 .t8a:nth-child(4) .btn{ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 8h16M8 12c1.5 2 6.5 2 8 0M8 16c1.5 2 6.5 2 8 0'/%3E%3C/svg%3E"); }
.t8 .t8a:nth-child(5) .btn{ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='9' cy='12' r='2.4'/%3E%3Ccircle cx='15.5' cy='12' r='1.6'/%3E%3C/svg%3E"); }

/* ---------- t13 — преимущества (утро, крем-карточки) ---------- */
.t13 h2.title{ text-align:center; font-size:var(--SectionHeadSize); }
.t13 .items{ --MainGap:var(--20); }
.t13a{
  background:#fff; border:var(--1) solid var(--MdLine);
  border-radius:var(--24); padding:var(--28);
  gap:var(--18); text-align:left; align-items:flex-start;
  box-shadow:0 var(--10) var(--26) rgba(31,58,95,.06);
}
.t13a:before{
  flex:0 0 var(--56); width:var(--56);
  background-position:left center;
}
.t13a .description{ font-size:var(--16); line-height:1.55; color:var(--MdInk); font-weight:500; }
.t13a .description b{ display:block; font-family:var(--DisplayFont), system-ui, sans-serif; font-size:var(--19); font-weight:700; color:var(--MdDenim); margin-bottom:var(--6); }
.t13a:hover{ transform:translateY(calc(0px - var(--4))); box-shadow:0 var(--16) var(--36) rgba(31,58,95,.12); }

/* ---------- t3 — типы техники (день, асимметричная сетка) ---------- */
.t3 h2.title{ font-size:var(--SectionHeadSize); }
.t3 > .description{ max-width:calc(620*var(--Unit)); }
.t3 .items{ --MainGap:var(--20); }
.t3a{
  background:#fff; border:var(--1) solid var(--MdLine);
  border-radius:var(--26); overflow:hidden;
  flex:1 1 calc((100% - 2*var(--20))/3);
  min-width:calc(280*var(--Unit));
  box-shadow:0 var(--10) var(--26) rgba(31,58,95,.06);
}
.t3 .items .t3a:nth-child(-n+2){ flex:1 1 calc((100% - var(--20))/2 - var(--20)); }
.t3a img{ width:100%; height:calc(230*var(--Unit)); object-fit:cover; }
.t3 .items .t3a:nth-child(-n+2) img{ height:calc(260*var(--Unit)); }
.t3a .info{ background:#fff; padding:var(--24) var(--26) var(--26); gap:var(--10); }
.t3a .info .title{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--22); font-weight:700; color:var(--MdDenim); line-height:1.25;
}
.t3a .info .annotation{ font-family:var(--MainFont); font-size:var(--14); line-height:1.55; color:var(--MdMuted); text-transform:none; letter-spacing:0; }
.t3a .more{ margin-top:auto; padding-top:var(--10); }
.t3a:hover{ transform:translateY(calc(0px - var(--5))); box-shadow:0 var(--20) var(--44) rgba(31,58,95,.13); border-color:rgba(255,138,0,.45); }

/* ---------- t23 — прайс по типам (карточная сетка 2×2, НЕ columns) ---------- */
.t23 h2.title{ font-size:var(--SectionHeadSize); }
.t23 > .description{ color:var(--MdMuted); max-width:calc(680*var(--Unit)); }
.t23 > .items{
  columns:auto; column-gap:0;
  display:flex; flex-wrap:wrap; gap:var(--20); align-items:stretch;
}
.t23a > .items, .t23aa > .items{ display:flex; flex-direction:column; flex-wrap:nowrap; }
.t23a{
  flex:1 1 calc((100% - var(--20))/2); min-width:calc(300*var(--Unit));
  background:#fff; border:var(--1) solid var(--MdLine); border-radius:var(--26);
  padding:var(--28) var(--30); margin:0; gap:var(--16);
  box-shadow:0 var(--10) var(--26) rgba(31,58,95,.06);
}
.t23a + .t23a{ margin-top:0; }
.t23a > .title{
  font-size:var(--22); font-weight:700; color:var(--MdDenim);
  display:flex; align-items:center; gap:var(--12);
}
.t23a > .title:before{
  content:""; width:var(--10); height:var(--10); border-radius:50%;
  background:var(--MdOrange); flex:0 0 var(--10);
}
.t23a > .description{ font-size:var(--14); color:var(--MdMuted); }
.t23a > .items, .t23aa > .items{ gap:var(--10); }
.t23aa .h2.title, .t23aa .title{ font-size:var(--13); font-weight:600; color:var(--MdMuted); text-transform:none; }
.t23aaa .description{ font-size:var(--15); color:var(--MdInk); }
.t23aaa .description + .description{ color:var(--MdDenim); font-weight:700; font-size:var(--15); }
.t23aaa:after{ border-bottom-color:rgba(31,58,95,.22); }

/* ---------- t6 — этапы визита: таймлайн «мастер уже едет» ---------- */
.t6 h2.title{ font-size:var(--SectionHeadSize); }
.t6 > .description{ font-weight:400; color:var(--MdMuted); }
.t6 .items{ --MainGap:var(--20); position:relative; padding-top:var(--44); }
/* маршрутная линия над карточками + фургончик CSS-анимацией */
.t6 .items:before{
  content:""; position:absolute; left:var(--10); right:var(--10); top:var(--16);
  border-top:calc(2*var(--Unit)) dashed rgba(31,58,95,.25);
}
.t6 .items:after{
  content:""; position:absolute; top:calc(0px - var(--2)); left:0;
  width:var(--36); height:var(--26);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26'%3E%3Crect x='1' y='6' width='22' height='12' rx='3' fill='%231F3A5F'/%3E%3Cpath d='M23 9h6l4 5v4h-10z' fill='%23FF8A00'/%3E%3Ccircle cx='9' cy='20' r='3.4' fill='%2322314A' stroke='%23F8F6F2' stroke-width='1.6'/%3E%3Ccircle cx='28' cy='20' r='3.4' fill='%2322314A' stroke='%23F8F6F2' stroke-width='1.6'/%3E%3Crect x='4' y='9' width='9' height='4' rx='1' fill='%23F8F6F2'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:mdVanDrive 14s linear infinite;
}
@keyframes mdVanDrive{
  0%{ left:0; transform:none; }
  46%{ left:calc(100% - var(--36)); transform:none; }
  50%{ left:calc(100% - var(--36)); transform:scaleX(-1); }
  96%{ left:0; transform:scaleX(-1); }
  100%{ left:0; transform:none; }
}
.t6a{
  border:var(--1) solid var(--MdLine); background:#fff;
  border-radius:var(--24); padding:var(--26);
  transition:transform .3s var(--EaseUI), box-shadow .3s var(--EaseUI), border-color .3s var(--EaseUI);
}
.t6a:nth-child(odd), .t6a:nth-child(even){ --HeadColor:var(--MdDenim); }
.t6a:after{ content:none; }
.t6a:before{
  background:var(--MdCream); color:var(--MdOrange);
  border:var(--1) solid var(--MdLine);
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--20); font-weight:800;
  width:var(--52); height:var(--52); line-height:var(--50);
  border-radius:var(--16); transform:none;
}
.t6a:hover{ transform:translateY(calc(0px - var(--4))); box-shadow:0 var(--16) var(--32) rgba(31,58,95,.10); border-color:rgba(255,138,0,.4); }
.t6a:hover:before{ animation:none; transform:rotate(-3deg); background:var(--MdOrange); color:#fff; border-color:var(--MdOrange); }
.t6a h3.title{ color:var(--MdDenim); font-size:var(--20); font-weight:700; }
.t6a .description{ color:var(--MdInk); font-size:var(--15); line-height:1.6; }
.t6a .description b{ color:var(--MdOrange); font-weight:700; }

/* ---------- t18 — деним-полоса счётчиков (count-up) ---------- */
#mb > .s.t18{ margin:0; }
.s.t18{
  background:var(--MdDenim);
  border-radius:var(--32);
  width:min(calc(100% - 2*var(--SidePadding)), var(--1760));
  margin:0 auto !important;
  padding:var(--64) var(--MainPadding);
  overflow:hidden; position:relative;
}
.s.t18:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(calc(420*var(--Unit)) calc(300*var(--Unit)) at 85% 0%, rgba(255,138,0,.18), transparent 70%);
}
.t18 h2.title{ font-size:var(--30); position:relative; }
.t18 .items{ position:relative; gap:var(--MainGap) var(--96); }
.t18a .title{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--68); font-weight:800;
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--MdOrange);
}
.t18a .title i{ font-style:normal; }
.t18a .description{
  font-family:var(--MainFont); font-size:var(--15); font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--MdCreamOnDark);
}
.t18a{ gap:var(--8); }

/* ---------- t2 — кейсы: фото целиком + текст на градиенте ---------- */
.t2 h2.title{ font-size:var(--SectionHeadSize); }
.t2 .items{ --MainGap:var(--20); }
.t2a{
  position:relative; border:0; border-radius:var(--26); overflow:hidden;
  min-height:calc(360*var(--Unit));
  justify-content:flex-end;
  box-shadow:0 var(--14) var(--32) rgba(31,58,95,.12);
  transition:transform .3s var(--EaseUI), box-shadow .3s var(--EaseUI);
}
.t2a:before{
  position:absolute; inset:0; width:100%; aspect-ratio:auto; height:100%;
  transition:transform .5s var(--EaseUI);
}
.t2a:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,42,70,0) 30%, rgba(21,42,70,.88) 100%);
}
.t2a .title{
  position:relative; z-index:1; flex:0 0 auto;
  color:#fff; font-family:var(--DisplayFont), system-ui, sans-serif;
  font-weight:700; font-size:var(--20); line-height:1.35;
  padding:var(--24) var(--26) var(--8);
}
.t2a .title small{
  display:block; font-family:var(--MainFont); font-weight:500;
  font-size:var(--14); color:rgba(248,246,242,.8); margin-top:var(--8);
}
.t2a .title small b{ color:var(--MdOrange); font-weight:700; }
.t2a .more{ position:relative; z-index:1; margin:0 var(--26) var(--24); color:#FFB25E; }
.t2a:hover{ transform:translateY(calc(0px - var(--6))); box-shadow:0 var(--22) var(--48) rgba(31,58,95,.22); }
.t2a:hover:before{ transform:scale(1.05); }
.t2a:hover .title{ color:#fff; }

/* ---------- t7 — показатели гарантии/сроков ---------- */
.t7 h2.title{ font-size:var(--SectionHeadSize); }
.t7a{
  background:var(--MdCream); border:var(--1) solid var(--MdLine);
  border-radius:var(--26); padding:var(--30);
}
.t7a > .title, .t7a h2.title{ font-size:var(--20); color:var(--MdDenim); }
.t7aa:before{ width:var(--48); height:var(--48); }
.t7aa .title{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  color:var(--MdDenim); font-weight:800; font-size:var(--28);
}
.t7aa .title i{ font-style:normal; }
.t7aa .description{ font-size:var(--14); color:var(--MdMuted); }

/* ---------- t12 — фотолента мастеров (овалы-суперэллипсы) ---------- */
.t12{ padding:var(--10) 0; }
.t12a span{ border-radius:var(--110) var(--24) var(--110) var(--24); }
.t12a:nth-child(even) span{ border-radius:var(--24) var(--110) var(--24) var(--110); }
.t12a img{ height:calc(260*var(--Unit)); width:auto; object-fit:cover; }

/* ---------- ВЕЧЕР: t21 · t19 · t17 · t15 · t16 — деним-сцена ---------- */
#mb > .s.t21, #mb > .s.t19, #mb > .s.t17, #mb > .s.t15, #mb > .s.t16{
  margin:0; max-width:none; width:100%;
}
#mb > .s.t21 + .s.t19, #mb > .s.t19 + .s.t17, #mb > .s.t17 + .s.t15, #mb > .s.t15 + .s.t16{
  margin-top:calc(0px - var(--MainContentGap));
}
.s.t21, .s.t19, .s.t17, .s.t15, .s.t16{
  background:var(--MdDenimDeep);
  padding-left:max(var(--SidePadding), calc((100% - var(--Body))/2));
  padding-right:max(var(--SidePadding), calc((100% - var(--Body))/2));
}
.s.t21{
  border-radius:var(--40) var(--40) 0 0;
  padding-top:var(--90); padding-bottom:var(--44);
  position:relative; overflow:hidden;
}
.s.t21:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(calc(520*var(--Unit)) calc(360*var(--Unit)) at 12% 0%, rgba(255,138,0,.10), transparent 70%);
}
.s.t19{ padding-top:var(--24); padding-bottom:var(--24); }
.s.t17{ padding-top:var(--44); padding-bottom:var(--44); }
.s.t15{ padding-top:var(--44); padding-bottom:var(--44); }
.s.t16{ padding-top:var(--44); padding-bottom:var(--96); }

/* t21 отзывы: пузыри благодарности (ответ на «жалобы» героя) */
.t21 .body{ width:min(var(--Body),100%); max-width:var(--Body); margin:0 auto; position:relative; }
.t21 h2.title{ color:#fff; font-size:var(--SectionHeadSize); }
.t21 .body > .description{ color:var(--MdCreamOnDark); }
.t21a > .title{
  position:relative;
  font-family:var(--MainFont); color:#fff; font-weight:400;
  font-size:var(--22); line-height:1.55; hyphens:none;
  background:var(--MdDenimSoft);
  border:var(--1) solid var(--MdLineOnDark);
  border-radius:var(--26); border-bottom-right-radius:var(--6);
  padding:var(--30) var(--40);
  max-width:calc(880*var(--Unit)); margin:0 auto;
}
.t21a > .title:before{
  content:"«"; position:absolute; left:var(--14); top:calc(0px - var(--12));
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--54); color:var(--MdOrange); line-height:1;
}
.t21a .info .description{ color:var(--MdCreamOnDark); font-size:var(--15); }
.t21a .info .description:first-child{ color:#fff; font-weight:700; font-size:var(--17); }
.t21 .bullets .item{ background:rgba(248,246,242,.35); width:var(--10); height:var(--10); border-radius:50%; }
.t21 .bullets .item:hover, .t21 .bullets .item.current{ background:var(--MdOrange); }

/* t19 CTA: оранжевый талон скидки */
.t19{ padding-top:0; padding-bottom:0; }
.t19 .info{
  position:relative;
  background:var(--MdOrange);
  border:0; border-image:none;
  border-radius:var(--28);
  padding:var(--44) var(--64);
  width:min(var(--Body),100%);
  box-shadow:0 var(--24) var(--60) rgba(255,138,0,.28);
  overflow:hidden;
}
/* перфорация талона */
.t19 .info:before, .t19 .info:after{
  content:""; position:absolute; top:50%; width:var(--28); height:var(--28);
  border-radius:50%; background:var(--MdDenimDeep); transform:translateY(-50%);
}
.t19 .info:before{ left:calc(0px - var(--14)); }
.t19 .info:after{ right:calc(0px - var(--14)); }
.t19 .info h2.title{ color:#fff; font-size:var(--30); }
.t19 .info .description{
  font-family:var(--MainFont); font-size:var(--16); letter-spacing:0; text-transform:none;
  color:rgba(255,255,255,.92); max-width:calc(720*var(--Unit));
}
.t19 .info .description strong, .t19 .info .description b{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:#fff; font-size:var(--48); font-weight:800;
  text-shadow:0 var(--4) var(--18) rgba(21,42,70,.3);
}

/* t17 мастера */
.t17 h2.title{ color:#fff; font-size:var(--SectionHeadSize); }
.t17 > .description{ color:var(--MdCreamOnDark); }
.t17 .container{ padding:var(--10); }
.t17a:before{
  box-shadow:0 0 0 var(--3) var(--MdDenimDeep), 0 0 0 var(--5) var(--MdOrange);
}
.t17a .info{
  background:var(--MdDenimSoft);
  border:var(--1) solid var(--MdLineOnDark);
  border-radius:var(--24);
  padding-top:var(--96);
}
.t17a .info .title.h3{ color:#fff; font-family:var(--DisplayFont), system-ui, sans-serif; font-size:var(--20); }
.t17a .info .title.s{ color:var(--MdOrange); font-size:var(--14); line-height:1.4; font-weight:600; }
.t17a .info .description{ color:var(--MdCreamOnDark); font-size:var(--14); line-height:1.55; }

/* t15 FAQ на дениме + CSS-шеврон вместо Material-иконки */
.t15 h2.title{ color:#fff; font-size:var(--SectionHeadSize); }
.t15a{ border-bottom:var(--1) solid var(--MdLineOnDark); }
.t15a > .title{
  color:#fff; font-size:var(--20); font-weight:600; line-height:1.4;
  padding:var(--22) 0;
  transition:color .25s var(--EaseUI);
}
.t15a > .title:hover{ color:var(--MdOrange); }
.t15a > .title:after{
  content:""; font-family:var(--MainFont);
  flex:0 0 var(--14); width:var(--14); height:var(--14);
  border-right:calc(2*var(--Unit)) solid var(--MdOrange);
  border-bottom:calc(2*var(--Unit)) solid var(--MdOrange);
  transform:rotate(45deg); margin-top:calc(0px - var(--5));
}
.t15a.current > .title:after{ transform:rotate(225deg); margin-top:var(--5); }
.t15a .description{ color:var(--MdCreamOnDark); font-size:var(--16); max-width:calc(880*var(--Unit)); padding-bottom:var(--24); }
.t15a .description b{ color:#fff; }

/* t16 контакты: карта справа, форма, деним */
.t16 .body{ width:min(var(--Body),100%); max-width:var(--Body); margin:0 auto; }
.t16 h2.title{ color:#fff; font-size:var(--SectionHeadSize); }
.t16 .body > .description{ color:var(--MdCreamOnDark); max-width:calc(680*var(--Unit)); }
.t16 .line{ gap:var(--40); }
.t16 .line .content{ flex:0 0 calc(340*var(--Unit)); gap:var(--20); }
.t16a{ --BGC:var(--MdDenimSoft); }
.t16a:nth-child(3n+2), .t16a:nth-child(3n){ --BGC:var(--MdDenimSoft); }
.t16a:before{
  content:""; border-radius:var(--16);
  background-color:var(--MdDenimSoft);
  border:var(--1) solid var(--MdLineOnDark);
  background-image:var(--MdIco);
  background-repeat:no-repeat; background-position:center;
  background-size:var(--22);
}
.t16a{ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF8A00'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E"); }
.t16 .content .t16a:nth-child(2){ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.t16 .content .t16a:nth-child(3){ --MdIco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2'%3E%3Cpath d='M12 21s-7-5.1-7-11a7 7 0 0 1 14 0c0 5.9-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.t16a .description{ color:#fff; font-size:var(--16); }
.t16a .description a{ color:#fff; }
.t16a .description small{ display:block; font-size:var(--13); color:var(--MdCreamOnDark); font-weight:400; margin-top:var(--2); }
/* чипы районов выезда */
.md-areas{ display:flex; flex-wrap:wrap; gap:var(--8); margin-top:var(--8); font-size:0; }
.md-areas span{
  display:inline-block; font-size:var(--13); font-weight:500; color:var(--MdCreamOnDark);
  border:var(--1) solid var(--MdLineOnDark); border-radius:999px;
  padding:var(--6) var(--12);
}
.md-areas b{ display:block; width:100%; font-size:var(--13); color:#fff; font-weight:700; margin-bottom:var(--4); }
/* форма — брендовые поля */
.t16 .form{
  background:var(--MdDenimSoft);
  border:var(--1) solid var(--MdLineOnDark);
  border-radius:var(--26);
  padding:var(--30);
}
.t16 .form h3.title, .t16 .form .h3{ color:#fff; font-size:var(--20); }
.t16 .form .text{
  background:rgba(21,42,70,.55);
  border:var(--1) solid var(--MdLineOnDark);
  border-radius:var(--14);
  color:#fff; font-size:var(--16); line-height:1.4;
  padding:var(--14) var(--18);
  transition:border-color .2s var(--EaseUI), box-shadow .2s var(--EaseUI);
}
.t16 .form .text::placeholder{ color:rgba(248,246,242,.55); }
.t16 .form .text:focus, .t16 .form .text:focus-visible{
  outline:none; border-color:var(--MdOrange);
  box-shadow:0 0 0 calc(3*var(--Unit)) rgba(255,138,0,.25);
}
.t16 .form textarea.text{ min-height:calc(120*var(--Unit)); resize:vertical; }
.t16 .form .btn, .t16 .form input[type=submit]{
  width:100%; background:var(--MdOrange); color:#fff; border:0;
  border-radius:999px; font-family:var(--MainFont);
  font-size:var(--16); font-weight:700; letter-spacing:0; text-transform:none;
  padding:var(--16) var(--24);
  box-shadow:0 var(--12) var(--26) rgba(255,138,0,.3);
  cursor:pointer;
  transition:background-color .25s var(--EaseUI), transform .25s var(--EaseUI);
}
.t16 .form .btn:hover, .t16 .form input[type=submit]:hover{ background:#F07E00; transform:translateY(calc(0px - var(--2))); }
.t16.mr .line .map{
  min-height:calc(380*var(--Unit));
  border:var(--1) solid var(--MdLineOnDark);
  border-radius:var(--26);
  background:var(--MdDenimSoft);
  position:relative;
}
.t16.mr .line .map:before{
  content:"Мастерская: г. Алматы, ул. Международная, дом 123";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:70%; text-align:center;
  font-family:var(--MainFont); font-size:var(--14); line-height:1.6;
  color:var(--MdCreamOnDark);
  padding-top:var(--48);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2'%3E%3Cpath d='M12 21s-7-5.1-7-11a7 7 0 0 1 14 0c0 5.9-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center top/var(--36) no-repeat;
  pointer-events:none;
}
.t16b > label{ color:var(--MdCreamOnDark); font-size:var(--13); letter-spacing:0; text-transform:none; }

/* ---------- Футер ---------- */
footer.footer{
  margin-top:0;
  background:var(--MdDenimDeep);
  border-top:var(--1) solid var(--MdLineOnDark);
  padding:var(--30) var(--SidePadding);
}
footer.footer .description{
  font-family:var(--MainFont); letter-spacing:0;
  color:var(--MdCreamOnDark); font-size:var(--14); line-height:1.7;
}
footer.footer .description a{ color:#fff; }
footer.footer .description a:hover{ color:var(--MdOrange); }
footer.footer .md-flogo{ display:flex; align-items:center; gap:var(--12); }
footer.footer .md-flogo img{ width:var(--40); height:var(--40); }
footer.footer .md-flogo span{
  font-family:var(--DisplayFont), system-ui, sans-serif;
  font-size:var(--18); font-weight:800; color:#fff;
}

/* ---------- Плавающая кнопка-телефон (приём arhimed) ---------- */
.md-fab{
  position:fixed; left:var(--24); bottom:var(--24); z-index:20;
  width:var(--56); height:var(--56); border-radius:50%;
  background:var(--MdOrange);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 var(--14) var(--30) rgba(255,138,0,.4);
  transition:transform .25s var(--EaseUI), box-shadow .25s var(--EaseUI);
}
.md-fab:before{
  content:""; width:var(--24); height:var(--24);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.md-fab:after{
  content:""; position:absolute; inset:calc(0px - var(--4));
  border-radius:50%; border:var(--1) solid rgba(255,138,0,.5);
  animation:mdFabPulse 2.4s var(--EaseUI) infinite;
}
@keyframes mdFabPulse{
  0%{ transform:scale(.9); opacity:.9; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}
.md-fab:hover{ transform:scale(1.08); }

/* ---------- Курсор: soft glow (следует с ленцой) ---------- */
#mdGlow{
  position:fixed; left:0; top:0; z-index:1;
  width:calc(480*var(--Unit)); height:calc(480*var(--Unit));
  margin-left:calc(-240*var(--Unit)); margin-top:calc(-240*var(--Unit));
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,138,0,.10), transparent 65%);
  opacity:0; transition:opacity .5s var(--EaseUI);
  will-change:transform;
}
body.md-glow-on #mdGlow{ opacity:1; }

/* ---------- IO-reveal: анимация по .in, resting видим ---------- */
.md-rv{ }
body.rv-on .md-rv.in{ animation:mdRise .8s var(--EaseOut) both; animation-delay:calc(var(--i,0)*70ms); }
@keyframes mdRise{
  from{ opacity:0; transform:translateY(var(--24)); }
  to{ opacity:1; transform:none; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .md-bubble, .t6 .items:after, .md-fab:after{ animation:none !important; }
  body.rv-on .md-rv.in{ animation:none !important; }
  #mdGlow{ display:none; }
  .md-pane.md-on{ animation:none; }
  *{ scroll-behavior:auto; }
}

/* ---------- МОБАЙЛ (единый bespoke-блок ≤1024) ---------- */
@media (max-width:1024px){
  :root{
    /* ре-ассерт мобильных токенов поверх bespoke-:root */
    --Unit:1px;
    --MainCoef:1;
    --SidePadding:var(--16);
    --MainGap:var(--16);
    --MainContentGap:var(--52);
    --MainBlockPadding:var(--20);
    --MainPadding:var(--32);
    --HeroSize:var(--34);
    --SectionHeadSize:var(--26);
    --Body:100%;
  }
  body:not([data-language]){ background-size:22px 22px; }
  .body{ width:100%; max-width:100%; }
  #mb > .s.body{ margin:0 auto; }
  header.header{
    pointer-events:auto;
    background:var(--MdCream);
    mix-blend-mode:normal;
    padding:var(--12) var(--16);
    position:sticky; top:0; z-index:30;
  }
  body.md-eve header.header{ background:var(--MdDenimDeep); }
  header.header .logo img{ width:36px; height:36px; }
  header.header .logo .pixio{ font-size:var(--17); }
  header.header .logo .label{ font-size:var(--10); }
  header.header .contacts .md-callno{ display:none; }
  header.header .contacts a{ width:38px; height:38px; border-radius:12px; }
  /* бургер: линии деним на светлой плашке */
  header.header .m .mb:before{ border-color:var(--MdDenim); }
  header.header .m .mb:after{ background:var(--MdDenim); }
  body.md-eve header.header .m .mb:before{ border-color:#fff; }
  body.md-eve header.header .m .mb:after{ background:#fff; }
  /* открытое меню: плотный деним, контрастные пункты */
  header.header .menu{
    background:var(--MdDenimDeep);
    backdrop-filter:none;
    padding:110px var(--32) var(--32);
    gap:var(--18);
    align-items:flex-start;
  }
  header.header .menu a{ color:#fff; font-size:var(--22); font-weight:700; font-family:var(--DisplayFont), system-ui, sans-serif; }
  header.header .menu a:hover{ color:var(--MdOrange); }
  body.menu header.header{ background:var(--MdDenimDeep); transition:none; }
  body.menu header.header .menu{ transition:none; }
  body.menu header.header .logo .pixio{ color:#fff; }
  body.menu header.header .logo .label{ color:var(--MdCreamOnDark); }
  body.menu header.header .m .mb:before{ border-color:#fff; }
  body.menu header.header .m .mb:after{ background:#fff; }

  /* герой: колонка, сцена под текстом */
  .t0{ min-height:100svh; }
  .t0a{ padding:var(--90) var(--16) var(--44); min-width:0; }
  .t0a .body{ flex-direction:column; gap:var(--28); min-width:0; width:100%; max-width:100%; }
  .t0a .info{ max-width:100%; flex:none; min-width:0; }
  .t0a .info .title{ font-size:var(--34); }
  .t0a .info .description{ font-size:var(--16); }
  .t0a .info:before{ font-size:var(--12); }
  .t0a .md-stage{ width:100%; max-width:420px; align-self:center; }
  .md-bubble{ max-width:180px; font-size:var(--12); padding:var(--8) var(--10); }
  .md-b1{ left:0; top:-4%; }
  .md-b2{ right:0; top:0; }
  .md-b3{ left:-2%; bottom:30%; }
  .md-b4{ right:-1%; bottom:22%; }

  /* визард */
  .md-wiz-head{ padding:var(--20) var(--16) var(--16); }
  .md-wiz-panes{ padding:var(--20) var(--16); min-height:0; }
  .md-wiz-foot{ padding:var(--14) var(--16) var(--20); flex-wrap:wrap; }
  .md-wiz-title{ font-size:var(--20); }
  .md-route{ width:100%; gap:0; justify-content:space-between; }
  .md-stop{ min-width:0; }
  .md-stop span{ font-size:var(--10); }
  .md-tiles{ gap:var(--10); }
  .md-tile{ flex:1 1 calc((100% - var(--10))/2); min-width:calc(50% - var(--10)); }
  .md-fault{ flex:1 1 100%; min-width:0; }
  .md-res{ gap:var(--16); }
  .md-res-sum, .md-res-price{ flex:1 1 100%; min-width:0; }
  .md-cta-row{ gap:var(--10); }
  .md-cta{ width:100%; justify-content:center; }
  .md-hint{ display:none; }

  /* полосы и сетки в колонку */
  .t8 .items{ gap:var(--8); padding:0 var(--16); }
  .t8 .btn{ font-size:var(--13); padding:var(--10) var(--14); }
  .t13 .items, .t3 .items, .t23 > .items, .t6 .items, .t2 .items{ flex-direction:column; }
  .t23aaa:after{ display:none; }
  .t23aaa{ justify-content:space-between; gap:var(--12); }
  .t13a, .t3a, .t23a, .t6a, .t2a{ flex:none; width:100%; max-width:100%; min-width:0; }
  .t3 .items .t3a:nth-child(-n+2){ flex:none; }
  .t3a img, .t3 .items .t3a:nth-child(-n+2) img{ height:200px; }
  .t13 .items, .t3 .items, .t23 .items, .t6 .items, .t2 .items, .t7 .items{ padding:0 var(--16); }
  .t13 h2.title, .t3 h2.title, .t23 h2.title, .t6 h2.title, .t2 h2.title, .t7 h2.title,
  .t3 > .description, .t23 > .description, .t6 > .description{ padding:0 var(--16); }
  .t6 .items{ padding-top:var(--40); }
  .t6 .items:before{ left:var(--24); right:var(--24); }
  .t7 .items{ flex-direction:column; }
  .t7a{ flex:none; width:100%; max-width:100%; }
  .t7aa{ flex:1 1 calc(50% - var(--MainGap)); }

  .s.t18{ width:calc(100% - 2*var(--16)); border-radius:var(--20); padding:var(--32) var(--20); }
  .t18a{ flex:0 0 calc(50% - var(--24)); }
  .t18a .title{ font-size:var(--40); }
  .t18 h2.title{ font-size:var(--22); }

  .t12{ padding:var(--6) var(--16); }
  .t12a img{ height:170px; }
  .t12a span{ border-radius:60px 16px 60px 16px; }
  .t12a:nth-child(even) span{ border-radius:16px 60px 16px 60px; }

  /* вечер-сцена */
  .s.t21, .s.t19, .s.t17, .s.t15, .s.t16{ padding-left:var(--16); padding-right:var(--16); }
  .s.t21{ border-radius:var(--24) var(--24) 0 0; padding-top:var(--44); padding-bottom:var(--24); }
  .t21a > .title{ font-size:var(--16); padding:var(--20) var(--20); }
  .t19 .info{ padding:var(--24) var(--20); width:100%; }
  .t19 .info h2.title{ font-size:var(--22); }
  .t19 .info .description strong, .t19 .info .description b{ font-size:var(--32); }
  .t17a .info .title.h3{ font-size:var(--18); }
  .t15a > .title{ font-size:var(--16); line-height:1.45; padding:var(--16) 0; }
  .t15a .description{ font-size:var(--14); }
  .t16 .line{ flex-direction:column; gap:var(--24); }
  .t16 .line .content{ flex:none; width:100%; }
  .t16 .form{ flex:0 0 auto; width:100%; padding:var(--20); }
  .t16.mr .line .map{ flex:none; width:100%; min-height:280px; }
  .t16 h2.title{ font-size:var(--26); }

  footer.footer{ padding:var(--24) var(--16); gap:var(--16); }
  .md-fab{ left:auto; right:var(--14); bottom:var(--14); width:48px; height:48px; }
  #mdGlow{ display:none; }
}