:root{
            --bg:#020513;
            --bg-2:#050a1d;
            --panel:rgba(10,16,36,.82);
            --panel-strong:rgba(11,18,41,.94);
            --panel-soft:rgba(15,23,48,.72);
            --line:rgba(142,161,255,.15);
            --line-strong:rgba(99,145,255,.34);
            --text:#f6f8ff;
            --muted:#9ca9c7;
            --muted-2:#6f7d9a;
            --blue:#3b82f6;
            --blue-2:#22d3ee;
            --violet:#7c3aed;
            --green:#34d399;
            --amber:#fbbf24;
            --danger:#fb7185;
            --shadow:0 26px 80px 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:118px;
        }

        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% 4%,rgba(59,130,246,.15),transparent 29%),
                radial-gradient(circle at 85% 9%,rgba(124,58,237,.10),transparent 25%),
                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:430px;
            padding:64px 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:560px;
            height:560px;
            left:50%;
            top:58%;
            transform:translate(-50%,-50%);
            border-radius:50%;
            background:radial-gradient(circle,rgba(47,107,255,.14),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:900px;
            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:780px;
            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;
            font-size:13px;
            font-weight:880;
            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-metrics{
            width:min(760px,100%);
            margin-top:36px;
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:12px;
        }

        .metric{
            min-height:76px;
            padding:14px;
            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);
        }

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

        .metric-icon svg{
            width:19px;
            height:19px;
        }

        .metric strong{
            display:block;
            font-size:12px;
        }

        .metric span{
            display:block;
            margin-top:4px;
            color:#6f7d99;
            font-size:10px;
            line-height:1.4;
        }

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

        .doc-section{
            margin-bottom:18px;
            padding:30px;
            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:28px;
            line-height:1.18;
            letter-spacing:-.025em;
        }

        h3{
            margin:0;
            font-size:15px;
        }

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

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

        p{
            margin:0 0 14px;
        }

        strong{
            color:#eef3ff;
        }

        .cards{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
        }

        .mini-card{
            min-height:132px;
            padding:18px;
            border:1px solid rgba(255,255,255,.07);
            border-radius:15px;
            background:linear-gradient(145deg,rgba(15,24,51,.82),rgba(8,14,32,.93));
        }

        .mini-card-head{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:10px;
        }

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

        .mini-icon svg{
            width:17px;
            height:17px;
        }

        .mini-card p{
            margin:0;
            color:#7f8da8;
            font-size:12px;
            line-height:1.58;
        }

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

        .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-top:16px;
            padding:15px 17px;
            border:1px solid rgba(251,191,36,.17);
            border-radius:13px;
            color:#d8c58c;
            background:rgba(251,191,36,.065);
            font-size:12px;
            line-height:1.62;
        }

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

        .code{
            overflow:auto;
            margin:14px 0 0;
            padding:17px;
            border:1px solid rgba(99,145,255,.16);
            border-radius:14px;
            color:#c8d9ff;
            background:#050a1a;
            font:12px/1.7 Consolas,"Courier New",monospace;
            white-space:pre-wrap;
        }

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

        .tag{
            min-height:31px;
            padding:0 11px;
            display:inline-flex;
            align-items:center;
            border:1px solid rgba(255,255,255,.075);
            border-radius:999px;
            color:#8f9bb4;
            background:rgba(255,255,255,.025);
            font-size:10px;
            font-weight:780;
        }

        .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:56px;
            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:26px;
        }

        .bottom-cta 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;
        }

        @media(max-width:980px){
            .docs-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:820px){
            .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;
            }

            .hero{
                min-height:390px;
                padding:48px 26px;
            }

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

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

            .bottom-cta{
                align-items:flex-start;
                flex-direction:column;
            }
        }

        @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:42px;
            }

            .hero-text{
                font-size:15px;
            }

            .toc{
                grid-template-columns:1fr;
                border-radius:17px;
            }

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

            .step{
                grid-template-columns:32px minmax(0,1fr);
            }

            .step b{
                width:30px;
                height:30px;
            }

            .bottom-cta{
                padding:25px 20px;
            }
        }

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