:root{
            --bg:#020513;
            --bg-2:#050a1d;
            --panel:rgba(10,16,36,.84);
            --panel-2:rgba(14,22,48,.82);
            --line:rgba(142,161,255,.15);
            --line-strong:rgba(99,145,255,.34);
            --text:#f6f8ff;
            --muted:#9ca9c7;
            --muted-2:#6f7d9a;
            --blue:#3b82f6;
            --violet:#7c3aed;
            --cyan:#22d3ee;
            --green:#34d399;
            --amber:#fbbf24;
            --danger:#fb7185;
            --shadow:0 28px 84px rgba(0,0,0,.42);
            --shadow-soft:0 16px 48px rgba(0,0,0,.24);
        }

        *{box-sizing:border-box}

        html{
            min-width:320px;
            scroll-behavior:smooth;
        }

        body{
            margin:0;
            min-width:320px;
            min-height:100vh;
            color:var(--text);
            font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            background:
                radial-gradient(circle at 18% 3%,rgba(59,130,246,.16),transparent 29%),
                radial-gradient(circle at 84% 8%,rgba(124,58,237,.11),transparent 24%),
                linear-gradient(180deg,var(--bg),var(--bg-2) 48%,var(--bg));
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
            overflow-x:hidden;
        }

        body::before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            pointer-events:none;
            background:
                linear-gradient(rgba(101,123,208,.025) 1px,transparent 1px),
                linear-gradient(90deg,rgba(101,123,208,.025) 1px,transparent 1px);
            background-size:58px 58px;
            mask-image:linear-gradient(to bottom,black,transparent 86%);
        }

        a{color:inherit;text-decoration:none}
        button{font:inherit}
        svg{display:block}

        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            padding:14px 18px 0;
        }

        .nav-shell{
            width:min(1180px,100%);
            min-height:66px;
            margin:0 auto;
            padding:8px 11px 8px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:22px;
            border:1px solid rgba(255,255,255,.10);
            border-radius:999px;
            background:rgba(8,13,29,.77);
            box-shadow:0 16px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
            backdrop-filter:blur(22px);
        }

        .brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-size:17px;
            font-weight:950;
            letter-spacing:.01em;
            white-space:nowrap;
        }

        .brand-mark{
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            border-radius:12px;
            color:#fff;
            background:linear-gradient(135deg,var(--blue),var(--violet));
            box-shadow:0 10px 26px rgba(59,130,246,.26);
        }

        .brand-mark svg{width:20px;height:20px}
        .brand span{color:#78a9ff}

        .nav-links{
            display:flex;
            align-items:center;
            gap:4px;
        }

        .nav-links a{
            min-height:42px;
            padding:0 14px;
            display:inline-flex;
            align-items:center;
            border-radius:999px;
            color:#aeb9cf;
            font-size:13px;
            font-weight:780;
            transition:.17s ease;
        }

        .nav-links a:hover,
        .nav-links a.active{
            color:#fff;
            background:rgba(255,255,255,.055);
        }

        .nav-links .login{
            margin-left:4px;
            border:1px solid rgba(255,255,255,.10);
        }

        .nav-links .start{
            color:#fff;
            background:linear-gradient(135deg,#2677ff,#2454c6);
            box-shadow:0 10px 24px rgba(44,111,255,.22);
        }

        .menu-toggle{
            display:none;
            width:43px;
            height:43px;
            border:1px solid rgba(255,255,255,.10);
            border-radius:50%;
            color:#fff;
            background:rgba(255,255,255,.04);
            cursor:pointer;
        }

        .menu-toggle svg{width:19px;height:19px;margin:auto}

        .shell{
            width:min(1180px,calc(100% - 36px));
            margin:0 auto;
            padding:58px 0 84px;
        }

        .hero{
            position:relative;
            overflow:hidden;
            min-height:440px;
            padding:68px 52px;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            border:1px solid rgba(142,161,255,.16);
            border-radius:30px;
            background:
                radial-gradient(circle at 50% 0%,rgba(53,117,255,.21),transparent 38%),
                linear-gradient(145deg,rgba(13,20,47,.91),rgba(5,9,25,.96));
            box-shadow:var(--shadow);
        }

        .hero::before{
            content:"";
            position:absolute;
            width:620px;
            height:620px;
            left:50%;
            top:58%;
            transform:translate(-50%,-50%);
            border-radius:50%;
            background:radial-gradient(circle,rgba(47,107,255,.15),rgba(47,107,255,.03) 50%,transparent 70%);
            pointer-events:none;
        }

        .hero > *{position:relative;z-index:1}

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:32px;
            padding:0 13px;
            border:1px solid rgba(90,145,255,.24);
            border-radius:999px;
            color:#a9c7ff;
            background:rgba(59,130,246,.08);
            font-size:11px;
            font-weight:900;
            letter-spacing:.12em;
            text-transform:uppercase;
        }

        .eyebrow i{
            width:7px;
            height:7px;
            border-radius:50%;
            background:var(--green);
            box-shadow:0 0 18px rgba(52,211,153,.72);
        }

        h1{
            max-width:930px;
            margin:22px auto 0;
            font-size:clamp(44px,6vw,76px);
            line-height:1.02;
            letter-spacing:-.055em;
        }

        h1 span{color:#79aaff}

        .hero-text{
            max-width:790px;
            margin:22px auto 0;
            color:#aeb9d1;
            font-size:18px;
            line-height:1.72;
        }

        .hero-pills{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:10px;
            margin-top:28px;
        }

        .pill{
            min-height:36px;
            padding:0 13px;
            display:inline-flex;
            align-items:center;
            gap:8px;
            border:1px solid rgba(255,255,255,.07);
            border-radius:999px;
            color:#8090ad;
            background:rgba(255,255,255,.025);
            font-size:10px;
            font-weight:800;
        }

        .pill svg{width:14px;height:14px;color:#79aaff}

        .pricing-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:18px;
            margin-top:28px;
        }

        .price-card{
            position:relative;
            overflow:hidden;
            min-height:520px;
            padding:30px;
            display:flex;
            flex-direction:column;
            border:1px solid rgba(255,255,255,.08);
            border-radius:24px;
            background:
                linear-gradient(145deg,rgba(11,18,41,.91),rgba(7,12,29,.96));
            box-shadow:var(--shadow-soft);
        }

        .price-card::before{
            content:"";
            position:absolute;
            width:260px;
            height:260px;
            right:-120px;
            top:-120px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(59,130,246,.13),transparent 70%);
            pointer-events:none;
        }

        .price-card.pro{
            border-color:rgba(76,133,255,.38);
            background:
                radial-gradient(circle at 90% 0%,rgba(59,130,246,.18),transparent 36%),
                linear-gradient(145deg,rgba(14,24,54,.97),rgba(7,12,30,.98));
            box-shadow:
                0 25px 75px rgba(0,0,0,.34),
                0 0 58px rgba(52,104,255,.08);
        }

        .price-card > *{position:relative;z-index:1}

        .card-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
        }

        .plan-badge{
            min-height:31px;
            padding:0 11px;
            display:inline-flex;
            align-items:center;
            gap:8px;
            border:1px solid rgba(255,255,255,.08);
            border-radius:999px;
            color:#8fa0bf;
            background:rgba(255,255,255,.025);
            font-size:10px;
            font-weight:900;
            letter-spacing:.10em;
            text-transform:uppercase;
        }

        .plan-badge i{
            width:7px;
            height:7px;
            border-radius:50%;
            background:var(--green);
            box-shadow:0 0 14px rgba(52,211,153,.65);
        }

        .price-card.pro .plan-badge{
            color:#b5ceff;
            border-color:rgba(76,133,255,.25);
            background:rgba(59,130,246,.09);
        }

        .recommended{
            min-height:31px;
            padding:0 11px;
            display:inline-flex;
            align-items:center;
            border:1px solid rgba(59,130,246,.20);
            border-radius:999px;
            color:#a9c7ff;
            background:rgba(59,130,246,.08);
            font-size:9px;
            font-weight:900;
            letter-spacing:.09em;
            text-transform:uppercase;
        }

        .plan-title{
            margin:28px 0 0;
            font-size:27px;
            letter-spacing:-.02em;
        }

        .plan-desc{
            min-height:54px;
            margin:10px 0 0;
            color:#8492ae;
            font-size:13px;
            line-height:1.62;
        }

        .price{
            margin-top:26px;
            font-size:56px;
            font-weight:950;
            letter-spacing:-.055em;
        }

        .price small{
            color:#71809d;
            font-size:14px;
            font-weight:700;
            letter-spacing:0;
        }

        .divider{
            height:1px;
            margin:24px 0;
            background:rgba(255,255,255,.07);
        }

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

        .feature-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:#99a7c1;
            font-size:13px;
            line-height:1.52;
        }

        .feature-list svg{
            width:17px;
            height:17px;
            flex:0 0 17px;
            margin-top:2px;
            color:var(--green);
        }

        .card-actions{
            margin-top:auto;
            padding-top:28px;
        }

        .btn{
            width:100%;
            min-height:52px;
            padding:0 19px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            border:1px solid rgba(255,255,255,.10);
            border-radius:14px;
            font-size:13px;
            font-weight:900;
            transition:.18s ease;
        }

        .btn:hover{transform:translateY(-2px)}
        .btn svg{width:17px;height:17px}

        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg,#2677ff,#2755c9);
            box-shadow:0 14px 34px rgba(43,108,255,.28);
        }

        .btn-ghost{
            color:#d7dff0;
            background:rgba(255,255,255,.045);
        }

        .comparison{
            margin-top:24px;
            padding:30px;
            border:1px solid var(--line);
            border-radius:22px;
            background:linear-gradient(145deg,rgba(11,18,41,.91),rgba(7,12,29,.94));
            box-shadow:var(--shadow-soft);
        }

        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#7fa7ec;
            font-size:10px;
            font-weight:900;
            letter-spacing:.12em;
            text-transform:uppercase;
        }

        .section-kicker::before{
            content:"";
            width:22px;
            height:1px;
            background:#4d78c6;
        }

        h2{
            margin:13px 0 0;
            font-size:30px;
            line-height:1.18;
            letter-spacing:-.025em;
        }

        .comparison-text{
            margin:10px 0 0;
            color:#8593ad;
            font-size:13px;
            line-height:1.62;
        }

        .table-wrap{
            overflow:auto;
            margin-top:22px;
            border:1px solid rgba(255,255,255,.07);
            border-radius:15px;
        }

        table{
            width:100%;
            min-width:720px;
            border-collapse:collapse;
            background:rgba(8,14,32,.70);
        }

        th,
        td{
            padding:15px 16px;
            border-bottom:1px solid rgba(255,255,255,.06);
            color:#8f9db8;
            text-align:left;
            font-size:12px;
            line-height:1.55;
        }

        th{
            color:#dfe7f8;
            background:rgba(255,255,255,.025);
        }

        th:not(:first-child),
        td:not(:first-child){
            text-align:center;
        }

        tr:last-child td{border-bottom:0}

        .yes{color:#8de0b9;font-weight:850}
        .limited{color:#e0c58d;font-weight:850}

        .steps-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:14px;
            margin-top:24px;
        }

        .step-card{
            padding:22px;
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(145deg,rgba(11,18,41,.88),rgba(7,12,29,.93));
            box-shadow:var(--shadow-soft);
        }

        .step-icon{
            width:42px;
            height:42px;
            display:grid;
            place-items:center;
            border-radius:12px;
            color:#90b5ff;
            background:rgba(59,130,246,.10);
        }

        .step-icon svg{width:20px;height:20px}
        .step-card h3{margin:18px 0 0;font-size:16px}
        .step-card p{margin:9px 0 0;color:#7d8ba7;font-size:12px;line-height:1.58}

        .faq-wrap{
            margin-top:24px;
            padding:30px;
            border:1px solid var(--line);
            border-radius:22px;
            background:linear-gradient(145deg,rgba(11,18,41,.91),rgba(7,12,29,.94));
            box-shadow:var(--shadow-soft);
        }

        .faq{
            display:grid;
            gap:10px;
            margin-top:21px;
        }

        .faq-item{
            overflow:hidden;
            border:1px solid rgba(255,255,255,.07);
            border-radius:14px;
            background:rgba(8,14,32,.72);
        }

        .faq-btn{
            width:100%;
            min-height:58px;
            padding:0 17px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:15px;
            border:0;
            color:#e7edfb;
            background:transparent;
            text-align:left;
            font-size:12px;
            font-weight:850;
            cursor:pointer;
        }

        .faq-btn svg{
            width:16px;
            height:16px;
            flex:0 0 16px;
            color:#72809b;
            transition:transform .18s ease;
        }

        .faq-body{
            display:none;
            padding:0 17px 16px;
            color:#8290aa;
            font-size:12px;
            line-height:1.65;
        }

        .faq-item.open .faq-body{display:block}
        .faq-item.open .faq-btn svg{transform:rotate(45deg)}

        .bottom-cta{
            margin-top:24px;
            padding:34px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:22px;
            border:1px solid rgba(99,145,255,.20);
            border-radius:22px;
            background:
                radial-gradient(circle at 80% 30%,rgba(59,130,246,.14),transparent 33%),
                linear-gradient(145deg,rgba(14,23,51,.92),rgba(7,12,29,.96));
            box-shadow:var(--shadow-soft);
        }

        .bottom-cta h2{font-size:27px}
        .bottom-cta p{
            max-width:650px;
            margin:8px 0 0;
            color:#8593ad;
            font-size:13px;
            line-height:1.62;
        }

        .bottom-cta .btn{
            width:auto;
            min-width:190px;
        }

        .footer{
            margin-top:22px;
            padding:22px 4px 0;
            display:flex;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
            color:#53617c;
            font-size:11px;
        }

        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:15px;
        }

        .footer a:hover{color:#9ab8ef}

        @media(max-width:900px){
            .nav-links{
                position:absolute;
                left:18px;
                right:18px;
                top:89px;
                padding:13px;
                display:none;
                align-items:stretch;
                flex-direction:column;
                border:1px solid rgba(255,255,255,.10);
                border-radius:18px;
                background:rgba(6,11,27,.97);
                box-shadow:var(--shadow);
                backdrop-filter:blur(22px);
            }

            .nav-links.open{display:flex}
            .nav-links a{width:100%;justify-content:center}
            .nav-links .login{margin-left:0}
            .menu-toggle{display:block}
            .steps-grid{grid-template-columns:1fr}
            .bottom-cta{align-items:flex-start;flex-direction:column}
        }

        @media(max-width:720px){
            .pricing-grid{grid-template-columns:1fr}
        }

        @media(max-width:560px){
            .site-header{padding:10px 10px 0}
            .nav-shell{min-height:60px;padding:7px 8px 7px 14px}
            .brand{font-size:15px}
            .brand-mark{width:34px;height:34px;border-radius:10px}

            .shell{
                width:min(100% - 20px,1180px);
                padding:28px 0 58px;
            }

            .hero{
                min-height:0;
                padding:38px 18px;
                border-radius:22px;
            }

            h1{font-size:40px}
            .hero-text{font-size:15px}
            .price-card{padding:24px 18px;border-radius:19px}
            .price{font-size:48px}
            .comparison,.faq-wrap{padding:23px 17px;border-radius:18px}
            .bottom-cta{padding:25px 20px}
        }

        @media(prefers-reduced-motion:reduce){
            *{scroll-behavior:auto!important;transition:none!important}
        }