/* Задаём общую тёмную палитру публичной страницы. */
:root{color-scheme:dark;--bg:#050c16;--card:#0b1725;--card-soft:#0f2032;--line:#203449;--text:#f5f8fc;--muted:#91a5ba;--blue:#4f9cff;--cyan:#42ddff;--green:#42d99a}
/* Учитываем границы элементов в их размерах. */
*{box-sizing:border-box}
/* Формируем спокойный фон и системный шрифт. */
body{position:relative;margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);background:linear-gradient(155deg,#071321 0,var(--bg) 48%,#06111d 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* Добавляем глубокие размытые цветовые пятна за содержимым. */
.page-glow{position:fixed;z-index:-1;width:520px;height:520px;border-radius:50%;filter:blur(120px);opacity:.19;pointer-events:none}
/* Подсвечиваем верх страницы фирменным голубым цветом. */
.glow-one{top:-250px;right:-120px;background:var(--blue)}
/* Добавляем зелёный баланс в нижнюю часть страницы. */
.glow-two{bottom:-330px;left:-200px;background:var(--green)}
/* Ограничиваем ширину и сохраняем поля на небольших экранах. */
.shell{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:56px 0 72px}
/* Раскладываем презентацию и QR-код в две связанные карточки. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:stretch}
/* Оформляем главный информационный блок. */
.hero-copy,.qr-card{border:1px solid rgb(111 154 194 / 22%);background:linear-gradient(145deg,rgb(15 33 51 / 96%),rgb(8 20 33 / 94%));box-shadow:0 30px 90px rgb(0 0 0 / 28%);backdrop-filter:blur(18px)}
/* Добавляем главной карточке просторные адаптивные отступы. */
.hero-copy{position:relative;overflow:hidden;padding:clamp(34px,6vw,68px);border-radius:32px}
/* Добавляем тонкое фирменное свечение внутрь главной карточки. */
.hero-copy::after{position:absolute;right:-90px;bottom:-140px;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgb(66 221 255 / 19%),transparent 70%);content:"";pointer-events:none}
/* Выделяем служебные заголовки цветом. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--green);font-size:12px;font-weight:850;letter-spacing:.18em}
/* Показываем живую зелёную точку официальной публикации. */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgb(66 217 154 / 10%),0 0 18px var(--green)}
/* Делаем название заметным без чрезмерной высоты. */
h1{margin:19px 0 16px;font-size:clamp(52px,8vw,88px);line-height:.92;letter-spacing:-.065em}
/* Выделяем VPN-часть названия мягким градиентом. */
h1 span{color:transparent;background:linear-gradient(120deg,var(--cyan),#69a8ff);background-clip:text;-webkit-background-clip:text}
/* Сохраняем читаемую ширину вводного текста. */
.lead{position:relative;z-index:1;max-width:700px;margin:0;color:#b4c2d0;font-size:clamp(17px,2.2vw,21px);line-height:1.6}
/* Собираем преимущества в компактную строку без лишних карточек. */
.trust-row{display:flex;position:relative;z-index:1;gap:10px;flex-wrap:wrap;margin-top:30px}
/* Оформляем каждое преимущество как спокойный маркер. */
.trust-row span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgb(143 163 184 / 16%);border-radius:999px;color:#aebdca;background:rgb(5 13 22 / 35%);font-size:12px}
/* Добавляем зелёную отметку перед каждым подтверждением. */
.trust-row span::before{color:var(--green);content:"✓";font-weight:900}
/* Не занимаем место скрытой карточкой приглашения. */
.referral-invite[hidden]{display:none}
/* Собираем реферальный код и действие в компактную карточку. */
.referral-invite{display:grid;grid-template-columns:1fr auto;gap:7px 14px;align-items:center;max-width:560px;margin-top:24px;padding:16px;border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--line));border-radius:18px;background:rgb(66 221 255 / 7%)}
/* Размещаем пояснение над кодом на всю ширину. */
.referral-invite span,.referral-invite small{grid-column:1/-1;color:var(--muted)}
/* Делаем код крупным и удобным для проверки. */
.referral-invite strong{font-size:25px;letter-spacing:.16em}
/* Оформляем кнопку копирования без внешней зависимости. */
.referral-invite button{min-height:40px;padding:0 14px;border:1px solid var(--cyan);border-radius:12px;color:var(--cyan);background:transparent;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
/* Подтверждаем успешное копирование зелёным состоянием. */
.referral-invite button.copied{border-color:var(--green);color:#04111d;background:var(--green)}
/* Собираем QR-код и копирование ссылки в самостоятельный компактный блок. */
.qr-card{display:flex;padding:26px;border-radius:32px;align-items:center;justify-content:center;flex-direction:column;text-align:center}
/* Выделяем верхнюю подпись QR-карточки. */
.qr-label{color:var(--cyan);font-size:11px;font-weight:850;letter-spacing:.14em}
/* Создаём светлую рамку вокруг QR-кода для надёжного сканирования. */
.qr-link{display:block;margin:18px 0 14px;padding:10px;border-radius:24px;background:#fff;box-shadow:0 16px 45px rgb(0 0 0 / 32%);transition:transform .18s ease}
/* Поднимаем QR-код при наведении, сохраняя читаемость. */
.qr-link:hover{transform:translateY(-2px)}
/* Убираем лишнее пространство под SVG-изображением. */
.qr-link img{display:block;width:210px;max-width:100%;height:auto;border-radius:14px}
/* Выделяем основную инструкцию QR-карточки. */
.qr-card>strong{font-size:20px}
/* Смягчаем техническое пояснение постоянной ссылки. */
.qr-description{max-width:230px;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.45}
/* Оформляем копирование страницы как аккуратное второстепенное действие. */
.copy-page-link{width:100%;min-height:45px;margin-top:18px;border:1px solid rgb(66 221 255 / 34%);border-radius:13px;color:var(--cyan);background:rgb(66 221 255 / 7%);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
/* Усиливаем кнопку при наведении. */
.copy-page-link:hover{background:rgb(66 221 255 / 13%);border-color:var(--cyan)}
/* Подтверждаем завершённое копирование зелёным состоянием. */
.copy-page-link.copied{border-color:var(--green);color:#04111d;background:var(--green)}
/* Оставляем доступный статус ненавязчивым. */
.copy-page-status{min-height:18px;margin-top:8px;color:#6f8499;font-size:11px}
/* Отделяем выбор платформ от вводной карточки. */
.platforms-section{margin-top:58px}
/* Настраиваем заголовок блока платформ. */
.section-title h2{margin:8px 0 26px;font-size:clamp(30px,5vw,43px);letter-spacing:-.035em}
/* Раскладываем платформы в адаптивную сетку. */
.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* Оформляем каждую платформу самостоятельной карточкой. */
.platform-card{display:flex;position:relative;min-height:245px;overflow:hidden;padding:26px;border:1px solid rgb(89 126 160 / 23%);border-radius:25px;background:linear-gradient(145deg,rgb(14 31 48 / 94%),rgb(8 19 31 / 94%));flex-direction:column;box-shadow:0 20px 58px rgb(0 0 0 / 20%);transition:transform .2s ease,border-color .2s ease}
/* Добавляем деликатную реакцию готовой карточке. */
.platform-card.available:hover{transform:translateY(-3px)}
/* Подсвечиваем доступный установщик зелёной границей. */
.platform-card.available{border-color:color-mix(in srgb,var(--green) 58%,var(--line));box-shadow:0 22px 65px rgb(22 103 77 / 17%)}
/* Приглушаем карточки ещё не готовых приложений. */
.platform-card.development{filter:saturate(.45);opacity:.72}
/* Размещаем название и статус по краям. */
.platform-heading{display:flex;gap:14px;align-items:center;justify-content:space-between}
/* Объединяем готовый логотип и название платформы. */
.platform-identity{display:flex;min-width:0;gap:14px;align-items:center}
/* Размещаем готовый логотип в фирменной квадратной подложке. */
.platform-icon{display:grid;width:54px;height:54px;flex:0 0 auto;border:1px solid rgb(255 255 255 / 9%);border-radius:16px;place-items:center;background:linear-gradient(145deg,#1f3851,#122439);box-shadow:inset 0 1px rgb(255 255 255 / 7%)}
/* Настраиваем устойчивый размер брендовых SVG. */
.platform-icon img{width:29px;height:29px}
/* Подсвечиваем готовый Android зелёным фирменным оттенком. */
.available .platform-icon-android{background:linear-gradient(145deg,#248b68,#18533f);box-shadow:0 10px 25px rgb(36 139 104 / 24%)}
/* Добавляем Windows узнаваемый синий акцент. */
.platform-icon-windows{background:linear-gradient(145deg,#1976d2,#164b82)}
/* Выделяем название платформы. */
.platform-heading h3{margin:0;font-size:25px;letter-spacing:-.02em}
/* Оформляем компактную метку состояния. */
.platform-heading>span{padding:5px 9px;border-radius:20px;color:var(--muted);background:rgb(143 163 184 / 10%);font-size:11px;font-weight:800;white-space:nowrap}
/* Показываем готовое состояние зелёным цветом. */
.available .platform-heading>span{color:var(--green);background:rgb(66 217 154 / 12%)}
/* Смягчаем строку версии и размера. */
.platform-card p{margin:24px 0;color:var(--muted);line-height:1.6}
/* Показываем последние изменения компактно, не увеличивая карточку пустыми строками. */
.platform-changelog{display:grid;gap:7px;margin:-10px 0 22px;padding-left:19px;color:#b7c6d3;font-size:13px;line-height:1.45}
/* Подсвечиваем маркеры журнала спокойным фирменным цветом. */
.platform-changelog li::marker{color:var(--cyan)}
/* Прижимаем основное действие к низу карточки. */
.platform-action{display:flex;min-height:52px;margin-top:auto;padding:0 20px;align-items:center;justify-content:center;border:0;border-radius:15px;color:#04111d;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 13px 32px rgb(66 221 255 / 17%);font:inherit;font-weight:850;text-decoration:none;cursor:pointer;transition:transform .18s ease,filter .18s ease}
/* Подсвечиваем готовую загрузку при наведении. */
a.platform-action:hover{transform:translateY(-1px);filter:brightness(1.06)}
/* Делаем недоступную кнопку явно серой. */
button.platform-action:disabled{color:#9aabb9;background:#263543;box-shadow:none;cursor:not-allowed}
/* Показываем ожидание и ошибку на ширину всей сетки. */
.loading,.error-card{grid-column:1/-1;margin:0;padding:24px;border:1px solid var(--line);border-radius:20px;color:var(--muted);background:var(--card)}
/* Отмечаем ошибку спокойным красным оттенком. */
.error-card{border-color:#6a3340;color:#ff9bab}
/* Перестраиваем страницу в одну колонку на телефонах. */
@media(max-width:860px){.hero{grid-template-columns:1fr}.qr-card{padding:28px}.qr-link img{width:220px}}
/* Перестраиваем страницу в одну колонку на телефонах. */
@media(max-width:700px){.shell{padding:20px 0 44px}.hero-copy,.qr-card{border-radius:24px}.hero-copy{padding:34px 24px}.trust-row{margin-top:24px}.platforms-section{margin-top:40px}.platform-grid{grid-template-columns:1fr}.platform-card{min-height:225px;padding:21px}.platform-heading{align-items:flex-start}.platform-heading>span{margin-top:5px}.platform-icon{width:48px;height:48px;border-radius:14px}.platform-icon img{width:26px;height:26px}.referral-invite{grid-template-columns:1fr}.referral-invite button{justify-self:start}}
/* Уважаем системное отключение анимаций. */
@media(prefers-reduced-motion:reduce){.platform-card,.platform-action,.qr-link{transition:none}}