/* 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";
/* ВЕЛОДЕНЬ — семейный парк-прокат, retro-poster friendly.
   Крем-афиша #F6EFE0 / ретро-тил #0F5D5D / томат-закат #E5472D.
   Kelly Slab (афишный дисплей, кириллица) + Rubik (текст). */
/* Шрифты self-hosted (Fontsource, кириллица + латиница) — превью работает offline */
@font-face {
  font-family: 'Kelly Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/kelly-slab-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Kelly Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/kelly-slab-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kelly Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/kelly-slab-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/rubik-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/rubik-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/rubik-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/rubik-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/rubik-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/rubik-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/rubik-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/rubik-latin-700-normal.woff2") format("woff2");
}
:root {
  --MainFont:'Rubik', system-ui, -apple-system, sans-serif;
  --DisplayFont:'Kelly Slab', 'Rubik', system-ui, sans-serif;
  --MonoFont:'Rubik', system-ui, sans-serif;
  --MaterialIcons:"Material Icons";
  --BG:"";
  --InLine:3;
  --InPLine:3;
  /* Палитра «афиши выходного дня» */
  --Color1:#0F5D5D;   /* ретро-тил: чернила афиши + тёмные полосы */
  --Color2:#E5472D;   /* томат-закат: акцент, CTA */
  --Color6:#F2B23A;   /* солнце: микро-акцент лучей и гирлянд */
  --Red:#C42F18;
  --Color3:#FBF6EA;   /* бумага-афиша (карточки, светлый текст на тиле) */
  --Cream:#F6EFE0;    /* крем-афиша: фон всего сайта */
  --TealDeep:#0B4747; /* тень тила: футер, открытое меню */
  --MainFrameBg:#F0E7D0;
  --Color4:#C9BFA8;
  --Gray8:#12332F;
  --Gray7:#3E5450;
  --Gray5:#6E7F76;
  --Gray4:#93A29A;
  --Gray3:#D8CFBB;
  --Gray2:#E9E0CA;
  --Gray0:#FAF5E8;
  /* «Градиент» кита схлопнут в плоский томат (ретро-плакат не про градиенты) */
  --GradFrom:#E5472D;
  --GradTo:#D23B22;
  --Gradient:linear-gradient(90deg, var(--GradFrom), var(--GradTo));
  --GradientR:linear-gradient(90deg, var(--GradTo), var(--GradFrom));
  /* easing-токены сайта */
  --EaseOut:cubic-bezier(.16,1,.3,1);
  --EaseUI:cubic-bezier(.4,0,.2,1);
  --Bfr:"";
  /*
     Адаптивная единица измерения (чистый CSS, без JS).
     Макет свёрстан под ширину 1760: --Unit — это «1px макета»,
     масштабируется пропорционально ширине viewport.
     cqw вместо vw: без контейнера-предка он равен ширине viewport,
     а внутри admin-превью (#sections, container-type:inline-size)
     — ширине превью. На мобильных переопределяется в мобайл-блоке main.scss.
  */
  --Unit:calc(100cqw/1760);
  /*
     Совместимость: генератор стилей секций (SectionsCSSView.php)
     пишет calc(Npx/var(--MainCoef)). tan(atan2(...)) даёт безразмерное
     отношение 1760/ширина — тот же коэффициент, но без core.js.
     Можно удалить после перевода генератора на var(--Unit).
  */
  --MainCoef:tan(atan2(1760px,100cqw));
  --MainGap:var(--30);
  --Gap:var(--30);
  /* афиша — центрированная колонка 1360, герой/тил-полосы full-bleed */
  --Body:var(--1360);
  --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));
  --1360:calc(1360*var(--Unit));
  --1760:calc(1760*var(--Unit));
  --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));
  --46:calc(46*var(--Unit));
  --56:calc(56*var(--Unit));
  --68:calc(68*var(--Unit));
  --76:calc(76*var(--Unit));
  --90:calc(90*var(--Unit));
  --110:calc(110*var(--Unit));
  --120:calc(120*var(--Unit));
  --140:calc(140*var(--Unit));
  --160:calc(160*var(--Unit));
  --170:calc(170*var(--Unit));
  --200:calc(200*var(--Unit));
  --220:calc(220*var(--Unit));
  --260:calc(260*var(--Unit));
  --280:calc(280*var(--Unit));
  --300:calc(300*var(--Unit));
  --320:calc(320*var(--Unit));
  --360:calc(360*var(--Unit));
  --420:calc(420*var(--Unit));
  --460:calc(460*var(--Unit));
  --520:calc(520*var(--Unit));
  --640:calc(640*var(--Unit));
  --700:calc(700*var(--Unit));
  --760:calc(760*var(--Unit));
  --820:calc(820*var(--Unit));
  --MainContentGap:var(--110);
  --MainPadding:var(--80);
  /* Боковые отступы full-bleed секций */
  --SidePadding:var(--80);
  --MoreGap:var(--15);
  --HeaderSliderPaddingTB:var(--230);
  --HeaderSliderPaddingLR:var(--SidePadding);
  --HeaderSliderMinWidth:var(--550);
  --HeaderSliderMaxWidth:var(--600);
  --ContentVerticalGapTB:var(--40);
  --ContentVerticalGapLR:0;
  --MainBorderRadius:var(--16);
  --MainBlockPadding:var(--30);
  --ContentShortGap:var(--10);
  --HalfPadding:var(--880);
  --LogoHeight:var(--64);
  --LogoWidth:var(--250);
  --Type2-1Height:var(--395);
  --Type3Padding:var(--150);
  --PhotoSize:var(--150);
  --S5-8Padding:var(--970);
  --ButtonPaddingTB:var(--19);
  --ButtonPaddingLR:var(--32);
  /* Кнопки-«штампы» афиши: скруглённые */
  --ButtonsBorderRadius:var(--12);
  --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:color-mix(in srgb, var(--Color1) 35%, transparent);
  --HalfBorderRadius:50%;
  /* ============================================================
     Ролевые токены ТЕМЫ (характер облика, не контент).
     Дефолты равны текущему виду — пока тема молчит, вид не меняется.
     Тему включает класс body.theme-* (style/themes.scss), который
     переопределяет эти переменные. Не путать с примитивами размеров
     (--40, --96): здесь именно роли (заголовок, карточка, лейбл).
     Подробности — proj/Theme_Variants_Audit.md.
     ============================================================ */
  /* Типографика-характер: афишный slab (Kelly Slab — один вес 400) */
  --HeadingWeight:400;
  --HeadingTracking:0.01em;
  --HeadingTransform:uppercase;
  --HeadingLine:none;
  --HeadingLineFill:var(--Gradient);
  --H3Weight:400;
  --HeroSize:var(--120);
  --HeroWeight:400;
  --HeroTransform:uppercase;
  --SectionHeadSize:var(--60);
  --LabelFont:var(--MainFont);
  --LabelTransform:uppercase;
  --LabelTracking:0.14em;
  /* Геометрия и фактура карточек-«афиш» */
  --CardRadius:var(--16);
  --CardRadiusLg:var(--20);
  --CardSharpRadius:var(--16);
  --CardFill:var(--Color3);
  --CardShadow:0 var(--14) var(--34) rgba(15, 93, 93, 0.12);
  --CardBorderWidth:var(--2);
  --CardAccentBorder:var(--4);
  --BadgeRadius:var(--12);
  --DividerWidth:var(--2);
  --DividerColor:color-mix(in srgb, var(--Color1) 22%, transparent);
  /* Кнопки */
  --ButtonBorderWidth:var(--2);
  --ButtonTransform:uppercase;
  --ButtonFont:var(--MainFont);
}

textarea {
  -webkit-appearance: none;
}

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

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

p {
  padding: 0;
  margin: 0;
}

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

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

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

/*
   Заголовки секций в стилистике pixio.kz:
   жирный uppercase + градиентная линия снизу,
   акцентные слова в <span> — градиентным текстом.
*/
.h2,
h2.title {
  font-family: var(--DisplayFont), serif;
  font-size: var(--48);
  line-height: 1.08;
  font-weight: var(--HeadingWeight);
  text-transform: var(--HeadingTransform);
  color: var(--Color1);
  position: relative;
  padding-bottom: var(--24);
}
/* афишная подводка: короткий пунктир-«стежок» с солнышком */
.h2:after,
h2.title:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--90);
  height: var(--4);
  background: repeating-linear-gradient(90deg, var(--Color2) 0 var(--12), transparent var(--12) var(--20));
  border-radius: var(--2);
}
.h2 span,
h2.title span {
  color: var(--Color2);
}

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

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

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

/* Описание hero-слайда (порт pixio.kz): светлый текст, mono-подписи, градиентная цена.
   Вшито в структурные классы секций (бывший хелпер .HeaderSliderDescription удалён):
   t0a — описание слайда, t21a — текст отзыва. */
.t0a .info .description,
.t21a > .title {
  font-size: var(--24);
  line-height: 1.45;
  font-weight: 400;
  color: var(--Gray7);
  hyphens: none;
}
.t0a .info .description p,
.t21a > .title p {
  margin: 0 0 var(--24);
}
.t0a .info .description p + p,
.t21a > .title p + p {
  margin: 0;
}
.t0a .info .description p:has(.btn),
.t21a > .title p:has(.btn) {
  margin-top: var(--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);
  font-weight: 600;
  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 задан ниже, в блоке карточек t2) */

/* Заголовок полароида t3a — афишный slab */
.t3a .info .title {
  font-family: var(--DisplayFont), serif;
  font-size: var(--24);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--Color1);
}

/*
   Кнопки pixio.kz: .btn — прозрачная «тихая» mono-кнопка,
   .btn.cl — главный CTA с градиентом.
   База адаптивная: цвет и рамка берутся от текущего цвета текста
   контекста (на тёмном фоне — светлая, на светлом — тёмная); раньше
   была жёстко белой и пропадала на светлых фонах.
*/
.btn {
  display: inline-block;
  color: inherit;
  letter-spacing: 0.08em;
  font-size: var(--15);
  font-weight: 600;
  line-height: 1.45;
  font-family: var(--ButtonFont);
  text-transform: var(--ButtonTransform);
  padding: var(--16) var(--32);
  border: var(--ButtonBorderWidth) solid color-mix(in srgb, currentColor 55%, transparent);
  background: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: var(--ButtonsBorderRadius);
  transform: translateY(0);
  transform-origin: center;
  transition: transform 0.25s var(--EaseUI), box-shadow 0.25s var(--EaseUI), background-color 0.25s var(--EaseUI), color 0.25s var(--EaseUI), border-color 0.25s var(--EaseUI);
}
.btn:hover {
  transform: translateY(calc(0px - var(--3)));
  text-decoration: none;
  border-color: currentColor;
}
.btn:active {
  transform: translateY(var(--1));
}
.btn:focus-visible {
  outline: var(--3) solid color-mix(in srgb, var(--Color2) 55%, transparent);
  outline-offset: var(--3);
}
/* главный CTA — томатный «штамп» афиши с тенью в цвет бренда и нижней кромкой-«клавишей» */
.btn.cl {
  background: var(--Color2);
  border: 0;
  color: var(--Color3);
  font-family: var(--MainFont);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: var(--18);
  line-height: 1.4;
  padding: var(--22) var(--44);
  box-shadow: 0 var(--6) 0 var(--Red), 0 var(--20) var(--40) rgba(229, 71, 45, 0.35);
}
.btn.cl:hover {
  background: #EF5334;
  box-shadow: 0 var(--8) 0 var(--Red), 0 var(--24) var(--44) rgba(229, 71, 45, 0.4);
}
.btn.cl:active {
  transform: translateY(var(--4));
  box-shadow: 0 var(--2) 0 var(--Red), 0 var(--10) var(--20) rgba(229, 71, 45, 0.3);
}
.btn {
  /* t1 — исторический вариант «для светлых фонов»; после того как база
     стала адаптивной, совпадает с ней (оставлен для совместимости данных) */
}
.btn.t1 {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  color: inherit;
}

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

/* Вопрос аккордеона t15a */
.t15a .title {
  font-size: var(--26);
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  padding: var(--24) 0;
}

/* Заголовок главы прайса t23a */
.t23a > .title {
  font-family: var(--DisplayFont), serif;
  font-size: var(--36);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--Color3);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* поля формы — под бренд: умеренный кегль, hairline-рамка, фокус-кольцо */
div.text,
input.text,
select.text,
textarea.text {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--Color1) 35%, transparent);
  border-radius: var(--12);
  padding: var(--15) var(--18);
  background: var(--Cream);
  color: var(--Gray8);
  font-size: var(--16);
  line-height: 1.5;
  transition: border-color 0.2s var(--EaseUI), box-shadow 0.2s var(--EaseUI);
}
input.text::placeholder,
textarea.text::placeholder {
  color: var(--Gray5);
}
input.text:focus-visible,
select.text:focus-visible,
textarea.text:focus-visible {
  outline: none;
  border-color: var(--Color2);
  box-shadow: 0 0 0 var(--3) color-mix(in srgb, var(--Color2) 30%, transparent);
}

textarea.text {
  resize: vertical;
  min-height: var(--110);
}

.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 {
  width: var(--Body);
  max-width: var(--Body);
  margin-inline: auto;
}

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

/* центрирование афишной колонки (не-фулскрин сайт, §11.2 п.9) */
#mb > .s.body {
  margin: 0 auto;
}

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

/* Футер — тёмно-тиловая афишная плашка с зубчатым верхом */
footer.footer {
  position: relative;
  background: var(--TealDeep);
  padding: var(--48) var(--SidePadding) var(--40);
  display: flex;
  gap: var(--MainGap);
  align-items: center;
  margin-top: var(--MainPadding);
}
footer.footer:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0px - var(--14));
  width: 100%;
  height: var(--16);
  background: radial-gradient(circle at 50% 0, var(--TealDeep) var(--11), transparent calc(var(--11) + 1px));
  background-size: var(--28) var(--16);
  background-position: 50% 100%;
  pointer-events: none;
}
footer.footer .body {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  align-items: center;
}
footer.footer .logo {
  display: flex;
  align-items: center;
  gap: var(--14);
  color: var(--Color3);
  font-family: var(--DisplayFont), serif;
  font-size: var(--26);
  text-transform: uppercase;
  text-decoration: none;
}
footer.footer .logo img {
  width: var(--44);
  height: var(--44);
}
footer.footer .description {
  flex: 1;
  color: color-mix(in srgb, var(--Color3) 72%, transparent);
  font-family: var(--MainFont);
  font-size: var(--15);
  line-height: 1.7;
  letter-spacing: 0.03em;
}
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: normal;
  pointer-events: none;
  padding: var(--16) var(--40);
  display: flex;
  justify-content: space-between;
  gap: var(--MainGap);
  align-items: center;
  background: color-mix(in srgb, var(--Cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--2) dashed color-mix(in srgb, var(--Color1) 35%, transparent);
}
header.header .logo {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--12);
  animation: headerLogoSlideIn 1s ease-out;
  text-decoration: none;
}
header.header .logo:hover {
  text-decoration: none;
}
header.header .logo img.mark {
  width: var(--52);
  height: var(--52);
  display: block;
}
header.header .logo .wordmark {
  display: flex;
  flex-direction: column;
  gap: var(--2);
}
header.header .logo .pixio {
  font-family: var(--DisplayFont), serif;
  font-size: var(--28);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--Color1);
}
header.header .logo .label {
  font-family: var(--MainFont);
  font-size: var(--11);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--Color1) 65%, transparent);
}
header.header .menu {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: auto;
}
header.header .menu:empty {
  display: none;
}
header.header .menu a {
  display: inline-block;
  font-family: var(--MainFont);
  font-size: var(--14);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--Color1);
}
header.header .menu a:hover {
  color: var(--Color2);
  text-decoration: none;
}
header.header .menu li {
  position: relative;
}
header.header .menu {
  /* текущая страница — градиентная линия в духе .more/h2 */
}
header.header .menu .current > a {
  background: var(--Gradient) left bottom/100% var(--2) no-repeat;
  padding-bottom: var(--5);
}
header.header .menu {
  /* пункт с дочерними страницами: шеврон + дропдаун */
}
header.header .menu .sub > a:after {
  content: "";
  display: inline-block;
  width: var(--6);
  height: var(--6);
  margin: 0 0 var(--2) var(--8);
  border-right: var(--2) solid currentColor;
  border-bottom: var(--2) solid currentColor;
  transform: rotate(45deg);
}
header.header .menu .sub menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--20));
  margin: 0;
  padding: var(--14) var(--20) var(--16);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--12);
  min-width: max-content;
  background: rgba(255, 255, 255, 0.1);
  border: var(--1) solid rgba(255, 255, 255, 0.2);
  border-radius: var(--MainBorderRadius);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--10));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
header.header .menu .sub:hover menu, header.header .menu .sub:focus-within menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
header.header .contacts {
  display: flex;
  align-items: center;
  gap: var(--16);
  pointer-events: auto;
}
/* контакты шапки — «марки» афиши: скруглённый квадрат с зубчатой рамкой */
header.header .contacts a {
  --BG:url("../images/ic-phone.svg");
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--48);
  height: var(--48);
  background-color: var(--Color3);
  border: var(--2) dashed color-mix(in srgb, var(--Color1) 45%, transparent);
  border-radius: var(--14);
  transform: rotate(0deg);
  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(--22);
  height: var(--22);
}
header.header .contacts a span {
  display: none;
}
header.header .contacts a.whatsapp {
  --BG:url("../images/ic-wa.svg");
}
header.header .contacts a:hover {
  background-color: color-mix(in srgb, var(--Color6) 30%, var(--Color3));
  border-color: var(--Color2);
  transform: rotate(-4deg) scale(1.08);
  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.
   ============================================================ */
#mb > .s {
  margin: 0 var(--SidePadding);
}

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

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

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

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

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

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

.t0a {
  display: flex;
  min-width: 0;
  padding: var(--140) var(--HeaderSliderPaddingLR) calc(190*var(--Unit));
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 100%;
  position: relative;
  background: none;
  overflow: hidden;
}
/* китовые кольцо+квадрат заменены сценой «спуск в парк» (см. .scene ниже) */
.t0a:before {
  content: none;
}
.t0a:after {
  content: none;
}
.t0a .lnk {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.t0a .body {
  max-width: var(--1360);
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  animation: t0aInit 1.5s ease-out 1 forwards;
  opacity: 0;
}
/* лево-герой: текст-афиша слева, сцена уезжает вправо-вниз */
.t0a .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--28);
  text-align: left;
  max-width: var(--760);
  will-change: transform;
}
/* кикер-«штамп» над заголовком */
.t0a .info .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--10);
  font-size: var(--14);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--Color2);
  border: var(--2) dashed color-mix(in srgb, var(--Color2) 55%, transparent);
  border-radius: var(--10);
  padding: var(--8) var(--16);
  background: color-mix(in srgb, var(--Color3) 75%, transparent);
  transform: rotate(-1.2deg);
}
.t0a .info .title {
  font-family: var(--DisplayFont), serif;
  font-size: var(--HeroSize);
  line-height: 0.98;
  font-weight: var(--HeroWeight);
  text-transform: var(--HeroTransform);
  letter-spacing: 0.01em;
  color: var(--Color1);
  text-shadow: var(--3) var(--3) 0 color-mix(in srgb, var(--Color6) 55%, transparent);
}
.t0a .info .title span {
  font-family: var(--DisplayFont), serif;
  color: var(--Color2);
  background: none;
}
.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 .description {
  max-width: var(--640);
}
.t0a .info .more {
  color: var(--Color2);
  align-self: flex-start;
  position: relative;
  z-index: 1;
}
.t0a {
  /* плавное появление текста активного слайда */
}
.t0a.current .info {
  animation: SlideInfoIn 0.6s ease both;
}
.t0a.w .info .more,
.t0a.w .info .description,
.t0a.w .info .title {
  color: var(--Color3);
}

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

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

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

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

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

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

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

/* ============================================================
   Типы 2, 7, 13, 15 — вертикальные контейнеры с сетками
   (2 — «Возможности», 7 — «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 — «открытка точки проката»: фото в бумажной рамке, номер-штамп,
   лёгкий наклон открытки (чередуется по nth-child) */
.t2 .items {
  counter-reset: vdpoint;
}
.t2a {
  counter-increment: vdpoint;
  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: var(--2) solid color-mix(in srgb, var(--Color1) 18%, transparent);
  border-radius: var(--CardSharpRadius);
  box-shadow: var(--CardShadow);
  display: flex;
  flex-direction: column;
  padding: var(--14) var(--14) var(--10);
  position: relative;
  transform: rotate(-1deg);
  transition: transform 0.3s var(--EaseUI), box-shadow 0.3s var(--EaseUI);
}
.t2a:nth-child(even) {
  transform: rotate(1.2deg);
}
.t2a:before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 380/240;
  border-radius: var(--10);
  background: var(--BG) center center/cover no-repeat;
}
/* номер точки — томатный штамп поверх фото */
.t2a .more:after {
  content: "→";
}
.t2a .title {
  flex: 1;
  padding: var(--20) var(--10) var(--8);
  font-family: var(--DisplayFont), serif;
  font-weight: 400;
  font-size: var(--24);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--Color1);
  transition: color 0.3s var(--EaseUI);
}
.t2a .more {
  margin: 0 var(--10) var(--10);
  align-self: flex-start;
}
.t2a:hover {
  transform: rotate(0deg) translateY(calc(0px - var(--8)));
  box-shadow: 0 var(--24) var(--44) rgba(15, 93, 93, 0.18);
  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);
}

/* 3a — ПОЛАРОИД: фото в белой рамке, «скотч» сверху, наклон ±, tilt на курсор */
.t3a {
  display: flex;
  flex-direction: column;
  border-radius: var(--8);
  overflow: visible;
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  background: var(--Color3);
  padding: var(--16) var(--16) var(--24);
  box-shadow: var(--CardShadow);
  position: relative;
  transform: rotate(-1.6deg) perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.25s var(--EaseUI), box-shadow 0.25s var(--EaseUI);
}
.t3a:nth-child(2n) {
  transform: rotate(1.4deg) perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.t3a:nth-child(3n) {
  transform: rotate(-0.6deg) perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
/* «скотч» — томатная полоска под углом */
.t3a:before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(0px - var(--12));
  width: var(--96);
  height: var(--24);
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--Color2) 78%, transparent);
  border-radius: var(--3);
  z-index: 1;
}
.t3a img {
  height: var(--Type4Height);
  border-radius: var(--6);
}
.t3a .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
  padding: var(--20) var(--8) 0;
  background: none;
}
.t3a:hover {
  box-shadow: 0 var(--24) var(--48) rgba(15, 93, 93, 0.2);
  z-index: 2;
}

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

/* ============================================================
   Типы 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 */
/* 6a — пункт «программы покатушки»: бумажная карточка-афиша,
   карточки спускаются лесенкой по диагонали вдоль пунктирной дорожки */
.t6a {
  --HeadColor:var(--Color2);
  counter-increment: section6;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--16);
  border: var(--CardBorderWidth) solid color-mix(in srgb, var(--Color1) 16%, transparent);
  background: var(--Color3);
  box-shadow: var(--CardShadow);
  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.3s var(--EaseUI), box-shadow 0.4s var(--EaseUI);
}
.t6a:nth-child(odd) {
  --HeadColor:var(--Color2);
}
.t6a:nth-child(even) {
  --HeadColor:var(--Color1);
}
/* диагональная «лесенка» программы */
.t6a:nth-child(2) {
  transform: translateY(var(--30));
}
.t6a:nth-child(3) {
  transform: translateY(var(--60));
}
.t6a:nth-child(4) {
  transform: translateY(var(--90));
}
.t6a:after {
  content: none;
}
.t6a:before {
  content: "0" counter(section6);
  font-family: var(--DisplayFont), serif;
  background: var(--HeadColor);
  color: var(--Color3);
  text-align: center;
  font-weight: 400;
  font-size: var(--24);
  border-radius: var(--BadgeRadius);
  width: var(--64);
  height: var(--64);
  line-height: var(--64);
  transform: rotateZ(-4deg);
  transition: transform 0.3s var(--EaseUI);
}
.t6a:hover {
  border-color: color-mix(in srgb, var(--HeadColor) 60%, transparent);
  box-shadow: 0 var(--20) var(--44) rgba(15, 93, 93, 0.16);
}
.t6a:hover:before {
  transform: rotateZ(4deg) scale(1.06);
}
.t6a .info {
  display: flex;
  flex-direction: column;
  gap: var(--16);
  flex: 1;
}
.t6a h3.title {
  color: var(--HeadColor);
  font-weight: 400;
  font-size: var(--26);
  line-height: 1.25;
  text-transform: uppercase;
}
.t6a .description {
  color: var(--Gray7);
  line-height: 1.625;
  font-size: var(--16);
}

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

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

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

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

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

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

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

/* t12 — drag-лента «день в кадрах»: полароиды на пунктирной дорожке,
   лейбл-чип над лентой; drag-скролл вешает JS (cursor:grab) */
.t12 {
  display: flex;
  gap: var(--40);
  overflow: auto;
  scroll-snap-type: both mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--76) var(--20) var(--48);
  position: relative;
  cursor: grab;
  /* пунктирная дорожка позади полароидов */
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--Color1) 35%, transparent) 0 var(--26), transparent var(--26) var(--48)) 0 62%/100% var(--3) no-repeat;
}
.t12.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.t12:before {
  content: "день в кадрах · тяни ленту";
  position: absolute;
  left: var(--20);
  top: var(--10);
  font-size: var(--13);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--Color3);
  background: var(--Color2);
  border-radius: var(--8);
  padding: var(--8) var(--14);
  transform: rotate(-1.5deg);
}
.t12a {
  cursor: pointer;
  flex: 0 0 auto;
  background: var(--Color3);
  padding: var(--12) var(--12) var(--28);
  box-shadow: var(--CardShadow);
  border-radius: var(--6);
  transform: rotate(-2deg) perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.25s var(--EaseUI), box-shadow 0.25s var(--EaseUI);
}
.t12a:nth-child(even) {
  transform: rotate(2.2deg) translateY(var(--20)) perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.t12a:nth-child(3n) {
  transform: rotate(-0.8deg) translateY(var(--8)) perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.t12a:hover {
  z-index: 2;
  box-shadow: 0 var(--22) var(--40) rgba(15, 93, 93, 0.22);
}
.t12a span {
  display: block;
  border-radius: var(--4);
  overflow: hidden;
}
.t12a a {
  display: block;
}
.t12a img {
  max-width: none;
  height: var(--260);
  transition: transform 0.3s var(--EaseUI);
  pointer-events: none;
}
.t12a:hover img {
  transform: scale(1.03);
}

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

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

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

.t15a {
  border-bottom: var(--DividerWidth) solid var(--DividerColor);
}
.t15a > .title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--MainGap);
}
/* стрелка аккордеона — CSS-шеврон (без Material Icons) */
.t15a > .title:after {
  content: "";
  flex: 0 0 var(--14);
  width: var(--14);
  height: var(--14);
  border-right: var(--3) solid var(--Color2);
  border-bottom: var(--3) solid var(--Color2);
  border-radius: var(--2);
  transform: rotate(45deg) translateY(calc(0px - var(--3)));
  transition: transform 0.25s var(--EaseUI);
}
.t15a > .title:hover:after {
  border-color: var(--Color1);
}
.t15a .description {
  display: none;
  padding-bottom: var(--ButtonPaddingTB);
}
.t15a.current > .title:after {
  transform: rotate(225deg) translateY(calc(0px - var(--3)));
}
.t15a.current .description {
  display: block;
  animation: SlideInfoIn 0.3s ease both;
}

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

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

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

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

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

/* 16a — строка контакта: Material-иконка в цветном кружке
   (фирменные цвета чередуются, как контакты на pixio.kz) */
/* 16a — строка контакта: свои SVG-иконки на цветных «марках»
   (--Ico задаётся per-Id в bespoke-блоке) */
.t16a {
  --BGC:var(--Color1);
  --Ico:url("../images/ic-call.svg");
  display: flex;
  gap: var(--16);
  align-items: center;
}
.t16a:nth-child(3n+2) {
  --BGC:var(--Color2);
}
.t16a:nth-child(3n) {
  --BGC:#C08A1E;
}
.t16a:before {
  content: "";
  display: block;
  flex: 0 0 var(--48);
  width: var(--48);
  height: var(--48);
  border-radius: var(--14);
  background-color: var(--BGC);
  background-image: var(--Ico);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--24);
  transform: rotate(-3deg);
}
.t16a .description {
  font-weight: 500;
}

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

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

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

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

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

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

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

/* ============================================================
   Тип 17 — «Команда 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(--Color3), 0 0 0 var(--5) var(--Color2);
}
.t17a .info {
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
  padding: var(--MainPadding) var(--MainBlockPadding) var(--MainBlockPadding);
  background: var(--CardFill);
  border-radius: var(--CardRadius);
}
.t17a .info .title.s {
  font-family: var(--MainFont);
  color: var(--Color2);
  font-size: var(--14);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: var(--24);
}

/* ============================================================
   Тип 18 — «Pixio в цифрах» (тёмная полоса счётчиков)
   ============================================================ */
/* t18 — тиловая афиша-полоса с зубчатыми краями и лучами солнца */
.t18 {
  background: var(--Color1);
  padding: var(--110) var(--SidePadding) var(--120);
  display: flex;
  flex-direction: column;
  gap: var(--48);
  color: var(--Color3);
  text-align: center;
  position: relative;
  overflow: visible;
}
.t18:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0px - var(--14));
  width: 100%;
  height: var(--16);
  background: radial-gradient(circle at 50% 0, var(--Color1) var(--11), transparent calc(var(--11) + 1px));
  background-size: var(--28) var(--16);
  pointer-events: none;
}
.t18:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(0px - var(--14));
  width: 100%;
  height: var(--16);
  background: radial-gradient(circle at 50% 100%, var(--Color1) var(--11), transparent calc(var(--11) + 1px));
  background-size: var(--28) var(--16);
  pointer-events: none;
}
.t18 h2.title {
  color: var(--Color3);
}
.t18 h2.title:after {
  left: 50%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, var(--Color6) 0 var(--12), transparent var(--12) var(--20));
}
.t18 .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--MainGap) var(--48);
  justify-content: center;
}
.t18 .items .t18a {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--320);
}
.t18 .description {
  color: var(--Gray3);
}

.t18a {
  display: flex;
  flex-direction: column;
  gap: var(--16);
}
/* цифры — кремовый slab с томатной подложкой-тенью */
.t18a .title {
  font-family: var(--DisplayFont), serif;
  font-size: var(--72);
  line-height: 1;
  font-weight: 400;
  color: var(--Color3);
  text-shadow: var(--4) var(--4) 0 var(--Color2);
  white-space: nowrap;
}
.t18a .description {
  font-family: var(--LabelFont);
  font-size: var(--14);
  font-weight: 500;
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
}

/* ============================================================
   Тип 19 — CTA «Готовы попробовать?» (центрированный блок)
   ============================================================ */
/* CTA-блок: компактная карточка с градиентной рамкой
   (как «3 дня до запуска» на pixio.kz) */
/* CTA «Семейный билет» — ретро-этикетка на солнечных лучах:
   full-bleed сцена, за карточкой вращается conic-«солнце» */
.t19 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--128) var(--SidePadding);
  position: relative;
  overflow: hidden;
  background: var(--Color1);
}
.t19:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1600*var(--Unit));
  aspect-ratio: 1;
  margin: calc(-800*var(--Unit)) 0 0 calc(-800*var(--Unit));
  background: repeating-conic-gradient(from 0deg, rgba(246, 239, 224, 0.07) 0deg 9deg, transparent 9deg 22.5deg);
  border-radius: 50%;
  animation: vdSunSpin 60s linear infinite;
  pointer-events: none;
}
.t19 .info {
  background: var(--Color3);
  border: var(--3) dashed var(--Color2);
  border-image: none;
  border-radius: var(--20);
  padding: var(--44) var(--64);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--14);
  text-align: center;
  max-width: min(var(--820), 100%);
  position: relative;
  z-index: 1;
  transform: rotate(-1.2deg);
  box-shadow: 0 var(--30) var(--60) rgba(4, 34, 34, 0.45);
}
.t19 .info h2.title {
  font-size: var(--40);
  padding-bottom: 0;
}
.t19 .info h2.title:after {
  content: none;
}
.t19 .info .description {
  letter-spacing: 0.02em;
  font-family: var(--MainFont);
  font-size: var(--18);
  color: var(--Gray7);
}
.t19 .info .description strong,
.t19 .info .description b {
  display: block;
  font-family: var(--DisplayFont), serif;
  font-weight: 400;
  font-size: var(--72);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--Color2);
}

@keyframes vdSunSpin {
  to {
    transform: rotate(360deg);
  }
}

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

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

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

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

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

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

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

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

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

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

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

/* глава прайса — «афиша» с тиловой шапкой и зубчатым низом */
.t23a {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  flex: 1 1 0;
  min-width: 0;
  background: var(--Color3);
  border-radius: var(--CardRadius) var(--CardRadius) 0 0;
  box-shadow: var(--CardShadow);
  padding: 0 0 var(--40);
  position: relative;
}
.t23a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(0px - var(--12));
  width: 100%;
  height: var(--14);
  background: radial-gradient(circle at 50% 0, var(--Color3) var(--9), transparent calc(var(--9) + 1px));
  background-size: var(--24) var(--14);
}
.t23a > .title {
  background: var(--Color1);
  border-radius: var(--CardRadius) var(--CardRadius) 0 0;
  padding: var(--22) var(--32);
}
.t23a > .description {
  padding: 0 var(--32);
}
.t23a > .items {
  padding: 0 var(--32);
}
.t23a + .t23a {
  margin-top: 0;
}

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

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

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

/* ===================================================================
   MOBILE — слито из mobile.scss (раньше отдельный файл с media-атрибутом
   <=1024px). Содержимое уже обёрнуто в @media (max-width:1024px).
   С 19.06.2026 — часть единого main.scss.
   =================================================================== */
/*
   Мобильная/узкая вёрстка: чистая CSS-адаптация по ширине viewport,
   без UA-определения и JS. Грузится всем, активна только в media query.
*/
@media (max-width: 1024px) {
  html {
    touch-action: manipulation;
  }
  body.menu {
    overflow: hidden;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  :root {
    /* на узких экранах размеры 1:1 в px, без масштабирования от 1760 */
    --Unit: 1px;
    --MainCoef: 1;
    --MainGap: var(--15);
    --MainBlockPadding: var(--20);
    --SidePadding: var(--16);
    --ImageHeight: var(--250);
    --ButtonPaddingTB: var(--10);
    --ButtonPaddingLR: var(--15);
    --MainHeaderFontSize: var(--30);
  }
  .btn {
    font-size: var(--16);
    line-height: normal;
  }
  input.text,
  select.text,
  textarea.text {
    font-size: var(--16);
    line-height: normal;
  }
  .type1 .body,
  .type4 .items,
  .type5,
  .type6,
  .type7,
  .type8,
  .type9,
  .type9.a,
  .type10 .items,
  .type11 .items,
  .type11a,
  .type12 .items,
  .type13 .items,
  .type15,
  .type15a,
  .type19 .items,
  .type20,
  .type22 .line,
  .type23 .line,
  .type24 .line,
  .type26 .items,
  footer.footer {
    flex-direction: column;
    flex-wrap: initial;
  }
  .h1, h1.title,
  .h2, h2.title,
  .h3, h3.title {
    font-size: var(--30);
    line-height: normal;
    hyphens: auto;
  }
  .h3,
  h3.title {
    font-size: var(--20);
  }
  .description,
  .type33aaa:before {
    font-size: var(--16);
    line-height: normal;
  }
  .t2a .title {
    font-size: var(--20);
    line-height: normal;
  }
  .more {
    font-size: var(--14);
  }
  .type1 .body:before,
  .type9:before {
    flex: 0 0 var(--ImageHeight);
  }
  .type1 .body .info,
  .type9 .info,
  .type15 .info {
    padding: 0 var(--MainBlockPadding) var(--MainBlockPadding);
  }
  .type2 h2.title,
  .type4 h2.title,
  .type10 h2.title,
  .type11 h2.title,
  .type12 h2.title,
  .type14,
  .type15 > .items,
  .type17,
  .type19 h2.title,
  .type20,
  .type21,
  .type22 h2.title,
  .type22 .line .content,
  .type24 h2.title,
  .type24 .line,
  .type25 h2.title,
  .type25 .container,
  .type28 h2.title,
  .type28 .container,
  .type29,
  .type31 h2.title,
  .type31 .description,
  #gvp .popup .info-block,
  .type33 {
    padding: 0 var(--MainBlockPadding);
  }
  .type15 > .items,
  #gvp .popup .info-block {
    padding-bottom: var(--MainBlockPadding);
  }
  .type5,
  .type6,
  .type7,
  .type8 {
    padding: 0;
    display: flex;
    background: var(--Color1);
  }
  .type5:before,
  .type6:before,
  .type7:before,
  .type8:before {
    content: "";
    background: var(--BG) right center/cover no-repeat;
    flex: 0 0 var(--ImageHeight);
  }
  .type5 .info,
  .type6 .info,
  .type7 .info,
  .type8 .info,
  .type23 .body,
  .type26,
  .type27,
  .type27 .info,
  .type30 {
    padding: var(--MainBlockPadding);
  }
  .type15,
  .type23,
  #gvp .popup {
    padding: 0;
  }
  .type22 .line .map,
  .type24 .map {
    flex: 0 0 var(--ImageHeight);
  }
  #gvp .popup {
    flex-direction: column;
  }
  #gvp .popup .info-block {
    flex: none;
  }
  #gvp .popup .photo {
    position: relative;
  }
  #gvp .popup .photo > .arrow {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
  }
  #gvp .popup .photo > .arrow.right {
    left: auto;
    right: 0;
  }
  #gvp .popup .photo > .arrow .arrow {
    background-color: rgba(255, 255, 255, 0.75);
  }
  header.header {
    /* на узких экранах шапка обычная, в потоке, тиловая плашка;
       pointer-events:auto — иначе бургер не кликается (грабля кита) */
    position: relative;
    mix-blend-mode: normal;
    pointer-events: auto;
    background: var(--Color1);
    border-bottom: 0;
    backdrop-filter: none;
    padding: var(--15) var(--SidePadding);
  }
  header.header {
    gap: var(--10);
  }
  header.header .logo .label {
    display: none;
  }
  header.header .logo img.mark {
    width: 38px;
    height: 38px;
  }
  header.header .logo .pixio {
    font-size: var(--22);
    color: var(--Color3);
  }
  header.header .logo .label {
    color: rgba(251, 246, 234, 0.65);
  }
  header.header .contacts a {
    background-color: rgba(251, 246, 234, 0.12);
    border-color: rgba(251, 246, 234, 0.45);
  }
  header.header .contacts a:before {
    filter: brightness(0) invert(1);
  }
  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;
    /* плотный непрозрачный тил — пункты читаются, hero не просвечивает */
    background: var(--TealDeep);
    backdrop-filter: none;
    transition: opacity 0.25s linear;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--Type3Padding) var(--BlockIconWidth);
    gap: var(--30);
  }
  header.header .menu a {
    font-size: var(--20);
    color: var(--Color3);
    font-family: var(--DisplayFont), serif;
    letter-spacing: 0.08em;
  }
  header.header .menu a:hover {
    color: var(--Color6);
  }
  header.header .menu {
    /* подменю страниц в оверлее раскрыто всегда: без дропдауна и шеврона */
  }
  header.header .menu .sub > a:after {
    display: none;
  }
  header.header .menu .sub menu {
    position: static;
    margin: 0;
    padding: var(--12) 0 0 var(--16);
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: var(--12);
  }
  .menu header.header .logo {
    z-index: 6;
    position: relative;
  }
  .menu header.header .m {
    z-index: 5;
  }
  .menu header.header .m .mb:before {
    height: 0;
    border-top-width: var(--1);
    border-bottom-width: var(--1);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .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);
  }
  /* ===== ВЕЛОДЕНЬ — мобильный bespoke (плоские кит-селекторы) ===== */
  .body {
    width: 100%;
    max-width: 100%;
  }
  #mb > .s.body {
    margin: 0 var(--SidePadding);
    width: auto;
  }
  #mb {
    gap: var(--56);
  }
  /* герой */
  .t0 {
    min-height: 100svh;
  }
  .t0 .container,
  .t0a,
  .t0a .body,
  .t0a .info {
    min-width: 0;
  }
  .t0a {
    padding: var(--100) var(--SidePadding) var(--230);
  }
  .t0a .info {
    max-width: 100%;
  }
  .t0a .info .title {
    font-size: var(--52);
    line-height: 1.02;
  }
  .t0a .info .kicker {
    font-size: var(--11);
    letter-spacing: 0.12em;
  }
  .t0a .info .description {
    font-size: var(--17);
  }
  .t0a .info .more {
    background: var(--Color3);
    border-radius: var(--10);
    padding: var(--10) var(--14) var(--12);
    box-shadow: 0 var(--4) var(--14) rgba(15, 93, 93, 0.2);
  }
  .t0a .info .more:before {
    display: none;
  }
  .t0a .scene .l1 {
    height: var(--140);
  }
  .t0a .scene .l2 {
    height: var(--110);
  }
  .t0a .scene .l3 {
    height: var(--150);
  }
  .t0a .scene .sun {
    width: var(--200);
    left: 60%;
    bottom: var(--120);
  }
  .vd-ticker .track span {
    font-size: var(--14);
    padding: var(--10) var(--16);
  }
  /* стек сеток в одну колонку */
  .t3 .items,
  .t13 .items,
  .t22 .items {
    --InLine: 1;
  }
  .t7 .items {
    --InPLine: 1;
  }
  .t3a,
  .t13a,
  .t2a,
  .t6a,
  .t7a,
  .t22a {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .t1 .body {
    flex-direction: column;
  }
  .t1 .body:before {
    flex: 0 0 var(--250);
    width: 100%;
  }
  .t1:not(.bg) .body .info {
    padding: 0 var(--MainBlockPadding) var(--MainBlockPadding);
  }
  .s.t1.bg .info {
    padding: var(--40) var(--MainBlockPadding);
  }
  .t5,
  .t9 {
    flex-direction: column;
  }
  .t5:before {
    flex: 0 0 var(--250);
    width: 100%;
  }
  .t5 .info,
  .t9 .info {
    padding: 0 var(--MainBlockPadding) var(--MainBlockPadding);
  }
  .t9 > .items {
    flex: none;
    padding: var(--MainBlockPadding) var(--MainBlockPadding) 0;
  }
  /* программа дня: лесенку выключаем */
  .t6a:nth-child(2),
  .t6a:nth-child(3),
  .t6a:nth-child(4) {
    transform: none;
  }
  /* полароид-лента */
  .t12 {
    padding: var(--64) var(--15) var(--30);
    gap: var(--20);
  }
  .t12a img {
    height: var(--170);
  }
  .t12:before {
    font-size: var(--11);
    left: var(--15);
  }
  /* прайс-афиши в колонку */
  .t23 .items {
    flex-direction: column;
    gap: var(--40);
  }
  .t23a {
    width: 100%;
  }
  .t23a > .title {
    font-size: var(--24);
    padding: var(--16) var(--20);
  }
  .t23a > .description,
  .t23a > .items {
    padding: 0 var(--20);
  }
  /* FAQ: мобильный кегль вопроса (специфичность выше кит-правила) */
  .t15a > .title {
    font-size: var(--18);
    line-height: 1.35;
    padding: var(--16) 0;
  }
  /* контакты */
  .t16 .form {
    flex: 0 0 auto;
    width: 100%;
  }
  .t16.mt .body > .map,
  .t16.mr .line .map {
    flex: 0 0 auto;
    min-height: 280px;
  }
  /* баннер t4 */
  .t4 {
    padding: var(--48) var(--MainBlockPadding);
    border-radius: var(--16);
  }
  .t4 .info,
  .t4.r .info {
    padding-left: 0;
    padding-right: 0;
  }
  /* CTA-этикетка */
  .t19 {
    padding: var(--76) var(--SidePadding);
  }
  .t19 .info {
    padding: var(--28) var(--20);
  }
  .t19 .info .description strong,
  .t19 .info .description b {
    font-size: var(--44);
  }
  .t19 .info h2.title {
    font-size: var(--26);
  }
  /* счётчики */
  .t18 {
    padding: var(--64) var(--SidePadding) var(--72);
  }
  .t18a .title {
    font-size: var(--48);
  }
  .t18 .items {
    flex-direction: column;
    gap: var(--34);
  }
  /* команда: карточка на 78% экрана, листается */
  .t17a {
    flex: 0 0 78%;
  }
  /* отзывы */
  .t21a {
    min-width: 0;
  }
  .t21a > .title {
    font-size: var(--17);
  }
  /* полоса кнопок */
  .t8 .items {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--SidePadding);
  }
  .t8 .items .btn {
    display: block;
    width: 100%;
  }
  /* заголовки-афиши */
  .h2, h2.title {
    font-size: var(--28);
  }
  .t2 h2.title,
  .t6 h2.title {
    font-size: var(--28);
  }
  .t23a > .title {
    line-height: 1.2;
  }
  h3.title, .h3 {
    font-size: var(--22);
  }
  /* футер */
  footer.footer .body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--16);
  }
  /* курсор-слой и параллакс на тач не нужны */
  body:not([data-language])::after {
    display: none;
  }
}
/* конец @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;
}

/* ===================================================================
   ВЕЛОДЕНЬ — bespoke-слой «афиша выходного дня»
   (плоские кит-селекторы; функциональные состояния body.rv-on/body.menu)
   =================================================================== */

/* --- фактура: лёгкое зерно бумаги поверх всего --------------------- */
body:not([data-language])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- курсор-слой: «солнечный зайчик» — тёплый блик за курсором ------ */
body:not([data-language])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle calc(300*var(--Unit)) at calc(var(--mx, 0.62) * 100vw) calc(var(--my, 0.3) * 100vh), rgba(242, 178, 58, 0.22), rgba(242, 178, 58, 0.07) 55%, transparent 72%);
  mix-blend-mode: multiply;
}

/* --- ГЕРОЙ: сцена «спуск в парк» (параллакс-слои + SMIL) ------------ */
.t0a .scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* солнце-полудиск с вращающимися conic-лучами */
.t0a .scene .sun {
  position: absolute;
  right: 13%;
  bottom: calc(300*var(--Unit));
  width: var(--360);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #F6C963 0 56%, var(--Color6) 58% 100%);
  box-shadow: 0 0 calc(120*var(--Unit)) rgba(242, 178, 58, 0.55);
  transform: perspective(600px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg));
}
.t0a .scene .sun:before {
  content: "";
  position: absolute;
  inset: -95%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(242, 178, 58, 0.25) 0deg 7deg, transparent 7deg 18deg);
  animation: vdSunSpin 52s linear infinite;
}
/* слои деревьев и дорожки (repeat-x svg, разная скорость по --scy) */
.t0a .scene .l {
  position: absolute;
  left: -4%;
  width: 108%;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  will-change: transform;
}
.t0a .scene .l1 {
  bottom: calc(240*var(--Unit));
  height: var(--220);
  background-image: url("../images/hero-far.svg");
  opacity: 0.55;
  transform: translateY(calc(var(--scy, 0) * 0.16 * var(--1)));
}
.t0a .scene .l2 {
  bottom: calc(150*var(--Unit));
  height: var(--260);
  background-image: url("../images/hero-near.svg");
  opacity: 0.9;
  transform: translateY(calc(var(--scy, 0) * 0.09 * var(--1)));
}
.t0a .scene .l3 {
  bottom: calc(0px - var(--20));
  height: var(--300);
  background-image: url("../images/hero-road.svg");
  background-size: cover;
  transform: translateY(calc(var(--scy, 0) * 0.03 * var(--1)));
}

/* --- бегущая строка-«тент» на шве героя ----------------------------- */
.vd-ticker {
  position: absolute;
  left: -2%;
  bottom: var(--44);
  width: 104%;
  transform: rotate(-1.4deg);
  background: var(--Color2);
  box-shadow: 0 var(--12) var(--34) rgba(229, 71, 45, 0.35);
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.vd-ticker .track {
  display: flex;
  width: max-content;
  animation: vdTicker 30s linear infinite;
}
.vd-ticker .track span {
  display: block;
  white-space: nowrap;
  font-family: var(--DisplayFont), serif;
  font-size: var(--18);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--Color3);
  padding: var(--13) var(--10);
}
@keyframes vdTicker {
  to {
    transform: translateX(-50%);
  }
}

/* --- центровка афишной подводки у центрированных секций ------------- */
.t2 h2.title:after,
.t6 h2.title:after,
.t20 h2.title:after,
.t21 h2.title:after,
.t22 h2.title:after {
  left: 50%;
  transform: translateX(-50%);
}
.t21 h2.title,
.t20 h2.title,
.t22 h2.title {
  align-self: center;
}

/* --- t23: подзаголовок раздела прайса ------------------------------- */
.t23aa > .title {
  font-family: var(--MainFont);
  font-size: var(--15);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--Color2);
  padding-bottom: var(--8);
}
.t23aa > .title:after {
  content: none;
}
.t23 > .description {
  max-width: var(--760);
}

/* --- t2: номер-штамп точки проката ---------------------------------- */
.t2a .title:before {
  content: "0" counter(vdpoint) " · ";
  color: var(--Color2);
}

/* --- t6: пунктирная «дорожка» позади лесенки программы -------------- */
.t6 .items {
  position: relative;
}
.t6 .items:before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 38%;
  height: var(--3);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--Color1) 35%, transparent) 0 var(--24), transparent var(--24) var(--44));
  transform: rotate(2.6deg);
  pointer-events: none;
}
.t6.it .t6a:before {
  width: var(--BigIconWidth);
  height: var(--BigIconWidth);
}

/* --- t10: крупное фото в бумажной раме ------------------------------ */
.t10 {
  background: var(--Color3);
  padding: var(--16);
  border-radius: var(--10);
  box-shadow: var(--CardShadow);
  transform: rotate(-0.5deg);
}
.t10 img {
  border-radius: var(--8);
  width: 100%;
}

/* --- t8: полоса кнопок = «тент» с диагональными полосами ------------ */
.t8 {
  background: repeating-linear-gradient(-55deg, var(--Color1) 0 var(--44), #14706B var(--44) calc(88*var(--Unit)));
  padding: var(--56) var(--SidePadding) var(--64);
  position: relative;
}
.t8:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(0px - var(--12));
  width: 100%;
  height: var(--14);
  background: radial-gradient(circle at 50% 0, #14706B var(--10), transparent calc(var(--10) + 1px));
  background-size: var(--24) var(--14);
  pointer-events: none;
}
.t8 .items {
  justify-content: center;
  align-items: center;
}
.t8 .btn {
  background: var(--Color3);
  color: var(--Color1);
  border-color: transparent;
  font-size: var(--17);
  padding: var(--20) var(--40);
}
.t8 .btn.cl {
  background: var(--Color2);
  color: var(--Color3);
}

/* --- t21: отзыв как афишная цитата ---------------------------------- */
.t21a > .title {
  max-width: var(--880);
  margin: 0 auto;
  position: relative;
  padding-top: var(--48);
}
.t21a > .title:before {
  content: "«»";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(-4deg);
  font-family: var(--DisplayFont), serif;
  font-size: var(--40);
  line-height: 1;
  color: var(--Color3);
  background: var(--Color2);
  border-radius: var(--10);
  padding: var(--6) var(--10);
}
.t21a .info .description {
  font-family: var(--DisplayFont), serif;
  font-size: var(--22);
  text-transform: uppercase;
  color: var(--Color1);
}
.t21a .info .description + .description {
  font-family: var(--MainFont);
  font-size: var(--14);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--Color2);
}

/* --- t16: контакты и бронь ------------------------------------------ */
.t16 .form {
  border: var(--2) dashed color-mix(in srgb, var(--Color1) 35%, transparent);
  padding: var(--34);
}
.t16 .form .btn {
  background: var(--Color2);
  color: var(--Color3);
  border: 0;
  width: 100%;
  font-weight: 700;
  font-size: var(--17);
  letter-spacing: 0.06em;
  padding: var(--18);
  border-radius: var(--12);
  box-shadow: 0 var(--5) 0 var(--Red);
  cursor: pointer;
}
.t16 .form .btn:hover {
  background: #EF5334;
  transform: translateY(calc(0px - var(--2)));
  box-shadow: 0 var(--7) 0 var(--Red);
}
.t16 .form .btn:active {
  transform: translateY(var(--3));
  box-shadow: 0 var(--1) 0 var(--Red);
}
.t16 .map {
  background: var(--MainFrameBg) repeating-linear-gradient(-45deg, rgba(15, 93, 93, 0.06) 0 var(--18), transparent var(--18) var(--36));
  border: var(--2) solid color-mix(in srgb, var(--Color1) 18%, transparent);
  border-radius: var(--16);
  min-height: var(--360);
}
.t16.mt .body > .map {
  flex: 0 0 auto;
  height: var(--420);
}
.t16a .description {
  font-size: var(--18);
}
.t16 .line .content {
  gap: var(--20);
  justify-content: center;
}

/* --- t13: чипы-преимущества (витрина) ------------------------------- */
.t13a {
  box-shadow: var(--CardShadow);
  border: var(--2) solid color-mix(in srgb, var(--Color1) 12%, transparent);
}

/* --- t14: боковой заголовок томатным штампом ------------------------ */
.t14 > .up {
  color: var(--Color2);
}

/* --- t20: логотипы на бумажных карточках ---------------------------- */
.t20a {
  background: var(--Color3);
  border-radius: var(--12);
  padding: var(--16);
  box-shadow: var(--CardShadow);
}

/* --- обложки и иконки секций по Id (пути от assets/) ---------------- */
.s12903 { --BG:url("../images/Sections/12903.png"); }
.s12910 { --BG:url("../images/Sections/12910.svg"); }
.s12911 { --BG:url("../images/Sections/12911.svg"); }
.s12912 { --BG:url("../images/Sections/12912.svg"); }
.s12913 { --BG:url("../images/Sections/12913.svg"); }
.s12945 { --BG:url("../images/Sections/12945.png"); }
.s12947 { --BG:url("../images/Sections/12947.png"); }
.s12948 { --BG:url("../images/Sections/12948.png"); }
.s12949 { --BG:url("../images/Sections/12949.png"); }
.s12956 { --BG:url("../images/Sections/12956.png"); }
.s12957 { --BG:url("../images/Sections/12957.png"); }
.s12958 { --BG:url("../images/Sections/12958.png"); }
.s12959 { --BG:url("../images/Sections/12959.png"); }
.s12960 { --BG:url("../images/Sections/12960.png"); }
.s12971 { --Ico:url("../images/ic-call.svg"); }
.s12972 { --Ico:url("../images/ic-wa-w.svg"); --BGC:#1FA855; }
.s12973 { --Ico:url("../images/ic-mail.svg"); }
.s12974 { --Ico:url("../images/ic-pin.svg"); }
.s12975 { --Ico:url("../images/ic-clock.svg"); }

/* --- scroll-reveal: диагональный «въезд вдоль дорожки» --------------- */
body.rv-on .rv {
  opacity: 0;
  transform: translate(calc(0px - var(--36)), calc(0px - var(--22)));
  transition: opacity 0.9s var(--EaseOut), transform 0.9s var(--EaseOut);
  transition-delay: calc(var(--i, 0) * 90ms);
}
body.rv-on .rv.in {
  opacity: 1;
  transform: translate(0, 0);
}
/* opacity-only — для карточек с собственным transform (полароиды, лесенка) */
body.rv-on .rvo {
  opacity: 0;
  transition: opacity 0.9s var(--EaseOut);
  transition-delay: calc(var(--i, 0) * 110ms);
}
body.rv-on .rvo.in {
  opacity: 1;
}

/* --- reduce motion: всё видно, движение выключено -------------------- */
@media (prefers-reduced-motion: reduce) {
  body.rv-on .rv,
  body.rv-on .rvo {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .vd-ticker .track,
  .t0a .scene .sun:before,
  .t19:before {
    animation: none;
  }
  .t0a .scene .l1,
  .t0a .scene .l2,
  .t0a .scene .l3 {
    transform: none;
  }
  body:not([data-language])::after {
    display: none;
  }
}

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