/* ALTRONIX — главная (чистая переверстка, без Tilda Zero).
   Источник токенов: design-code/design-system.md + design-code/showcase.html.
   Эталон пикселей: site/index.html (где расходится с дизайн-кодом — побеждает index.html).
   Ф2: токены + reset + база + шапка S0. Секции S1…S13 добавляются в Ф3…Ф8. */

/* ===== Токены дизайн-кода ===== */
:root{
  /* Поверхности и текст */
  --bg:#080808;
  --surface-1:#111111;
  --surface-2:#1B1B1B;
  --surface-brown:#1F1914;
  --line:#2A2A2A;
  --text:#FFFFFF;
  --text-soft:#F3F2F1;
  --text-muted:#A49B91;
  --text-onlight:#080808;
  --text-onlight-muted:#544B4C;
  --gray-424:#424242;

  /* Бренд — золото и коричневый */
  --gold:#D8BD97;
  --gold-light:#DED0C2;
  --gold-deep:#D5B890;
  --brown:#6B512E;
  --brown-deep:#312C24;

  /* Градиенты */
  --grad-gold:linear-gradient(117deg,#D8BD97 0%,#DED0C2 53.37%,#D5B890 100%);
  --hero-glow:radial-gradient(60% 80% at 75% 45%, rgba(216,189,151,.35), rgba(8,8,8,0) 70%);

  /* Радиусы */
  --r-sm:16px;   /* кнопки, иконки, мелкие карточки */
  --r-md:24px;   /* карточки фич */
  --r-lg:32px;   /* крупные карточки/блоки */
  --r-xl:40px;   /* hero-капсулы */
  --r-pill:1000px;

  /* Типографика */
  --font:'TikTokSans',Arial,sans-serif;

  /* Контейнер / шапка */
  --container:1200px;
  --header-h:64px;
  --header-h-mobile:56px;
  --m-gutter:16px;   /* Ф13/MW1: единый боковой gutter секций на мобильной (≤767), эталон = S9 «Официальный бренд» */
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html,body{background-color:var(--bg);}
body{
  font-family:var(--font);
  font-weight:300;
  font-size:16px;
  /* line-height: НЕ задаём (= normal, как у боевого body). Tilda держит межстрочный
     на каждом атоме, а не на body; шапка #ao-topbar наследует normal. Форс 1.55 делал
     кнопку выше на 3px и сдвигал текст → расхождение с эталоном. Межстрочный 1.55 для
     текста секций (дизайн-код §3) задаём ПОКОМПОНЕНТНО в Ф3+, не на body. */
  color:var(--text);
  /* -webkit-font-smoothing/text-rendering тоже НЕ форсим: боевая шапка их не задаёт
     (она вне Tilda .t-* скоупа); форс делал текст тоньше → расхождение с эталоном. */
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ===== S0 · Липкая шапка (topbar) =====
   Порт из site/index.html (#ao-topbar — уже чистая ручная вёрстка), значения 1:1.
   Прозрачная поверх hero; при скролле >50px JS вешает .ao-solid (тёмный фон + blur). */
#ao-topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:5000;
  font-family:var(--font);
  transition:background .25s,border-color .25s;
  border-bottom:1px solid transparent;
}
#ao-topbar.ao-solid{
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:rgba(216,189,151,.18);
}
#ao-topbar .ao-tb-in{
  max-width:var(--container);
  margin:0 auto;
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 40px;
  box-sizing:border-box;
}
#ao-topbar .ao-tb-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:0;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  /* На очень узких ширинах (≤320) сумма лого+gap+«Купить» переполняет контейнер.
     Без этого reset `img{max-width:100%}` + дефолтный flex-shrink ужимали бы лого
     (≈4px), а боевая шапка лого НЕ ужимает (кнопка слегка вылезает за паддинг).
     flex-shrink:0 = 1:1 с боевым на 320; no-op на 375/768/1440 (там переполнения нет). */
  flex-shrink:0;
}
#ao-topbar .ao-tb-logo img{
  height:22px;width:auto;display:block;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;user-drag:none;
  pointer-events:none;
}
#ao-topbar .ao-tb-nav{
  display:flex;
  gap:30px;
  margin-left:auto;
}
#ao-topbar .ao-tb-nav a,
#ao-topbar .ao-tb-nav a:link,
#ao-topbar .ao-tb-nav a:visited{
  color:#cfc8be;
  text-decoration:none;
  font-size:15px;
  font-weight:400;
  transition:color .18s;
}
#ao-topbar .ao-tb-nav a:hover{color:#fff;}
#ao-topbar .ao-tb-buy,
#ao-topbar .ao-tb-buy:link,
#ao-topbar .ao-tb-buy:visited{
  display:inline-block;
  padding:10px 22px;
  border-radius:24px;
  /* Точный градиент боевой шапки (A3: эталон = index.html). Почти равен --grad-gold,
     но стоп 53% (не 53.37%) — берём литерал, чтобы AA-края кнопки/текста были 1:1. */
  background:linear-gradient(117deg,#d8bd97,#ded0c2 53%,#d5b890);
  color:#0a0a0a;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  transition:filter .18s;
}
#ao-topbar .ao-tb-buy:hover{filter:brightness(1.06);}

@media screen and (max-width:1199px){
  #ao-topbar .ao-tb-in{height:var(--header-h-mobile);padding:0 18px;gap:12px;}
  #ao-topbar .ao-tb-nav{display:none;}
  #ao-topbar .ao-tb-buy{margin-left:auto;padding:9px 18px;font-size:14px;}
  #ao-topbar .ao-tb-logo img{height:19px;}
  #ao-topbar.ao-solid{background:rgba(10,10,10,.96);}
}

/* ===== Появление при скролле (R15/A7) ===== */
/* Лёгкое «выезжание» снизу + проявление, как у Tilda. Конечное состояние = натуральная
   позиция (никакого сдвига после .is-in), поэтому пиксель-диф снимается на осевшем кадре.
   ПРОГРЕССИВНОЕ УЛУЧШЕНИЕ: скрытие (opacity:0) применяется ТОЛЬКО при классе .ao-js на <html>
   (ставится синхронно в <head>). Если JS не загрузился/упал до reveal — критичный above-fold
   контент (H1/CTA/картинка) остаётся ВИДИМЫМ, а не пропадает за opacity:0. С работающим JS
   поведение и осевший кадр не меняются (в диф-захвате JS включён → класс есть → анимация идёт). */
.ao-js .ao-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform;}
.ao-js .ao-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .ao-js .ao-reveal{opacity:1;transform:none;transition:none;}
}

/* ===== S1 · Хиро =====
   Эталон пикселей — боевой index.html (rec1363585501), сверено computed-значениями.
   Фон #080808; золотое свечение запечено в PNG колонки (CSS-glow в боевом нет — A3). */
.ao-hero{
  position:relative;
  /* Фон-сцена караоке-вечеринки (= .t396__carrier боевого): золотое свечение + люди.
     cover/center; #080808 — заливка прозрачных зон (левый край сцены прозрачен).
     Картинка зависит от брейкпоинта (десктоп back_1.jpg / мобайл backm.png) — задаётся ниже. */
  background-color:var(--bg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  overflow:hidden;          /* колонка бликует за край вьюпорта — обрезаем, как в боевом */
  /* Текст хиро в боевом — внутри Tilda-скоупа .t-*, где задан -webkit-font-smoothing:antialiased
     (глифы тоньше). Без него глаз не видит, но pixelmatch заливает весь текст красным. Скоупим
     ТОЛЬКО на хиро — НЕ на body/шапку (#ao-topbar вне Tilda-скоупа = auto, форс ломал бы её). */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.ao-hero__wrap{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
}
.ao-hero__title{
  margin:0;
  font-family:var(--font);
  font-weight:500;
  color:var(--text);              /* #FFFFFF */
  letter-spacing:normal;
}
.ao-hero__sub{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  font-size:18px;
  line-height:28px;
  color:var(--text-soft);         /* #F3F2F1 */
  letter-spacing:normal;
}
.ao-hero__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font);
  font-weight:600;
  font-size:16px;
  line-height:24.8px;
  color:var(--brown);             /* #6B512E — текст hero-кнопки (НЕ #0A0A0A, как у шапки) */
  /* Точный градиент боевой hero-кнопки (стопы 0/53/100), литерал ради 1:1 AA-краёв. */
  background:linear-gradient(117deg,#d8bd97 0%,#ded0c2 53%,#d5b890 100%);
  border-radius:var(--r-sm);      /* 16px */
  text-decoration:none;
  cursor:pointer;
  transition:filter .18s;
}
.ao-hero__btn:hover{filter:brightness(1.04);}
.ao-hero__pills{
  list-style:none;
  margin:0;
  padding:0;
}
.ao-hero__pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;   /* база для разделителя-палочки (OR2, десктоп) */
}
.ao-hero__pill img{width:24px;height:24px;display:block;flex:0 0 auto;}
.ao-hero__pill span{
  font-family:var(--font);
  font-weight:400;
  font-size:14px;
  line-height:22px;
  color:#F5F5F4;
  opacity:.6;   /* OR2/OR1: текст пилюль приглушён как в боевом (#f5f5f4 @ .6); иконка остаётся полной */
  white-space:nowrap;
  /* В боевом текст-боксы пилюль фиксированы 104px (атомы Tilda) и текст в них слева —
     поэтому пилюли стоят на равных шагах. Без фикс.ширины автоширина «съезжает». */
  width:104px;
  text-align:left;
}
.ao-hero__speaker{display:block;max-width:none;}
.ao-hero__mask{display:none;}

/* ----- Десктоп (≥1200): текст слева, колонка справа. Калибровано на 1440. ----- */
@media screen and (min-width:1200px){
  .ao-hero{background-image:url("../images/tild3065-3932-4661-a333-646639393163__back_1.jpg");background-image:image-set(url("../images/tild3065-3932-4661-a333-646639393163__back_1.webp") type("image/webp"),url("../images/tild3065-3932-4661-a333-646639393163__back_1.jpg") type("image/jpeg"));}
  .ao-hero,.ao-hero__wrap{height:825px;}
  .ao-hero__text{
    position:absolute;
    left:20px;top:180px;        /* контейнер 1200 центрирован → на 1440 это x=140 */
    width:689px;
    text-align:left;
  }
  .ao-hero__title{font-size:64px;line-height:70px;width:689px;}
  .ao-hero__sub{width:376px;margin-top:40px;}
  .ao-hero__btn{width:320px;height:72px;margin-top:40px;}
  .ao-hero__pills{display:flex;gap:40px;margin-top:64px;}
  /* OR2: вертикальные палочки-разделители между пилюлями (только десктоп, как в боевом:
     1px×28px, #d8bd97 @ opacity .3; на мобайле боевой их прячет — оставляем без ::after). */
  .ao-hero__pill:not(:last-child)::after{content:"";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:1px;height:28px;background:#d8bd97;opacity:.3;}
  .ao-hero__speaker{position:absolute;left:325px;top:21px;width:1098px;height:auto;}
}

/* ----- Мобайл/планшет (<1200): центрированная колонка ----- */
@media screen and (max-width:1199px){
  .ao-hero{background-image:url("../images/tild3230-3539-4535-a330-396136643432__backm.png");background-image:image-set(url("../images/tild3230-3539-4535-a330-396136643432__backm.webp") type("image/webp"),url("../images/tild3230-3539-4535-a330-396136643432__backm.png") type("image/png"));}
  .ao-hero,.ao-hero__wrap{height:1051px;}
  .ao-hero__text{
    position:absolute;
    left:0;right:0;top:125px;
    text-align:center;
  }
  .ao-hero__title{font-size:40px;line-height:44px;width:337px;margin:0 auto;}
  .ao-hero__sub{width:337px;margin:67px auto 0;}
  .ao-hero__btn{width:300px;height:72px;margin:24px auto 0;}
  .ao-hero__pills{
    display:flex;flex-wrap:wrap;justify-content:center;
    column-gap:27px;row-gap:16px;
    width:340px;margin:32px auto 0;
  }
  /* Колонка и эллипс-маска: позиции эталона дробные и нелинейны по ширине (квирк скейла Tilda).
     Сетка-грилль колонки — высокочастотная, даже 0.5px сдвиг заливает её красным. Поэтому
     целочисленно выравниваем ПОД ширину: база = 375-точная, под-брейкпоинт 600+ = 768-точная. */
  .ao-hero__speaker{
    position:absolute;top:616px;width:563px;height:auto;
    left:calc(50% - 288.5px);   /* 375: x=-101 (центр −7px от центра вьюпорта) */
  }
  .ao-hero__mask{
    display:block;position:absolute;top:1020px;
    left:calc(50% - 304.5px);   /* 375: x=-117 — эллипс-маска фоном #080808 по низу колонки */
    width:517px;height:135px;
    background:url("../images/tild3833-6232-4931-b161-643830306634__ellipse_53.svg") center/contain no-repeat;
    pointer-events:none;
  }
}
/* Планшетная под-полоса (600–1199, репрезентативна 768): дробная подстройка колонки/эллипса */
@media screen and (min-width:600px) and (max-width:1199px){
  .ao-hero__speaker{left:calc(50% - 289px);}  /* 768: x=95 (центр 376.5) */
  .ao-hero__mask{left:calc(50% - 305px);}      /* 768: x=79 */
}

/* Порт-секции S2/S3 в боевом — кастомный HTML ВНЕ Tilda-скоупа, где Tilda не ставит box-sizing,
   т.е. браузерный дефолт content-box. Наш глобальный *{box-sizing:border-box} (reset) ломал бы их
   флекс-математику: .at-card{flex-basis:44%} под border-box даёт на мобайле 2 колонки вместо 1
   (в боевом content-box: 44%+паддинг+бордер не влезает по двое → одна колонка). Возвращаем
   content-box ровно для этих двух порт-секций, чтобы рендер совпал с боевым 1:1. */
#altronix-trust, #altronix-trust *,
#altronix-vreel, #altronix-vreel *{box-sizing:content-box;}

/* ===== S2 · Доверие / соц-доказательство (полоса «Хит продаж») =====
   Порт кастомной секции боевого index.html (#altronix-trust, вне Tilda). CSS 1:1 (был инлайн). */
/* -webkit-font-smoothing:antialiased — в боевом S2 наследует его из Tilda-скоупа .t-* (глифы тоньше);
   скоупим на секцию (не body — ломает шапку, как ловилось в Ф2). Без него pixelmatch заливает текст. */
#altronix-trust{background:#080808;padding:46px 20px 50px;font-family:'TikTokSans',Arial,sans-serif;color:#f3f2f1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#altronix-trust .at-in{max-width:1100px;margin:0 auto}
#altronix-trust .at-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a;background:linear-gradient(117deg,#d8bd97,#ded0c2 53%,#d5b890);border-radius:40px;padding:7px 16px;font-weight:600;margin-bottom:26px}
#altronix-trust .at-stats{display:flex;gap:14px;flex-wrap:wrap}
#altronix-trust .at-card{flex:1 1 0;min-width:150px;background:#0e0e0e;border:1px solid #2a2a2a;border-radius:16px;padding:22px 18px;text-align:center}
#altronix-trust .at-num{font-size:34px;font-weight:700;line-height:1.05;color:#f3f2f1;letter-spacing:-.01em}
#altronix-trust .at-num b{color:#d8bd97;font-weight:700}
#altronix-trust .at-lab{font-size:14px;color:#a49b91;margin-top:8px;line-height:1.35}
#altronix-trust .at-quote{margin-top:26px;background:#0e0e0e;border:1px solid #2a2a2a;border-left:3px solid #d8bd97;border-radius:14px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
#altronix-trust .at-stars{color:#e0a93a;font-size:17px;letter-spacing:2px;flex:none}
#altronix-trust .at-qtext{font-size:17px;line-height:1.5;color:#e6e4e1;flex:1 1 260px}
#altronix-trust .at-qtext span{color:#a49b91;font-size:14px;display:block;margin-top:6px}
@media(max-width:640px){
 #altronix-trust .at-card{flex:1 1 44%;min-width:0;padding:18px 10px}
 #altronix-trust .at-num{font-size:27px}
 #altronix-trust .at-lab{font-size:12.5px}
}

/* ===== S3 · Видео-лента отзывов («Смотрите и слушайте») =====
   Порт кастомной секции боевого index.html (#altronix-vreel, вне Tilda). CSS 1:1 (был инлайн).
   Скрипт-сборщик грида + плеер-по-клику (R6) — в js/altronix-home.js. */
#altronix-vreel{background:#080808;padding:72px 20px;font-family:'TikTokSans',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#altronix-vreel .axvr-in{max-width:1200px;margin:0 auto}
#altronix-vreel .axvr-h{color:#fff;font-weight:600;font-size:32px;line-height:1.2;margin:0 0 8px;text-align:center}
#altronix-vreel .axvr-sub{color:#a49b91;font-weight:300;font-size:16px;line-height:1.55;margin:0 auto 40px;max-width:660px;text-align:center}
#altronix-vreel .axvr-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
#altronix-vreel .axvr-pair{background:linear-gradient(180deg,#131313,#0e0e0e);border:1px solid #2a2a2a;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;height:100%}
#altronix-vreel .axvr-thumb{position:relative;background:#000;cursor:pointer;aspect-ratio:5/4;overflow:hidden;flex:0 0 auto}
#altronix-vreel .axvr-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
#altronix-vreel .axvr-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
#altronix-vreel .axvr-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:rgba(8,8,8,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#altronix-vreel .axvr-rev{padding:18px 22px 20px;display:flex;flex-direction:column;flex:1 1 auto}
#altronix-vreel .axvr-stars{color:#d8bd97;font-size:15px;letter-spacing:2px}
#altronix-vreel .axvr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#altronix-vreel .axvr-model{display:inline-block;margin:0;background:rgba(216,189,151,.12);border:1px solid rgba(216,189,151,.32);color:#d8bd97;font-size:12px;font-weight:500;padding:3px 12px;border-radius:1000px}
#altronix-vreel .axvr-txt{color:#f3f2f1;font-weight:300;font-size:15px;line-height:1.5;margin:0 0 12px}
#altronix-vreel .axvr-txt.muted{color:#a49b91;font-style:italic}
#altronix-vreel .axvr-wb{display:inline-flex;align-items:center;gap:6px;color:#a49b91;font-size:12px;margin-top:auto;padding-top:4px}
#altronix-vreel .axvr-wb i{width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#cb11ab,#7d1bb5);display:inline-block}
#altronix-vreel .axvr-wb--oz i{background:#005bff}
@media(min-width:768px){#altronix-vreel .axvr-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){#altronix-vreel{padding:48px 14px}#altronix-vreel .axvr-h{font-size:24px}}

/* ===== S4 · «Почему выбирают ALTRONIX Bravo 220D» =====
   Порт Zero-блока rec1363928821 (t396) в чистый поток. Эталон — боевой index.html (A3).
   Артборд абсолютный (как хиро): иконки 100×100 ложатся пиксель-в-пиксель; перенос текста
   («судить глазом» по A1) на позиции иконок не влияет. Десктоп ≥1200 = сетка 2×2; <1200 = одна
   колонка + 1px-разделители между карточками. Высоты секции = замер боевого (968 / 1430). */
.s4{
  position:relative;
  background:var(--bg);                 /* #080808 */
  overflow:hidden;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;   /* скоуп на секцию (не body — ломает шапку), как хиро Ф3 */
  -moz-osx-font-smoothing:grayscale;
}
.s4__title{
  position:absolute;left:0;right:0;
  margin:0;
  text-align:center;
  font-weight:500;
  color:var(--text);                    /* #FFFFFF */
  letter-spacing:normal;
}
.s4__card{position:absolute;}
.s4__ic{
  position:absolute;top:0;left:0;
  width:100px;height:100px;
  display:block;max-width:none;         /* иконка фикс. 100×100 (PNG 400×400), скругление запечено */
}
.s4__tt{
  position:absolute;
  margin:0;
  font-weight:600;
  color:var(--text);                    /* #FFFFFF */
  letter-spacing:normal;
}
.s4__dd{
  position:absolute;left:0;
  margin:0;
  font-weight:300;
  color:var(--text-soft);               /* #F3F2F1 — тонкий 18/300 на чёрном выглядит серым (норма) */
  letter-spacing:normal;
}
.s4__sep{
  position:absolute;
  height:1px;
  background:#474139;                    /* замер видимой линии боевого (rgb 71,65,57); только мобайл */
  display:none;
}

/* ----- Десктоп (≥1200): сетка 2×2, контент-блок 960px центрирован ----- */
@media screen and (min-width:1200px){
  .s4{height:968px;}
  /* заголовок: бокс эталона = x241 w944 (центр 713, на 7px левее центра вьюпорта — квирк Tilda).
     left=card1.left, width=944 → центр текста 712 ≈ эталон. */
  .s4__title{top:99px;left:calc(50% - 480px);right:auto;width:944px;font-size:52px;line-height:57px;}
  .s4__card{width:430px;}
  .s4__c1{top:276px;left:calc(50% - 480px);}   /* 1440: x240 */
  .s4__c2{top:276px;left:calc(50% + 50px);}    /* 1440: x770 */
  .s4__c3{top:604px;left:calc(50% - 480px);}
  .s4__c4{top:604px;left:calc(50% + 50px);}
  .s4__tt{top:14px;left:124px;width:300px;font-size:20px;line-height:24px;}
  /* в эталоне подзаголовки ряда 2 на 4px выше относительно иконки, чем ряда 1 (квирк Tilda) */
  .s4__c3 .s4__tt,.s4__c4 .s4__tt{top:10px;}
  .s4__dd{top:124px;width:430px;font-size:18px;line-height:28px;}
}

/* ----- Мобайл/планшет (<1200): одна колонка, блок 300px центрирован, 1px-разделители ----- */
@media screen and (max-width:1199px){
  .s4{height:1430px;}
  .s4__title{top:62px;font-size:28px;line-height:29px;}
  .s4__card{left:calc(50% - 150px);width:300px;}   /* 375: x37.5 · 768: x234 */
  .s4__c1{top:190px;}
  .s4__c2{top:478px;}
  .s4__c3{top:790px;}
  .s4__c4{top:1127px;}
  .s4__tt{top:18px;left:112px;width:300px;font-size:18px;line-height:22px;}
  .s4__dd{top:125px;width:300px;font-size:16px;line-height:25px;}
  .s4__c3 .s4__dd{width:238px;}                     /* в боевом карточка 3 на мобайле уже */
  /* в боевом иконки нечётных карточек (1,3) на 1px левее чётных (квирк Tilda: center−151 vs −150),
     а текст у всех на фикс. x. Двигаем ТОЛЬКО иконку (не карточку), чтобы грилль PNG лёг 1:1. */
  .s4__c1 .s4__ic,.s4__c3 .s4__ic{left:-1px;}
  .s4__sep{display:block;left:calc(50% - 150px);width:300px;}
  .s4__sep1{top:446px;}
  .s4__sep2{top:758px;}
  .s4__sep3{top:1095px;}
  .s4__sep4{top:1382px;}
}

/* ===== S5 · «ALTRONIX Bravo вживую — дизайн и работа» (видео-демо) =====
   Заголовок 40/600 + подзаголовок 16/300 muted по центру; ниже видео-демо bravo-demo.mp4:
   постер (текст «ALTRONIX BRAVO 220D» запечён) + круглая play-кнопка (SVG 12×14, как S3).
   Ролик грузится ТОЛЬКО по тапу (lazy) — altronix-home.js. */
.s5{
  background:var(--bg);
  text-align:center;
  padding:64px 20px 92px;   /* bottom-gap до S6 (десктоп: 92 + S6 top 80 = 172, замер боевого) */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.s5__title{margin:0 auto;font-size:40px;line-height:48px;font-weight:600;color:var(--text);letter-spacing:normal;max-width:1000px;}
.s5__sub{margin:8px auto 0;font-size:16px;line-height:24.8px;font-weight:300;color:var(--text-muted);max-width:660px;}
.s5__media{margin-top:58px;}
.s5__player{position:relative;width:1000px;max-width:100%;margin:0 auto;aspect-ratio:1280/720;background:#000;cursor:pointer;overflow:hidden;}
.s5__poster{width:100%;height:100%;object-fit:cover;display:block;}
/* OR4: play-кнопка как в боевом #altronix-vreview .axrv-play — 74×74, кольцо-рамка 1px white@.4,
   blur(4px), font-size 26px (треугольник-SVG em-размера 1.05×1.22em → ~27×32px, не мелкий 12×14). */
.s5__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(8,8,8,.5);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;transition:background .18s;}
.s5__play:hover{background:rgba(8,8,8,.72);}
.s5__play svg{width:1.05em;height:1.22em;fill:currentColor;margin-left:.08em;display:block;}
.s5__video{width:100%;height:100%;display:block;background:#000;}
@media screen and (max-width:600px){
  .s5{padding:48px 16px 68px;}
  .s5__title{font-size:24px;line-height:30px;}
  .s5__sub{font-size:15px;margin-top:12px;}
  .s5__media{margin-top:30px;}
  /* OR4: play-кнопка в боевом не уменьшается на мобайле (74px на всех ширинах) — переопределения нет */
}

/* ===== S6 · «Знакомьтесь — ALTRONIX Bravo 220D» — КАРТОЧКА ТОВАРА =====
   ⚠️ Динамическая коммерция инжектится сервером по data-elem-id (см. HTML-коммент секции).
   Мобайл/планшет <1200 — одна колонка (поток) с -m фоном карты. Десктоп ≥1200 — 2 колонки
   (атомы карты позиционируются абсолютно поверх фикс-карты 1160×618, как S4). */
.s6{background:var(--bg);text-align:center;padding:112px 20px 121px;}   /* top-gap от S5, bottom-gap до S7 (мобайл) */
.s6__title{margin:0 auto;font-size:26px;line-height:31px;font-weight:500;color:var(--text);letter-spacing:normal;max-width:320px;}
.s6__br-d{display:none;}   /* перенос «…ALTRONIX / Bravo 220D» только на десктопе; на мобайле естественный перенос после «—» */
.s6__sub{margin:14px auto 0;font-size:18px;line-height:1.55;font-weight:300;color:var(--text-soft);max-width:340px;}
.s6card{
  position:relative;width:300px;max-width:100%;margin:88px auto 0;padding:47px 23px 138px;
  background:url("../images/tild6465-3333-4632-a563-616233333061__back1-m.jpg") center/100% 100% no-repeat,#0d0a07;
  background-image:image-set(url("../images/tild6465-3333-4632-a563-616233333061__back1-m.webp") type("image/webp"),url("../images/tild6465-3333-4632-a563-616233333061__back1-m.jpg") type("image/jpeg"));
  border-radius:32px;text-align:center;
  box-shadow:inset 0 0 0 1px #6d5c48;   /* OR5: рамка-обводка блока-карточки как в боевом (1px #6d5c48). inset-тень — без сдвига абс. детей */
}
.s6card__name{margin:0;font-size:22px;line-height:26px;font-weight:500;color:#fff;}
.s6card__feats{list-style:none;margin:25px 0 0;padding:0;}
.s6card__feats li{display:flex;gap:14px;align-items:flex-start;text-align:left;margin:0 0 4px;font-size:16px;line-height:25px;font-weight:300;color:var(--text-soft);}
.s6card__chk{flex:0 0 auto;width:20px;height:20px;margin-top:2px;display:block;}
.s6card__photo{position:relative;margin:5px auto 0;width:252px;max-width:100%;aspect-ratio:512/400;border-radius:24px;overflow:hidden;border:1px solid #312c24;cursor:zoom-in;}   /* OR6: рамка вокруг большой картинки товара как в боевом (1px #312c24). cursor:zoom-in — клик открывает фото крупно в лайтбоксе (03.08) */
.s6card__photo:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* Подсказка «можно увеличить»: полупрозрачная лупа в углу фото. Появляется поверх картинки,
   кликам не мешает (pointer-events:none) — клик ловит сам контейнер. */
.s6card__zoom{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.55);border:1px solid rgba(216,189,151,.45);color:#D8BD97;pointer-events:none;transition:background .15s,color .15s;}
.s6card__photo:hover .s6card__zoom{background:rgba(10,10,10,.78);color:#EDE0CB;}
.s6card__pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;}
.s6card__pic.is-active{opacity:1;}
.s6card__colors{margin:6px 0 0;text-align:left;}
.s6card__colors-lab{display:block;margin:0 0 10px;font-size:16px;line-height:18px;font-weight:300;color:var(--text-soft);}
.s6card__colors-cap{color:var(--text-soft);font-weight:300;}
.s6card__colorname{color:var(--gold);font-weight:500;white-space:nowrap;}
.s6card__swatches{display:flex;gap:11px 4px;justify-content:flex-start;flex-wrap:wrap;}
.s6card__sw{flex:0 0 auto;width:60px;height:47px;padding:0;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;overflow:hidden;transition:border-color .15s;}
.s6card__sw img{width:100%;height:100%;object-fit:cover;display:block;}
.s6card__sw.is-active{border-color:var(--gold);}
.s6card__price{margin:25px 0 0;font-size:32px;line-height:50px;font-weight:500;color:#fff;}
.s6card__pricenote{margin:4px auto 0;font-size:13px;line-height:16px;font-weight:300;color:#f5f5f4;opacity:.6;max-width:260px;}   /* OR7: цвет дисклеймера приглушён как в боевом (#f5f5f4 @ .6) */
.s6card__buy{margin:18px 0 0;display:flex;justify-content:center;}
.s6card__buy-native{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:16px;background:var(--grad-gold);color:var(--brown);font-weight:600;font-size:15px;line-height:1.1;}
@media screen and (min-width:1200px){
  .s6{padding:80px 20px 94px;}   /* bottom-gap до S7 (94 + S7 top 96 = 190, замер боевого) */
  .s6__title{font-size:52px;line-height:57px;max-width:none;}
  .s6__br-d{display:inline;}
  .s6__sub{font-size:20px;line-height:31px;max-width:900px;}
  .s6card{
    width:1160px;height:618px;max-width:none;margin:20px auto 0;padding:0;
    background:url("../images/tild3763-6662-4236-a164-363330306130__back_2.jpg") center/100% 100% no-repeat;
    background-image:image-set(url("../images/tild3763-6662-4236-a164-363330306130__back_2.webp") type("image/webp"),url("../images/tild3763-6662-4236-a164-363330306130__back_2.jpg") type("image/jpeg"));
    border-radius:40px;text-align:left;
  }
  .s6card__photo{border-radius:32px;}
  .s6card__name{position:absolute;top:64px;left:64px;font-size:32px;line-height:35px;}
  .s6card__feats{position:absolute;top:166px;left:64px;margin:0;}
  .s6card__feats li{font-size:18px;line-height:28px;margin:0 0 4px;}
  .s6card__chk{margin-top:4px;}
  .s6card__photo{position:absolute;top:64px;left:584px;width:512px;height:400px;margin:0;aspect-ratio:auto;}
  .s6card__colors{position:absolute;top:480px;left:477px;margin:0;display:flex;align-items:center;gap:15px;}
  .s6card__colors-lab{margin:0;width:93px;line-height:18px;text-align:left;}   /* 2 строки «Варианты / цвета:» как боевой (w≈93) */
  .s6card__swatches{flex-wrap:nowrap;gap:11px;}
  .s6card__sw{width:76px;height:59px;}   /* десктоп: свотч боевого 76px (моб 60×47); канон дизайн-кода 76×59 */
  .s6card__price{position:absolute;top:411px;left:64px;margin:0;}
  .s6card__pricenote{position:absolute;top:420px;left:256px;width:289px;max-width:none;margin:0;text-align:left;}   /* OR7: снимаем базовый cap max-width:260 → width:289 даёт 2 строки как в боевом (а не 3) */
  .s6card__buy{position:absolute;top:485px;left:64px;margin:0;display:block;}
}

/* ===== S7 · «Сценарии использования» (4 карточки) =====
   Десктоп ≥1200 — горизонтальный фон-композит (__N.jpg), текст слева/справа поочерёдно (абсолют
   поверх карты 1160×346). Мобайл <1200 — вертикальный -m фон (__N-m.jpg), текст сверху по центру. */
.s7{background:var(--bg);text-align:center;padding:64px 20px 39px;}   /* bottom-gap до S8: боевой Tilda-артборд S7 (rec1363788841) держит хвост пустого фона ниже 4-й карты; замер /karaoke → +39px на мобайле (768/375), чтобы #altronix-box стартовал точно как в боевом */
.s7__title{margin:0 auto;font-size:32px;line-height:37px;min-height:74px;display:flex;align-items:center;justify-content:center;font-weight:500;color:#fff;letter-spacing:normal;}   /* бокс заголовка боевого фикс. 74 (1 строка @768 / 2 строки @375 — оба в 74) */
.s7card{position:relative;max-width:300px;margin:17px auto 0;border-radius:32px;overflow:hidden;aspect-ratio:300/512;}   /* мобайл/планшет: укороченный аспект (было 300/652) — срезает пустую черноту СВЕРХУ, картинка цела (градиент+фото снизу через background-position:bottom). Высота фикс. → в 2 колонки карточки равны */
/* OR8: рамка-карточка со скруглением у каждого блока сценария как в боевом (1px #544b4c).
   Оверлей ::after — рисует рамку поверх фон-картинки и текста, без сдвига абс. панели (OR8).
   Заодно обрамляет тёмный правый край фото-слева карточек (Семейный/Подарок) → строб-полоса
   больше не «вытекает» в фон страницы (OR9); кадр визуально приглушает яркость (OR10). */
.s7card::after{content:"";position:absolute;inset:0;border:1px solid #544b4c;border-radius:inherit;pointer-events:none;z-index:2;}
.s7card:first-of-type{margin-top:32px;}   /* зазор заголовок→1-я карточка */
.s7card__bg{position:absolute;inset:0;background-size:cover;background-position:bottom center;}   /* bottom-anchor: при укороченной карточке кроп уходит ВВЕРХ (срезается пустая чернота), низ картинки (градиент+фото+головы) цел */
/* мобайл/планшет <1200 — вертикальный -m композит (текст сверху, фото снизу) */
.s7card:nth-of-type(1) .s7card__bg{background-image:url("../images/tild3434-6665-4264-b034-373535303762__1-m.jpg");background-image:image-set(url("../images/tild3434-6665-4264-b034-373535303762__1-m.webp") type("image/webp"),url("../images/tild3434-6665-4264-b034-373535303762__1-m.jpg") type("image/jpeg"));}
.s7card:nth-of-type(2) .s7card__bg{background-image:url("../images/tild3863-3236-4366-b261-646134356138__2-m.jpg");background-image:image-set(url("../images/tild3863-3236-4366-b261-646134356138__2-m.webp") type("image/webp"),url("../images/tild3863-3236-4366-b261-646134356138__2-m.jpg") type("image/jpeg"));}
.s7card:nth-of-type(3) .s7card__bg{background-image:url("../images/tild3231-6333-4464-b734-386464666532__3-m.jpg");background-image:image-set(url("../images/tild3231-6333-4464-b734-386464666532__3-m.webp") type("image/webp"),url("../images/tild3231-6333-4464-b734-386464666532__3-m.jpg") type("image/jpeg"));}
.s7card:nth-of-type(4) .s7card__bg{background-image:url("../images/tild6532-3565-4334-a562-623462613832__4-m.jpg");background-image:image-set(url("../images/tild6532-3565-4334-a562-623462613832__4-m.webp") type("image/webp"),url("../images/tild6532-3565-4334-a562-623462613832__4-m.jpg") type("image/jpeg"));}
.s7card__panel{position:relative;padding:31px 24px 0;text-align:center;}
.s7card__tt{margin:0;font-size:22px;line-height:25px;font-weight:500;color:#fff;}
.s7card__lead{margin:12px 0 0;font-size:16px;line-height:25px;font-weight:600;color:#fff;}
.s7card__list{list-style:none;margin:14px 0 0;padding:0;}
.s7card__list li{display:flex;gap:14px;align-items:flex-start;text-align:left;margin:0 0 9px;font-size:16px;line-height:25px;font-weight:300;color:var(--text-soft);}
.s7card__chk{flex:0 0 auto;width:20px;height:20px;margin-top:2px;display:block;}
@media screen and (min-width:1200px){
  .s7{padding:96px 20px 100px;}   /* bottom-gap до S8: десктоп-артборд S7 даёт ~100px хвоста ниже 4-й карты (замер /karaoke) */
  .s7__title{display:block;min-height:0;font-size:52px;line-height:81px;}   /* бокс заголовка боевого = 81 (центрир. текст ниже) */
  .s7card{width:1160px;height:346px;max-width:none;margin:0 auto 24px;border-radius:40px;aspect-ratio:auto;}
  .s7card__bg{background-position:center;}   /* десктоп: горизонтальный композит центрируем (база использует bottom для вертикальных -m) */
  .s7card:last-of-type{margin-bottom:0;}   /* хвост секции отдаём padding-bottom .s7, чтобы стык был детерминирован (без margin-collapse) */
  .s7card:first-of-type{margin-top:43px;}
  /* десктоп ≥1200 — горизонтальный композит (__N.jpg: фото сбоку + тёмная зона под текст) */
  .s7card:nth-of-type(1) .s7card__bg{background-image:url("../images/tild6235-3432-4438-a233-643166353266__1.jpg");background-image:image-set(url("../images/tild6235-3432-4438-a233-643166353266__1.webp") type("image/webp"),url("../images/tild6235-3432-4438-a233-643166353266__1.jpg") type("image/jpeg"));}
  .s7card:nth-of-type(2) .s7card__bg{background-image:url("../images/tild3839-3636-4136-b166-353661646434__2.jpg");background-image:image-set(url("../images/tild3839-3636-4136-b166-353661646434__2.webp") type("image/webp"),url("../images/tild3839-3636-4136-b166-353661646434__2.jpg") type("image/jpeg"));}
  .s7card:nth-of-type(3) .s7card__bg{background-image:url("../images/tild3638-3930-4037-a562-326330663437__3.jpg");background-image:image-set(url("../images/tild3638-3930-4037-a562-326330663437__3.webp") type("image/webp"),url("../images/tild3638-3930-4037-a562-326330663437__3.jpg") type("image/jpeg"));}
  .s7card:nth-of-type(4) .s7card__bg{background-image:url("../images/tild6631-6661-4463-b263-623630316366__4.jpg");background-image:image-set(url("../images/tild6631-6661-4463-b263-623630316366__4.webp") type("image/webp"),url("../images/tild6631-6661-4463-b263-623630316366__4.jpg") type("image/jpeg"));}
  .s7card__panel{position:absolute;top:57px;width:560px;padding:0;text-align:left;}
  .s7card--left .s7card__panel{left:64px;}
  .s7card--right .s7card__panel{left:560px;}   /* текст-панель справа (card-x 560 = page x700, как боевой) */
  .s7card__tt{font-size:30px;line-height:47px;}
  .s7card__lead{margin:21px 0 0;font-size:18px;line-height:28px;}
  .s7card__list{margin:13px 0 0;}
  .s7card__list li{font-size:16px;line-height:25px;margin:0 0 8px;}
}

/* Порт-секции S8/S9 боевого (#altronix-box, #altronix-official) — кастомный HTML вне Tilda Zero.
   В боевом они в Tilda .t-body-скоупе: box-sizing наследуется браузерный content-box (Tilda НЕ
   ставит border-box на эти узлы) + -webkit-font-smoothing:antialiased (из .t-body). Замерено на
   /karaoke (probe-box.mjs / probe-fs.mjs). Наш глобальный *{border-box}+нет smoothing ломал бы
   рендер → возвращаем content-box+antialiased ровно на эти секции, чтобы совпасть 1:1 (как S2/S3). */
#altronix-box, #altronix-box *,
#altronix-official, #altronix-official *,
#ao-lightbox, #ao-lightbox *{box-sizing:content-box;}
#altronix-box, #altronix-official{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ===== S8 · «Всё для старта — уже в коробке» (порт #altronix-box, CSS 1:1 боевого) ===== */
/* font-weight:400 — в боевом .ab-sub/li вес НЕ задан и наследуют Tilda .t-body=400; наш body=300
   давал их тоньше (замер: ref weight=400, cand=300 → текст уже на доли px). Задаём 400 на секцию,
   h2(700) и ✓(700) со своими явными весами. Без этого диф S8 заливался текстом (5.3%@375 → ~эталон). */
#altronix-box{background:#000;padding:64px 20px;font-family:'TikTokSans',Arial,sans-serif;color:#f3f2f1;font-weight:400}
#altronix-box .ab-in{max-width:1100px;margin:0 auto;display:flex;gap:40px;align-items:center;flex-wrap:wrap}
#altronix-box .ab-img{flex:1 1 440px;min-width:280px}
#altronix-box .ab-img img{width:100%;height:auto;border-radius:18px;display:block}
#altronix-box .ab-txt{flex:1 1 340px;min-width:260px}
#altronix-box h2{font-size:38px;line-height:1.1;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
#altronix-box .ab-sub{font-size:17px;color:#a49b91;margin:0 0 24px;line-height:1.5}
#altronix-box ul{list-style:none;margin:0;padding:0}
#altronix-box li{display:flex;gap:13px;align-items:flex-start;font-size:18px;line-height:1.4;padding:12px 0;border-bottom:1px solid #1a1a1a}
#altronix-box li:last-child{border-bottom:none}
#altronix-box li::before{content:"✓";color:#0a0a0a;background:linear-gradient(117deg,#d8bd97,#d5b890);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:none;margin-top:1px}
@media(max-width:740px){#altronix-box h2{font-size:29px}#altronix-box li{font-size:16px}}

/* ===== S9 · «Официальный бренд ALTRONIX» (порт #altronix-official, CSS 1:1 боевого) ===== */
#altronix-official{background:#080808;padding:72px 20px;font-family:'TikTokSans',Arial,sans-serif;color:#f3f2f1}
#altronix-official .ao-in{max-width:1100px;margin:0 auto}
#altronix-official .ao-h{font-size:38px;font-weight:600;line-height:1.15;text-align:center;margin:0 0 10px;color:#fff}
#altronix-official .ao-sub{font-size:17px;color:#a49b91;font-weight:300;text-align:center;max-width:680px;margin:0 auto 40px;line-height:1.5}
#altronix-official .ao-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:36px}
#altronix-official .ao-card{background:#0e0e0e;border:1px solid #2a2a2a;border-radius:16px;padding:22px 24px}
#altronix-official .ao-card b{display:block;font-size:18px;font-weight:600;color:#fff;margin-bottom:6px}
#altronix-official .ao-card span{font-size:15px;color:#a49b91;line-height:1.5;font-weight:300}
#altronix-official .ao-cert{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center;background:linear-gradient(180deg,#131313,#0e0e0e);border:1px solid #2a2a2a;border-radius:20px;padding:28px}
#altronix-official .ao-cert-txt{flex:1 1 300px;min-width:260px}
#altronix-official .ao-cert-txt b{display:block;font-size:21px;color:#fff;font-weight:600;margin-bottom:8px}
#altronix-official .ao-cert-txt span{font-size:15px;color:#a49b91;line-height:1.55;font-weight:300}
#altronix-official .ao-scans{display:flex;gap:14px;flex:0 0 auto}
#altronix-official .ao-scans a{display:block;width:150px;cursor:zoom-in;border-radius:10px;overflow:hidden;border:1px solid #2a2a2a;transition:border-color .2s}
#altronix-official .ao-scans a:hover{border-color:#d8bd97}
#altronix-official .ao-scans img{width:100%;height:auto;display:block;background:#fff}
@media(min-width:760px){#altronix-official .ao-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){#altronix-official{padding:48px 16px}#altronix-official .ao-h{font-size:27px}#altronix-official .ao-scans a{width:120px}}
#ao-lightbox{display:none;position:fixed;inset:0;z-index:100000;background:rgba(8,8,8,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#ao-lightbox.on{display:flex}
#ao-lightbox .ao-lb-card{position:relative;background:#fff;border-radius:14px;padding:10px;box-shadow:0 24px 80px rgba(0,0,0,.55);cursor:auto;max-width:min(560px,92vw)}
#ao-lightbox img{display:block;width:100%;height:auto;max-height:76vh;border-radius:8px;background:#fff}
#ao-lightbox .ao-lb-close{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;background:#1a1a1a;color:#fff;font-size:24px;line-height:34px;text-align:center;cursor:pointer;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.4);font-family:Arial,sans-serif}
#ao-lightbox .ao-lb-close:hover{background:#000}
/* Вариант .is-photo — товарное фото вместо скана документа: тёмная карточка (белая рамка вокруг
   тёмного студийного кадра выглядит как ошибка), шире и выше, крестик крупнее и всегда внутри
   экрана (на узких телефонах вынос за угол обрезался). Ставится обработчиком в altronix-home.js. */
#ao-lightbox .ao-lb-card.is-photo{background:#0E0E0E;border:1px solid #2A2A2A;border-radius:20px;padding:8px;max-width:min(1180px,94vw)}
#ao-lightbox .ao-lb-card.is-photo img{max-height:84vh;border-radius:14px;background:#0E0E0E}
#ao-lightbox .ao-lb-card.is-photo .ao-lb-close{width:44px;height:44px;font-size:28px;line-height:40px;top:-16px;right:-16px}
/* Телефон: горизонтальный кадр упирается в ширину экрана — отдаём ему всё, что можно (поля
   оверлея 8px, карточка 97vw, паддинг 5). Крестик уезжает ВНУТРЬ угла: вынос за угол там
   срезался краем экрана. Рассмотреть детали можно пинчем — зум страницы не запрещён. */
@media(max-width:640px){#ao-lightbox{padding:8px}
  #ao-lightbox .ao-lb-card.is-photo{max-width:97vw;padding:5px;border-radius:16px}
  #ao-lightbox .ao-lb-card.is-photo img{border-radius:12px}
  #ao-lightbox .ao-lb-card.is-photo .ao-lb-close{top:8px;right:8px;border-color:rgba(255,255,255,.85);background:rgba(10,10,10,.82)}}

/* ===== S11 · «Что пишут покупатели» (порт #altronix-reviews, CSS 1:1 боевого) =====
   Самодостаточная секция боевого вне Tilda → content-box + font-weight:400 (наследование
   .t-body боевого; мой body=300, иначе текст карточек потончает). Карточки рендерит JS. */
#altronix-reviews,#altronix-reviews *{box-sizing:content-box}
#altronix-reviews{background:#080808;padding:72px 20px;font-family:'TikTokSans',Arial,sans-serif;font-weight:400}
#altronix-reviews .axr-in{max-width:1200px;margin:0 auto}
#altronix-reviews .axr-h{color:#fff;font-weight:600;font-size:32px;line-height:1.2;text-align:center;margin:0 0 8px}
#altronix-reviews .axr-sub{color:#a49b91;font-weight:300;font-size:16px;line-height:1.55;text-align:center;margin:0 auto 36px;max-width:620px}
#altronix-reviews .axr-grid{display:grid;grid-template-columns:1fr;gap:16px}
#altronix-reviews .axr-card{background:#f3f2f1;color:#1a1a1a;border-radius:24px;padding:24px}
#altronix-reviews .axr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#altronix-reviews .axr-stars{color:#e0a93a;font-size:15px;letter-spacing:1px}
#altronix-reviews .axr-tag{font-size:12px;color:#8a8580;background:#e6e4e1;padding:3px 10px;border-radius:1000px;white-space:nowrap}
#altronix-reviews .axr-card p{font-size:15px;line-height:1.5;margin:0 0 14px;color:#1a1a1a}
#altronix-reviews .axr-meta{display:inline-flex;align-items:center;gap:6px;color:#7a7570;font-size:11.5px}
#altronix-reviews .axr-meta i{width:13px;height:13px;border-radius:3px;background:linear-gradient(135deg,#cb11ab,#7d1bb5);display:inline-block}
#altronix-reviews .axr-card.axr-hidden{display:none}
#altronix-reviews .axr-more{text-align:center;margin-top:28px}
#altronix-reviews .axr-more button{background:transparent;border:1px solid #4a443d;color:#fff;font-family:'TikTokSans',Arial,sans-serif;font-size:15px;font-weight:500;padding:14px 32px;border-radius:16px;cursor:pointer;transition:border-color .2s}
#altronix-reviews .axr-more button:hover{border-color:#d8bd97}
@media(min-width:768px){#altronix-reviews .axr-grid{grid-template-columns:repeat(3,1fr);gap:18px}#altronix-reviews .axr-h{font-size:40px}}
@media(max-width:520px){#altronix-reviews{padding:48px 14px}#altronix-reviews .axr-h{font-size:24px}}

/* ===== S11b · «Так она выглядит вживую» (реальные фото из отзывов, UGC) =====
   В стиле S11/S9: тёмный фон #080808, max-width 1200, акцент #d8bd97. Группы по цвету: подпись-свотч
   + грид плиток ЕДИНОГО размера (aspect-ratio 4/5, object-fit cover) — убирает «разнобой» размеров;
   полный кадр без обрезки открывается в лайтбоксе по клику. */
#altronix-real{background:#080808;padding:8px 20px 72px;font-family:'TikTokSans',Arial,sans-serif}
#altronix-real *{box-sizing:border-box}
#altronix-real .axl-in{max-width:1200px;margin:0 auto}
#altronix-real .axl-h{color:#fff;font-weight:600;font-size:32px;line-height:1.2;text-align:center;margin:0 0 8px}
#altronix-real .axl-sub{color:#a49b91;font-weight:300;font-size:16px;line-height:1.55;text-align:center;margin:0 auto 36px;max-width:620px}
/* «Полка» групп: flex-wrap, между группами зазор больше (--gap-grp), внутри группы — меньше
   (--gap-tile), так читаются как отдельные подразделы. Ширина плитки = clamp ≈ 1/3 контейнера
   (минус зазоры) → ровно 3 фото в ряд на десктопе; группы пакуются: ряд1 Black Gold+Cream(1+2),
   ряд2 Tawny+Green+Burgundy(1+1+1). На мобайле плитка ужимается до 150px → по 2 группы в ряд. */
#altronix-real{--gap-grp:24px;--gap-tile:10px}
#altronix-real .axl-shelf{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:30px var(--gap-grp)}
#altronix-real .axl-group{display:flex;flex-direction:column}
#altronix-real .axl-label{display:flex;align-items:center;gap:8px;color:#cfc4b6;font-size:13px;font-weight:500;letter-spacing:.3px;margin:0 0 8px;padding-left:2px;white-space:nowrap}
#altronix-real .axl-rule{height:1px;width:100%;margin:0 0 12px;background:linear-gradient(90deg,#d8bd97,rgba(216,189,151,.35));border-radius:1px}
#altronix-real .axl-dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#altronix-real .axl-dot--black{background:#161616;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 2.5px #c9a96a}
#altronix-real .axl-dot--green{background:#46553c}
#altronix-real .axl-dot--burgundy{background:#5f2a30}
#altronix-real .axl-dot--tawny{background:#a86c3b}
#altronix-real .axl-dot--cream{background:#e4d6ba}
#altronix-real .axl-tiles{display:flex;gap:var(--gap-tile)}
#altronix-real .axl-ph{display:block;width:clamp(150px, 27vw, 376px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;cursor:zoom-in;background:#141414;line-height:0}
#altronix-real .axl-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
#altronix-real .axl-ph img.axl-zoom{transform:scale(1.32);transform-origin:52% 60%}
#altronix-real .axl-ph:hover img{transform:scale(1.05)}
#altronix-real .axl-ph:hover img.axl-zoom{transform:scale(1.38)}
@media(min-width:768px){#altronix-real{padding:8px 20px 80px}#altronix-real .axl-h{font-size:40px}#altronix-real .axl-label{font-size:14px;margin-bottom:13px}}
/* Мобайл: боковой gutter 16px как у остальных блоков; плитки заполняют ширину (2 в ряд, без
   больших чёрных полей по краям). Своя очередность групп: ряд1 Black Gold + Tawny, ряд2 Cream
   (две), ряд3 Green + Burgundy. DOM-порядок (десктоп): 1 Black Gold·2 Cream·3 Tawny·4 Green·5 Burgundy. */
@media(max-width:767px){#altronix-real{--gap-grp:16px;padding-left:16px;padding-right:16px}
  #altronix-real .axl-ph{width:calc((100vw - 48px)/2)}
  #altronix-real .axl-group:nth-child(1){order:1}
  #altronix-real .axl-group:nth-child(2){order:3}
  #altronix-real .axl-group:nth-child(3){order:2}
  #altronix-real .axl-group:nth-child(4){order:4}
  #altronix-real .axl-group:nth-child(5){order:5}}
@media(max-width:520px){#altronix-real .axl-h{font-size:24px}}

/* ===== S12 · «Частые вопросы» (FAQ) — реконструкция T396-заголовка + T585-аккордеона =====
   Свои новые узлы → border-box. Замеры боевого: заголовок-полоса 204px (≤1199: 180px),
   h2 52/500 (≤1199: 32/500), top 99/71. Аккордеон: контейнер 1200/640/100%, item-padding
   27/27 (≤480: 15/14), title 23/600 (≤480: 18), text 18/400 lh1.62 (≤480: 17), круг 40 #d8bd97. */
#altronix-faq{background:#080808;font-family:'TikTokSans',Arial,sans-serif}
#altronix-faq *{box-sizing:border-box}
#altronix-faq .faq-head{height:204px;padding:99px 20px 0;text-align:center}
#altronix-faq .faq-head h2{margin:0;font-size:52px;font-weight:500;line-height:1.1;color:#fff;display:inline-block}
#altronix-faq .faq-acc{max-width:1200px;margin:0 auto;padding:0 20px}
#altronix-faq .faq-item{border-top:1px solid #424242}
#altronix-faq .faq-acc{border-bottom:1px solid #424242}
/* круг-иконка позиционируется АБСОЛЮТНО (как в боевом T585) — иначе её 40px в flex-потоке
   раздувают высоту шапки и айтемы накопительно уезжают вниз. Высоту шапки задаёт только title. */
#altronix-faq .faq-q{position:relative;display:block;width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:27px 50px 27px 0;font-family:inherit;color:#fff}
#altronix-faq .faq-tt{display:block;font-size:23px;font-weight:600;line-height:1.35;color:#fff}
#altronix-faq .faq-ic{position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#d8bd97;display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
#altronix-faq .faq-ic svg{display:block;width:18px;height:18px;overflow:visible}   /* OR11: «+» меньше и тоньше как в боевом T585 (svg 18×18 → плечи 16.5px, штрих 1.5px при stroke-width:2 в viewBox 0 0 24 24) */
#altronix-faq .faq-ic path{stroke:#6b512e;stroke-width:2px;stroke-linecap:square;fill:none}
#altronix-faq .faq-item.is-open .faq-ic{transform:translateY(-50%) rotate(45deg)}
#altronix-faq .faq-a{overflow:hidden;max-height:0;transition:max-height .3s ease}
#altronix-faq .faq-item.is-open .faq-a{max-height:1200px}
#altronix-faq .faq-a p{margin:0 0 20px;padding:0 0 20px 0;font-size:18px;font-weight:400;line-height:1.62;color:#f3f2f1}
/* Заголовок-полоса (T396) переключается при ≤1199 (брейкпоинт T396). Контейнер аккордеона
   (t585 внутри .t-container) — на сетке Tilda: max-width 1200/960/640 ИНКЛЮЗИВНО (НЕ 1199/959/639,
   иначе ширина и перенос title'ов расходятся ровно на границах 1200/960 — поймано спот-чеком 960/1200). */
@media(max-width:1199px){#altronix-faq .faq-head{height:180px;padding-top:71px}#altronix-faq .faq-head h2{font-size:32px;max-width:238px}}
@media(max-width:1200px){#altronix-faq .faq-acc{max-width:960px}}
@media(max-width:960px){#altronix-faq .faq-acc{max-width:640px}}
@media(max-width:640px){#altronix-faq .faq-acc{max-width:100%}}
@media(max-width:480px){#altronix-faq .faq-q{padding:15px 50px 14px 0}#altronix-faq .faq-tt{font-size:18px;line-height:1.35}#altronix-faq .faq-a p{font-size:17px;padding-bottom:10px}}

/* ===== S13 · Финальный CTA (rec1365030321) + футер (rec1365701721) + реквизиты =====
   Реконструкция двух Tilda Zero артбордов боевого (как S4/S6/S7): фикс-высота артборда +
   абс-позиционирование атомов по grid-math (десктоп grid 1200 / мобайл 320, центр калькой).
   Геометрия/шрифты/цвета сверены 1:1 с живым /karaoke (recon-s13.mjs). cta-trust / контакты /
   #altronix-legal — дословный inline-порт боевого (вне Tilda). НЕ хардкодим: cookie-баннер,
   счётчик аналитики, ax-legalfoot (юр-ссылки+копирайт) — их инжектит сервер; #altronix-legal
   статичен в боевом → ОБЯЗАТЕЛЬНО воспроизведён здесь (152-ФЗ/закон о рекламе). */

/* ----- Финальный CTA (артборд) ----- */
.s13cta{
  position:relative;
  background:var(--bg);                 /* #080808 */
  overflow:hidden;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;   /* скоуп на секцию (как хиро/S4), не body — ломает шапку */
  -moz-osx-font-smoothing:grayscale;
}
/* фото-карточка с фоном (десктоп back.jpg / мобайл back-m.jpg), скругление 40px + рамка 1px */
.s13cta__bg{position:absolute;border:1px solid #2d2a27;border-radius:var(--r-xl);background-position:center center;background-size:cover;background-repeat:no-repeat;}
/* S13-фоны — крупный план грилль-сетки: webp с сохранением фиделити не легче JPEG (q92≈190КБ≈jpg),
   а лоссовый webp перетряхивает высокочастотную сетку выше порога дифа → оставляем оригинальный JPEG. */
.s13cta__bg--d{background-image:url("../images/tild3039-3338-4335-b865-633139623761__back.jpg");}
.s13cta__bg--m{background-image:url("../images/tild6132-6366-4864-b961-366536613437__back-m.jpg");}
.s13cta__h{position:absolute;margin:0;font-weight:500;color:var(--text);letter-spacing:normal;}
.s13cta__sub{position:absolute;margin:0;font-weight:300;color:var(--text-soft);letter-spacing:normal;}
.s13cta__btn{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-weight:600;font-size:14px;line-height:21.7px;
  color:var(--brown);                   /* #6B512E */
  /* тот же градиент, что у hero-кнопки (стопы 0/53/100), литерал ради 1:1 AA-краёв */
  background:linear-gradient(117deg,#d8bd97 0%,#ded0c2 53%,#d5b890 100%);
  border-radius:var(--r-sm);            /* 16px */
  text-decoration:none;cursor:pointer;transition:filter .18s;
}
.s13cta__btn:hover{filter:brightness(1.04);}

/* ===== Привлекающая анимация главных CTA «Купить» (вариант «Комбо», выбран владельцем) =====
   Комбо = пульс (кнопка чуть увеличивается) + свечение (золотой ореол дышит) + перелив (светлая
   полоса бежит по золоту). Самый заметный из вариантов — чтобы кнопки явно читались кликабельными.
   Пульс+свечение — на самой кнопке (ao-combo: transform+box-shadow; box-shadow НЕ режется overflow).
   Перелив — ::before c z-index:-1 (над золотом, под текстом — HTML эталона не трогаем); overflow:hidden
   клипает его по кнопке. s13cta__btn оставляем position:absolute (раскладка) — только z-index+overflow. */
@keyframes ao-combo{0%,100%{transform:scale(1);box-shadow:0 0 6px 0 rgba(216,189,151,0)}50%{transform:scale(1.05);box-shadow:0 0 26px 3px rgba(216,189,151,.55)}}
@keyframes ao-cta-shine{0%,58%{transform:translateX(-160%)}100%{transform:translateX(160%)}}
#ao-topbar .ao-tb-buy,.ao-hero__btn{position:relative;}
#ao-topbar .ao-tb-buy,.ao-hero__btn,.s13cta__btn{z-index:0;overflow:hidden;animation:ao-combo 2s ease-in-out infinite;}
#ao-topbar .ao-tb-buy::before,.ao-hero__btn::before,.s13cta__btn::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
  transform:translateX(-160%);animation:ao-cta-shine 2.8s ease-in-out infinite;
}
.ao-hero__btn{animation-delay:1s;}              /* hero и кнопка шапки видны вместе — разводим пульс по времени */
.ao-hero__btn::before{animation-delay:1s;}
.s13cta__btn{font-size:18px;line-height:1.2;}   /* было 14px — «Купить» слишком мелкий на кнопке 69px */
@media(prefers-reduced-motion:reduce){
  #ao-topbar .ao-tb-buy,.ao-hero__btn,.s13cta__btn{animation:none;}
  #ao-topbar .ao-tb-buy::before,.ao-hero__btn::before,.s13cta__btn::before{animation:none;display:none;}
}

/* десктоп ≥1200: артборд 798px, grid 1200 центр */
@media screen and (min-width:1200px){
  .s13cta{height:798px;}
  .s13cta__bg--m{display:none;}
  .s13cta__bg--d{top:180px;left:calc(50% - 600px - 96px);width:1392px;height:518px;}
  .s13cta__h{top:266px;left:calc(50% - 600px + 21px);width:455px;font-size:52px;line-height:57px;}
  .s13cta__sub{top:465px;left:calc(50% - 600px + 20px);width:483px;font-size:18px;line-height:28px;}
  .s13cta__btn{top:538px;left:calc(50% - 600px + 20px);width:220px;height:69px;}
}
/* мобайл/планшет ≤1199: артборд 896px, grid 320 центр, текст по центру (квирк Tilda) */
@media screen and (max-width:1199px){
  .s13cta{height:896px;}
  .s13cta__bg--d{display:none;}
  .s13cta__bg--m{top:100px;left:calc(50% - 160px - 11px);width:342px;height:732px;}
  .s13cta__h{top:149px;left:calc(50% - 160px + 21px);width:279px;font-size:32px;line-height:34px;text-align:center;}
  .s13cta__sub{top:268px;left:calc(50% - 160px + 20px);width:280px;font-size:18px;line-height:23px;text-align:center;}
  .s13cta__btn{top:345px;left:calc(50% - 160px + 13px);width:294px;height:69px;}
}

/* ----- Футер (артборд rec1365701721): лого + © + соц-иконки + кнопка техподдержки ВК ----- */
.s13foot{
  position:relative;background:var(--bg);overflow:hidden;font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.s13foot__logo{position:absolute;display:block;height:auto;max-width:none;}
.s13foot__cc{position:absolute;margin:0;font-size:14px;font-weight:400;line-height:22px;color:#a4a3a2;}
.s13foot__ic{position:absolute;display:block;width:56px;height:56px;}
.s13foot__ic img{display:block;width:56px;height:56px;}
.s13foot__vk{position:absolute;}
/* .ao-vk-btn — порт стиля кнопки техподдержки боевого (в боевом был inline <style>) */
.ao-vk-btn{display:inline-block;padding:11px 24px;border:1px solid #4a4540;border-radius:26px;color:#e8e2d8;text-decoration:none;font-size:15px;font-weight:400;font-family:'TikTokSans',Arial,sans-serif;background:transparent;transition:background .18s,border-color .18s,color .18s;}
.ao-vk-btn,.ao-vk-btn:link,.ao-vk-btn:visited{color:#e8e2d8;}
.ao-vk-btn:hover{background:rgba(216,189,151,.10);border-color:#d8bd97;color:#fff;}

@media screen and (min-width:1200px){
  .s13foot{height:268px;}
  .s13foot__logo{top:150px;left:calc(50% - 600px + 20px);width:200px;}
  .s13foot__cc{top:200px;left:calc(50% - 600px + 20px);width:126px;text-align:left;}
  .s13foot__vk{top:96px;left:calc(50% - 600px + 792px);width:388px;text-align:right;}
  .s13foot__tg{top:155px;left:calc(50% - 600px + 1052px);}
  .s13foot__yt{top:155px;left:calc(50% - 600px + 1124px);}
}
@media screen and (max-width:1199px){
  .s13foot{height:423px;}
  .s13foot__logo{top:64px;left:calc(50% - 160px + 70px);width:180px;}
  .s13foot__vk{top:150px;left:calc(50% - 160px + 63px);width:195px;text-align:center;}
  .s13foot__tg{top:240px;left:calc(50% - 160px + 96px);}
  .s13foot__yt{top:240px;left:calc(50% - 160px + 168px);}
  .s13foot__cc{top:314px;left:calc(50% - 160px + 97px);width:126px;text-align:center;}
}

/* ============================================================================
   Ф12 · TM1 — ПЛАНШЕТНЫЙ АДАПТИВ (768–1199) + TM2 — фикс кнопок покупки S6
   Десктоп (≥1200) и мобайл (<768) НЕ затрагиваются: правила скоупнуты в диапазон
   планшета, либо (TM2) в общий ≤1199, но переопределяют ТОЛЬКО раскладку кнопок.
   Блок стоит ПОСЛЕ всех посекционных мобильных правил → побеждает их в каскаде.
   Эталон планшета — здравая отзывчивая раскладка под 768/834/1024 (НЕ пиксель-1:1
   со старой Tilda: она скейлит десктопный артборд вниз, мелко/криво — см. план Ф12).
   ============================================================================ */

/* ----- TM2: кнопки покупки S6 на узких ширинах — друг под дружкой, на всю ширину карточки.
   Баг (скрин владельца 2026-06-12 17.45.13): карточка одноколоночная при <1200, а инжект
   .ax-buy (analytics/server.mjs) стекал кнопки лишь при ≤600 (flex:1 1 100% внутри width:
   max-content) → на 600–1199 .s6card__buy{display:flex;justify-content:center} шринк-врапил
   .ax-buy по max-content (обе кнопки в ряд), и кнопки вылезали за 300px-карточку.
   Чиним в общем ≤1199 чисто оформлением (хуки инжекта не трогаем): buy→block, ax-buy→колонка. ----- */
@media screen and (max-width:1199px){
  .s6card__buy{display:block;}
  .s6card .ax-buy{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;max-width:none;gap:10px;}
  .s6card .ax-buy__btn,.s6card .ax-buy__note{flex:0 0 auto;width:100%;}
}

/* ----- TM1: планшет (768–1199). Полноценная раскладка вместо узкой мобильной полосы. ----- */
@media screen and (min-width:768px) and (max-width:1199px){

  /* S1 · Хиро — центрированная композиция сохраняется (она здравая), но три пилюли-фичи
     перестают переноситься 2+1 (в один ряд) и подзаголовок шире под ширину планшета. */
  .ao-hero__sub{width:480px;}
  .ao-hero__pills{width:auto;max-width:600px;flex-wrap:nowrap;column-gap:36px;}

  /* S4 · «Почему выбирают» — узкую колонку → сетка 2×2. Артборд (абс-атомы) раскладываем
     во флоу: секция = flex-обёртка, карточка = grid [иконка | заголовок] / [описание]. */
  .s4{height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:40px 44px;padding:0 40px 72px;}
  .s4__title{position:static;flex:1 1 100%;margin:0;padding:64px 0 4px;width:auto;font-size:38px;line-height:42px;}
  .s4__sep{display:none;}
  .s4__card{position:static;flex:1 1 calc(50% - 22px);max-width:420px;min-width:0;display:grid;grid-template-columns:100px 1fr;column-gap:20px;align-content:start;}   /* basis ≈50%−½gap → строго 2 колонки на всём диапазоне 768–1199 (иначе на 1100–1199 влезала 3-я → орфан-карта 3+1) */
  .s4__ic{position:static;grid-column:1;grid-row:1;}
  .s4__tt{position:static;grid-column:2;grid-row:1;align-self:center;width:auto;margin:0;font-size:20px;line-height:24px;}
  .s4__dd{position:static;grid-column:1 / -1;grid-row:2;width:auto;margin:14px 0 0;font-size:16px;line-height:25px;}
  .s4__c3 .s4__dd{width:auto;}   /* снять мобильное сужение 238px */

  /* S6 · карточка товара — расширяем одноколоночную карту (она и на мобайле во флоу, не абс)
     до нормальной планшетной ширины. 2-колоночный десктоп-артборд НЕ строим: фоны карты с
     запечённым свечением калиброваны под свои размеры, растягивать в ландшафт = искажать.
     Шире-центрированная карта убирает «полосу»; коммерция (инжект по data-elem-id) не трогается. */
  .s6__title{font-size:42px;line-height:48px;max-width:none;}
  .s6__sub{font-size:19px;line-height:1.5;max-width:560px;}
  .s6card{width:480px;max-width:calc(100% - 48px);margin:44px auto 0;padding:48px 40px 52px;}
  .s6card__name{font-size:26px;line-height:30px;}
  .s6card__photo{width:100%;max-width:392px;margin:10px auto 0;}

  /* S7 · «Сценарии использования» — узкие карточки по одной → сетка 2×2 (вертикальный -m
     композит карточек сохраняется, он и рассчитан на узкий формат). */
  .s7{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:28px;padding:64px 40px 60px;}
  .s7__title{flex:1 1 100%;min-height:0;display:block;margin:0 0 4px;font-size:38px;line-height:44px;}
  .s7card{margin:0;width:auto;flex:1 1 calc(50% - 14px);max-width:380px;min-width:0;}   /* basis ≈50%−½gap → строго 2 колонки на всём 768–1199 (max-width 380 не даёт растянуть портрет; иначе на 1100–1199 был орфан 3+1); высота адаптивная (текст + фото-полоса) */
  .s7card:first-of-type{margin-top:0;}
}

/* ============================================================================
   Ф13 · MW1 — ЕДИНЫЕ МИНИМАЛЬНЫЕ БОКОВЫЕ ПОЛЯ НА МОБИЛЬНОЙ (≤767)
   Эталон — секция S9 «Официальный бренд» (#altronix-official): на мобильной её боковое
   поле = 16px, карточки идут почти до края экрана (замер f13-measure.mjs: gutter 16/16
   @375 и @390). Приводим боковое поле ВСЕХ секций к --m-gutter (16px):
     • секции с боковым padding (S0/S2/S3/S5/S8/S11/S12 = 14/18/20px) → padding 16px;
     • карточки фикс-ширины уже эталона (S4/S6/S7 = центр-колонка 300px → gutter 38/45px;
       S13-артборд = 342px → gutter 17/24px) → растягиваем до края (16px gutter).
   Десктоп ≥1200 и планшет 768–1199 НЕ затронуты: блок скоупнут ≤767, стоит ПОСЛЕ всех
   правил → побеждает их в каскаде при равной специфичности. Меняется только ШИРИНА
   контейнеров — узлы инжекта коммерции S6 (data-elem-id), слайдеры, FAQ, видео не трогаются.
   ============================================================================ */
@media screen and (max-width:767px){

  /* — S0 шапка: лого/«Купить» на тот же gutter, что контент секций — */
  #ao-topbar .ao-tb-in{padding-left:var(--m-gutter);padding-right:var(--m-gutter);}

  /* — Секции с боковым padding → единый gutter (вертикальные значения сохраняются,
       т.к. переопределяем только padding-left/right) — */
  #altronix-trust,
  #altronix-vreel,
  .s5,
  #altronix-box,
  #altronix-official,
  #altronix-reviews,
  #altronix-faq .faq-head,
  #altronix-faq .faq-acc{padding-left:var(--m-gutter);padding-right:var(--m-gutter);}

  /* — S4 «Почему выбирают»: абс-артборд (центр-колонка 300px) → колонку и её атомы
       растягиваем до gutter; иконка остаётся у левого края, заголовок/описание/линии шире — */
  .s4__card{left:var(--m-gutter);right:var(--m-gutter);width:auto;}
  .s4__tt{width:calc(100% - 112px);}
  .s4__dd,.s4__c3 .s4__dd{width:100%;}
  .s4__sep{left:var(--m-gutter);right:var(--m-gutter);width:auto;}

  /* — S6 карточка товара: секция → gutter, карта на всю ширину контента (фон 100%×100%
       тянется по горизонтали ~14–19% — мягкое запечённое свечение, искажение незаметно);
       фото товара тоже на всю ширину. Узлы инжекта коммерции по data-elem-id не трогаются. — */
  .s6{padding-left:var(--m-gutter);padding-right:var(--m-gutter);}
  .s6card{width:100%;max-width:none;}
  .s6card__photo{width:100%;max-width:none;}

  /* — S7 сценарии: карточки (фон cover, аспект 300/652) → на всю ширину до gutter — */
  .s7{padding-left:var(--m-gutter);padding-right:var(--m-gutter);}
  .s7card{max-width:none;}

  /* — S13 финал CTA: фото-артборд (фикс 342px) → тянем до gutter (background cover → без
       искажения, только иной кроп); заголовок/подзаголовок/кнопка позиционированы от 50%
       и остаются центрированными — ширина артборда их не двигает. — */
  .s13cta__bg--m{left:var(--m-gutter);right:var(--m-gutter);width:auto;}
}

/* ===== S6 · свотчи на мобиле/планшете (владелец 02.08): 6 миниатюр ровно в один ряд по
   ширине рамки большой картинки. Колонка .s6card__colors повторяет геометрию фото
   (100% / max 392 / центр), миниатюры делят её ширину флексом поровну (пропорция 60:47
   сохранена), лейбл «Цвет:» выровнен по левому краю первой миниатюры.
   Раньше фикс-60px давали перенос 5+1. Отдельный блок в конце файла: правило должно
   бить и телефонный (<768), и планшетный (768–1199) диапазоны. */
@media screen and (max-width:1199px){
  .s6card__colors{width:100%;max-width:392px;margin-left:auto;margin-right:auto;}
  .s6card__swatches{flex-wrap:nowrap;gap:4px;width:100%;}
  .s6card__sw{flex:1 1 0;min-width:0;width:auto;height:auto;aspect-ratio:60/47;}
}

/* ===== S4b · «Послушайте: Bravo 220D рядом с JBL и Яндекс.Станцией» (.axcmp) ==
   Видео-сравнение из статьи блога (не баттл, без таблицы): H2 32/600 (шкала §3
   дизайн-кода) + 2 строки muted про референсы; ДВА VK-видео ленивым фасадом —
   карточка-плеер 16:9 (радиус --r-md, бордер --line, идиома видео-карточек S3/S5,
   постер + круглая play 62×62, iframe создаётся ТОЛЬКО по клику, обработчик в
   js/altronix-home.js) + подпись muted под каждым; плашка «слушайте в наушниках»
   (карточка с золотой левой полосой 3px, идиома цитаты S2); ссылка на блог золотом.
   Десктоп — 2 колонки, мобайл ≤767 — стек, gutter --m-gutter.
   ============================================================================ */
.axcmp{
  padding:110px 32px;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}
.axcmp__title{
  margin:0 auto;
  font-size:32px;line-height:1.2;font-weight:600;color:var(--text);
  max-width:820px;
}
.axcmp__sub{
  margin:14px auto 0;
  font-size:16px;line-height:1.55;font-weight:300;color:var(--text-muted);
  max-width:720px;
}
.axcmp__videos{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  width:100%;max-width:1000px;margin:30px auto 0;
}
.axcmp__item{margin:0;text-align:left;}
.axcmp__player{
  position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;
  background:#000;border:1px solid var(--line);border-radius:var(--r-md);
}
.axcmp__poster{width:100%;height:100%;object-fit:cover;display:block;}
.axcmp__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  background:rgba(8,8,8,.5);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;transition:background .18s;
}
.axcmp__play:hover{background:rgba(8,8,8,.72);}
.axcmp__play svg{width:1.05em;height:1.22em;fill:currentColor;margin-left:.08em;display:block;}
.axcmp__video{width:100%;height:100%;display:block;background:#000;}
.axcmp__cap{
  margin:12px 2px 0;
  font-size:14px;line-height:1.5;font-weight:300;color:var(--text-muted);
}
.axcmp__phones{
  max-width:1000px;margin:26px auto 0;
  background:#0E0E0E;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);
  padding:18px 22px;
  text-align:left;
}
.axcmp__phones p{margin:0;font-size:15px;line-height:1.55;font-weight:300;color:#E6E4E1;}
.axcmp__phones b{font-weight:600;color:var(--text);}
.axcmp__more{margin:26px auto 0;font-size:16px;font-weight:500;}
.axcmp__more a{color:var(--gold);text-decoration:none;}
.axcmp__more a:hover{text-decoration:underline;}

@media screen and (max-width:767px){
  .axcmp{padding:64px var(--m-gutter);}
  .axcmp__title{font-size:24px;line-height:1.25;}
  .axcmp__sub{font-size:15px;margin-top:12px;}
  .axcmp__videos{grid-template-columns:1fr;gap:26px;margin-top:22px;}
  .axcmp__cap{font-size:13.5px;margin-top:10px;}
  .axcmp__phones{padding:16px 16px;margin-top:20px;}
  .axcmp__phones p{font-size:14px;}
  .axcmp__more{font-size:15px;margin-top:22px;}
}