/* Тач-панель Центра технологий для общества. Дизайн-гайд YC (design-guide/04-web, 01-brand, 05-cto):
   белый и синий, воздух, мягкие формы, без разделительных линий; графика — гибрид «3D-элементы KV центра + тонкие линии + овал» на #EEF2F8.
   1rem = 10px при ширине 1920. */

@font-face { font-family: "YS Display"; src: url("../assets/fonts/YSDisplay-Black.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "YS Display"; src: url("../assets/fonts/YSDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "YS Text"; src: url("../assets/fonts/YSText-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "YS Text"; src: url("../assets/fonts/YSText-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }

:root {
  --blue: #2A9FFF; --blue-hover: #2A94EB; --link: #2A94EB;
  --black: #000; --white: #fff; --gold: #FCC67F;
  --grey: #E7EBF4;          /* брендовый серый: плашки, светлые блоки, контролы */
  --soft: #EEF2F8;          /* фон графики центра (гайд для иллюстраторов) */
  --text: rgba(0,0,0,.85); --text-2: rgba(0,0,0,.5); --text-3: rgba(0,0,0,.3);
  --r-m: 1.6rem; --r-l: 2.4rem; --r-xl: 3.2rem;
  --ease: cubic-bezier(.2,.8,.2,1);
  --top: 9rem; --bottom: 10.4rem; --pad: 8rem;   /* шапка и нижняя панель компактные — контенту больше места */
  --font-display: "YS Display", "YS Text", "Helvetica Neue", Arial, sans-serif;
  --font-text: "YS Text", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(100vw / 192); height: 100%; }
body { margin: 0; width: 100vw; height: 100vh; overflow: hidden; position: relative; background: var(--white); color: var(--text);
  font-family: var(--font-text); font-size: 2.2rem; line-height: 1.4; user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none; }
body.theme-dark { background: var(--blue); color: #fff; }
img { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; margin: 0; letter-spacing: -.015em; color: #000; }
p, ul { margin: 0; }
[hidden] { display: none !important; }

/* экраны */
.stage { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--bottom); z-index: 1; }
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(2rem);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s; }
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.reveal > * { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes float { from { transform: translate(0,0) rotate(-3deg); } to { transform: translate(var(--dx, 1.6rem), var(--dy, -2.4rem)) rotate(3deg); } }

/* касание */
.tap { position: relative; overflow: hidden; transition: transform .25s var(--ease), background-color .25s, box-shadow .25s, opacity .25s; }
.tap:active { transform: scale(.97); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .16; background: currentColor; animation: ripple .7s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* кнопки (UI-кит): одна главная action на экран, вторичная outlined/ghost; на тёмном и цветном — монохромные */
.btn { display: inline-flex; align-items: center; gap: 1.4rem; height: 8.4rem; padding: 0 3.6rem; border-radius: 4.2rem; font-weight: 500; font-size: 2.5rem; line-height: 1; white-space: nowrap; }
.btn--xl { height: 9.6rem; padding: 0 4.4rem; border-radius: 4.8rem; font-size: 2.8rem; }
.btn--action { background: var(--blue); color: #fff; }
.btn--action:active { background: var(--blue-hover); }
.btn--ghost { background: var(--grey); color: var(--text); }
.btn--outline { box-shadow: inset 0 0 0 .2rem rgba(0,0,0,.15); color: var(--text); }
.btn--icon { width: 8.4rem; padding: 0; justify-content: center; }
#btn-home { background: var(--blue); color: #fff; }
#btn-home:active { background: var(--blue-hover); }
.btn.is-active { background: var(--black); color: #fff; }
.btn svg { flex: none; }
.link { display: inline-flex; align-items: center; gap: 1rem; height: 6.4rem; font-size: 2.6rem; font-weight: 500; color: var(--link); }

/* сегмент (UI-кит) */
.seg { display: inline-flex; gap: .4rem; padding: .6rem; border-radius: 4.4rem; background: var(--grey); }
.seg__btn { height: 7.2rem; padding: 0 3.2rem; border-radius: 3.8rem; font-size: 2.4rem; font-weight: 500; color: var(--text-2); transition: background-color .3s, color .3s, box-shadow .3s; }
.seg__btn.is-active { background: var(--white); color: var(--text); box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.08); }

/* ---------- графика: элементы KV центра + тонкие линии ---------- */
.kv { position: relative; display: block; overflow: hidden; background: var(--soft); }
.kv img { position: absolute; translate: -50% -50%; height: auto; filter: drop-shadow(0 1.6rem 2.4rem rgba(20,40,80,.12));
  animation: float var(--d, 14s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); will-change: transform; }
.kv__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kv__lines ellipse, .kv__lines path { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .7; }
.kv--card { aspect-ratio: 592 / 400; }
.kv--header { position: absolute; top: 4rem; right: 3rem; bottom: 4rem; left: 44%; background: transparent; }
.kv--header img { max-height: 26%; width: auto; max-width: var(--w, none); }
.kv--header .kv__lines path { stroke-width: 2; opacity: .5; }
.kv--fill { position: absolute; inset: 0; background: transparent; }
.kv--media { aspect-ratio: 5 / 4; border-radius: var(--r-xl); }
.kv--hero { position: absolute; inset: 0; background: transparent; }  /* проект без информативных картинок */

/* ---------- заставка: о чём центр, читается издалека ---------- */
.attract { inset: 0; z-index: 5; background: var(--blue); color: #fff; overflow: hidden; }
/* заставка в стиле мероприятия (у Scale — чистый чёрный фон; пиксельный паттерн — медальоном, см. .attract__objects .pattern) */
.attract--event { background: #000; }
.attract--event .attract__title .hl { color: var(--blue); }
.attract--event .pulse, .attract--event .pulse::after { background: #000; }
.attract h1 { color: #fff; }
/* светлая заставка в стиле лендинга (КМУ): фон страницы, чёрный заголовок, синее слово, синяя кнопка */
.attract--light { background: var(--soft); color: #000; }
.attract--light h1 { color: #000; }
.attract--light .attract__title .hl { color: var(--blue); }
.attract--light .attract__sub { color: var(--text-2); }
.attract--light .attract__event, .attract--light .attract__event .evlogo { color: #000; }
.attract--light .attract__event--logo small { color: var(--text-3); }
.attract--light .attract__cta { background: var(--blue); color: #fff; }
.attract--light .pulse, .attract--light .pulse::after { background: #fff; }
.attract--light .attract__objects img { filter: drop-shadow(0 3rem 5rem rgba(20,40,80,.18)); }
.attract--light .attract__objects img.deco { filter: none; }
.attract__objects { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.attract__objects img { position: absolute; width: var(--w, 30rem); will-change: transform; filter: drop-shadow(0 3rem 5rem rgba(0,40,90,.3));
  animation: float var(--d, 14s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); --dx: 4rem; --dy: -6rem; }
/* живая пиксельная графика мероприятия: медленный дрейф + световая волна по пикселям */
/* паттерн — растровый WebP (SVG с тысячами масок пересчитывался каждый кадр и грузил процессор);
   анимируются только transform — всё считает GPU */
/* медальон у правого края: официальный плотный паттерн Scale, обрезанный в мягкий круг —
   так читается как деталь композиции, а не как плашка на весь кадр; плывёт как остальные объекты
   KV на заставке (тот же float, что у сфер/коралла) — только крупнее и медленнее, как большой шар на фоне */
.attract__objects .pattern { position: absolute; right: -2%; bottom: -2%; width: 40%; aspect-ratio: 1/1; z-index: 0;
  background-repeat: no-repeat; background-position: 60% 30%; background-size: cover;
  -webkit-mask-image: radial-gradient(circle at center, #000 62%, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 62%, transparent 78%);
  will-change: transform; animation: float 26s ease-in-out infinite alternate; --dx: 2.6rem; --dy: -3.2rem; }
/* на неактивных экранах анимации стоят — заставка не ест процессор, пока гость в каталоге */
.screen:not(.active) * { animation-play-state: paused !important; }
/* фирменные пиксельные элементы мероприятия — статичный слой под объектами */
.attract__objects img.deco { width: auto; height: auto; filter: none; animation: none; z-index: 0; }
.attract__objects img:not(.deco) { z-index: 1; }
.attract__top { position: absolute; left: var(--pad); right: var(--pad); top: 5.2rem; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.attract__logo { height: 5.6rem; }
.attract__event { display: flex; align-items: center; gap: 2rem; font-size: 2.6rem; color: rgba(255,255,255,.85); font-weight: 500; }
.attract__event img { height: 5.6rem; } .attract__event img.invert { filter: invert(1); }
/* мероприятие с логотипом-картинкой (КМУ): название и дата слева от логотипа */
.attract__event--logo { gap: 4rem; text-align: right; line-height: 1.25; }
.attract__event--logo small { display: block; font-size: 2.2rem; font-weight: 400; color: rgba(255,255,255,.6); }
.attract__event--logo img { height: 15rem; }
.attract__top:has(.attract__event--logo) { align-items: flex-start; top: 4rem; }
.attract__center { position: absolute; left: var(--pad); right: var(--pad); bottom: 9.6rem; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.attract__title { font-size: 15.2rem; line-height: .92; margin-bottom: 4rem; }
.attract__title .hl { color: var(--gold); }
.attract__sub { font-size: 4rem; line-height: 1.25; color: rgba(255,255,255,.9); max-width: 116rem; margin-bottom: 5.6rem; }
.attract__cta { display: inline-flex; align-items: center; gap: 2.4rem; height: 10.4rem; padding: 0 5.2rem 0 3.6rem; border-radius: 5.2rem; background: var(--white); color: #000; font-size: 3.2rem; font-weight: 500; }
.pulse { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--blue); position: relative; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { transform: scale(2.6); opacity: 0; } }

/* ---------- шапка и нижняя панель ---------- */
.chrome { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 0 var(--pad); z-index: 3; background: var(--white); transition: opacity .4s var(--ease); }
.chrome--top { top: 0; height: var(--top); }
.chrome--bottom { bottom: 0; height: var(--bottom); box-shadow: 0 -1.2rem 3.2rem rgba(0,0,0,.04); }
.chrome--bottom .btn { height: 7.2rem; border-radius: 3.6rem; font-size: 2.4rem; padding: 0 3rem; }
.chrome.is-hidden { opacity: 0; pointer-events: none; }
.chrome__logo { height: 4.6rem; overflow: visible; }
.chrome__event { display: flex; align-items: center; gap: 1.6rem; font-size: 2.2rem; font-weight: 500; margin-left: auto; }
.chrome__event img { height: 4.6rem; }
/* текстовый логотип мероприятия — в размер логотипа Yandex Cloud слева */
.evlogo { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: #000; }
.evlogo i { font-style: normal; color: var(--blue); }
.chrome__event .evlogo { font-size: 4.2rem; }
.attract__event .evlogo { font-size: 5.2rem; color: #fff; }
.chrome__event small { font-size: 2.2rem; font-weight: 400; color: var(--text-3); }
/* как на заставке: название и дата слева от логотипа */
.chrome__event--logo { gap: 3rem; text-align: right; line-height: 1.25; }
.chrome__event--logo small { display: block; font-size: 2rem; }
.chrome__event--logo img { height: 7.4rem; }
.chrome__left { width: 36rem; display: flex; gap: 1.2rem; }
.chrome__nav { flex: 1; display: flex; justify-content: center; gap: .8rem; min-width: 0; }
.chrome__right { width: 36rem; display: flex; justify-content: flex-end; }
.nav__item { height: 6.4rem; padding: 0 2.8rem; border-radius: 3.2rem; font-size: 2.4rem; font-weight: 500; color: var(--text-2); }
.nav__item.is-active { background: var(--black); color: #fff; }

/* ---------- направления: карточки (лендинг «О нас»), плитки-фильтры (каталог), метка ---------- */
.dirgrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 2.4rem; align-items: stretch; }
/* карточки направлений без плашки: элементы «висят» прямо на фоне страницы */
.dircard { height: 100%; border-radius: var(--r-xl); background: transparent; display: flex; flex-direction: column; }
.dircard .kv { flex: none; }
/* имидж на светлой подложке, как на ys2024; целиком, с воздухом внутри — ничего не режется */
.dirimg--card { background: var(--soft); border-radius: var(--r-xl); aspect-ratio: 592 / 440; overflow: hidden; padding: 1.2rem; box-sizing: border-box; }
.dirimg--card img { object-fit: contain; transition: transform .5s var(--ease); }
.dircard:active .dirimg--card img { transform: scale(1.04); }
.dircard__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.6rem .8rem 2.4rem; }
.dircard__name { font-family: var(--font-display); font-weight: 900; font-size: 3.2rem; line-height: 1.05; letter-spacing: -.015em; color: #000; }
.dircard__desc { font-size: 2.1rem; line-height: 1.3; color: var(--text-2); }
.dircard__go { margin-top: auto; padding-top: 1.6rem; display: inline-flex; align-items: center; gap: 1rem; font-size: 2.2rem; font-weight: 500; color: var(--link); }
.dirbar { display: none; }
.dirtab { position: relative; height: 13.2rem; border-radius: var(--r-l); background: var(--soft); overflow: hidden; display: flex; align-items: flex-end; padding: 0 2.4rem 2rem;
  transition: box-shadow .35s var(--ease), transform .25s var(--ease); }
/* имиджи направлений — композиции с сайта центра */
.dirimg { display: block; background: var(--soft); overflow: hidden; }
.dirimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dirimg--slot { aspect-ratio: 3 / 2; flex: none; background: var(--soft); border-radius: var(--r-l); padding: 1rem; box-sizing: border-box; }
.dirimg--slot img { object-fit: contain; will-change: transform; --dx: 1rem; --dy: -1.4rem;
  animation: float 9s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.2s); }  /* плавное «дыхание» объекта в каждом слоте со сдвигом фазы */
.dirimg--tab { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; }
.dirimg--tab img { object-position: 70% 50%; }
/* подложка под названием, чтобы имидж направления не мешал читать */
.dirimg--tab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--soft) 26%, rgba(238,242,248,.72) 46%, rgba(238,242,248,0) 72%); }
.dirtab .kv { position: absolute; top: .6rem; right: .6rem; width: 52%; height: 62%; background: transparent; }
.dirtab .kv img { filter: drop-shadow(0 .8rem 1.2rem rgba(20,40,80,.12)); }
.dirtab__name { position: relative; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: 2.3rem; line-height: 1.05; letter-spacing: -.015em; color: #000; }
.dirtab.is-active { box-shadow: inset 0 0 0 .4rem var(--blue); }
.dirmark { display: inline-flex; align-items: center; gap: 1rem; }
.card__dir { color: var(--text-2); }
.dirmark img { width: 3.6rem; height: 3.6rem; object-fit: contain; flex: none; filter: drop-shadow(0 .4rem .6rem rgba(20,40,80,.12)); }

/* ---------- каталог ---------- */
.catalog { height: 100%; display: flex; flex-direction: column; padding-top: .8rem; }
.catalog__head { padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.4rem; }
.catalog__head h2 { font-size: 5.6rem; line-height: 1; }
.rail-wrap { position: relative; flex: 1; min-height: 0; }
.rail { height: 100%; display: flex; gap: 2.8rem; overflow-x: auto; overflow-y: hidden; padding: 1rem var(--pad) 2.4rem; /* прилипание к карточкам — в JS (tweenScroll/snap), нативный scroll-snap мешал стрелкам и свайпу */ scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
/* карточка шире — при той же высоте в строку помещается больше символов, это даёт запас, чтобы поднять шрифт описания */
.card { flex: none; width: 60rem; scroll-snap-align: start; border-radius: var(--r-xl); background: var(--grey); overflow: hidden; display: flex; flex-direction: column; }
/* пропорция обложки уже, чем 16:9 — под полный текст карточки центра (до 300 знаков) остаётся больше высоты */
.card__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--soft); }
.card__body { padding: 2.8rem 3.2rem 3.2rem; display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 1rem; }
.card__title { flex: none; font-size: 2.8rem; line-height: 1.15; font-weight: 500; color: #000; }
/* текст со страницы центра — крупнее для читаемости, но по-прежнему сжимается флексом, а не выходит за карточку */
.card__sum { flex: 1; min-height: 0; overflow: hidden; font-size: 2.1rem; line-height: 1.34; color: var(--text-2); }
.card__meta { flex: none; margin-top: auto; padding-top: 1.4rem; font-size: 2rem; color: var(--text-2); display: flex; align-items: center; gap: 2rem; }
.card__game { color: var(--blue); }
.card__go { margin-left: auto; display: inline-flex; align-items: center; gap: .8rem; font-weight: 500; color: var(--link); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; height: 4.4rem; padding: 0 1.8rem; border-radius: 2.2rem; background: var(--grey); font-size: 1.9rem; font-weight: 500; white-space: nowrap; }
/* центрируем по высоте через отрицательный margin, не transform: центр рельса — единственное место в интерфейсе,
   где реальный тап иногда промахивался мимо кнопки на translateY(-50%) — margin убирает саму возможность рассинхрона */
.rail-arrow { position: absolute; top: 50%; margin-top: -4.6rem; width: 9.2rem; height: 9.2rem; border-radius: 50%; background: #fff; box-shadow: 0 .8rem 3rem rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity .3s; }
.rail-arrow--l { left: 2rem; } .rail-arrow--r { right: 2rem; }
.rail-arrow.is-off { opacity: 0; pointer-events: none; }

/* ---------- проект ---------- */
/* медиа проекта 1:1 на всю высоту колонки: H = экран − шапка/панель (26rem) − нижний отступ (2.4rem) */
.project { --H: calc(100vh - 21.8rem); height: 100%; padding: 0 var(--pad) 2.4rem; display: grid; grid-template-columns: 1fr auto; gap: 8rem; }
.project__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.project__eyebrow { display: flex; gap: 2rem; align-items: center; margin-bottom: 2rem; font-size: 2.1rem; color: var(--text-2); }
.project__title { font-size: 5.6rem; line-height: 1; margin-bottom: 1.6rem; }
.project__partner { font-size: 2.1rem; line-height: 1.3; color: var(--text-2); margin-bottom: 3.2rem; }
.facts { display: flex; gap: 4.8rem; margin-bottom: 3.6rem; align-self: stretch; }
.fact { flex: 1; min-width: 0; }
.fact__v { font-family: var(--font-display); font-weight: 900; font-size: 4.4rem; line-height: 1; margin-bottom: .8rem; letter-spacing: -.02em; white-space: nowrap; color: #000; }
.fact__l { font-size: 1.9rem; line-height: 1.3; color: var(--text-2); }
.seg--project { margin-bottom: 3.2rem; }
.project__text { flex: 1; min-height: 0; font-size: 2.4rem; line-height: 1.42; overflow: hidden; max-width: 92rem; }
.project__text--team { font-size: 2.2rem; max-width: 100%; }
/* логотипы партнёров — из презентации центра */
.logos { display: flex; align-items: center; gap: 3.2rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
.logos--wide { margin: 2.8rem 0 0; gap: 4rem; }
.logo { display: inline-flex; align-items: center; height: 6.8rem; }
.logo img { max-height: 6.8rem; max-width: 26rem; width: auto; height: auto; object-fit: contain; }
.logos--wide .logo { height: 8.4rem; } .logos--wide .logo img { max-height: 8.4rem; max-width: 32rem; }
/* команда проекта */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3.2rem; }
.person { display: flex; align-items: center; gap: 1.6rem; min-width: 0; }
.person img, .person .avatar { width: 7.2rem; height: 7.2rem; border-radius: 50%; object-fit: cover; flex: none; }
.person b { display: block; font-size: 2.3rem; font-weight: 500; line-height: 1.15; color: #000; }
.person span span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.9rem; line-height: 1.25; color: var(--text-2); }
.project__text p { animation: rise .5s var(--ease) both; }
.play { margin-top: 2.4rem; }
.project__media { display: flex; flex-direction: column; gap: 2rem; min-height: 0; width: 72rem; }
/* проект с анимацией: только ролик, квадрат 1:1 на всю высоту колонки */
/* видео-проект: квадрат чуть уже полной высоты — под ним помещается строка стека технологий */
.project--video .project__media { width: calc(var(--H) - 5.6rem); }
.project--video .hero { aspect-ratio: 1 / 1; }
.hero { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; background: var(--soft); }
.hero img { width: 100%; height: 100%; object-fit: contain; }  /* инфографика и схемы — целиком, без обрезки */
.hero video { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero__label { position: absolute; left: 2rem; bottom: 2rem; display: inline-flex; align-items: center; gap: 1rem; height: 4.8rem; padding: 0 2rem 0 1.4rem; border-radius: 2.4rem;
  background: var(--white); font-size: 2rem; font-weight: 500; color: #000; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.08); }
.hero__label i { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--blue); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.thumb { position: relative; }
.thumb__play { position: absolute; inset: 0; margin: auto; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--white); color: #000; display: flex; align-items: center; justify-content: center; z-index: 1; padding-left: .3rem; }
.thumbs { display: flex; gap: 1.6rem; }
.thumb { flex: 1; aspect-ratio: 16 / 10; border-radius: var(--r-m); overflow: hidden; background: var(--soft); opacity: .55; transition: opacity .3s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { opacity: 1; }
/* названия продуктов — серым текстом, без плашек, с подписью-эйбрау сверху */
.tech__eyebrow { font-size: 1.6rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; }
.tech__row { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; font-size: 2rem; line-height: 1.3; color: var(--text); }
.quote { margin-top: auto; padding: 2.8rem 3.2rem; border-radius: var(--r-l); background: var(--grey); font-size: 2.1rem; line-height: 1.4; color: var(--text); }
.quote__a { margin-top: 1.2rem; font-size: 1.9rem; color: var(--text-2); } .quote__a b { color: var(--text); font-weight: 500; }
.related { display: flex; gap: 1.2rem; align-items: center; min-width: 0; }
.related__label { font-size: 2rem; color: var(--text-3); margin-right: 1rem; white-space: nowrap; }
.rel { display: flex; align-items: center; gap: 1.4rem; height: 8.4rem; padding: 0 2.4rem 0 .8rem; border-radius: 4.2rem; background: var(--grey); max-width: 34rem; min-width: 0; }
.rel img { width: 6.8rem; height: 6.8rem; border-radius: 50%; object-fit: cover; flex: none; }
.rel span { font-size: 2rem; font-weight: 500; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- игра ---------- */
/* фрейм игры строго 16:9: высота = экран − шапка/панель (26rem) − отступ (2.4rem) − строка «К проекту» (8.4rem) − зазор (2rem) */
.game { height: 100%; padding: 0 var(--pad) 2.4rem; }
.game__col { height: 100%; width: min(100%, calc((100vh - 38.8rem) * 16 / 9)); margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.game__bar { display: flex; align-items: center; gap: 2.4rem; height: 8.4rem; flex: none; }
.game__bar h2 { font-size: 3.4rem; }
.game__frame { width: 100%; aspect-ratio: 16 / 9; flex: none; border-radius: var(--r-xl); overflow: hidden; background: var(--soft); position: relative; }
.game__frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.game__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--text-2); pointer-events: none; }

/* ---------- «О нас»: лендинг из кубиков ---------- */
.about { height: 100%; position: relative; }
.landing { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0 var(--pad) 12rem; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 95%, transparent); mask-image: linear-gradient(to bottom, #000 95%, transparent); }
.landing::-webkit-scrollbar { display: none; }
.landing h2 { font-size: 5.6rem; line-height: 1.04; margin-bottom: 5.6rem; max-width: 130rem; }
.landing h3 { font-family: var(--font-text); font-weight: 500; font-size: 3rem; line-height: 1.2; letter-spacing: 0; margin-bottom: 1.2rem; }
.landing p { font-size: 2.4rem; line-height: 1.4; color: var(--text-2); }
.l-sec { margin-top: 12.8rem; animation: rise .8s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * 90ms); }
.l-actions { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.l-grid { display: grid; gap: 3.2rem; }
.l-grid--2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 6.4rem; }
.l-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 4.8rem; }

/* header-block: обложка на всю ширину, без скругления, графика в отдельной области справа */
/* обложка как на ys2024: скруглённый блок, композиция центра справа, объекты выходят за края блока */
.l-header { position: relative; margin: 1.2rem 0 0; min-height: 72rem; border-radius: var(--r-xl); background: var(--soft); display: flex; align-items: center; padding: 0 8rem; overflow: hidden; animation: rise .8s var(--ease) both; }
/* три колонки объектов центра, как в обложке ys2024: крайние едут вверх, средняя — вниз, бесконечно (20 с на цикл) */
.l-cols { position: absolute; top: 0; bottom: 0; right: 4rem; width: 50%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; overflow: hidden; }
.l-col { display: flex; flex-direction: column; align-items: center; gap: 6rem; padding: 3rem 0; animation: col-up 20s linear infinite; will-change: transform; }
.l-col--down { animation-name: col-down; }
.l-col img { width: 72%; height: auto; flex: none; filter: drop-shadow(0 1.6rem 2.4rem rgba(20,40,80,.12)); }
@keyframes col-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes col-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* свой composite-слой: без него полупрозрачный градиент каждый кадр смешивается с едущими под ним колонками — на слабом железе это и есть подёргивание в первых столбцах */
.l-header__fade { position: absolute; inset: 0; background: linear-gradient(to right, var(--soft) 42%, rgba(238,242,248,0) 60%); pointer-events: none; transform: translateZ(0); }
.l-header__content { position: relative; max-width: 88rem; }
.l-header h1 { font-size: 8.8rem; line-height: .96; margin-bottom: 3.2rem; }
.landing .l-header p { font-size: 3.2rem; line-height: 1.3; margin-bottom: 4.8rem; }

/* extended-features / card-layout: фичи и аудитории */
.l-icon { display: inline-flex; width: 9.6rem; height: 9.6rem; border-radius: var(--r-l); background: var(--grey); align-items: center; justify-content: center; color: #000; margin-bottom: 3.2rem; }

/* content-layout-block: theme light → #E7EBF4, текст по центру */
.l-banner { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--grey); min-height: 44rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8rem 18rem; }
.l-banner .kv img { filter: drop-shadow(0 1.6rem 2.4rem rgba(20,40,80,.1)); }
.landing .l-banner h2 { position: relative; margin: 0; max-width: 120rem; }

/* media-block: графика + нумерованный список */
.l-media { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; }
.l-list { display: flex; flex-direction: column; gap: 3.2rem; }
.l-list__item { display: flex; gap: 2.8rem; align-items: flex-start; }
.l-num { flex: none; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 500; font-size: 2.6rem; display: inline-flex; align-items: center; justify-content: center; }
.l-list__item b { display: block; font-size: 3rem; font-weight: 500; line-height: 1.2; margin: .6rem 0; color: #000; }

/* шаги: плашка на брендовом сером */
.l-plate { border-radius: var(--r-xl); background: var(--grey); padding: 8rem; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.step { padding-right: 3.2rem; }
.step__head { display: flex; align-items: center; margin-bottom: 3.2rem; }
.step__n { flex: none; width: 8rem; height: 8rem; border-radius: 50%; background: var(--white); color: #000; font-family: var(--font-display); font-weight: 900; font-size: 3.6rem; display: inline-flex; align-items: center; justify-content: center; }
.step__line { flex: 1; height: .3rem; margin: 0 -3.2rem 0 2rem; border-radius: .2rem; background: var(--blue); opacity: .5; }
.landing .step p { font-size: 2.2rem; }

/* price-card: пара акцентных карточек — чёрная и брендовая */
.price { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 6.4rem 6.4rem 22rem; color: #fff; }
.price > :not(.kv) { position: relative; z-index: 1; }
.price .kv img { filter: drop-shadow(0 1.6rem 2.4rem rgba(0,0,0,.25)); }
.price--brand .kv__lines path, .price--brand .kv__lines ellipse { stroke: #fff; opacity: .55; }
.price--dark .kv__lines path, .price--dark .kv__lines ellipse { opacity: .85; }
.price h3 { font-family: var(--font-display); font-weight: 900; font-size: 4.8rem; line-height: 1.04; margin-bottom: 4rem; letter-spacing: -.015em; color: #fff; }
.price ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.price li { display: flex; gap: 2rem; align-items: flex-start; font-size: 2.8rem; line-height: 1.3; }
.price li svg { flex: none; margin-top: .2rem; }
.price--dark { background: var(--black); }
.price--brand { background: var(--blue); }

/* media-block с цитатой: фото в овале, элемент KV на стыке */
.l-join { display: grid; grid-template-columns: 40rem 1fr; gap: 8rem; align-items: center; border-radius: var(--r-xl); background: var(--soft); padding: 8rem; }
.l-join__visual { position: relative; aspect-ratio: 1; }
.l-join__visual .kv__lines { inset: -2.4rem; width: calc(100% + 4.8rem); height: calc(100% + 4.8rem); }
.l-join__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.l-join__obj { position: absolute; right: -4rem; bottom: 2rem; width: 30%; filter: drop-shadow(0 1.6rem 2.4rem rgba(20,40,80,.16)); animation: float 14s ease-in-out infinite alternate; }
.landing .l-join h2 { font-size: 4.8rem; margin-bottom: 3.2rem; }
.landing .l-join__quote { font-size: 3rem; line-height: 1.35; color: var(--text); margin-bottom: 3.2rem; }
.l-join__name { font-size: 2.6rem; font-weight: 500; color: #000; }
.l-join__role { font-size: 2.2rem; color: var(--text-2); margin-bottom: 4rem; }

.l-more { position: absolute; right: var(--pad); bottom: 2.4rem; width: 9.6rem; height: 9.6rem; border-radius: 50%; background: var(--black); color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 2; animation: bob 2.4s ease-in-out infinite; transition: opacity .3s; }
.l-more.is-off { opacity: 0; pointer-events: none; }
@keyframes bob { 50% { translate: 0 1rem; } }

/* ---------- программа стенда ---------- */
.schedule { height: 100%; padding: .8rem var(--pad) 2.4rem; display: flex; flex-direction: column; }
.schedule h2 { font-size: 5.6rem; line-height: 1; margin-bottom: 4rem; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem; flex: 1; min-height: 0; }
.slot { position: relative; border-radius: var(--r-xl); background: var(--soft); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .4s var(--ease); }
.slot--live { box-shadow: inset 0 0 0 .4rem var(--blue); }
.kv--slot { aspect-ratio: 3 / 2; flex: none; background: transparent; }
.slot__status { position: absolute; left: 2rem; top: 2rem; z-index: 1; display: inline-flex; align-items: center; gap: 1rem; height: 4.8rem; padding: 0 2rem; border-radius: 2.4rem;
  background: var(--white); font-size: 2rem; font-weight: 500; color: #000; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.08); }
.slot__status--live { background: var(--blue); color: #fff; padding-left: 1.6rem; }
.slot__status i { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; animation: blink 1.6s ease-in-out infinite; }
.slot__body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: .8rem 3.2rem 3.2rem; }
.slot__time { font-family: var(--font-display); font-weight: 900; font-size: 4.4rem; line-height: 1; margin-bottom: 1rem; letter-spacing: -.02em; color: #000; }
.slot__dir { font-size: 2rem; color: var(--text-2); margin-bottom: 2rem; }
.slot__title { font-size: 2.5rem; line-height: 1.25; font-weight: 500; color: #000; }
.slot__who { margin-top: auto; padding-top: 2.4rem; display: flex; align-items: center; gap: 1.4rem; font-size: 2.2rem; font-weight: 500; line-height: 1.2; }
.avatar { flex: none; width: 6.4rem; height: 6.4rem; border-radius: 50%; object-fit: cover; background: var(--white); display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 500; color: var(--text-2); }

/* ---------- попап контактов ---------- */
.popup { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); backdrop-filter: blur(1.2rem); animation: fade .3s var(--ease) both; }
.popup__card { width: 156rem; max-height: 96rem; border-radius: var(--r-xl); background: #fff; color: var(--text); padding: 4.8rem 5.6rem 5.6rem; animation: rise .5s var(--ease) both; }
.popup__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; }
.popup__head h2 { font-size: 4.8rem; line-height: 1; }
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.contact { display: grid; grid-template-columns: 1fr 17rem; gap: 2.4rem; align-items: center; padding: 2.8rem; border-radius: var(--r-l); background: var(--grey); }
.contact__photo { width: 9.6rem; height: 9.6rem; border-radius: 50%; object-fit: cover; margin-bottom: 1.6rem; }
.contact b { display: block; font-size: 2.4rem; font-weight: 500; line-height: 1.15; color: #000; }
.contact span { font-size: 1.9rem; color: var(--text-2); line-height: 1.3; display: block; margin-top: .4rem; }
.contact i { font-style: normal; font-size: 1.8rem; color: var(--text-3); display: block; margin-top: 1rem; }
.contact__qr { width: 17rem; height: 17rem; border-radius: var(--r-m); background: #fff; padding: .8rem; }

/* ---------- отсчёт ---------- */
.idle { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); backdrop-filter: blur(1.2rem); animation: fade .3s var(--ease) both; }
.idle__card { width: 60rem; border-radius: var(--r-xl); background: #fff; color: var(--text); padding: 5.6rem 4.8rem 4.8rem; text-align: center; position: relative; animation: rise .5s var(--ease) both; }
.idle__ring { width: 16rem; height: 16rem; margin: 0 auto 2rem; transform: rotate(-90deg); }
.idle__ring circle { fill: none; stroke: var(--grey); stroke-width: 8; }
.idle__ring .idle__progress { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
/* цифра центрируется по кругу: блок той же высоты и позиции, что и кольцо (padding-top карточки 5.6rem, кольцо 16rem) */
.idle__num { position: absolute; left: 0; right: 0; top: 5.6rem; height: 16rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 5.6rem; line-height: 1; color: #000; font-variant-numeric: tabular-nums; }
.idle__text { font-size: 2.8rem; font-weight: 500; margin-bottom: 3.2rem; }

/* view transitions */
/* переход в проект: страница вокруг меняется МГНОВЕННО (без кросс-фейда — раньше старый экран каталога
   ещё секунду просвечивал под новым текстом), плавно летит только сама картинка cover из карточки в hero */
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(cover) { animation-duration: .4s; animation-timing-function: var(--ease); z-index: 2; }
::view-transition-old(cover), ::view-transition-new(cover) { mix-blend-mode: normal; height: 100%; object-fit: cover; animation-duration: .4s; }