:root {
            --ink: #0b0d14;
            --ink-2: #141826;
            --panel: #171b2b;
            --paper: #f6f7fb;
            --text: #171a23;
            --muted: #000;
            --muted-lt: #9297a6;
            --line: #e6e8ef;
            --accent: #ffffff;
            --accent-soft: #eef0ff;
            --mint: #ffffff;
            --mint-soft: #e3faf3;
            --amber: #ffffff;
            --radius-lg: 22px;
            --radius-md: 14px;
        }

        img, svg {
            max-width: 100%;
            display: block;
        }

        .eyebrow {
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: var(--accent);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .eyebrow::before {
            content: "";
            width: 16px;
            height: 1.5px;
            background: var(--accent);
            display: inline-block;
        }

        .eyebrow.center {
            justify-content: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: var(--ink);
            color: #fff;
            font-weight: 600;
            padding: 15px 27px;
            border-radius: 100px;
            text-decoration: none;
            transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background .18s ease;
            box-shadow: 0 1px 2px rgba(11, 13, 20, .08);
        }

        .whiteBg .btn.white {
            color: #000 !important;
        }

        .whiteBg .btn.white:hover {
            color: #000 !important;
        }

        .btn:hover {
            background: #000;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px -8px rgba(11, 13, 20, .4);
        }

        .btn.light {
             border:1px solid #000;
           background: #fff;
            color: var(--ink) !important;
        }

        .btn.light:hover {
            background: #eef0f6;
            border:1px solid #000;
            box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .25);
        }

        .btn svg {
            transition: transform .18s ease;
        }

        .btn:hover svg {
            transform: translateX(3px);
        }

        section {
            padding: 100px 0;
        }

        section.tight {
            padding: 50px 0;
        }
        
        /* ================= HERO ================= */

        .hero {
            position: relative;
            background: radial-gradient(60% 80% at 82% 8%, rgba(79, 107, 255, 0.35), transparent 60%), radial-gradient(55% 65% at 8% 100%, rgba(34, 184, 255, 0.41), transparent 60%), linear-gradient(189deg, rgb(0, 0, 0) 18.07%, rgb(61, 67, 85));
            color: #fff;
            padding: 0 0 28px;
            overflow: hidden;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
            linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
            pointer-events: none;
        }

        .hero .grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 60px;
            align-items: center;
        }

        .hero h1 {
            font-size: clamp(34px, 4.8vw, 54px);
            margin-bottom: 20px;
        }

        .hero h1 em {
            font-style: normal;
            color: var(--mint);
        }

        .hero p.lead {
            font-size: 17.5px;
            color: #b7bcca;
            margin-bottom: 28px;
        }

        .hero ul {
            list-style: none;
            margin: 0 0 34px;
            padding: 0;
            display: grid;
            gap: 13px;
        }

        .hero ul li {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            color: #d3d6e1;
        }

        .hero ul li svg {
            flex: 0 0 auto;
            margin-top: 7px;
            color: var(--mint);
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .hero-actions .meta {
            color: #868c9b;
        }/* Signature hero illustration: a streaming session routed through a private tunnel */

        .hero-art {
            position: relative;
        }

        .hero-art .glow {
            position: absolute;
            inset: -40px;
            z-index: 0;
            background: radial-gradient(closest-side, rgba(79, 107, 255, .35), transparent 70%);
            filter: blur(6px);
        }

        .hero-art svg {
            position: relative;
            z-index: 1;
        }/* ================= WHY GRID ================= */

        .why-head {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 56px;
        }

        .why-head p {
            color: var(--muted);
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .why-card {
            background: #fff;
            padding: 32px 26px;
            transition: background .18s ease;
        }

        .why-card:hover {
            background: var(--paper);
        }

        .why-card .ic {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-soft);
        }

        .why-card:nth-child(4n + 2) .ic {
            background: var(--mint-soft);
        }

        .why-card:nth-child(4n + 2) .ic svg {
            color: #0d9f7d;
        }

        .why-card:nth-child(4n + 3) .ic {
            background: #fff2e2;
        }

        .why-card:nth-child(4n + 3) .ic svg {
            color: #c8790f;
        }

        .why-card .ic svg {
            width: 41px;
            height: 41px;
            color: var(--accent);
        }

        .why-card p {
            color: var(--muted);
        }

        .why-card b {
            color: var(--text);
            font-weight: 600;
        }/* ================= GUARANTEE ================= */

        .guarantee {
            background: var(--paper);
        }

        .guarantee .box {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 36px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 42px 46px;
            box-shadow: 0 30px 60px -35px rgba(20, 22, 35, .25);
        }

        .guarantee .badge {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            flex: 0 0 auto;
            background: conic-gradient(from 220deg, var(--accent), var(--mint), var(--accent));
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
        }

        .guarantee .badge span {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .guarantee .badge svg {
            width: 36px;
            height: 36px;
            color: var(--ink);
        }

        .guarantee h3 {
            font-size: 21px;
            margin-bottom: 8px;
        }

        .guarantee p {
            color: var(--muted);
        }/* ================= STEPS ================= */

        .steps-head {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 60px;
        }

        .steps-head p {
            color: var(--muted);
        }

        .step-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
        }

        .step {
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 0;
            overflow: hidden;
            transition: box-shadow .2s ease, transform .2s ease;
        }

        .step:hover {
            box-shadow: 0 30px 60px -35px rgba(20, 22, 35, .3);
            transform: translateY(-4px);
        }

        .step .art {
            background: var(--paper);
        }

        .step .body {
            padding: 26px 26px 30px;
        }

        .step .tag {
            font-size: 11.5px;
            letter-spacing: .08em;
            color: var(--muted-lt);
            text-transform: uppercase;
            margin-bottom: 10px;
            display: block;
        }

        .step p.desc {
            color: var(--muted);
            margin: 8px 0 14px;
        }

        .step a.link {
            font-weight: 600;
            color: var(--accent);
            text-decoration: none;
        }/* ================= DOWNLOAD ================= */

        .download {
            background: var(--ink);
            color: #fff;
        }

        .download .top {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 24px;
            margin-bottom: 38px;
            flex-wrap: wrap;
        }

        .download h2 {
            color: #fff;
            max-width: 520px;
        }

        .download p {
            color: #a7abba;
            max-width: 440px;
        }

        .platform-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
        }

        .platform {
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius-md);
            padding: 22px 12px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 11px;
            transition: background .18s ease, border-color .18s ease, transform .18s ease;
        }

        .platform:hover {
            background: rgba(255, 255, 255, .06);
            border-color: rgba(255, 255, 255, .22);
            transform: translateY(-3px);
        }

        .platform svg {
            width: 44px;
            height: 44px;
            color: #fff;
        }

        .platform span {
            font-weight: 600;
        }/* ================= DETAIL ================= */

        .detail {
            border-top: 1px solid var(--line);
        }

        .detail .grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 10%;
            align-items: center;
        }

        .detail.reverse .grid {
            direction: rtl;
        }

        .detail.reverse .grid > * {
            direction: ltr;
        }

        .detail p.copy {
            color: var(--muted);
            margin-top: 12px;
            max-width: 860px;
        }

        .detail .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 20px;
        }

        .detail .tags span {
            font-weight: 500;
            color: var(--text);
            background: var(--paper);
            border: 1px solid var(--line);
            padding: 6px 12px;
            border-radius: 100px;
        }

        .art-frame {
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: 0 40px 80px -50px rgba(20, 22, 35, .4);
        }/* ================= FINAL CTA ================= */

        .cta-final {
            text-align: center;
            padding: 90px 0;
            background: linear-gradient(#ededed, #f6f7fb);
        }

        .cta-final h2 {
            margin-bottom: 14px;
            color: #000
        }

        .cta-final p {
            color: var(--muted);
            margin-bottom: 30px;
        }

        @media (max-width: 980px) {
            .detail .grid {
                grid-template-columns: 1fr 1fr;
            }

            .hero .grid {
                grid-template-columns: 1fr;
            }

            .hero-art {
                order: -1;
                max-width: 420px;
                margin: 0 auto;
            }

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

            .step-row {
                grid-template-columns: 1fr;
            }

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

            .detail .grid, .detail.reverse .grid {
                grid-template-columns: 1fr;
                direction: ltr;
            }

            .detail .grid > *:first-child {
                order: 1;
            }

            .guarantee .box {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .guarantee .badge {
                margin: 0 auto;
            }
        }

        @media (max-width: 560px) {
            .why-grid {
                grid-template-columns: 1fr;
            }

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

            section {
                padding: 72px 0;
            }

            .guarantee .box {
                padding: 32px 26px;
            }
        }