/* ═══════════════════════════════════════════════════════════
   ЧИТАЕМОСТЬ
   Со встречи 5 августа это претензия номер один и повторяется
   семь раз: «еле видно», «сиди в лупу рассматривай», «всё для
   вампиров». Проверялось на 13,3 дюйма — там приглушённый
   текст пропадает совсем.

   Разрешение получено прямым текстом: «мне даже нормально,
   если будет всё прямо офигеть какое белое». Поэтому здесь
   подняты все приглушённые уровни разом. Файл подключён
   последним и перебивает любые прежние значения — менять
   контраст надо тут, в одном месте.

   Логика уровней:
     1.00  заголовки и числа
     0.92  основной текст
     0.78  вторичный текст и подписи
     0.66  капитель и метки — самый нижний допустимый уровень
   ═══════════════════════════════════════════════════════════ */

/* ── заголовки и крупные числа ── */
.sx__t,.sig-x__t,.fin__t,.gx h3,.rows h3,.nums b,.numsx__row b,
.quotes figcaption b,.spk h3,.day__from,.hours dt,.place__v,
.reg__cap b,.cd b,.faq summary,.mq span{color:#fff}

/* ── основной текст ── */
.sx__l,.lead-x,.sig-x__p,.fin__p,.gx p,.rows p,.faq details p,
.quotes blockquote,.reg__facts dd,.day__name,.day__all,
.chk,.f--set .chk,.reg__ok__p{color:rgba(238,244,250,.92)}

/* ── вторичный текст ── */
.day__to,.reg__cap span,.f__hint,.place__a a,.map__place span,
.ft__meta li,.gx--wait h3{color:rgba(238,244,250,.78)}

/* ── капитель, метки, подписи: нижний допустимый уровень ── */
.sx__sub,.gx__k,.nums span,.numsx__cap span,.spk p,.hours dd,
.quotes figcaption span,.panel__k,.day__k,.day__dur,.cd span,
.f>label,.f--set legend,.logos-x .slot>span,.facts li,
.cue,.f__opt,.gx--wait p:not(.gx__k),
#agenda .agenda-phase-count{color:rgba(238,244,250,.72)}

/* поля формы и их плейсхолдеры */
.reg__form input,.reg__form textarea,.reg__form select{color:#fff}
.reg__form input::placeholder,.reg__form textarea::placeholder{
  color:rgba(238,244,250,.5)}

/* волосяные линии тоже были почти невидимы */
.gx,.nums,.numsx__cap,.spk,.quotes,.logos-x{background:rgba(238,244,250,.2)}
.rows,.rows li,.faq,.faq details,.reg__facts,.reg__facts>div{
  border-color:rgba(238,244,250,.2)}

/* ── КРАСНЫЕ МЕТКИ ПОЖИРНЕЕ ────────────────────────────────
   «Я бы пожирнее хотела красненькие штуки, мне их еле
   заметно» — буллеты в программе и в списке причин. */
.rows__n::before,#agenda .agenda-item-head::before{
  width:clamp(16px,1.35vw,21px);height:clamp(16px,1.35vw,21px)}

/* ── ЗНАК НАД ЗАГОЛОВКАМИ — КРАСНЫЙ ────────────────────────
   «Это будет только красное вместо вот этих заплаток».
   Перекрашиваем маской, чтобы цвет остался за токеном. */
.sx__mark{
  /* content:'' гасит сами пиксели картинки — иначе белый
     логотип рисуется поверх красной заливки и цвет не виден */
  content:'';
  background:var(--x-red);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain;
  opacity:1}

/* ── СПИКЕРЫ: ФОТО НЕ ГАСИМ ────────────────────────────────
   «Он затемняется, когда неактивный, а когда наводишься —
   становится цветным. Наоборот должно быть.» */
/* Правило веса не набирало и не работало — рабочая версия
   стоит ниже, в правках 6 августа. Оставлено пустым намеренно,
   чтобы вес селектора не всплыл снова. */
.spk--real .spk__ph::after{
  background:linear-gradient(180deg,transparent 62%,rgba(7,7,21,.42) 88%,rgba(7,7,21,.8))}

/* ── АВАТАРЫ ОДНОГО МАСШТАБА ───────────────────────────────
   «У всех голова разного размера получилась». Кадрирование
   выровнено при подготовке файлов, здесь — общий размер. */
img.ava{width:clamp(54px,4vw,66px);height:clamp(54px,4vw,66px);
  filter:none}

/* ── ФОТОГРАФИИ СВЕТЛЕЕ ────────────────────────────────────
   «Секси-картинку, всё в темноте, под покровом ночи». */
.band--photo::after{background:linear-gradient(180deg,var(--x-bg) 0%,
  rgba(7,7,21,.22) 10%,rgba(7,7,21,0) 34%,rgba(7,7,21,0) 66%,
  rgba(7,7,21,.26) 88%,var(--x-bg) 100%)}
.band--top::after{background:linear-gradient(180deg,var(--x-bg) 0%,
  rgba(7,7,21,.2) 12%,rgba(7,7,21,0) 38%,rgba(7,7,21,.22) 80%,var(--x-bg) 100%)}
.sig-x__veil{background:
  radial-gradient(72% 70% at 26% 50%,rgba(7,7,21,.9) 0%,rgba(7,7,21,.6) 48%,
    rgba(7,7,21,.14) 86%,transparent 100%),
  linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.2) 16%,rgba(7,7,21,.1) 46%,
    rgba(7,7,21,.3) 78%,var(--x-bg) 100%)}

/* ── ЛИНИЯ ДНЯ: ПОЛОСЫ ТОЛЩЕ ───────────────────────────────
   «Для меня слишком тонкие линии, я бы хотела их потолще». */
.day__seg::after{height:4px}
.day__seg::before,.day__to::before{height:12px;width:2px;
  background:rgba(238,244,250,.7)}
.day__rail{border-top-color:rgba(238,244,250,.24)}
/* знак теперь пустой элемент, а не картинка: маска красит
   его в фирменный красный, файл задаёт только форму */
i.sx__mark{display:block;width:clamp(22px,2.2vw,30px);
  height:clamp(24px,2.6vw,34px);margin:0 0 clamp(16px,2.2vh,24px)}
i.sx__mark--big{width:clamp(26px,2.6vw,35px);height:clamp(28px,3vw,40px)}

/* ═══════════════════════════════════════════════════════════
   ЧЕКБОКС: ЗНАК В КВАДРАТЕ
   Знак сам по себе не читался как отметка — «непонятно, что
   это я жму на галочки». Возвращаем квадратную рамку: она
   говорит «сюда нажимать», а знак появляется внутри вместо
   галочки. Рамка есть всегда, знак — только когда отмечено.
   ═══════════════════════════════════════════════════════════ */
.chk input{
  position:relative;appearance:none;-webkit-appearance:none;
  width:clamp(24px,1.9vw,28px);height:clamp(24px,1.9vw,28px);
  min-height:0;flex:none;margin:0;padding:0;
  background:transparent;
  border:1.5px solid rgba(238,244,250,.45);border-radius:0;
  -webkit-mask:none;mask:none;
  box-shadow:none;cursor:pointer;transform:none;
  transition:border-color .28s var(--x-ease),background .28s var(--x-ease)}
.chk input:hover{border-color:rgba(238,244,250,.8)}

/* знак внутри квадрата — маской, чтобы цвет остался за токеном */
.chk input::before{content:'';position:absolute;inset:3px;
  background:var(--x-blue);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain;
  opacity:0;transform:scale(.55);
  transition:opacity .26s var(--x-ease),transform .26s var(--x-ease)}
.chk input::after{content:none}
.chk input:checked{border-color:var(--x-blue);background:rgba(48,84,255,.1)}
.chk input:checked::before{opacity:1;transform:scale(1)}
.chk input[aria-invalid="true"]{border-color:var(--x-red);background:transparent}
.chk input[aria-invalid="true"]::before{background:var(--x-red)}
.chk input:focus-visible{outline:2px solid var(--x-blue);outline-offset:3px}

/* подпись выравнивается по верху квадрата */
.f--set .chk{align-items:start;gap:clamp(12px,1.2vw,16px)}
.f--set .chk>span{padding-top:1px}
/* знак вертикальный и узкий: в маленьком квадрате он читался
   полоской. Квадрат крупнее, поля внутри минимальные */
.chk input{width:clamp(28px,2.2vw,32px);height:clamp(28px,2.2vw,32px)}
.chk input::before{inset:2px}

/* ═══════════════════════════════════════════════════════════
   ОТРАСЛИ БЕГУЩЕЙ СТРОКОЙ
   В ячейках одинакового размера слова разной длины читались
   вразнобой: «банки как будто блок, а эти как будто просто
   перечисление». Та же механика, что у клиентов, — расстояния
   задаёт сама строка, а не сетка. Идёт в другую сторону,
   чтобы два ряда не выглядели одним.
   ═══════════════════════════════════════════════════════════ */
.mq--ind .mq__track{animation-direction:reverse;animation-duration:30s}
.mq--ind span{color:rgba(238,244,250,.8)}

/* ═══════════════════════════════════════════════════════════
   ТАЙМИНГ: ВЕЧЕРИНКА НА ВТОРОЙ ПЛАН
   «Мне вот эта хрень 18:00–22:00 не нравится, вечеринка как
   бельмо на глазу» — деловая часть главная, вечер вторичен.
   ═══════════════════════════════════════════════════════════ */
.hours>div:last-child dt{font-size:var(--t-m);color:rgba(238,244,250,.72);font-weight:400}
.hours>div:last-child dd{color:rgba(238,244,250,.5)}

/* ═══════════════════════════════════════════════════════════
   ВЫСТАВКА В ШАПКЕ ПРОГРАММЫ
   Из списка убрана: она не пункт расписания, а фон всего дня.
   Стоит третьей меткой у тайминга — «весь день, выставка и
   демо-зоны», решение встречи 5 августа.
   ═══════════════════════════════════════════════════════════ */
.hours__all dt{font-size:var(--t-s)!important;font-weight:600!important;
  letter-spacing:var(--tr);text-transform:uppercase;
  color:rgba(238,244,250,.72)!important;line-height:1.4}
.hours__all dd{color:rgba(238,244,250,.72)!important;text-transform:none!important;
  letter-spacing:0!important;font-size:var(--t-s)!important;margin-top:4px!important}

/* ═══════════════════════════════════════════════════════════
   АРЕНА НА ВЕСЬ БЛОК
   «Дай мне эту вонючую арену на самый главный слайд, чтобы её
   было видно» — кадр был полосой в 240px и стадиона в нём не
   читалось. Теперь весь блок стоит на арене, цифры лежат
   поверх, а логотип на кровле идёт отдельным кадром ниже.
   ═══════════════════════════════════════════════════════════ */
.numsx__bg,.numsx__row,.numsx__seam{height:clamp(280px,44vh,460px)}
.numsx__bg img{object-position:center 40%}
.numsx__bg::after{background:
  linear-gradient(180deg,rgba(7,7,21,.6) 0%,rgba(7,7,21,.24) 34%,
    rgba(7,7,21,.42) 74%,var(--x-bg) 100%)}
.numsx__row{align-items:end;padding-bottom:clamp(26px,4vh,44px)}

/* ═══════════════════════════════════════════════════════════
   ПРОДУКТОВЫЕ НАПРАВЛЕНИЯ
   Ячейка с логотипом и постоянным описанием жила здесь и
   перебивала skin.css. Правка 6 августа — «оставить только
   логотипы, сделать их больше, текст по наведению» — снимает
   этот пласт целиком: компонент собран в skin.css, разметка
   узкого экрана в mobile.css. Здесь остаётся только стрелка
   перехода: она говорит, что знак ведёт на сайт продукта.
   ═══════════════════════════════════════════════════════════ */
.prod::after{content:'';position:absolute;right:clamp(20px,2vw,32px);
  top:clamp(18px,2.4vh,26px);width:9px;height:9px;
  border-right:1.5px solid var(--x-red);border-top:1.5px solid var(--x-red);
  transform:rotate(45deg);opacity:.6;
  transition:transform .4s var(--x-ease),opacity .4s var(--x-ease)}
.prod:hover::after{opacity:1;transform:rotate(45deg) translate(3px,-3px)}
@media (max-width:900px){.prods{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   СЧЁТЧИК МЕСТ ПОД ДЕЙСТВИЕМ
   «Счётчик может быть под кнопку зарегистрироваться внести» —
   слева нагнетаем, справа факты. Цифра досчитывается тем же
   механизмом, что и остальные числа на странице.
   ═══════════════════════════════════════════════════════════ */
.seats{margin:clamp(16px,2.4vh,24px) 0 0;font-size:var(--t-s);font-weight:300;
  color:rgba(238,244,250,.8)}
.seats b{font-size:var(--t-l);font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;margin-right:.35em}
.seats__bar{margin-top:clamp(9px,1.3vh,13px);height:2px;
  max-width:min(320px,60%);background:rgba(238,244,250,.2)}
.seats__bar i{display:block;height:100%;background:var(--x-red)}

/* ═══════════════════════════════════════════════════════════
   СОГЛАСИЯ В ДВЕ КОЛОНКИ, ДЕЙСТВИЕ ПО ЦЕНТРУ
   «Согласие вот это и вот это просто параллельно поставим
   и сделаем страницу чуть меньше. А зарегистрироваться будет
   по центру» — блок регистрации становится короче.
   ═══════════════════════════════════════════════════════════ */
.f--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.8vh,18px) clamp(20px,2.4vw,40px)}
.f--two legend{grid-column:1/-1}
.reg__form>.btn-x{justify-self:center;min-width:min(360px,100%)}
@media (max-width:900px){.f--two{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   БУЛЕТЫ — ЛОГОТИП, А НЕ ЗАПЛАТКА
   Скошенная плоскость читалась как заплатка. Маркером пункта
   работает сам знак «Авандок», красный, той же формы, что
   в официальном логотипе.
   ═══════════════════════════════════════════════════════════ */
.rows__n::before,#agenda .agenda-item-head::before{
  width:clamp(13px,1.05vw,16px);height:clamp(22px,1.8vw,28px);
  background:var(--x-red);
  clip-path:none;
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain}
.rows__n::before{top:.28em}
#agenda .agenda-item-head::before{margin-top:.2em}

/* разделитель в бегущих строках — тоже знак, не плашка.
   Вдвое крупнее: знак вытянутый, 1:2,4, и в прежнем боксе
   7×12 от него оставалась чёрточка в пять точек шириной. */
.mq span::after{width:14px;height:24px;background:var(--x-red);opacity:.8;
  clip-path:none;
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain}

/* ═══════════════════════════════════════════════════════════
   ОТМЕТКА — КРАСНЫЙ ЗНАК
   Синий в квадрате читался чужеродно. Знак красный, как
   в логотипе; рамка подсвечивается тем же цветом.
   ═══════════════════════════════════════════════════════════ */
.chk input::before{background:var(--x-red)}
.chk input:checked{border-color:var(--x-red);background:rgba(249,66,58,.08)}
.chk input:focus-visible{outline-color:var(--x-red)}

/* ═══════════════════════════════════════════════════════════
   АРЕНА ОДНА
   Кадр стадиона стоял дважды подряд — под цифрами и отдельно
   с логотипом. Остался один: цифры сверху, логотип на кровле
   читается под ними.
   ═══════════════════════════════════════════════════════════ */
.numsx__bg,.numsx__row,.numsx__seam{height:clamp(340px,52vh,540px)}
.numsx__bg img{object-position:center 34%}
.numsx__row{align-items:start;padding-top:clamp(26px,4vh,44px);padding-bottom:0}
.numsx__bg::after{background:
  linear-gradient(180deg,rgba(7,7,21,.66) 0%,rgba(7,7,21,.3) 30%,
    rgba(7,7,21,.12) 56%,rgba(7,7,21,.4) 86%,var(--x-bg) 100%)}
/* логотип на кровле лежит в нижней половине снимка — при
   кадрировании по верху он срезался, а он тут главный */
.numsx__bg img{object-position:center 62%}

/* ═══════════════════════════════════════════════════════════
   ОТМЕТКА: СИНИЙ ЗНАК, ВПИСАННЫЙ В КВАДРАТ
   Знак вертикальный и при сохранении пропорций занимал в
   квадрате узкую полоску. Здесь он растянут до 80% ширины
   и высоты — заполняет квадрат, как галочка, и читается
   как отметка, а не как значок сбоку.
   ═══════════════════════════════════════════════════════════ */
.chk input::before{inset:0;background:var(--x-blue);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center;
          mask:url('assets/opt/mark.svg') no-repeat center;
  -webkit-mask-size:80% 80%;mask-size:80% 80%}
.chk input:checked{border-color:var(--x-blue);background:rgba(48,84,255,.12)}
.chk input:focus-visible{outline-color:var(--x-blue)}
.chk input[aria-invalid="true"]::before{background:var(--x-red)}
/* прежнее правило задавало ::before жёстко 12x12 — из-за него
   inset не работал и знак сидел мелким пятном в углу */
.chk input::before{left:0;top:0;right:0;bottom:0;width:auto;height:auto}
/* в самом SVG пропорции сохраняются, поэтому знак оставался
   узкой полоской. Для отметки берём версию, которая тянется
   по ширине квадрата */
.chk input::before{
  -webkit-mask-image:url('assets/opt/mark-fill.svg');
          mask-image:url('assets/opt/mark-fill.svg')}

/* ═══════════════════════════════════════════════════════════
   ОТМЕТКА: ЗНАК ВЫХОДИТ ЗА КВАДРАТ
   Знак вертикальный: чтобы он заполнил квадрат, его пришлось
   бы растянуть и испортить пропорции логотипа. Вместо этого
   он крупнее рамки и выходит за неё сверху и снизу — рамка
   говорит «это отметка», знак остаётся собой.
   ═══════════════════════════════════════════════════════════ */
.chk input{overflow:visible}
.chk input::before{
  left:50%;top:50%;right:auto;bottom:auto;
  width:auto;height:150%;aspect-ratio:138/331;
  -webkit-mask-image:url('assets/opt/mark.svg');
          mask-image:url('assets/opt/mark.svg');
  -webkit-mask-size:contain;mask-size:contain;
  background:var(--x-blue);
  transform:translate(-50%,-50%) scale(.5);
  transform-origin:center}
.chk input:checked::before{transform:translate(-50%,-50%) scale(1)}

/* ═══════════════════════════════════════════════════════════
   ЦИФРЫ ПОД КАДРОМ, А НЕ ПОВЕРХ НЕГО
   На снимке они спорили со стадионом: и кадр читался хуже,
   и числа висели на пёстром. Кадр стоит сам по себе, числа
   с подписями идут под ним в тех же колонках.
   ═══════════════════════════════════════════════════════════ */
.numsx{display:flex;flex-direction:column}
.numsx__bg{position:relative;left:auto;right:auto;top:auto;
  height:clamp(240px,38vh,420px);order:-1}
.numsx__bg::after{background:linear-gradient(180deg,
  rgba(7,7,21,.34) 0%,rgba(7,7,21,0) 26%,
  rgba(7,7,21,0) 70%,rgba(7,7,21,.5) 92%,var(--x-bg) 100%)}
.numsx__seam{height:clamp(240px,38vh,420px)}

.numsx__row{height:auto;align-items:end;
  padding-top:clamp(26px,3.6vh,40px);padding-bottom:clamp(12px,1.6vh,18px)}
.numsx__row b{text-shadow:none}
.numsx__cap>div{padding-top:clamp(14px,2vh,20px)}

/* ═══════════════════════════════════════════════════════════
   КНОПКИ: КОНТРАСТ ПО WCAG AA
   Текст на залитых кнопках наследовался от темы: в тёмной
   выходил #EEF4FA, в светлой — navy. На синем это давало 4.94
   и 3.28, на красном 3.23 при норме 4.5.

   Сочетания посчитаны по палитре, ничего не подобрано на глаз:
     белый на синем  #3054FF — 5.47  проходит
     navy  на красном #F9423A — 5.01  проходит
   Белый на красном даёт всего 3.58 и годится только для
   крупного текста, поэтому на красной кнопке текст navy.
   Тема на это не влияет — правило одно для обеих версий.
   ═══════════════════════════════════════════════════════════ */
.btn-x,
html[data-theme="light"] .btn-x{color:#fff}
.btn-x--red,
html[data-theme="light"] .btn-x--red{color:var(--x-navy)}

/* ═══════════════════════════════════════════════════════════
   СОСТАВ: ДЕВЯТЬ ЧЕЛОВЕК
   Вместо четырёх заглушек пришли настоящие люди. Девять
   ложатся в три колонки ровно, без дыры в последнем ряду.
   Фигуры вырезаны и стоят на фирменном рендере — фон общий,
   масштаб лиц одинаковый.
   ═══════════════════════════════════════════════════════════ */
.spk{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.spk figcaption{padding:clamp(20px,2.6vh,30px) clamp(18px,1.8vw,28px)}
.spk h3{font-size:var(--t-m);color:#fff}
.spk p{margin-top:9px;color:rgba(238,244,250,.66);text-transform:none;
  letter-spacing:.005em;font-size:var(--t-s);font-weight:300;line-height:1.5}
@media (max-width:900px){.spk{--cols:2!important}}

/* ═══════════════════════════════════════════════════════════
   ТАЙМИНГ В ПЕРВОМ ЭКРАНЕ
   Строки были собраны в ряд с разделителем-линией слева.
   Когда ряд переносился, у второй строки оставались отступ
   и линия — она уезжала вправо на 22px, а правые края
   расходились на 999 и 1016.

   Теперь это столбец во всю ширину колонки: общий левый
   край, общий правый, разделитель горизонтальный. Деловая
   часть — главная строка, вечер идёт следом и тише.
   ═══════════════════════════════════════════════════════════ */
.hero-x .hours{display:grid;grid-template-columns:1fr;
  gap:clamp(16px,2.4vh,26px)}
.hero-x .hours>div{padding:0;border-left:0}
.hero-x .hours>div+div{
  border-top:1px solid rgba(238,244,250,.16);
  padding-top:clamp(16px,2.4vh,26px)}

/* деловая часть — приоритет: крупнее и в полную яркость */
.hero-x .hours>div:first-child dt{font-size:var(--t-l);color:#fff;font-weight:600}
.hero-x .hours>div:first-child dd{color:rgba(238,244,250,.8)}
/* вечер — второй голос */
.hero-x .hours>div:last-child dt{font-size:var(--t-m);font-weight:400;
  color:rgba(238,244,250,.72)}
.hero-x .hours>div:last-child dd{color:rgba(238,244,250,.52)}

/* больше воздуха между панелями первого экрана */
.hero-x .panel{padding:clamp(18px,2.6vh,30px) 0}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 6 АВГУСТА
   Отдельным пластом в конце файла: подключается последним и
   перебивает прежние значения, поэтому все правки этого
   круга видно в одном месте, а не по семи таблицам.
   ═══════════════════════════════════════════════════════════ */

/* ── ТАЙМИНГ В ПЕРВОМ ЭКРАНЕ: НАЗВАНИЯ ЧАСТЕЙ ДНЯ ───────────
   «Деловая программа» и «Авандок.Вечеринка» набирались
   капителью в 12px на 60% яркости — на кадре их не было
   видно. Названия важнее самих цифр: это то, ради чего
   человек читает панель. */
.hero-x .hours dd,
.hours--sx dd{
  font-size:var(--t-s);letter-spacing:.01em;text-transform:none;
  font-weight:500;line-height:1.25}
.hero-x .hours>div:first-child dd{color:#fff}
.hero-x .hours>div:last-child dd{color:rgba(238,244,250,.86)}
/* время и название — одна связка, а не две строки через провал */
.hero-x .hours dd,.hours--sx dd{margin-top:3px}

/* ── ПРОГРАММА ДНЯ: ВЫСТАВКА УХОДИТ ВПРАВО ──────────────────
   Выставка идёт параллельно всему дню и не встаёт третьей
   фазой в один ряд с деловой частью и вечером. Отбиваем её
   к правому краю: две фазы слева, сквозная линия справа. */
.hours--sx{width:100%}
.hours--sx .hours__all{margin-left:auto;text-align:right;
  padding-right:0;
  /* линия слева, а не справа: справа она встаёт на самой кромке
     полосы и читается как случайный штрих */
  border-left:1px solid rgba(238,244,250,.2);
  padding-left:clamp(20px,2.4vw,36px)}
.hours--sx .hours__all dt{color:rgba(238,244,250,.8)}

/* ── КАРТОЧКИ СЕТКИ: ПОЛОСА ТОЛЩЕ, ПОДСВЕТКА СИНЯЯ ──────────
   Белая подсветка выглядела как выцветание, а красная полоса
   в один пиксель терялась. Синий — фирменный цвет действия,
   на нём белый текст держит контраст лучше, чем на сером.
   Работает разом в «Один день», «Максимум пользы»
   и «Наши достижения 2025» — это одна и та же сетка. */
.gx>*:not(.gx--empty)::before{height:3px}
.gx>*:not(.gx--empty):hover{background:rgba(48,84,255,.28)}

/* подписи в карточках: были 15px, 300-го веса, 70% яркости */
.gx p{font-size:var(--t-m);font-weight:400;line-height:1.5;
  color:rgba(238,244,250,.96)}

/* ── «ЗАЧЕМ ИДТИ»: ПОДПИСИ ПОД ЗАГОЛОВКАМИ ──────────────────
   Тот же разбор, что и в карточках. */
.rows p{font-size:var(--t-m);font-weight:400;line-height:1.5;
  color:rgba(238,244,250,.96)}

/* ── ПОДПИСИ ПОД ЦИФРАМИ 20+ / 3 / 14 ───────────────────────
   Капитель в 12px на 72% под 72-пиксельным числом читалась
   как техническая сноска. */
.numsx__cap span{font-size:var(--t-s);font-weight:600;
  letter-spacing:.01em;text-transform:none;line-height:1.35;
  color:#fff}

/* ── СПИКЕРЫ: НАСЫЩЕННОСТЬ И ОБРЕЗКА ────────────────────────
   «В обычном состоянии Saturation −20, при наведении 0.»
   Приглушаем только насыщенность: яркость и контраст не
   трогаем, иначе лицо уходит в темноту, как было раньше.

   Увеличение растёт от нижней кромки, а не от центра: фигура
   стоит на месте и уходит верхом за край кадра. Кадр режет —
   .spk__ph с overflow:hidden работает как фрейм с clip content.

   Селекторы намеренно длинные. Общее правило ряда —
   `.spk figure:hover .spk__ph img` — весит три класса и два
   тега; прежняя правка `.spk--real:hover .spk__cut` весила
   три класса и проигрывала ему. Поэтому фигура и продолжала
   гаснуть при наведении, хотя в файле было написано обратное.
   Здесь в селекторе на класс больше — он выигрывает. */
/* Здесь и только здесь задаётся размер фигуры. Держать его в
   селекторе такого веса обязательно: общее правило ряда из
   sections.css — `.spk figure:hover .spk__ph img` — весит три
   класса и два тега, и любая запись вида
   `.spk--real:hover .spk__cut` (три класса, ни одного тега) ему
   проигрывает. Ровно на это я и наступил: убрал масштаб отсюда,
   думая, что им управляет правило ниже, — и фигура стала расти
   на 1,05 из sections.css вместо задуманного.

   Ход почти незаметный: движение в этой сетке читается по
   оживающему цвету и всплывающей теме доклада, размер только
   поддерживает их. Фигура уменьшена до 0,86, потому что в
   натуральную величину она упирается в кромку кадра. */
.spk--real .spk__ph img.spk__cut{
  filter:saturate(.8);
  transform:scale(.86);
  transform-origin:50% 100%;
  transition:filter .55s var(--x-ease),transform .7s var(--x-ease)}
.spk--real:hover .spk__ph img.spk__cut{filter:saturate(1);transform:scale(.875)}
/* фон-коридор под фигурой на наведение не реагирует: иначе
   двигаются два слоя с разной скоростью и кадр «плывёт» */
.spk--real .spk__ph img:not(.spk__cut),
.spk--real:hover .spk__ph img:not(.spk__cut){
  filter:grayscale(1) brightness(.34) contrast(1.1);transform:none}

/* ── ФИНАЛ: КРОВЛЯ «ЛУЖНИКОВ» НЕ В ПОТЁМКАХ ─────────────────
   Под текстом затемнение нужно, справа — нет: там стоит
   логотип на кровле, ради которого кадр и взят. */
.fin__veil{background:
  radial-gradient(64% 66% at 24% 50%,rgba(7,7,21,.86) 0%,rgba(7,7,21,.52) 52%,
    rgba(7,7,21,.08) 88%,transparent 100%),
  linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.14) 14%,rgba(7,7,21,.04) 48%,
    rgba(7,7,21,.22) 80%,var(--x-bg) 100%)}

/* правило про выставку живёт в этом файле — mobile.css
   подключён раньше и его версия проигрывала бы */
@media (max-width:900px){
  .hours--sx .hours__all{margin-left:0;text-align:left;
    border-right:0;padding-left:0}
  .gx p,.rows p{font-size:var(--t-s)}
}

/* Шапка «Программы дня» ограничена по ширине как текстовая —
   из-за этого «Весь день · Выставка» упиралась в 920px и не
   доходила до правого края. Здесь в шапке не текст, а строка
   тайминга: отпускаем её на всю полосу, чтобы правый край
   совпал с правым краем самой программы. */
#program .sx__h,#program .sx__h>.sx__l{max-width:none}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 7 АВГУСТА
   ═══════════════════════════════════════════════════════════ */

/* ── ШАПКА: СТЕКЛО И ПОДСВЕТКА РАЗДЕЛА ─────────────────────
   Шапка была прозрачной и мутнела только после прокрутки. Теперь
   стекло с самого начала: на светлых кадрах белые ссылки на
   прозрачном фоне читались через раз. */
nav.nav-x{
  background:rgba(7,7,21,.52);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(238,244,250,.09);
}
nav.nav-x.is-stuck{
  background:rgba(7,7,21,.8);
  border-bottom-color:rgba(238,244,250,.16);
}

/* Подсветка раздела, который сейчас на экране. Подчёркивание
   растёт от левого края, а не появляется целиком — так глаз
   успевает связать движение с прокруткой. */
.nav-x__links a{position:relative;padding-bottom:3px}
.nav-x__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--x-red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--x-ease);
}
.nav-x__links a.is-here{color:var(--x-ink)}
.nav-x__links a.is-here::after{transform:scaleX(1)}

/* ── КНОПКИ: ПЛОСКОСТИ РАСХОДЯТСЯ ПО ДИАГОНАЛИ ─────────────
   Красная уходит влево-вниз, синяя вправо-вверх — тот же жест,
   что у плоскостей в прологе. Раньше у основной кнопки была одна
   красная тень, уходившая вправо-вниз, и жест не читался. */
/* Синяя плоскость берётся осветлённой: у кнопки синяя заливка, и
   тень в тот же цвет с ней сливается — расхождения не видно
   вовсе. Красная остаётся фирменной. */
/* Плоскости расходятся так же: синяя вниз-вправо, красная
   вверх-влево. Синюю берём осветлённой — у кнопки синяя
   заливка, и тень в тот же цвет с ней сливается. */
.btn-x:not(.btn-x--ghost){
  filter:drop-shadow(3px 3px 0 #8aa0ff) drop-shadow(-3px -3px 0 var(--x-red));
}
.btn-x:not(.btn-x--ghost):hover{
  transform:none;
  filter:drop-shadow(9px 9px 0 #8aa0ff) drop-shadow(-9px -9px 0 var(--x-red));
}
.btn-x:not(.btn-x--ghost):active{
  filter:drop-shadow(2px 2px 0 #8aa0ff) drop-shadow(-2px -2px 0 var(--x-red));
}
.btn-x--sm{filter:drop-shadow(2px 2px 0 #8aa0ff) drop-shadow(-2px -2px 0 var(--x-red))}
.btn-x--sm:hover{filter:drop-shadow(5px 5px 0 #8aa0ff) drop-shadow(-5px -5px 0 var(--x-red))}
.btn-x--red{filter:drop-shadow(3px 3px 0 var(--x-blue)) drop-shadow(-3px -3px 0 #ff8a85)}
.btn-x--red:hover{filter:drop-shadow(9px 9px 0 var(--x-blue)) drop-shadow(-9px -9px 0 #ff8a85)}

/* Синяя уходит ВНИЗ-ВПРАВО, красная ВВЕРХ-ВЛЕВО. Раньше было
   наоборот — по первой формулировке задания. */
.btn-x--ghost:hover{
  text-shadow:.2em .13em 0 rgba(48,84,255,.45),
             -.2em -.13em 0 rgba(249,66,58,.45);
}
.btn-x--ghost:active{
  text-shadow:.08em .05em 0 rgba(48,84,255,.32),
             -.08em -.05em 0 rgba(249,66,58,.32);
}
.btn-x--ghost.is-mute:hover{text-shadow:none}

/* ── КАРТОЧКИ: ПОДСВЕТКА ТЕМНЕЕ ────────────────────────────
   Синяя заливка в 28% перебивала содержимое: карточка кричала
   громче текста в ней. Берём фон страницы и осветляем на два
   тона — движение видно, а читать не мешает. */
.gx>*:not(.gx--empty):hover,
.prod:hover,
.faq details:hover{background:#161628}
.rows li:hover,
#agenda .agenda-item:hover{background:#12121f}

/* ── ПРОДУКТЫ В РЯД ────────────────────────────────────────
   Три карточки рядом: крупный знак, описание приходит снизу по
   наведению. Место под описание зарезервировано всегда — иначе
   соседние карточки прыгали бы при наведении на одну. */
.prods--row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:rgba(238,244,250,.2);
}
.prods--row .prod{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;gap:0;
  background:var(--x-bg);
  padding:clamp(26px,3.4vh,40px) clamp(20px,2vw,32px);
  min-height:clamp(210px,26vh,270px);
  grid-template-columns:none;
}
.prods--row .prod__logo{margin-bottom:auto}
.prods--row .prods img,
.prods--row .prod img{height:clamp(26px,3vw,42px);width:auto;max-width:100%}
.prods--row .prod__t{
  position:static;max-width:none;padding-right:0;
  margin-top:clamp(18px,2.4vh,26px);
  font-size:var(--t-s);line-height:1.5;
  color:rgba(238,244,250,.92);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--x-ease),transform .4s var(--x-ease);
}
.prods--row .prod:hover .prod__t,
.prods--row .prod:focus-visible .prod__t{opacity:1;transform:none}
.prods--row .prod::after{display:none}

/* На тач-устройствах наведения нет — описание стоит открытым. */
@media (hover:none){
  .prods--row .prod__t{opacity:1;transform:none}
}
@media (max-width:900px){
  .prods--row{grid-template-columns:1fr}
  .prods--row .prod{min-height:0}
}

/* ── КНОПКА «НАВЕРХ» ───────────────────────────────────────
   Появляется, когда первый экран уже позади: на самом верху она
   бессмысленна и только загораживает кадр. */
.up{
  position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);
  z-index:90;width:clamp(44px,3.4vw,52px);aspect-ratio:1;
  display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  border-radius:50%;
  background:rgba(238,244,250,.1);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(238,244,250,.22),
             0 8px 26px -10px rgba(7,7,21,.9);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--x-ease),transform .35s var(--x-ease),
             visibility .35s,background .3s var(--x-ease);
}
.up.is-on{opacity:1;visibility:visible;transform:none}
.up:hover{background:rgba(48,84,255,.34)}
.up svg{width:42%;height:42%;display:block;fill:none;
  stroke:var(--x-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
  .up{transition:opacity .01ms,visibility .01ms}
}

/* ── ЗНАК ПЕРЕД СТРОКОЙ ПРО ВЫСТАВКУ ───────────────────────
   Строка была flex, и gap в .6em ложился не только между знаком и
   текстом, но и между выделенным началом фразы и её продолжением:
   после «Выставка с демо-зонами» получался лишний пробел. Знак
   встаёт в поток обычной строкой — заодно на узком экране текст
   переносится под себя, а не тянет знак в середину двух строк. */
.day__all{
  display:block;margin-top:clamp(10px,1.4vh,16px);
  /* Висячий отступ: знак стоит слева от полосы текста, а перенос
     на телефоне выравнивается под первой строкой, а не заезжает
     под знак. 2,6em — ширина знака плюс его отбивка. */
  padding-left:2.6em;text-indent:-2.6em;
}
.day__mark{
  /* Вдвое крупнее исходного 1,05em: знак 1:2,4, и на кегле строки
     от него оставалась щепка рядом с текстом. */
  display:inline-block;vertical-align:-.52em;margin-right:.5em;
  width:2.1em;height:2.1em;
  background:var(--x-red);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain;
}

/* ── ВЫДЕЛЕНИЕ В ПРЕМЬЕРЕ ──────────────────────────────────*/
.sig-x__hl{font-weight:600;color:#fff}

/* Логотип «Авандок» в строке с датой и городом — прижат вправо.
   Раскладка подвала целиком переехала ниже, в правки 10 августа. */
.ft__meta{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}

/* ── ПЕРВЫЙ ЭКРАН: КАДР РАЗДВИГАЕТСЯ ШИРЕ ──────────────────
   Половинки уходили на 24% и «Лужники» показывались краем.
   Уводим на 42% и убираем масштабирование: увеличенный кадр
   съедал ту самую щель, ради которой всё и делается. */
@supports (animation-timeline:scroll()){
  .hero-x__half--l{animation-name:xSplitWideL}
  .hero-x__half--r{animation-name:xSplitWideR}
}
@keyframes xSplitWideL{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-46%,0,0)}
}
@keyframes xSplitWideR{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(46%,0,0)}
}

/* Правая колонка ещё правее: между текстом и таймингом должен
   читаться световой шов, а не «два столбца рядом». */
@media (min-width:901px){
  .hx-right{padding-left:clamp(24px,3.6vw,64px)}
}

/* ── БЛОК ПРО АВАНДОК: В ОДИН ЭКРАН ────────────────────────
   Кадр держит фиксированную высоту, цифры и подписи лежат прямо
   на нём внизу. Затемнение идёт только к низу: если гасить весь
   кадр, город превращается в тёмное пятно и картинки будто нет.
   Высота подобрана так, чтобы заголовок, кадр и цифры влезали в
   один экран на ноутбуке. */
.numsx{
  position:relative;isolation:isolate;
  margin-top:clamp(18px,2.4vh,30px);border-top:0;
  min-height:clamp(300px,42vh,440px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.numsx__bg{position:absolute;inset:0;height:auto;z-index:0}
.numsx__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* Затемнение ослаблено: город и знак «Авандок» на кадре
   пропадали в тёмном пятне, и картинки будто не было. Полосу
   под цифрами всё равно держим глухой — на ней стоит белый
   текст, и он обязан читаться. */
.numsx__bg::after{
  background:linear-gradient(180deg,
    rgba(7,7,21,.06) 0%, rgba(7,7,21,.08) 38%,
    rgba(7,7,21,.36) 64%, rgba(7,7,21,.8) 86%, var(--x-bg) 100%)}
.numsx__seam{height:100%}

/* Цифры с подписями опущены ниже: они стояли высоко и накрывали
   середину кадра, где как раз логотип. */
.numsx__row{height:auto;padding:0 0 clamp(2px,.4vh,5px);align-items:end}
.numsx__row b{font-size:clamp(34px,4vw,64px);
  text-shadow:0 2px 18px rgba(7,7,21,.95)}
.numsx__cap{background:transparent;gap:0}
.numsx__cap>div{background:transparent;
  padding:0 clamp(18px,1.8vw,30px) clamp(10px,1.3vh,16px)}
.numsx__cap span{
  font-size:var(--t-s);letter-spacing:.01em;text-transform:none;
  font-weight:500;line-height:1.35;color:#fff;
  text-shadow:0 1px 12px rgba(7,7,21,.98)}

/* Значки реестров поднимаем на уровень заголовка: они относятся
   к утверждению о сертификации, а не к цифрам под ним. Текст
   при этом надо подрезать по ширине — иначе строки уезжают под
   знаки и читаются поверх них. */
#about .sx__h{position:relative}
@media (min-width:901px){
  #about .certs{position:absolute;right:0;top:0;margin:0;
    align-items:flex-start}
  /* Оставляем полосу под знаки справа. Считаем от ширины
     заголовочного блока, а не от экрана: сам блок уже, и
     ограничение в символах делало из заголовка узкий столбик. */
  #about .sx__t{max-width:calc(100% - 210px)}
  #about .sx__l{max-width:calc(100% - 210px)}
}

/* ── ПРОГРАММА: РАСКРЫВАЮЩИЕСЯ ПУНКТЫ ──────────────────────
   Раскрываются только те, где есть что показать. Остальные
   остаются строкой: стрелка у пустого пункта обманывает. */
#agenda .agenda-item--open .agenda-item-head{cursor:pointer;position:relative}
.agenda-chev{
  flex:none;margin-left:auto;width:.62em;height:.62em;
  border-right:2px solid var(--x-red);border-bottom:2px solid var(--x-red);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--x-ease);
}
#agenda .agenda-item.is-open .agenda-chev{
  transform:rotate(-135deg) translate(-2px,-2px)}
/* Раскрытие высотой через grid-template-rows: единственный способ
   доехать до auto без замера в JS. Внешний слой анимируется,
   внутренний подрезает содержимое.

   visibility переключается тем же переходом: пока пункт закрыт,
   содержимое не должно попадать ни в поиск по странице, ни в
   озвучивание. */
.agenda-more{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .42s var(--x-ease),visibility .42s linear;
}
.agenda-more__in{overflow:hidden;min-height:0}
#agenda .agenda-item.is-open .agenda-more{
  grid-template-rows:1fr;visibility:visible;
  /* Обратный путь чуть быстрее прямого: закрытие не должно
     заставлять ждать. Кривые зеркальны по смыслу, а не по цифрам. */
  transition:grid-template-rows .34s var(--x-ease),visibility .34s linear;
}
.agenda-more__row{display:grid;gap:5px;max-width:72ch;
  padding-bottom:clamp(16px,2.2vh,24px)}
.agenda-more__row b{font-size:var(--t-m);font-weight:600;color:#fff;line-height:1.35}
.agenda-more__row span{font-size:var(--t-s);font-weight:300;line-height:1.55;
  color:rgba(238,244,250,.82)}
.agenda-more__in{padding-left:calc(clamp(16px,1.35vw,21px) + clamp(18px,1.8vw,28px))}

/* Отзыв на само нажатие. Без него между касанием и раскрытием
   образуется провал, и пункт кажется неотзывчивым. */
#agenda .agenda-item.is-pressed .agenda-item-head{
  transform:scale(.995);transition:transform .1s ease-out}
#agenda .agenda-item--open .agenda-item-head{
  transition:transform .18s var(--x-ease)}

#agenda .agenda-item-head{display:flex;align-items:center;gap:clamp(18px,1.8vw,28px)}

/* ── ФИНАЛЬНЫЙ КАДР ВЫШЕ ───────────────────────────────────
   Само место блока не двигаем, поднимаем содержимое кадра:
   кровля с логотипом уходила под обрез. */
.fin__bg img{object-position:center 22%}
.fin__veil{
  background:
    radial-gradient(76% 74% at 27% 50%,rgba(7,7,21,.9) 0%,rgba(7,7,21,.62) 46%,
      rgba(7,7,21,.2) 84%,transparent 100%),
    linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.26) 15%,rgba(7,7,21,.18) 45%,
      rgba(7,7,21,.4) 76%,var(--x-bg) 100%)}

/* ── СПИКЕРЫ: ЦВЕТ И ТЕКСТ ПО НАВЕДЕНИЮ ────────────────────
   Спокойное состояние: обесцвеченный кадр, имя и должность под
   ним. При наведении кадр оживает цветом, а тема выступления
   проявляется поверх — она нужна тому, кто уже заинтересовался
   человеком, и только загромождает сетку у остальных. */
.spk--real .spk__ph img:not(.spk__cut){
  filter:saturate(0) brightness(.5) contrast(1.06);
  transition:filter .55s var(--x-ease)}
.spk--real:hover .spk__ph img:not(.spk__cut){
  filter:saturate(1) brightness(.72) contrast(1.02)}
.spk--real .spk__cut{
  filter:saturate(.2) contrast(1.02);
  transition:filter .55s var(--x-ease),transform .8s var(--x-ease)}
.spk--real:hover .spk__cut{filter:saturate(1) contrast(1)}

/* Тема выступления: лежит в подписи, всплывает по наведению */
.spk figcaption{position:relative;overflow:hidden}
.spk__topic{
  margin:0;max-height:0;opacity:0;transform:translateY(6px);
  text-transform:none;letter-spacing:.01em;font-size:var(--t-s);
  line-height:1.45;color:rgba(238,244,250,.86);
  transition:max-height .45s var(--x-ease),opacity .35s var(--x-ease),
             transform .45s var(--x-ease),margin .45s var(--x-ease);
}
.spk figure:hover .spk__topic,
.spk figure:focus-within .spk__topic{max-height:6em;opacity:1;transform:none;margin-top:9px}

/* Значок соцсети — в правом нижнем углу кадра, поверх затемнения */
.spk__soc{
  position:absolute;right:clamp(10px,1vw,16px);bottom:clamp(10px,1vw,16px);
  z-index:4;width:clamp(30px,2.4vw,36px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(238,244,250,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(238,244,250,.26);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--x-ease),transform .35s var(--x-ease),
             background .3s var(--x-ease);
}
.spk figure:hover .spk__soc,
.spk__soc:focus-visible{opacity:1;transform:none}
.spk__soc:hover{background:var(--x-blue)}
/* Глиф геометрически центрирован (12 на 12 в поле 24), но масса
   самолётика справа вверху, а вырез хвоста слева внизу — по
   центру он смотрится смещённым. Оптическая поправка на
   полпроцента и чуть меньше размер, чтобы не упирался в кромку
   кружка. */
.spk__soc svg{width:50%;height:50%;fill:var(--x-ink);display:block;
  transform:translate(-4%,3%)}
@media (hover:none){
  .spk__topic{max-height:6em;opacity:1;transform:none;margin-top:9px}
  .spk__soc{opacity:1;transform:none}
}

/* ── ФОТО У ЦИТАТ ──────────────────────────────────────────
   Фон кружка — тот же, что у страницы, плюс тонкая синяя
   обводка: белёсая заливка выбивалась из полосы. */
img.ava{
  background:var(--x-bg);
  border:1px solid rgba(48,84,255,.55);
  box-shadow:0 0 0 3px rgba(48,84,255,.1);
  object-fit:cover;object-position:center 22%}

/* ═══════════ ПОЛИРОВКА МЕХАНИКИ ═══════════
   Дизайн согласован и не меняется. Здесь только поведение:
   отзыв на нажатие, прерываемость, обратные пути, уважение к
   системным настройкам. */

/* ── КНОПКА «НАВЕРХ»: МАТЕРИАЛ, А НЕ ПРОЗРАЧНОСТЬ ──────────
   Стеклянная поверхность должна прибывать материалом: размытие и
   масштаб идут вместе с прозрачностью, иначе это просто
   появляющееся пятно. */
.up{
  transform:translateY(10px) scale(.9);
  backdrop-filter:blur(2px) saturate(1);
  -webkit-backdrop-filter:blur(2px) saturate(1);
  transition:opacity .34s var(--x-ease),transform .34s var(--x-ease),
             visibility .34s linear,backdrop-filter .34s var(--x-ease),
             background .3s var(--x-ease);
}
.up.is-on{
  transform:none;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
/* Отзыв в момент нажатия, а не на отпускании */
.up:active{transform:scale(.93);transition:transform .1s ease-out}
.up{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── ОБРАТНЫЙ ПУТЬ КОРОЧЕ ПРЯМОГО ─────────────────────────
   Уводить элемент нужно быстрее, чем показывать: ожидание на
   выходе читается как залипание. Пути зеркальны, но не равны. */
.prods--row .prod__t{transition-duration:.34s}
.prods--row .prod:hover .prod__t,
.prods--row .prod:focus-visible .prod__t{transition-duration:.42s}

/* Тема выступления: раскрытие высотой вместо max-height —
   max-height анимируется рывком, потому что реальная высота
   содержимого в него не попадает. */
.spk figcaption{display:grid}
.spk__topic{
  max-height:none;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--x-ease),
             opacity .26s var(--x-ease),margin .3s var(--x-ease);
}
.spk__topic > span{display:block;overflow:hidden;min-height:0}
.spk figure:hover .spk__topic,
.spk figure:focus-within .spk__topic{
  grid-template-rows:1fr;
  transition:grid-template-rows .4s var(--x-ease),
             opacity .34s var(--x-ease),margin .4s var(--x-ease);
}

/* ── СИСТЕМНЫЕ НАСТРОЙКИ ──────────────────────────────────
   Меньше движения — не значит «без отзыва»: оставляем смену
   прозрачности, убираем перемещения и раскрытия высотой. */
@media (prefers-reduced-motion:reduce){
  .agenda-more{transition:visibility .01ms linear}
  #agenda .agenda-item.is-open .agenda-more{transition:visibility .01ms linear}
  #agenda .agenda-item.is-pressed .agenda-item-head{transform:none}
  .up{transform:none;transition:opacity .2s linear,visibility .2s linear}
  .up:active{transform:none}
  .prods--row .prod__t,.spk__topic{transition:opacity .18s linear}
  .nav-x__links a::after{transition:opacity .18s linear;transform:scaleX(1);opacity:0}
  .nav-x__links a.is-here::after{opacity:1}
}

/* Меньше прозрачности — стекло становится плотным: полупрозрачные
   поверхности первыми теряют читаемость. */
@media (prefers-reduced-transparency:reduce){
  nav.nav-x{background:var(--x-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  nav.nav-x.is-stuck{background:var(--x-bg)}
  .up{background:var(--x-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .spk__soc{background:var(--x-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Больше контраста — у стеклянных поверхностей появляется
   определённая граница вместо мягкого свечения. */
@media (prefers-contrast:more){
  nav.nav-x{background:var(--x-bg);border-bottom-color:var(--x-ink)}
  .up{background:var(--x-bg);box-shadow:inset 0 0 0 2px var(--x-ink)}
}

/* ── ЛОГОТИП В ШАПКЕ КРУПНЕЕ ───────────────────────────────*/
/* Логотип в шапке. Вдвое от исходного clamp(20px,2vw,30px) вышло
   крупно, уменьшено в 1,4 раза — итого примерно в полтора раза
   больше, чем было изначально.
   Шапка от этого выше: её живую высоту считает skin.js и пишет
   в --x-nav, от которой пляшет отступ первого экрана и
   scroll-margin у якорей, — иначе заголовки приезжали бы под
   шапку. */
.nav-x__logo-img{height:clamp(29px,2.86vw,43px);width:auto}

/* ── ЗНАК В ТЕЗИСАХ «ЗАЧЕМ ИДТИ» ───────────────────────────
   Фирменный знак вместо кружка: крупнее и вплотную к тексту,
   колонка под него сузилась. */
/* Тот же контурный знак, что и в программе, и того же размера:
   два блока читаются как один набор.

   Залитый log_element здесь не годится — у него узкая геометрия
   и тёмное перекрытие посередине, на 17 точках плоскости
   схлопываются в щепку и знак не опознаётся. Контурный мелкий
   размер переносит спокойно: линии остаются линиями.

   Пропорции ровно как у файла 240×570 — округлённые значения
   растягивали фигуру и линии теряли одинаковую толщину. */
.rows li{grid-template-columns:clamp(30px,2.6vw,44px) 1fr;column-gap:0}
.rows__n::before{
  content:'';display:block;
  width:clamp(13px,1.2vw,20px);height:auto;aspect-ratio:240/570;
  background:none;border-radius:0;
  background-image:url('assets/opt/vec2b-240.webp');
  background-size:contain;background-repeat:no-repeat;background-position:top left;
  top:.05em;left:0;
}

/* ── ПРОГРАММА: СТРЕЛКИ ────────────────────────────────────*/
.agenda-chev{
  width:1em;height:1em;
  border-right-width:3px;border-bottom-width:3px;
  border-right-color:var(--x-blue);border-bottom-color:var(--x-blue);
  margin-left:auto;
}
/* Стрелка стоит у правого края строки, а не сразу за словами:
   так она на одной вертикали во всех пунктах и её видно, не
   дочитывая название до конца. margin-left:auto в базовом
   правиле уже прижимает её вправо — здесь только следим, чтобы
   заголовок не мешал этому сжиматься. */
#agenda .agenda-block{min-width:0}

/* Знак слева у каждого пункта — фирменный контурный */
#agenda .agenda-item-head::before,
.agenda-dot{display:none}
#agenda .agenda-item-head{padding-left:0}
#agenda .agenda-block{position:relative;padding-left:clamp(30px,2.6vw,44px)}
#agenda .agenda-block::before{
  content:'';position:absolute;left:0;top:.05em;
  /* Пропорции файла 240×570, размер меньше в полтора раза */
  width:clamp(13px,1.2vw,20px);aspect-ratio:240/570;
  background:url('assets/opt/vec2b-240.webp') no-repeat left top/contain;
}

/* ── КНОПКА «СКАЧАТЬ ПРОГРАММУ» ────────────────────────────*/
.cta-x--prog{margin-top:clamp(20px,3vh,34px)}
.btn-x__dl{
  display:inline-block;width:.85em;height:.85em;margin-right:.6em;
  vertical-align:-.06em;
  border-bottom:2px solid currentColor;
  position:relative;
}
.btn-x__dl::before{
  content:'';position:absolute;left:50%;top:-.1em;
  width:2px;height:.55em;background:currentColor;transform:translateX(-50%);
}
.btn-x__dl::after{
  content:'';position:absolute;left:50%;top:.28em;
  width:.36em;height:.36em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateX(-50%) rotate(45deg);
}
.btn-x--ghost.is-mute{opacity:.55;cursor:default;pointer-events:none}

/* ── ТАЙМЛАЙН ДНЯ: ЗАЛИВКА ПО ОЧЕРЕДИ ──────────────────────
   Обе полосы прочерчивались почти одновременно, и порядок дня не
   читался. Разводим диапазоны так, чтобы синяя деловая часть
   успевала дойти до конца прежде, чем начнёт расти красный
   вечер. Диапазоны не пересекаются — это и даёт очередь. */
@supports (animation-timeline:view()){
  .day__seg--biz::after{animation-range:entry 10% cover 30%}
  .day__seg--eve::after{animation-range:cover 30% cover 52%}
}

/* Хвост после 22:00. Линия — это border-top у всей полосы, и она
   тянулась через колонку с «22:00» в пустоту, читаясь как
   «дальше что-то есть». В прошлый раз я гасил псевдоэлементы,
   которых там нет. Переносим границу на сами отрезки: линия
   кончается там же, где кончается вечер. */
.day__rail{border-top:0}
.day__seg{border-top:1px solid rgba(238,244,250,.16)}
/* Метка закрытия занимала свою колонку ПРАВЕЕ конца линии и
   торчала за пределы всей полосы. Сдвигаем её на собственную
   ширину влево, а засечку переносим к правому краю метки — она
   остаётся ровно на конце линии, а цифры встают под неё. */
/* Колонку под метку НЕ схлопываем. При нулевой ширине
   translateX(-100%) сдвигает на ноль, и метка вылезает вправо за
   пределы экрана: документ становится шире вьюпорта. Пусть
   колонка держит свою ширину — линия чуть короче края полосы,
   зато ничего не торчит. */
.day__to{padding-left:0;padding-right:0;transform:translateX(-100%);white-space:nowrap}
.day__to::before{left:auto;right:0}

/* ── ЭФФЕКТ КАРТОЧЕК ОДИНАКОВЫЙ ВЕЗДЕ ──────────────────────
   Красная полоса, растущая от левого края, и спокойная
   подсветка — как в блоке «Один день». Повторяем в продуктах;
   «Достижения» и «Максимум пользы» — те же .gx и уже с ним. */
.prods--row .prod{position:relative;transition:background .45s var(--x-ease)}
.prods--row .prod::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--x-red);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--x-ease);
  display:block;
}
.prods--row .prod:hover::before,
.prods--row .prod:focus-visible::before{transform:scaleX(1)}

/* ── КАДР В ПЕРВОМ ЭКРАНЕ НЕ ДОЛЖЕН ВЫЛЕЗАТЬ ───────────────
   На телефоне снимок «Лужников» шире экрана: 452 против 390.
   Он тянул за собой горизонтальное переполнение всей страницы,
   а закреплённая шапка растягивалась по его ширине — отсюда
   443 вместо 390 и уехавшая вправо кнопка регистрации. */
.reveal-x{overflow:hidden}
.reveal-x__shot{max-width:100%}

/* ── ЗАКРЕПЛЁННАЯ ШАПКА НЕ ЗАНИМАЕТ МЕСТА ──────────────────
   Пока шапка была в потоке, верхний отступ первого экрана
   считался поверх неё. Стала закреплённой — и дата с логотипом
   уехали ей под низ: на 1440 между ними осталось 12 пикселей.
   Отступ теперь пляшет от живой высоты шапки. */
.hero-x{padding-block-start:calc(var(--x-nav,70px) + clamp(26px,4vh,52px))}

/* Якоря тоже должны останавливаться ниже шапки, иначе заголовок
   раздела приезжает под неё. */
:where(#format,#about,#value,#program,#sreda,#speakers,#partners,
       #people,#forwhom,#reg,#faq,#location,#news,#contacts,#final){
  scroll-margin-top:calc(var(--x-nav,70px) + 16px);
}

/* ── ДАТА НАД ЗАГОЛОВКОМ ───────────────────────────────────*/
.facts li{font-weight:700;color:#fff}

/* ── ЛИНИЯ ДНЯ ВПЛОТНУЮ К ЗАСЕЧКЕ ──────────────────────────
   Полоса отрезка обрывалась за пиксель до засечки 22:00, и на
   увеличении это читалось как оторванный хвост. Доводим до
   упора и красим засечку в цвет своей фазы, чтобы конец дня
   выглядел завершением линии, а не отдельной чёрточкой. */
.day__seg::after{right:0}
.day__to::before{background:var(--x-red)}

/* ── ЗНАКИ РЕЕСТРОВ ВСЕГДА У ПРАВОГО КРАЯ ──────────────────
   На широких экранах они стоят абсолютом в углу заголовка, а
   на узких возвращались в поток и прижимались влево. */
#about .certs{justify-content:flex-end}

/* ── ЗАЗОР У СТРЕЛКИ ───────────────────────────────────────
   Стрелка упиралась в самый край строки. */
.agenda-chev{margin-right:clamp(8px,1vw,18px)}

/* ── ДОЛЖНОСТЬ СПИКЕРА ─────────────────────────────────────
   Видна всегда, под именем. Тема выступления приходит по
   наведению — она нужна тому, кто уже заинтересовался. */
.spk__role{
  margin:6px 0 0;font-size:var(--t-xs);line-height:1.4;
  letter-spacing:.01em;text-transform:none;
  color:rgba(238,244,250,.66);
}
.spk__topic{
  font-size:var(--t-xs);line-height:1.45;letter-spacing:.01em;
  text-transform:none;color:rgba(238,244,250,.86);
}

/* Портрет чуть меньше, чтобы при увеличении не выходил за свой
   кадр: раньше он упирался в кромку и голова обрезалась. */
.spk--real .spk__cut{transform-origin:center bottom}

/* ── ПРЕМЬЕРА ──────────────────────────────────────────────*/
.btn-x--white{
  background:var(--x-light);color:var(--x-blue);
  filter:drop-shadow(3px 3px 0 var(--x-blue)) drop-shadow(-3px -3px 0 var(--x-red));
}
.btn-x--white:hover{
  filter:drop-shadow(9px 9px 0 var(--x-blue)) drop-shadow(-9px -9px 0 var(--x-red));
}
.btn-x--white:active{
  filter:drop-shadow(2px 2px 0 var(--x-blue)) drop-shadow(-2px -2px 0 var(--x-red));
}
/* Фразы, которые должны стоять целиком в строке */
.nb{display:inline-block}

/* ── БЛОК ПРО АВАНДОК: ЗАГОЛОВОК В ТРИ СТРОКИ ──────────────
   Ширина подобрана так, чтобы заголовок ломался ровно трижды, а
   абзац под ним — четырежды, и осталось место под знаки. */
@media (min-width:901px){
  /* Заголовочный блок вообще ограничен 78 символами — при кегле
     в 47 пикселей это 826 точек, и заголовок ломался на четыре
     строки, а абзац на пять. Для этого блока предел снимаем и
     подбираем ширину под нужное число строк.

     Знаки уезжают к правому краю всей секции, а не заголовка:
     так они дальше вправо, как просили, и не отъедают ширину у
     текста. */
  #about .sx__h{max-width:none}
  #about .sx__t{max-width:1060px}
  #about .sx__l{max-width:1010px}
  #about{position:relative}
  #about .certs{position:absolute;top:0;right:0;margin:0;align-items:flex-start}
}

/* ── ФОТО ПЕРОВА В ЦИТАТАХ ─────────────────────────────────
   Лицо было крупнее, чем у остальных, и подбородок упирался в
   нижнюю кромку круга. Правится не здесь: и файл, и элемент
   квадратные, поэтому object-position тут ничего не двигал —
   сдвигать было нечего. Кадр пересобран в people.py
   (AVA_TWEAK: кадр шире на 17%, центр ниже — лицо мельче и
   выше в круге). */

/* ── ПРЕМЬЕРА: КАЖДАЯ ФРАЗА В СВОЮ СТРОКУ ──────────────────
   Контейнер держал 657 точек, а самой длинной фразе нужен 761 —
   она ломалась надвое. Расширяем ровно настолько, чтобы все три
   вставали целиком, и не больше: дальше начинается кадр. */
@media (min-width:901px){
  .sig-x__in{max-width:min(820px,58vw)}
  .sig-x__p{max-width:none}
}
.sig-x__p .nb{display:block}

/* ── ТЕМА ДОКЛАДА ВЫДЕЛЕНА ЦВЕТОМ ──────────────────────────
   Синий. Чистый #3054FF из палитры на фоне #070715 даёт 3,65:1
   — для строки в 15 пикселей это ниже нормы, буквы вязнут в
   фоне. Берём его же, осветлённый на ступень: 5,3:1, и оттенок
   остаётся узнаваемо корпоративным.

   Селектор с элементом: правило .spk p из блока контраста весит
   больше одного класса и перебивало цвет. */
.spk p.spk__topic{color:#ACBAFF;font-weight:600}

/* ── ПАРТНЁРЫ ──────────────────────────────────────────────
   Блок скрыт из тела страницы, разметка оставлена. Действие
   «Стать партнёром» живёт в шапке рядом с регистрацией:
   вторичным начертанием, чтобы не спорить с главным действием. */
.sx.is-hidden{display:none}

.nav-x__partner{
  font-size:var(--t-s);letter-spacing:.01em;text-decoration:none;
  /* Синий отделяет действие от пунктов меню. Оттенок тот же
     осветлённый, что у тем докладов: чистый #3054FF на тёмном
     стекле шапки даёт 3,65:1 и для строки в 16 пикселей мутнеет.
     Двух разных синих на странице заводить не стоит. */
  color:#5A78FF;white-space:nowrap;
  padding-bottom:3px;position:relative;
  transition:color .25s var(--x-ease);
}
.nav-x__partner::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.35;transform-origin:right;
  transition:opacity .35s var(--x-ease),transform .35s var(--x-ease);
}
.nav-x__partner:hover{color:#8AA0FF}
.nav-x__partner:hover::after{opacity:.9;transform:scaleX(1.04)}

/* На телефоне в шапке остаётся только знак и главное действие —
   как и остальные ссылки, эта уходит. */
@media (max-width:900px){
  .nav-x__partner{display:none}
}

/* ── ТЕМА ДИСКУССИИ В ОДНУ СТРОКУ ──────────────────────────
   Заголовок раскрытого пункта ломался надвое: ряду не хватало
   ширины. Снимаем ограничение и запрещаем перенос — фраза
   короткая, в полосу помещается. */
.agenda-more__row{max-width:none}
.agenda-more__row b{white-space:nowrap}
@media (max-width:900px){
  .agenda-more__row b{white-space:normal}
}

/* ── КНОПКА «СКАЧАТЬ ПРОГРАММУ» СПРАВА ─────────────────────*/
.cta-x--prog{display:flex;justify-content:flex-end}

/* ── ЛИД РЕГИСТРАЦИИ В ОДНУ СТРОКУ ─────────────────────────
   Фразе нужно 869 точек, а заголовочный блок ограничен 826 —
   не хватало сорока. Снимаем предел только здесь. */
@media (min-width:1100px){
  #reg .sx__h{max-width:none}
  #reg .sx__l{max-width:none}
}

/* ── ИМЕНА КЛИЕНТОВ В БЕГУЩЕЙ СТРОКЕ — ССЫЛКИ ───────────────
   Ведут на кейсы и карточки на avandoc.ru. По наведению имя
   подсвечивается синим.

   Синий взят осветлённый, не чистый #3054FF: на #070715 тот даёт
   3,65:1 и в строке такого кегля буквы вязнут в фоне. Этот же
   оттенок уже работает на темах докладов и в шапке.

   Лента и без того замирает при наведении (motion.css) — без
   этого по ссылке было бы не попасть. */
   Те же ссылки стоят в абзаце над строкой (класс .cl): там они
   подчёркнуты сразу, потому что в сплошном тексте ссылка без
   подчёркивания неотличима от обычных слов. */
.mq a,.sx__l a.cl{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .28s var(--x-ease),border-color .28s var(--x-ease);
}
.sx__l a.cl{border-bottom-color:rgba(238,244,250,.32)}
.mq a:hover,.mq a:focus-visible,
.sx__l a.cl:hover,.sx__l a.cl:focus-visible{color:#8AA0FF;border-bottom-color:#8AA0FF}

/* ═══════════ ПРАВКИ 10 АВГУСТА ═══════════ */

/* ── ПРЕМЬЕРА: КНОПКА ЗАЛИТА СИНИМ ─────────────────────────
   Была светлая с синими буквами. Стала синей с белыми: на новом
   кадре — тёмная вода и красный портал — светлая плашка спорила
   с бликом портала за главное пятно в правой половине.

   Цвет — корпоративный #3054FF из токенов, темнее в палитре
   ничего нет. Белый на нём даёт 5,4:1 — с запасом для строки
   такого кегля.

   Расхождение теней остаётся прежним: синяя вниз-вправо,
   красная вверх-влево. Синяя тень на синей заливке видна только
   кромкой на тёмном фоне — это ожидаемо и держит механику
   единой со всеми остальными кнопками страницы. */
.btn-x--white{
  background:var(--x-blue);color:var(--x-light);
}

/* Размер фигуры спикера задан выше, в блоке про цвет портрета:
   только там селектор весит достаточно, чтобы перебить общее
   правило ряда. Здесь его дублировать нельзя — запись слабее и
   всё равно не сработает, зато создаёт впечатление, что
   значение правится тут. */

/* ── ВОПРОСЫ КРУПНЕЕ В ЗАКРЫТОМ СОСТОЯНИИ ──────────────────
   Вопрос был мельче ответа: строка в 16 пикселей против 22 в
   развёрнутом абзаце. В закрытом списке видны только вопросы —
   именно они и должны читаться первыми. Берём ступень t-l:
   заметно крупнее ответа и не спорит с заголовком раздела.

   Вертикальных отступов у строки не было вовсе — высота равнялась
   строке текста. На шестнадцати пикселях это просто выглядело
   тесно, на новом кегле буквы легли на линейки. Заодно строка
   становится нормальной целью для пальца: 40 пикселей текста
   превращаются в 74. */
.faq summary{
  font-size:var(--t-l);line-height:1.28;font-weight:400;
  padding:clamp(14px,1.9vh,20px) 0;
}
/* Ответ отсчитывался от строки без отступов и после её появления
   прижался бы к вопросу. */
.faq details>div{padding-top:clamp(2px,.6vh,6px)}

/* ── ФИНАЛ: КАДР СВЕТЛЕЕ И ВЫШЕ ────────────────────────────
   Надпись «АВАНДОК» на кровле уходила под нижний обрез, а
   поверх лежала почти непрозрачная вуаль — от кадра оставалось
   тёмное пятно. Кадр пересобран с прижимом к низу (см. art.py),
   надпись теперь в середине файла, поэтому окно ставим по
   центру. Вуаль ослаблена: слева, под текстом, держим 0,72 —
   белое на этом фоне даёт 12:1, — а к правому краю отпускаем
   почти до нуля, чтобы кровля и надпись читались. */
.fin__bg img{object-position:center 50%}

/* ── ПОДВАЛ ────────────────────────────────────────────────
   Подвал стоял на том же #070715, что и последняя секция, без
   единой границы — и читался её продолжением: «© КОРУС
   Консалтинг» выглядел частью финального призыва.

   Отделяем тремя средствами сразу, потому что по отдельности ни
   одного не хватает на тёмной странице: своя плоскость на тон
   глубже фона, линия по верхней кромке и заметно больший
   вертикальный отступ.

   Раскладка — две строки, как в подвале «КОРУС Консалтинг»:
     верх — знак события и переход на сайт компании,
            справа соцсети;
     низ  — дата, город, политика и копирайт,
            справа большой знак «Авандок».
   Сетка ниже переопределяет grid из sections.css: там .ft был
   двухколоночным, а строки раздавались детям по grid-row. */
.ft{
  display:block;
  /* Плоскость на тон глубже фона страницы. Разница между #040410
     и #070715 сама по себе почти неразличима — на такой тёмной
     странице всю работу по отделению делает линия, поэтому она
     заметно ярче внутренней. */
  background:#040410;
  border-top:1px solid rgba(238,244,250,.26);
  padding:clamp(38px,5.4vh,64px) clamp(20px,4vw,64px)
          clamp(34px,4.6vh,54px) var(--x-col);
}
.ft__top,.ft__bot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,52px);flex-wrap:wrap;
}
.ft__bot{
  margin-top:clamp(26px,3.4vh,40px);
  padding-top:clamp(22px,2.8vh,30px);
  border-top:1px solid rgba(238,244,250,.1);
  gap:clamp(18px,2vw,34px);
}
/* Знак события в полтора раза шире фирменного, и при обмене
   местами нижней строке перестало хватать десяти пикселей — знак
   уезжал под копирайт.
   Переносу нижней строки запрещаем срабатывать вовсе: иначе
   flexbox сначала сбрасывает знак на новую строку и только потом
   думает о сжатии. Без переноса он вынужден поджать строку
   метаданных, а та переносит свой последний пункт сама — знак
   остаётся справа на любой ширине. min-width:0 обязателен: без
   него элемент не сжимается меньше содержимого. */
@media (min-width:901px){
  .ft__bot{flex-wrap:nowrap}
  .ft__meta{flex:0 1 auto;min-width:0}
  .ft__mark{flex:none}
}
.ft__brand{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);flex-wrap:wrap}

/* Переход на сайт компании. Тихая заливка, а не полноценная
   кнопка страницы: красная и синяя тени соперничали бы с
   «Занять место» в финальном блоке — прямо над ней.

   Скос — общий для проекта: срезана вся правая кромка
   (--x-bevel), как у btn-x, а не уголок. Рамки нет намеренно:
   clip-path срезает её вместе с кромкой, и на диагонали остаётся
   разрыв — обводка обрывается в воздухе. Поэтому плоскость
   заливаем, а не обводим; справа добавлен отступ на ширину
   скоса, иначе последняя буква упирается в срез. */
.ft__more{
  display:inline-flex;align-items:center;
  padding:.7em calc(1.15em + var(--x-bevel)) .7em 1.15em;
  font-size:var(--t-s);letter-spacing:.01em;
  color:rgba(238,244,250,.92)!important;
  border:0!important;
  background:rgba(238,244,250,.09);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--x-bevel)) 100%,0 100%);
  transition:background .3s var(--x-ease),color .3s var(--x-ease);
}
.ft__more:hover,.ft__more:focus-visible{
  color:#fff!important;
  background:rgba(48,84,255,.42);
}

/* Соцсети */
.ft__soc{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.ft__soc-t{
  margin:0;text-align:right;font-size:var(--t-xs);line-height:1.35;
  color:rgba(238,244,250,.62);
}
.ft__soc-t span{display:block}
.ft__soc-list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:clamp(8px,.9vw,14px);
}
/* Ячейка 40×40: сам знак 20 пикселей, вокруг него зона нажатия —
   иначе на телефоне в неё не попасть. */
.ft__soc-list a{
  display:grid;place-items:center;width:40px;height:40px;
  border:0!important;padding:0!important;
  transition:transform .3s var(--x-ease),opacity .3s var(--x-ease);
}
.ft__soc-list svg{
  width:21px;height:21px;fill:rgba(238,244,250,.72);
  transition:fill .3s var(--x-ease);
}
.ft__soc-list a:hover svg,.ft__soc-list a:focus-visible svg{fill:#fff}
.ft__soc-list a:hover{transform:translateY(-2px)}

/* Верхний знак — фирменный «Авандок»: он стоит рядом с переходом
   на сайт компании, и подпись «создано в „КОРУС Консалтинг“»
   объясняет, чей это сайт. Кегль подписи мал по своей природе —
   это знак авторства, а не текст для чтения, — поэтому слот
   заметно выше обычного логотипа в строке. */
.ft__logo{height:clamp(34px,3.4vw,48px);opacity:.95}

/* Нижняя строка */
.ft__meta{gap:0}
/* Внизу большим стоит знак самого события. Подписи в нём нет,
   поэтому масштабируется чисто; но он в полтора раза шире
   фирменного, и на 66 пикселях налезал на строку с копирайтом. */
.ft__mark{height:clamp(34px,3.6vw,52px);width:auto;opacity:.95}

/* Кнопка «наверх» приклеена к правому нижнему углу окна и
   накрывала хвост знака: она fixed, а знак стоит ровно под ней.
   Резервируем полосу по её габариту — right + width из .up. */
@media (min-width:901px){
  .ft__bot{
    padding-right:calc(clamp(14px,2vw,28px) + clamp(44px,3.4vw,52px)
                       - clamp(20px,4vw,64px) + 18px);
  }
}

/* Телефон: две строки складываются в один столбец, соцсети
   уходят под знак, подпись над ними становится обычной строкой. */
/* Ниже 1280 строка метаданных перестаёт влезать в одну строку и
   переносится. Вертикальные разделители при переносе всплывают в
   начале новой строки — чёрточка перед «© КОРУС» и ничего слева
   от неё. Там, где начинается перенос, разделители убираем и
   разводим пункты просветом. */
@media (max-width:1279px){
  .ft__meta{gap:5px clamp(16px,1.8vw,24px)}
  .ft__meta li{padding-left:0;padding-right:0}
  .ft__meta li+li{border-left:0}
}

@media (max-width:900px){
  .ft{padding-left:var(--x-pad)}
  .ft__top,.ft__bot{align-items:flex-start;flex-direction:column}
  .ft__soc{flex-direction:column;align-items:flex-start;gap:10px}
  .ft__soc-t{text-align:left}
  .ft__soc-t span{display:inline}
  .ft__soc-list a{width:44px;height:44px}
  .ft__soc-list a:first-child{margin-left:-11px}
  .ft__mark{height:clamp(34px,9vw,46px)}
  .ft__logo{height:clamp(32px,8.5vw,42px)}
  /* На телефоне пункты встают столбиком: в 390 они всё равно
     переносятся по одному, и столбец читается ровнее ленты. */
  .ft__meta{flex-direction:column;align-items:flex-start;row-gap:7px}
}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 11 АВГУСТА
   ═══════════════════════════════════════════════════════════ */

/* ── СВЕТОВОЙ ШОВ ТОЛЬКО НА ПЕРВОМ ЭКРАНЕ ──────────────────
   Вертикальная полоса шла сквозь все блоки с кадрами: слайд
   про «Авандок», полосы, премьеру, финал. Приём принадлежит
   прологу — там половины расходятся именно от неё, и смысл
   виден. Дальше по странице она читалась просто как линия
   поверх фотографии.

   Оставляем в прологе (.pre__seam) и на первом экране
   (.hero-x__seam). Узлы в разметке не трогаем: вернуть полосу
   в любой блок — снять здесь одну строку. */
.numsx__seam,.band__seam,.sig-x__seam,.fin__seam{display:none}

/* ── СЛАЙД «АВАНДОК»: КАДР ВЫШЕ ────────────────────────────
   Логотип на кровле опускался на строку с цифрами: «К» в
   «АВАНДОК» упиралась в «14». Поднимаем содержимое кадра —
   object-position по вертикали работает наоборот интуиции,
   больший процент показывает более низкую часть снимка и
   поэтому двигает содержимое вверх. */
.numsx__bg img{object-position:center 58%}

/* ── FAQ: ШЕВРОН ВМЕСТО БРАУЗЕРНОГО ТРЕУГОЛЬНИКА ───────────
   Маркер был системный (▶) и выглядел чужеродно рядом с
   аккордеоном программы. Тот же шеврон, что в программе, той
   же механики поворота, но белый: в программе он синий, а
   здесь синий уже занят ссылками. */
.faq summary{
  max-width:none;
  display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:''}
/* Размер задан в пикселях, а не в em: вопрос набран крупной
   ступенью, и 1em давал шеврон в 31 пиксель против 23 в
   программе — вдвое тяжелее по площади.

   Отступ справа обязателен. Шеврон — квадрат, повёрнутый на 45°:
   габарит остаётся 23 пикселя, а видимая диагональ выходит за
   него на треть с каждой стороны. Прижатый к правой кромке
   строки, он вылезал углом за подсветку и за линейку под ней. */
.faq summary::after{
  content:'';flex:none;margin-left:auto;margin-right:clamp(10px,1vw,18px);
  width:23px;height:23px;
  border-right:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--x-ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media (prefers-reduced-motion:reduce){
  .faq summary::after{transition:none}
}

/* ── ФИНАЛ: ТЕКСТ ПО ЦЕНТРУ, НАДПИСЬ НА КРОВЛЕ СВОБОДНА ────
   Текстовый блок стоял слева. Теперь по центру — и это сразу
   ставит вопрос, где надпись «АВАНДОК» на кровле: по центру
   она оказывалась ровно за текстом.

   Решено кадром, а не смещением текста: снимок пересобран с
   якорем 0.35 (см. art.py), надпись села на 76% высоты кадра,
   заметно ниже текстового блока. Вуаль тоже пересобрана —
   круг затемнения переехал из левой четверти в центр и стоит
   выше середины, ровно под текстом, а низ кадра отпущен, чтобы
   кровля и надпись читались. */
.fin{
  padding-left:clamp(20px,4vw,64px);
  padding-right:clamp(20px,4vw,64px);
  justify-items:center;
}
.fin__in{
  max-width:min(64ch,80vw)!important;
  margin-inline:auto;text-align:center;
}
/* Подложка под текстом была рассчитана на блок у левого края:
   эллипс на 104% ширины с центром в 24% выходил за границы
   элемента и обрезался ими — на осветлённом кадре это стало
   видно прямоугольной рамкой вокруг текста. Центруем и
   уменьшаем, чтобы градиент гас внутри своих границ. */
.fin__in::before{
  inset:-16% -12% -14%;
  background:radial-gradient(74% 68% at 50% 46%,
    rgba(7,7,21,.62) 0%,rgba(7,7,21,.36) 50%,
    rgba(7,7,21,.1) 78%,transparent 100%);
}
.fin__in .cta-x{display:flex;justify-content:center}
.fin__p{margin-inline:auto}
.fin__veil{
  background:
    radial-gradient(66% 54% at 50% 34%,rgba(7,7,21,.8) 0%,rgba(7,7,21,.52) 46%,
      rgba(7,7,21,.14) 84%,transparent 100%),
    linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.2) 14%,rgba(7,7,21,.1) 42%,
      rgba(7,7,21,.06) 68%,rgba(7,7,21,.34) 88%,var(--x-bg) 100%)}

/* ── ПОДВАЛ ────────────────────────────────────────────────*/

/* Надпись в кнопке была прижата влево скосом: отступ справа
   учитывал ширину среза, и текст съезжал. Центруем. */
.ft__more{justify-content:center;text-align:center}

/* Строка о продуктах под знаком и кнопкой. Объясняет, что такое
   «Авандок», человеку, который дошёл до конца страницы и всё
   ещё не понял, чей это сайт.

   Знак с кнопкой вынесены в свой ряд, а .ft__brand стал
   столбцом. Через flex-basis:100% в общем ряду это не выходило:
   max-width на абзаце зажимал его базовый размер до 62 знаков,
   строка спокойно вставала рядом с кнопкой и переноса не было. */
.ft__brand{flex-direction:column;align-items:flex-start;gap:0}
.ft__brandrow{
  display:flex;align-items:center;
  gap:clamp(16px,1.8vw,28px);flex-wrap:wrap;
}
.ft__about{
  margin:clamp(13px,1.7vh,19px) 0 0;
  max-width:56ch;font-size:var(--t-s);font-weight:300;line-height:1.5;
  color:rgba(238,244,250,.84);
}

/* Строка метаданных была замыта до 62% прозрачности и на
   капители в 14 пикселей читалась плохо. Поднято до 88%: это
   9,9:1 к фону подвала. Разделители тоже светлее. */
.ft__meta li{color:rgba(238,244,250,.88)}
.ft__meta li+li{border-left-color:rgba(238,244,250,.3)}
.ft__meta a{border-bottom-color:rgba(238,244,250,.55)}

/* Знак события справа — в 1,2 раза меньше. */
.ft__mark{height:clamp(28px,3vw,43px)}

/* Кнопка «наверх» больше не наезжает на подвал: skin.js
   поднимает её над верхней кромкой, --up-lift. Поэтому полоса,
   которую мы резервировали в нижней строке под её габарит,
   больше не нужна — знак снова во всю доступную ширину. */
@media (min-width:901px){
  .ft__bot{padding-right:0}
}
.up{bottom:calc(clamp(14px,2vw,28px) + var(--up-lift,0px))}

/* ── ЗАПРОС ПРОГРАММЫ: МОДАЛЬНОЕ ОКНО ──────────────────────
   Нативный <dialog>. Он рисуется в верхнем слое браузера, поэтому
   не зависит ни от z-index страницы (а их тут семь слоёв), ни от
   overflow предков; Esc и удержание фокуса внутри браузер берёт на
   себя. Своя модалка повторяла бы это втрое большим кодом и хуже.

   margin:auto центрует диалог по обеим осям — это поведение
   именно top-layer, обычному блоку так не выровняться. */
.pmodal{
  margin:auto;padding:0;border:0;background:none;overflow:visible;
  width:min(760px,calc(100vw - 2 * clamp(16px,4vw,48px)));
  max-height:calc(100vh - 2 * clamp(16px,4vh,48px));
  color:var(--x-ink);
}
.pmodal::backdrop{
  background:rgba(4,4,16,.76);
  backdrop-filter:blur(6px) saturate(.9);
  -webkit-backdrop-filter:blur(6px) saturate(.9);
}
.pform{
  position:relative;
  max-height:calc(100vh - 2 * clamp(16px,4vh,48px));
  overflow-y:auto;
  padding:clamp(26px,4vh,44px) clamp(22px,3vw,48px);
  background:#0B0B1C;border:1px solid rgba(238,244,250,.18);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--x-bevel)),
                    calc(100% - var(--x-bevel)) 100%,0 100%);
}
/* !important здесь по делу. После успешной отправки скрипт ставит
   hidden на блоки формы, но `.pform .chk` ниже задаёт display:grid
   с той же весомостью и стоит позже — согласие оставалось на
   экране и налезало на заголовок. hidden — это состояние «узла
   нет», и никакое правило раскладки не должно его перебивать. */
.pform [hidden]{display:none!important}

/* Крестик. Область нажатия 44 пикселя — меньше на телефоне не
   попасть, а сами штрихи рисуем псевдоэлементами. */
.pmodal__x{
  position:absolute;top:clamp(10px,1.4vh,16px);right:clamp(10px,1vw,18px);
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pmodal__x::before,.pmodal__x::after{
  content:'';position:absolute;left:50%;top:50%;width:19px;height:2px;
  background:rgba(238,244,250,.7);
  transition:background .25s var(--x-ease);
}
.pmodal__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.pmodal__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.pmodal__x:hover::before,.pmodal__x:hover::after,
.pmodal__x:focus-visible::before,.pmodal__x:focus-visible::after{background:#fff}
.pmodal__x:focus-visible{outline:2px solid var(--x-blue);outline-offset:-4px}

/* Заголовок обязан стоять в одну строку. Правое поле оставлено под
   крестик, иначе последнее слово заезжает под него. */
.pform__t{
  margin:0 clamp(46px,4vw,60px) 0 0;
  font-size:clamp(19px,2.05vw,30px);font-weight:400;line-height:1.2;
  letter-spacing:-.005em;color:#fff;text-wrap:nowrap;
}
@media (max-width:560px){
  /* На узком экране кегля для одной строки не хватает физически —
     разрешаем перенос, иначе строка вылезет за окно. */
  .pform__t{text-wrap:balance;font-size:clamp(18px,5.2vw,24px)}
}
.pform__sub{
  margin:clamp(8px,1.1vh,12px) 0 0;
  font-size:var(--t-xs);letter-spacing:.02em;
  color:rgba(238,244,250,.6);
}
.pform__l{margin:clamp(14px,2vh,20px) 0 clamp(18px,2.4vh,24px);
  font-size:var(--t-s);font-weight:300;line-height:1.55;color:rgba(238,244,250,.78)}
.pform__grid{display:grid;gap:clamp(12px,1.8vh,18px);margin-bottom:clamp(14px,2vh,20px)}
@media (min-width:560px){
  .pform__grid{grid-template-columns:1fr 1fr}
}
.pform__err{margin:clamp(12px,1.6vh,16px) 0 0;font-size:var(--t-s);color:#ff8a85}
.pform__ok{margin:0;font-size:var(--t-m);font-weight:400;line-height:1.5;color:#fff}
.pform__act{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px);
  align-items:center;margin-top:clamp(16px,2.2vh,22px)}
/* Кнопки формы мельче основных: это подтверждение внутри окна,
   а не главное действие страницы.

   Подчёркивание у вторичной кнопки отсчитывается от низа и было
   рассчитано на полную высоту: при уменьшенных отступах линия
   ложилась ровно посреди слова и читалась как зачёркивание. */
.pform .btn-x--sm{padding-block:12px}
.pform .btn-x--ghost::after{bottom:8px}

/* Ловушка для ботов. display:none её бы выдал: часть заполнялок
   пропускает скрытые поля. Уводим за пределы экрана, оставляя
   поле в потоке и доступным для автозаполнения робота. */
.f--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Кнопка запроса стоит справа, там же, где стояла «скачать» */
.cta-x--prog{display:flex;justify-content:flex-end}

/* Согласие в форме программы: сеткой, как в регистрации. Там
   правило висит на `.f--set .chk`, а здесь набора полей нет —
   без него текст переносился под сам квадратик. */
.pform .chk{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  font-size:var(--t-s);line-height:1.45;
}
/* Красная плоскость сзади рассчитана на залитую кнопку. У
   вторичной заливки нет, и drop-shadow рисовал красную копию
   самих букв со сдвигом — это читалось как зачёркнутое слово.
   `.btn-x--sm` в skin.css стоит после `.btn-x--ghost` и его
   filter:none перебивал. */
.pform .btn-x--ghost,
.pform .btn-x--ghost:hover,
.pform .btn-x--ghost:active{filter:none}

/* ── МАТЕРИАЛЫ: КАРУСЕЛЬ ───────────────────────────────────
   Прокрутка нативная. Скролл-снап и overflow-x делают всю работу:
   пальцем на телефоне, колесом с Shift, клавишами при фокусе на
   полосе — бесплатно и без библиотек. Стрелки только двигают ту же
   полосу на ширину карточки, а не подменяют механику.

   Полоса вылезает за правое поле секции намеренно: обрезанная
   карточка у края — единственный честный признак, что справа есть
   ещё. Точки-индикаторы при шести и более карточках врут о числе
   экранов, поэтому их нет. */
.car{position:relative}
.car__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(clamp(268px,25vw,360px),1fr);
  gap:1px;background:rgba(238,244,250,.2);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Полоса прокрутки скрыта: она рисуется поверх карточек и на
     тёмном фоне выглядит браком. Способ прокрутки остаётся. */
  scrollbar-width:none;
}
.car__track::-webkit-scrollbar{display:none}
.car__track:focus-visible{outline:2px solid var(--x-blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .car__track{scroll-behavior:auto}
}

.nc{
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  min-height:clamp(230px,26vh,290px);
  padding:clamp(22px,2.8vh,32px) clamp(20px,2vw,30px);
  background:var(--x-bg);text-decoration:none;color:inherit;
  border:0;
  transition:background .35s var(--x-ease);
}
.nc:hover,.nc:focus-visible{background:#161628}
.nc:focus-visible{outline:2px solid var(--x-blue);outline-offset:-2px}

/* Метка направления. Цвет разводит три продукта, а не украшает:
   в ленте из шести карточек это единственный быстрый признак,
   к чему относится материал. */
.nc__k{
  margin:0 0 clamp(12px,1.6vh,18px);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;
}
.nc--ai .nc__k{color:#8AA0FF}
.nc--pl .nc__k{color:#ff8a85}
.nc--pr .nc__k{color:#ACBAFF}

.nc__t{
  margin:0;font-size:clamp(19px,1.55vw,24px);font-weight:500;
  line-height:1.22;letter-spacing:-.005em;color:#fff;
}
.nc__s{
  margin:clamp(8px,1.1vh,12px) 0 0;
  font-size:var(--t-s);font-weight:300;line-height:1.45;
  color:rgba(238,244,250,.76);
}
/* Источник прижат к низу: карточки разной длины, и без этого
   подписи гуляли бы по высоте. */
.nc__src{
  margin:auto 0 0;padding-top:clamp(14px,2vh,20px);
  font-size:var(--t-xs);letter-spacing:.04em;
  color:rgba(238,244,250,.45);
}

/* Стрелки. Под полосой справа, а не поверх карточек: поверх они
   закрывают текст и на телефоне попадают под палец при свайпе. */
.car__nav{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:clamp(16px,2.2vh,24px);
}
.car__btn{
  width:clamp(44px,3.4vw,52px);aspect-ratio:1;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(238,244,250,.24);background:rgba(238,244,250,.06);
  transition:background .3s var(--x-ease),border-color .3s var(--x-ease),opacity .3s;
}
.car__btn::before{
  content:'';width:34%;height:34%;
  border-left:2px solid rgba(238,244,250,.85);
  border-bottom:2px solid rgba(238,244,250,.85);
  transform:rotate(45deg) translate(2px,-2px);
}
.car__btn--next::before{transform:rotate(-135deg) translate(2px,-2px)}
.car__btn:hover:not(:disabled){background:rgba(48,84,255,.3);border-color:rgba(48,84,255,.7)}
.car__btn:focus-visible{outline:2px solid var(--x-blue);outline-offset:2px}
/* Отключённая кнопка приглушена, но не спрятана: исчезающие
   стрелки дёргают раскладку на каждой прокрутке. */
.car__btn:disabled{opacity:.3;cursor:default}

/* Заголовок раздела в одну строку. На узких экранах перенос
   всё равно неизбежен — там ограничение снимаем. */
@media (min-width:901px){
  .sx__t--one{max-width:none;text-wrap:nowrap}
}

/* ── ФИНАЛ: ТЕКСТ ВЫШЕ ─────────────────────────────────────
   Блок центрован по вертикали, а надпись на кровле стоит под ним.
   Поднимаем содержимое на десятую часть высоты секции: между
   текстом и надписью становится просторнее, и оба читаются. */
.fin__in{transform:translateY(-6%)}
@media (max-width:900px){
  .fin__in{transform:none}
}

/* ── ПОДВАЛ: НИЖНЯЯ СТРОКА БЕЛАЯ ───────────────────────────
   Дата, город, политика и копирайт — белым. Было 88% прозрачности,
   на капители в 14 пикселей это всё равно читалось приглушённо. */
.ft__meta li{color:#fff}
.ft__meta li+li{border-left-color:rgba(238,244,250,.4)}
.ft__meta a{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.ft__meta a:hover,.ft__meta a:focus-visible{border-bottom-color:#fff}

/* ── ДОСТИЖЕНИЯ НА КАДРЕ С КУБКОМ ──────────────────────────
   Кадр выходит за поля секции до кромок экрана: приём тот же, что
   у полос с фотографиями, — 100vw и сдвиг на половину. Работает
   потому, что у body стоит overflow-x:clip, иначе полоса
   прокрутки вылезала бы от лишних пикселей.

   isolation создаёт свой контекст наложения: без него кадр с
   z-index:-1 уезжал бы под фон секции и пропадал совсем. */
.ach{position:relative;isolation:isolate}
.ach__bg{
  position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * clamp(16px,2.4vh,30px));
  bottom:calc(-1 * clamp(16px,2.4vh,30px));
  left:50%;width:100vw;transform:translateX(-50%);
  overflow:hidden;
}
.ach__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 68%}
/* Затемнение. Слева, под текстом, плотнее; справа, где кубок,
   отпущено — иначе от снимка остаётся тёмное пятно. Кромки гасим
   в фон страницы, чтобы кадр не обрывался линией. */
.ach__bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,21,.7) 0%,rgba(7,7,21,.54) 44%,
      rgba(7,7,21,.2) 74%,rgba(7,7,21,.12) 100%),
    linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.1) 14%,
      rgba(7,7,21,.1) 84%,var(--x-bg) 100%);
}

/* Карточки полупрозрачные: сквозь них видно снимок. Светлая
   подложка сетки убрана — она лежит под карточками и через
   прозрачность давала белёсую дымку на весь кадр. Разделители
   рисуем кольцом у каждой карточки: зазор в сетке ровно 1 пиксель,
   кольца соседей сходятся в нём и читаются одной линией. */
.ach .gx--ach{background:transparent}
.ach .gx--ach>*{
  /* Подложка не ровная, а с уклоном: слева, под текстом, плотная,
     к правому краю почти прозрачная. Так строки всегда стоят на
     тёмном, а кубок справа виден почти без вуали. */
  background:linear-gradient(100deg,rgba(7,7,21,.64) 0%,rgba(7,7,21,.54) 44%,
    rgba(7,7,21,.26) 78%,rgba(7,7,21,.18) 100%);
  box-shadow:0 0 0 1px rgba(238,244,250,.18);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* Пустая ячейка второго ряда: там кубок, и заливать её нечем —
   в разметке её просто нет, кадр виден насквозь. */
/* Строки не должны доезжать до кубка: широкая карточка второго
   ряда тянулась через весь блок, и последние слова ложились на
   самое светлое место снимка — 2:1 в худшей точке. */
.ach .gx--ach h3,.ach .gx--ach p{max-width:33ch}

@media (prefers-reduced-transparency:reduce){
  .ach .gx--ach>*{background:var(--x-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── ПОСЛЕДНЯЯ КАРТОЧКА ДОСТИЖЕНИЙ НА ТЕЛЕФОНЕ ─────────────
   Правило в sections.css растягивает пятую карточку на две
   колонки, чтобы ряд не обрывался пустотой. В один столбец второй
   колонки нет — grid создаёт неявную, и карточки наезжают друг на
   друга: текст первой ложился под вторую в полосе шириной сорок
   пикселей, по слову на строку.

   Поломка была и до фона с кубком, просто на тёмных непрозрачных
   карточках наложение читалось как теснота, а не как брак. */
@media (max-width:640px){
  .gx--ach>*:last-child:nth-child(3n+2){grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 13 АВГУСТА
   ═══════════════════════════════════════════════════════════ */

/* ── ФОН НАГРАД СДВИНУТ ВПРАВО НА 140 ПИКСЕЛЕЙ ─────────────
   Проценты в object-position считаются от разницы размеров кадра
   и контейнера, а длина работает как обычное смещение вправо.
   Проверено замером: вычитание уводило кадр влево на те же 140,
   прибавление — вправо. */
.ach__bg img{object-position:calc(70% + 140px) 68%}

/* ── ПОДВАЛ: ЯРКИЙ БЕЛЫЙ ───────────────────────────────────
   Строка с датой и копирайтом белая с прошлой правки, 20,4:1.
   Приглушённой оставалась строка про семейство продуктов — 84%
   прозрачности, и рядом с белой строкой ниже она читалась
   серой. */
.ft__about{color:#fff}

/* ── ПОЯВЛЕНИЕ БЛОКОВ ТАМ, ГДЕ НЕТ SCROLL-ТАЙМЛАЙНОВ ───────
   Все появления при прокрутке сделаны на animation-timeline —
   это ноль обработчиков скролла и работа целиком на видеокарте.
   Но в Safari, в том числе на iPhone, таких таймлайнов нет: блоки
   просто стояли на месте, и половина движения на телефоне
   пропадала.

   Класс no-sda ставит skin.js и только после того, как убедился,
   что IntersectionObserver есть. Порядок именно такой: если
   скрипт не выполнится, класса не будет, начальное состояние не
   применится и содержимое останется видимым. Спрятать то, что
   некому показать, — единственная ошибка, которую здесь нельзя
   допустить. */
html.no-sda :where(.sx__t,.sx__l,.sx__sub,
  .gx>*,.rows li,.nums>div,.quotes figure,.spk figure,
  .logos-x .slot,.faq details,.band,
  .loc__map,.loc__info,.reg__side,.reg__form,
  .sig-x__in>*,.fin__in>*,.ft>*){
  opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .62s var(--x-ease),transform .62s var(--x-ease);
  /* Гасим scroll-анимацию явно. В запасном режиме она всё равно не
     работает, но если браузер отчитался о поддержке и при этом
     таймлайн не поехал, анимация перебивала бы переход и держала
     блок полупрозрачным навсегда: анимации в каскаде сильнее
     переходов. */
  animation-name:none;
}
html.no-sda :where(.sx__t,.sx__l,.sx__sub,
  .gx>*,.rows li,.nums>div,.quotes figure,.spk figure,
  .logos-x .slot,.faq details,.band,
  .loc__map,.loc__info,.reg__side,.reg__form,
  .sig-x__in>*,.fin__in>*,.ft>*).is-in{
  opacity:1;transform:none;
}

/* ── СТРЕЛКИ КАРУСЕЛИ НЕ ПОД КНОПКОЙ «НАВЕРХ» ──────────────
   Кнопка «наверх» приклеена к правому нижнему углу окна и весит
   z-index 90. Стрелки тоже прижаты вправо — и на телефоне при
   некоторых положениях прокрутки круг ложился прямо на стрелку
   «вперёд». Нажатие уходило ему: лента не двигалась, а страница
   уезжала в начало. Именно это и выглядело как «кнопки не
   кликабельны».

   На десктопе они расходились на три пикселя — то есть держались
   не запасом, а совпадением значений clamp.

   Резервируем полосу по габариту кнопки: её отступ справа плюс
   ширина, минус поле секции (стрелки уже внутри него), плюс зазор.
   max с нулём — на случай, когда поле шире габарита и сдвигать
   ничего не нужно. */
.car__nav{
  padding-right:max(0px, calc(clamp(14px,2vw,28px) + clamp(44px,3.4vw,52px)
                    - var(--x-col,6vw) + 14px));
}

/* Знаки реестров — цели 29×40, и на телефоне кнопка «наверх»
   накрывала ФСТЭК на 70%: по нему просто нельзя было нажать.
   Крупные блоки её задетый угол переживают, мелкая кнопка — нет.
   Резерв тот же, что у стрелок карусели. */
@media (max-width:900px){
  #about .certs{
    padding-right:max(0px, calc(clamp(14px,2vw,28px) + clamp(44px,3.4vw,52px)
                      - var(--x-col,6vw) + 12px));
  }
}