/* Задаём общую тёмную палитру отдельной страницы приложения. */
:root { color-scheme: dark; --bg: #06101d; --card: #0c1a2a; --line: #203449; --text: #f5f8fc; --muted: #8fa3b8; --blue: #4f9cff; --cyan: #42ddff; --green: #42d99a; }
/* Учитываем границы элементов в их размерах. */
* { box-sizing: border-box; }
/* Формируем спокойный фон и системный шрифт. */
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 80% 0%, #12355a 0, transparent 34rem), var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* Ограничиваем ширину и сохраняем поля на небольших экранах. */
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
/* Собираем первый экран в две адаптивные колонки. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; align-items: stretch; }
/* Оформляем основной информационный блок. */
.hero-copy, .qr-card, .release { border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 24px 80px rgb(0 0 0 / 24%); }
/* Добавляем крупные внутренние отступы главной карточке. */
.hero-copy { border-radius: 30px; padding: clamp(30px, 6vw, 64px); }
/* Выделяем служебные заголовки цветом. */
.eyebrow { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
/* Делаем название заметным без чрезмерной высоты. */
h1 { margin: 16px 0 12px; font-size: clamp(46px, 9vw, 82px); line-height: .96; letter-spacing: -.055em; }
/* Сохраняем читаемую ширину вводного текста. */
.lead { max-width: 620px; margin: 0; color: var(--muted); font-size: clamp(17px, 2.4vw, 22px); line-height: 1.55; }
/* Раскладываем сведения о версии в одну гибкую строку. */
.version { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 34px 0 20px; align-items: baseline; }
/* Подсвечиваем номер версии. */
.version strong { font-size: 20px; }
/* Приглушаем технические сведения сборки. */
.version span, .hint, .qr-card span { color: var(--muted); }
/* Оформляем основное действие как заметную кнопку. */
.download { display: inline-flex; min-height: 56px; padding: 0 26px; align-items: center; justify-content: center; border-radius: 17px; color: #04111d; background: linear-gradient(135deg, var(--cyan), var(--blue)); font-weight: 850; text-decoration: none; box-shadow: 0 14px 38px rgb(66 221 255 / 24%); }
/* Добавляем обратную связь при наведении. */
.download:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Отделяем системную подсказку от кнопки. */
.hint { margin: 14px 0 0; font-size: 13px; }
/* Центрируем QR-код и пояснения. */
.qr-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 28px; border-radius: 30px; text-align: center; }
/* Создаём белую безопасную область вокруг QR-кода. */
.qr-card img { width: 220px; max-width: 100%; height: auto; padding: 10px; border-radius: 20px; background: #fff; }
/* Отделяем историю версий от первого экрана. */
.releases { margin-top: 64px; }
/* Настраиваем заголовок истории. */
.section-title h2 { margin: 8px 0 24px; font-size: 32px; }
/* Собираем каждую версию в компактную карточку. */
.release { margin-top: 14px; padding: 24px 28px; border-radius: 22px; }
/* Выделяем актуальную версию цветной границей. */
.release.current { border-color: color-mix(in srgb, var(--green) 65%, var(--line)); }
/* Раскладываем номер, статус и дату версии. */
.release header { display: flex; gap: 12px; align-items: center; }
/* Делаем номер выпуска главным элементом строки. */
.release header strong { font-size: 20px; }
/* Оформляем отметку актуального выпуска. */
.release header span { padding: 5px 9px; border-radius: 20px; color: var(--green); background: rgb(66 217 154 / 12%); font-size: 11px; font-weight: 800; }
/* Перемещаем дату к правому краю. */
.release time { margin-left: auto; color: var(--muted); font-size: 13px; }
/* Настраиваем ритм списка изменений. */
.release ul { margin: 18px 0 0; padding-left: 20px; color: #c3cfdb; line-height: 1.75; }
/* Перестраиваем первый экран на телефонах. */
@media (max-width: 760px) { .shell { padding: 24px 0 44px; } .hero { grid-template-columns: 1fr; } .hero-copy, .qr-card { border-radius: 24px; } .qr-card { padding: 24px; } .release { padding: 21px; } }