/* Pixio 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";
/* Шрифты self-hosted (variable, cyrillic ✓): Exo 2 — дисплей, Golos Text — текст */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/exo-2-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/exo-2-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/exo-2-cyrillic-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/exo-2-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
:root {
  /* КАНТ — alpine-tech dark: Exo 2 (дисплей) + Golos Text (текст), кириллица ✓ */
  --MainFont:'Golos Text', system-ui, sans-serif;
  --HeadFont:'Exo 2', 'Golos Text', system-ui, sans-serif;
  --MonoFont:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --MaterialIcons:"Material Icons";
  --BG:"";
  --InLine:3;
  --InPLine:3;
  /* Палитра «ночной склон»: #0E1522 ночь (60) / #EAF2F8 снег (30) / #3BD6FF ледниковый циан (10) */
  --Color1:#0E1522;
  --Color2:#3BD6FF;
  --Color6:#9BEBFF;
  --Red:#FF5A4E;
  --Color3:#EAF2F8;
  --Night:#0E1522;
  --Night2:#0B111C;
  --Night3:#131E30;
  --Snow:#EAF2F8;
  --Cyan:#3BD6FF;
  --InkMute:#43596F;
  --SnowMute:rgba(234,242,248,.62);
  --HairDark:rgba(234,242,248,.14);
  --HairSnow:rgba(14,21,34,.16);
  --CyanGlow:rgba(59,214,255,.35);
  --MainFrameBg:#F4F8FB;
  --Color4:#6E8296;
  --Gray8:#DEE8F1;
  --Gray7:#B9C7D6;
  --Gray5:#7E93A8;
  --Gray4:#5E7488;
  --Gray3:#C9D6E2;
  --Gray2:#233247;
  --Gray0:#F9FBFD;
  /* Ледниковый градиент */
  --GradFrom:var(--Color2);
  --GradTo:var(--Color6);
  --Gradient:linear-gradient(90deg, var(--GradFrom), var(--GradTo));
  --GradientR:linear-gradient(90deg, var(--GradTo), var(--GradFrom));
  --Bfr:"";
  /*
     Адаптивная единица измерения (чистый CSS, без JS).
     Макет свёрстан под ширину 1760: --Unit — это «1px макета»,
     масштабируется пропорционально ширине viewport.
     cqw вместо vw: без контейнера-предка он равен ширине viewport,
     а внутри admin-превью (#sections, container-type:inline-size)
     — ширине превью. На мобильных переопределяется в мобайл-блоке main.scss.
  */
  --Unit:calc(100cqw/1760);
  /*
     Совместимость: генератор стилей секций (SectionsCSSView.php)
     пишет calc(Npx/var(--MainCoef)). tan(atan2(...)) даёт безразмерное
     отношение 1760/ширина — тот же коэффициент, но без core.js.
     Можно удалить после перевода генератора на var(--Unit).
  */
  --MainCoef:tan(atan2(1760px,100cqw));
  --MainGap:var(--24);
  --Gap:var(--24);
  --Body:calc(1400*var(--Unit));
  /* Диагональ «линии падения склона»: срез швов секций (~4.9° при 150/1760) */
  --Cut:calc(150*var(--Unit));
  --CutAngle:4.9deg;
  /* Центрирующий боковой паддинг full-bleed секций */
  --ScenePad:max(var(--SidePadding), calc((100% - var(--Body)) / 2));
  --EaseOut:cubic-bezier(.16,1,.3,1);
  --EaseUI:cubic-bezier(.4,0,.2,1);
  --7:calc(7*var(--Unit));
  --11:calc(11*var(--Unit));
  --13:calc(13*var(--Unit));
  --17:calc(17*var(--Unit));
  --21:calc(21*var(--Unit));
  --28:calc(28*var(--Unit));
  --34:calc(34*var(--Unit));
  --38:calc(38*var(--Unit));
  --45:calc(45*var(--Unit));
  --54:calc(54*var(--Unit));
  --56:calc(56*var(--Unit));
  --68:calc(68*var(--Unit));
  --76:calc(76*var(--Unit));
  --88:calc(88*var(--Unit));
  --90:calc(90*var(--Unit));
  --110:calc(110*var(--Unit));
  --112:calc(112*var(--Unit));
  --120:calc(120*var(--Unit));
  --140:calc(140*var(--Unit));
  --160:calc(160*var(--Unit));
  --170:calc(170*var(--Unit));
  --200:calc(200*var(--Unit));
  --220:calc(220*var(--Unit));
  --240:calc(240*var(--Unit));
  --260:calc(260*var(--Unit));
  --280:calc(280*var(--Unit));
  --300:calc(300*var(--Unit));
  --320:calc(320*var(--Unit));
  --340:calc(340*var(--Unit));
  --360:calc(360*var(--Unit));
  --380:calc(380*var(--Unit));
  --420:calc(420*var(--Unit));
  --440:calc(440*var(--Unit));
  --460:calc(460*var(--Unit));
  --480:calc(480*var(--Unit));
  --520:calc(520*var(--Unit));
  --540:calc(540*var(--Unit));
  --620:calc(620*var(--Unit));
  --640:calc(640*var(--Unit));
  --660:calc(660*var(--Unit));
  --680:calc(680*var(--Unit));
  --700:calc(700*var(--Unit));
  --720:calc(720*var(--Unit));
  --760:calc(760*var(--Unit));
  --800:calc(800*var(--Unit));
  --840:calc(840*var(--Unit));
  --900:calc(900*var(--Unit));
  --1100:calc(1100*var(--Unit));
  --1200:calc(1200*var(--Unit));
  --1400:calc(1400*var(--Unit));
  --1:calc(1*var(--Unit));
  --2:calc(2*var(--Unit));
  --3:calc(3*var(--Unit));
  --4:calc(4*var(--Unit));
  --5:calc(5*var(--Unit));
  --6:calc(6*var(--Unit));
  --8:calc(8*var(--Unit));
  --9:calc(9*var(--Unit));
  --10:calc(10*var(--Unit));
  --12:calc(12*var(--Unit));
  --14:calc(14*var(--Unit));
  --15:calc(15*var(--Unit));
  --16:calc(16*var(--Unit));
  --18:calc(18*var(--Unit));
  --19:calc(19*var(--Unit));
  --20:calc(20*var(--Unit));
  --22:calc(22*var(--Unit));
  --24:calc(24*var(--Unit));
  --26:calc(26*var(--Unit));
  --29:calc(29*var(--Unit));
  --30:calc(30*var(--Unit));
  --32:calc(32*var(--Unit));
  --36:calc(36*var(--Unit));
  --40:calc(40*var(--Unit));
  --42:calc(42*var(--Unit));
  --44:calc(44*var(--Unit));
  --48:calc(48*var(--Unit));
  --50:calc(50*var(--Unit));
  --52:calc(52*var(--Unit));
  --60:calc(60*var(--Unit));
  --64:calc(64*var(--Unit));
  --72:calc(72*var(--Unit));
  --80:calc(80*var(--Unit));
  --96:calc(96*var(--Unit));
  --100:calc(100*var(--Unit));
  --128:calc(128*var(--Unit));
  --150:calc(150*var(--Unit));
  --192:calc(192*var(--Unit));
  --195:calc(195*var(--Unit));
  --230:calc(230*var(--Unit));
  --250:calc(250*var(--Unit));
  --395:calc(395*var(--Unit));
  --500:calc(500*var(--Unit));
  --550:calc(550*var(--Unit));
  --560:calc(560*var(--Unit));
  --600:calc(600*var(--Unit));
  --880:calc(880*var(--Unit));
  --970:calc(970*var(--Unit));
  --1015:calc(1015*var(--Unit));
  --1152:calc(1152*var(--Unit));
  --1280:calc(1280*var(--Unit));
  --1760:calc(1760*var(--Unit));
  --MainContentGap:0px;
  --MainPadding:var(--80);
  /* Боковые отступы основных секций */
  --SidePadding:var(--64);
  --MoreGap:var(--15);
  --HeaderSliderPaddingTB:var(--230);
  --HeaderSliderPaddingLR:var(--SidePadding);
  --HeaderSliderMinWidth:var(--550);
  --HeaderSliderMaxWidth:var(--600);
  --ContentVerticalGapTB:var(--40);
  --ContentVerticalGapLR:0;
  --MainBorderRadius:var(--6);
  --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(--16);
  --ButtonPaddingLR:var(--28);
  /* Кнопки «Кант» — срез канта на углу, лёгкий радиус */
  --ButtonsBorderRadius:var(--4);
  --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.
     ============================================================ */
  /* Типографика-характер: Exo 2, sentence case, без градиент-линий */
  --HeadingWeight:800; /* вес h1–h5 / .h2 */
  --HeadingTracking:-0.015em; /* трекинг заголовков */
  --HeadingTransform:none; /* регистр .h2 */
  --HeadingLine:none; /* линия под .h2 выключена — вместо неё кант-штрих */
  --HeadingLineFill:var(--Gradient);
  --H3Weight:700;
  --HeroSize:var(--88); /* hero-заголовок t0a */
  --HeroWeight:800;
  --HeroTransform:uppercase;
  --SectionHeadSize:var(--48); /* крупные заголовки секций t2/t6 */
  --LabelFont:var(--MonoFont); /* mono-лейблы: .more/.annotation/подписи */
  --LabelTransform:uppercase;
  --LabelTracking:0.14em;
  /* Геометрия и фактура карточек */
  --CardRadius:var(--10); /* t3a/t7a/t9/t13a/t16.form/t17a */
  --CardRadiusLg:var(--12); /* t6a */
  --CardSharpRadius:var(--10); /* t2a */
  --CardFill:var(--MainFrameBg); /* заливка карточек на снежных разворотах */
  --CardDark:rgba(19,30,48,.72); /* панель на ночных сценах */
  --CardShadow:0 var(--20) var(--40) rgba(4,9,18,.35); /* тень в цвет ночи */
  --CardBorderWidth:var(--1); /* рамка t6a */
  --CardAccentBorder:var(--3); /* кант слева t2a */
  --BadgeRadius:var(--6); /* номер-бейдж t6a */
  --DividerWidth:1px; /* разделитель аккордеона t15a */
  --DividerColor:var(--HairDark);
  /* Кнопки */
  --ButtonBorderWidth:var(--1);
  --ButtonTransform:none;
  --ButtonFont:var(--HeadFont);
}

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,
h1 span, h2 span, h3 span, h4 span, h5 span,
h1 b, h2 b, h3 b {
  font-family: var(--HeadFont), sans-serif;
}

h1, h2, h3, h4, h5 {
  padding: 0;
  margin: 0;
  font-size: var(--40);
  font-weight: var(--HeadingWeight);
  letter-spacing: var(--HeadingTracking);
  color: var(--Snow);
}
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(--Snow);
}

/*
   Заголовки секций в стилистике pixio.kz:
   жирный uppercase + градиентная линия снизу,
   акцентные слова в <span> — градиентным текстом.
*/
.h2,
h2.title {
  font-size: var(--44);
  line-height: 1.12;
  font-weight: var(--HeadingWeight);
  text-transform: var(--HeadingTransform);
  color: var(--Snow);
  position: relative;
  padding-bottom: var(--24);
}
/* кант-штрих: короткая диагональная засечка вместо градиентной линии */
.h2:after,
h2.title:after {
  content: "";
  display: block;
  position: absolute;
  left: var(--2);
  bottom: 0;
  width: var(--56);
  height: var(--4);
  border-radius: var(--2);
  background: var(--Cyan);
  transform: skewY(calc(0deg - var(--CutAngle)));
  box-shadow: 0 0 var(--12) var(--CyanGlow);
}
.h2 span,
h2.title span {
  color: var(--Cyan);
  background: none;
}

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

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

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

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

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

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

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

/*
   Кнопки pixio.kz: .btn — прозрачная «тихая» mono-кнопка,
   .btn.cl — главный CTA с градиентом.
   База адаптивная: цвет и рамка берутся от текущего цвета текста
   контекста (на тёмном фоне — светлая, на светлом — тёмная); раньше
   была жёстко белой и пропадала на светлых фонах.
*/
.btn {
  display: inline-block;
  color: inherit;
  letter-spacing: 0.02em;
  font-size: var(--16);
  font-weight: 600;
  line-height: 1.45;
  font-family: var(--ButtonFont), sans-serif;
  text-transform: var(--ButtonTransform);
  padding: var(--16) var(--32);
  border: var(--ButtonBorderWidth) solid color-mix(in srgb, currentColor 34%, transparent);
  background: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: var(--ButtonsBorderRadius);
  /* «срез канта» на правом верхнем углу */
  clip-path: polygon(0 0, calc(100% - var(--16)) 0, 100% var(--16), 100% 100%, 0 100%);
  transform: translateY(0);
  transform-origin: center;
  transition: transform 0.35s var(--EaseUI), background-color 0.35s var(--EaseUI), border-color 0.35s var(--EaseUI), box-shadow 0.35s var(--EaseUI), color 0.35s var(--EaseUI);
}
.btn:hover {
  transform: translateY(calc(0px - var(--3)));
  border-color: var(--Cyan);
  text-decoration: none;
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: var(--2) solid var(--Cyan);
  outline-offset: var(--3);
}
.btn.cl {
  background: var(--Cyan);
  border: 0;
  color: var(--Night);
  font-family: var(--HeadFont), sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: var(--18);
  line-height: 1.4;
  padding: var(--19) var(--40);
  filter: drop-shadow(0 var(--12) var(--28) rgba(59,214,255,.3));
}
.btn.cl:hover {
  background: var(--Color6);
  filter: drop-shadow(0 var(--16) var(--34) rgba(59,214,255,.42));
}
.btn {
  /* t1 — исторический вариант «для светлых фонов»; после того как база
     стала адаптивной, совпадает с ней (оставлен для совместимости данных) */
}
.btn.t1 {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  color: inherit;
}

/* Значение показателя t7aa (бывший .ValueString) */
.t7aa .title {
  font-family: var(--HeadFont), sans-serif;
  font-size: var(--36);
  font-weight: 800;
  color: var(--Snow);
}

/* Вопрос аккордеона t15a (бывший .Type21H) */
.t15a .title {
  font-size: var(--24);
  font-weight: 700;
  line-height: 1.35;
  color: var(--Snow);
  cursor: pointer;
  padding: var(--24) 0;
  transition: color 0.3s var(--EaseUI);
}
.t15a > .title:hover {
  color: var(--Cyan);
}

/* Заголовок главы прайса t23a (бывший .MenuDep) */
.t23a > .title {
  font-family: var(--HeadFont), sans-serif;
  font-size: var(--32);
  font-weight: 800;
  color: var(--Snow);
}

/*
   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(--Snow);
  font-style: normal;
  position: relative;
  scroll-behavior: smooth;
  /* ночной склон + изолинии высот */
  background: var(--Night) url("../images/iso.svg") center top/1600px auto repeat;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 0;
}
/* луч фонаря: следует за курсором (--mx/--my ставит JS), подсвечивает ночные сцены */
@media (pointer: fine) {
  body:not([data-language])::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(28vmax circle at calc(var(--mx, .5) * 100vw) calc(var(--my, .35) * 100vh), rgba(122,204,244,.16) 0%, rgba(80,150,200,.07) 45%, transparent 100%);
    opacity: var(--BeamOn, 0);
    transition: opacity 0.6s var(--EaseUI);
  }
}
/* плёночное зерно поверх сцен */
body:not([data-language])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  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);
}

div.text,
input.text,
select.text,
textarea.text {
  width: 100%;
  border: 1px solid rgba(14,21,34,.28);
  border-radius: var(--6);
  padding: var(--14) var(--16);
  background: #fff;
  color: var(--Night);
  font-size: var(--16);
  line-height: 1.4;
  transition: border-color 0.25s var(--EaseUI), box-shadow 0.25s var(--EaseUI);
}
input.text::placeholder,
textarea.text::placeholder {
  color: var(--InkMute);
}
input.text:focus-visible,
select.text:focus-visible,
textarea.text:focus-visible {
  border-color: var(--Cyan);
  box-shadow: 0 0 0 var(--3) rgba(59,214,255,.25);
  outline: none;
}

textarea.text {
  resize: vertical;
}

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

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

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

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

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

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

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

/*
   Шапка pixio.kz (порт из pixio.kz/css/main.css): фиксированная,
   mix-blend-mode:difference — элементы белые, на светлом фоне
   автоматически инвертируются. Текстовый логотип + mono-лейбл,
   контакты — круглые иконки. Клики проходят сквозь пустые области.
*/
@keyframes headerLogoSlideIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
header.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  mix-blend-mode: difference;
  pointer-events: none;
  padding: var(--24) var(--32);
  display: flex;
  justify-content: space-between;
  gap: var(--MainGap);
  align-items: center;
}
header.header .logo {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--3);
  animation: headerLogoSlideIn 1s ease-out;
}
header.header .logo img {
  display: block;
  height: var(--44);
  width: auto;
}
header.header .logo .pixio {
  font-family: var(--HeadFont), sans-serif;
  font-size: var(--26);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--10);
}
header.header .logo .pixio img {
  height: var(--34);
}
header.header .logo .label {
  font-family: var(--MonoFont);
  font-size: var(--11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
}
header.header .menu {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: auto;
}
header.header .menu:empty {
  display: none;
}
header.header .menu a {
  display: inline-block;
  font-family: var(--MonoFont);
  font-size: var(--13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: var(--5);
  background: linear-gradient(90deg, #fff, #fff) left bottom/0% var(--2) no-repeat;
  transition: background-size 0.35s var(--EaseUI);
}
header.header .menu a:hover {
  background-size: 100% var(--2);
  text-decoration: none;
}
header.header .menu li {
  position: relative;
}
header.header .menu {
  /* текущая страница — градиентная линия в духе .more/h2 */
}
header.header .menu .current > a {
  background: linear-gradient(90deg, #fff, #fff) left bottom/100% var(--2) no-repeat;
  padding-bottom: var(--5);
}
header.header .menu {
  /* пункт с дочерними страницами: шеврон + дропдаун */
}
header.header .menu .sub > a:after {
  content: "";
  display: inline-block;
  width: var(--6);
  height: var(--6);
  margin: 0 0 var(--2) var(--8);
  border-right: var(--2) solid currentColor;
  border-bottom: var(--2) solid currentColor;
  transform: rotate(45deg);
}
header.header .menu .sub menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--20));
  margin: 0;
  padding: var(--14) var(--20) var(--16);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--12);
  min-width: max-content;
  background: rgba(255, 255, 255, 0.1);
  border: var(--1) solid rgba(255, 255, 255, 0.2);
  border-radius: var(--MainBorderRadius);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--10));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
header.header .menu .sub:hover menu, header.header .menu .sub:focus-within menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
header.header .contacts {
  display: flex;
  align-items: center;
  gap: var(--16);
  pointer-events: auto;
}
header.header .contacts a {
  --BG:url("../images/phone.svg");
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--48);
  height: var(--48);
  background-color: rgba(255, 255, 255, 0.08);
  border: var(--1) solid rgba(255, 255, 255, 0.28);
  border-radius: var(--6);
  /* срез канта на углу — фирменная геометрия кнопок */
  clip-path: polygon(0 0, calc(100% - var(--12)) 0, 100% var(--12), 100% 100%, 0 100%);
  transition: background-color 0.2s var(--EaseUI), transform 0.2s var(--EaseUI), border-color 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: none;
}
header.header .contacts a.whatsapp {
  --BG:url("../images/whatsapp.svg");
}
header.header .contacts a:hover {
  background-color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(calc(0px - var(--2)));
  text-decoration: none;
}
header.header {
  /* бургер-меню: разметка единая, на широких экранах скрыт (показывается в мобайл-блоке main.scss ниже) */
}
header.header .m {
  display: none;
}

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

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

#mb > .s.body {
  /* класс body на секции: ширину держит паддинг сцены, не max-width */
  max-width: none;
  width: auto;
  margin: 0;
}

#mb > .s.t0 {
  padding: 0;
}

#mb > .s.t4,
#mb > .s.t10 {
  padding-left: 0;
  padding-right: 0;
}

#mb > .s.t10 {
  padding-top: 0;
  padding-bottom: 0;
}

/* снежный разворот: светлая сцена, текст — цвет ночи */
#mb > .s.snow {
  background: var(--Snow) url("../images/iso-l.svg") center top/1600px auto repeat;
}

/* диагональный срез «след канта»: верх и/или низ сцены */
#mb > .s.kct {
  clip-path: polygon(0 0, 100% var(--Cut), 100% 100%, 0 100%);
  padding-top: calc(var(--96) + var(--Cut));
}
#mb > .s.kcb {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--Cut)));
  padding-bottom: calc(var(--96) + var(--Cut));
}
#mb > .s.kct.kcb {
  clip-path: polygon(0 0, 100% var(--Cut), 100% 100%, 0 calc(100% - var(--Cut)));
}

/* кант-линия вдоль верхнего среза: рисуется при входе в кадр (.in) */
#mb > .s.kct::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--2);
  width: 100%;
  height: var(--3);
  background: linear-gradient(90deg, var(--Cyan), rgba(59,214,255,.2));
  box-shadow: 0 0 var(--14) var(--CyanGlow);
  transform: skewY(var(--CutAngle)) scaleX(1);
  transform-origin: left top;
  transition: transform 1.1s var(--EaseOut) 0.15s;
  pointer-events: none;
  z-index: 2;
}
body.rv-on #mb > .s.kct:not(.in)::before {
  transform: skewY(var(--CutAngle)) scaleX(0);
}

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

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

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

/* ============================================================
   Тип 0 — hero-слайдер («Создавайте сайты без кода»)
   Дети 0a: фон-обложка, h1, описание, ссылка; класс w — белый текст
   ============================================================ */
.t0 {
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  /* stretch: .container получает всю высоту секции (height:100% не
     работает при min-height у родителя); центрируют сами слайды .t0a */
  align-items: stretch;
  justify-content: center;
  background: var(--Color1);
}
.t0 .container {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.t0 {
  /* подпись-приглашение к скроллу (если выводится) */
}
.t0 .scroll {
  position: absolute;
  left: 50%;
  bottom: var(--48);
  display: inline-flex;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--14);
  font-family: var(--MonoFont);
  animation: t0scroll 1s ease-in-out infinite alternate;
  pointer-events: none;
}
.t0 .arrows {
  position: absolute;
  display: flex;
  height: 0;
  gap: var(--MainGap);
  align-items: flex-end;
  right: var(--ArrowRight);
  bottom: var(--ArrowBottom);
  z-index: 1;
  cursor: pointer;
}
.t0 .arrows .arrow {
  display: block;
  width: var(--54);
  height: var(--54);
  background: rgba(14,21,34,.55) var(--ArrowImageURL) center center/var(--22) no-repeat;
  border: var(--1) solid rgba(234,242,248,.3);
  border-radius: var(--6);
  clip-path: polygon(0 0, calc(100% - var(--12)) 0, 100% var(--12), 100% 100%, 0 100%);
  backdrop-filter: blur(6px);
  transition: transform 0.25s var(--EaseUI), background-color 0.25s var(--EaseUI), border-color 0.25s var(--EaseUI);
}
.t0 .arrows .arrow:hover {
  background-image: var(--ArrowHoverImageURL);
  background-color: rgba(59,214,255,.16);
  border-color: var(--Cyan);
  transform: translateY(calc(0px - var(--3)));
}
.t0 .arrows .arrow.right {
  transform: rotate(180deg);
}
.t0 .arrows .arrow.right:hover {
  transform: rotate(180deg) translateY(var(--3));
}

.t0a {
  display: flex;
  padding: var(--128) var(--ScenePad) var(--150);
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  position: relative;
  background: var(--BG) center center/cover no-repeat;
  min-width: 0;
  overflow: hidden;
  /* декоративный svg-слой из контента слайда */
}
.t0a svg {
  opacity: 0.3;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: svgOpacity 1.5s linear;
}
/* фон-фото слайда — реальным img (надёжнее ::after на file://) */
.t0a .herobg {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  z-index: 0;
  max-width: none;
  filter: brightness(0.72) saturate(1.05);
  transform: translateY(calc(var(--sy, 0) * var(--40)));
}
/* скрим ночного склона поверх фото */
.t0a:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(11,17,28,.9) 8%, rgba(11,17,28,.55) 46%, rgba(11,17,28,.18) 78%), linear-gradient(0deg, rgba(11,17,28,.85) 0%, transparent 32%);
}
/* трёхслойный снег-параллакс (слои дрейфуют ambient + едут по скроллу --sy) */
.t0a:before {
  content: "";
  position: absolute;
  inset: -12% 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(rgba(234,242,248,.9) 1px, transparent 1.6px), radial-gradient(rgba(234,242,248,.55) 1.4px, transparent 2.2px), radial-gradient(rgba(155,235,255,.4) 2px, transparent 3px);
  background-size: 210px 210px, 340px 340px, 560px 560px;
  background-position: 0 0, 90px 130px, 40px 60px;
  animation: kantSnow 22s linear infinite;
  transform: translateY(calc(var(--sy, 0) * var(--60)));
  opacity: 0.8;
}
@keyframes kantSnow {
  0% {
    background-position: 0 0, 90px 130px, 40px 60px;
  }
  100% {
    background-position: -70px 210px, 40px 470px, -30px 620px;
  }
}
.t0a .lnk {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.t0a .body {
  max-width: var(--Body);
  width: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--64);
  animation: t0aInit 1.5s ease-out 1 forwards;
  opacity: 0;
  transform: translateY(calc(var(--sy, 0) * (0px - var(--20))));
}
.t0a .info {
  display: flex;
  flex-direction: column;
  gap: var(--28);
  align-items: flex-start;
  text-align: left;
  flex: 1 1 56%;
  min-width: 0;
  will-change: transform;
  /* hero-типографика «Кант»: Exo 2, крупный uppercase на ночном фото */
}
/* HUD-кикер над заголовком */
.t0a .info .annotation {
  color: var(--Cyan);
  font-size: var(--13);
}
.t0a .info .title {
  font-family: var(--HeadFont), sans-serif;
  font-size: var(--HeroSize);
  line-height: 1.02;
  font-weight: var(--HeroWeight);
  text-transform: var(--HeroTransform);
  letter-spacing: -0.02em;
  color: var(--Color3);
}
/* фигура героя: доска с горящим кантом (SMIL-svg), tilt по курсору */
.t0a .board {
  flex: 0 0 38%;
  min-width: 0;
  pointer-events: none;
  transform: perspective(1100px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg));
  transition: transform 0.25s ease-out;
  will-change: transform;
  filter: drop-shadow(0 var(--30) var(--50) rgba(4,9,18,.6));
}
.t0a .board svg {
  position: static;
  width: 100%;
  height: auto;
  opacity: 1;
  animation: none;
  pointer-events: none;
  display: block;
}
.t0a .info .title span {
  background: linear-gradient(90deg, var(--GradTo), var(--GradFrom), var(--GradTo));
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: HeroGradient 4s ease-in-out infinite;
}
.t0a .info .description p {
  animation: t0aFromBottom 1.5s ease forwards;
  opacity: 0;
}
.t0a .info .description p:nth-child(1) {
  animation-delay: 0.6s;
}
.t0a .info .description p:nth-child(2) {
  animation-delay: 0.8s;
}
.t0a .info .description p:nth-child(3) {
  animation-delay: 1s;
}
.t0a .info .description p:nth-child(4) {
  animation-delay: 1.2s;
}
.t0a .info .description p:nth-child(5) {
  animation-delay: 1.4s;
}
.t0a .info .more {
  color: var(--Cyan);
  align-self: flex-start;
  position: relative;
  z-index: 1;
}
.t0a .info .description p:has(.btn) {
  justify-content: flex-start;
  margin-top: var(--40);
}
.t0a {
  /* плавное появление текста активного слайда */
}
.t0a.current .info {
  animation: SlideInfoIn 0.6s ease both;
}
.t0a.w .info .more,
.t0a.w .info .description,
.t0a.w .info .title {
  color: var(--Color3);
}

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

.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(--12);
  flex: 0 0 calc((100% - var(--MainGap)) / 2);
  /* срез канта на нижнем углу фото */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--40)), calc(100% - var(--40)) 100%, 0 100%);
  min-height: var(--480);
}
.t5 {
  align-items: stretch;
  gap: var(--56);
}

.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 — «Pixio в цифрах»,
    13 — «Как запустить сайт», 15 — FAQ)
   ============================================================ */
.t2,
.t7,
.t13,
.t15 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

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

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

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

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

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

/* 4a — карточка категории: фото со срезом канта, индекс, лифт на hover */
.t3a {
  display: flex;
  flex-direction: column;
  border-radius: var(--CardRadius);
  overflow: hidden;
  position: relative;
  counter-increment: kant3;
  background: #fff;
  border: 1px solid var(--HairSnow);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  transition: transform 0.4s var(--EaseUI), box-shadow 0.4s var(--EaseUI), border-color 0.4s var(--EaseUI);
}
.t3 .items {
  counter-reset: kant3;
}
.t3a img {
  height: var(--Type4Height);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 680/460;
  /* нижний край фото срезан диагональю падения */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--28)), 0 100%);
  transition: transform 0.5s var(--EaseUI);
}
/* индекс-номер категории поверх фото */
.t3a::before {
  content: "0" counter(kant3);
  position: absolute;
  top: var(--16);
  left: var(--20);
  z-index: 1;
  font-family: var(--HeadFont), sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: var(--20);
  color: #fff;
  background: rgba(14,21,34,.65);
  border: 1px solid rgba(234,242,248,.25);
  padding: var(--4) var(--12);
  border-radius: var(--5);
  backdrop-filter: blur(4px);
}
.t3a .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--12);
  padding: var(--10) var(--26) var(--26);
  background: none;
}
.t3a .info .title {
  font-family: var(--HeadFont), sans-serif;
  font-size: var(--24);
  font-weight: 800;
  line-height: 1.2;
  color: var(--Night);
}
.t3a .info .description {
  color: var(--InkMute);
  font-size: var(--16);
}
.t3a .info .description.annotation {
  color: var(--InkMute);
}
.t3a .info .more {
  margin-top: auto;
}
.t3a:hover {
  transform: translateY(calc(0px - var(--8)));
  box-shadow: 0 var(--24) var(--48) rgba(14,21,34,.16);
  border-color: rgba(59,214,255,.6);
}
.t3a:hover img {
  transform: scale(1.05);
}

/* ============================================================
   Тип 4 — широкий баннер преимуществ (бывший 5, объединивший 5/6/7/8,
   Section_Join.md гр. A). Варианты: r — текст справа (бывшие 6/8),
   d — тёмный текст (бывшие 7/8)
   ============================================================ */
.t4 {
  border-radius: 0;
  overflow: hidden;
  background: var(--BG) center center/cover no-repeat;
  padding-top: var(--170);
  padding-bottom: var(--170);
}
.t4 .info {
  margin: 0 var(--ScenePad);
  max-width: var(--620);
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  color: var(--Color3);
}
.t4 .info .title {
  font-size: var(--48);
}
.t4.r .info {
  margin-left: auto;
}
.t4 {
  /* дефолт — светлый текст: глобальная типографика задаёт h2/.description
     собственные цвета, поэтому наследования от .info недостаточно —
     красим элементы адресно */
}
.t4:not(.d) .info .title,
.t4:not(.d) .info .description,
.t4:not(.d) .info .description a {
  color: var(--Color3);
}
.t4.d .info {
  color: var(--Night);
}
.t4.d:not(.r) .info .title,
.t4.d .info .title,
.t4.d .info .description,
.t4.d .info .description a {
  color: var(--Night);
}
.t4.d .info .description {
  color: #223349;
}

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

.t5 .t5a {
  background: none;
}

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

/* 6a — нумерованная карточка pixio.kz: рамка фирменного цвета,
   повёрнутый квадратный номер, соединительная линия между карточками.
   Цвета чередуются: фиолетовый/лайм. Иконка вместо номера —
   вариантами родителя .t6.il / .t6.it */
.t6a {
  --HeadColor:var(--Color2);
  counter-increment: section6;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--16);
  background: var(--CardDark);
  border: var(--CardBorderWidth) solid var(--HairDark);
  border-radius: var(--CardRadiusLg);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  width: calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  padding: var(--32);
  transition: transform 0.4s var(--EaseUI), border-color 0.4s var(--EaseUI), background-color 0.4s var(--EaseUI);
}
.t6a:nth-child(odd) {
  --HeadColor:var(--Color2);
}
.t6a:nth-child(even) {
  --HeadColor:var(--Color6);
}
.t6a {
  /* соединительная линия к следующей карточке */
}
.t6a:after {
  content: "";
  display: block;
  height: var(--2);
  width: var(--50);
  background: color-mix(in srgb, var(--HeadColor) 60%, transparent);
  position: absolute;
  right: calc(0px - var(--50) / 2 - var(--MainGap) / 2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.t6a:nth-child(even):after, .t6a:last-child:after {
  content: none;
}
.t6a:before {
  content: "0" counter(section6);
  background: rgba(59,214,255,.08);
  border: var(--1) solid var(--HeadColor);
  color: var(--HeadColor);
  text-align: center;
  font-family: var(--HeadFont), sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: var(--24);
  border-radius: var(--BadgeRadius);
  width: var(--64);
  height: var(--64);
  line-height: var(--60);
  transform: rotateZ(calc(0deg - var(--CutAngle)));
  transition: transform 0.35s var(--EaseUI), background-color 0.35s var(--EaseUI);
}
.t6a:hover {
  transform: translateY(calc(0px - var(--6)));
  border-color: rgba(59,214,255,.5);
  background: rgba(24,38,60,.85);
}
.t6a:hover:before {
  transform: rotateZ(var(--CutAngle));
  background: rgba(59,214,255,.18);
}
.t6a .info {
  display: flex;
  flex-direction: column;
  gap: var(--16);
  flex: 1;
}
.t6a h3.title {
  color: var(--Snow);
  font-weight: 800;
  font-size: var(--22);
  line-height: 1.3;
}
.t6a .description {
  color: var(--SnowMute);
  line-height: 1.65;
  font-size: var(--16);
}

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

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

/* 7a — рамочная группа показателей, 7aa — показатель */
.t7a {
  display: flex;
  flex-direction: column;
  gap: var(--Gap);
  border-radius: var(--CardRadius);
  background: var(--CardDark);
  border: 1px solid var(--HairDark);
  padding: var(--MainBlockPadding) var(--MainBlockPadding) var(--40);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InPLine) - 1)) / var(--InPLine));
  width: calc((100% - var(--MainGap) * (var(--InPLine) - 1)) / var(--InPLine));
}
.t7a > .title {
  font-size: var(--22);
  color: var(--Cyan);
  padding-bottom: var(--10);
}
.t7a > .title:after {
  content: none;
}

.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 {
  /* значение показателя — ледниковый циан, Exo 2 */
}
.t7aa .title {
  color: var(--Cyan);
  font-weight: 800;
}
.t7aa .description {
  font-size: var(--15);
  color: var(--SnowMute);
}

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

.t9 {
  border-radius: 0;
  background: none;
  gap: var(--72);
}
.t9 .info {
  padding: 0;
  justify-content: center;
}
.t9 > .items {
  align-content: center;
}
.t9 > .items .t7aa {
  background: var(--CardDark);
  border: 1px solid var(--HairDark);
  border-radius: var(--CardRadius);
  padding: var(--30) var(--20);
  justify-content: center;
}
.t9 > .items .t7aa .title {
  font-size: var(--48);
}
.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: 0;
}
.s.t10 {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0;
}
.s.t10 img {
  width: 100%;
  display: block;
}

.t12 {
  display: flex;
  gap: var(--MainGap);
  overflow: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;
}
.t12::after {
  content: "";
  flex: 0 0 var(--1);
}
.t12::-webkit-scrollbar {
  display: none;
}
.t12.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.t12.dragging .t12a a {
  pointer-events: none;
}

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

/* 13a — преимущество: иконка + фраза, карточка со срезом канта */
.t13a {
  display: flex;
  flex-direction: column;
  gap: var(--24);
  text-align: left;
  border-radius: var(--CardRadius);
  padding: var(--30);
  background: #fff;
  border: 1px solid var(--HairSnow);
  clip-path: polygon(0 0, calc(100% - var(--20)) 0, 100% var(--20), 100% 100%, 0 100%);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  transition: transform 0.35s var(--EaseUI), border-color 0.35s var(--EaseUI), background-color 0.35s var(--EaseUI);
}
.t13a:before {
  content: "";
  display: block;
  width: var(--64);
  flex: 0 0 var(--64);
  background: var(--BG) left center/contain no-repeat;
}
.t13a .description {
  font-size: var(--17);
  font-weight: 600;
  line-height: 1.45;
  color: var(--Night);
}
.t13a:hover {
  transform: translateY(calc(0px - var(--6)));
  border-color: rgba(59,214,255,.65);
  background: #F6FBFE;
}

/* ============================================================
   Тип 14 — «Знакомьтесь: Pixio» (боковой заголовок + текст)
   ============================================================ */
.t14 {
  display: flex;
  gap: var(--72);
}
.t14 > .up {
  flex: 0 0 min(var(--420), 34%);
  font-size: var(--34);
  line-height: 1.15;
}
.t14 .info .description {
  font-size: var(--18);
  max-width: var(--760);
}
.t14 .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
}

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

.t15a {
  border-bottom: var(--DividerWidth) solid var(--DividerColor);
}
.t15a > .title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--MainGap);
}
.t15a > .title:after {
  content: "";
  flex: 0 0 var(--12);
  width: var(--12);
  height: var(--12);
  margin-right: var(--6);
  border-right: var(--2) solid var(--Cyan);
  border-bottom: var(--2) solid var(--Cyan);
  transform: rotate(45deg) translateY(calc(0px - var(--3)));
  transition: transform 0.3s var(--EaseUI);
}
.t15a .description {
  display: none;
  padding-bottom: var(--ButtonPaddingTB);
}
.t15a.current > .title:after {
  transform: rotate(225deg) translateY(var(--2));
}
.t15 .items {
  border-top: var(--DividerWidth) solid var(--DividerColor);
}
.t15a .description {
  max-width: var(--900);
  color: var(--SnowMute);
}
.t15a.current .description {
  display: block;
  animation: SlideInfoIn 0.3s ease both;
}

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

/* тёмная полоса — порт «НАЧНЁМ ИСТОРИЮ» с pixio.kz */
.t16.dark {
  background: var(--Color1);
  padding: var(--128) var(--SidePadding);
  color: var(--Color3);
}
.t16.dark a {
  color: var(--Color3);
}
.t16.dark .body {
  max-width: var(--1280);
  margin: 0 auto;
  gap: var(--48);
}
.t16.dark {
  border-top: 1px solid var(--HairDark);
}
.t16.dark h2.title {
  color: var(--Color3);
  font-size: var(--56);
  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 {
  --Ico:url("../images/ic-phone.svg");
  display: flex;
  gap: var(--16);
  align-items: center;
}
.t16a:nth-child(2) {
  --Ico:url("../images/ic-mail.svg");
}
.t16a:nth-child(3) {
  --Ico:url("../images/ic-pin.svg");
}
.t16a:before {
  content: "";
  display: block;
  flex: 0 0 var(--48);
  width: var(--48);
  height: var(--48);
  border-radius: var(--6);
  clip-path: polygon(0 0, calc(100% - var(--12)) 0, 100% var(--12), 100% 100%, 0 100%);
  background: rgba(59,214,255,.1) var(--Ico) center center/var(--22) no-repeat;
  border: var(--1) solid rgba(59,214,255,.4);
}
.t16a .description {
  font-weight: 500;
  font-size: var(--18);
}
.t16a .description a {
  transition: color 0.25s var(--EaseUI);
}
.t16a .description a:hover {
  color: var(--Cyan);
  text-decoration: none;
}

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

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

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

.t16 .form {
  padding: var(--32);
  background: var(--CardFill);
  border: 1px solid var(--HairSnow);
  border-radius: var(--CardRadius);
}
.t16:not(.dark) .form .btn {
  background: var(--Cyan);
  border: 0;
  color: var(--Night);
  font-family: var(--HeadFont), sans-serif;
  font-weight: 800;
  font-size: var(--17);
  width: 100%;
  padding: var(--16) 0;
}
.t16:not(.dark) .form .btn:hover {
  background: var(--Color6);
}
.t16:not(.dark) .form .t16b > label {
  color: var(--InkMute);
}

.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);
}

/* тёмная форма «Кант»: панель со срезом канта, поля-hairline, циановый CTA */
.t16.dark .form {
  background: rgba(19,30,48,.66);
  backdrop-filter: blur(10px);
  border: var(--1) solid var(--HairDark);
  border-radius: var(--12);
  clip-path: polygon(0 0, calc(100% - var(--32)) 0, 100% var(--32), 100% 100%, 0 100%);
}
.t16.dark .form h3.title {
  font-weight: 800;
  font-size: var(--24);
  line-height: 1.33;
  color: var(--Color3);
}
.t16.dark .form .t16b > label {
  color: var(--Gray5);
}
.t16.dark .form .text {
  color: var(--Color3);
  padding: var(--14) var(--16);
  background: rgba(11,17,28,.55);
  border: var(--1) solid var(--HairDark);
  border-radius: var(--6);
  font-size: var(--16);
  line-height: normal;
  transition: border-color 0.25s var(--EaseUI), box-shadow 0.25s var(--EaseUI);
}
.t16.dark .form .text:focus,
.t16.dark .form .text:focus-visible {
  border-color: var(--Cyan);
  box-shadow: 0 0 0 var(--3) rgba(59,214,255,.22);
  outline: none;
}
.t16.dark .form .text::placeholder {
  color: var(--Gray5);
}
.t16.dark .form .btn {
  background: var(--Cyan);
  border: 0;
  margin-top: var(--16);
  text-align: center;
  color: var(--Night);
  letter-spacing: 0.02em;
  font-weight: 800;
  font-family: var(--HeadFont), sans-serif;
  font-size: var(--18);
  line-height: 1.55;
  padding: var(--16) 0;
  width: 100%;
  filter: drop-shadow(0 var(--10) var(--24) rgba(59,214,255,.3));
}
.t16.dark .form .btn:hover {
  background: var(--Color6);
  transform: translateY(calc(0px - var(--2)));
}

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

.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(--Night2), 0 0 0 var(--5) var(--Cyan), 0 var(--16) var(--32) rgba(4,9,18,.5);
  z-index: 1;
}
.t17a .info {
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
  padding: var(--96) var(--MainBlockPadding) var(--MainBlockPadding);
  background: var(--CardDark);
  border: 1px solid var(--HairDark);
  border-radius: var(--CardRadius);
  height: 100%;
}
.t17a .info .h3.title {
  font-size: var(--22);
}
.t17a .info .title.s {
  color: var(--Cyan);
  font-family: var(--MonoFont);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--12);
  line-height: 1.6;
}
.t17a .info .description {
  font-size: var(--15);
  color: var(--SnowMute);
}

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

.t18a {
  display: flex;
  flex-direction: column;
  gap: var(--12);
  /* счётчики — Exo 2 italic, ледяной градиент, count-up по IO */
}
.t18a .title {
  font-family: var(--HeadFont), sans-serif;
  font-style: italic;
  font-size: var(--80);
  line-height: 1.05;
  font-weight: 800;
  background: linear-gradient(105deg, var(--Snow) 20%, var(--Cyan) 85%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.t18a {
  /* подпись — mono uppercase, как лейблы на pixio.kz */
}
.t18a .description {
  font-family: var(--LabelFont);
  font-size: var(--14);
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
}

/* ============================================================
   Тип 19 — CTA «Готовы попробовать?» (центрированный блок)
   ============================================================ */
/* CTA-блок: компактная карточка с градиентной рамкой
   (как «3 дня до запуска» на pixio.kz) */
/* t19 — «сезонка»: билет-слип со срезами канта и перфорацией */
.t19 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.t19 .info {
  position: relative;
  background: var(--CardDark);
  border: var(--1) solid rgba(59,214,255,.45);
  border-image: none;
  border-radius: var(--10);
  clip-path: polygon(var(--28) 0, 100% 0, 100% calc(100% - var(--28)), calc(100% - var(--28)) 100%, 0 100%, 0 var(--28));
  padding: var(--44) var(--76);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--12);
  text-align: center;
  max-width: 100%;
}
/* перфорация билета */
.t19 .info:before {
  content: "";
  position: absolute;
  left: var(--36);
  right: var(--36);
  top: var(--16);
  height: 0;
  border-top: var(--1) dashed rgba(59,214,255,.4);
  pointer-events: none;
}
.t19 .info h2.title {
  font-size: var(--32);
  padding-bottom: 0;
  color: var(--Snow);
}
.t19 .info h2.title:after {
  content: none;
}
.t19 .info .description {
  text-transform: var(--LabelTransform);
  letter-spacing: var(--LabelTracking);
  font-family: var(--LabelFont);
  font-size: var(--13);
  color: var(--Gray5);
  /* акцентная строка (цена) — ледяным градиентом */
}
.t19 .info .description strong,
.t19 .info .description b {
  display: block;
  font-family: var(--HeadFont), sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: var(--44);
  line-height: 1.2;
  letter-spacing: 0;
  margin-top: var(--8);
  background: linear-gradient(105deg, var(--Snow) 15%, var(--Cyan) 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

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

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

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

.t21.dark {
  color: var(--Color3);
  background: var(--Night2);
  border-top: 1px solid var(--HairDark);
  border-bottom: 1px solid var(--HairDark);
}
/* кавычка-кант перед текстом отзыва */
.t21.dark .t21a > .title {
  max-width: var(--900);
  margin: 0 auto;
  font-size: var(--26);
  line-height: 1.5;
}
.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: rgba(234,242,248,.35);
}
.t21.dark .bullets .item:hover, .t21.dark .bullets .item.current {
  background: var(--Cyan);
  width: var(--30);
  border-radius: var(--3);
  transform: skewX(calc(0deg - var(--CutAngle) * 4));
}

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

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

.t22a {
  flex: 0 0 calc((100% - var(--Gap) * (var(--InLine) - 1)) / var(--InLine));
  overflow: hidden;
  position: relative;
  border-radius: var(--8);
  clip-path: polygon(0 0, calc(100% - var(--22)) 0, 100% var(--22), 100% 100%, 0 100%);
}
.t22a a {
  display: block;
}
.t22a img {
  width: 100%;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 0.5s var(--EaseUI), filter 0.5s var(--EaseUI);
}
/* диагональный блик-«след канта» при наведении */
.t22a:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(234,242,248,.4) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--EaseUI);
  pointer-events: none;
}
.t22a:hover img {
  transform: scale(1.05);
  filter: brightness(1.06);
}
.t22a:hover:after {
  transform: translateX(130%);
}

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

.t23a {
  display: flex;
  flex-direction: column;
  gap: var(--24);
  flex: 1 1 0;
  min-width: 0;
  background: var(--CardDark);
  border: 1px solid var(--HairDark);
  border-radius: var(--12);
  clip-path: polygon(0 0, calc(100% - var(--26)) 0, 100% var(--26), 100% 100%, 0 100%);
  padding: var(--32);
  transition: border-color 0.35s var(--EaseUI), transform 0.35s var(--EaseUI);
}
.t23a:hover {
  border-color: rgba(59,214,255,.5);
  transform: translateY(calc(0px - var(--4)));
}
.t23a + .t23a {
  margin-top: 0;
}
.t23a > .description {
  font-size: var(--15);
  color: var(--Gray5);
}

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

.t23aa {
  display: flex;
  flex-direction: column;
  gap: var(--16);
}
.t23aa > .title {
  font-family: var(--MonoFont);
  font-size: var(--12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--Cyan);
  padding-bottom: 0;
}
.t23aa > .title:after {
  content: none;
}

.t23aaa {
  display: flex;
  gap: var(--MoreGap);
  break-inside: avoid;
}
.t23aaa .description {
  flex: 1;
  hyphens: auto;
  order: 1;
  font-size: var(--16);
  color: var(--Gray7);
}
.t23aaa .description + .description {
  flex: none;
  white-space: nowrap;
  order: 3;
  color: var(--Cyan);
  font-family: var(--HeadFont), sans-serif;
  font-weight: 800;
  font-size: var(--18);
}
.t23aaa {
  /* пунктирная подводка между позицией и ценой */
}
.t23aaa:after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  border-bottom: 1px dashed rgba(234,242,248,.25);
  transform: translateY(calc(0px - var(--5)));
  align-self: flex-end;
}

/* ===================================================================
   КАНТ — снежные развороты, кант-срезы, движение (bespoke-слой сборки)
   =================================================================== */

/* ── Снежный разворот: перекраска типографики в цвет ночи ─────────── */
#mb > .s.snow h1, #mb > .s.snow h2, #mb > .s.snow h3,
#mb > .s.snow .h2, #mb > .s.snow .h3,
#mb > .s.snow h2.title, #mb > .s.snow h3.title {
  color: var(--Night);
}
#mb > .s.snow .description {
  color: #3D5166;
}
#mb > .s.snow .description strong,
#mb > .s.snow .description b,
#mb > .s.snow .description a {
  color: var(--Night);
}
#mb > .s.snow .description.annotation {
  color: #56718A;
}
#mb > .s.snow .more {
  color: #0B8FC2;
}
#mb > .s.snow h2.title:after {
  background: #17A8DE;
  box-shadow: 0 0 var(--12) rgba(23,168,222,.35);
}
#mb > .s.snow .t7a {
  background: #fff;
  border-color: var(--HairSnow);
}
#mb > .s.snow .t7a > .title {
  color: #0B8FC2;
}
#mb > .s.snow .t7aa .title {
  color: #0B8FC2;
}
#mb > .s.snow .t7aa .description {
  color: #56718A;
}
#mb > .s.snow .t14 .info .description,
#mb > .s.snow .t23aaa .description {
  color: #3D5166;
}
#mb > .s.snow .btn {
  color: var(--Night);
}

/* ── Reveal: IO вешает .in; состояние покоя ВИДИМОЕ, анимация — на входе.
   Диагональные въезды (.rv) и шторки-«срез канта» (.rvc) ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.rv-on .rv.in {
    animation: kantRise 0.9s var(--EaseOut) backwards;
  }
  body.rv-on .rvc.in {
    animation: kantWipe 1.15s var(--EaseOut) backwards;
  }
  /* каскад в сетках */
  body.rv-on .items > .rv.in:nth-child(2), body.rv-on .items > .rvc.in:nth-child(2),
  body.rv-on .t22a:nth-child(2) .rvc.in, body.rv-on .t12a.rvc.in:nth-child(2) {
    animation-delay: 0.1s;
  }
  body.rv-on .items > .rv.in:nth-child(3), body.rv-on .items > .rvc.in:nth-child(3),
  body.rv-on .t22a:nth-child(3) .rvc.in, body.rv-on .t12a.rvc.in:nth-child(3) {
    animation-delay: 0.2s;
  }
  body.rv-on .items > .rv.in:nth-child(4), body.rv-on .items > .rvc.in:nth-child(4),
  body.rv-on .t22a:nth-child(4) .rvc.in, body.rv-on .t12a.rvc.in:nth-child(4) {
    animation-delay: 0.3s;
  }
  body.rv-on .items > .rv.in:nth-child(5), body.rv-on .t22a:nth-child(5) .rvc.in,
  body.rv-on .t12a.rvc.in:nth-child(5) {
    animation-delay: 0.4s;
  }
  body.rv-on .items > .rv.in:nth-child(6), body.rv-on .t22a:nth-child(6) .rvc.in {
    animation-delay: 0.5s;
  }
  /* диагональный въезд карточек — вдоль линии падения */
  body.rv-on .items > .rv {
    --rvx:calc(0px - var(--24));
    --rvy:var(--24);
  }
}
@keyframes kantRise {
  from {
    opacity: 0;
    transform: translate3d(var(--rvx, 0px), var(--rvy, var(--30)), 0);
  }
}
@keyframes kantWipe {
  from {
    clip-path: polygon(0 0, 0 0, 0 0);
  }
  to {
    clip-path: polygon(0 0, 300% 0, 0 300%);
  }
}

/* ── Тикер на шве героя и счётчиков: бегущая строка по диагонали ───── */
.t18 .ticker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  transform: skewY(var(--CutAngle));
  transform-origin: left top;
  background: var(--Cyan);
  color: var(--Night);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: var(--44);
  box-shadow: 0 var(--14) var(--36) rgba(59,214,255,.25);
}
.t18 .ticker .tk {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  font-family: var(--MonoFont);
  font-weight: 700;
  font-size: var(--13);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: kantTicker 38s linear infinite;
}
.t18 .ticker .tk span {
  padding: 0 var(--24);
}
.t18 .ticker .tk span:after {
  content: "◆";
  font-size: var(--8);
  vertical-align: middle;
  margin-left: var(--48);
  opacity: 0.55;
}
@keyframes kantTicker {
  to {
    transform: translateX(-50%);
  }
}
/* t18 наезжает срезом на фото героя; тикер компенсируем паддингом */
#mb > .s.t18.kct {
  margin-top: calc(0px - var(--Cut));
  padding-top: calc(var(--110) + var(--Cut));
}

/* ── Высотомер: page-spanning рейка «спуск 3 200 → 2 260 м» ────────── */
.alt-rail {
  position: fixed;
  right: var(--26);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--8);
  pointer-events: none;
  mix-blend-mode: difference;
  font-family: var(--MonoFont);
  font-size: var(--11);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.75);
}
.alt-rail .alt-v {
  font-size: var(--13);
  font-weight: 700;
  color: #fff;
}
.alt-rail .alt-line {
  width: var(--1);
  height: var(--140);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.12));
  position: relative;
}
.alt-rail .alt-line i {
  position: absolute;
  left: 50%;
  top: calc(var(--p, 0) * 100%);
  width: var(--8);
  height: var(--8);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 var(--10) rgba(255,255,255,.9);
}

/* ── Обложки и иконки секций по Id (пути от assets/) ───────────────── */
.s.s13013 { --BG:url("../images/Sections/13013.png"); }
.s.s13053 { --BG:url("../images/Sections/13053.png"); }
.s.s13038 { --BG:url("../images/Sections/13038.svg"); }
.s.s13039 { --BG:url("../images/Sections/13039.svg"); }
.s.s13041 { --BG:url("../images/Sections/13041.svg"); }
.s.s13042 { --BG:url("../images/Sections/13042.svg"); }
.s.s13050 { --BG:url("../images/Sections/13050.svg"); }
.s.s13051 { --BG:url("../images/Sections/13051.svg"); }
.s.s13062 { --BG:url("../images/Sections/13062.svg"); }
.s.s13063 { --BG:url("../images/Sections/13063.svg"); }
.s.s13064 { --BG:url("../images/Sections/13064.svg"); }
.s.s13065 { --BG:url("../images/Sections/13065.svg"); }
.s.s13068 { --BG:url("../images/Sections/13068.png"); }
.s.s13069 { --BG:url("../images/Sections/13069.png"); }
.s.s13070 { --BG:url("../images/Sections/13070.png"); }
.s.s13071 { --BG:url("../images/Sections/13071.png"); }

/* ── Точечная плотность сцен ───────────────────────────────────────── */
#mb > .s.t19 {
  padding-top: var(--72);
  padding-bottom: var(--72);
}
#mb > .s.t14 {
  padding-top: var(--72);
}
.t12a img {
  height: var(--300);
  width: auto;
}

/* ── Reduce Motion: ambient-слои гасим, состояние покоя видимое ────── */
@media (prefers-reduced-motion: reduce) {
  .t18 .ticker .tk,
  .t0a:before {
    animation: none;
  }
  .t22a:after {
    display: none;
  }
  body:not([data-language])::after {
    display: none;
  }
  .t0a .info .title span {
    animation: none;
  }
}

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

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

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

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

   Дефолт (без класса) = theme-pixio, ничего не переопределяет.
   Карта токенов и обоснование — 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;
}

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