:root {
            --bg: #0a0b0e;
            --bg-soft: #0e0f14;
            --bg-card: #131419;
            --text: #e8ecf7;
            --text-muted: #9aa3b2;
            --brand: #6b7cff;
            --brand-2: #21dcc7;
            --accent-orange: #ff6b35;
            --accent-pink: #ff35a0;
            --card: #ffffff;
            --border: #2a3142;
            --ring: rgba(107,124,255,.35);
            --gradient-1: linear-gradient(135deg,var(--brand),var(--brand-2));
            --gradient-2: linear-gradient(135deg,var(--accent-orange),var(--accent-pink));
            --icon-box: 56px;
            --icon-radius: 16px;
            --icon-size: 24px;
            --icon-stroke: 1.9;
            --icon-color: var(--brand);
        }

        @media (prefers-color-scheme: light) {
            :root {
                --bg: #ffffff;
                --bg-soft: #f8f9fb;
                --bg-card: #ffffff;
                --text: #0e1014;
                --text-muted: #5b6170;
                --card: #ffffff;
                --border: #e7e9ef;
            }
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        html, body {
            height: 100%
        }

        body {
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
            color: var(--text);
            background: var(--bg);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-20px)
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -200% center
            }

            100% {
                background-position: 200% center
            }
        }

        .animate-in {
            animation: fadeInUp .8s ease-out forwards;
            opacity: 0
        }

        .delay-1 {
            animation-delay: .1s
        }

        .delay-2 {
            animation-delay: .2s
        }

        .delay-3 {
            animation-delay: .3s
        }

        .container {
            width: min(1200px,100% - 2rem);
            margin-inline: auto
        }

        /* Buttons & badges */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: 1rem 1.4rem;
            border-radius: 16px;
            font-weight: 600;
            text-decoration: none;
            border: 2px solid transparent;
            transition: .3s;
            cursor: pointer;
            position: relative;
            overflow: hidden
        }

            .btn::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255,255,255,.3);
                transform: translate(-50%,-50%);
                transition: width .6s,height .6s
            }

            .btn:hover::before {
                width: 300px;
                height: 300px
            }

        .btn-primary {
            background: var(--gradient-1);
            color: #fff;
            box-shadow: 0 10px 30px rgba(107,124,255,.25);
            transform: translateY(0)
        }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 15px 40px rgba(107,124,255,.35)
            }

        .btn-outline {
            border-color: var(--border);
            color: var(--text);
            background: transparent
        }

            .btn-outline:hover {
                border-color: var(--brand);
                background: rgba(107,124,255,.1)
            }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .45rem .9rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.05);
            backdrop-filter: blur(8px);
            font-weight: 500
        }

            .pill svg {
                width: 16px;
                height: 16px;
                stroke: var(--brand);
                fill: none;
                stroke-width: 1.8
            }

        /* Hero */
        .hero {
            background: radial-gradient(1400px 900px at 70% -10%, rgba(107,124,255,.25), transparent 40%), radial-gradient(1000px 700px at 20% 100%, rgba(33,220,199,.15), transparent 40%), radial-gradient(800px 600px at 90% 50%, rgba(255,107,53,.1), transparent 40%), var(--bg);
            color: var(--text);
            padding: 100px 0 60px;
            position: relative;
            overflow: hidden;
        }

            .hero::before {
                content: '';
                position: absolute;
                width: 200%;
                height: 200%;
                top: -50%;
                left: -50%;
                background: linear-gradient(45deg,transparent,rgba(107,124,255,.03),transparent);
                animation: shimmer 8s infinite
            }

            .hero h1 {
                font-size: clamp(2.8rem,5vw,4.5rem);
                letter-spacing: -.03em;
                line-height: 1.1;
                margin: 20px 0 16px;
                background: linear-gradient(135deg,var(--text) 0%,var(--brand) 50%,var(--brand-2) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 800;
                padding-bottom: 3px;
            }

            .hero p {
                font-size: clamp(1.1rem,2vw,1.4rem);
                color: var(--text-muted);
                max-width: 50ch;
                line-height: 1.7
            }

        .hero-cta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 32px
        }

        .badges {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 20px
        }

        .tagline {
            font-size: 1.2rem;
            color: var(--brand);
            font-weight: 600;
            margin-bottom: 8px
        }

        /* App card */
        .app-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(8px);
            border: 1px solid var(--border);
            border-radius: 28px;
            padding: clamp(16px,3vw,28px);
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }

            .app-card.center {
                align-items: center;
                text-align: center;
            }

        .app-icon {
            width: clamp(180px,28vw,320px);
            height: auto;
            border-radius: 22%;
            box-shadow: 0 10px 24px rgba(0,0,0,.12);
            display: block;
        }

        .app-caption {
            font-size: clamp(16px,2.2vw,22px);
            font-weight: 600;
            color: #0d0f14
        }

        .app-caption {
            width: 100%;
            min-height: 3.6em;
        }

        .app-title {
            color: var(--text);
        }

        .app-subtitle {
            color: var(--text-muted);
            font-weight: 600;
        }

        @media (prefers-color-scheme: dark) {
            .app-caption {
                color: #e8ecf7
            }

            .app-card {
                background: rgba(255,255,255,0.04)
            }
        }

        /* Mock/screenshot blocks */
        .mock {
            border-radius: 24px;
            background: linear-gradient(145deg,var(--bg-card),var(--bg-soft));
            border: 1px solid var(--border);
            box-shadow: 0 10px 40px rgba(0,0,0,.15),0 2px 10px rgba(0,0,0,.1);
            overflow: hidden;
            position: relative;
            animation: float 6s ease-in-out infinite
        }

            .mock::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
                animation: shimmer 3s infinite
            }

            .mock img {
                display: block;
                width: 100%;
                height: auto
            }

        /* Grid */
        .grid {
            display: grid;
            gap: 24px
        }

        @media (min-width:920px) {
            .hero-grid {
                grid-template-columns: 1.2fr .8fr;
                align-items: center;
                gap: 48px
            }

            .features {
                grid-template-columns: repeat(3,1fr)
            }

            .how-grid {
                grid-template-columns: 1.1fr 1fr;
                gap: 48px;
                align-items: center
            }

            .trust-grid {
                grid-template-columns: repeat(2,1fr)
            }
        }

        /* Cards & sections */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 28px;
            transition: .3s;
            position: relative;
            overflow: hidden
        }

            .card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 2px;
                background: var(--gradient-1);
                transform: scaleX(0);
                transition: transform .3s
            }

            .card:hover {
                transform: translateY(-4px);
                box-shadow: 0 20px 40px rgba(0,0,0,.1);
                border-color: var(--brand)
            }

                .card:hover::before {
                    transform: scaleX(1)
                }

            .card h3 {
                margin: .5rem 0 .8rem;
                font-size: 1.15rem;
                font-weight: 600
            }

            .card p {
                color: var(--text-muted);
                margin: 0;
                line-height: 1.6
            }

        section {
            padding: 80px 0
        }

        .section-title {
            font-size: clamp(1.8rem,3vw,2.5rem);
            margin: 0 0 12px;
            font-weight: 700;
            letter-spacing: -.02em
        }

        .section-sub {
            color: var(--text-muted);
            margin: 0 0 36px;
            font-size: 1.15rem
        }

        /* Solid feature icons */
        .feature-icon {
            width: var(--icon-box);
            height: var(--icon-box);
            display: grid;
            place-items: center;
            border-radius: var(--icon-radius);
            background: linear-gradient(180deg, rgba(107,124,255,.12), rgba(33,220,199,.06));
            border: 1px solid var(--border);
            box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
            margin-bottom: 16px;
        }

            .feature-icon svg {
                width: var(--icon-size);
                height: var(--icon-size);
                stroke: var(--icon-color);
                fill: none;
                stroke-width: var(--icon-stroke);
                stroke-linecap: round;
                stroke-linejoin: round;
                filter: drop-shadow(0 1px 0 rgba(0,0,0,.18));
            }

            .feature-icon[data-variant="green"] svg {
                stroke: var(--brand-2);
            }

        /* How section */
        .how-section {
            background: linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%)
        }

        .step {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            margin-bottom: 28px
        }

        .dot {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--gradient-1);
            color: #fff;
            display: grid;
            place-items: center;
            font-weight: 700;
            font-size: 1.1rem;
            flex-shrink: 0;
            box-shadow: 0 8px 20px rgba(107,124,255,.3)
        }

        .step h3 {
            margin: 0 0 8px;
            font-size: 1.2rem
        }

        .step p {
            margin: 0;
            color: var(--text-muted)
        }

        /* CTA */
        .cta {
            text-align: center;
            padding: 100px 0;
            background: radial-gradient(800px 600px at 50% 50%, rgba(107,124,255,.1), transparent), var(--bg-soft)
        }

            .cta .btn {
                font-size: 1.1rem;
                padding: 1.2rem 2rem
            }

        :root {
            --footer-padding: 40px 0 60px;
            --footer-color: var(--text-muted);
            --footer-border: var(--border);
            --footer-bg: var(--bg-soft);
            --footer-link-hover: var(--brand);
        }

        .lang-switcher {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .lang-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color .15s ease, border-color .15s ease, color .15s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .lang-button:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text);
        }

        @media (prefers-color-scheme: light) {
            .lang-button:hover {
                background: rgba(0, 0, 0, 0.04);
            }
        }

        .lang-button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
            border-color: rgba(0, 113, 227, 0.6);
        }

        .lang-icon {
            width: 16px;
            height: 16px;
            opacity: .85;
        }

        .lang-caret {
            width: 14px;
            height: 14px;
            opacity: .7;
        }

        .lang-dropdown {
            position: absolute;
            right: 0;
            bottom: calc(100% + 10px);
            min-width: 180px;
            padding: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
        }

        .lang-switcher.open .lang-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .lang-option {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 10px;
            border-radius: 10px;
            border: none;
            background: transparent;
            color: var(--text);
            font: inherit;
            font-size: 14px;
            cursor: pointer;
            text-align: left;
            transition: background-color .12s ease, color .12s ease;
        }

        .lang-option:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        @media (prefers-color-scheme: light) {
            .lang-option:hover {
                background: rgba(0, 0, 0, 0.04);
            }
        }

        .lang-option:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
        }

        .lang-option.active {
            background: var(--brand);
            color: #fff;
        }

        .lang-flag {
            font-size: 18px;
            line-height: 1;
        }

        .lang-code {
            margin-left: auto;
            opacity: .7;
            font-size: 12px;
            letter-spacing: .02em;
        }

        /* Sign-in link - inside app-card */
        .signin-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
            margin-top: 16px;
        }

            .signin-link:hover {
                color: var(--text);
                gap: 8px;
            }

            .signin-link .arrow {
                transition: transform 0.3s ease;
                font-size: 16px;
                opacity: 0.9;
            }

            .signin-link:hover .arrow {
                transform: translateX(3px);
                opacity: 1;
            }

        /* app-caption should be flex column */
        .app-caption {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Right column - centered */
        .hero-grid > div:last-child {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Responsive */
        @media (max-width:768px) {
            .hero {
                padding-top: calc(78px + env(safe-area-inset-top));
                padding-bottom: 44px;
            }

            section {
                padding: 60px 0
            }

            .hero-cta {
                margin-top: 28px;
            }

            .badges {
                margin-top: 18px;
            }

            .cta {
                padding: 60px 0
            }

            .features {
                grid-template-columns: 1fr
            }

            .trust-grid {
                grid-template-columns: 1fr
            }
        }

        /* Images & badges */
        .img-placeholder {
            background: linear-gradient(270deg,var(--bg-soft),var(--bg-card),var(--bg-soft));
            background-size: 400% 100%;
            animation: shimmer 2s ease-in-out infinite;
            border-radius: 16px;
            aspect-ratio: 16/10;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: .9rem
        }

        .store-badge {
            display: inline-block;
            line-height: 0
        }

            .store-badge img {
                height: 44px;
                display: block
            }


        .install-column {
            display: flex;
            flex-direction: column; /* в столбик */
            gap: 16px;
            align-items: center;
            justify-content: center;
        }

        /* QR */
        .qr {
            display: none;
            text-align: center;
        }

            .qr img {
                border-radius: 12px;
                background: var(--bg-card, #fff);
                padding: 8px;
                border: 1px solid var(--border, #e7e9ef);
                width: 124px;
                height: 124px;
            }

        .qr-caption {
            margin-top: 6px;
            font-size: 13px;
            color: var(--text-muted, #666);
        }

        /* Показываем QR только на десктопах (мышь + normal pointer) */
        @media (hover:hover) and (pointer:fine) {
            .qr {
                display: block;
            }
        }

        /* На очень маленьких экранах не показываем совсем */
        @media (max-width: 480px) {
            .qr {
                display: none;
            }
        }