/* Лицевая страница и вход: общий каркас. Цвета, шрифты и характер задаёт look-a.css. */
@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/Onest.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root { --gutter: clamp(20px, 4vw, 56px); --top-h: 72px; }

/* ---------- фоновое видео */
.reel { position: absolute; inset: 0; overflow: hidden; background: #0b0b0b; }
.page--login .reel { position: fixed; }
.reel__poster, .reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__video { opacity: 0; transition: opacity .6s ease; }
.reel-on .reel__video { opacity: 1; }
.reel__shade { position: absolute; inset: 0; background: var(--shade); }
@media (prefers-reduced-motion: reduce) { .reel__video { display: none; } html { scroll-behavior: auto; } }

/* ---------- шапка */
.top { position: fixed; z-index: 20; inset: 0 0 auto 0; height: var(--top-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px; color: #fff; transition: background .25s ease, color .25s ease; }
/* марка, пункты и кнопка не сжимаются и не переносятся: сжатая марка ломается (строки «АМС72 / АВТО» выпадают из своего блока).
   Строка целиком (≈950 px + поля) помещается от 1080 px; уже — меню-гармошка, см. @media (max-width: 1079px) */
.top__brand { flex: none; font-family: var(--font-head); text-transform: uppercase; }
.top__nav { display: flex; gap: 28px; white-space: nowrap; }
.top__nav { align-items: center; }
/* «Бизнес-план»: список раскрывается по наведению и по фокусу (клавиатура, касание) — без скрипта */
.top__drop { position: relative; }
.top__drop-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.top__drop-btn::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.top__drop:hover .top__drop-btn::after, .top__drop:focus-within .top__drop-btn::after { transform: translateY(1px) rotate(225deg); }
.top__drop-list { position: absolute; left: -20px; top: 100%; padding-top: 14px; min-width: 240px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.top__drop:hover .top__drop-list, .top__drop:focus-within .top__drop-list { opacity: 1; visibility: visible; transform: none; }
.top__drop-list a { padding: 15px 20px; background: var(--sheet-bg); color: var(--sheet-ink); border-bottom: 1px solid var(--sheet-line); }
.top__drop-list a:last-child { border-bottom: 0; }
.top__sheet .top__sheet-head { padding: 22px 0 6px; font-family: var(--font-head); text-transform: uppercase; font-size: 11px; opacity: .55; }
.top__sheet a.top__sheet-sub { padding-left: 18px; font-size: 18px; }
.top__cta { flex: none; margin-left: auto; white-space: nowrap; }
.top__menu { display: none; margin-left: auto; }
.top__menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; cursor: pointer; }
.top__menu summary::-webkit-details-marker { display: none; }
.top__menu summary span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .2s ease; }
.top__menu[open] summary span:first-child { transform: translateY(4.5px) rotate(45deg); }
.top__menu[open] summary span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.top__sheet { position: fixed; inset: var(--top-h) 0 0 0; padding: 24px var(--gutter) 40px; display: flex; flex-direction: column;
  background: var(--sheet-bg); color: var(--sheet-ink); overflow: auto; }
.top__sheet a { padding: 16px 0; border-bottom: 1px solid var(--sheet-line); font-family: var(--font-head); text-transform: uppercase; font-size: 22px; }
.top__sheet .top__sheet-cta { margin-top: auto; border: 0; text-align: center; background: var(--accent); color: var(--on-accent); padding: 18px; font-size: 14px; }

/* ---------- первый экран */
.hero { position: relative; min-height: 100vh; min-height: 100svh; color: #fff; display: flex; }
.hero__inner { position: relative; z-index: 1; width: 100%; padding: calc(var(--top-h) + 24px) var(--gutter) 72px; }
.hero__title { font-family: var(--font-head); text-transform: uppercase; overflow-wrap: anywhere; }

/* ---------- марка «АМС72 / АВТО | РАЗБОР» (macro brand() в _shell.html): шапка, первый экран, подвал, вход.
   Масштаб — кегль родителя. Две строки по line-height 1 плюс полоска ростом с заглавные буквы названия
   (у Unbounded с выносами круглых ≈ .78 кегля): кегль строк .43em подобран по замеру в браузере (±2 %). Строки прижаты правым краем
   к «Р», низ «АВТО» — на общей базовой линии; не влезает в строку — блок встаёт над названием. */
.brandlock { display: inline-flex; flex-direction: column; align-items: stretch; max-width: 100%; }
.brandlock__sub { display: flex; justify-content: space-between; font-size: .3em; line-height: 1; margin-top: .25em; }
.brandmark { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; row-gap: .12em; }
.brandmark > * { flex: none; }
.brandmark__rows { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: .43em; line-height: 1; margin-right: .2em; white-space: nowrap; }
.brandmark__row:first-child { border-bottom: .05em solid currentColor; }
.hero__foot { position: absolute; z-index: 1; left: var(--gutter); bottom: 14px; display: flex; align-items: center; gap: 28px; }
@media (max-width: 359px) { .hero__scroll { display: none; } } /* на 320 px в строку помещается только кнопка звука */

/* ---------- кнопка звука: шесть столбиков-волна. Выключена — низкая линия медленно «дышит»; включена — столбики
   ведёт landing.js по спектру звука (.is-live) либо, если Web Audio недоступен, пляшет CSS-анимация. */
.sound { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sound[hidden] { display: none; }
.sound__bars { display: flex; align-items: center; gap: 3px; height: 22px; }
.sound__bars i { width: 3px; height: 100%; background: currentColor; transform: scaleY(.16); animation: sound-breathe 3.6s ease-in-out infinite; }
.sound__bars i:nth-child(2) { animation-delay: -.5s; } .sound__bars i:nth-child(3) { animation-delay: -1s; }
.sound__bars i:nth-child(4) { animation-delay: -1.5s; } .sound__bars i:nth-child(5) { animation-delay: -2s; } .sound__bars i:nth-child(6) { animation-delay: -2.5s; }
.sound[aria-pressed="true"] .sound__bars i { background: var(--accent); animation: sound-dance .62s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-duration: .48s; animation-delay: -.2s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-duration: .74s; animation-delay: -.45s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-duration: .54s; animation-delay: -.1s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(5) { animation-duration: .68s; animation-delay: -.35s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(6) { animation-duration: .44s; animation-delay: -.25s; }
.sound.is-live[aria-pressed="true"] .sound__bars i { animation: none; transition: transform .09s linear; }
@keyframes sound-breathe { 0%, 100% { transform: scaleY(.16); } 50% { transform: scaleY(.34); } }
@keyframes sound-dance { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .sound .sound__bars i, .sound[aria-pressed="true"] .sound__bars i { animation: none; transition: none; transform: scaleY(.4); }
  .sound .sound__bars i:nth-child(2), .sound .sound__bars i:nth-child(5) { transform: scaleY(.75); }
  .sound .sound__bars i:nth-child(3) { transform: scaleY(1); } .sound .sound__bars i:nth-child(4) { transform: scaleY(.55); }
}

/* ---------- карусель тезисов первого экрана: контейнер фиксированной высоты в строках прячет всё выше своего верха.
   Текущий тезис (.is-on) стоит; уходящий (.is-out) уезжает на свою высоту вверх; остальные ждут на высоту ниже.
   Переход есть только у двух активных состояний, поэтому возврат «вниз» после ухода — мгновенный и невидимый. */
.roll { position: relative; height: calc(4 * 1.45em); overflow: hidden; }
.roll__item { position: absolute; inset: 0; transform: translateY(100%); opacity: 0; }
.roll__item.is-on { transform: none; opacity: 1; }
.roll__item.is-out { transform: translateY(-100%); opacity: 0; }
.roll__item.is-on, .roll__item.is-out { transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .roll__item { transition: none !important; } }
.button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; font: inherit; }
.button--block { width: 100%; }

/* ---------- секции */
.block { --pad: clamp(72px, 11vw, 168px); padding: var(--pad) var(--gutter); }

/* ---------- лента над секцией: занимает 2/3 верхнего отступа, остаток делится пополам сверху и снизу.
   Трек продублирован в разметке и едет на половину своей ширины — шов не виден; --right разворачивает анимацию. */
.block--live { padding-top: calc(var(--pad) / 6); }
.strip { position: relative; margin: 0 calc(-1 * var(--gutter)) max(calc(var(--pad) / 6), 30px); }
.strip__view { min-height: calc(var(--pad) * 2 / 3); display: flex; align-items: center; overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: strip 80s linear infinite; }
.strip--right .strip__track { animation-direction: reverse; }
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes strip { to { transform: translateX(-50%); } }
.card { flex: none; margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.card__face { grid-row: 1; border-radius: 50%; object-fit: cover; }
.card__who { grid-column: 2; }
.card__text { grid-column: 1 / -1; }
.strip__note { position: absolute; right: var(--gutter); top: 100%; margin-top: 7px; }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

.nowrap { white-space: nowrap; }
.block__title { font-family: var(--font-head); text-transform: uppercase; text-wrap: balance; }
.theses, .grid, .edges, .demos { display: grid; }
.cell__name, .thesis h3, .edge__name, .demo__name { font-family: var(--font-head); text-transform: uppercase; }
.demo__creds { display: flex; gap: 40px; }
.demo__creds dd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px; }
.demo__links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.link-arrow::after { content: "\2197"; margin-left: .4em; display: inline-block; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translate(2px, -2px); }

/* ---------- бегущая строка */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker__track { display: inline-flex; animation: ticker 36s linear infinite; }
.ticker__track span { font-family: var(--font-head); text-transform: uppercase; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- подвал */
.foot { padding: 56px var(--gutter) 40px; display: grid; gap: 20px 40px; grid-template-columns: 1fr auto; align-items: center; }
.foot__brand { font-family: var(--font-head); text-transform: uppercase; grid-column: 1 / -1; }
.foot__up { justify-self: end; padding: 9px 0; }
.foot__up::after { content: "\2191"; margin-left: 8px; }

/* ---------- вход */
.page--login { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: #fff; background: #0b0b0b; }
.login { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1fr minmax(320px, 420px); align-items: center;
  gap: 48px; padding: calc(var(--top-h) + 24px) var(--gutter) 24px; }
.login__title { font-family: var(--font-head); text-transform: uppercase; overflow-wrap: anywhere; }
.login__card { background: var(--card-bg); color: var(--card-ink); padding: 36px 32px; display: grid; gap: 18px; }
.login__head { font-family: var(--font-head); text-transform: uppercase; }
.login__field { display: grid; gap: 6px; }
.login__field input { width: 100%; height: 52px; padding: 0 14px; font: inherit; font-size: 17px; color: inherit; background: var(--input-bg);
  border: 1px solid var(--input-line); border-radius: var(--radius); }
.login__field input:focus { outline: none; border-color: var(--card-ink); box-shadow: 0 0 0 1px var(--card-ink); }
.login__pw { position: relative; }
.login__pw input { padding-right: 52px; }
.login__eye { position: absolute; top: 0; right: 0; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; }
.login__eye:hover, .login__eye[aria-pressed="true"] { opacity: 1; }
.login__eye:focus-visible { outline: 2px solid var(--card-ink); outline-offset: -4px; }
.login__eye-off, .login__eye[aria-pressed="true"] .login__eye-on { display: none; }
.login__eye[aria-pressed="true"] .login__eye-off { display: block; }
.login__error { padding: 12px 14px; background: #fde8e4; color: #8a1c0d; border-radius: var(--radius); font-size: 15px; }
.login__flash { padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--input-line); border-radius: var(--radius); font-size: 15px; }
.login__hint { font-size: 14px; opacity: .7; }

/* ---------- шапка не помещается в строку: пункты и кнопка уходят в меню-гармошку */
@media (max-width: 1079px) {
  .top__nav, .top > .top__cta { display: none; }
  .top--login > .top__cta { display: block; }
  .top__menu { display: block; }
}

/* ---------- телефон */
@media (max-width: 767px) {
  :root { --top-h: 60px; }
  .top { gap: 16px; } /* вход на 320 px: марка + «На главную» без сжатия */
  body { font-size: 16px; }
  .login { grid-template-columns: 1fr; align-content: center; gap: 24px; }
  .login__card { padding: 28px 20px; }
  .foot { grid-template-columns: 1fr; }
  .foot__up { justify-self: start; }
  .demo__creds { gap: 28px; }
}