/* apps.css — извлечено из s/apps.html (1 <style>-блоков) */
/* ===== Базовые стили и Защита ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            /* Защита от выделения текста и перетаскивания элементов */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        html {
            scroll-behavior: smooth;
            background-color: #0b0d13;
            color: #e2e8f0;
            overflow-x: hidden;
        }

        body {
            min-height: 100vh;
            background: url('../../static-assets/backgrounds/download-bg-dark-md-lg.jpg') no-repeat center center fixed;
            background-size: cover;
            position: relative;
            overflow-x: hidden;
        }

        /* ===== Интерактивное голубое пятно (Курсор) ===== */
        #glow-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            background: radial-gradient(circle 400px at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(0, 191, 255, 0.15), transparent 80%);
            transition: opacity 0.3s ease;
        }

        @media (max-width: 1024px) {
            #glow-bg { display: none; } /* Отключаем на мобильных */
        }

        /* ===== Шапка (Header) ===== */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background: url('../../static-assets/backgrounds/app-alt-gradient-bg-dark.jpg') top center/cover no-repeat;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }

        .logo { height: 48px; display: flex; align-items: center; }
        .logo img { height: 100%; pointer-events: none; }

        .lang-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .lang-btn:hover {
            background: rgba(0, 191, 255, 0.2);
            border-color: #00bfff;
        }

        /* ===== Основной контейнер ===== */
        main {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 160px 24px 80px 24px;
        }

        /* Анимация появления при прокрутке */
        .reveal-block {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            margin-bottom: 120px;
        }
        .reveal-block.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== Текстовые стили ===== */
        .hero-title {
            color: #00bfff;
            font-size: 4rem;
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 24px;
            text-align: center;
        }
        .hero-desc {
            font-size: 1.25rem;
            line-height: 1.7;
            color: #cbd5e1;
            text-align: center;
            max-width: 900px;
            margin: 0 auto 60px auto;
        }

        /* Логотип над заголовком Hero */
        .hero-logo {
            display: block;
            margin: 0 auto 20px auto;
            width: 64px;
            height: auto;
            pointer-events: none;
            filter: drop-shadow(0 10px 24px rgba(0, 191, 255, 0.25));
        }

        /* Кнопка «Скачать» под описанием Hero */
        .hero-cta-wrap { display: flex; justify-content: center; margin-top: -28px; }
        .hero-download-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 56px;
            background: #00bfff;
            color: #000;
            font-weight: 700;
            font-size: 1.1rem;
            border-radius: 12px;
            text-decoration: none;
            transition: all 0.25s ease;
        }
        .hero-download-btn:hover {
            background: #fff;
            box-shadow: 0 0 24px rgba(0, 191, 255, 0.55);
            transform: translateY(-2px);
        }
        .hero-download-btn .dl-dl-icon { font-size: 1.2rem; }

        /* Якорь блока загрузки: отступ сверху, чтобы фиксированная шапка не перекрывала */
        #download { scroll-margin-top: 120px; }

        /* ===== Анимация появления при загрузке страницы ===== */
        @keyframes spzFadeUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .hero-logo          { animation: spzFadeUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.00s both; }
        #hero-title         { animation: spzFadeUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.10s both; }
        .hero-desc          { animation: spzFadeUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.20s both; }
        .hero-cta-wrap      { animation: spzFadeUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.30s both; }
        .browser-image-container { animation: spzFadeUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.35s both; }

        /* Уважаем настройку «уменьшить движение» */
        @media (prefers-reduced-motion: reduce) {
            .hero-logo, #hero-title, .hero-desc, .hero-cta-wrap, .browser-image-container {
                animation: none;
            }
        }

        /* ===== Блок 1: Изображение браузера ===== */
        .browser-image-container {
            width: 100%;
            display: flex;
            justify-content: center;
            position: relative;
            margin-bottom: 80px;
        }
        /* Обёртка: чуть больше дефолта (max-width 1320 против 1200 у main),
           мягко зумится при прокрутке, содержит два скриншота для crossfade. */
        .browser-shot-wrap {
            width: 100%;
            max-width: 1320px;
            position: relative;
            transform-origin: center top;
            transition: transform 0.15s linear;
            will-change: transform;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
        }
        .browser-shot {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }
        /* Второй скриншот поверх первого. Плавная длительная смена
           (0.7с) срабатывает по порогу скролла — успевает всегда. */
        .browser-shot-2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            opacity: 0;
            transition: opacity 0.7s ease;
        }

        /* ===== Блок 2: О браузере ===== */
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 24px;
            color: #f8fafc;
        }
        .text-gray-centered {
            text-align: center;
            color: #94a3b8;
            font-size: 2rem;
            margin-bottom: 48px;
        }

        /* ===== Блок 3: Ключевые преимущества ===== */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }
        .feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 40px 32px;
            text-align: center;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            border-color: #00bfff;
        }
        .feature-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 24px;
            object-fit: contain;
        }
        .feature-card h3 {
            font-size: 1.5rem;
            color: #f8fafc;
            margin-bottom: 16px;
        }
        .feature-card p {
            color: #94a3b8;
            line-height: 1.6;
        }

        /* ===== Блок 4: Философия (Оранжевый блок) ===== */
        .orange-block {
            background: linear-gradient(135deg, #ea580c, #c2410c);
            border-radius: 32px;
            padding: 60px;
            box-shadow: 0 20px 50px rgba(234, 88, 12, 0.3);
            text-align: center;
        }
        .orange-block h2 {
            color: #ffffff;
            font-size: 2.5rem;
            margin-bottom: 30px;
            font-weight: 800;
        }
        .orange-block p {
            color: #fffedd;
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        /* ===== Блок 5: Расширенный функционал ===== */
        .extended-features {
            text-align: left;
        }
        .extended-features .section-title {
            margin-bottom: 40px;
            max-width: 800px;
        }
        .ext-feature-item {
            margin-bottom: 32px;
        }
        .ext-feature-item h3 {
            color: #00bfff;
            font-size: 1.4rem;
            margin-bottom: 12px;
        }
        .ext-feature-item p {
            color: #cbd5e1;
            font-size: 1.1rem;
            line-height: 1.7;
            max-width: 850px;
        }

        /* ===== Блок 6: Секция скачивания (CTA) ===== */
        .download-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .download-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .download-card h3 {
            font-size: 1.8rem;
            margin-bottom: 24px;
            color: #fff;
        }
        .download-btn {
            display: inline-block;
            width: 100%;
            padding: 16px;
            background: #00bfff;
            color: #000;
            font-weight: bold;
            font-size: 1.1rem;
            border-radius: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        .download-btn:hover {
            background: #fff;
            box-shadow: 0 0 20px rgba(0, 191, 255, 0.6);
        }

        /* ===== Модальное окно загрузки ===== */
        .dl-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .dl-overlay.open { display: flex; opacity: 1; }
        .dl-modal {
            background: #11141c;
            border: 1px solid rgba(0, 191, 255, 0.22);
            border-radius: 20px;
            width: 100%;
            max-width: 520px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
            transform: translateY(20px) scale(0.98);
            transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
            display: flex;
            flex-direction: column;
        }
        .dl-overlay.open .dl-modal { transform: translateY(0) scale(1); }
        .dl-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22px 26px 18px 26px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .dl-modal-title { font-size: 1.35rem; font-weight: 700; color: #f8fafc; }
        .dl-modal-close {
            width: 36px; height: 36px;
            border-radius: 10px; border: none;
            background: rgba(255, 255, 255, 0.06);
            color: #cbd5e1; font-size: 1.5rem; line-height: 1;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s ease;
        }
        .dl-modal-close:hover { background: rgba(0, 191, 255, 0.18); color: #00bfff; }

        .dl-tabs {
            display: flex; gap: 2px;
            padding: 0 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            overflow-x: auto; scrollbar-width: none;
        }
        .dl-tabs::-webkit-scrollbar { display: none; }
        .dl-tab {
            background: none; border: none;
            color: #94a3b8;
            padding: 14px;
            font-size: 0.95rem; font-weight: 600;
            cursor: pointer; white-space: nowrap;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .dl-tab:hover { color: #e2e8f0; }
        .dl-tab.active { color: #00bfff; border-bottom-color: #00bfff; }

        .dl-body { padding: 30px 26px; overflow-y: auto; flex: 1; }
        .dl-body::-webkit-scrollbar { width: 8px; }
        .dl-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
        .dl-panel { display: none; }
        .dl-panel.active { display: block; }

        /* Вкладка «Скачать» */
        .dl-download-center {
            display: flex; flex-direction: column;
            align-items: center; text-align: center;
            gap: 18px; padding: 14px 0 6px;
        }
        .dl-download-btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 10px;
            padding: 16px 52px;
            background: #00bfff; color: #000;
            font-weight: 700; font-size: 1.1rem;
            border-radius: 12px; text-decoration: none; border: none;
            cursor: pointer; transition: all 0.25s ease;
        }
        .dl-download-btn:hover {
            background: #fff;
            box-shadow: 0 0 24px rgba(0, 191, 255, 0.55);
            transform: translateY(-2px);
        }
        .dl-download-btn .dl-dl-icon { font-size: 1.2rem; }
        .dl-help-link {
            color: #00bfff; font-size: 0.9rem; text-decoration: none;
            border-bottom: 1px dashed rgba(0, 191, 255, 0.5);
            transition: color 0.2s, border-color 0.2s;
        }
        .dl-help-link:hover { color: #66d9ff; border-bottom-color: #66d9ff; }
        .dl-os-note { color: #64748b; font-size: 0.82rem; margin-top: -4px; }
        .dl-status {
            max-width: 380px; margin: 4px auto 0; padding: 10px 14px;
            border: 1px solid rgba(250, 204, 21, 0.35); border-radius: 10px;
            background: rgba(250, 204, 21, 0.08); color: #fde68a;
            font-size: 0.85rem; line-height: 1.45; text-align: center;
        }

        /* Характеристики / Требования */
        .dl-specs { list-style: none; display: flex; flex-direction: column; gap: 10px; }
        .dl-specs li {
            display: flex; gap: 12px; align-items: flex-start;
            color: #cbd5e1; font-size: 0.98rem; line-height: 1.5;
            padding: 12px 14px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
        }
        .dl-specs li b { color: #f8fafc; font-weight: 600; }
        .dl-specs li .dl-check {
            color: #00bfff; font-weight: 700; flex-shrink: 0; margin-top: 1px;
        }
        .dl-intro { color: #94a3b8; font-size: 0.92rem; margin-bottom: 16px; line-height: 1.6; }

        /* Магазины */
        .dl-stores { display: flex; flex-direction: column; gap: 12px; }
        .dl-store {
            display: flex; align-items: center; gap: 16px;
            padding: 16px 18px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px; text-decoration: none;
            transition: all 0.25s ease;
        }
        .dl-store:hover {
            border-color: #00bfff; transform: translateY(-2px);
            background: rgba(0, 191, 255, 0.06);
        }
        .dl-store-icon {
            width: 46px; height: 46px; border-radius: 12px;
            background: rgba(0, 191, 255, 0.12);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; flex-shrink: 0;
        }
        .dl-store-info { display: flex; flex-direction: column; gap: 2px; }
        .dl-store-name { color: #f8fafc; font-weight: 600; font-size: 1.02rem; }
        .dl-store-desc { color: #94a3b8; font-size: 0.85rem; }
        .dl-store-arrow { margin-left: auto; color: #00bfff; font-size: 1.1rem; }

        /* Команды */
        .dl-cmds { display: flex; flex-direction: column; gap: 12px; }
        .dl-cmd-block {
            background: #0b0d13;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px; overflow: hidden;
        }
        .dl-cmd-label {
            padding: 8px 14px; font-size: 0.78rem; color: #94a3b8;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
        }
        .dl-cmd-code {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; padding: 13px 14px;
        }
        .dl-cmd-code code {
            color: #6ee7ff;
            font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
            font-size: 0.88rem; word-break: break-all;
        }
        .dl-cmd-copy {
            flex-shrink: 0;
            background: rgba(0, 191, 255, 0.12); border: none; color: #00bfff;
            padding: 6px 12px; border-radius: 8px; cursor: pointer;
            font-size: 0.78rem; font-weight: 600; transition: all 0.2s;
        }
        .dl-cmd-copy:hover { background: rgba(0, 191, 255, 0.25); }
        .dl-cmd-copy.copied { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

        /* ===== Подвал (Footer) ===== */
        footer {
            background: rgba(0, 0, 0, 0.8);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding: 60px 5% 40px 5%;
            position: relative;
            z-index: 3;
        }
        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-column h4 {
            color: #f8fafc;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        .footer-links {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .footer-links a {
            color: #94a3b8;
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-links a:hover { color: #00bfff; }
        .copyright {
            text-align: center;
            color: #64748b;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* ===== Адаптивность (Mobile) ===== */
        @media (max-width: 900px) {
            .hero-title { font-size: 2.5rem; }
            .features-grid, .download-grid, .footer-grid { grid-template-columns: 1fr; }
            .orange-block { padding: 40px 24px; }
            .orange-block h2 { font-size: 2rem; }
            .browser-image-container img { transform: none; }
            .dl-modal { max-width: 100%; max-height: 94vh; border-radius: 18px; }
            .dl-modal-header { padding: 18px 20px 14px; }
            .dl-modal-title { font-size: 1.15rem; }
            .dl-body { padding: 22px 18px; }
        }

        /* Небольшие телефоны */
        @media (max-width: 480px) {
            header { padding: 14px 4%; }
            .logo { height: 40px; }
            .logo iframe { width: 140px !important; height: 36px !important; }
            .lang-btn { padding: 6px 14px; font-size: 0.78rem; }
            main { padding: 110px 16px 60px; }
            .hero-title { font-size: 1.9rem; }
            .hero-desc { font-size: 0.95rem; }
            .hero-logo { width: 52px; margin-bottom: 14px; }
            .hero-download-btn { padding: 14px 40px; font-size: 1rem; }
            .section-title { font-size: 1.4rem; }
            .feature-card, .download-card { padding: 18px 14px; }
            .orange-block { padding: 28px 16px; }
            .orange-block h2 { font-size: 1.5rem; }
            .footer-grid { gap: 24px; padding: 40px 16px; }
            .footer-links { gap: 10px 14px; font-size: 0.85rem; }
        }