/* 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";
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
:root {
  /* Свежо — friendly-eco: Nunito (текст) + Unbounded (дисплей) */
  --MainFont:'Nunito', system-ui, sans-serif;
  --DisplayFont:'Unbounded', 'Nunito', system-ui, sans-serif;
  --MonoFont:'Nunito', system-ui, sans-serif;
  --MaterialIcons:"Material Icons";
  --BG:"";
  --InLine:3;
  --InPLine:3;
  /* Палитра «Свежо»: тёплый крем 60 / листовой зелёный 30 / мандарин 10 */
  --Color1:#14301C;              /* листовой ink: текст + тёмные полосы */
  --Color2:#1E5631;              /* листовой зелёный — акцент/ссылки */
  --Color6:#FF7A1A;              /* мандарин-цитрус — CTA */
  --Red:#E0482E;
  --Color3:#FFFCF4;              /* тёплый почти-белый */
  --Paper:#FFF6E0;               /* крем — фон страницы */
  --PaperDeep:#FFE9BF;           /* крем поглубже — плашки */
  --LeafTint:#E4F1D8;            /* мягкий лист — тинты */
  --MandarinSoft:#FFE1C4;
  --MandarinDeep:#C95F0F;        /* нижняя 3D-тень pill-клавиш */
  --MainFrameBg:#FFFDF6;
  --Color4:#B9C9AE;
  --Gray8:#22331F;
  --Gray7:#41523D;
  --Gray5:#6E7F67;
  --Gray4:#93A38B;
  --Gray3:#D5E0CB;
  --Gray2:#E7EEDD;
  --Gray0:#FBFCF7;
  /* Фирменный «градиент» схлопнут в цвета бренда */
  --GradFrom:var(--Color6);
  --GradTo:#FF9A3D;
  --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(--24);
  --Gap:var(--24);
  --Body:var(--1400);
  --EaseOut:cubic-bezier(.16,1,.3,1);
  --EaseUI:cubic-bezier(.4,0,.2,1);
  --StackRadius:var(--48);       /* скруглённый верх «колоды» */
  --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));
  --1400:calc(1400*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(--24);
  --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.
     ============================================================ */
  /* Типографика-характер: Unbounded, sentence case, без кит-капса */
  --HeadingWeight:700; /* вес h1–h5 / .h2 */
  --HeadingTracking:-0.01em; /* трекинг заголовков */
  --HeadingTransform:none; /* регистр .h2 */
  --HeadingLine:none; /* линия под .h2 отключена — вместо неё кикер-лист */
  --HeadingLineFill:var(--Gradient);
  --H3Weight:700;
  --HeroSize:var(--64); /* hero-заголовок t0a (независим от счётчиков t18a) */
  --HeroWeight:700;
  --HeroTransform:none;
  --SectionHeadSize:var(--44); /* крупные заголовки секций t2/t6 */
  --LabelFont:var(--MainFont); /* лейблы — округлый Nunito */
  --LabelTransform:none;
  --LabelTracking:0.02em;
  /* Геометрия и фактура карточек: крупные friendly-радиусы */
  --CardRadius:var(--32); /* t3a/t7a/t9/t13a/t16.form/t17a */
  --CardRadiusLg:var(--36); /* t6a */
  --CardSharpRadius:var(--32); /* t2a */
  --CardFill:var(--MainFrameBg); /* заливка карточек (≠ фон секции t1) */
  --CardShadow:0 var(--20) var(--40) rgba(30,86,49,.12); /* тень в цвет бренда */
  --CardBorderWidth:var(--2); /* рамка t6a */
  --CardAccentBorder:0; /* кант слева t2a убран */
  --BadgeRadius:50%; /* номер-бейдж t6a */
  --DividerWidth:var(--2); /* разделитель аккордеона t15a */
  --DividerColor:color-mix(in srgb, var(--Color2) 22%, transparent);
  /* Кнопки: pill-клавиши */
  --ButtonBorderWidth:var(--2);
  --ButtonTransform:none;
  --ButtonFont:var(--MainFont);
}

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-family: var(--DisplayFont);
  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-family: var(--DisplayFont);
  font-size: var(--40);
  line-height: 1.18;
  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);
}
/* акцент-слово — не градиент-клип, а листовая highlight-плашка (wembi) */
.h2 span,
h2.title span {
  background: var(--Color2);
  color: var(--Color3);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 var(--14) var(--3);
  border-radius: var(--18) var(--18) var(--18) var(--4);
}

.h3,
h3.title {
  font-family: var(--DisplayFont);
  font-size: var(--26);
  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(--22);
  line-height: 1.5;
  font-weight: 600;
  color: var(--Gray7);
  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(--48);
  align-items: center;
  justify-content: flex-start;
}
/* trust-строка героя: округлые чипы через точку */
.t0a .info .description p.alt,
.t21a > .title p.alt {
  color: var(--Color2);
  line-height: 1.7;
  font-size: var(--16);
  font-weight: 800;
  font-family: var(--MainFont);
  margin-bottom: var(--24);
}
.t0a .info .description p.price,
.t21a > .title p.price {
  padding-top: var(--36);
  font-size: var(--64);
  line-height: 1;
  font-weight: 700;
  font-family: var(--DisplayFont);
  color: var(--Color6);
  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(--16);
  font-weight: 800;
  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 — задан целиком в блоке типа 2 ниже */

/* Заголовок карточки t3a — задан целиком в блоке типа 3 ниже */

/*
   Кнопки pixio.kz: .btn — прозрачная «тихая» mono-кнопка,
   .btn.cl — главный CTA с градиентом.
   База адаптивная: цвет и рамка берутся от текущего цвета текста
   контекста (на тёмном фоне — светлая, на светлом — тёмная); раньше
   была жёстко белой и пропадала на светлых фонах.
*/
.btn {
  display: inline-block;
  color: inherit;
  letter-spacing: var(--LabelTracking);
  font-size: var(--16);
  font-weight: 800;
  line-height: 1.45;
  font-family: var(--ButtonFont);
  text-transform: var(--ButtonTransform);
  padding: var(--16) var(--36);
  border: var(--ButtonBorderWidth) solid color-mix(in srgb, currentColor 40%, transparent);
  background: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  transform: translate(var(--tx, 0), var(--ty, 0));
  transform-origin: center;
  transition: transform 0.3s var(--EaseUI), background-color 0.3s var(--EaseUI), color 0.3s var(--EaseUI), box-shadow 0.15s var(--EaseUI);
}
.btn:hover {
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.04);
  text-decoration: none;
}
/* главный CTA — мандариновая pill-«клавиша» с нижней 3D-press тенью (duolingo) */
.btn.cl {
  background: var(--Color6);
  border: 0;
  color: #FFF;
  font-family: var(--MainFont);
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: var(--18);
  line-height: 1.4;
  padding: var(--20) var(--44);
  box-shadow: 0 var(--6) 0 var(--MandarinDeep), 0 var(--20) var(--36) rgba(255,122,26,.35);
}
.btn.cl:active {
  transform: translate(var(--tx, 0), calc(var(--ty, 0) + var(--5)));
  box-shadow: 0 var(--1) 0 var(--MandarinDeep), 0 var(--8) var(--16) rgba(255,122,26,.3);
}
.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 */
.t15a .title {
  font-family: var(--DisplayFont);
  font-size: var(--22);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  padding: var(--24) 0;
}

/* Заголовок главы прайса t23a */
.t23a > .title {
  font-family: var(--DisplayFont);
  font-weight: 700;
  font-size: calc(34*var(--Unit));
  color: var(--Color2);
}

/*
   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(--Paper);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 0;
}
/* тёплое плёночное зерно одним псевдоэлементом (BTC) */
body:not([data-language])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}
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);
}

/* поля формы — pill-инпуты бренда: hairline-рамка, мандариновое focus-кольцо */
div.text,
input.text,
select.text,
textarea.text {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--Color2) 30%, transparent);
  border-radius: var(--26);
  padding: var(--15) var(--24);
  background: #FFF;
  color: var(--Color1);
  font-size: var(--16);
  font-weight: 600;
  line-height: var(--26);
  transition: border-color 0.2s var(--EaseUI), box-shadow 0.2s var(--EaseUI);
}
input.text::placeholder,
textarea.text::placeholder {
  color: var(--Gray5);
}
input.text:focus-visible,
select.text:focus-visible,
textarea.text:focus-visible {
  outline: none;
  border-color: var(--Color6);
  box-shadow: 0 0 0 var(--4) rgba(255,122,26,.25);
}

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: 0;
}

#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;
}

/* Футер «Свежо»: листовая полоса со скруглённым верхом-наездом */
footer.footer {
  background: var(--Color1);
  padding: var(--40) var(--SidePadding) var(--36);
  display: flex;
  gap: var(--MainGap);
  align-items: center;
  margin-top: var(--MainPadding);
  border-radius: var(--StackRadius) var(--StackRadius) 0 0;
}
footer.footer .body {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  align-items: center;
}
footer.footer .description {
  flex: 1;
  color: color-mix(in srgb, var(--Color3) 72%, transparent);
  font-family: var(--MainFont);
  font-weight: 600;
  font-size: var(--15);
  letter-spacing: 0.02em;
}
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;
  pointer-events: none;
  padding: var(--18) var(--40);
  display: flex;
  justify-content: space-between;
  gap: var(--MainGap);
  align-items: center;
  background: color-mix(in srgb, var(--Paper) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--Color2) 14%, transparent);
}
header.header .logo {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--3);
  animation: headerLogoSlideIn 1s ease-out;
}
header.header .logo .pixio {
  font-family: var(--DisplayFont);
  font-size: var(--26);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--Color2);
}
header.header .logo svg {
  display: block;
  height: var(--44);
  width: auto;
  color: var(--Color2);
}
header.header .logo .label {
  font-family: var(--MainFont);
  font-weight: 700;
  font-size: var(--12);
  line-height: 1.3;
  color: var(--Gray5);
}
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(--MainFont);
  font-weight: 800;
  font-size: var(--16);
  letter-spacing: 0.01em;
  color: var(--Color1);
  transition: color 0.2s var(--EaseUI);
}
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;
}
/* контакты шапки: телефон — зелёная pill с номером, WhatsApp — суперэллипс-кнопка */
header.header .contacts a {
  --BG:url("../images/ic-phone.svg");
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--10);
  height: var(--48);
  padding: 0 var(--22);
  background-color: var(--Color2);
  border: 0;
  border-radius: var(--20) var(--20) var(--20) var(--8);
  transition: background-color 0.2s var(--EaseUI), transform 0.2s var(--EaseUI);
}
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: inline;
  font-size: var(--16);
  font-weight: 800;
  color: var(--Color3);
}
header.header .contacts a.whatsapp {
  --BG:url("../images/ic-wa.svg");
  width: var(--48);
  padding: 0;
  background-color: var(--Color6);
  border-radius: var(--20) var(--20) var(--8) var(--20);
}
header.header .contacts a:hover {
  background-color: var(--MandarinDeep);
  transform: scale(1.06);
  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.
   ============================================================ */
/* ── ФИШКА-СКЕЛЕТ: пришпиленный герой + бесшовный опак-поток ─────
   Герой липнет к верху (sticky), весь дальнейший контент — сплошной
   «лист» без зазоров: каждая секция full-bleed, опак, со своим
   внутренним ритмом; первая после героя накрывает его скруглённым
   верхом с тенью-воздухом; тёмные полосы наезжают на соседей
   скруглённым верхом (stack-overlap, Часть7 №1). Чистый CSS. */
#mb {
  --StackShadow:0 calc(-1 * var(--20)) var(--60) rgba(20,48,28,.22);
}
#mb > .s {
  margin: 0;
  position: relative;
  /* full-bleed: класс .body на секции не должен резать её ширину —
     гибридную ширину держит внутренний контент (правило ниже) */
  width: 100%;
  max-width: none;
  /* фон секции через каскадную переменную: тип задаёт --SectionBg,
     иначе специфичность #mb>.s глушила бы фоны t18/t21.dark */
  background: var(--SectionBg, var(--Paper));
  padding: var(--80) var(--SidePadding);
}
/* контент секций держит гибридную ширину внутри full-bleed полос */
#mb > .s:not(.t0) > * {
  max-width: var(--Body);
  margin-inline: auto;
}
#mb > .s.t0 {
  position: sticky;
  top: 0;
  padding: 0;
  /* фон героя (крем + SMIL-листья) задаёт сам .t0 */
  background: var(--Paper) url("../images/hero-leaves.svg") center center/cover no-repeat;
}
/* «лист» накрывает пришпиленный герой */
#mb > .s.t0 + .s {
  border-radius: var(--StackRadius) var(--StackRadius) 0 0;
  box-shadow: var(--StackShadow);
}
/* color-block стена услуг — тайлы в край, без внутренних полей */
#mb > .s.t3 {
  padding: 0;
}
#mb > .s.t3 > * {
  max-width: none;
}
/* тёмные полосы и счётчики наезжают скруглённым верхом */
#mb > .s.t18,
#mb > .s.t21.dark,
#mb > .s.t16.dark {
  margin-top: calc(-1 * var(--30));
  border-radius: var(--StackRadius) var(--StackRadius) 0 0;
  box-shadow: var(--StackShadow);
}
#mb > .s.t18 + .s,
#mb > .s.t21.dark + .s {
  margin-top: calc(-1 * var(--30));
  border-radius: var(--StackRadius) var(--StackRadius) 0 0;
}
#mb > .s.t16.dark,
#mb > .s.t21.dark {
  max-width: none;
  width: auto;
}

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;
  /* крем-сцена с SMIL-листьями вместо чёрного кита */
  background: var(--Paper) url("../images/hero-leaves.svg") center center/cover no-repeat;
}
.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(--Color3) var(--ArrowImageURL) center center/45% no-repeat;
  border: var(--2) solid color-mix(in srgb, var(--Color2) 30%, transparent);
  border-radius: var(--20) var(--20) var(--20) var(--8);
  box-shadow: 0 var(--6) var(--16) rgba(20,48,28,.12);
  transition: transform 0.2s var(--EaseUI), background-color 0.2s var(--EaseUI);
}
.t0 .arrows .arrow:hover {
  background-image: var(--ArrowHoverImageURL);
  background-color: var(--Color2);
  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: flex-start;
  flex: 0 0 100%;
  position: relative;
  /* фото слайда — не фоном, а blob-каплей справа (::after) */
  background: none;
  /* декоративный 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 {
  /* ::after — фото слайда в морфящей blob-капле (тилт от курсора),
     ::before — мандариновое «солнце» за каплей */
}
.t0a:before {
  content: "";
  display: block;
  width: var(--230);
  height: var(--230);
  right: var(--192);
  top: var(--100);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.5), rgba(255,122,26,0) 70%);
  position: absolute;
  pointer-events: none;
  animation: t0art 9s ease-in-out infinite alternate;
}
.t0a:after {
  content: "";
  display: block;
  width: min(calc(640*var(--Unit)), 44%);
  aspect-ratio: 10/9;
  right: var(--SidePadding);
  top: 50%;
  --blobShift:-54%;
  transform: translateY(var(--blobShift)) perspective(900px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg));
  background: var(--BG) center center/cover no-repeat;
  border-radius: 58% 42% 55% 45%/48% 56% 44% 52%;
  box-shadow: 0 var(--40) var(--80) rgba(20,48,28,.25), 0 0 0 var(--10) color-mix(in srgb, var(--Color3) 65%, transparent);
  position: absolute;
  pointer-events: none;
  animation: blobMorph 14s ease-in-out infinite alternate;
  will-change: border-radius, transform;
}
@keyframes blobMorph {
  0% {
    border-radius: 58% 42% 55% 45%/48% 56% 44% 52%;
  }
  50% {
    border-radius: 45% 55% 48% 52%/56% 44% 58% 42%;
  }
  100% {
    border-radius: 52% 48% 42% 58%/44% 52% 48% 56%;
  }
}
.t0a .lnk {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.t0a .body {
  max-width: var(--1400);
  width: 100%;
  margin-inline: auto;
  position: relative;
  animation: t0aInit 1.5s ease-out 1 forwards;
  opacity: 0;
}
.t0a .info {
  display: flex;
  flex-direction: column;
  gap: var(--26);
  align-items: flex-start;
  text-align: left;
  max-width: 52%;
  will-change: transform;
  /* hero-типографика «Свежо»: округлый Unbounded на крем-сцене */
}
.t0a .info .title {
  font-family: var(--DisplayFont);
  font-size: var(--HeroSize);
  line-height: 1.14;
  font-weight: var(--HeroWeight);
  text-transform: var(--HeroTransform);
  letter-spacing: -0.02em;
  color: var(--Color1);
}
/* акцент-слово героя — листовая плашка (как в h2), не градиент */
.t0a .info .title span {
  background: var(--Color2);
  color: var(--Color3);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 var(--16) var(--4);
  border-radius: var(--22) var(--22) var(--22) var(--5);
}
.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;
}
/* CTA героя — мандариновая pill-«клавиша» с 3D-press тенью */
.t0a .info .more {
  color: #FFF;
  background: var(--Color6);
  align-self: flex-start;
  position: relative;
  z-index: 2;
  font-size: var(--18);
  font-weight: 900;
  padding: var(--20) var(--44);
  border-radius: 999px;
  box-shadow: 0 var(--6) 0 var(--MandarinDeep), 0 var(--20) var(--36) rgba(255,122,26,.35);
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform 0.3s var(--EaseUI), background-color 0.2s var(--EaseUI);
}
.t0a .info .more:before,
.t0a .info .more:after {
  content: none;
}
.t0a .info .more:hover {
  background: var(--MandarinDeep);
}
.t0a {
  /* плавное появление текста активного слайда */
}
.t0a.current .info {
  animation: SlideInfoIn 0.6s ease both;
}
.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) {
  --SectionBg:var(--MainFrameBg);
  background: var(--SectionBg);
}

.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 — кейс «до/после»: фото во всю карточку, заголовок на нижнем
   скриме, органик-радиус, лифт с тенью в цвет бренда */
.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(--Color1);
  border-radius: var(--CardSharpRadius) var(--CardSharpRadius) var(--CardSharpRadius) var(--12);
  box-shadow: var(--CardShadow);
  overflow: hidden;
  position: relative;
  min-height: calc(440*var(--Unit));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: none;
  transition: transform 0.35s var(--EaseOut), box-shadow 0.35s var(--EaseOut);
}
.t2a:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--BG) center center/cover no-repeat;
  transition: transform 0.5s var(--EaseOut);
}
.t2a .title {
  position: relative;
  padding: var(--96) var(--26) var(--12);
  font-family: var(--DisplayFont);
  font-weight: 600;
  font-size: var(--22);
  line-height: 1.35;
  color: var(--Color3);
  background: linear-gradient(180deg, rgba(20,48,28,0), rgba(20,48,28,.82) 55%);
}
.t2a .more {
  position: relative;
  margin: 0 var(--26) var(--24);
  align-self: flex-start;
  color: #FFC48A;
  background: rgba(20,48,28,.82);
  padding: var(--8) var(--18) var(--9);
  border-radius: 999px;
}
.t2a .more:before {
  content: none;
}
.t2a:hover {
  transform: translateY(calc(0px - var(--10)));
  box-shadow: 0 var(--30) var(--60) rgba(30,86,49,.3);
  text-decoration: none;
}
.t2a:hover:before {
  transform: scale(1.05);
}

/* ============================================================
   Тип 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);
}

/* ── ФИШКА: t3 — color-block СТЕНА услуг (karatsc) ─────────────
   Тайлы во всю ширину экрана, без рамок и зазоров: каждая услуга —
   своя цветная плашка (лист/мандарин/крем/лайм) с фото-каплей и
   ghost-номером; заголовок секции — на первой «титульной» плашке */
.t3 {
  gap: 0;
}
.t3 h2.title {
  padding: var(--72) var(--SidePadding) var(--40);
  margin: 0;
}
.t3 .items {
  gap: 0;
}
.t3a {
  counter-increment: section3;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  flex: 0 0 calc(100% / var(--InLine));
  padding: var(--60) var(--SidePadding) var(--52);
  transition: filter 0.3s var(--EaseUI);
}
.t3 .items {
  counter-reset: section3;
}
/* цветовая волна тайлов: лист → мандарин → глубокий крем → мягкий лайм */
.t3a:nth-child(4n+1) {
  background: var(--Color2);
  --TileInk:var(--Color3);
  --TileSub:#D9EDD3;
}
.t3a:nth-child(4n+2) {
  background: var(--Color6);
  --TileInk:#FFF;
  --TileSub:#FFE9D2;
}
.t3a:nth-child(4n+3) {
  background: var(--PaperDeep);
  --TileInk:var(--Color1);
  --TileSub:var(--Gray7);
}
.t3a:nth-child(4n+4) {
  background: var(--LeafTint);
  --TileInk:var(--Color1);
  --TileSub:var(--Gray7);
}
/* ghost-номер услуги */
.t3a:after {
  content: "0" counter(section3);
  position: absolute;
  right: var(--30);
  top: var(--18);
  font-family: var(--DisplayFont);
  font-weight: 800;
  font-size: var(--128);
  line-height: 1;
  color: var(--TileInk);
  opacity: 0.12;
  pointer-events: none;
}
.t3a img {
  height: calc(280*var(--Unit));
  width: calc(340*var(--Unit));
  object-fit: cover;
  border-radius: 56% 44% 52% 48%/50% 54% 46% 50%;
  box-shadow: 0 var(--20) var(--40) rgba(20,48,28,.2);
}
.t3a .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--14);
  padding: var(--30) 0 0;
  background: none;
}
.t3a .info .title {
  font-family: var(--DisplayFont);
  font-size: var(--26);
  font-weight: 700;
  line-height: 1.3;
  color: var(--TileInk);
}
.t3a .info .description {
  color: var(--TileSub);
  font-size: var(--18);
  line-height: 1.55;
  font-weight: 600;
}
.t3a .info .more {
  margin-top: auto;
  align-self: flex-start;
  color: var(--TileInk);
  border: var(--2) solid color-mix(in srgb, var(--TileInk) 45%, transparent);
  border-radius: 999px;
  padding: var(--10) var(--26) var(--12);
  transition: background-color 0.25s var(--EaseUI), color 0.25s var(--EaseUI);
}
.t3a .info .more:before {
  content: none;
}
.t3a .info .more:hover {
  background: color-mix(in srgb, var(--TileInk) 16%, transparent);
}
.t3a:hover {
  filter: brightness(1.05);
}

/* ============================================================
   Тип 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 — «полка эко-средств»: карточки без рамок стоят на общей
   линии-полке; иконка-бутылка (il) + номер-капля; hover — бутылка
   «приподнимается» с полки */
.t6 .items {
  border-bottom: var(--5) solid color-mix(in srgb, var(--Color2) 30%, transparent);
  padding-bottom: var(--36);
  position: relative;
}
.t6a {
  --HeadColor:var(--Color2);
  counter-increment: section6;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--16);
  border: 0;
  border-radius: var(--CardRadiusLg);
  background: transparent;
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  width: calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  padding: var(--48) var(--20) 0;
  transition: transform 0.4s var(--EaseOut);
}
.t6a:nth-child(even) {
  --HeadColor:var(--Color6);
}
/* номер-капля шага (в вариантах с иконкой; в базовом t6 номер — :before) */
.t6a:after {
  content: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--44);
  height: var(--44);
  background: var(--HeadColor);
  color: #FFF;
  font-family: var(--DisplayFont);
  font-weight: 700;
  font-size: var(--18);
  border-radius: 50% 50% 50% 12%;
  position: absolute;
  left: var(--12);
  top: 0;
  transform: rotate(-8deg);
  pointer-events: none;
  transition: transform 0.3s var(--EaseUI);
}
.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: translateY(calc(0px - var(--8)));
}
.t6a:hover:after {
  transform: rotate(6deg) scale(1.1);
}
.t6a .info {
  display: flex;
  flex-direction: column;
  gap: var(--12);
  flex: 1;
}
.t6a h3.title {
  color: var(--Color1);
  font-family: var(--DisplayFont);
  font-weight: 700;
  font-size: var(--22);
  line-height: 1.33;
}
.t6a .description {
  color: var(--Gray7);
  line-height: 1.6;
  font-size: var(--16);
  font-weight: 600;
}
.t6.il .t6a {
  flex-direction: column;
}

.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/contain no-repeat;
  width: var(--96);
  height: var(--96);
  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;
}
.t6.il .t6a:after,
.t6.it .t6a:after {
  content: counter(section6);
}

/* 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;
}
/* t8 — полоса pill-клавиш быстрого заказа: по центру, крупно */
.t8 .items {
  justify-content: center;
  align-items: center;
}

.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(--26) var(--26) var(--26) var(--10);
  overflow: hidden;
}
.t12a:nth-child(even) span {
  border-radius: var(--26) var(--26) var(--10) var(--26);
}
.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;
  align-items: center;
  gap: var(--24);
  border-radius: var(--CardRadius) var(--CardRadius) var(--CardRadius) var(--12);
  padding: var(--36) var(--26);
  background: #FFF;
  box-shadow: 0 var(--12) var(--30) rgba(30,86,49,.08);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  transition: transform 0.3s var(--EaseOut), box-shadow 0.3s var(--EaseOut);
}
.t13a:before {
  content: "";
  display: block;
  width: var(--96);
  height: var(--96);
  flex: 0 0 var(--96);
  border-radius: 50% 50% 50% 12%;
  background: var(--LeafTint) var(--BG) center center/55% no-repeat;
}
.t13a .description {
  font-weight: 800;
  font-size: var(--18);
  line-height: 1.45;
  color: var(--Color1);
}
.t13a:hover {
  transform: translateY(calc(0px - var(--6)));
  box-shadow: 0 var(--20) var(--40) rgba(30,86,49,.16);
}

/* ============================================================
   Тип 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);
}
/* стрелка аккордеона — своя (не Material: вебфонт может не доехать) */
.t15a > .title:after {
  content: "";
  background: var(--LeafTint) var(--ArrowImageURL) center center/40% no-repeat;
  border-radius: 50% 50% 50% 12%;
  width: var(--44);
  height: var(--44);
  flex: 0 0 var(--44);
  display: inline-flex;
  transform: rotate(-90deg);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.t15a.current > .title:after {
  background-color: var(--MandarinSoft);
}
.t15a .description {
  display: none;
  padding-bottom: var(--ButtonPaddingTB);
}
.t15a.current > .title:after {
  transform: rotate(90deg);
}
.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 {
  --SectionBg:var(--Color1);
  background: var(--SectionBg);
  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;
}
/* иконки контактов — свои SVG (не Material-лигатуры), суперэллипс-бейджи */
.t16a:before {
  content: "";
  display: block;
  flex: 0 0 var(--48);
  width: var(--48);
  height: var(--48);
  border-radius: 50% 50% 50% 12%;
  background-color: var(--BGC);
  background-image: url("../images/ic-phone.svg");
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
}
.t16a:nth-child(3n+2):before {
  background-image: url("../images/ic-mail.svg");
}
.t16a:nth-child(3n):before {
  background-image: url("../images/ic-pin.svg");
}
.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(--40);
  background: #FFF;
  border-radius: var(--40) var(--40) var(--40) var(--14);
  box-shadow: 0 var(--24) var(--60) rgba(30,86,49,.14);
}
/* кнопка отправки — фирменная мандариновая pill-клавиша на всю ширину */
.t16 .form .btn {
  width: 100%;
  background: var(--Color6);
  border: 0;
  color: #FFF;
  font-weight: 900;
  font-size: var(--18);
  padding: var(--18) var(--32);
  border-radius: 999px;
  box-shadow: 0 var(--6) 0 var(--MandarinDeep), 0 var(--16) var(--30) rgba(255,122,26,.3);
}
.t16 .form .btn:hover {
  background: var(--MandarinDeep);
}
.t16 .form .btn:active {
  transform: translateY(var(--4));
  box-shadow: 0 var(--1) 0 var(--MandarinDeep);
}

.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 — листовая полоса счётчиков (не чёрная): глубокий зелёный,
   округлые Unbounded-числа кремом, count-up на входе (JS) */
.t18 {
  --SectionBg:var(--Color2) radial-gradient(circle at 85% 15%, rgba(255,255,255,.08), transparent 45%);
  background: var(--SectionBg);
  padding: var(--MainPadding);
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  color: var(--Color3);
  text-align: center;
}
.t18 h2.title {
  color: var(--Color3);
}
.t18 h2.title span {
  background: var(--Color6);
}
.t18 .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--MainGap) var(--MainPadding);
  justify-content: center;
}
.t18 .description {
  color: color-mix(in srgb, var(--Color3) 75%, transparent);
}

.t18a {
  display: flex;
  flex-direction: column;
  gap: var(--16);
}
.t18a .title {
  font-family: var(--DisplayFont);
  font-size: var(--80);
  font-weight: 700;
  color: var(--Color3);
}
.t18a:nth-child(even) .title {
  color: #FFB877;
}
.t18a .description {
  font-family: var(--LabelFont);
  font-weight: 700;
  font-size: var(--16);
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
}

/* ============================================================
   Тип 19 — CTA «Готовы попробовать?» (центрированный блок)
   ============================================================ */
/* CTA-блок: компактная карточка с градиентной рамкой
   (как «3 дня до запуска» на pixio.kz) */
/* t19 — CTA-карточка с жёсткой офсет-тенью (физ-блок, не градиент-рамка) */
.t19 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--MainPadding) var(--SidePadding);
}
.t19 .info {
  background: #FFF;
  border: var(--3) solid var(--Color1);
  border-image: none;
  border-radius: var(--32) var(--32) var(--32) var(--12);
  box-shadow: var(--14) var(--14) 0 var(--Color2);
  padding: var(--44) var(--64);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--12);
  text-align: center;
  max-width: 100%;
  transition: transform 0.3s var(--EaseOut), box-shadow 0.3s var(--EaseOut);
}
.t19 .info:hover {
  transform: translate(var(--4), var(--4));
  box-shadow: var(--8) var(--8) 0 var(--Color2);
}
.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-weight: 700;
  font-size: var(--16);
  color: var(--Gray5);
  /* акцентная строка (цена) — сплошной мандарин Unbounded */
}
.t19 .info .description strong,
.t19 .info .description b {
  display: block;
  font-family: var(--DisplayFont);
  font-weight: 700;
  font-size: var(--48);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--Color6);
}

/* ============================================================
   Тип 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);
  --SectionBg:var(--Color1);
  background: var(--SectionBg);
  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 > .title:before {
  content: "«»";
  display: block;
  font-family: var(--DisplayFont);
  font-size: var(--48);
  line-height: 0.9;
  color: var(--Color6);
}
.t21.dark .t21a > .title {
  color: color-mix(in srgb, var(--Color3) 88%, transparent);
}
.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);
  /* глава прайса не рвётся между колонками */
  break-inside: avoid;
}
.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);
}
/* подкатегория прайса — умеренный кегль под главой */
.t23aa > .title {
  font-size: var(--22);
  color: var(--Color1);
  padding-bottom: var(--5);
}

.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(--MandarinDeep);
  font-weight: 800;
}
.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;
  }
  #mb > .s:not(.t0) > * {
    max-width:100%;
  }
  :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;
    pointer-events: auto;
    background: var(--Paper);
    padding: var(--12) var(--SidePadding);
  }
  header.header .logo .pixio {
    font-size: var(--22);
  }
  header.header .logo svg {
    height: var(--36);
  }
  header.header .contacts a {
    height: var(--40);
    padding: 0 var(--14);
  }
  header.header .contacts a span {
    display: none;
  }
  header.header .contacts a.whatsapp {
    width: var(--40);
  }
  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(--Color2);
    border-bottom: 2px solid var(--Color2);
    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(--Color2);
    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: #143420;
    transition: opacity 0.25s linear;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--Type3Padding) var(--BlockIconWidth);
    gap: var(--MainBlockPadding);
  }
  header.header .menu a {
    font-size: var(--22);
    font-weight: 800;
    color: var(--Color3);
  }
  header.header .menu a:hover {
    color: var(--Color6);
  }
  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);
    /* крест светлый над тёмным оверлеем */
    border-top-color: var(--Color3);
    border-bottom-color: var(--Color3);
  }
  .menu header.header .m .mb:after {
    transform: translateY(-50%) rotate(-45deg);
    background: var(--Color3);
  }
  .menu header.header .logo svg {
    color: var(--Color3);
  }
  .menu header.header .logo svg text {
    fill: var(--Color3);
  }
  .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);
  }
  /* ── bespoke-мобайл «Свежо» ─────────────────────────────────── */
  #mb {
    overflow-x: clip;
  }
  #mb > .s {
    padding: var(--40) var(--SidePadding);
  }
  :root {
    --StackRadius: var(--24);
  }
  /* герой: текст сверху, blob-фото снизу */
  .t0a {
    padding: 0 var(--SidePadding);
    align-items: center;
  }
  .t0a .body {
    padding: calc(90*var(--Unit)) 0 calc(300*var(--Unit));
  }
  .t0a .info {
    max-width: 100%;
  }
  .t0a:before {
    width: var(--96);
    height: var(--96);
    right: var(--15);
    top: var(--30);
  }
  .t0a:after {
    width: min(320px, 72%);
    right: var(--SidePadding);
    top: auto;
    bottom: var(--30);
    --blobShift:0;
  }
  .t0 .container {
    min-width: 0;
  }
  /* color-block стена — в одну колонку */
  .t3 h2.title {
    padding: var(--40) var(--SidePadding) var(--20);
  }
  .t3 .items {
    flex-direction: column;
  }
  .t3a {
    flex: none;
    padding: var(--36) var(--SidePadding) var(--40);
  }
  .t3a:after {
    font-size: var(--72);
  }
  .t3a img {
    width: 100%;
    height: calc(210*var(--Unit));
  }
  /* полка этапов — колонка, карточки не тянутся */
  .t6 .items {
    flex-direction: column;
    border-bottom-width: var(--3);
  }
  .t6a {
    flex: none;
    width: auto;
    padding: var(--40) var(--12) 0;
  }
  .t2a {
    flex: none;
    min-height: calc(280*var(--Unit));
  }
  .t13 .items {
    flex-direction: column;
  }
  .t13a {
    flex: none;
  }
  .t8 .items {
    flex-direction: column;
    align-items: stretch;
  }
  .t23 .items {
    columns: 1;
  }
  .t23a > .title {
    font-size: calc(26*var(--Unit));
  }
  .t19 .info {
    padding: var(--30) var(--24);
  }
  .t19 .info .description strong,
  .t19 .info .description b {
    font-size: var(--36);
  }
  /* грабля кита: форма t16 обязана быть 100% ширины в колонке */
  .t16 .form {
    flex: 0 0 auto;
    width: 100%;
    padding: var(--24);
  }
  .t16.mr .line .map,
  .t16.mt .body > .map {
    flex: 0 0 auto;
    min-height: 280px;
  }
  .t21 .container,
  .t21 .body {
    max-width: 100%;
    min-width: 0;
  }
  footer.footer {
    padding: var(--24) var(--SidePadding);
    gap: var(--10);
  }
}
/* конец @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;
}

/* ===================================================================
   СВЕЖО — слой движения и курсора (новые правила, кит не дублируют)
   =================================================================== */

/* 1) Scroll-reveal через IntersectionObserver: без JS всё видно,
      с .rv-on секции выплывают снизу */
body.rv-on #mb > .s:not(.t0) {
  opacity: 0.001;
  transform: translateY(calc(28*var(--Unit)));
  transition: opacity 0.9s var(--EaseOut), transform 0.9s var(--EaseOut);
}
body.rv-on #mb > .s.in {
  opacity: 1;
  transform: none;
}
/* каскад детей-карточек */
body.rv-on .t3a,
body.rv-on .t6a,
body.rv-on .t13a,
body.rv-on .t2a,
body.rv-on .t18a {
  opacity: 0.001;
  transform: translateY(calc(24*var(--Unit)));
  transition: opacity 0.75s var(--EaseOut), transform 0.75s var(--EaseOut);
  transition-delay: calc(var(--i, 0) * 70ms);
}
body.rv-on .s.in .t3a,
body.rv-on .s.in .t6a,
body.rv-on .s.in .t13a,
body.rv-on .s.in .t2a,
body.rv-on .s.in .t18a {
  opacity: 1;
  transform: none;
}

/* 2) Ambient: дрейф листьев по секциям-акцентам (t18/t21.dark) */
.t18 h2.title,
.t21.dark h2.title {
  position: relative;
}
@keyframes leafSway {
  0% {
    transform: rotate(-6deg) translateY(0);
  }
  100% {
    transform: rotate(8deg) translateY(calc(-10*var(--Unit)));
  }
}
.t18 h2.title:before,
.t21.dark h2.title:before {
  content: "";
  display: inline-block;
  width: var(--30);
  height: var(--30);
  margin-right: var(--12);
  vertical-align: middle;
  background: url("../images/leaf.svg") center center/contain no-repeat;
  animation: leafSway 4s ease-in-out infinite alternate;
}

/* 3) Живой курсор: мягкий мандариновый spotlight за курсором.
      body ставит --mx/--my (JS ≈15 строк в index.html) */
#mb {
  position: relative;
}
body:not([data-language])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s linear;
  background: radial-gradient(calc(420*var(--Unit)) at calc(var(--mx, 0.5) * 100vw) calc(var(--my, 0.4) * 100vh), rgba(255,122,26,.1), transparent 65%);
}
body.cursor-on:not([data-language])::after {
  opacity: 1;
}

/* 4) Magnetic pill-кнопки — JS двигает --tx/--ty (transform уже в .btn) */

@media (prefers-reduced-motion: reduce) {
  body.rv-on #mb > .s:not(.t0),
  body.rv-on .t3a,
  body.rv-on .t6a,
  body.rv-on .t13a,
  body.rv-on .t2a,
  body.rv-on .t18a {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .t18 h2.title:before,
  .t21.dark h2.title:before,
  .t0a:before,
  .t0a:after {
    animation: none;
  }
  body:not([data-language])::after {
    display: none;
  }
}

@media (max-width: 1024px) {
  body:not([data-language])::after {
    display: none;
  }
}

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

/* Попап успешной отправки заявки */
.rq-ok{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,12,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;font-family:var(--MainFont,system-ui,-apple-system,Segoe UI,Roboto,sans-serif)}
.rq-ok.is-open{opacity:1;visibility:visible}
.rq-ok__box{position:relative;max-width:440px;width:100%;background:var(--Color3,#fff);color:var(--Color1,#0e1116);border-radius:var(--MainBorderRadius,18px);padding:42px 34px 34px;text-align:center;box-shadow:0 40px 90px -20px rgba(0,0,0,.45);transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.rq-ok.is-open .rq-ok__box{transform:none}
.rq-ok__ic{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--Gradient,linear-gradient(135deg,#6646D5,#99BA2B))}
.rq-ok__t{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:0 0 10px}
.rq-ok__d{font-size:15px;line-height:1.55;color:var(--Gray7,#5b6472);margin:0 0 26px}
.rq-ok__btn{font-family:var(--MonoFont,var(--MainFont,inherit));text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:600;cursor:pointer;border:0;border-radius:var(--ButtonsBorderRadius,8px);padding:14px 32px;color:#fff;background:var(--Gradient,linear-gradient(135deg,#6646D5,#99BA2B));transition:transform .2s ease}
.rq-ok__btn:hover{transform:scale(1.04)}
.rq-ok__x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:transparent;cursor:pointer;font-size:26px;line-height:1;color:var(--Gray4,#9aa3af);transition:color .2s}
.rq-ok__x:hover{color:var(--Color1,#0e1116)}