: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;
            scroll-padding-top:112px;
        }

        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,.15),transparent 29%),
                radial-gradient(circle at 84% 8%,rgba(124,58,237,.10),transparent 24%),
                linear-gradient(180deg,var(--bg),var(--bg-2) 48%,var(--bg));
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
            overflow-x:hidden;
        }

        body.modal-open{overflow: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,
        .nav-links button{
            min-height:42px;
            padding:0 14px;
            display:inline-flex;
            align-items:center;
            border:0;
            border-radius:999px;
            color:#aeb9cf;
            background:transparent;
            font-size:13px;
            font-weight:780;
            cursor:pointer;
            transition:.17s ease;
        }

        .nav-links a:hover,
        .nav-links button: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 82px;
        }

        .hero{
            position:relative;
            overflow:hidden;
            min-height:510px;
            padding:72px 54px;
            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,.20),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}

        .breadcrumbs{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:8px;
            margin-bottom:20px;
            color:#65738e;
            font-size:11px;
        }

        .breadcrumbs a:hover{color:#a9c7ff}

        .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:980px;
            margin:22px auto 0;
            font-size:clamp(42px,6vw,74px);
            line-height:1.03;
            letter-spacing:-.055em;
        }

        h1 span{color:#79aaff}

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

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:12px;
            margin-top:29px;
        }

        .btn{
            min-height:48px;
            padding:0 19px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            border:1px solid rgba(255,255,255,.10);
            border-radius:13px;
            color:inherit;
            background:transparent;
            font-size:13px;
            font-weight:880;
            cursor:pointer;
            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);
        }

        .hero-facts{
            width:min(900px,100%);
            margin-top:36px;
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:12px;
        }

        .fact{
            min-height:84px;
            padding:15px;
            display:flex;
            align-items:center;
            gap:12px;
            text-align:left;
            border:1px solid rgba(255,255,255,.07);
            border-radius:15px;
            background:rgba(8,14,32,.67);
        }

        .fact-icon{
            width:40px;
            height:40px;
            flex:0 0 40px;
            display:grid;
            place-items:center;
            border-radius:11px;
            color:#8eb5ff;
            background:rgba(59,130,246,.10);
        }

        .fact-icon svg{width:19px;height:19px}
        .fact strong{display:block;font-size:12px}
        .fact span{display:block;margin-top:4px;color:#6f7d99;font-size:10px;line-height:1.4}

        .article-layout{
            display:grid;
            grid-template-columns:274px minmax(0,1fr);
            gap:24px;
            margin-top:28px;
            align-items:start;
        }

        .toc{
            position:sticky;
            top:98px;
            padding:16px;
            max-height:calc(100vh - 118px);
            overflow:auto;
            border:1px solid var(--line);
            border-radius:20px;
            background:rgba(8,14,33,.82);
            box-shadow:var(--shadow-soft);
            backdrop-filter:blur(18px);
        }

        .toc-title{
            margin:4px 8px 12px;
            color:#667491;
            font-size:10px;
            font-weight:900;
            letter-spacing:.13em;
            text-transform:uppercase;
        }

        .toc a{
            min-height:43px;
            padding:0 10px;
            display:flex;
            align-items:center;
            gap:10px;
            border-radius:11px;
            color:#8996b1;
            font-size:12px;
            font-weight:760;
            transition:.16s ease;
        }

        .toc a:hover,
        .toc a.active{
            color:#fff;
            background:rgba(59,130,246,.10);
        }

        .toc-number{
            width:24px;
            height:24px;
            flex:0 0 24px;
            display:grid;
            place-items:center;
            border:1px solid rgba(255,255,255,.08);
            border-radius:8px;
            color:#779ee4;
            background:rgba(255,255,255,.025);
            font-size:9px;
            font-weight:900;
        }

        .content{min-width:0}

        .article-section{
            margin-bottom:18px;
            padding:31px;
            scroll-margin-top:110px;
            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-head{
            display:grid;
            grid-template-columns:48px minmax(0,1fr);
            gap:15px;
            align-items:start;
            margin-bottom:22px;
        }

        .section-number{
            width:46px;
            height:46px;
            display:grid;
            place-items:center;
            border:1px solid rgba(85,139,255,.25);
            border-radius:13px;
            color:#9cbdff;
            background:rgba(59,130,246,.10);
            font-size:13px;
            font-weight:950;
        }

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

        h3{
            margin:23px 0 9px;
            font-size:17px;
        }

        .lead{
            margin:8px 0 0;
            color:#8996b2;
            font-size:14px;
            line-height:1.62;
        }

        p,
        li{
            color:#99a6c1;
            font-size:14px;
            line-height:1.76;
        }

        p{margin:0 0 15px}
        strong{color:#eef3ff}

        .check-list{
            margin:17px 0 0;
            padding:0;
            display:grid;
            gap:11px;
            list-style:none;
        }

        .check-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
        }

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

        .steps{
            display:grid;
            gap:10px;
            margin-top:18px;
        }

        .step{
            padding:15px 16px;
            display:grid;
            grid-template-columns:36px minmax(0,1fr);
            gap:12px;
            align-items:start;
            border:1px solid rgba(255,255,255,.065);
            border-radius:14px;
            background:rgba(8,14,32,.70);
        }

        .step b{
            width:34px;
            height:34px;
            display:grid;
            place-items:center;
            border-radius:10px;
            color:#dbe7ff;
            background:rgba(59,130,246,.13);
            font-size:11px;
        }

        .step p{margin:5px 0 0;color:#7f8ca7;font-size:12px;line-height:1.55}

        .notice{
            margin:17px 0 0;
            padding:16px 18px;
            border:1px solid rgba(251,191,36,.17);
            border-radius:14px;
            color:#d8c58c;
            background:rgba(251,191,36,.065);
            font-size:12px;
            line-height:1.65;
        }

        .notice.green{
            border-color:rgba(52,211,153,.18);
            color:#a8dec8;
            background:rgba(52,211,153,.06);
        }

        .notice.blue{
            border-color:rgba(59,130,246,.20);
            color:#adc8fa;
            background:rgba(59,130,246,.07);
        }

        .source-links{
            display:flex;
            flex-wrap:wrap;
            gap:9px;
            margin-top:17px;
        }

        .source-links a{
            min-height:34px;
            padding:0 12px;
            display:inline-flex;
            align-items:center;
            gap:7px;
            border:1px solid rgba(255,255,255,.075);
            border-radius:999px;
            color:#8fa5ce;
            background:rgba(255,255,255,.025);
            font-size:10px;
            font-weight:800;
        }

        .source-links a:hover{
            color:#fff;
            border-color:rgba(99,145,255,.25);
        }

        .source-links svg{width:13px;height:13px}

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

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

        th,
        td{
            padding:14px 15px;
            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);
        }

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

        .faq{
            display:grid;
            gap:10px;
        }

        .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)}

        .pricing-strip{
            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);
        }

        .pricing-strip h2{font-size:27px}
        .pricing-strip p{max-width:650px;margin:8px 0 0;font-size:13px}

        .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}

        .pricing-modal{
            position:fixed;
            inset:0;
            z-index:100;
            display:none;
            align-items:center;
            justify-content:center;
            padding:20px;
            background:rgba(0,3,12,.80);
            backdrop-filter:blur(14px);
        }

        .pricing-modal.open{display:flex}

        .pricing-window{
            position:relative;
            width:min(880px,100%);
            max-height:calc(100vh - 40px);
            overflow:auto;
            padding:29px;
            border:1px solid rgba(142,161,255,.20);
            border-radius:26px;
            background:
                radial-gradient(circle at 75% 0%,rgba(59,130,246,.16),transparent 33%),
                linear-gradient(145deg,#0b1229,#05091a);
            box-shadow:0 40px 120px rgba(0,0,0,.65);
        }

        .modal-close{
            position:absolute;
            right:18px;
            top:18px;
            width:40px;
            height:40px;
            display:grid;
            place-items:center;
            border:1px solid rgba(255,255,255,.10);
            border-radius:50%;
            color:#aeb9cf;
            background:rgba(255,255,255,.04);
            cursor:pointer;
        }

        .modal-close:hover{color:#fff;background:rgba(255,255,255,.08)}
        .modal-close svg{width:17px;height:17px}

        .modal-head{
            max-width:650px;
            padding-right:48px;
        }

        .modal-head span{
            color:#79aaff;
            font-size:11px;
            font-weight:900;
            letter-spacing:.12em;
            text-transform:uppercase;
        }

        .modal-head h2{
            margin-top:10px;
            font-size:34px;
        }

        .modal-head p{
            margin-top:10px;
            font-size:13px;
        }

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

        .price-card{
            padding:23px;
            border:1px solid rgba(255,255,255,.08);
            border-radius:19px;
            background:rgba(7,13,31,.80);
        }

        .price-card.pro{
            border-color:rgba(76,133,255,.38);
            background:
                radial-gradient(circle at 100% 0%,rgba(59,130,246,.18),transparent 42%),
                rgba(8,15,36,.92);
            box-shadow:0 18px 52px rgba(31,85,203,.15);
        }

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

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

        .price{
            margin-top:19px;
            font-size:38px;
            font-weight:950;
            letter-spacing:-.04em;
        }

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

        .price-card p{
            min-height:47px;
            margin-top:9px;
            color:#7f8ca8;
            font-size:12px;
        }

        .price-list{
            margin:18px 0 22px;
            padding:0;
            display:grid;
            gap:10px;
            list-style:none;
        }

        .price-list li{
            display:flex;
            align-items:flex-start;
            gap:9px;
            color:#9aa8c3;
            font-size:12px;
            line-height:1.5;
        }

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

        .price-card .btn{width:100%}

        .modal-foot{
            margin-top:16px;
            color:#5e6c88;
            text-align:center;
            font-size:10px;
            line-height:1.5;
        }

        @media(max-width:980px){
            .article-layout{grid-template-columns:1fr}
            .toc{
                position:static;
                max-height:none;
                display:grid;
                grid-template-columns:repeat(2,minmax(0,1fr));
            }
            .toc-title{grid-column:1/-1}
        }

        @media(max-width:860px){
            .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,.nav-links button{width:100%;justify-content:center}
            .nav-links .login{margin-left:0}
            .menu-toggle{display:block}
            .hero-facts{grid-template-columns:1fr}
            .pricing-strip{align-items:flex-start;flex-direction:column}
        }

        @media(max-width:650px){
            .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}
            .toc{grid-template-columns:1fr;border-radius:17px}

            .article-section{
                padding:22px 17px;
                border-radius:18px;
            }

            .section-head{
                grid-template-columns:40px minmax(0,1fr);
                gap:12px;
            }

            .section-number{
                width:40px;
                height:40px;
                border-radius:11px;
            }

            h2{font-size:24px}
            .pricing-strip{padding:25px 20px}
            .pricing-window{padding:23px 16px;border-radius:21px}
        }

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