/* Ashen Rift landing v4 (P5, #64): короткая страница на 4–5 экранов — hero, почему удобно, что нового, как начать,
   вопросы, первый шаг. Спокойный тёплый вечер, крупный читаемый текст.
   Основа — визуальный язык лаунчера v3: визуальный язык лаунчера v3 (золото-бронзовая филигрань, самоцветы, сияние, цитадель, пепел).
   Все изображения — собственные векторы (inline SVG и data:-SVG ниже, общие с лаунчером). Без внешних ресурсов. */
:root {
  --night: #070a1c;
  --ice: #7fd3ff;
  --frost: #e6f2fc;
  --ash: #b3bccb;
  --ember: #ff6a3d;
  --gold-1: #fff1c1;
  --gold-2: #e9bd5c;
  --bronze: #a8701f;
  --teal: #3ff0c8;
  --violet: #a77bff;
  --glass: rgba(9, 13, 36, .84);
  --ornate-ring: inset 0 0 0 1px rgba(233, 189, 92, .65), inset 0 0 0 3px rgba(4, 6, 16, .7),
                 inset 0 0 0 4px rgba(63, 240, 200, .16), 0 0 22px rgba(63, 240, 200, .1), 0 14px 34px rgba(0, 0, 0, .6);
  /* Шрифты свои (fonts.css); без них — системный стек, без сторонних хостов (#106). */
  --head: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --lore: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  /* Шкала типографики (#64, «текст в заголовках кривоват»). Только начертания из fonts.css:
     Cormorant 500 (крупные заголовки, без синтетического жирного), Inter 400/600 (подзаголовки карточек,
     метки, ссылки). Cinzel без кириллицы — только для латиницы и цифр. */
  --fs-display: clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2: clamp(2rem, 3.9vw, 2.75rem);
  --fs-h3: 1.2rem;
  --fs-eyebrow: .76rem;
  --fs-link: .92rem;
  --lh-display: 1.1;
  --lh-h3: 1.3;
  --w-display: 500;
  --w-h3: 600;
  --ls-eyebrow: .14em;
  --eyebrow-color: #d8b46a;
  --h3-color: #fff1c1;
  --card-pad: 24px;
  /* Шкала отступов 8 px (docs/research/LANDING_UX_GUIDE.md, A6): внутри группы меньше, между группами больше. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --corner-tl: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmMWMxIi8+PHN0b3Agb2Zmc2V0PSIuNCIgc3RvcC1jb2xvcj0iI2UyYjQ1NiIvPjxzdG9wIG9mZnNldD0iLjc1IiBzdG9wLWNvbG9yPSIjYTg3MDFmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmU0NjE0Ii8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImoiIGN4PSIuMzUiIGN5PSIuMyIgcj0iLjciPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2U4ZmZmOSIvPjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjM2ZmMGM4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMGI1YTUyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTIgNDZWMTJRMiAyIDEyIDJINDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTggMzZWMTVROCA4IDE1IDhIMzYiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48cGF0aCBkPSJNMTQgMjRxMC0xMCAxMC0xMHEtNSA0LTIgOXEtNS0zLTggMXoiIGZpbGw9InVybCgjZykiLz48cGF0aCBkPSJNMjQgNHE2IDQgMTIgME00IDI0cTQgNiAwIDEyIiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHBhdGggZD0iTTkgMi41IDE1LjUgOSA5IDE1LjUgMi41IDlaIiBmaWxsPSIjMWExMDA2IiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHBhdGggZD0iTTkgNSAxMyA5IDkgMTMgNSA5WiIgZmlsbD0idXJsKCNqKSIvPjwvc3ZnPg==);
  --corner-tr: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmMWMxIi8+PHN0b3Agb2Zmc2V0PSIuNCIgc3RvcC1jb2xvcj0iI2UyYjQ1NiIvPjxzdG9wIG9mZnNldD0iLjc1IiBzdG9wLWNvbG9yPSIjYTg3MDFmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmU0NjE0Ii8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImoiIGN4PSIuMzUiIGN5PSIuMyIgcj0iLjciPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2U4ZmZmOSIvPjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjM2ZmMGM4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMGI1YTUyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNDggMCkiPjxwYXRoIGQ9Ik0yIDQ2VjEyUTIgMiAxMiAySDQ2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMyIvPjxwYXRoIGQ9Ik04IDM2VjE1UTggOCAxNSA4SDM2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMS4yIi8+PHBhdGggZD0iTTE0IDI0cTAtMTAgMTAtMTBxLTUgNC0yIDlxLTUtMy04IDF6IiBmaWxsPSJ1cmwoI2cpIi8+PHBhdGggZD0iTTI0IDRxNiA0IDEyIDBNNCAyNHE0IDYgMCAxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjxwYXRoIGQ9Ik05IDIuNSAxNS41IDkgOSAxNS41IDIuNSA5WiIgZmlsbD0iIzFhMTAwNiIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjxwYXRoIGQ9Ik05IDUgMTMgOSA5IDEzIDUgOVoiIGZpbGw9InVybCgjaikiLz48L2c+PC9zdmc+);
  --corner-bl: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmMWMxIi8+PHN0b3Agb2Zmc2V0PSIuNCIgc3RvcC1jb2xvcj0iI2UyYjQ1NiIvPjxzdG9wIG9mZnNldD0iLjc1IiBzdG9wLWNvbG9yPSIjYTg3MDFmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmU0NjE0Ii8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImoiIGN4PSIuMzUiIGN5PSIuMyIgcj0iLjciPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2U4ZmZmOSIvPjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjM2ZmMGM4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMGI1YTUyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA0OCkiPjxwYXRoIGQ9Ik0yIDQ2VjEyUTIgMiAxMiAySDQ2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMyIvPjxwYXRoIGQ9Ik04IDM2VjE1UTggOCAxNSA4SDM2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMS4yIi8+PHBhdGggZD0iTTE0IDI0cTAtMTAgMTAtMTBxLTUgNC0yIDlxLTUtMy04IDF6IiBmaWxsPSJ1cmwoI2cpIi8+PHBhdGggZD0iTTI0IDRxNiA0IDEyIDBNNCAyNHE0IDYgMCAxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjxwYXRoIGQ9Ik05IDIuNSAxNS41IDkgOSAxNS41IDIuNSA5WiIgZmlsbD0iIzFhMTAwNiIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjxwYXRoIGQ9Ik05IDUgMTMgOSA5IDEzIDUgOVoiIGZpbGw9InVybCgjaikiLz48L2c+PC9zdmc+);
  --corner-br: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmMWMxIi8+PHN0b3Agb2Zmc2V0PSIuNCIgc3RvcC1jb2xvcj0iI2UyYjQ1NiIvPjxzdG9wIG9mZnNldD0iLjc1IiBzdG9wLWNvbG9yPSIjYTg3MDFmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNmU0NjE0Ii8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImoiIGN4PSIuMzUiIGN5PSIuMyIgcj0iLjciPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2U4ZmZmOSIvPjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjM2ZmMGM4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMGI1YTUyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIC0xIDQ4IDQ4KSI+PHBhdGggZD0iTTIgNDZWMTJRMiAyIDEyIDJINDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTggMzZWMTVROCA4IDE1IDhIMzYiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48cGF0aCBkPSJNMTQgMjRxMC0xMCAxMC0xMHEtNSA0LTIgOXEtNS0zLTggMXoiIGZpbGw9InVybCgjZykiLz48cGF0aCBkPSJNMjQgNHE2IDQgMTIgME00IDI0cTQgNiAwIDEyIiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHBhdGggZD0iTTkgMi41IDE1LjUgOSA5IDE1LjUgMi41IDlaIiBmaWxsPSIjMWExMDA2IiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHBhdGggZD0iTTkgNSAxMyA5IDkgMTMgNSA5WiIgZmlsbD0idXJsKCNqKSIvPjwvZz48L3N2Zz4=);
  --gem-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTYiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZjFjMSIvPjxzdG9wIG9mZnNldD0iLjQiIHN0b3AtY29sb3I9IiNlMmI0NTYiLz48c3RvcCBvZmZzZXQ9Ii43NSIgc3RvcC1jb2xvcj0iI2E4NzAxZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzZlNDYxNCIvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJqIiBjeD0iLjM1IiBjeT0iLjMiIHI9Ii43Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlOGZmZjkiLz48c3RvcCBvZmZzZXQ9Ii40NSIgc3RvcC1jb2xvcj0iIzNmZjBjOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBiNWE1MiIvPjwvcmFkaWFsR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJoIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTJiNDU2IiBzdG9wLW9wYWNpdHk9IjAiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjZTJiNDU2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTJiNDU2IiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iciIgY3g9Ii4zNSIgY3k9Ii4zIiByPSIuNyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZlMGQwIi8+PHN0b3Agb2Zmc2V0PSIuNDUiIHN0b3AtY29sb3I9IiNmZjVhM2QiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2ZTBkMTAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNMCA4SDExOE0xODIgOEgzMDAiIHN0cm9rZT0idXJsKCNoKSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBkPSJNMTE4IDggMTMyIDMgMTQwIDggMTMyIDEzWk0xODIgOCAxNjggMyAxNjAgOCAxNjggMTNaIiBmaWxsPSJ1cmwoI2cpIi8+PHBhdGggZD0iTTE1MCAwIDE2MCA4IDE1MCAxNiAxNDAgOFoiIGZpbGw9IiMxYTEwMDYiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48cGF0aCBkPSJNMTUwIDMgMTU3IDggMTUwIDEzIDE0MyA4WiIgZmlsbD0idXJsKCNyKSIvPjwvc3ZnPg==);
  --rune-band: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAxMiI+PHBhdGggZD0iTTAgNkg2MCIgc3Ryb2tlPSIjM2ZmMGM4IiBzdHJva2Utb3BhY2l0eT0iLjM1IiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNMTAgMnY4TTEwIDRsNC0yTTEwIDdsNCAzTTMwIDJsMyA0LTMgNC0zLTR6TTQ4IDJ2OE00NSA0aDZNNDUgOGg2IiBzdHJva2U9IiM1ZmQ5ZmYiIHN0cm9rZS13aWR0aD0iMS4xIiBmaWxsPSJub25lIiBzdHJva2Utb3BhY2l0eT0iLjgiLz48L3N2Zz4=);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; color: var(--frost); font: 17px/1.65 var(--body); background-color: var(--night);
  background-image: radial-gradient(ellipse 70% 600px at 50% 1300px, rgba(63, 240, 200, .1), transparent),
                    radial-gradient(ellipse 50% 500px at 10% 2300px, rgba(167, 123, 255, .14), transparent),
                    radial-gradient(ellipse 50% 500px at 90% 3300px, rgba(255, 106, 61, .1), transparent),
                    linear-gradient(180deg, #0b1236 0, var(--night) 900px, #0a0f2a 100%); }
a { color: #9fe0ff; }
a:hover { color: var(--gold-1); }
h1, h2, h3 { font-family: var(--head); letter-spacing: .02em; text-wrap: balance; }
/* h1 владельца: balance перенёс бы «—» в начало строки (ошибка русской типографики). Перенос в h1 исправит только
   неразрывный пробел перед тире — это правка текста, предложена владельцу (LANDING_UX_GUIDE, A1). */
.promise { text-wrap: wrap; }
/* Без одиночных слов в последней строке абзацев (A7); браузеры без поддержки просто игнорируют. */
p, .why span, summary { text-wrap: pretty; }
/* Единые роли: подзаголовок карточки (h3-уровень), вторичная ссылка-кнопка. */
.card h3, .why b { font: var(--w-h3) var(--fs-h3)/var(--lh-h3) var(--body); letter-spacing: -.005em;
  color: var(--h3-color); text-wrap: balance; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.muted { color: var(--ash); }
.small { font-size: .85rem; }

.proto-banner { position: relative; z-index: 5; background: linear-gradient(90deg, #6a2410, #a8461a, #6a2410); color: #fff4e6;
  text-align: center; padding: 6px 16px; font-weight: 600; font-size: .9rem; border-bottom: 1px solid #ffb47a; }

/* --- Шапка: бронзовая кромка и руническая лента --- */
.site-header { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px 24px; padding: 10px max(16px, calc(50% - 600px)); background: linear-gradient(180deg, rgba(4, 6, 18, .97), rgba(6, 8, 24, .9));
  border-bottom: 1px solid #7a5420; box-shadow: 0 1px 0 rgba(233, 189, 92, .25), 0 8px 24px rgba(0, 0, 0, .5); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px; background: var(--rune-band) repeat-x center / auto 6px; opacity: .7; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(255, 106, 61, .6)); }
.wordmark { font: 800 1.3rem var(--head); letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(180deg, #fffbe8, var(--gold-2) 60%, #c08a36); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
nav a { position: relative; text-decoration: none; color: #d6deea; font: 500 .95rem var(--body); padding: 6px 0; }
nav a:not(.btn):hover { color: var(--gold-1); text-shadow: 0 0 12px rgba(233, 189, 92, .7); }
nav a:not(.btn):hover::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -8px; height: 10px; background: var(--gem-divider) center / auto 10px no-repeat; }

/* --- Кнопки (как «Играть» в лаунчере) --- */
.btn { position: relative; display: inline-block; overflow: hidden; padding: 12px 28px; border-radius: 4px; cursor: pointer;
  font: 700 1rem var(--body); letter-spacing: .01em; text-decoration: none; color: #2b1404;
  border: 1px solid #ffe2b0; text-shadow: 0 1px 0 rgba(255, 240, 200, .7);
  background: linear-gradient(180deg, #ffe4b0 0%, #f6b066 40%, #e0802e 75%, #c4621f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 250, 220, .8), inset 0 -3px 0 rgba(60, 20, 0, .5), 0 0 0 3px #160c04, 0 0 0 4px #c9963e, 0 0 24px rgba(255, 138, 61, .5); }
.btn:hover { filter: brightness(1.1); color: #2b1404; }
nav .btn { color: #2b1404; padding: 8px 18px; font-size: .9rem; }
.btn-play { padding: 16px 34px; font-size: 1.1rem; }
.btn-ghost { color: var(--gold-1); text-shadow: none; background: linear-gradient(180deg, rgba(23, 50, 92, .9), rgba(8, 10, 30, .95));
  border-color: #c9963e; box-shadow: inset 0 0 0 1px rgba(63, 240, 200, .25), 0 0 0 3px #160c04, 0 0 0 4px #7a5420, 0 0 20px rgba(63, 240, 200, .2); }
.btn-ghost:hover { color: #fff; }
.btn:disabled, fieldset:disabled .btn { filter: grayscale(1); cursor: not-allowed; animation: none; color: #e4dfd7; text-shadow: none;
  background: linear-gradient(180deg, #45423e, #2e2c29); border-color: #6a665f; box-shadow: 0 0 0 3px #160c04, 0 0 0 4px #4a4741; }

/* --- Филигранные рамки: золотое кольцо + угловые накладки с самоцветами --- */
.ornate { position: relative; border: 1px solid #7a5420; border-radius: 4px; box-shadow: var(--ornate-ring); }
.ornate::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: var(--corner-tl) left top / 34px no-repeat, var(--corner-tr) right top / 34px no-repeat,
              var(--corner-bl) left bottom / 34px no-repeat, var(--corner-br) right bottom / 34px no-repeat; }
.panel { background: linear-gradient(180deg, rgba(23, 50, 92, .55), var(--glass) 45%); padding: 28px 32px; }
.gem-rule { height: 16px; margin: 12px auto; max-width: 320px; background: var(--gem-divider) center / auto 16px no-repeat; }

/* --- Hero: зимний вечер у костра. Текст слева, костёр справа; на телефоне текст сверху, костёр под ним --- */
.hero { position: relative; overflow: hidden; min-height: min(86vh, 820px); display: flex; align-items: center; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #070a1d; }
/* Слои арта (web/landing/tools/build_hero.py): общий viewBox, статичные фильтры рисуются один раз,
   движение — только transform/opacity целых слоёв (композитор) и мелкие фигуры пламени без фильтров. */
.stage { position: absolute; inset: 0; }
.pl { position: absolute; top: -3%; left: -3%; width: 106%; height: 106%; display: block; will-change: transform; }
.l-aur { mix-blend-mode: screen; }
.aur { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.aur-a { animation: aur-a 38s ease-in-out infinite alternate; transform-origin: 50% 32%; }
.aur-b { animation: aur-b 47s ease-in-out -12s infinite alternate; transform-origin: 60% 36%; }
@keyframes aur-a { from { opacity: .72; transform: translateX(-26px) skewX(-3deg) scaleY(.96); } to { opacity: 1; transform: translateX(22px) skewX(2deg) scaleY(1.05); } }
@keyframes aur-b { from { opacity: .5; transform: translateX(30px) skewX(3deg) scaleY(1.04); } to { opacity: .9; transform: translateX(-18px) skewX(-2deg) scaleY(.95); } }
.tw { animation: twinkle 4.6s ease-in-out infinite alternate; }
.tw1 { animation-duration: 6.2s; animation-delay: -2s; }
.tw2 { animation-duration: 3.4s; animation-delay: -1s; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.l-glow { mix-blend-mode: screen; animation: warm 3.2s ease-in-out infinite alternate; }
@keyframes warm { 0% { opacity: .82; } 40% { opacity: .95; } 55% { opacity: .86; } 100% { opacity: 1; } }
.fl { transform-box: fill-box; transform-origin: 50% 100%; }
.f1 { animation: flick-a 1.9s ease-in-out infinite alternate; }
.f2 { animation: flick-b 1.3s ease-in-out -.4s infinite alternate; }
.f3 { animation: flick-a 1.1s ease-in-out -.7s infinite alternate-reverse; }
.f4 { animation: flick-b .9s ease-in-out infinite alternate; }
@keyframes flick-a { 0% { transform: scale(1, .94) skewX(2deg); } 50% { transform: scale(.96, 1.06) skewX(-3deg); } 100% { transform: scale(1.03, .98) skewX(3deg); } }
@keyframes flick-b { 0% { transform: scale(.97, 1.04) skewX(-2deg); } 60% { transform: scale(1.03, .93) skewX(3deg); } 100% { transform: scale(1, 1.08) skewX(-1deg); } }
.smoke, .steam { transform-box: fill-box; transform-origin: 50% 100%; animation: smoke 9s ease-in-out infinite alternate; }
.steam { animation-duration: 5s; }
@keyframes smoke { from { transform: skewX(5deg) scaleY(.94); opacity: .7; } to { transform: skewX(-7deg) scaleY(1.04); opacity: 1; } }
.l-grain { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; pointer-events: none; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 26, .88) 0, rgba(7, 9, 26, .62) 42%, transparent 66%),
              linear-gradient(180deg, transparent 75%, var(--night) 100%); }
.hero-vignette::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 48% 62% at 22% 50%, rgba(7, 9, 26, .55), transparent 75%); }
.hero-content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 56px 16px 72px; }
.hero-plate { max-width: 640px; }
.promise { margin: 0 0 16px; font: var(--w-display) var(--fs-display)/var(--lh-display) var(--lore); color: #fff8ea; letter-spacing: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.lead { margin: 0 0 var(--space-3); max-width: 580px; font: 400 1.15rem/1.6 var(--body); color: #e8ecf4; }
.chips { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chips li { padding: 7px 14px 7px 32px; position: relative; border-radius: 999px; font: 600 .95rem var(--body); color: #fff1dc;
  background: rgba(40, 24, 18, .72); border: 1px solid rgba(255, 179, 92, .55); }
.chips li::before { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%;
  background: #ffb35c; box-shadow: 0 0 8px rgba(255, 179, 92, .8); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); }
.compat { margin: 0; font-size: .88rem; color: #c3ccda; }

/* --- Почему здесь удобно: сетка 2×2 до 960 px — строка 45–55 символов (A4), по одной мысли --- */
.why { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.why li { padding: var(--space-3); background: linear-gradient(180deg, rgba(50, 34, 40, .6), var(--glass) 60%); }
.why b { display: block; margin-bottom: var(--space-1); color: #ffd9a8; }
.why span { color: #dde3ee; font-size: .97rem; line-height: 1.5; }

/* --- Секции: короткая страница (P5 решает меньше чем за минуту) --- */
.section { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-2) var(--space-1); }
.section-tight { padding-top: var(--space-5); }
.title { margin: 0 0 var(--space-4); text-align: center; font: var(--w-display) var(--fs-h2)/1.15 var(--lore); letter-spacing: .005em; color: var(--gold-1);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.title::after { content: ""; display: block; height: 16px; margin: 10px auto 0; max-width: 320px; background: var(--gem-divider) center / auto 16px no-repeat; }
.sub { text-align: center; max-width: 680px; margin: calc(-1 * var(--space-2)) auto var(--space-3); color: #d6deea; font: 400 1.02rem/1.6 var(--body); }

/* --- Что нового: 3 компактные карточки, одно предложение --- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.soon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Карточки не кликабельны — без подъёма при наведении (A9). */
.card { overflow: hidden; background: linear-gradient(180deg, rgba(23, 50, 92, .45), var(--glass) 55%); }
.soon { padding: 4px 0 2px; border-top: 2px solid #c6a8ff; }
.card h3 { margin: var(--space-3) var(--card-pad) var(--space-1); }
.card p { margin: 0 var(--card-pad) var(--space-3); color: #d6deea; font-size: .97rem; line-height: 1.5; }

/* --- Как начать: шаги + загрузка слева, настоящее окно лаунчера справа, всё в одной секции --- */
.start-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.55fr); gap: var(--space-4); align-items: start; }
.start-side { display: grid; gap: var(--space-3); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { position: relative; padding: 2px 0 0 54px; min-height: 40px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center;
  font: 800 1.1rem var(--head); color: #2b1404; border-radius: 50%; border: 2px solid #ffe2b0;
  background: radial-gradient(circle at 35% 30%, #fff1c1, #e9bd5c 55%, #8a5a1c); box-shadow: 0 0 0 2px #160c04, 0 0 0 3px #c9963e; }
.steps b { display: block; font: var(--w-h3) 1.05rem/1.3 var(--body); color: var(--h3-color); }
.steps span { color: #d6deea; font-size: .95rem; }
.preview { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.preview-win { overflow: hidden; border-radius: 8px; background: #05060f;
  box-shadow: var(--ornate-ring), 0 30px 60px rgba(0, 0, 0, .65), 0 0 60px rgba(63, 240, 200, .12); }
.preview-chrome { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 16px 0 30px;
  background: linear-gradient(180deg, #1a2030, #10141f); border-bottom: 1px solid rgba(233, 189, 92, .35); }
.preview-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #3a4458; }
.preview-chrome span { margin-left: 10px; font: 500 .78rem var(--body); color: #9aa3b5; }
.preview-viewport { position: relative; aspect-ratio: 1180 / 780; overflow: hidden; background: #0b1320; }
.preview-frame { position: absolute; left: 0; top: 0; width: 1180px; height: 780px; border: 0; transform-origin: 0 0;
  pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.preview-viewport.ready .preview-frame { opacity: 1; }
.preview-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px;
  text-align: center; color: var(--ash); font-size: .95rem;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(63, 240, 200, .12), transparent 70%), linear-gradient(180deg, #0f1640, #0b1320); }
.preview-fallback svg { width: 56px; height: 56px; }
.preview-viewport.ready .preview-fallback { visibility: hidden; }
.preview figcaption { font-size: .88rem; color: var(--ash); text-align: center; }
.launcher-panel { display: grid; gap: 14px; padding: 22px 24px; scroll-margin-top: 90px; }
.launcher-panel > * { margin: 0; }
.download { display: grid; gap: 8px; }
.download p { margin: 0; }
#launcher-none { display: grid; gap: 8px; }
.btn-wide { display: block; width: 100%; text-align: center; }
.download-state { font-size: .88rem; color: var(--ash); text-align: center; }
.download-facts { font-size: .92rem; color: #cfd8e4; text-align: center; letter-spacing: .02em; }
.byo { padding: 10px 12px; font-size: .92rem; color: #c9d3e0; border-radius: 4px; border: 1px solid rgba(127, 211, 255, .22); background: rgba(127, 211, 255, .06); }
.byo b { color: #dceefb; }
.verify { border-bottom: 0; border-top: 1px solid rgba(233, 189, 92, .2); }
.verify summary { padding: 10px 30px 2px 0; font: 600 .9rem var(--body); color: #9fe0ff; }
.verify summary::after { width: 9px; height: 9px; margin-top: -2px; }
.verify .launcher-meta { margin: 10px 0 8px; font-size: .88rem; }
.launcher-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.launcher-meta dt { color: var(--ash); }
.launcher-meta dd { margin: 0; word-break: break-all; }
code { font-size: .85em; color: #cfe9ff; }

/* --- FAQ: 5 главных возражений, свёрнуты --- */
.faq { max-width: 860px; margin: 0 auto; padding: 8px 30px; }
details { border-bottom: 1px solid rgba(233, 189, 92, .25); }
details:last-child { border-bottom: 0; }
summary { cursor: pointer; list-style: none; position: relative; padding: 14px 34px 14px 0; font: 600 1.06rem var(--body); color: var(--gold-1); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; transform: rotate(45deg);
  border: 2px solid var(--gold-2); background: radial-gradient(circle at 35% 30%, #e8fff9, var(--teal) 50%, #0b5a52); transition: transform .2s; }
details[open] summary::after { transform: rotate(225deg); background: radial-gradient(circle at 35% 30%, #ffe0d0, #ff5a3d 50%, #6e0d10); }
details p { margin: 0 0 16px; color: #d6deea; }

/* --- Первый шаг: финальный призыв и регистрация по инвайту в одном блоке --- */
.final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center;
  max-width: 1100px; margin: 72px auto 0; padding: 34px 36px; overflow: hidden;
  background: radial-gradient(ellipse at 20% 120%, rgba(255, 106, 61, .3), transparent 60%), radial-gradient(ellipse at 80% -20%, rgba(63, 240, 200, .2), transparent 60%),
              linear-gradient(180deg, #121a48, #0a0f2a); }
.final-copy > * { margin: 0 0 12px; }
.final h2 { font: var(--w-display) var(--fs-h2)/1.15 var(--lore); color: var(--gold-1); }
.final-copy > p:first-of-type { color: #e8ecf4; font: 400 1.08rem/1.6 var(--body); }
.final-cta { margin: 18px 0 16px; }
.register fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.register legend { font: var(--w-h3) 1.02rem/1.3 var(--body); color: var(--gold-2); margin-bottom: 8px; }
.register label { display: grid; gap: 4px; font-size: .9rem; color: #d6deea; }
.register .wide, .register button { grid-column: 1 / -1; }
.register input:not([type=checkbox]) { padding: 10px 12px; font: inherit; color: var(--frost); background: rgba(6, 4, 18, .85);
  border: 1px solid #7a5420; border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.register .consent { display: block; line-height: 1.5; font-size: .86rem; }
.register button { justify-self: start; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#register-note { padding: 10px 12px; border: 1px solid rgba(233, 189, 92, .35); background: rgba(6, 4, 20, .6); color: var(--frost); }

/* --- Статус мира: маленькая плашка в шапке (только «в сети» / «не в сети», без счётчиков) --- */
.realm-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font: 500 .85rem var(--body); color: #d6deea;
  border: 1px solid rgba(233, 189, 92, .35); background: rgba(6, 4, 20, .6); }
.realm-pill strong { margin-left: 4px; font-weight: 600; color: var(--gold-1); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ash); margin-right: 7px; }
[data-state="online"] .dot { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
[data-state="offline"] .dot { background: var(--ember); box-shadow: 0 0 10px var(--ember); }

/* --- Подвал: две последние новости одной строкой --- */
.site-footer { margin-top: 56px; padding: 26px 16px 36px; text-align: center; background: linear-gradient(180deg, transparent, rgba(2, 2, 10, .9) 30%);
  border-top: 1px solid #4a2c0c; color: var(--ash); font-size: .88rem; }
.news-mini { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; max-width: 1100px; margin: 0 auto; }
.news-mini-title { font: var(--w-h3) var(--fs-eyebrow)/1.4 var(--body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--eyebrow-color); }
.news { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.news li { color: #d6deea; }
.news time { margin-right: 8px; color: var(--gold-2); font-size: .8rem; letter-spacing: .06em; }
.legal-links { justify-content: center; margin: 8px 0 14px; }
.legal-links a { font: 500 .85rem var(--body); text-transform: none; letter-spacing: 0; color: #9fe0ff; }
.disclaimer { max-width: 760px; margin: 0 auto; font-size: .8rem; color: #a3acba; }

@media (max-width: 1100px) {
  .site-header nav a:not(.btn), .realm-pill { display: none; }
}
@media (max-width: 900px) {
  .start-grid, .soon-grid, .final { grid-template-columns: 1fr; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview { order: 2; }
  .hero { align-items: flex-start; min-height: 0; }
  .hero-content { padding: 40px 16px 300px; }
  /* Перекомпоновка арта: сцена сохраняет 16:9 по высоте hero и сдвинута так, что костёр с двумя путниками в центре. */
  .stage { right: auto; left: 50%; width: auto; aspect-ratio: 16 / 9; transform: translateX(-71%); }
  .hero-vignette { background: linear-gradient(180deg, rgba(7, 9, 26, .9) 0, rgba(7, 9, 26, .86) 66%, transparent 84%), linear-gradient(180deg, transparent 85%, var(--night) 100%); }
  .panel { padding: 20px 18px; }
  .final { margin: 56px 16px 0; padding: 26px 20px; }
}
@media (max-width: 600px) {
  .why { grid-template-columns: 1fr; gap: 12px; }
  .why li { padding: var(--space-2); }
  .soon-grid { gap: 12px; }
  .promise { font-size: 2rem; }
  .lead { font-size: 1.05rem; }
  .cta .btn { width: 100%; text-align: center; }
  .btn-play { padding: 14px 24px; font-size: 1.05rem; }
  .section { padding-top: 44px; }
  .section-tight { padding-top: 36px; }
  .faq { padding: 4px 16px; }
  .register fieldset { grid-template-columns: 1fr; }
  .site-header { padding: var(--space-1) var(--space-2); }
  /* Шапка в одну строку: CTA шапки дублирует кнопку hero сразу под ней (A5). */
  .site-header nav .btn { display: none; }
  .proto-banner { font-size: .78rem; line-height: 1.35; padding: 4px 12px; }
  .wordmark { font-size: 1rem; }
  :root { --fs-h3: 1.1rem; --card-pad: 18px; }
}

/* Без анимаций по системной настройке: гасим всё движение (сцена, кнопки, наведение). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* #69: подсказка про SmartScreen — спокойные шаги, команда переносится на узком экране. */
.check-steps { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 6px; color: #c9d3e0; }
.check-steps pre { margin: 6px 0 0; padding: 8px 10px; border-radius: 4px; background: rgba(8, 21, 38, .7);
  border: 1px solid rgba(127, 211, 255, .18); white-space: pre-wrap; word-break: break-all; }
#smartscreen > p { margin: 8px 0 4px; color: #c9d3e0; }

/* #298: age marking 16+ (436-FZ), same pill on landing and launcher. */
.age-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; padding: 1px 6px;
  border: 1.5px solid currentColor; border-radius: 6px; font: 700 .78rem/1.3 system-ui, sans-serif; color: #e9edf3;
  letter-spacing: .02em; flex: none; }
.age-note { margin: 6px auto 10px; max-width: 760px; font-size: .82rem; color: #c3ccda; }
.age-note .age-mark { margin-right: 6px; }