/* ============================================================
   Glitch — концепт нового сайта, верхний блок (2026-10-09)

   Принципы:
   - фон — «изумрудная ночь»: тёмный, но цветной и неоднородный;
   - одна мысль на экран, много воздуха, крупный заголовок;
   - главная кнопка белая, остальные — стекло;
   - глитч — СОБЫТИЕ, а не фон: картинка на миг режется на
     горизонтальные полосы, они сдвигаются вбок и встают на место —
     как логотип и переключатель в приложении. Одноцветно, без
     цветных теней. Механизм один — glitchStrips в concept.js.
   ============================================================ */

/* ---------- Цвета и размеры ---------- */
:root {
  /* Изумрудный — акцент сайта и приложения по умолчанию (#2FAE9A). */
  --emerald:      #2FAE9A;
  --emerald-soft: #5AD1A8;
  --night-0:      #07191A;         /* самое глубокое место ночи */
  --night-1:      #0B2523;
  --night-2:      #103530;

  --text:       #F2FBF8;
  --text-soft:  rgba(226, 246, 240, 0.78);
  --text-quiet: rgba(226, 246, 240, 0.60);
  --ink:        #0A2320;           /* текст на белых кнопках */

  --width:      1440px;            /* предел содержимого; шапка — во всю ширину */
  --page-max:   2560px;            /* предел ВСЕЙ страницы: при отдалении (масштаб 25 %)
                                      страница сжимается полосой, как у Discord, а не
                                      растягивает сцены на всё окно */
  --gutter:     clamp(20px, 3.4vw, 64px);
  --radius:     14px;

  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* надпись производителя на мониторе (OFL, Google Fonts) */
@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: #041210;           /* то же небо, что у сцен: видно по бокам при отдалении */
  overflow-x: clip;              /* вылезшее за край окна не растягивает страницу вбок (на телефоне — чёрная полоса справа) */
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---------- Сцена первого экрана ----------
   Нарисованная картинка фоном блока: арена (главная) или мир за её
   порталом — см. «Сцены» ниже. Здесь — запасной цвет, пока картинка грузится. */
.hero {
  position: relative;
  overflow-x: visible;           /* шапка при отдалении — шире полосы, до краёв окна */
  overflow-y: clip;
  min-height: min(100vh, var(--view-h, 100vh));   /* при отдалении не растёт (concept.js, блок 0) */
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(56px, 8vh, 112px);
  background: linear-gradient(180deg, #030A0C, #0F3A33);
  isolation: isolate;            /* слой сцены (z-index: -2) — внутри блока */
}

/* Строки развёртки — как полосы на значке приложения. Едва заметны
   и гаснут к краям, чтобы не превращаться в узор. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 55%, #000 30%, transparent 85%);
          mask-image: radial-gradient(80% 70% at 70% 55%, #000 30%, transparent 85%);
  pointer-events: none;
}


/* Зерно — снимает «компьютерную» гладкость градиента. Лежит на всё окно,
   как и небо: при отдалении выходит за полосу страницы до краёв окна. */
.is-wider-than-page .world::after { left: calc((100% - var(--win-w)) / 2); right: calc((100% - var(--win-w)) / 2); }
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;                    /* поверх всего: зерно не видно на тексте, но снимает гладкость */
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---------- Шапка — во всю ширину ---------- */
.top {
  width: 100%;                   /* .hero — колонка: без этого шапка сожмётся */
  padding: 26px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* вкладки — ровно по центру */
  align-items: center;
  gap: 40px;
}
.top > .top-right { justify-self: end; }
/* окно шире страницы (отдаление): страница — полосой, а шапка — во всё окно,
   логотип и кнопка — в его углах (--win-w — ширина окна, layout.js) */
.is-wider-than-page .top {
  width: var(--win-w);
  margin-left: calc((100% - var(--win-w)) / 2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  justify-self: start;
}
.brand-mark { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; display: block; }

.top-nav {
  display: flex;
  gap: 40px;
  font-size: 17px;
  font-weight: 500;
}
.top-nav { align-items: center; }
/* у всех вкладок одна подсветка: «таблетка» за названием при наведении */
.top-nav > a, .nav-drop-btn {
  margin: -8px -14px; padding: 8px 14px;
  border-radius: 12px;
  opacity: 0.86;
  transition: opacity .15s, background .15s;
}
.top-nav > a:hover, .nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn { opacity: 1; background: #17594E; }

/* «Сообщество», «Документация» — выпадающие списки, как у Discord: крупная
   панель сплошного цвета, у пунктов пояснение, у угла парит предмет */
.nav-drop { position: relative; }
/* крайняя справа вкладка (Документация) раскрывается влево, от своего правого
   края — иначе панель вылезает за край страницы на неширокой странице */
.nav-drop:last-of-type .nav-drop-panel { left: auto; right: -14px; }
/* мостик от кнопки до панели — ровно шириной СВОЕЙ кнопки, чтобы не
   перекрывать соседнюю вкладку (иначе две вкладки перехватывают мышь) */
.nav-drop.is-open::after {
  content: ""; position: absolute; left: -14px; right: -14px; top: 100%; height: 26px;
}
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.nav-drop-btn svg { transition: transform .2s; }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute; left: -14px; top: calc(100% + 18px);
  z-index: 20;
  width: max-content;            /* по содержимому — без пустоты справа */
  padding: 26px 22px 30px;
  border-radius: 28px;
  background: #17594E;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden;
  pointer-events: none;          /* закрытая (и закрывающаяся) панель мышь не ловит */
  transform: translateY(-8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.nav-drop-label {
  margin: 0 12px 10px;
  font-size: 15px; font-weight: 500;
  color: rgba(226, 246, 240, .62);
}
.nav-drop-panel a {
  display: block;
  margin-right: 64px;            /* справа — место под край картинки */
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s;
}
.nav-drop-panel a:hover { background: rgba(255, 255, 255, .08); }
/* пункт, которого ещё нет: без ссылки и приглушён */
.nav-drop-soon { margin-right: 64px; padding: 10px 12px; opacity: .55; cursor: default; }
.nav-drop-panel b { display: block; font-size: 16.5px; font-weight: 700; color: #fff; }
.nav-drop-panel span { display: block; margin-top: 3px; font-size: 14px; color: rgba(226, 246, 240, .72); }
.nav-drop-art {
  position: absolute; right: -40px; bottom: -84px;
  width: 160px; height: auto;
  transform: rotate(4deg);
  pointer-events: none;
}
.nav-drop-book { width: 140px; right: -44px; bottom: -58px; transform: rotate(6deg); }

/* ---------- Кнопки ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn svg { flex: none; }

.btn-sm { padding: 12px 22px; font-size: 16.5px; border-radius: 999px; }
.btn-lg { padding: 16px 20px; font-size: 17px; }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #E8F7F2; }

.btn-glass {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.15); }

/* ---------- Сетка верхнего блока ---------- */
.hero-grid {
  /* Содержимое — в общей ширине сайта, по центру (решение владельца 09.10:
     у левого края текст смотрелся хуже). */
  max-width: var(--width);
  margin: 0 auto;
  padding: clamp(32px, 5vh, 64px) var(--gutter) 0;
  width: 100%;
  flex: 1;                       /* блок по центру высоты экрана */
  display: grid;
  /* Текст — своей ширины (в неё встают три кнопки), окно — всё остальное. */
  grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}

.hero-text { position: relative; z-index: 2; }
.back-arena {
  display: inline-flex; margin-bottom: 22px; padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  background: rgba(6, 28, 24, .62);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .16);
  backdrop-filter: blur(10px);
}
.back-arena:hover { background: rgba(10, 40, 34, .74); }
.back-arena[hidden] { display: none; }

h1 {
  margin: 0;
  font-size: clamp(48px, 6.6vw, 100px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.lead {
  margin: 30px 0 0;
  max-width: 30em;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--text-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}

.platforms {
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--text-quiet);
}

/* ---------- Сбой полосами ----------
   Копии содержимого, каждая обрезана своей полосой. В покое их нет,
   во время сбоя оригинал прячется, а полосы сдвигаются вбок. */
.gl { position: relative; display: inline-block; }
.gl-strip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  white-space: nowrap;
}
.gl.is-glitching > .gl-body { visibility: hidden; }

/* ---------- Снимок продукта ---------- */
.hero-shot {
  position: relative;
  /* Окно шире своей колонки и уходит за правый край экрана. */
  width: calc(100% + 22vw);
  max-width: 1240px;
}

.app {
  position: relative;
  border-radius: 18px;
  background: #151515;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 50px 120px -20px rgba(0, 10, 9, 0.75);
  animation: app-in 0.9s cubic-bezier(.2, .7, .2, 1) both 0.15s;
  container-type: inline-size;
}

@keyframes app-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Всё внутри окна меряется в em от его ширины: 80em = ширина окна. */
.app-inner {
  font-size: calc(100cqw / 80);
  height: 50em;
  display: flex;
  overflow: hidden;
  border-radius: 18px;
  color: #EDEDED;
  line-height: 1.4;
}

.av {
  flex: none;
  width: 2.2em; height: 2.2em;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.95em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

/* полоса сообществ */
.rail {
  width: 6em;
  flex: none;
  background: #101010;
  padding: 1.1em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
}
.rail-icon {
  position: relative;
  width: 3.6em; height: 3.6em;
  border-radius: 1.1em;
  display: grid;
  place-items: center;
  font-size: 1em;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--g1, #2a2a2a), var(--g2, #2a2a2a));
}
.rail-icon.is-active::before {
  content: "";
  position: absolute;
  left: -1.2em;
  width: 0.35em; height: 2.4em;
  border-radius: 0 0.3em 0.3em 0;
  background: #fff;
}
.rail-home { background: none; }
.rail-home img { width: 100%; height: 100%; border-radius: 1.1em; }
.rail-sep { width: 2em; height: 2px; border-radius: 2px; background: #2a2a2a; }
.rail-add { background: #1f1f1f; color: #5AD1A8; font-size: 1.6em; font-weight: 400; width: 2.25em; height: 2.25em; border-radius: 0.7em; }

/* каналы */
.channels {
  width: 18em;
  flex: none;
  background: #1A1A1A;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.8em;
  font-size: 1em;
}
.banner {
  height: 7em;
  display: flex;
  align-items: flex-end;
  padding: 0 1.1em 0.8em;
  font-size: 1.05em;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55)),
    linear-gradient(120deg, #7A5CFF, #6A8DFF 45%, #FF7EB3);
}
.cat {
  margin: 1.3em 1.1em 0.4em;
  font-size: 0.78em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7A7A7A;
}
.ch {
  margin: 0.08em 0.6em;
  padding: 0.42em 0.6em;
  border-radius: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: #9A9A9A;
  font-weight: 500;
}
.ch i { font-style: normal; color: #7A7A7A; width: 1em; text-align: center; }
.ch.is-active { background: #2A2A2A; color: #fff; }
.ch .vol {
  height: 1em;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237A7A7A' d='M4 9h4l5-4v14l-5-4H4zM16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='%237A7A7A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.voice-user {
  margin: 0.15em 0.6em 0.15em 2.6em;
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.92em;
  color: #C9C9C9;
}
.voice-user .av { width: 1.7em; height: 1.7em; font-size: 0.8em; }
.voice-user.is-speaking .av { box-shadow: 0 0 0 0.16em #1A1A1A, 0 0 0 0.3em #35D07F; }
.live {
  margin-left: auto;
  padding: 0.08em 0.45em;
  border-radius: 0.35em;
  background: #ED4245;
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
}

.me {
  margin-top: auto;
  margin-inline: 0.6em;
  padding: 0.7em;
  border-radius: 0.8em;
  background: #222;
}
.me-voice { display: flex; align-items: center; gap: 0.5em; color: #35D07F; font-size: 0.85em; font-weight: 600; }
.me-voice .dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: #35D07F; }
.me-row { display: flex; align-items: center; gap: 0.6em; margin-top: 0.6em; font-weight: 600; }
.me-icons { margin-left: auto; display: flex; gap: 0.5em; }
.me-icons i { width: 1.1em; height: 1.1em; border-radius: 0.3em; background: #3a3a3a; }

/* переписка */
.chat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #151515;
}
.chat-head {
  height: 3.6em;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0 1.4em;
  border-bottom: 1px solid #222;
  font-weight: 700;
}
.chat-head i { font-style: normal; color: #7A7A7A; }
.chat-head span { font-weight: 400; color: #8A8A8A; padding-left: 0.6em; margin-left: 0.2em; border-left: 1px solid #333; }

.feed {
  flex: 1;
  padding: 1.6em 1.4em 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.3em;
}
.msg { display: flex; gap: 0.9em; color: #DCDCDC; }
.msg .av { margin-top: 0.1em; }
.who { font-weight: 700; color: #fff; margin-bottom: 0.15em; }
.who time { font-weight: 400; font-size: 0.8em; color: #7A7A7A; margin-left: 0.5em; }

.clip {
  position: relative;
  width: 24em;
  aspect-ratio: 16 / 9;
  margin-top: 0.6em;
  border-radius: 0.8em;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 70% 30%, rgba(255, 184, 107, 0.65), transparent 70%),
    radial-gradient(70% 90% at 20% 90%, rgba(98, 84, 255, 0.8), transparent 70%),
    linear-gradient(160deg, #2B3A55, #13151f);
}
.play {
  position: absolute;
  left: 50%; top: 50%;
  width: 3.4em; height: 3.4em;
  margin: -1.7em 0 0 -1.7em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}
.play::after {
  content: "";
  position: absolute;
  left: 1.3em; top: 1em;
  border-left: 1.2em solid #fff;
  border-top: 0.7em solid transparent;
  border-bottom: 0.7em solid transparent;
}
.reacts { display: flex; gap: 0.4em; margin-top: 0.5em; }
.reacts span {
  padding: 0.15em 0.55em;
  border-radius: 0.6em;
  background: #222;
  box-shadow: inset 0 0 0 1px #2E2E2E;
  font-size: 0.9em;
}
.reacts span:first-child { background: rgba(74, 166, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(74, 166, 255, 0.55); }

.composer {
  margin: 1.4em;
  padding: 0.95em 1.2em;
  border-radius: 0.9em;
  background: #212121;
  color: #7A7A7A;
}

/* ---------- Узкие экраны ---------- */
.is-medium .hero-grid { grid-template-columns: 1fr; }
.is-medium .hero-shot { width: 100%; }

/* Меню-кнопка вместо вкладок — на узком экране */
.top { position: relative; }
.top-right { display: flex; align-items: center; gap: 10px; }
.nav-burger, .nav-sheet { display: none; }
.is-compact .top-nav { display: none; }
.is-compact .top { grid-template-columns: 1fr auto; }
.is-compact .nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: rgba(6, 28, 24, .62);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .16);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.is-compact .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.is-compact .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-compact .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.is-compact .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* панель разделов выезжает под шапкой */
.is-compact .nav-sheet {
  display: flex; flex-direction: column;
  position: absolute; left: 12px; right: 12px; top: calc(100% - 6px);
  z-index: 30;
  padding: 18px 20px 22px;
  border-radius: 24px;
  background: #17594E;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.is-compact .nav-sheet.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.is-compact .nav-sheet a, .is-compact .nav-sheet-soon { padding: 10px 0; font-size: 17px; font-weight: 500; color: #fff; }
.is-compact .nav-sheet-main { font-size: 20px !important; font-weight: 700 !important; }
.is-compact .nav-sheet-label { margin: 16px 0 2px; font-size: 14px; font-weight: 500; color: rgba(226, 246, 240, .62); }
.is-compact .nav-sheet-soon { opacity: .55; }
.is-compact .nav-sheet-soon small { margin-left: 6px; font-size: 13px; }

/* в столбик (телефон, стоячий экран): под текстом — остров с порталом. Высоту острова ставит
   concept.js (cover, --arena-h); промежутки над ним и под ним, до блока
   с монитором, — одни и те же. Первый экран — по содержимому, не во весь
   экран: иначе на высоком телефоне промежуток сверху растёт. */
/* в столбик — класс is-stacked ставит concept.js (блок 0б, единое правило) */
.is-stacked { --arena-gap: 80px; }
.is-stacked .hero[data-scene="arena"] { min-height: 0; padding-bottom: calc(var(--arena-h, 105vw) + var(--arena-gap)); }
.is-stacked .world.is-arena .below { padding-top: var(--arena-gap); }

.is-narrow .top { padding-top: 18px; padding-bottom: 18px; }
/* шапка не вмещает кнопку и меню — «Открыть в Web» есть на первом экране */
.is-narrow .top-right .btn { display: none; }
.is-narrow .actions .btn { flex: 1 1 100%; }
.is-narrow .lead { margin-top: 22px; }
.is-narrow .actions { margin-top: 32px; }
/* Окно крупнее экрана и обрезано справа — иначе текст в нём не прочесть. */
.is-narrow .hero-shot { width: 165%; }

/* ---------- Кто просит меньше движения — без сбоев ---------- */
.is-calm .app { animation: none; }

/* ---------- Сцены ----------
   Арена — arena.svg (make_bg.py) фоном всей страницы, см. «Мир страницы»
   ниже. Mirage и Minecraft — make_scenes.py, фоном первого экрана,
   звёзды внутри картинки. Сцены и небо — готовыми картинками WebP, а не
   SVG: SVG браузер рисует заново на каждом куске прокрутки и при каждой
   смене размера, телефон от этого дёргается (render_scenes.py). */

/* Mirage и Minecraft: картинку мира и небо под ней ставит concept.js
   (placeScene — как у арены). Здесь — запас без JS: картинка на весь
   первый экран. */
.hero[data-scene="mirage"] { background: url(mirage.webp) center / cover no-repeat, #0A2622; }   /* звёзды — внутри картинки */
.hero[data-scene="portal"] { background: url(portal.webp) center / cover no-repeat, #0A2622; }   /* звёзды — внутри картинки */

/* На нарисованных сценах подпись — белее обычного (без тени, решение
   владельца), мелкое примечание — с лёгкой тенью. */
.hero[data-scene] .lead { color: #F2FFFA; }
.hero[data-scene] .platforms { text-shadow: 0 1px 2px rgba(0, 18, 14, .8); }
/* Стеклянные кнопки на светлой сцене — тёмное стекло с размытием фона. */
.hero[data-scene] .btn-glass {
  background: rgba(6, 28, 24, .62);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.hero[data-scene] .btn-glass:hover { background: rgba(10, 40, 34, .74); }

/* ---------- Мир за порталом арены ----------
   Место и размер ставит concept.js по проёму портала в arena.svg.
   Внутри — кусочек сцены мира (та же картинка, что у самой сцены),
   поверх — свечение портала, чтобы мир читался «по ту сторону». */
.portal-view {
  position: absolute;
  z-index: 1;
  display: block;
  font-size: 120px;              /* от него — сила сдвига полос при сбое */
  line-height: 0;
  cursor: pointer;
  outline: none;
}
.portal-view[hidden] { display: none; }
.portal-view .gl-body,
.portal-view .gl-strip { position: absolute; inset: 0; display: block; }
.pv-world {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* size/position ставит concept.js: кусочек сцены, а при входе — вся сцена */
}
.pv-world[data-world="mirage"] { background-image: url(mirage.webp); }
.pv-world[data-world="portal"] { background-image: url(portal.webp); }
.pv-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(232, 255, 248, .55), rgba(232, 255, 248, 0) 38%),
    linear-gradient(180deg, rgba(47, 174, 154, .5), rgba(47, 174, 154, .12) 45%, rgba(47, 174, 154, .3));
  box-shadow: inset 0 0 24px rgba(123, 242, 196, .55);
  opacity: .5;                   /* в покое — половина свечения: мир виден */
  transition: opacity .3s;
}
.portal-view:hover .pv-glow,
.portal-view:focus-visible .pv-glow { opacity: .1; }   /* навёл — мир почти без дымки */
/* Подпись мира — внизу проёма, только при наведении; точки — какой из миров */
.pv-label {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  line-height: 1;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: #F2FFFA;
  text-shadow: 0 1px 2px rgba(0, 18, 14, .8);
  pointer-events: none;
}
.pv-name { opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.pv-name::after { content: " →"; }
.portal-view:hover .pv-name,
.portal-view:focus-visible .pv-name { opacity: 1; transform: none; }
.pv-dots { display: flex; gap: 6px; }
.pv-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(242, 255, 250, .4); }
.pv-dots i.is-on { background: #F2FFFA; }
/* Вход в мир: проём раскрывается на весь блок (concept.js) */
.portal-view.is-entering { transition: left .55s cubic-bezier(.6, 0, .2, 1), top .55s cubic-bezier(.6, 0, .2, 1), width .55s cubic-bezier(.6, 0, .2, 1), height .55s cubic-bezier(.6, 0, .2, 1); }
.portal-view.is-entering .pv-world { transition: background-size .55s cubic-bezier(.6, 0, .2, 1), background-position .55s cubic-bezier(.6, 0, .2, 1); }
.portal-view.is-entering .pv-glow,
.portal-view.is-entering .pv-label { opacity: 0; transition: opacity .35s; }

/* ---------- Мир страницы ----------
   На арене картинка лежит фоном всей страницы (.world) и продолжается
   при прокрутке. Размер и место считает concept.js — так же, как браузер
   вписывал её в первый экран (cover), чтобы портал совпал. Здесь — запас
   на случай без JS. Mirage и Minecraft — фоном только первого экрана,
   ниже — их цвет низа. */
.world {
  position: relative;
  display: block;
  max-width: min(var(--page-max), var(--view-w, 100vw));   /* при отдалении — полосой (concept.js, блок 0) */
  margin: 0 auto;
  isolation: isolate;            /* слой фона (z-index: -1) — внутри страницы */
}
/* Фон страницы — отдельным слоем: на нём concept.js рисует арену и небо,
   и только его растворяем по краям, когда окно шире страницы. */
.world-bg {
  position: absolute; inset: 0;
  z-index: -1;
  background: #0A2622;
  pointer-events: none;
}
/* Картинка мира (Mirage, Minecraft) — первый экран внутри слоя сцены:
   место и размер ставит concept.js (placeScene, --scene, --scene-h). Снизу
   растворяется в небо окна, по бокам при отдалении — вместе со слоем. */
.world-bg::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--scene-h, 0px);
  background: var(--scene, none);
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
          mask-image: linear-gradient(#000 78%, transparent);
}
.world.is-arena .world-bg {
  background: url(arena.webp) center top / max(100%, min(160vh, 2300px)) auto no-repeat;
}
/* Небо — ОДИН фон всего окна, как у Discord: при отдалении не уменьшается
   и не делится на полосу. На арене место и масштаб ставит concept.js
   (совпадает с ареной); здесь — запас без JS и небо «О нас», вопросов,
   документов. У миров ниже первого экрана — ровный цвет body. */
body:has(> .world.is-arena),
body:has(> .doc-world) {
  background: url(sky_tile.webp) center top / max(100%, min(160vh, 2300px)) auto repeat-y, #041210;
}
/* окно шире страницы (отдаление или очень широкий экран) — сцена страницы
   растворяется к краям полосы в небо окна (оно одно на всё окно, см. ниже) */

.is-wider-than-page .world-bg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.world.is-arena .hero[data-scene="arena"] { background: none; }
.below {
  padding: clamp(210px, 34vh, 440px) var(--gutter) clamp(120px, 20vh, 260px);
  overflow-x: clip;              /* предметы у монитора не дают прокрутки вбок */
}

/* ---------- «Вам нужно это попробовать»: монитор ----------
   Монитор стоит ровно, лицом к зрителю. Объём — как у настоящего: корпус
   с фаской по контуру (верхнее ребро ловит свет, нижнее в тени), внутри
   ступенькой утоплена рамка, в ней ещё глубже — экран; рамки тонкие,
   снизу планка с надписью производителя. Все размеры — от ширины монитора (cqw), модель
   масштабируется целиком. */
.try { max-width: 1240px; margin: 0 auto; text-align: center; }
.try-title {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.032em;
}
.monitor {
  position: relative;
  container-type: inline-size;
  width: min(100%, 1120px);
  margin: clamp(48px, 7vw, 110px) auto 0;
}
/* свечение за монитором — он в небе */
.monitor::before {
  content: "";
  position: absolute;
  inset: -18% -14% -24%;
  background: radial-gradient(50% 44% at 50% 50%, rgba(47, 174, 154, .28), transparent 70%);
  pointer-events: none;
}

/* игровые предметы по бокам: слева клавиатура и мышь, справа геймпад.
   Парят в небе, краем уходят за монитор. Размеры — от ширины монитора;
   на узких экранах места по бокам нет — клавиатура и геймпад под монитором. */
.prop {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.prop-keyboard { width: 33cqw; left: -23cqw; top: -5cqw; }
.prop-mouse    { width: 13.5cqw; left: -17cqw; top: 36cqw; }
.prop-gamepad  { width: 30cqw; right: -26cqw; top: 15cqw; }
/* под монитором, рядом: клавиатура слева, геймпад справа; краем — под корпусом */
.is-medium .monitor { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.is-medium .mon { flex: 0 0 100%; }
.is-medium .prop { position: relative; order: 1; left: auto; right: auto; top: auto; }
.is-medium .prop-keyboard { width: 52cqw; margin: -2cqw 0 0 -3cqw; }
.is-medium .prop-gamepad { width: 40cqw; margin: 3cqw -3cqw 0 2cqw; }
.is-medium .prop-mouse { display: none; }

/* корпус: внешняя кромка с фаской */
.mon {
  --r: 1.1cqw;                   /* скругление углов корпуса */
  position: relative;
  z-index: 1;
  padding: .42cqw;               /* ширина фаски */
  border-radius: var(--r);
  background: linear-gradient(180deg,
    #3A524C 0%, #1E2E2A 1.2%,    /* верхнее ребро — на свету */
    #141F1C 50%,
    #0C1412 98.6%, #050908 100%);/* нижнее ребро — в тени */
  box-shadow:
    0 0 0 1px rgba(123, 242, 196, .20),             /* кромка */
    inset .2cqw 0 .2cqw -.1cqw rgba(255, 255, 255, .06),  /* левый край светлее */
    inset -.2cqw 0 .2cqw -.1cqw rgba(0, 0, 0, .45),       /* правый в тени */
    0 2.4cqw 5cqw rgba(2, 10, 9, .55);              /* тень корпуса */
}
/* рамка: на ступеньку ниже корпуса */
.mon-bezel {
  position: relative;
  padding: .7cqw .7cqw 2.1cqw;   /* тонкие рамки, снизу — планка с надписью */
  border-radius: calc(var(--r) * .75);
  background: linear-gradient(180deg, #0D1413, #0A0F0E 60%, #0C1211);
  box-shadow:
    inset 0 .22cqw .35cqw rgba(0, 0, 0, .7),        /* тень ступеньки сверху */
    inset 0 -1px 0 rgba(123, 242, 196, .14);        /* нижний край ступеньки на свету */
}
/* экран утоплен в рамку: тонкий чёрный зазор и тень от рамки */
.mon-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1375 / 789;      /* ровно как снимок — без обрезки; новый снимок → новые числа */
  overflow: hidden;
  border-radius: calc(var(--r) * .3);
  background: #151515;           /* фон приложения (GlitchColors.bg, тёмная тема) */
  box-shadow:
    0 0 0 .14cqw #030505,
    0 -.1cqw 0 .14cqw rgba(0, 0, 0, .6),
    0 .1cqw 0 .16cqw rgba(123, 242, 196, .07);
}
/* тень рамки на стекле сверху — экран глубже рамки */
.mon-screen::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 .3cqw .5cqw rgba(0, 0, 0, .45);
  pointer-events: none;
}
/* блик стекла — по диагонали, едва заметный, не мешает нажатиям */
.mon-glare {
  position: absolute; inset: .7cqw .7cqw 2.1cqw;
  border-radius: calc(var(--r) * .3);
  background: linear-gradient(115deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 32%, transparent 33%, transparent 100%);
  pointer-events: none;
}
/* надпись производителя на нижней планке — серый «металл», чуть вдавлен */
.mon-brand {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.1cqw;
  display: flex; align-items: center; justify-content: center;
  font-family: "Michroma", var(--font);
  font-size: .82cqw;
  font-style: normal;
  letter-spacing: .32em;
  padding-left: .32em;           /* разрядка не сдвигает надпись от центра */
  color: #7F8B88;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06);
  pointer-events: none;
  user-select: none;
}
/* снимок программы — экран точно его пропорций, ничего не срезается */
.screen-shot {
  display: block;
  width: 100%; height: 100%;
}

/* ---------- Подвал ----------
   Второй парящий остров во всю ширину (make_foot.py). Три части с одними
   долями ширины по краям: верх (SVG) → камень (тянется под ссылки) →
   неровный низ (SVG). Форма боков и место буквы — foot_island.css. */
.foot { position: relative; padding-bottom: clamp(60px, 10vw, 160px); }
.foot-top {
  position: relative;
  margin-top: 15%;               /* место над островом под букву */
  aspect-ratio: var(--top-ar);
  background: url("foot_top.svg") center top / 100% 100% no-repeat;
}
/* буква стоит на постаменте: низ — там, где его верх */
.foot-logo {
  position: absolute;
  left: 50%; bottom: var(--g-bottom);
  width: 19%;
  height: auto;
  transform: translate(-50%, 1.1%);   /* 1.1 % — прозрачный запас картинки под буквой */
  pointer-events: none;
  user-select: none;
}
/* середина — камень без рисунка, продолжает цвет низа верхней части */
.foot-rock {
  margin-top: -1px;
  background:
    repeating-linear-gradient(178deg, transparent 0 86px, rgba(1, 6, 5, .35) 86px 87.5px, transparent 87.5px 172px),
    linear-gradient(180deg, #05140F, #03100D);
  padding: 0 max(var(--gutter), calc(var(--rock-pad) + 2%)) 8px;
}
.foot-bottom {
  margin-top: -1px;
  aspect-ratio: var(--bottom-ar);
  background: url("foot_bottom.svg") center top / 100% 100% no-repeat;
}
.foot-inner {
  max-width: var(--width);
  margin: 0 auto;
  display: flex; justify-content: space-between; gap: 48px;
}
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; }
.foot-brand .brand img { border-radius: 10px; }
.foot-label {
  margin: 30px 0 10px;
  font-size: 14px; font-weight: 600;
  color: var(--text-soft);
}
.foot-lang {
  display: flex; align-items: center; justify-content: space-between;
  width: 220px; padding: 12px 16px;
  border: 0; border-radius: 10px;
  background: rgba(123, 242, 196, .08);
  color: var(--text);
  font: 600 15px var(--font);
  cursor: default;
}
.foot-social { display: flex; gap: 18px; align-items: center; }
.foot-social a { display: flex; color: var(--text); opacity: .86; transition: opacity .15s; }
.foot-social a:hover { opacity: 1; }

.foot-cols { display: flex; flex-wrap: wrap; min-width: 0; gap: 28px clamp(32px, 5vw, 88px); }   /* не помещаются — переносятся */
.foot-col { display: flex; flex-direction: column; gap: 12px; min-width: 130px; }
.foot-col h4 {
  margin: 0 0 4px;
  font-size: 14px; font-weight: 600;
  color: var(--emerald-soft);
}
.foot-col a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; opacity: .9; }
.foot-col a:hover { opacity: 1; text-decoration: underline; }
.foot-copy {
  max-width: var(--width);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(123, 242, 196, .14);
  font-size: 13.5px;
  color: var(--text-quiet);
}
.is-compact .foot-inner { flex-direction: column; }
.is-compact .foot-cols { flex-wrap: wrap; gap: 28px 40px; }

/* ---------- Документы (doc-*.html, пишет make_docs.py) ----------
   Документ читают, а не разглядывают: спокойное небо без сцен, текст
   узкой колонкой на тёмном стекле, оглавление сбоку едет за текстом. */
.doc-world .world-bg { background: none; }   /* небо — фон окна (body), см. «Мир страницы» */
.doc-intro {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) var(--gutter) 0;
  text-align: center;
}
.doc-intro h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.doc-date { margin: 18px 0 0; font-size: 15.5px; color: var(--text-soft); }
.doc-tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 34px; padding: 6px;
  border-radius: 999px;
  background: rgba(6, 28, 24, .62);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .14);
  backdrop-filter: blur(10px);
}
.doc-tab {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  color: var(--text-soft);
  transition: background .15s, color .15s;
}
.doc-tab:hover { color: var(--text); background: rgba(123, 242, 196, .08); }
.doc-tab.is-on { background: #fff; color: var(--ink); }

.doc-layout {
  max-width: 1180px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* оглавление */
.doc-toc {
  position: sticky; top: 24px;
  max-height: calc(100vh - 48px);
  overflow: auto;
}
.doc-toc summary {
  list-style: none;
  margin-bottom: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--emerald-soft);
  pointer-events: none;          /* на широком экране всегда раскрыто */
}
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc ol { margin: 0; padding: 0; list-style: none; }
.doc-toc a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid rgba(123, 242, 196, .14);
  font-size: 14.5px; line-height: 1.35;
  color: var(--text-soft);
  transition: color .15s, border-color .15s;
}
.doc-toc a:hover { color: var(--text); }
.doc-toc a.is-on { color: var(--text); border-left-color: var(--emerald-soft); }

/* текст документа */
.doc-text {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 22px;
  background: rgba(4, 20, 18, .78);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .12);
  backdrop-filter: blur(12px);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text-soft);
}
.doc-text > :first-child { margin-top: 0; }
.doc-text h2 {
  margin: 2.2em 0 .7em;
  scroll-margin-top: 24px;
  font-size: 25px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}
.doc-text h3 { margin: 1.6em 0 .5em; font-size: 19px; font-weight: 700; color: var(--text); }
.doc-text p { margin: 0 0 1em; }
.doc-text ul, .doc-text ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.doc-text li { margin: .35em 0; }
.doc-text li::marker { color: var(--emerald-soft); }
.doc-text strong { color: var(--text); font-weight: 600; }
.doc-text a { color: var(--emerald-soft); text-decoration: underline; text-underline-offset: 3px; }
.doc-contact {
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  margin: 2.6em 0 0; padding-top: 1.6em;
  border-top: 1px solid rgba(123, 242, 196, .16);
}
.doc-contact dt { font-size: 14px; color: var(--text-quiet); }
.doc-contact dd { margin: 2px 0 0; font-weight: 600; color: var(--text); }
/* у документов подвал-остров ближе к тексту */
.doc-world .foot-top { margin-top: clamp(160px, 20%, 380px); }

.is-compact .doc-layout { grid-template-columns: 1fr; gap: 20px; }
.is-compact .doc-toc {
  position: static; max-height: none;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(4, 20, 18, .78);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .12);
}
.is-compact .doc-toc summary { margin: 0; pointer-events: auto; cursor: pointer; }
.is-compact .doc-toc[open] summary { margin-bottom: 10px; }
.is-compact .doc-tabs { border-radius: 20px; }

/* ---------- «О нас» (about.html, исходник about_src.html) ----------
   Страница-рассказ: крупная миссия, карточки, лента пути, большая цифра
   команды. Небо — как у документов. Без шаблонных приёмов нейросетей:
   значков в квадратиках, плашек-«таблеток», надписей «01 — РАЗДЕЛ»,
   переливов на тексте и цветных пятен в углах (требование владельца). */
.ab-intro {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(60px, 12vh, 150px) var(--gutter) clamp(40px, 8vh, 100px);
  text-align: center;
}
.ab-intro h1 {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 104px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.ab-lead {
  max-width: 700px;
  margin: 28px auto 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--text-soft);
}
.ab-prop { position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none; }
.ab-intro > :not(.ab-prop) { position: relative; z-index: 1; }   /* текст — поверх предметов */
.ab-prop-l { width: clamp(180px, 20vw, 340px); left: -14%; top: 26%; }   /* не заходит на блок миссии */
.ab-prop-r { width: clamp(200px, 23vw, 380px); right: -16%; top: 6%; }
.is-medium .ab-prop { display: none; }

.ab-sec {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 110px) var(--gutter) 0;
}
.ab-h2 {
  margin: 0 0 28px;
  max-width: 820px;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.ab-p { margin: 0 0 28px; max-width: 640px; font-size: 17.5px; line-height: 1.65; color: var(--text-soft); }

/* миссия — крупная цитата с изумрудной чертой */
.ab-mission blockquote {
  margin: 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 3px solid var(--emerald-soft);
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.ab-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px;
  margin-top: 36px; padding-left: clamp(23px, calc(3vw + 3px), 43px);
}
.ab-cols p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-soft); }
.ab-cols b { color: var(--text); }

/* карточки — тёмное стекло, как текст документов */
.ab-cards { display: grid; gap: 20px; }
.ab-cards-2 { grid-template-columns: 1fr 1fr; }
.ab-cards-3 { grid-template-columns: repeat(3, 1fr); }
.ab-card {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 22px;
  background: rgba(4, 20, 18, .78);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .12);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.ab-card h3 { margin: 0 0 10px; font-size: 23px; font-weight: 700; letter-spacing: -0.015em; }
.ab-card p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-soft); }
/* состояние работы — обычной строкой, не плашкой */
.ab-state { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--emerald-soft); }

/* путь — вертикальная светящаяся лента с точками */
.ab-path {
  position: relative;
  margin: 8px 0 0; padding: 0 0 0 44px;
  list-style: none;
  display: grid; gap: 34px;
  max-width: 760px;
}
.ab-path::before {
  content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 1px;
  background: rgba(123, 242, 196, .35);
}
.ab-path li { position: relative; }
.ab-path li::before {
  content: ""; position: absolute; left: -31px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--emerald-soft);
}
.ab-path li.is-next::before { background: transparent; box-shadow: inset 0 0 0 2px var(--emerald-soft); }
.ab-when { font-size: 14px; font-weight: 600; color: var(--emerald-soft); }
.ab-path h3 { margin: 6px 0 6px; font-size: 21px; font-weight: 700; }
.ab-path p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-soft); }

/* команда — огромная цифра */
.ab-team { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-big {
  font-size: clamp(160px, 20vw, 300px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -0.06em;
  color: var(--text);
}

/* «Напишите нам» — широкая карточка */
.ab-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 26px;
  background: rgba(4, 20, 18, .8);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .14);
}
.ab-contact .ab-h2 { margin-bottom: 12px; }
.ab-contact .ab-p { margin: 0; }

.is-compact .ab-cols, .is-compact .ab-cards-2, .is-compact .ab-cards-3 { grid-template-columns: 1fr; }
.is-compact .ab-team { grid-template-columns: 1fr; }
.is-compact .ab-contact { flex-direction: column; align-items: flex-start; }

/* ---------- «Ответы на вопросы» (faq.html, исходник faq_src.html) ----------
   Слева заголовок, поиск и разделы (едут за списком), справа вопросы
   группами. Ответ раскрывается нажатием — обычный <details>. */
.faq {
  max-width: 1180px;
  margin: clamp(40px, 8vh, 100px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-side { position: sticky; top: 28px; }
.faq-side h1 {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.faq-lead { margin: 18px 0 28px; font-size: 17.5px; line-height: 1.55; color: var(--text-soft); }
.faq-search {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(4, 20, 18, .78);
  box-shadow: inset 0 0 0 1px rgba(123, 242, 196, .16);
  color: var(--text-quiet);
}
.faq-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--emerald-soft); }
.faq-search input {
  flex: 1; min-width: 0;
  padding: 14px 0;
  border: 0; outline: 0; background: none;
  font: 500 16px var(--font); color: var(--text);
}
.faq-search input::placeholder { color: var(--text-quiet); }
.faq-nav { display: flex; flex-direction: column; margin-top: 26px; }
.faq-nav a {
  padding: 8px 0;
  font-size: 16px; font-weight: 500;
  color: var(--text-soft);
  transition: color .15s;
}
.faq-nav a:hover { color: var(--text); }

.faq-group { scroll-margin-top: 28px; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--emerald-soft); }
.qa { border-bottom: 1px solid rgba(123, 242, 196, .16); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
  list-style: none;
  font-size: 18.5px; font-weight: 600; line-height: 1.35;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
/* плюс поворачивается в крестик */
.qa summary::after {
  content: "";
  flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  opacity: .8;
  transition: transform .2s;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: #fff; }
.qa p { margin: -6px 0 24px; max-width: 640px; font-size: 16.5px; line-height: 1.65; color: var(--text-soft); }
.qa a { color: var(--emerald-soft); text-decoration: underline; text-underline-offset: 3px; }
.faq-empty { margin: 0; font-size: 17px; color: var(--text-soft); }

.faq-help {
  max-width: 720px;
  margin: clamp(90px, 14vh, 160px) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
.faq-help h2 {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.faq-help p { margin: 16px 0 28px; font-size: 18px; color: var(--text-soft); }

.is-compact .faq { grid-template-columns: 1fr; }
.is-compact .faq-side { position: static; }
.is-compact .faq-nav { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- «Написать нам» (concept.js, блок 6) ----------
   Окно по центру, тем же цветом, что выпадающие панели шапки. */
.mail-dlg {
  width: min(420px, calc(100% - 32px));
  padding: 28px 26px 26px;
  border: 0;
  border-radius: 28px;
  background: #17594E;
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.mail-dlg::backdrop { background: rgba(2, 10, 9, .6); }
.is-locked { overflow: hidden; }   /* открыто окно — страница под ним стоит */
.mail-dlg h2 { margin: 0 0 18px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.mail-close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: none; color: var(--text);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.mail-close:hover { background: rgba(255, 255, 255, .1); }
.mail-addr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  background: rgba(4, 20, 18, .45);
}
.mail-addr span { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.mail-addr .btn { flex: none; padding: 10px 16px; font-size: 14px; }
.mail-label { margin: 20px 0 6px; font-size: 14px; font-weight: 500; color: rgba(226, 246, 240, .62); }
.mail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mail-list a, .mail-app {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  font-size: 15px; font-weight: 600; color: #fff;
}
.mail-list a:hover, .mail-app:hover { background: rgba(255, 255, 255, .16); }
.mail-app { margin-top: 8px; text-align: center; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }