/* Тема живёт в атрибуте data-theme на : light - значения ниже, dark - блок
следом. Атрибут выставляет маленький скрипт в ещё до первой отрисовки,
поэтому страница не моргает светлым. Все цвета собраны здесь: в правилах ниже
остаются только переменные. */
:root {
color-scheme: light;
font-family: "Golos Text", "Segoe UI", Arial, sans-serif;
font-size: 100%;
font-weight: 400;
font-synthesis: none;
color: var(--ink);
background: var(--paper);
/* Текст: от основного к самым тихим подписям */
--ink: #202a24;
--ink-soft: #52604d;
--muted: #657064;
--muted-2: #78866f;
/* Акцент RuGrab */
--accent: #d85a3d;
--accent-red: #a90d1f;
--accent-gradient: linear-gradient(135deg, #d85a3d 0%, #d93634 44%, #a90d1f 100%);
--accent-strong: #933f35; /* выделения и ссылки в тексте */
--accent-underline: rgba(169, 13, 31, .35);
--accent-tint-1: rgba(216, 90, 61, .07);
--accent-tint-2: rgba(216, 90, 61, .11);
--accent-tint-3: rgba(216, 90, 61, .18);
--tint-warm: linear-gradient(135deg, rgba(216, 90, 61, .09), rgba(169, 13, 31, .05));
--tint-warm-hover: linear-gradient(135deg, rgba(216, 90, 61, .16), rgba(169, 13, 31, .1));
--tint-warm-strong: linear-gradient(135deg, rgba(216, 90, 61, .12), rgba(169, 13, 31, .07));
/* Линии и поверхности */
--line: #e0e5dc;
--line-strong: #bdc9b2;
--paper: #fcfdfb;
--surface: #fff; /* сплошные плашки поверх страницы */
--surface-hover: #f0f2ee;
--surface-sunken: #eef0ed; /* подложка под кадром видео */
--overlay-panel: rgba(255, 255, 255, .94); /* карточка поверх фотографии */
--track: rgba(32, 42, 36, .07); /* дорожка индикатора прокрутки */
--pill-track: rgba(32, 42, 36, .05); /* подложка переключателей-пилюль */
--press: rgba(32, 42, 36, .08); /* отклик на нажатие */
/* Стекло: полупрозрачные панели поверх «космических» поверхностей */
--glass-bg: rgba(255, 255, 255, .43);
--glass-line: rgba(255, 255, 255, .82);
--glass-bg-strong: rgba(255, 255, 255, .65);
--glass-line-strong: rgba(255, 255, 255, .9);
--bar-bg: rgba(252, 253, 251, .84); /* нижняя панель на телефоне */
/* «Космические» поверхности: базовый цвет, северное сияние под ним и зерно */
--cosmic-bg: #e4eae6;
--cosmic-ink: #57644f;
--cosmic-muted: #617256;
--cosmic-aurora: radial-gradient(ellipse at 22% 35%, #c2dfc9 0, transparent 48%), radial-gradient(ellipse at 76% 15%, #d3caee 0, transparent 44%), radial-gradient(ellipse at 77% 80%, #bedfdc 0, transparent 46%), radial-gradient(ellipse at 14% 90%, #e9e9ca 0, transparent 45%), #e7ebe5;
--interactive-bg: radial-gradient(circle at 28% 17%, rgba(255,255,255,.7), transparent 34%), rgba(225,240,236,.42);
--grain-op: .15;
--grain-op-showcase: .18;
--grain-op-download: .14;
/* Нижний блок загрузки - та же поверхность, но в голубом ключе */
--download-bg: #edf7ff;
--download-line: #d5e8f5;
--download-aurora:
radial-gradient(circle at 16% 28%, rgba(107, 192, 255, .48) 0 8%, transparent 21%),
radial-gradient(circle at 77% 20%, rgba(255, 255, 255, .92) 0 7%, transparent 20%),
radial-gradient(circle at 88% 72%, rgba(106, 145, 255, .30) 0 10%, transparent 25%),
radial-gradient(circle at 33% 82%, rgba(209, 244, 255, .90) 0 11%, transparent 27%),
radial-gradient(circle at 57% 48%, rgba(255, 255, 255, .62) 0 5%, transparent 17%),
linear-gradient(135deg, #fafdff 0%, #dcefff 47%, #eefaff 100%);
/* Чипы форматов и подпись под третьим шагом */
--chip-ink: #2d5570;
--chip-icon: #3b7fb0;
--chip-bg:
radial-gradient(circle at 18% 26%, rgba(107, 192, 255, .55) 0 18%, transparent 52%),
radial-gradient(circle at 82% 74%, rgba(106, 145, 255, .34) 0 20%, transparent 56%),
radial-gradient(circle at 62% 30%, rgba(255, 255, 255, .85) 0 14%, transparent 46%),
linear-gradient(135deg, #fafdff 0%, #dcefff 47%, #eefaff 100%);
/* Тени: в тёмной теме они глубже, поэтому вынесены целиком */
--shadow-pill: 0 1px 2px rgba(32, 42, 36, .09);
--shadow-button: 0 1px 2px rgba(32, 42, 36, .06), 0 6px 18px rgba(32, 42, 36, .07);
--shadow-button-hover: 0 1px 2px rgba(32, 42, 36, .08), 0 8px 22px rgba(32, 42, 36, .1);
--shadow-card: 0 2px 4px rgba(32, 42, 36, .05), 0 14px 34px rgba(32, 42, 36, .09);
--shadow-bar: 0 2px 6px rgba(32, 42, 36, .06), 0 18px 44px rgba(32, 42, 36, .16);
--shadow-pop: 0 2px 8px rgba(32, 42, 36, .07), 0 22px 50px rgba(32, 42, 36, .2);
--resize-dur: 300ms;
--resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Тёмная тема. Нейтральный ряд серых взят с boardui.com (фон #121212, карточки
#262626, границы #404040, текст #fafafa, тихий текст #737373/#a1a1a1) - без синевы,
как и просили. Акцентный градиент RuGrab остался прежним, только подняли яркость:
исходный #a90d1f на тёмном фоне уходил в грязь. */
:root[data-theme="dark"] {
color-scheme: dark;
--ink: #f2f2f0;
--ink-soft: #c6c6c3;
--muted: #a1a1a1;
--muted-2: #7d7d7a;
--accent: #ef7f5c;
--accent-red: #e2495b;
--accent-gradient: linear-gradient(135deg, #ef7f5c 0%, #ec4b49 44%, #cf2a3d 100%);
--accent-strong: #f0917f;
--accent-underline: rgba(240, 145, 127, .4);
--accent-tint-1: rgba(239, 127, 92, .12);
--accent-tint-2: rgba(239, 127, 92, .18);
--accent-tint-3: rgba(239, 127, 92, .26);
--tint-warm: linear-gradient(135deg, rgba(239, 127, 92, .15), rgba(226, 73, 91, .09));
--tint-warm-hover: linear-gradient(135deg, rgba(239, 127, 92, .24), rgba(226, 73, 91, .15));
--tint-warm-strong: linear-gradient(135deg, rgba(239, 127, 92, .2), rgba(226, 73, 91, .12));
--line: #2c2c2c;
--line-strong: #3f3f3f;
--paper: #121212;
--surface: #232323;
--surface-hover: #2d2d2d;
--surface-sunken: #191919;
--overlay-panel: rgba(20, 20, 20, .9);
--track: rgba(255, 255, 255, .09);
--pill-track: rgba(255, 255, 255, .07);
--press: rgba(255, 255, 255, .1);
--glass-bg: rgba(255, 255, 255, .05);
--glass-line: rgba(255, 255, 255, .09);
--glass-bg-strong: rgba(255, 255, 255, .08);
--glass-line-strong: rgba(255, 255, 255, .11);
--bar-bg: rgba(24, 24, 24, .86);
--cosmic-bg: #171717;
--cosmic-ink: #d2d2ce;
--cosmic-muted: #a4a4a1;
--cosmic-aurora: radial-gradient(ellipse at 22% 35%, #1d2a23 0, transparent 48%), radial-gradient(ellipse at 76% 15%, #242233 0, transparent 44%), radial-gradient(ellipse at 77% 80%, #17282a 0, transparent 46%), radial-gradient(ellipse at 14% 90%, #2a291d 0, transparent 45%), #171717;
--interactive-bg: radial-gradient(circle at 28% 17%, rgba(255,255,255,.06), transparent 34%), rgba(38, 44, 42, .5);
/* Зерно поверх тёмного почти не читается - хватает лёгкого налёта */
--grain-op: .07;
--grain-op-showcase: .08;
--grain-op-download: .07;
--download-bg: #12181d;
--download-line: #26313a;
--download-aurora:
radial-gradient(circle at 16% 28%, rgba(58, 124, 178, .34) 0 8%, transparent 21%),
radial-gradient(circle at 77% 20%, rgba(255, 255, 255, .07) 0 7%, transparent 20%),
radial-gradient(circle at 88% 72%, rgba(76, 102, 185, .26) 0 10%, transparent 25%),
radial-gradient(circle at 33% 82%, rgba(36, 86, 112, .42) 0 11%, transparent 27%),
radial-gradient(circle at 57% 48%, rgba(255, 255, 255, .05) 0 5%, transparent 17%),
linear-gradient(135deg, #10161c 0%, #141e27 47%, #101a20 100%);
--chip-ink: #a9d5f3;
--chip-icon: #74b4de;
--chip-bg:
radial-gradient(circle at 18% 26%, rgba(64, 142, 200, .40) 0 18%, transparent 52%),
radial-gradient(circle at 82% 74%, rgba(78, 110, 190, .30) 0 20%, transparent 56%),
radial-gradient(circle at 62% 30%, rgba(255, 255, 255, .12) 0 14%, transparent 46%),
linear-gradient(135deg, #1a222b 0%, #1d2c3a 47%, #18242e 100%);
--shadow-pill: 0 1px 2px rgba(0, 0, 0, .5);
--shadow-button: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .45);
--shadow-button-hover: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .55);
--shadow-card: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .5);
--shadow-bar: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .6);
--shadow-pop: 0 2px 8px rgba(0, 0, 0, .45), 0 22px 50px rgba(0, 0, 0, .65);
}
/* Фотографии и скриншоты не инвертируем - в тёмной теме только слегка гасим,
чтобы белые кадры не били по глазам. */
:root[data-theme="dark"] .pocket-shot img,
:root[data-theme="dark"] .mobile-carousel-image img { filter: brightness(.88) saturate(.96); }
:root[data-theme="dark"] .download-fox { filter: brightness(.93); }
/* Переключение темы: класс висит на только на время перехода, поэтому не
мешает собственным анимациям кнопок и ссылок. При prefers-reduced-motion правила
нет вовсе - тема меняется мгновенно. */
@media (prefers-reduced-motion: no-preference) {
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, fill 200ms ease, box-shadow 200ms ease !important;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
/* Системную полосу спрятали - вместо неё тонкая линия внизу окна, её длина показывает,
сколько страницы пройдено. */
.scroll-progress { position: fixed; inset: auto 0 0 0; z-index: 60; height: 3px; background: var(--track); pointer-events: none; }
.scroll-progress > span { display: block; height: 100%; transform-origin: left center; transform: scaleX(var(--scroll, 0)); background: var(--accent-gradient); background-size: 200% 200%; animation: accent-flow 12s ease-in-out infinite alternate; }
body { margin: 0; min-width: 320px; overflow-x: clip; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline-offset: 5px; }
button, summary { cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, iframe:focus-visible { outline: 2px solid var(--accent); }
img, video { display: block; max-width: 100%; height: auto; }
svg { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 20px; top: -100px; background: var(--ink); color: var(--paper); padding: 14px 20px; border-radius: 30px; }
.skip-link:focus { top: 20px; }
.t-resize { transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease); will-change: width, height; }
/* Quiet colour, translucent surfaces and a single fine grain layer. */
.cosmic-surface { position: relative; isolation: isolate; overflow: hidden; background: var(--cosmic-bg); }
.cosmic-surface::before {
content: ""; position: absolute; inset: -28%; z-index: -2; pointer-events: none;
background: var(--cosmic-aurora);
filter: blur(22px); animation: aurora-drift 24s ease-in-out infinite alternate;
}
.cosmic-surface::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("/v5/assets/grain.svg"); opacity: var(--grain-op); mix-blend-mode: soft-light; }
.surface-particles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.surface-particle { position: absolute; left: var(--particle-left); top: var(--particle-top); width: var(--particle-size); height: var(--particle-size); border-radius: 999px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.96) 0, rgba(125,194,255,.72) 34%, rgba(125,194,255,0) 76%); opacity: var(--particle-opacity); filter: blur(var(--particle-blur)); transform: translate3d(var(--particle-shift-x, 0px), var(--particle-shift-y, 0px), 0); transition: transform 260ms var(--resize-ease); animation: particle-float var(--particle-duration) ease-in-out var(--particle-delay) infinite alternate; will-change: transform, margin-top; }
.showcase-topline, .showcase .dual-preview { position: relative; z-index: 1; }
.download-section > .download-copy, .download-section > .download-fox { z-index: 1; }
.interactive-surface { position: relative; isolation: isolate; overflow: hidden; background: var(--interactive-bg); }
.interactive-surface::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/v5/assets/grain.svg"); opacity: var(--grain-op); mix-blend-mode: soft-light; }
.glass-panel { background: var(--glass-bg); border: 1px solid var(--glass-line); backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); }
@keyframes aurora-drift { from { transform: translate(-2%, -2%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }
@keyframes accent-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes download-bubbles { from { transform: translate(-2%, -2%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }
@keyframes particle-float { from { margin-top: -6px; } to { margin-top: 10px; } }
.site-header { height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 1.75rem; letter-spacing: -.06em; font-weight: 600; line-height: 1; flex-shrink: 0; }
.wordmark img { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
/* Имя и подпись столбиком; у подписи свой трекинг - плотный кернинг знака в мелком
размере читался бы хуже. */
.wordmark-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.wordmark-text small { font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2; color: var(--muted); }
.desktop-nav { display: flex; gap: 30px; margin-left: 38px; }
.desktop-nav a { font-size: 1rem; color: var(--ink-soft); padding: 12px 0; transition: color 180ms; }
.desktop-nav a:hover { color: var(--ink); }
/* Нижняя панель и её плашка включаются только на узких экранах - см. медиазапрос ниже. */
.bottom-bar, .support-pop { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 58px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: transform var(--resize-dur) var(--resize-ease), background 200ms, border-color 200ms, box-shadow 200ms; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); }
.button-dark { color: #fff; background: var(--accent-gradient); background-size: 180% 180%; background-position: 0% 50%; border-color: transparent; box-shadow: none; animation: accent-flow 10s ease-in-out infinite alternate; }
.button-dark:hover { background: var(--accent-gradient); background-size: 180% 180%; background-position: 100% 50%; border-color: transparent; box-shadow: none; }
/* Без рамки: сплошная белая заливка читается на любом фоне, отделяет её мягкая тень. */
.button-outline { color: var(--ink); background: var(--surface); border-color: transparent; box-shadow: var(--shadow-button); }
.button-outline:hover { background: var(--surface-hover); border-color: transparent; box-shadow: var(--shadow-button-hover); }
/* Переключатель языка: три коротких ярлыка, активный - на белой пилюле. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px;
border-radius: 999px; background: var(--pill-track); }
.lang-switch a { padding: 7px 11px; border-radius: 999px; font-size: .875rem; font-weight: 500;
line-height: 1; color: var(--muted); transition: background 200ms, color 200ms; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pill); }
/* Переключатель темы: та же пилюля, что у языка, только круглая. Иконка одна из двух -
луна предлагает включить тёмную, солнце возвращает светлую. */
.theme-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; margin-left: 8px; padding: 0; border: 0; border-radius: 999px;
background: var(--pill-track); color: var(--muted);
transition: background 200ms, color 200ms, transform var(--resize-dur) var(--resize-ease); }
.theme-toggle:hover { background: var(--press); color: var(--ink); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
.button-small { min-height: 46px; padding-inline: 19px; font-size: 1rem; }
.header-download .label-narrow { display: none; }
.button-small svg { width: 19px; height: 19px; }
.button-version { flex-shrink: 0; font-size: .875rem; font-weight: 400; padding-left: 10px; border-left: 1px solid currentColor; line-height: 1.2; opacity: .8; }
/* Нижняя панель включается только на телефонах - см. медиазапрос ниже. */
.hero { text-align: center; padding-top: 76px; padding-bottom: 56px; }
.eyebrow { font-size: .875rem; line-height: 1.6; letter-spacing: .065em; font-weight: 500; color: var(--muted); }
.hero-eyebrow { margin-bottom: 25px; color: var(--ink); }
/* Заголовки набраны капсом. Плотный трекинг оригинала в верхнем регистре слипается,
поэтому у каждого размера он ослаблен. */
h1, h2, h3 { text-transform: uppercase; }
/* Заголовок первого экрана - самый тяжёлый начерк Golos: в капсе средний вес выглядел
бледно рядом с крупным кеглем. */
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
.hero-intro { max-width: 46em; margin: 26px auto 0; font-size: 1.1875rem; line-height: 1.6; color: var(--muted); letter-spacing: -.01em; }
.hero-intro b { font-weight: 600; color: var(--ink, inherit); }
/* Размеры держит обёртка, поэтому кнопка под плашкой ровно её ширины. */
.support-block { display: flex; flex-direction: column; width: fit-content; max-width: 44em; margin: 32px auto 0; }
.support-note { display: flex; align-items: flex-start; gap: 15px; padding: 16px 22px 16px 17px; border-radius: 22px; text-align: left; background: var(--tint-warm); }
.support-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -2px; border-radius: 999px; background: var(--surface); color: var(--accent-red); }
.support-icon svg { width: 20px; height: 20px; }
.support-note p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
/* Кнопка светлая: на розовой подложке заливка акцентом спорила бы с ней. */
/* Подложка та же, что у плашки над ней - кнопка читается её продолжением. */
.support-cta { width: 100%; margin-top: 10px; min-height: 44px; padding-inline: 16px; font-size: .9375rem; color: var(--accent-red); border-color: transparent; box-shadow: none;
background: var(--tint-warm); }
.support-cta:hover { background: var(--tint-warm-hover); }
.support-cta svg { width: 17px; height: 17px; }
.support-note b { font-weight: 600; color: var(--ink); }
.support-note p a { display: inline-flex; align-items: baseline; gap: 4px; color: var(--accent-red); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-underline); transition: text-decoration-color var(--resize-dur) var(--resize-ease); }
.support-note p a:hover { text-decoration-color: currentColor; }
.support-note p a svg { width: 14px; height: 14px; align-self: center; transition: transform var(--resize-dur) var(--resize-ease); }
.support-note p a:hover svg { transform: translateX(3px); }
.hero-downloads { display: flex; justify-content: center; gap: 14px; margin-top: 33px; }
.hero-downloads > div { display: flex; flex-direction: column; }
.platform-button { min-width: 322px; }
.download-meta { display: block; margin-top: 13px; font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.download-meta a { text-decoration: underline; text-underline-offset: 4px; }
.quiet-benefits { display: flex; justify-content: center; gap: 26px; list-style: none; padding: 0; margin-top: 28px; font-size: .9375rem; color: var(--muted); }
.quiet-benefits li { display: flex; align-items: center; gap: 7px; }
.quiet-benefits svg { width: 17px; height: 17px; color: var(--accent); }
/* Полоса во всю ширину экрана: секция вынесена из .wrap, поля задаём сами. */
.showcase { width: 100%; border-radius: 0; --edge: clamp(36px, 4.6vw, 84px);
padding: calc(26px + var(--edge)) clamp(16px, 2.4vw, 40px) calc(30px + var(--edge)); }
/* Углы срезаны в обратную сторону: фон страницы «затекает» в полосу четвертями круга,
поэтому переход к соседним секциям читается как одна поверхность, а не как плитка. */
/* Обратное скругление сверху и снизу: белые полосы лежат поверх краёв полосы, а
скруглены у них те углы, что смотрят внутрь. Из-за этого фон полосы выглядывает
по краям экрана и загибается вверх - переход к соседним секциям читается мягко. */
/* Планки не просвечивают: они непрозрачные и выезжают поверх полосы сверху и снизу
по мере раскрытия. Пока полоса поджата, они спрятаны за её краями. */
.showcase-edges { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
--edge-in: clamp(0, (var(--open, 1) - .55) * 2.3, 1); }
.showcase-edges::before, .showcase-edges::after { content: ""; position: absolute; left: 0; right: 0; height: var(--edge); background: var(--paper); }
.showcase-edges::before { top: 0; border-radius: 0 0 var(--edge) var(--edge); transform: translateY(calc(-100% * (1 - var(--edge-in)))); }
.showcase-edges::after { bottom: 0; border-radius: var(--edge) var(--edge) 0 0; transform: translateY(calc(100% * (1 - var(--edge-in)))); }
/* Полоса въезжает поджатой и разворачивается на всю ширину по мере прокрутки.
Прогресс (0..1) считает скрипт и кладёт в --open; без скрипта она сразу раскрыта. */
.showcase { transform: scale(calc(.88 + .12 * var(--open, 1))); transform-origin: center top; will-change: transform;
/* пока полоса поджата - это карточка со скруглением; раскрывшись, она становится
плоской во всю ширину, и вместо радиуса включаются обратные загибы по краям */
border-radius: calc((1 - var(--open, 1)) * 38px); }
@media (prefers-reduced-motion: reduce) { .showcase { transform: none; } }
/* Колонки тянутся до одной высоты, широкое видео центрируется внутри своей - так
верх и низ обеих карточек совпадают, несмотря на разные пропорции роликов. */
/* Ширина телефонной колонки подобрана так, чтобы 9:19.5 по высоте совпадало с 16:9
соседа: тогда обе карточки заполнены целиком и заканчиваются на одной линии. */
.dual-preview { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 20.6%, 470px); align-items: stretch; gap: clamp(20px, 2vw, 34px); }
/* Поля только сверху: видео уходит вплотную к левому, правому и нижнему краю карточки. */
.video-card { display: flex; flex-direction: column; min-width: 0; padding: 14px 0 0; border-radius: 20px; overflow: hidden; }
/* Кадр начинается сразу под заголовком и занимает всё, что осталось от карточки. */
.video-card .video-embed { margin-block: 0; }
.video-card-android .video-embed { height: 100%; width: auto; max-width: 100%; margin-inline: auto; margin-top: 1px; }
.video-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 18px 14px; font-size: 1rem; }
.video-card-heading > span:first-child { display: flex; align-items: center; gap: 9px; }
.video-card-heading svg { width: 20px; height: 20px; }
.preview-version { font-size: .875rem; color: var(--muted); }
/* Верхние углы скруглены, а не залиты: сквозь срез просвечивает сама карточка,
поэтому «язычки» всегда точно её цвета - даже на стеклянной подложке. */
.video-embed { position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: 14px 14px 20px 20px; }
/* Кадр немного крупнее рамки: съедаются чёрные поля по краям и панель плеера,
картинка ложится в блок целиком. Тоньше/грубее - крутится одним числом. */
.video-embed-desktop { aspect-ratio: 16/9; --embed-zoom: 1.14; }
/* Телефон почти не режем: кадр крупнее рамки на 6% и прижат к верху, поэтому обрезка
уходит вниз - там у записи пустая полоса под кнопками и жестовая плашка. */
.video-embed-phone { aspect-ratio: 9/19.5; --embed-zoom: 1.03; }
.video-embed iframe { position: absolute; top: 50%; left: 50%; border: 0; display: block;
width: calc(100% * var(--embed-zoom, 1)); height: calc(100% * var(--embed-zoom, 1));
transform: translate(-50%, -50%);
/* Ролики - витрина, а не плеер: качество и тишину задаём параметрами, а панель VK
и кнопка «плей» не нужны. Без событий мыши они не всплывают и не ставят паузу. */
pointer-events: none; }
/* Телефонный кадр прижат к верху: вся обрезка уходит вниз. */
.video-embed-phone iframe { top: 0; transform: translate(-50%, 0); }
.showcase-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; color: var(--cosmic-ink); }
.showcase-topline .eyebrow { font-size: .875rem; color: inherit; }
.platforms { display: flex; justify-content: center; align-items: center; gap: 56px; padding: 62px 0 66px; border-bottom: 1px solid var(--line); }
.platforms > span { font-size: 1.25rem; color: var(--muted); }
.platform-logos { display: flex; align-items: center; gap: 56px; }
/* Тот же перелив, что у акцентных строк в заголовках. */
.platform-logos > span { font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em;
background: var(--accent-gradient); background-size: 200% 200%; color: transparent;
-webkit-background-clip: text; background-clip: text;
animation: accent-flow 12s ease-in-out infinite alternate; }
.section-space { padding-block: 96px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; }
.section-heading h2, .faq-intro h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.13; letter-spacing: -.03em; margin-top: 16px; }
/* Точка-разделитель между шагами: круг рисуем сами, чтобы размер не зависел от
того, каким глиф «•» окажется в шрифте. Привязан к кеглю заголовка. */
.h-dot { display: inline-block; width: .19em; height: .19em; margin: 0 .34em; border-radius: 50%;
background: var(--accent-red); vertical-align: .26em; }
.section-heading > p { font-size: 1.125rem; color: var(--muted); line-height: 1.65; max-width: 315px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin-top: 44px; }
.steps li { border-top: 1px solid var(--line-strong); padding: 24px 29px 25px 0; }
.steps li + li { border-left: 1px solid var(--line); padding-left: 29px; }
.step-number { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--muted-2); }
.steps h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: .005em; line-height: 1.3; margin: 28px 0 14px; }
.steps p { font-size: 1.125rem; color: var(--muted); line-height: 1.65; max-width: 305px; min-height: 147px; }
/* Тот же чип, что у форматов: без рамки, с переливающейся подложкой. */
.step-caption { display: inline-flex; align-items: center; gap: 7px; margin-top: 23px; padding: 6px 14px; border-radius: 999px;
font-size: .875rem; font-weight: 500; color: var(--chip-ink);
background: var(--chip-bg);
background-size: 260% 260%;
animation: chip-flow 16s ease-in-out infinite alternate; }
.step-caption svg { color: var(--chip-icon); }
.step-caption svg { width: 18px; height: 18px; }
.format-samples { display: flex; gap: 8px; margin-top: 20px; }
/* Подложка та же, что у нижней секции: несколько радиальных пятен поверх градиента,
фон медленно переливается. Рамки нет - форму держит сам заливной овал. */
.format-samples > span { border: 0; border-radius: 999px; padding: 6px 14px; font-size: .875rem; font-weight: 500; color: var(--chip-ink);
background: var(--chip-bg);
background-size: 260% 260%;
animation: chip-flow 16s ease-in-out infinite alternate; }
@keyframes chip-flow { from { background-position: 12% 50%; } to { background-position: 88% 50%; } }
@media (prefers-reduced-motion: reduce) { .format-samples > span, .step-caption { animation: none; } }
/* Та же плашка, что у блока поддержки: подложка с тёплым отливом, обычный чёрный
текст, а выделенные слова - акцентным. */
.quality-note { margin-top: 34px; padding: 20px 24px; border: 0; border-radius: 22px; max-width: 62em;
background: var(--tint-warm);
font-size: 1.25rem; line-height: 1.55; color: var(--ink); }
.quality-note b { font-weight: 600; color: var(--accent-red); }
/* Фотография - вся подложка: лежит слоем под текстом и занимает панель целиком.
Пропорции панели равны пропорциям снимка, поэтому кадр не обрезается, а вырезанный
зелёный экран и видео за ним совпадают по координатам, снятым с самой картинки. */
.pocket { position: relative; display: block; aspect-ratio: 2200 / 1149; padding: 0; border-radius: 30px; overflow: hidden; }
/* Слой на пиксель ниже дна панели: иначе по нижней кромке проступала светлая полоска
от округления высоты. Картинка и видео тянутся вместе, поэтому дыра и кадр
остаются совмещёнными. */
.pocket-shot { position: absolute; inset: 0 0 -1px 0; z-index: 0; }
.pocket-video { position: absolute; z-index: 0; left: 49.91%; top: 20.19%; width: 15.14%; height: 61.53%; border: 0; pointer-events: none; }
/* Фотография поверх кадра - видео видно только через вырезанный экран. */
.pocket-shot img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.pocket-copy { position: absolute; z-index: 2; left: clamp(16px, 2vw, 30px); top: 50%; transform: translateY(-50%);
width: min(44%, 430px); padding: clamp(20px, 2.2vw, 30px); border-radius: 24px; background: var(--overlay-panel);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pocket-copy h2 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.13; margin-top: 12px; }
/* Вторая и третья строки крупнее первой - примерно на её ширину. */
.pocket-copy h2 b { display: block; margin-top: .06em; font-size: 1.32em; font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.pocket-copy > p:not(.eyebrow) { margin-top: 16px; font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: var(--muted); }
.android-section { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 78px; align-items: center; }
.android-content h2 { font-size: 3.25rem; letter-spacing: -.03em; line-height: 1.04; font-weight: 700; margin-top: 22px; }
.android-content > p:not(.eyebrow):not(.apk-alternative) { font-size: 1.125rem; line-height: 1.7; color: var(--muted); margin-top: 27px; max-width: 405px; }
.simple-list { list-style: none; padding: 0; margin-top: 25px; display: grid; gap: 13px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.simple-list li { display: flex; align-items: center; gap: 10px; }
.simple-list svg { width: 19px; height: 19px; color: var(--accent); }
.android-store { margin-top: 31px; }
.apk-alternative { font-size: .9375rem; color: var(--muted); margin-top: 17px; }
.apk-alternative a { text-decoration: underline; text-underline-offset: 4px; }
/* Вместо ленты экранов - QR на страницу в магазине. Сам код лежит на белом поле:
сканеры плохо читают его с цветной подложки. */
.store-qr { width: 100%; max-width: 460px; justify-self: end; display: grid; justify-items: center; gap: 22px; padding: 34px 30px 30px; border-radius: 24px; }
.store-qr-code { position: relative; z-index: 2; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); } /* белое поле оставлено в обеих темах: с цветной подложки QR читается хуже */
.store-qr-code img { display: block; width: min(280px, 62vw); height: auto; }
.store-qr-note { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 320px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); text-align: left; }
.store-qr-note .ico-rustore { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 17px; }
.icon-button { border: 1px solid var(--glass-line); background: var(--glass-bg-strong); border-radius: 999px; display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink-soft); transition: background 200ms, transform var(--resize-dur) var(--resize-ease); }
.icon-button:hover { background: var(--surface); transform: translateY(-2px); }
.icon-button:active { transform: scale(.95); }
.icon-button svg { width: 19px; height: 19px; }
.arrow-left { transform: rotate(180deg); }
.mobile-slider-section { border-top: 1px solid var(--line); }
.mobile-slider-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.mobile-slider-heading h2 { font-size: 2.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: 18px; }
/* Акцентная строка заголовка - одно правило на все секции, чтобы перелив везде совпадал. */
.mobile-slider-heading h2 span, .download-copy h2 span, .android-content h2 span, .hero h1 > span {
background: var(--accent-gradient); background-size: 200% 200%; color: transparent;
-webkit-background-clip: text; background-clip: text;
animation: accent-flow 12s ease-in-out infinite alternate; }
.mobile-slider-intro { max-width: 390px; padding-bottom: 5px; }
.mobile-slider-intro > p { font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.mobile-slider-intro .text-link { margin-top: 20px; }
/* Лента едет сама и не кончается: в разметке два одинаковых набора экранов, сдвиг
ровно на половину дорожки склеивает их без стыка. Ширина - во весь экран, края
растворяются маской, поэтому кадры будто выезжают из-за границы окна. */
.mobile-carousel { width: 100vw; margin: 46px 0 0; margin-inline: calc(50% - 50vw); overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mobile-carousel-viewport { overflow: hidden; padding: 22px 0 10px; }
.mobile-carousel-track { display: flex; align-items: flex-start; width: max-content; padding: 0; will-change: transform;
animation: screens-marquee 78s linear infinite; }
.mobile-carousel:hover .mobile-carousel-track, .mobile-carousel:focus-within .mobile-carousel-track { animation-play-state: paused; }
@keyframes screens-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mobile-carousel-track { animation: none; } }
.mobile-carousel-slide { flex: 0 0 clamp(260px, 23vw, 400px); min-width: 0; margin-right: clamp(16px, 1.7vw, 28px); }
.mobile-carousel-image { padding: 8px; border: 1px solid var(--glass-line-strong); border-radius: 23px; background: var(--glass-bg-strong); overflow: hidden; }
.mobile-carousel-image img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 16px; }
.mobile-carousel-slide figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; padding: 15px 5px 2px; }
.mobile-slide-number { grid-row: span 2; color: var(--muted-2); font-size: .875rem; font-variant-numeric: tabular-nums; }
.mobile-carousel-slide strong { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em; }
.mobile-carousel-slide small { color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.faq-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 78px; border-top: 1px solid var(--line); }
.faq-intro > p:not(.eyebrow) { margin-top: 24px; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-strong); background: transparent; font-size: 1rem; font-weight: 500; line-height: 1.5; transition: color 200ms, border-color 200ms; }
.text-link svg { transition: transform var(--resize-dur) var(--resize-ease); }
.ico-rustore { width: 22px; height: 22px; border-radius: 5px; order: -1; }
.text-link-lg .ico-rustore { width: 34px; height: 34px; border-radius: 8px; }
.text-link:hover { color: var(--accent-red); border-color: var(--accent); }
.text-link:hover svg { transform: translateX(3px); }
.faq-intro .faq-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }
.text-link-lg { font-size: 2rem; gap: 14px; padding: 8px 0; letter-spacing: -.02em; }
.text-link-lg svg { width: 26px; height: 26px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.faq-list summary { padding: 25px 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; font-size: 1.125rem; line-height: 1.5; font-weight: 400; }
.faq-list summary svg { width: 20px; height: 20px; color: var(--muted-2); transition: transform var(--resize-dur) var(--resize-ease); }
summary[aria-expanded=true] svg, details[open] > summary:not([aria-expanded=false]) svg { transform: rotate(45deg); }
.faq-answer { padding: 0 30px 25px 0; font-size: 1.0625rem; line-height: 1.75; color: var(--muted); }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; }
.faq-answer b { font-weight: 500; color: var(--accent-strong); }
.updates-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: start; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.updates-strip h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: .005em; line-height: 1.4; margin-top: 10px; }
.release-details { width: 100%; max-width: 376px; justify-self: end; }
.release-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; font-size: 1rem; line-height: 1.65; }
/* Номер версии - отдельный элемент строки-флекса, поэтому его прижимаем к тексту:
иначе space-between растаскивал «Что нового в Android» и «2.0.2» по краям. */
.release-details summary [data-rg-ver] { margin-right: auto; }
.release-details summary svg { width: 19px; height: 19px; transition: transform var(--resize-dur) var(--resize-ease); }
.release-body { font-size: 1rem; line-height: 1.7; color: var(--muted); padding: 11px 0; }
.release-body > p { font-size: .875rem; margin-bottom: 9px; }
.release-body ul { padding-left: 20px; }
.download-section { border: 1px solid var(--line); border-radius: 26px; padding: 58px; margin-top: 50px; min-height: 365px; display: flex; align-items: center; }
.download-section.cosmic-surface { background: var(--download-bg); border-color: var(--download-line); }
.download-section.cosmic-surface::before {
inset: -36%;
background: var(--download-aurora);
filter: blur(16px) saturate(1.08);
animation: download-bubbles 18s ease-in-out infinite alternate;
}
.download-section.cosmic-surface::after { opacity: var(--grain-op-download); mix-blend-mode: soft-light; }
.showcase.cosmic-surface::after { opacity: var(--grain-op-showcase); }
.download-copy { position: relative; z-index: 1; width: 76%; }
.download-copy h2 { font-size: 2.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-top: 17px; }
.download-copy > p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.65; color: var(--cosmic-muted); margin-top: 19px; }
.bottom-downloads { display: flex; gap: 12px; margin-top: 28px; }
.bottom-downloads .button { min-width: 242px; font-size: 1rem; min-height: 55px; padding-inline: 20px; }
.download-fox { position: absolute; right: -5px; bottom: -48px; width: 310px; max-width: 29%; height: auto; }
.site-footer { padding-top: 48px; padding-bottom: 30px; }
.footer-main { display: flex; align-items: center; gap: 27px; }
.footer-main .wordmark { font-size: 1.625rem; }
.footer-main > span { font-size: .9375rem; color: var(--muted-2); }
.footer-main > a:last-child { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .9375rem; color: var(--accent-strong); }
.footer-main svg { width: 18px; height: 18px; }
.footer-fineprint { border-top: 1px solid var(--line); margin-top: 29px; padding-top: 22px; display: flex; align-items: baseline; gap: 29px; font-size: .875rem; line-height: 1.65; color: var(--muted-2); }
.footer-fineprint > p { flex: 1; }
.footer-fineprint > a { white-space: nowrap; }
@media (max-width: 1100px) {
.desktop-nav { margin-left: 0; gap: 24px; }
.hero { padding-top: 64px; }
.showcase { padding-inline: 22px; }
.dual-preview { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px); gap: 18px; }
.video-card { padding: 11px 0 0; }
.video-card-heading { font-size: .9375rem; padding-inline: 14px; }
.section-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
.section-heading > p { max-width: none; }
.section-heading > p br { display: none; }
.section-heading h2 { font-size: 2.5rem; }
.steps li { padding-right: 22px; }
.steps li + li { padding-left: 22px; }
.steps h3 { font-size: 1.1875rem; }
.steps p { min-height: 178px; }
.android-section { gap: 45px; }
.android-content h2 { font-size: 3.3rem; }
.store-qr { padding: 28px 24px 26px; }
.store-qr-code img { width: min(250px, 60vw); }
.faq-section { gap: 46px; }
.download-section { padding: 45px; }
.download-copy h2 { font-size: 2.75rem; }
.bottom-downloads .button { min-width: 224px; padding-inline: 17px; font-size: .9375rem; gap: 9px; }
.footer-main { flex-wrap: wrap; gap: 19px 26px; }
}
@media (max-width: 800px) {
/* Навигация уезжает вниз: парящая пилюля с тремя разделами и поддержкой.
Подсветка показывает, до какого раздела дочитали - класс ставит скрипт. */
.bottom-bar { position: fixed; left: 12px; right: 12px; bottom: calc(11px + env(safe-area-inset-bottom, 0px)); z-index: 55;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 6px;
border: 1px solid var(--glass-line-strong); border-radius: 26px;
background: var(--bar-bg); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
box-shadow: var(--shadow-bar); }
.bottom-bar > a, .bottom-bar > button { display: grid; justify-items: center; align-content: center; gap: 5px; padding: 9px 2px 8px;
border: 0; border-radius: 20px; background: transparent; font: inherit; font-size: .6875rem; line-height: 1.15;
color: var(--muted); text-align: center; -webkit-appearance: none; appearance: none; transition: background 200ms, color 200ms; }
.bottom-bar svg { width: 22px; height: 22px; }
.bottom-bar > .is-current { color: var(--accent-red); background: var(--accent-tint-2); }
.bottom-bar > a:active, .bottom-bar > button:active { background: var(--press); }
/* Через > , иначе правило пунктов выше перебивает цвет по весу селектора. */
.bottom-bar > .bottom-bar-donate { color: var(--accent-red); cursor: pointer; background: var(--accent-tint-1); }
.bottom-bar > .bottom-bar-donate[aria-expanded="true"] { background: var(--accent-tint-3); }
/* Плашка выезжает над панелью: тот же тёплый фон, что и у блока поддержки,
но непрозрачный - она лежит поверх страницы. */
.support-pop:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(94px + env(safe-area-inset-bottom, 0px)); z-index: 56;
display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; padding: 18px 18px 16px;
border: 1px solid var(--glass-line-strong); border-radius: 24px;
background: var(--tint-warm-strong), var(--paper);
box-shadow: var(--shadow-pop); }
.support-pop p { grid-column: 2; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.support-pop .support-icon { grid-row: 1; }
.support-pop .support-cta { grid-column: 1 / -1; margin-top: 2px; }
.support-pop-tg { grid-column: 1 / -1; justify-self: center; padding: 4px 2px; font-size: .9375rem; color: var(--accent-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-underline); }
.support-pop-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--glass-bg-strong); color: var(--accent-strong); cursor: pointer; }
.support-pop-close svg { width: 16px; height: 16px; transform: rotate(45deg); }
.support-pop-close:active { background: var(--surface); }
.header-download { display: none; }
body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.wrap { width: calc(100% - 40px); }
.site-header { height: 86px; gap: 17px; }
.wordmark img { width: 52px; height: 52px; }
.desktop-nav { display: none; }
.header-download { margin-left: 12px; }
.hero { padding-top: 55px; padding-bottom: 45px; }
.support-note { width: auto; gap: 12px; padding: 14px 16px; margin-top: 26px; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 3.7rem); }
.hero-intro { font-size: 1.1875rem; }
.platform-button { min-width: 0; font-size: 1rem; padding-inline: 20px; gap: 9px; }
.download-meta { font-size: .875rem; }
.quiet-benefits { gap: 22px; font-size: .875rem; }
.showcase { padding: 22px 20px 24px; }
.dual-preview { grid-template-columns: minmax(0, 1fr) 200px; gap: 15px; }
.video-card { padding: 10px 0 0; border-radius: 17px; }
.video-card-heading { gap: 6px; font-size: .875rem; }
.video-card-heading > span:first-child { gap: 6px; }
.video-card-heading svg { width: 17px; height: 17px; }
.preview-version, .video-source { font-size: .875rem; }
.video-source { justify-content: flex-start; gap: 4px; }
.video-source svg { width: 15px; height: 15px; }
.platforms { flex-direction: column; gap: 19px; padding-block: 30px; }
.platform-logos { flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.platform-logos > span { font-size: 1.75rem; }
.section-space { padding-block: 68px; }
.section-heading h2 { font-size: 2.3rem; }
.steps { margin-top: 35px; }
.steps li { padding-right: 16px; }
.steps li + li { padding-left: 16px; }
.steps p { font-size: 1.0625rem; min-height: 210px; }
.step-caption { font-size: .875rem; }
.android-section { gap: 30px; }
.android-content h2 { font-size: 3rem; }
.android-content > p:not(.eyebrow):not(.apk-alternative) { font-size: 1.0625rem; }
.android-store { font-size: 1rem; padding-inline: 18px; gap: 8px; }
.simple-list { font-size: .9375rem; }
.store-qr-code img { width: min(220px, 58vw); }
.icon-button { width: 40px; height: 40px; }
.faq-section { gap: 34px; grid-template-columns: 1fr 1.5fr; }
.faq-intro h2 { font-size: 2.3rem; }
.faq-list summary { font-size: 1.0625rem; }
.updates-strip { gap: 26px; }
.download-section { padding: 37px 28px; margin-top: 32px; }
.download-copy { width: 90%; }
.download-copy h2 { font-size: 2.5rem; }
.download-copy > p:not(.eyebrow) { max-width: 360px; font-size: 1.0625rem; }
.download-fox { right: -45px; bottom: -22px; width: 265px; max-width: 36%; }
.bottom-downloads { flex-wrap: wrap; }
.footer-main > span { font-size: .875rem; }
.footer-main > a:last-child { margin-left: 0; }
}
@media (max-width: 680px) {
/* На телефоне композиция та же, просто мельче. Абзац убран: при ширине панели
в 358 px карточка с ним выходит выше самой панели и наезжает на телефон. */
.pocket { border-radius: 22px; }
.pocket-copy { left: 9px; width: min(45%, 180px); padding: 10px 11px; border-radius: 14px; }
.pocket-copy .eyebrow { font-size: .5625rem; letter-spacing: .06em; }
.pocket-copy h2 { font-size: 1rem; margin-top: 6px; }
.pocket-copy > p:not(.eyebrow) { display: none; }
.hero-downloads { display: grid; grid-template-columns: 1fr; max-width: 390px; gap: 19px; margin-inline: auto; }
.platform-button { min-height: 60px; font-size: 1.0625rem; }
.download-meta { margin-top: 8px; }
.dual-preview { grid-template-columns: 1fr; gap: 22px; }
.video-card { padding: 14px 0 0; }
.video-card-heading { font-size: 1rem; }
.video-card-android { width: 100%; justify-self: stretch; }
.video-card-android .video-embed { height: auto; width: 100%; max-width: none; }
.video-source { justify-content: flex-end; }
.showcase-topline { flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.showcase-topline .eyebrow { display: none; }
.silent-label { font-size: .875rem; }
.steps { display: block; margin-top: 28px; }
.steps li, .steps li + li { display: grid; grid-template-columns: 35px 1fr; gap: 0 15px; padding: 25px 0; border-left: 0; }
.step-number { grid-column: 1; grid-row: 1; margin-top: 4px; }
.steps h3 { grid-column: 2; font-size: 1.25rem; margin: 0 0 12px; line-height: 1.45; }
.steps p { grid-column: 2; min-height: 0; max-width: none; font-size: 1.125rem; }
.step-caption, .format-samples { grid-column: 2; margin-top: 18px; }
.android-section { grid-template-columns: 1fr; gap: 36px; }
.android-content > p:not(.eyebrow):not(.apk-alternative) { font-size: 1.125rem; max-width: 430px; }
.simple-list { font-size: 1rem; }
.store-qr { justify-self: center; max-width: 405px; }
.mobile-slider-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
.mobile-slider-heading h2 { font-size: 2.75rem; }
.mobile-slider-intro { max-width: 500px; }
.mobile-carousel { margin-top: 35px; }
.mobile-carousel-slide { flex-basis: min(38vw, 300px); }
.mobile-carousel-viewport { padding: 18px 0 8px; }
.faq-section { grid-template-columns: 1fr; gap: 30px; }
.faq-intro > p:not(.eyebrow) { margin-top: 18px; }
.faq-intro > p br { display: none; }
.faq-list summary { font-size: 1.125rem; padding-block: 23px; }
.updates-strip { grid-template-columns: 1fr; gap: 14px; }
.release-details { max-width: none; justify-self: start; }
.footer-fineprint { flex-wrap: wrap; gap: 15px; }
.footer-fineprint > p { flex-basis: 100%; order: 3; max-width: 440px; }
.footer-fineprint > a { margin-left: auto; }
}
@media (max-width: 480px) {
html { scroll-padding-top: 22px; }
.wrap { width: calc(100% - 32px); }
.site-header { height: 79px; gap: 11px; }
.wordmark { font-size: 1.5rem; gap: 5px; }
.wordmark img { width: 46px; height: 46px; }
.header-download { padding-inline: 15px; font-size: .9375rem; gap: 8px; min-height: 44px; }
.lang-switch { padding: 2px; }
.lang-switch a { padding: 6px 8px; font-size: .8125rem; }
.theme-toggle { width: 36px; height: 36px; margin-left: 6px; }
.theme-toggle svg { width: 18px; height: 18px; }
.header-download .label-wide { display: none; }
.header-download .label-narrow { display: inline; }
.text-link-lg { font-size: 1.625rem; }
.text-link-lg svg { width: 22px; height: 22px; }
.hero { padding-top: 44px; padding-bottom: 38px; }
.hero-eyebrow { font-size: .8125rem; letter-spacing: .05em; margin-bottom: 21px; }
.hero h1 { font-size: clamp(2.15rem, 8.8vw, 2.8rem); letter-spacing: -.055em; line-height: 1.12; }
.hero-intro { font-size: 1.125rem; line-height: 1.6; margin-top: 22px; }
.hero-downloads { max-width: 360px; margin-top: 28px; }
.platform-button { font-size: 1rem; padding-inline: 18px; gap: 9px; min-height: 58px; }
.platform-button svg { width: 21px; height: 21px; }
.button-version { font-size: .875rem; padding-left: 9px; }
.quiet-benefits { gap: 13px; font-size: .8125rem; margin-top: 24px; }
.quiet-benefits li { gap: 4px; }
.quiet-benefits svg { width: 14px; height: 14px; }
.showcase { padding: 20px 14px 22px; }
.showcase-topline { margin-bottom: 0; } /* надпись спрятана с 680px - отступу не за чем держаться */
.video-card-windows { padding: 11px; }
.video-card-heading { font-size: .9375rem; }
.video-source { font-size: .875rem; }
.platforms { padding-block: 29px; }
.platforms > span { font-size: .875rem; }
.platform-logos { flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.platform-logos > span { font-size: 1.375rem; }
.platforms > span { font-size: 1rem; }
.section-space { padding-block: 56px; }
.eyebrow { font-size: .8125rem; letter-spacing: .045em; }
.section-heading h2 { font-size: 2.05rem; margin-top: 13px; }
.section-heading > p { font-size: 1.0625rem; }
.steps p { font-size: 1.0625rem; }
.quality-note { font-size: 1.0625rem; padding: 16px 18px; }
.quality-note br { display: none; } /* на узком экране строка ломается сама */
.android-content h2 { font-size: 3rem; }
.android-content > p:not(.eyebrow):not(.apk-alternative) { font-size: 1.0625rem; }
.android-store { min-height: 56px; font-size: 1rem; }
.apk-alternative { font-size: .9375rem; }
.mobile-slider-heading h2 { font-size: 2.4rem; }
.mobile-slider-intro > p { font-size: 1.0625rem; }
.mobile-carousel-slide { flex-basis: min(70vw, 300px); }
.mobile-carousel-viewport { padding: 14px 0 6px; }
.faq-intro h2 { font-size: 2.45rem; }
.faq-answer { padding-right: 14px; }
.updates-strip h3 { font-size: 1.3125rem; }
.download-section { min-height: 442px; align-items: flex-start; padding: 35px 24px; margin-top: 20px; border-radius: 24px; }
.download-copy { width: 100%; }
.download-copy h2 { font-size: 2.3rem; max-width: 300px; }
.download-copy > p:not(.eyebrow) { font-size: 1.0625rem; max-width: 265px; }
.bottom-downloads { flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 25px; }
.bottom-downloads .button { min-width: 231px; min-height: 53px; font-size: .9375rem; padding-inline: 16px; }
.download-fox { max-width: none; width: 146px; right: -29px; bottom: -18px; }
.site-footer { padding-top: 35px; padding-bottom: 24px; }
.footer-main { gap: 18px 14px; }
.footer-main .wordmark { font-size: 1.5rem; }
.footer-main > span { max-width: 185px; margin-left: auto; line-height: 1.6; font-size: .875rem; }
.footer-main > a:last-child { font-size: 1rem; flex-basis: 100%; }
.footer-fineprint { font-size: .8125rem; margin-top: 25px; }
}
@media (max-width: 360px) {
.site-header { gap: 8px; }
.wordmark { font-size: 1.3125rem; gap: 3px; }
.wordmark-text small { font-size: .625rem; letter-spacing: .07em; }
.wordmark img { width: 40px; height: 40px; }
.header-download { padding-inline: 12px; font-size: .875rem; }
.theme-toggle { width: 32px; height: 32px; margin-left: 4px; }
.theme-toggle svg { width: 17px; height: 17px; }
.platform-button { padding-inline: 12px; gap: 7px; font-size: .9375rem; }
.button-version { font-size: .8125rem; padding-left: 7px; }
.quiet-benefits { gap: 9px; font-size: .75rem; }
.platform-logos { gap: 6px 14px; }
.platform-logos > span { font-size: 1.1875rem; }
.platforms > span { font-size: .9375rem; }
.download-section { padding-inline: 20px; }
.download-copy h2 { font-size: 2.1rem; }
.download-fox { width: 116px; right: -38px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.t-resize { transition: none !important; will-change: auto; }
.button:hover, .icon-button:hover, .button:active, .icon-button:active { transform: none; }
}