@import url("https://fonts.googleapis.com/css2?family=Prata&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

@import url("https://fonts.googleapis.com/icon?family=Material+Icons&display=swap");

/* «Ёлка» — главный ледовый городок Алматы. Bespoke-сборка на ките Pixeo:
   midnight-cinematic, гирлянда-рельс, снег-параллакс, Prata + Jost.
   Единая слитая таблица: bespoke внесён прямо в кит-правила. */

@charset "UTF-8";
:root {
  /* Ёлка: Jost (текст/лейблы, cyrillic) + Prata (дисплей, cyrillic) */
  --MainFont:'Jost', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --DisplayFont:'Prata', Georgia, 'Times New Roman', serif;
  --MonoFont:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --MaterialIcons:"Material Icons";
  --BG:"";
  --InLine:3;
  --InPLine:3;
  /* Палитра «Ёлки»: полночный синий + шампань-золото + мандарин + иней */
  --Night:#0B1230;
  --Night2:#070B22;
  --Panel:#121A3E;
  --Panel2:#0E1534;
  --Gold:#E8C877;
  --Tang:#FF7A3D;
  --Ink:#F2F5FF;
  --Muted:#B7C1DE;
  --Faint:#8791B5;
  --Line:rgba(232,200,119,.24);
  --LineSoft:rgba(232,200,119,.12);
  --GlowGold:rgba(232,200,119,.35);
  --EaseOut:cubic-bezier(.16,1,.3,1);
  --EaseUI:cubic-bezier(.4,0,.2,1);
  --Color1:#070B22;
  --Color2:#E8C877;
  --Color6:#FF7A3D;
  --Red:#FF6B5E;
  --Color3:#F2F5FF;
  --MainFrameBg:#121A3E;
  --Color4:#33406B;
  --Gray8:#E4E9F7;
  --Gray7:#B7C1DE;
  --Gray5:#8791B5;
  --Gray4:#6E7AA3;
  --Gray3:#CBD4EC;
  --Gray2:#26305A;
  --Gray0:#0E1534;
  /* Фирменный градиент (и обратный — для градиентного текста) */
  --GradFrom:var(--Color2);
  --GradTo:var(--Color6);
  --Gradient:linear-gradient(90deg, var(--GradFrom), var(--GradTo));
  --GradientR:linear-gradient(90deg, var(--GradTo), var(--GradFrom));
  --Bfr:"";
  /*
     Адаптивная единица измерения (чистый CSS, без JS).
     Макет свёрстан под ширину 1760: --Unit — это «1px макета»,
     масштабируется пропорционально ширине viewport.
     cqw вместо vw: без контейнера-предка он равен ширине viewport,
     а внутри admin-превью (#sections, container-type:inline-size)
     — ширине превью. На мобильных переопределяется в мобайл-блоке main.scss.
  */
  --Unit:calc(100cqw/1760);
  /*
     Совместимость: генератор стилей секций (SectionsCSSView.php)
     пишет calc(Npx/var(--MainCoef)). tan(atan2(...)) даёт безразмерное
     отношение 1760/ширина — тот же коэффициент, но без core.js.
     Можно удалить после перевода генератора на var(--Unit).
  */
  --MainCoef:tan(atan2(1760px,100cqw));
  --MainGap:var(--30);
  --Gap:var(--30);
  /* Ёлка: контентная колонна уже полотна — сцены full-bleed, контент 1360 */
  --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));
  --1760:calc(1760*var(--Unit));
  /* Ёлка: дополнительные единицы макета (undefined var(--N) = невидимый текст) */
  --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));
  --25:calc(25*var(--Unit));
  --28:calc(28*var(--Unit));
  --34:calc(34*var(--Unit));
  --38:calc(38*var(--Unit));
  --45:calc(45*var(--Unit));
  --54:calc(54*var(--Unit));
  --56:calc(56*var(--Unit));
  --68:calc(68*var(--Unit));
  --70:calc(70*var(--Unit));
  --76:calc(76*var(--Unit));
  --84:calc(84*var(--Unit));
  --88:calc(88*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));
  --180:calc(180*var(--Unit));
  --200:calc(200*var(--Unit));
  --220:calc(220*var(--Unit));
  --240:calc(240*var(--Unit));
  --260:calc(260*var(--Unit));
  --280:calc(280*var(--Unit));
  --300:calc(300*var(--Unit));
  --320:calc(320*var(--Unit));
  --340:calc(340*var(--Unit));
  --360:calc(360*var(--Unit));
  --380:calc(380*var(--Unit));
  --400:calc(400*var(--Unit));
  --420:calc(420*var(--Unit));
  --440:calc(440*var(--Unit));
  --460:calc(460*var(--Unit));
  --480:calc(480*var(--Unit));
  --520:calc(520*var(--Unit));
  --540:calc(540*var(--Unit));
  --580:calc(580*var(--Unit));
  --620:calc(620*var(--Unit));
  --640:calc(640*var(--Unit));
  --660:calc(660*var(--Unit));
  --680:calc(680*var(--Unit));
  --700:calc(700*var(--Unit));
  --720:calc(720*var(--Unit));
  --760:calc(760*var(--Unit));
  --800:calc(800*var(--Unit));
  --840:calc(840*var(--Unit));
  --900:calc(900*var(--Unit));
  --960:calc(960*var(--Unit));
  --1000:calc(1000*var(--Unit));
  --1040:calc(1040*var(--Unit));
  --1100:calc(1100*var(--Unit));
  --1120:calc(1120*var(--Unit));
  --1200:calc(1200*var(--Unit));
  --1320:calc(1320*var(--Unit));
  --1360:calc(1360*var(--Unit));
  --1400:calc(1400*var(--Unit));
  --1440:calc(1440*var(--Unit));
  --MainContentGap:var(--110);
  --MainPadding:var(--80);
  /* Боковые отступы основных секций (как на pixio.kz) */
  --SidePadding:var(--100);
  --MoreGap:var(--15);
  --HeaderSliderPaddingTB:var(--230);
  --HeaderSliderPaddingLR:var(--SidePadding);
  --HeaderSliderMinWidth:var(--550);
  --HeaderSliderMaxWidth:var(--600);
  --ContentVerticalGapTB:var(--40);
  --ContentVerticalGapLR:0;
  --MainBorderRadius:var(--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(--8);
  --BlockIconWidth:var(--60);
  --BigIconWidth:var(--100);
  --SideTitleWidth:var(--500);
  --MainHeaderFontSize:var(--40);
  --Type2-1Width:var(--560);
  --Type4Height:auto;
  --ArrowRight:var(--40);
  --ArrowBottom:var(--40);
  --ArrowWidth:var(--50);
  --ArrowHeight:var(--50);
  --ArrowImageURL:url("../images/arrow.svg");
  --ArrowHoverImageURL:url("../images/arrow-h.svg");
  --BorderColor:var(--Line);
  --HalfBorderRadius:50%;
  /* ============================================================
     Ролевые токены ТЕМЫ (характер облика, не контент).
     Дефолты равны текущему виду — пока тема молчит, вид не меняется.
     Тему включает класс body.theme-* (style/themes.scss), который
     переопределяет эти переменные. Не путать с примитивами размеров
     (--40, --96): здесь именно роли (заголовок, карточка, лейбл).
     Подробности — proj/Theme_Variants_Audit.md.
     ============================================================ */
  /* Типографика-характер: Prata — спокойный вес, без uppercase */
  --HeadingWeight:400; /* Prata существует только в 400 */
  --HeadingTracking:0.01em;
  --HeadingTransform:none;
  --HeadingLine:block; /* тонкая золотая нить под .h2 */
  --HeadingLineFill:linear-gradient(90deg, var(--Gold), rgba(232,200,119,0) 70%);
  --H3Weight:400;
  --HeroSize:var(--84); /* hero-заголовок t0a */
  --HeroWeight:400;
  --HeroTransform:none;
  --SectionHeadSize:var(--44); /* крупные заголовки секций t2/t6 */
  --LabelFont:var(--MainFont); /* лейблы Jost: .more/.btn/.annotation/подписи */
  --LabelTransform:uppercase;
  --LabelTracking:0.16em;
  /* Геометрия и фактура карточек: тёмные панели, hairline-золото */
  --CardRadius:var(--16); /* t3a/t7a/t9/t13a/t16.form/t17a */
  --CardRadiusLg:var(--20); /* t6a */
  --CardSharpRadius:var(--16); /* t2a */
  --CardFill:var(--Panel); /* заливка карточек */
  --CardShadow:0 var(--20) var(--40) rgba(3,6,20,.45); /* t2a */
  --CardBorderWidth:var(--1); /* рамка t6a */
  --CardAccentBorder:var(--3); /* кант слева t2a */
  --BadgeRadius:50%; /* номер-бейдж t6a — лампа гирлянды */
  --DividerWidth:1px; /* разделитель аккордеона t15a */
  --DividerColor:var(--LineSoft);
  /* Кнопки */
  --ButtonBorderWidth:var(--1);
  --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);
  font-size: var(--40);
  font-weight: var(--HeadingWeight);
  letter-spacing: var(--HeadingTracking);
  color: var(--Ink);
}
h1:empty, h2:empty, h3:empty, h4:empty, h5:empty {
  display: none;
}

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

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

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

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

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

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

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

/* Заголовок карточки t2a — задан ниже, в секционном блоке t2 */

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

/*
   Кнопки pixio.kz: .btn — прозрачная «тихая» mono-кнопка,
   .btn.cl — главный CTA с градиентом.
   База адаптивная: цвет и рамка берутся от текущего цвета текста
   контекста (на тёмном фоне — светлая, на светлом — тёмная); раньше
   была жёстко белой и пропадала на светлых фонах.
*/
.btn {
  display: inline-block;
  color: inherit;
  letter-spacing: var(--LabelTracking);
  font-size: var(--14);
  line-height: 1.45;
  font-family: var(--ButtonFont);
  text-transform: var(--ButtonTransform);
  padding: var(--16) var(--32);
  border: var(--ButtonBorderWidth) solid color-mix(in srgb, currentColor 30%, transparent);
  background: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: var(--ButtonsBorderRadius);
  transform: scale(1);
  transform-origin: center;
  transition: all 0.3s linear;
}
.btn:hover {
  transform: scale(1.05);
  text-decoration: none;
}
.btn.cl {
  background: var(--Gradient);
  border: 0;
  color: var(--Night2);
  font-family: var(--MainFont);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: var(--18);
  line-height: 1.4;
  padding: var(--20) var(--44);
  box-shadow: 0 var(--18) var(--40) calc(0px - var(--6)) rgba(232,200,119,.45);
}
.btn.cl:active {
  transform: scale(0.98);
}
.btn:focus-visible,
.text:focus-visible,
a:focus-visible {
  outline: var(--2) solid var(--Gold);
  outline-offset: var(--2);
}
.btn {
  /* t1 — исторический вариант «для светлых фонов»; после того как база
     стала адаптивной, совпадает с ней (оставлен для совместимости данных) */
}
.btn.t1 {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  color: inherit;
}

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

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

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

/*
   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 {
  font-family: var(--MainFont), serif;
  width: 100%;
  min-height: 100vh;
  color: var(--Ink);
  font-style: normal;
  position: relative;
  scroll-behavior: smooth;
  /* полночное небо: глубокий синий + тихие сполохи */
  background: radial-gradient(60cqw 40cqw at 85% 0%, rgba(120,98,214,.14), transparent 60%), radial-gradient(70cqw 45cqw at 8% 28%, rgba(232,200,119,.05), transparent 60%), var(--Night);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 0;
}
body:has(.popupBox.visible) {
  overflow: hidden;
}
body > 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: rgba(5,8,24,.94);
  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(--Panel2);
  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(--50);
  height: var(--50);
  background: url("../images/ic-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(--1) solid var(--Line);
  background-color: rgba(7,11,34,.6);
  border-radius: var(--6);
}
.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(--Ink);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}
a img {
  border: 0;
  max-width: 100%;
}

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

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

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

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

div.text,
input.text,
select.text,
textarea.text {
  width: 100%;
  border: 1px solid var(--Line);
  border-radius: var(--10);
  padding: var(--14) var(--16);
  background: rgba(7,11,34,.6);
  color: var(--Ink);
  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(--Faint);
}
input.text:focus,
select.text:focus,
textarea.text:focus {
  outline: none;
  border-color: var(--Gold);
  box-shadow: 0 0 0 var(--3) rgba(232,200,119,.22);
}

textarea.text {
  resize: vertical;
}

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

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

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

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

#mb {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--MainContentGap);
  position: relative;
}
/* ── Сигнатура «Ёлки»: гирлянда-рельс — светящаяся нить, сшивающая секции
      в один поток (page-spanning элемент, SMIL-пульсы в тайле svg) ── */
#mb:before {
  content: "";
  position: absolute;
  left: var(--40);
  top: calc(0px - var(--MainContentGap));
  bottom: 0;
  width: var(--44);
  background: url("../images/garland-rail.svg") top center/var(--44) auto repeat-y;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}

#gvp {
  padding: 0;
  background: rgba(5,8,24,.96);
  display: flex;
  flex-direction: column;
  /* тёмный лайтбокс «Ёлки»: стрелки — золото на полночи */
  --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: transparent;
  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;
}
#gvp .popup .photo > .cover img {
  max-height: 86vh;
  border-radius: var(--14);
  border: 1px solid var(--LineSoft);
  box-shadow: 0 var(--40) var(--90) rgba(0,0,0,.6);
}

/* Футер «Ёлки»: глубокая полночь, hairline-золото сверху */
footer.footer {
  background: #060A1E;
  border-top: 1px solid var(--LineSoft);
  padding: var(--36) var(--SidePadding);
  display: flex;
  gap: var(--MainGap);
  align-items: center;
  margin-top: var(--MainContentGap);
}
footer.footer .body {
  flex: 1;
  display: flex;
  gap: var(--MainGap);
  align-items: center;
}
footer.footer .description {
  flex: 1;
  color: var(--Faint);
  font-family: var(--MainFont);
  font-size: var(--14);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
footer.footer .description a {
  color: var(--Gold);
}
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;
  /* сайт целиком полночный — difference не нужен, шапка на градиент-вуали */
  mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(5,8,24,.9) 0%, rgba(5,8,24,.55) 55%, rgba(5,8,24,0) 100%);
  pointer-events: none;
  padding: var(--22) var(--40);
  display: flex;
  justify-content: space-between;
  gap: var(--MainGap);
  align-items: center;
}
header.header .logo {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--3);
  animation: headerLogoSlideIn 1s ease-out;
}
header.header .logo .lg {
  display: flex;
  align-items: center;
  gap: var(--14);
}
header.header .logo .lg:hover {
  text-decoration: none;
}
header.header .logo .lg > img {
  width: var(--44);
  height: var(--44);
  display: block;
}
header.header .logo .lt {
  display: flex;
  flex-direction: column;
  gap: var(--3);
}
header.header .logo .pixio {
  font-family: var(--DisplayFont);
  font-size: var(--26);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--Ink);
}
header.header .logo .label {
  font-family: var(--MainFont);
  font-size: var(--11);
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 200, 119, 0.8);
}
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: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--Ink);
  transition: color 0.2s var(--EaseUI);
}
header.header .menu a:hover {
  color: var(--Gold);
  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: rgba(232, 200, 119, 0.08);
  border: var(--1) solid var(--Line);
  border-radius: var(--14);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s var(--EaseUI);
}
header.header .contacts a:before {
  content: "";
  background: var(--BG) center center/contain no-repeat;
  display: block;
  width: var(--20);
  height: var(--20);
}
header.header .contacts a span {
  display: none;
}
header.header .contacts a.whatsapp {
  --BG:url("../images/ic-wa.svg");
}
header.header .contacts a:hover {
  background-color: rgba(232, 200, 119, 0.22);
  transform: scale(1.08);
  box-shadow: 0 0 var(--24) rgba(232, 200, 119, 0.25);
  text-decoration: none;
}
header.header {
  /* бургер-меню: разметка единая, на широких экранах скрыт (показывается в мобайл-блоке main.scss ниже) */
}
header.header .m {
  display: none;
}

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

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

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

#mb > .s.t16.dark,
#mb > .s.t18,
#mb > .s.t19,
#mb > .s.t21.dark {
  /* full-bleed сцены «Ёлки»: ширину контента держит внутренний блок */
  max-width: none;
}

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

/* контентная колонна 1360 центрируется (не-фулскрин раскладка) */
#mb > .s.body {
  margin-left: auto;
  margin-right: auto;
  width: min(var(--Body), calc(100% - var(--SidePadding) * 2));
}
#mb > .s.t16.dark,
#mb > .s.t18,
#mb > .s.t19,
#mb > .s.t21.dark {
  width: auto;
}

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

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

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

/* ============================================================
   Тип 0 — hero-слайдер («Создавайте сайты без кода»)
   Дети 0a: фон-обложка, h1, описание, ссылка; класс w — белый текст
   ============================================================ */
.t0 {
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  /* stretch: .container получает всю высоту секции (height:100% не
     работает при min-height у родителя); центрируют сами слайды .t0a */
  align-items: stretch;
  justify-content: center;
  background: var(--Night2);
}
.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;
  /* афиша: контент прижат влево, фото-сцена сзади */
  padding: 0 var(--HeaderSliderPaddingLR);
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
  background: var(--BG) center center/cover no-repeat;
  /* декоративный svg-слой из контента слайда */
}
.t0a svg {
  opacity: 0.3;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: svgOpacity 1.5s linear;
}
/* фон-фото слайда — реальным <img>: надёжнее ::after с var(--BG) */
.t0a .herobg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.72);
  z-index: 0;
}
/* вуаль: слева плотнее (под текст), снизу вшивается в полночь страницы */
.t0a .veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,10,30,.92) 0%, rgba(6,10,30,.6) 48%, rgba(11,18,48,.22) 100%), linear-gradient(0deg, var(--Night) 0%, rgba(11,18,48,0) 32%);
}
/* анимированная фигура героя (SMIL): городок + гирлянды, наклон за курсором */
.t0a svg.art {
  left: auto;
  right: calc(0px - var(--60));
  top: 50%;
  width: min(var(--880), 56%);
  height: 72%;
  opacity: 0.85;
  z-index: 1;
  animation: none;
  transform: translateY(-50%) perspective(var(--900)) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg));
  transition: transform 0.3s var(--EaseUI);
}
.t0a {
  /* плавающие декорации: кольцо и квадрат */
}
/* вместо китового кольца+квадрата — мягкие боке-огни гирлянды */
.t0a:before {
  content: "";
  display: block;
  width: var(--96);
  height: var(--96);
  right: var(--150);
  top: var(--96);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,200,119,.4), rgba(232,200,119,0) 70%);
  position: absolute;
  pointer-events: none;
  z-index: 1;
  animation: t0art 9s ease-in-out infinite alternate;
}
.t0a:after {
  content: "";
  display: block;
  width: var(--64);
  height: var(--64);
  bottom: var(--150);
  left: var(--128);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,61,.3), rgba(255,122,61,0) 70%);
  position: absolute;
  pointer-events: none;
  z-index: 1;
  animation: t0alb 14s ease-in-out infinite alternate;
}
.t0a .lnk {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.t0a .body {
  max-width: var(--760);
  margin: 0;
  position: relative;
  z-index: 2;
  animation: t0aInit 1.5s ease-out 1 forwards;
  opacity: 0;
}
/* китовые круг/кольцо вокруг заголовка убраны — их роль играет svg-фигура */
.t0a .body:before {
  content: none;
}
.t0a .body:after {
  content: none;
}
.t0a .info {
  display: flex;
  flex-direction: column;
  gap: var(--28);
  text-align: left;
  align-items: flex-start;
  will-change: transform;
  /* hero-типографика «Ёлки»: крупная спокойная Prata на полуночи */
}
.t0a .info .title {
  font-family: var(--DisplayFont);
  font-size: var(--HeroSize);
  line-height: 1.12;
  font-weight: var(--HeroWeight);
  text-transform: var(--HeroTransform);
  letter-spacing: 0.005em;
  color: var(--Ink);
}
.t0a .info .title span {
  background: linear-gradient(90deg, var(--GradTo), var(--GradFrom), var(--GradTo));
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: HeroGradient 4s ease-in-out infinite;
}
.t0a .info .description p {
  animation: t0aFromBottom 1.5s ease forwards;
  opacity: 0;
}
.t0a .info .description p:nth-child(1) {
  animation-delay: 0.6s;
}
.t0a .info .description p:nth-child(2) {
  animation-delay: 0.8s;
}
.t0a .info .description p:nth-child(3) {
  animation-delay: 1s;
}
.t0a .info .description p:nth-child(4) {
  animation-delay: 1.2s;
}
.t0a .info .description p:nth-child(5) {
  animation-delay: 1.4s;
}
.t0a .info .more {
  color: var(--Gold);
  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 — «Pixeo — конструктор нового поколения»
   Текстовый блок с изображением слева (body:before — обложка).
   Вариант bg (бывший тип 3) — обложка фоном всей секции, см. ниже
   ============================================================ */
/* t1 «о городке»: без подложки — фото аркой (ёлочный шар) + текст */
.s.t1:not(.bg) {
  background: transparent;
}

.t1 .body,
.t5,
.t9 {
  display: flex;
  gap: var(--80);
  align-items: center;
}

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

.t1 .body:before,
.t5:before {
  content: "";
  display: block;
  /* арка «ледяного окна»: высокий полукруглый портал с золотым кантом */
  flex: 0 0 min(var(--560), 44%);
  aspect-ratio: 5/6;
  background: var(--BG) center center/cover no-repeat;
  border-radius: var(--280) var(--280) var(--20) var(--20);
  border: 1px solid var(--Line);
  outline: 1px solid var(--LineSoft);
  outline-offset: var(--12);
  box-shadow: 0 var(--40) var(--80) rgba(3,6,20,.55);
}

.t5:before {
  border-radius: var(--MainBorderRadius);
  flex: 0 0 calc((100% - var(--MainGap)) / 2);
  aspect-ratio: auto;
  min-height: var(--420);
  outline: none;
}

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

/* без подложки внутренний отступ не нужен — воздух держит gap */
.t1:not(.bg) .body .info {
  padding-right: 0;
}

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

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

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

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

/* ============================================================
   Тип 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;
  position: relative;
}
.s.t1.bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,10,30,.15) 0%, rgba(6,10,30,.55) 55%, rgba(6,10,30,.9) 100%);
  pointer-events: none;
}
.s.t1.bg .body:before {
  display: none;
}
.s.t1.bg .body {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
}
.s.t1.bg .info {
  flex: 0 1 var(--640);
  padding: var(--110) var(--80) var(--110) 0;
}

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

/* t3 «зоны городка»: иммерсивные карты-сцены — фото на всю карточку,
   текст на градиентной вуали снизу, золотой индекс-номер (не китовая
   карточка «фото сверху») */
.t3 .items {
  counter-reset: zone;
}
.t3a {
  counter-increment: zone;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--480);
  border-radius: var(--CardRadius);
  border: 1px solid var(--LineSoft);
  overflow: hidden;
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  transition: transform 0.4s var(--EaseOut), box-shadow 0.4s var(--EaseOut), border-color 0.3s var(--EaseUI);
}
.t3a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.78);
  transition: transform 0.8s var(--EaseOut);
}
.t3a .info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ContentShortGap);
  padding: var(--110) var(--28) var(--28);
  background: linear-gradient(180deg, rgba(6,10,30,0) 0%, rgba(6,10,30,.72) 45%, rgba(6,10,30,.94) 100%);
}
.t3a .info:before {
  content: "0" counter(zone);
  font-family: var(--DisplayFont);
  font-size: var(--15);
  letter-spacing: 0.3em;
  color: var(--Gold);
}
.t3a:hover {
  transform: translateY(calc(0px - var(--6)));
  border-color: var(--Line);
  box-shadow: 0 var(--30) var(--60) rgba(3,6,20,.6), 0 0 var(--50) rgba(232,200,119,.1);
}
.t3a:hover img {
  transform: scale(1.06);
}

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

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

.t5 .t5a {
  background: none;
}

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

/* 6a — нумерованная карточка pixio.kz: рамка фирменного цвета,
   повёрнутый квадратный номер, соединительная линия между карточками.
   Цвета чередуются: фиолетовый/лайм. Иконка вместо номера —
   вариантами родителя .t6.il / .t6.it */
/* t6 «как спланировать вечер»: остановки гирлянды — светящиеся лампы-номера
   на тёмных панелях, сшитые пунктирной нитью (не китовые рамки-бейджи) */
.t6a {
  --HeadColor:var(--Gold);
  counter-increment: section6;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--16);
  border: var(--CardBorderWidth) solid var(--LineSoft);
  background: linear-gradient(180deg, var(--Panel) 0%, rgba(18,26,62,.3) 100%);
  border-radius: var(--CardRadiusLg);
  flex: 0 0 calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  width: calc((100% - var(--MainGap) * (var(--InLine) - 1)) / var(--InLine));
  padding: var(--32);
  transition: transform 0.5s var(--EaseOut), border-color 0.3s ease-in-out, box-shadow 0.4s var(--EaseUI);
}
.t6a:nth-child(odd) {
  --HeadColor:var(--Gold);
}
.t6a:nth-child(even) {
  --HeadColor:var(--Tang);
}
.t6a {
  /* нить гирлянды к следующей остановке */
}
.t6a:after {
  content: "";
  display: block;
  height: 0;
  width: var(--50);
  border-top: var(--2) dotted var(--Line);
  position: absolute;
  right: calc(0px - var(--50) / 2 - var(--MainGap) / 2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.t6a:nth-child(even):after, .t6a:last-child:after {
  content: none;
}
.t6a:before {
  content: "0" counter(section6);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--HeadColor) 45%, #fff), var(--HeadColor) 62%, color-mix(in srgb, var(--HeadColor) 55%, #000));
  color: var(--Night2);
  text-align: center;
  font-weight: 600;
  font-size: var(--18);
  border-radius: var(--BadgeRadius);
  width: var(--56);
  height: var(--56);
  line-height: var(--56);
  box-shadow: 0 0 var(--24) color-mix(in srgb, var(--HeadColor) 45%, transparent), 0 0 var(--60) color-mix(in srgb, var(--HeadColor) 20%, transparent);
  transform: none;
  transition: transform 0.3s var(--EaseUI), box-shadow 0.3s var(--EaseUI);
}
.t6a:hover {
  transform: translateY(calc(0px - var(--4)));
  border-color: var(--Line);
  box-shadow: 0 var(--24) var(--50) rgba(3,6,20,.5);
}
.t6a:hover:before {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 0 var(--36) color-mix(in srgb, var(--HeadColor) 65%, transparent), 0 0 var(--80) color-mix(in srgb, var(--HeadColor) 30%, transparent);
}
.t6a .info {
  display: flex;
  flex-direction: column;
  gap: var(--16);
  flex: 1;
}
.t6a h3.title {
  color: var(--HeadColor);
  font-weight: 400;
  font-size: var(--24);
  line-height: 1.33;
}
.t6a .description {
  color: var(--Muted);
  line-height: 1.625;
  font-size: var(--16);
}

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

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

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

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

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

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

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

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

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

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

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

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

.t15a {
  border-bottom: var(--DividerWidth) solid var(--DividerColor);
}
.t15a > .title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--MainGap);
}
/* стрелка аккордеона — свой золотой шеврон (Material-лигатуры офлайн ломаются) */
.t15a > .title:after {
  content: "";
  flex: 0 0 var(--12);
  width: var(--12);
  height: var(--12);
  border-right: var(--2) solid var(--Gold);
  border-bottom: var(--2) solid var(--Gold);
  transform: rotate(45deg) translate(calc(0px - var(--3)), calc(0px - var(--3)));
  transition: transform 0.25s ease;
}
.t15a .description {
  display: none;
  padding-bottom: var(--ButtonPaddingTB);
}
.t15a.current > .title:after {
  transform: rotate(225deg) translate(calc(0px - var(--3)), 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);
}

/* финальная сцена «Ёлки»: глубокая полночь с сиянием, не китовый чёрный */
.t16.dark {
  background: radial-gradient(60cqw 40cqw at 12% 0%, rgba(120,98,214,.18), transparent 60%), radial-gradient(50cqw 35cqw at 90% 100%, rgba(232,200,119,.08), transparent 65%), linear-gradient(180deg, #0A1130 0%, #060A1E 100%);
  border-top: 1px solid var(--LineSoft);
  padding: var(--128) var(--SidePadding);
  color: var(--Ink);
}
.t16.dark a {
  color: var(--Ink);
}
.t16.dark .body {
  max-width: var(--1280);
  margin: 0 auto;
  gap: var(--48);
}
.t16.dark h2.title {
  color: var(--Ink);
  font-size: var(--56);
  line-height: 1.12;
}
.t16.dark .description {
  color: var(--Muted);
  font-weight: 300;
  line-height: 1.625;
}

.t16 .line {
  display: flex;
  gap: var(--MainGap);
  flex-wrap:wrap;
}
.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 1 100%;
  min-height: var(--480);
  border-radius: var(--MainBorderRadius);
  overflow: hidden;
}

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

/* карта как объект бренда: полночная панель, пока не загрузились тайлы */
.t16 .map {
  position: relative;
  border: 1px solid var(--LineSoft);
  background: radial-gradient(40cqw 30cqw at 50% 40%, rgba(232,200,119,.07), transparent 65%), var(--Panel2);
}
.t16 .map:empty:before {
  content: "43.24° N · 76.91° E — ул. Международная 123";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: var(--13);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--Faint);
}
.t16 .map:empty:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--160);
  height: var(--160);
  transform: translate(-50%, -50%);
  border: 1px dashed var(--Line);
  border-radius: 50%;
  opacity: 0.6;
}

/* 16a — строка контакта: Material-иконка в цветном кружке
   (фирменные цвета чередуются, как контакты на pixio.kz) */
/* 16a — контакт: фирменная svg-иконка в золотом чипе (без Material —
   лигатуры офлайн ломаются, свои иконки надёжнее и брендовее) */
.t16a {
  --Ic:url("../images/ic-call.svg");
  display: flex;
  gap: var(--16);
  align-items: center;
}
.t16a:nth-child(2) {
  --Ic:url("../images/ic-mail.svg");
}
.t16a:nth-child(3) {
  --Ic:url("../images/ic-pin.svg");
}
.t16a:before {
  content: "";
  display: block;
  flex: 0 0 var(--48);
  width: var(--48);
  height: var(--48);
  border-radius: var(--14);
  border: 1px solid var(--Line);
  background: rgba(232,200,119,.08) var(--Ic) center center/var(--22) no-repeat;
}
.t16a .description {
  font-weight: 400;
  font-size: var(--18);
}

.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(--36);
  background: var(--CardFill);
  border: 1px solid var(--LineSoft);
  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);
}

/* тёмная форма «Ёлки»: стекло с золотым hairline, поля-боксы */
.t16.dark .form {
  background: rgba(232, 200, 119, 0.04);
  backdrop-filter: blur(8px);
  border: var(--1) solid var(--Line);
  border-radius: var(--16);
}
.t16.dark .form h3.title {
  font-weight: 400;
  font-size: var(--26);
  line-height: 1.33;
  color: var(--Ink);
}
.t16.dark .form .t16b > label {
  color: var(--Faint);
}
.t16.dark .form .text {
  color: var(--Ink);
  padding: var(--14) var(--16);
  background: rgba(7, 11, 34, 0.6);
  border: 1px solid var(--LineSoft);
  border-radius: var(--10);
  font-size: var(--16);
  line-height: normal;
  transition: border-color 0.2s var(--EaseUI), box-shadow 0.2s var(--EaseUI);
}
.t16.dark .form .text:focus {
  border-color: var(--Gold);
  box-shadow: 0 0 0 var(--3) rgba(232, 200, 119, 0.22);
  outline: none;
}
.t16.dark .form .text::placeholder {
  color: var(--Faint);
}
.t16.dark .form .btn {
  background: var(--Gradient);
  border: 0;
  border-radius: var(--10);
  margin-top: var(--16);
  text-align: center;
  color: var(--Night2);
  letter-spacing: 0.08em;
  font-weight: 700;
  font-family: var(--MainFont);
  font-size: var(--18);
  line-height: 1.55;
  padding: var(--16) 0;
  width: 100%;
  box-shadow: 0 var(--18) var(--40) calc(0px - var(--8)) rgba(232, 200, 119, 0.5);
}
.t16.dark .form .btn:active {
  transform: scale(0.98);
}

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

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

/* ============================================================
   Тип 18 — «Pixeo в цифрах» (тёмная полоса счётчиков)
   ============================================================ */
/* t18 «Ёлка в цифрах»: не чёрная полоса — прозрачная сцена в полуночи,
   сшита золотыми hairline сверху/снизу; цифры Prata + odometer */
.t18 {
  background: linear-gradient(180deg, rgba(232,200,119,0) 0%, rgba(232,200,119,.05) 50%, rgba(232,200,119,0) 100%);
  border-top: 1px solid var(--LineSoft);
  border-bottom: 1px solid var(--LineSoft);
  padding: var(--96) var(--SidePadding);
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  color: var(--Ink);
  text-align: center;
}
.t18 h2.title {
  color: var(--Ink);
}
.t18 .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--MainGap) var(--64);
  justify-content: center;
}
.t18 .description {
  color: var(--Faint);
}

.t18a {
  display: flex;
  flex-direction: column;
  gap: var(--20);
  /* счётчики — золотые цифры Prata с табличным набором под count-up */
}
.t18a .title {
  font-family: var(--DisplayFont);
  font-size: var(--76);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  background: var(--Gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.t18a {
  /* подпись — mono uppercase, как лейблы на pixio.kz */
}
.t18a .description {
  font-family: var(--LabelFont);
  font-size: var(--14);
  letter-spacing: var(--LabelTracking);
  text-transform: var(--LabelTransform);
}

/* ============================================================
   Тип 19 — CTA «Готовы попробовать?» (центрированный блок)
   ============================================================ */
/* CTA-блок: компактная карточка с градиентной рамкой
   (как «3 дня до запуска» на pixio.kz) */
/* t19 «билеты»: полночная сцена с сиянием, билет-карта с золотым hairline
   (никакой китовой белой карточки с градиентной рамкой) */
.t19 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--96) var(--SidePadding);
  background: radial-gradient(50cqw 32cqw at 50% 0%, rgba(232,200,119,.09), transparent 70%);
}
.t19 .info {
  position: relative;
  background: linear-gradient(180deg, var(--Panel) 0%, var(--Panel2) 100%) !important;
  border: 1px solid var(--Line);
  border-image: none !important;
  border-radius: var(--20);
  padding: var(--56) var(--90);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--14);
  text-align: center;
  max-width: 100%;
  box-shadow: 0 var(--40) var(--90) rgba(3,6,20,.6), 0 0 var(--90) rgba(232,200,119,.08);
}
/* перфорация билета: две «высечки» по бокам карты */
.t19 .info:before,
.t19 .info:after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--26);
  height: var(--26);
  border-radius: 50%;
  background: var(--Night);
  border: 1px solid var(--Line);
  transform: translateY(-50%);
}
.t19 .info:before {
  left: calc(0px - var(--13));
}
.t19 .info:after {
  right: calc(0px - var(--13));
}
.t19 .info h2.title {
  font-size: var(--34);
  padding-bottom: 0;
  color: var(--Ink);
}
.t19 .info h2.title:after {
  content: none;
}
.t19 .info .description {
  text-transform: var(--LabelTransform);
  letter-spacing: var(--LabelTracking);
  font-family: var(--LabelFont);
  font-size: var(--14);
  color: var(--Faint);
  /* акцентная строка (цена) — градиентным текстом */
}
.t19 .info .description strong,
.t19 .info .description b {
  display: block;
  font-family: var(--DisplayFont);
  font-weight: 400;
  font-size: var(--60);
  line-height: 1.15;
  letter-spacing: 0;
  background: var(--GradientR);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

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

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

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

.t21.dark {
  color: var(--Ink);
  background: linear-gradient(180deg, #0A1130 0%, #060A1E 100%);
  border-top: 1px solid var(--LineSoft);
  border-bottom: 1px solid var(--LineSoft);
  padding: var(--MainPadding);
}
.t21.dark h2.title {
  color: var(--Ink);
}
.t21.dark .description {
  color: var(--Muted);
}

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

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

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

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

/* ============================================================
   Тип 22 — «Pixeo изнутри» (галерея скриншотов с попапом)
   ============================================================ */
.t22 {
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  text-align: center;
}
/* t22 «галерея»: провис гирлянды — средняя колонка опущена, кадры 3:2
   с золотым hairline и тёплым свечением на hover */
.t22 .items {
  --Gap:var(--20);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--Gap);
}

.t22a {
  flex: 0 0 calc((100% - var(--Gap) * (var(--InLine) - 1)) / var(--InLine));
  overflow: hidden;
  border-radius: var(--14);
  border: 1px solid var(--LineSoft);
  cursor: pointer;
  transition: transform 0.4s var(--EaseOut), box-shadow 0.4s var(--EaseOut), border-color 0.3s var(--EaseUI);
}
.t22a:nth-child(3n+2) {
  transform: translateY(var(--40));
}
.t22a a {
  display: block;
}
.t22a img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) brightness(0.85);
  transition: transform 0.6s var(--EaseOut), filter 0.4s var(--EaseUI);
}
.t22a:hover {
  border-color: var(--Line);
  box-shadow: 0 var(--24) var(--50) rgba(3,6,20,.55), 0 0 var(--40) rgba(232,200,119,.12);
}
.t22a:nth-child(3n+2):hover {
  transform: translateY(var(--36));
}
.t22a:hover img {
  transform: scale(1.05);
  filter: saturate(1.05) brightness(1);
}

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

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

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

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

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

/* ===================================================================
   ЁЛКА — фирменные слои: гирлянда-швы, снег, курсор-фонарик, ревилы,
   word-reveal, картинки секций по Id. Новые правила (не overrides).
   =================================================================== */

/* — швы-гирлянды: горизонтальный провис нити над ключевыми секциями — */
.s.t3:before,
.s.t6:before,
.s.t15:before,
.s.t22:before {
  content: "";
  display: block;
  width: 100%;
  height: var(--40);
  margin-bottom: var(--10);
  background: url("../images/swag.svg") center top/auto var(--40) repeat-x;
  pointer-events: none;
  opacity: 0.85;
}

/* — снег: 3 слоя параллакса (тайлы-точки, дрейф + сдвиг за курсором) — */
.snow {
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  z-index: 3;
}
.snow.s1 {
  background-image: radial-gradient(circle, rgba(242,245,255,.85) var(--1), rgba(242,245,255,0) var(--2));
  background-size: var(--260) var(--260);
  opacity: 0.5;
  animation: yolkaSnow 11s linear infinite;
  transform: translate(calc((var(--mx, .5) - .5) * var(--40)), calc((var(--my, .5) - .5) * var(--30)));
}
.snow.s2 {
  background-image: radial-gradient(circle, rgba(242,245,255,.7) var(--1), rgba(242,245,255,0) calc(var(--1) * 1.6));
  background-size: var(--180) var(--180);
  background-position: var(--60) var(--90);
  opacity: 0.35;
  animation: yolkaSnow 17s linear infinite;
  transform: translate(calc((var(--mx, .5) - .5) * var(--24)), calc((var(--my, .5) - .5) * var(--18)));
}
.snow.s3 {
  background-image: radial-gradient(circle, rgba(232,200,119,.5) var(--1), rgba(232,200,119,0) calc(var(--1) * 1.5));
  background-size: var(--340) var(--340);
  background-position: var(--120) var(--40);
  opacity: 0.25;
  animation: yolkaSnow 25s linear infinite;
  transform: translate(calc((var(--mx, .5) - .5) * var(--12)), calc((var(--my, .5) - .5) * var(--10)));
}
@keyframes yolkaSnow {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: var(--340);
  }
}

/* — курсор-«фонарик»: тёплый свет за мышью на полночном фоне — */
#sections:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(var(--600) at calc(var(--mx, .5) * 100vw) calc(var(--my, .4) * 100vh), rgba(232, 200, 119, 0.09), transparent 62%);
}

/* — появления секций: IO + .in, строго под гейтом body.rv-on — */
body.rv-on #mb > .s {
  opacity: 0;
  transform: translateY(var(--40));
  transition: opacity 0.9s var(--EaseOut), transform 0.9s var(--EaseOut);
}
body.rv-on #mb > .s.t0,
body.rv-on #mb > .s.in {
  opacity: 1;
  transform: none;
}

/* — word-reveal: описание hero проявляется по словам — */
body.rv-on .t0a .info .description .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(var(--4));
  transition: opacity 0.7s var(--EaseOut), transform 0.7s var(--EaseOut), filter 0.7s var(--EaseOut);
  transition-delay: calc(var(--i, 0) * 55ms + 0.4s);
}
body.rv-on .t0.in .t0a .info .description .word {
  opacity: 1;
  transform: none;
  filter: none;
}

/* — картинки секций по Id (пути от assets/main.css → ../images/) — */
.s.s11610 .body:before {
  background-image: url("../images/Sections/11610.png");
}

/* — тише: reduce motion гасит снег, пульсы и фонарик — */
@media (prefers-reduced-motion: reduce) {
  .snow {
    animation: none;
    display: none;
  }
  #sections:after {
    content: none;
  }
  body.rv-on #mb > .s {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.rv-on .t0a .info .description .word {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ===================================================================
   MOBILE — слито из mobile.scss (раньше отдельный файл с media-атрибутом
   <=1024px). Содержимое уже обёрнуто в @media (max-width:1024px).
   С 19.06.2026 — часть единого main.scss.
   =================================================================== */
/*
   Мобильная/узкая вёрстка: чистая CSS-адаптация по ширине viewport,
   без UA-определения и JS. Грузится всем, активна только в media query.
*/
@media (max-width: 1024px) {
  html {
    touch-action: manipulation;
  }
  body.menu {
    overflow: hidden;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  :root {
    /* на узких экранах размеры 1:1 в px, без масштабирования от 1760 */
    --Unit: 1px;
    --MainCoef: 1;
    --MainGap: var(--15);
    --MainBlockPadding: var(--20);
    --SidePadding: var(--16);
    --ImageHeight: var(--250);
    --ButtonPaddingTB: var(--10);
    --ButtonPaddingLR: var(--15);
    --MainHeaderFontSize: var(--30);
    --MainContentGap: var(--56);
  }
  /* мобильная шапка «Ёлки»: обычная плашка, кликам нужен pointer-events */
  header.header {
    pointer-events: auto;
  }
  /* гирлянда-рельс и швы на узком экране не нужны */
  #mb:before {
    display: none;
  }
  .s.t3:before,
  .s.t6:before,
  .s.t15:before,
  .s.t22:before {
    height: var(--24);
    background-size: auto var(--24);
  }
  /* снег экономнее: один дальний слой */
  .snow.s1,
  .snow.s3 {
    display: none;
  }
  #sections:after {
    content: none;
  }
  .btn {
    font-size: var(--16);
    line-height: normal;
  }
  input.text,
  select.text,
  textarea.text {
    font-size: var(--16);
    line-height: normal;
  }
  .type1 .body,
  .type4 .items,
  .type5,
  .type6,
  .type7,
  .type8,
  .type9,
  .type9.a,
  .type10 .items,
  .type11 .items,
  .type11a,
  .type12 .items,
  .type13 .items,
  .type15,
  .type15a,
  .type19 .items,
  .type20,
  .type22 .line,
  .type23 .line,
  .type24 .line,
  .type26 .items,
  footer.footer {
    flex-direction: column;
    flex-wrap: initial;
  }
  .h1, h1.title, .h2, h2.title, .h3, h3.title {
    font-size: var(--30);
    line-height: normal;
    hyphens: auto;
  }
  .h3,
  h3.title {
    font-size: var(--20);
  }
  .description,
  .type33aaa:before {
    font-size: var(--16);
    line-height: normal;
  }
  .t2a .title {
    font-size: var(--20);
    line-height: normal;
  }
  .more {
    font-size: var(--14);
  }
  .type1 .body:before,
  .type9:before {
    flex: 0 0 var(--ImageHeight);
  }
  .type1 .body .info,
  .type9 .info,
  .type15 .info {
    padding: 0 var(--MainBlockPadding) var(--MainBlockPadding);
  }
  .type2 h2.title,
  .type4 h2.title,
  .type10 h2.title,
  .type11 h2.title,
  .type12 h2.title,
  .type14,
  .type15 > .items,
  .type17,
  .type19 h2.title,
  .type20,
  .type21,
  .type22 h2.title,
  .type22 .line .content,
  .type24 h2.title,
  .type24 .line,
  .type25 h2.title,
  .type25 .container,
  .type28 h2.title,
  .type28 .container,
  .type29,
  .type31 h2.title,
  .type31 .description,
  #gvp .popup .info-block,
  .type33 {
    padding: 0 var(--MainBlockPadding);
  }
  .type15 > .items,
  #gvp .popup .info-block {
    padding-bottom: var(--MainBlockPadding);
  }
  .type5,
  .type6,
  .type7,
  .type8 {
    padding: 0;
    display: flex;
    background: var(--Color1);
  }
  .type5:before,
  .type6:before,
  .type7:before,
  .type8:before {
    content: "";
    background: var(--BG) right center/cover no-repeat;
    flex: 0 0 var(--ImageHeight);
  }
  .type5 .info,
  .type6 .info,
  .type7 .info,
  .type8 .info,
  .type23 .body,
  .type26,
  .type27,
  .type27 .info,
  .type30 {
    padding: var(--MainBlockPadding);
  }
  .type15,
  .type23,
  #gvp .popup {
    padding: 0;
  }
  .type22 .line .map,
  .type24 .map {
    flex: 0 0 var(--ImageHeight);
  }
  #gvp .popup {
    flex-direction: column;
  }
  #gvp .popup .info-block {
    flex: none;
  }
  #gvp .popup .photo {
    position: relative;
  }
  #gvp .popup .photo > .arrow {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
  }
  #gvp .popup .photo > .arrow.right {
    left: auto;
    right: 0;
  }
  #gvp .popup .photo > .arrow .arrow {
    background-color: rgba(255, 255, 255, 0.75);
  }
  header.header {
    /* на узких экранах шапка обычная, в потоке, на полночной плашке */
    position: relative;
    mix-blend-mode: normal;
    background: #080D26;
    border-bottom: 1px solid var(--LineSoft);
    padding: var(--12) var(--SidePadding);
  }
  header.header .logo .pixio {
    font-size: var(--18);
  }
  header.header .logo .label {
    /* длинный трекинг-лейбл не влезает в 390px и раздувает шапку */
    display: none;
  }
  header.header .logo .lg > img {
    width: var(--32);
    height: var(--32);
  }
  .snow {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  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(--Night2);
    backdrop-filter: none;
    transition: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--80) var(--24);
    gap: var(--26);
  }
  header.header .menu a {
    font-size: var(--20);
    letter-spacing: 0.18em;
    color: var(--Ink);
  }
  header.header .menu a:hover {
    color: var(--Gold);
  }
  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;
  }
  /* --- Секции «Ёлки» на узких экранах ---------- */
  .t0 {
    min-height: 100svh;
  }
  .t0a:before, .t0a:after {
    display: none;
  }
  .t0a {
    padding: var(--80) var(--20) var(--48);
  }
  .t0a .body {
    max-width: 100%;
  }
  .t0a svg.art {
    right: calc(0px - var(--40));
    top: auto;
    bottom: 0;
    width: 70%;
    height: 44%;
    opacity: 0.5;
    transform: none;
  }
  .t0a .info .title {
    font-size: var(--36);
  }
  .t0a .info .description, .t21a > .title {
    padding: 0;
    font-size: var(--17);
  }
  .t0a .info .description p.alt, .t21a > .title p.alt {
    font-size: var(--12);
  }
  .t0a .info .description p.price, .t21a > .title p.price {
    font-size: var(--44);
  }
  .t0a .info .description p:has(.btn), .t21a > .title p:has(.btn) {
    flex-wrap: wrap;
    gap: var(--14);
  }
  /* сетки — в одну колонку; детям flex:none (иначе flex-basis кривит) */
  .t2 .items,
  .t3 .items,
  .t6 .items,
  .t7 .items,
  .t13 .items {
    --InLine: 1;
  }
  .t3a,
  .t6a,
  .t13a,
  .t7a {
    flex: none;
    width: 100%;
  }
  .t3a {
    min-height: var(--320);
  }
  .t3a .info {
    padding: var(--60) var(--18) var(--18);
  }
  .t2 h2.title,
  .t6 h2.title {
    font-size: var(--26);
  }
  /* соединительные линии между карточками не нужны в колонке */
  .t6a:after {
    content: none !important;
  }
  /* t1: колонка, арка сверху */
  .t1 .body {
    flex-direction: column;
    gap: var(--24);
  }
  .t1 .body:before {
    flex: none;
    width: min(320px, 86%);
    align-self: center;
    aspect-ratio: 5/6;
  }
  .s.t1.bg .body {
    justify-content: flex-start;
  }
  .s.t1.bg .info {
    flex: none;
    padding: var(--32) var(--20);
  }
  .t5,
  .t9 {
    flex-direction: column;
  }
  .t5:before {
    flex: 0 0 var(--240);
    min-height: 0;
  }
  .t9 > .items {
    flex: none;
  }
  .t14 {
    flex-direction: column;
  }
  .t14 > .up {
    flex: none;
  }
  /* t16: форма обязана растянуться, карта не схлопывается */
  .t16.dark {
    padding: var(--56) var(--SidePadding);
  }
  .t16.dark h2.title {
    font-size: var(--30);
  }
  .t16 .line {
    flex-direction: column;
    gap: var(--32);
  }
  .t16 .line .content {
    flex: none;
  }
  .t16 .form {
    flex: 0 0 auto;
    width: 100%;
  }
  .t16.mr .line .map,
  .t16.mt .body > .map {
    flex: 0 0 auto;
    min-height: 280px;
    width: 100%;
  }
  .t16 .map:empty:before {
    white-space: normal;
    width: 80%;
    text-align: center;
    letter-spacing: 0.14em;
  }
  .t18 .items {
    flex-direction: column;
    gap: var(--32);
  }
  .t18a {
    flex: none;
  }
  .t18a .title {
    font-size: var(--48);
  }
  /* t19: билет-карта во всю ширину, высечки прячем */
  .t19 .info {
    width: 100%;
    padding: var(--32) var(--22);
  }
  .t19 .info:before,
  .t19 .info:after {
    content: none;
  }
  .t19 .info .description strong,
  .t19 .info .description b {
    font-size: var(--40);
  }
  /* t22: одна колонка, провис отключаем */
  .t22 .items {
    --InLine: 1;
  }
  .t22a {
    flex: none;
    width: 100%;
  }
  .t22a:nth-child(3n+2),
  .t22a:nth-child(3n+2):hover {
    transform: none;
  }
  /* t21/карусели: не раздувать вьюпорт */
  .t21 .body,
  .t21 .container {
    max-width: 100%;
  }
  .t17 .container,
  .t20 .container,
  .t12 {
    max-width: 100%;
  }
  .t23 .items {
    columns: 1;
  }
  .t15a .title {
    font-size: var(--20);
  }
}
/* конец @media (max-width: 1024px) */

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

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

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

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

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

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

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

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

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

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

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

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

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

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