/* roulang page: index */
:root{
            --primary:#6d5dfc;
            --primary-strong:#4c3ff0;
            --primary-soft:#eceaff;
            --secondary:#12b8a6;
            --accent:#ffb84d;
            --danger:#ff6b6b;
            --dark:#15172b;
            --dark-2:#222540;
            --text:#25283d;
            --muted:#71758c;
            --light:#f7f8fc;
            --surface:#ffffff;
            --surface-2:#fbfbff;
            --border:#e6e8f2;
            --shadow-sm:0 8px 24px rgba(21,23,43,.08);
            --shadow:0 18px 50px rgba(35,38,74,.12);
            --shadow-lg:0 28px 80px rgba(33,33,70,.16);
            --radius-sm:12px;
            --radius:22px;
            --radius-lg:34px;
            --sidebar:286px;
            --ease:all .24s ease;
        }

        *{
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 80% 0%, rgba(109,93,252,.16), transparent 32%),
                radial-gradient(circle at 8% 28%, rgba(18,184,166,.12), transparent 28%),
                linear-gradient(180deg,#fbfbff 0%,#f6f7fb 58%,#ffffff 100%);
            line-height:1.75;
            overflow-x:hidden;
            padding-bottom:86px;
        }

        a{
            color:inherit;
            text-decoration:none;
            transition:var(--ease);
        }

        a:hover{
            color:var(--primary-strong);
        }

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

        button,
        input,
        select,
        textarea{
            font:inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible{
            outline:3px solid rgba(109,93,252,.28);
            outline-offset:3px;
            border-radius:12px;
        }

        ::selection{
            color:#fff;
            background:var(--primary);
        }

        .app-shell{
            min-height:100vh;
        }

        .side-nav{
            position:fixed;
            left:22px;
            top:22px;
            bottom:22px;
            width:calc(var(--sidebar) - 44px);
            z-index:1020;
            background:rgba(255,255,255,.82);
            border:1px solid rgba(230,232,242,.86);
            border-radius:30px;
            box-shadow:var(--shadow);
            backdrop-filter:blur(18px);
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:20px;
        }

        .brand-lockup{
            display:flex;
            align-items:center;
            gap:12px;
            padding:6px 4px 18px;
            border-bottom:1px solid var(--border);
        }

        .brand-mark{
            width:46px;
            height:46px;
            border-radius:16px;
            background:
                linear-gradient(135deg,var(--primary),var(--secondary));
            color:#fff;
            display:grid;
            place-items:center;
            box-shadow:0 12px 26px rgba(109,93,252,.28);
            flex:0 0 auto;
        }

        .brand-mark i{
            font-size:20px;
        }

        .brand-name{
            font-weight:900;
            letter-spacing:-.03em;
            line-height:1.18;
            font-size:18px;
            color:var(--dark);
        }

        .brand-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:2px;
        }

        .side-search{
            position:relative;
        }

        .side-search i{
            position:absolute;
            left:14px;
            top:50%;
            transform:translateY(-50%);
            color:var(--muted);
            font-size:14px;
        }

        .side-search input{
            width:100%;
            height:46px;
            border:1px solid var(--border);
            border-radius:16px;
            background:#fff;
            padding:0 14px 0 40px;
            color:var(--text);
            transition:var(--ease);
        }

        .side-search input:focus{
            border-color:rgba(109,93,252,.55);
            box-shadow:0 0 0 4px rgba(109,93,252,.1);
        }

        .nav-label{
            margin:2px 4px -8px;
            color:var(--muted);
            font-size:12px;
            letter-spacing:.08em;
        }

        .side-menu{
            display:grid;
            gap:8px;
        }

        .side-menu a{
            display:flex;
            align-items:center;
            gap:12px;
            padding:13px 14px;
            border-radius:16px;
            color:var(--muted);
            font-weight:750;
        }

        .side-menu a i{
            width:22px;
            text-align:center;
        }

        .side-menu a:hover{
            background:var(--primary-soft);
            color:var(--primary-strong);
            transform:translateX(2px);
        }

        .side-menu a.active{
            color:#fff;
            background:linear-gradient(135deg,var(--primary),var(--primary-strong));
            box-shadow:0 14px 30px rgba(109,93,252,.24);
        }

        .side-panel{
            margin-top:auto;
            border-radius:22px;
            padding:18px;
            background:
                linear-gradient(145deg,rgba(21,23,43,.96),rgba(44,47,84,.92));
            color:#fff;
            overflow:hidden;
            position:relative;
        }

        .side-panel:before{
            content:"";
            position:absolute;
            width:120px;
            height:120px;
            right:-46px;
            top:-52px;
            border-radius:50%;
            background:rgba(255,184,77,.25);
        }

        .side-panel strong{
            display:block;
            font-size:15px;
            margin-bottom:8px;
            position:relative;
        }

        .side-panel p{
            margin:0 0 14px;
            color:rgba(255,255,255,.74);
            font-size:13px;
            line-height:1.65;
            position:relative;
        }

        .side-panel .mini-btn{
            position:relative;
            display:inline-flex;
            align-items:center;
            gap:7px;
            border-radius:999px;
            padding:8px 12px;
            background:#fff;
            color:var(--dark);
            font-size:13px;
            font-weight:800;
        }

        .side-panel .mini-btn:hover{
            transform:translateY(-2px);
            color:var(--primary-strong);
        }

        .mobile-header{
            display:none;
            position:sticky;
            top:0;
            z-index:1030;
            background:rgba(255,255,255,.88);
            backdrop-filter:blur(16px);
            border-bottom:1px solid var(--border);
        }

        .mobile-header-inner{
            height:70px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:0 18px;
        }

        .mobile-brand{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
        }

        .mobile-brand .brand-mark{
            width:40px;
            height:40px;
            border-radius:14px;
        }

        .mobile-brand span{
            font-weight:900;
            color:var(--dark);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        .menu-toggle{
            border:0;
            width:44px;
            height:44px;
            border-radius:15px;
            background:var(--primary-soft);
            color:var(--primary-strong);
            display:grid;
            place-items:center;
            transition:var(--ease);
        }

        .menu-toggle:hover,
        .menu-toggle:active{
            background:var(--primary);
            color:#fff;
        }

        .offcanvas{
            border:0;
            background:#fbfbff;
        }

        .offcanvas .side-menu a{
            color:var(--text);
        }

        .page{
            margin-left:var(--sidebar);
            min-width:0;
        }

        .container-page{
            width:min(1180px, calc(100% - 42px));
            margin:0 auto;
        }

        main{
            overflow:hidden;
        }

        .section{
            padding:74px 0;
            position:relative;
        }

        .section-tight{
            padding:52px 0;
        }

        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:28px;
            margin-bottom:28px;
        }

        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border:1px solid rgba(109,93,252,.18);
            color:var(--primary-strong);
            background:rgba(109,93,252,.08);
            border-radius:999px;
            padding:7px 12px;
            font-size:13px;
            font-weight:850;
            margin-bottom:12px;
        }

        .section-title{
            margin:0;
            font-size:clamp(28px,3.2vw,46px);
            line-height:1.14;
            letter-spacing:-.045em;
            color:var(--dark);
            font-weight:950;
        }

        .section-desc{
            max-width:720px;
            margin:12px 0 0;
            color:var(--muted);
            font-size:16px;
            line-height:1.9;
        }

        .btn-brand{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            border:0;
            border-radius:999px;
            padding:13px 21px;
            background:linear-gradient(135deg,var(--primary),var(--primary-strong));
            color:#fff;
            font-weight:900;
            box-shadow:0 16px 32px rgba(109,93,252,.24);
            transition:var(--ease);
            white-space:nowrap;
        }

        .btn-brand:hover{
            color:#fff;
            transform:translateY(-3px);
            box-shadow:0 22px 42px rgba(109,93,252,.3);
        }

        .btn-soft{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            border:1px solid rgba(109,93,252,.18);
            border-radius:999px;
            padding:12px 20px;
            color:var(--primary-strong);
            background:#fff;
            font-weight:850;
            transition:var(--ease);
            white-space:nowrap;
        }

        .btn-soft:hover{
            transform:translateY(-3px);
            background:var(--primary-soft);
            color:var(--primary-strong);
            box-shadow:var(--shadow-sm);
        }

        .badge-brand{
            display:inline-flex;
            align-items:center;
            gap:6px;
            border-radius:999px;
            padding:7px 11px;
            color:var(--primary-strong);
            background:var(--primary-soft);
            font-size:12px;
            font-weight:850;
        }

        .badge-hot{
            color:#8a4e00;
            background:rgba(255,184,77,.2);
        }

        .hero{
            padding:34px 0 70px;
        }

        .hero-stage{
            position:relative;
            border-radius:var(--radius-lg);
            padding:34px;
            min-height:610px;
            overflow:hidden;
            background:
                linear-gradient(135deg,rgba(21,23,43,.96),rgba(39,42,84,.94) 46%,rgba(109,93,252,.92));
            box-shadow:var(--shadow-lg);
            color:#fff;
        }

        .hero-stage:before{
            content:"";
            position:absolute;
            inset:-1px;
            background:
                radial-gradient(circle at 12% 24%, rgba(255,255,255,.18), transparent 26%),
                radial-gradient(circle at 82% 18%, rgba(18,184,166,.25), transparent 26%),
                radial-gradient(circle at 72% 84%, rgba(255,184,77,.26), transparent 28%);
            pointer-events:none;
        }

        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:26px;
            height:100%;
            align-items:stretch;
        }

        .hero-main{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:34px;
            min-height:542px;
        }

        .release-strip{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:12px;
        }

        .release-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border-radius:999px;
            padding:9px 13px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.18);
            color:#fff;
            font-weight:850;
            backdrop-filter:blur(10px);
        }

        .release-badge .pulse{
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--secondary);
            box-shadow:0 0 0 8px rgba(18,184,166,.18);
        }

        .hero h1{
            max-width:860px;
            margin:0;
            font-size:clamp(42px,6vw,82px);
            line-height:1.03;
            letter-spacing:-.065em;
            font-weight:1000;
        }

        .hero h1 span{
            color:#bff8ef;
        }

        .hero-intro{
            max-width:760px;
            margin:22px 0 0;
            font-size:18px;
            color:rgba(255,255,255,.78);
            line-height:1.95;
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:14px;
            margin-top:30px;
        }

        .hero .btn-brand{
            background:#fff;
            color:var(--primary-strong);
            box-shadow:0 18px 40px rgba(0,0,0,.18);
        }

        .hero .btn-brand:hover{
            color:var(--primary-strong);
        }

        .hero .btn-soft{
            background:rgba(255,255,255,.12);
            color:#fff;
            border-color:rgba(255,255,255,.24);
            backdrop-filter:blur(10px);
        }

        .hero .btn-soft:hover{
            background:rgba(255,255,255,.18);
            color:#fff;
        }

        .hero-metrics{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:14px;
        }

        .metric-tile{
            border-radius:22px;
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.1);
            backdrop-filter:blur(12px);
            padding:17px;
        }

        .metric-tile strong{
            display:block;
            font-size:26px;
            line-height:1.1;
            font-weight:1000;
        }

        .metric-tile span{
            display:block;
            margin-top:7px;
            color:rgba(255,255,255,.68);
            font-size:13px;
        }

        .hero-side{
            display:grid;
            grid-template-rows:auto 1fr auto;
            gap:18px;
        }

        .count-card,
        .points-card,
        .reserve-card{
            border:1px solid rgba(255,255,255,.16);
            background:rgba(255,255,255,.11);
            border-radius:30px;
            backdrop-filter:blur(16px);
            box-shadow:0 18px 50px rgba(0,0,0,.12);
            position:relative;
            overflow:hidden;
        }

        .count-card{
            padding:24px;
            display:flex;
            align-items:center;
            gap:20px;
        }

        .count-ring{
            --p:72%;
            width:126px;
            height:126px;
            border-radius:50%;
            flex:0 0 auto;
            background:conic-gradient(var(--accent) var(--p), rgba(255,255,255,.16) 0);
            display:grid;
            place-items:center;
            position:relative;
        }

        .count-ring:after{
            content:"";
            position:absolute;
            inset:13px;
            border-radius:50%;
            background:rgba(21,23,43,.88);
            border:1px solid rgba(255,255,255,.12);
        }

        .count-ring-inner{
            position:relative;
            z-index:1;
            text-align:center;
        }

        .count-ring-inner strong{
            display:block;
            font-size:34px;
            line-height:1;
            font-weight:1000;
        }

        .count-ring-inner span{
            display:block;
            margin-top:5px;
            color:rgba(255,255,255,.68);
            font-size:12px;
        }

        .count-info h2{
            font-size:23px;
            line-height:1.25;
            margin:0 0 8px;
            font-weight:950;
        }

        .count-info p{
            margin:0;
            color:rgba(255,255,255,.72);
            font-size:14px;
        }

        .points-card{
            padding:22px;
        }

        .point-row{
            display:flex;
            align-items:center;
            gap:14px;
            padding:13px 0;
            border-bottom:1px solid rgba(255,255,255,.1);
        }

        .point-row:last-child{
            border-bottom:0;
        }

        .point-icon{
            width:42px;
            height:42px;
            border-radius:15px;
            background:rgba(255,255,255,.14);
            display:grid;
            place-items:center;
            flex:0 0 auto;
            color:#bff8ef;
        }

        .point-row strong{
            display:block;
            font-weight:900;
            margin-bottom:2px;
        }

        .point-row span{
            color:rgba(255,255,255,.66);
            font-size:13px;
        }

        .hero-dots{
            display:flex;
            align-items:center;
            gap:8px;
            margin-top:16px;
        }

        .hero-dots button{
            width:10px;
            height:10px;
            border:0;
            padding:0;
            border-radius:999px;
            background:rgba(255,255,255,.35);
            transition:var(--ease);
        }

        .hero-dots button.active{
            width:34px;
            background:#fff;
        }

        .reserve-card{
            padding:20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }

        .reserve-card strong{
            display:block;
            font-size:18px;
            font-weight:950;
        }

        .reserve-card span{
            display:block;
            margin-top:4px;
            color:rgba(255,255,255,.7);
            font-size:13px;
        }

        .reserve-card a{
            width:48px;
            height:48px;
            border-radius:17px;
            display:grid;
            place-items:center;
            background:#fff;
            color:var(--primary-strong);
            flex:0 0 auto;
        }

        .reserve-card a:hover{
            transform:translateX(3px);
        }

        .benefit-strip{
            display:grid;
            grid-template-columns:1fr 1fr 1fr;
            gap:20px;
        }

        .benefit-card{
            position:relative;
            overflow:hidden;
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:28px;
            padding:26px;
            min-height:255px;
            box-shadow:var(--shadow-sm);
            transition:var(--ease);
        }

        .benefit-card:hover{
            transform:translateY(-7px);
            box-shadow:var(--shadow);
            border-color:rgba(109,93,252,.22);
        }

        .benefit-card.featured{
            background:
                linear-gradient(145deg,rgba(109,93,252,.95),rgba(76,63,240,.94));
            color:#fff;
            border-color:transparent;
        }

        .benefit-card.featured .benefit-desc,
        .benefit-card.featured .benefit-list li{
            color:rgba(255,255,255,.76);
        }

        .benefit-icon{
            width:56px;
            height:56px;
            border-radius:19px;
            display:grid;
            place-items:center;
            background:var(--primary-soft);
            color:var(--primary-strong);
            font-size:22px;
            margin-bottom:24px;
        }

        .benefit-card.featured .benefit-icon{
            background:rgba(255,255,255,.14);
            color:#fff;
        }

        .benefit-card h3{
            margin:0 0 10px;
            font-size:22px;
            font-weight:950;
            letter-spacing:-.03em;
        }

        .benefit-desc{
            margin:0 0 18px;
            color:var(--muted);
            font-size:15px;
        }

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

        .benefit-list li{
            display:flex;
            gap:9px;
            color:var(--muted);
            font-size:14px;
        }

        .benefit-list i{
            color:var(--secondary);
            margin-top:6px;
        }

        .demo-wrap{
            display:grid;
            grid-template-columns:.95fr 1.05fr;
            gap:24px;
            align-items:stretch;
        }

        .demo-steps{
            background:#fff;
            border:1px solid var(--border);
            border-radius:30px;
            padding:28px;
            box-shadow:var(--shadow-sm);
        }

        .step-item{
            display:grid;
            grid-template-columns:52px 1fr;
            gap:16px;
            padding:18px 0;
            border-bottom:1px dashed var(--border);
        }

        .step-item:last-child{
            border-bottom:0;
        }

        .step-num{
            width:52px;
            height:52px;
            border-radius:18px;
            display:grid;
            place-items:center;
            background:var(--primary-soft);
            color:var(--primary-strong);
            font-weight:1000;
        }

        .step-item h3{
            margin:0 0 6px;
            font-size:18px;
            font-weight:950;
        }

        .step-item p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }

        .demo-board{
            border-radius:32px;
            padding:24px;
            background:
                linear-gradient(145deg,#ffffff,#f3f5ff);
            border:1px solid rgba(230,232,242,.88);
            box-shadow:var(--shadow);
        }

        .board-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            margin-bottom:20px;
        }

        .board-title strong{
            display:block;
            color:var(--dark);
            font-size:20px;
            font-weight:950;
        }

        .board-title span{
            display:block;
            color:var(--muted);
            font-size:13px;
            margin-top:3px;
        }

        .status-pill{
            display:inline-flex;
            align-items:center;
            gap:7px;
            border-radius:999px;
            padding:8px 12px;
            background:rgba(18,184,166,.12);
            color:#078979;
            font-weight:850;
            font-size:13px;
        }

        .visual-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:14px;
        }

        .visual-card{
            min-height:154px;
            border-radius:24px;
            padding:18px;
            background:#fff;
            border:1px solid var(--border);
            box-shadow:0 10px 30px rgba(32,34,70,.06);
            overflow:hidden;
            position:relative;
        }

        .visual-card.dark{
            background:
                linear-gradient(145deg,var(--dark),var(--dark-2));
            color:#fff;
            min-height:322px;
        }

        .wave{
            position:absolute;
            inset:auto -40px -48px -40px;
            height:135px;
            background:
                radial-gradient(circle at 18% 40%, rgba(18,184,166,.42), transparent 28%),
                radial-gradient(circle at 72% 38%, rgba(109,93,252,.42), transparent 30%);
            filter:blur(2px);
        }

        .play-bars{
            display:flex;
            align-items:flex-end;
            gap:8px;
            height:120px;
            margin-top:32px;
            position:relative;
            z-index:1;
        }

        .play-bars span{
            flex:1;
            border-radius:999px 999px 8px 8px;
            background:linear-gradient(180deg,#bff8ef,var(--secondary));
            min-height:32px;
        }

        .play-bars span:nth-child(2){height:74px;}
        .play-bars span:nth-child(3){height:102px;}
        .play-bars span:nth-child(4){height:58px;}
        .play-bars span:nth-child(5){height:92px;}
        .play-bars span:nth-child(6){height:44px;}

        .visual-card h3{
            position:relative;
            z-index:1;
            margin:0 0 8px;
            font-size:20px;
            font-weight:950;
        }

        .visual-card p{
            position:relative;
            z-index:1;
            margin:0;
            color:var(--muted);
            font-size:14px;
        }

        .visual-card.dark p{
            color:rgba(255,255,255,.68);
        }

        .tag-cloud{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:20px;
        }

        .tag-cloud span{
            border-radius:999px;
            padding:7px 10px;
            background:var(--primary-soft);
            color:var(--primary-strong);
            font-size:12px;
            font-weight:850;
        }

        .trust-section{
            background:
                linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.96));
        }

        .trust-grid{
            display:grid;
            grid-template-columns:1fr 1fr 1fr 1fr;
            gap:16px;
        }

        .trust-card{
            background:#fff;
            border:1px solid var(--border);
            border-radius:26px;
            padding:23px;
            box-shadow:var(--shadow-sm);
            transition:var(--ease);
        }

        .trust-card:hover{
            transform:translateY(-5px);
            box-shadow:var(--shadow);
        }

        .trust-card strong{
            display:block;
            font-size:32px;
            color:var(--dark);
            font-weight:1000;
            line-height:1.1;
        }

        .trust-card span{
            display:block;
            margin-top:8px;
            color:var(--muted);
            font-size:14px;
        }

        .quote-row{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:20px;
            margin-top:22px;
        }

        .quote-card{
            border-radius:28px;
            padding:26px;
            background:var(--dark);
            color:#fff;
            position:relative;
            overflow:hidden;
            box-shadow:var(--shadow);
        }

        .quote-card.light{
            background:#fff;
            color:var(--text);
            border:1px solid var(--border);
            box-shadow:var(--shadow-sm);
        }

        .quote-card:before{
            content:"“";
            position:absolute;
            right:24px;
            top:-18px;
            font-size:126px;
            line-height:1;
            color:rgba(255,255,255,.09);
            font-family:Georgia,serif;
        }

        .quote-card.light:before{
            color:rgba(109,93,252,.09);
        }

        .quote-card p{
            margin:0 0 18px;
            font-size:16px;
            line-height:1.95;
            color:rgba(255,255,255,.78);
        }

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

        .quote-user{
            display:flex;
            align-items:center;
            gap:12px;
            font-weight:900;
        }

        .avatar{
            width:44px;
            height:44px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg,var(--secondary),var(--primary));
            color:#fff;
        }

        .member-wrap{
            display:grid;
            grid-template-columns:.78fr 1.22fr;
            gap:24px;
            align-items:stretch;
        }

        .member-panel{
            border-radius:32px;
            padding:30px;
            background:
                linear-gradient(145deg,var(--primary),var(--primary-strong));
            color:#fff;
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }

        .member-panel:after{
            content:"";
            position:absolute;
            width:240px;
            height:240px;
            border-radius:50%;
            right:-90px;
            bottom:-90px;
            background:rgba(255,255,255,.13);
        }

        .member-panel h2{
            margin:0 0 14px;
            font-size:32px;
            line-height:1.2;
            font-weight:1000;
        }

        .member-panel p{
            margin:0 0 24px;
            color:rgba(255,255,255,.76);
        }

        .member-price{
            display:flex;
            align-items:flex-end;
            gap:8px;
            margin-bottom:24px;
        }

        .member-price strong{
            font-size:42px;
            line-height:1;
            font-weight:1000;
        }

        .member-price span{
            color:rgba(255,255,255,.7);
            padding-bottom:4px;
        }

        .member-panel .btn-brand{
            background:#fff;
            color:var(--primary-strong);
        }

        .rights-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }

        .right-card{
            background:#fff;
            border:1px solid var(--border);
            border-radius:24px;
            padding:22px;
            box-shadow:var(--shadow-sm);
            transition:var(--ease);
        }

        .right-card:hover{
            transform:translateY(-5px);
            border-color:rgba(109,93,252,.24);
            box-shadow:var(--shadow);
        }

        .right-card i{
            width:42px;
            height:42px;
            display:grid;
            place-items:center;
            border-radius:15px;
            background:var(--primary-soft);
            color:var(--primary-strong);
            margin-bottom:14px;
        }

        .right-card h3{
            margin:0 0 7px;
            font-size:18px;
            font-weight:950;
        }

        .right-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }

        .timeline-shell{
            background:#fff;
            border:1px solid var(--border);
            border-radius:32px;
            box-shadow:var(--shadow-sm);
            padding:28px;
        }

        .timeline{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:14px;
            position:relative;
        }

        .timeline-item{
            position:relative;
            border-radius:24px;
            padding:22px;
            background:var(--surface-2);
            border:1px solid var(--border);
            min-height:185px;
            transition:var(--ease);
        }

        .timeline-item:hover{
            transform:translateY(-5px);
            background:#fff;
            box-shadow:var(--shadow-sm);
        }

        .time{
            display:inline-flex;
            border-radius:999px;
            padding:6px 10px;
            background:rgba(18,184,166,.12);
            color:#078979;
            font-size:12px;
            font-weight:950;
            margin-bottom:14px;
        }

        .timeline-item h3{
            margin:0 0 8px;
            font-size:18px;
            font-weight:950;
        }

        .timeline-item p{
            margin:0 0 14px;
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }

        .timeline-item a{
            color:var(--primary-strong);
            font-weight:900;
            font-size:14px;
        }

        .news-layout{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:24px;
        }

        .news-list,
        .recommend-box{
            background:#fff;
            border:1px solid var(--border);
            border-radius:30px;
            box-shadow:var(--shadow-sm);
            overflow:hidden;
        }

        .news-item{
            display:grid;
            grid-template-columns:112px 1fr auto;
            gap:18px;
            align-items:center;
            padding:20px 22px;
            border-bottom:1px solid var(--border);
        }

        .news-item:last-child{
            border-bottom:0;
        }

        .news-date{
            border-radius:18px;
            background:var(--light);
            padding:12px;
            text-align:center;
            color:var(--muted);
            font-size:12px;
            font-weight:850;
        }

        .news-date strong{
            display:block;
            font-size:24px;
            color:var(--dark);
            line-height:1.1;
        }

        .news-title{
            display:block;
            margin-bottom:5px;
            color:var(--dark);
            font-weight:950;
            font-size:17px;
        }

        .news-title:hover{
            color:var(--primary-strong);
        }

        .news-summary{
            margin:0;
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }

        .news-arrow{
            width:42px;
            height:42px;
            border-radius:15px;
            display:grid;
            place-items:center;
            background:var(--primary-soft);
            color:var(--primary-strong);
        }

        .news-item:hover .news-arrow{
            background:var(--primary);
            color:#fff;
            transform:translateX(3px);
        }

        .recommend-box{
            padding:24px;
        }

        .recommend-box h3{
            margin:0 0 16px;
            font-size:22px;
            font-weight:950;
        }

        .rec-list{
            display:grid;
            gap:12px;
        }

        .rec-link{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:14px;
            border:1px solid var(--border);
            border-radius:18px;
            background:var(--surface-2);
        }

        .rec-link:hover{
            background:#fff;
            border-color:rgba(109,93,252,.28);
            box-shadow:var(--shadow-sm);
            transform:translateY(-2px);
        }

        .rec-link span{
            font-weight:850;
            color:var(--text);
        }

        .rec-link small{
            color:var(--muted);
            display:block;
            margin-top:3px;
        }

        .faq-wrap{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:24px;
        }

        .faq-aside{
            border-radius:30px;
            padding:28px;
            background:
                linear-gradient(145deg,#ffffff,#f4f6ff);
            border:1px solid var(--border);
            box-shadow:var(--shadow-sm);
        }

        .faq-aside h2{
            margin:0 0 12px;
            font-weight:1000;
            font-size:30px;
            letter-spacing:-.04em;
        }

        .faq-aside p{
            margin:0 0 20px;
            color:var(--muted);
        }

        .accordion{
            display:grid;
            gap:12px;
        }

        .accordion-item{
            border:1px solid var(--border)!important;
            border-radius:22px!important;
            overflow:hidden;
            background:#fff;
            box-shadow:0 8px 22px rgba(33,34,70,.05);
        }

        .accordion-button{
            padding:19px 22px;
            font-weight:950;
            color:var(--dark);
            background:#fff;
            box-shadow:none!important;
            line-height:1.55;
        }

        .accordion-button:not(.collapsed){
            color:var(--primary-strong);
            background:var(--primary-soft);
        }

        .accordion-button::after{
            filter:saturate(.2);
        }

        .accordion-body{
            padding:0 22px 22px;
            color:var(--muted);
            line-height:1.9;
        }

        .form-section{
            padding-bottom:96px;
        }

        .form-shell{
            display:grid;
            grid-template-columns:.9fr 1.1fr;
            gap:24px;
            border-radius:36px;
            background:
                linear-gradient(135deg,var(--dark),#24284b);
            padding:30px;
            color:#fff;
            box-shadow:var(--shadow-lg);
            position:relative;
            overflow:hidden;
        }

        .form-shell:before{
            content:"";
            position:absolute;
            width:420px;
            height:420px;
            right:-150px;
            top:-160px;
            border-radius:50%;
            background:rgba(109,93,252,.28);
        }

        .form-copy,
        .lead-form{
            position:relative;
            z-index:1;
        }

        .form-copy{
            padding:14px 10px;
            align-self:center;
        }

        .form-copy h2{
            margin:0 0 16px;
            font-size:clamp(30px,4vw,50px);
            line-height:1.12;
            font-weight:1000;
            letter-spacing:-.05em;
        }

        .form-copy p{
            margin:0 0 22px;
            color:rgba(255,255,255,.74);
            line-height:1.95;
        }

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

        .check-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:rgba(255,255,255,.78);
        }

        .check-list i{
            margin-top:6px;
            color:#bff8ef;
        }

        .lead-form{
            background:rgba(255,255,255,.96);
            border:1px solid rgba(255,255,255,.4);
            border-radius:30px;
            padding:26px;
            color:var(--text);
            box-shadow:0 20px 60px rgba(0,0,0,.18);
        }

        .form-label{
            color:var(--dark);
            font-weight:900;
            margin-bottom:8px;
        }

        .form-control,
        .form-select{
            min-height:50px;
            border-radius:16px;
            border:1px solid var(--border);
            padding:11px 14px;
            color:var(--text);
            box-shadow:none!important;
        }

        textarea.form-control{
            min-height:104px;
            resize:vertical;
        }

        .form-control:focus,
        .form-select:focus{
            border-color:rgba(109,93,252,.58);
            box-shadow:0 0 0 4px rgba(109,93,252,.12)!important;
        }

        .privacy-note{
            margin:14px 0 0;
            color:var(--muted);
            font-size:13px;
            line-height:1.75;
        }

        .form-message{
            display:none;
            margin-top:14px;
            border-radius:16px;
            padding:12px 14px;
            background:rgba(18,184,166,.12);
            color:#05796b;
            font-weight:850;
        }

        .site-footer{
            margin-left:var(--sidebar);
            background:#0f1225;
            color:#fff;
            padding:46px 0 34px;
        }

        .footer-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:28px;
            align-items:start;
        }

        .footer-brand{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:14px;
        }

        .footer-brand .brand-mark{
            width:44px;
            height:44px;
        }

        .footer-brand strong{
            font-size:20px;
            font-weight:1000;
        }

        .footer-desc{
            max-width:660px;
            color:rgba(255,255,255,.68);
            margin:0;
            line-height:1.9;
        }

        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }

        .footer-links a{
            border-radius:999px;
            padding:9px 13px;
            background:rgba(255,255,255,.08);
            color:rgba(255,255,255,.72);
        }

        .footer-links a:hover{
            background:#fff;
            color:var(--primary-strong);
        }

        .copyright{
            margin-top:30px;
            padding-top:22px;
            border-top:1px solid rgba(255,255,255,.1);
            display:flex;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            color:rgba(255,255,255,.52);
            font-size:13px;
        }

        .fixed-cta{
            position:fixed;
            left:calc(var(--sidebar) + 22px);
            right:22px;
            bottom:18px;
            z-index:1040;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:14px 16px 14px 20px;
            border-radius:24px;
            background:rgba(255,255,255,.88);
            border:1px solid rgba(230,232,242,.88);
            box-shadow:0 18px 54px rgba(31,34,75,.18);
            backdrop-filter:blur(18px);
        }

        .fixed-cta-text{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }

        .fixed-cta-icon{
            width:42px;
            height:42px;
            border-radius:15px;
            display:grid;
            place-items:center;
            color:#fff;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            flex:0 0 auto;
        }

        .fixed-cta strong{
            display:block;
            color:var(--dark);
            font-weight:950;
            line-height:1.25;
        }

        .fixed-cta span{
            display:block;
            color:var(--muted);
            font-size:13px;
            margin-top:2px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        @media (max-width:1199.98px){
            :root{
                --sidebar:252px;
            }

            .side-nav{
                left:16px;
                top:16px;
                bottom:16px;
                width:220px;
                padding:18px;
            }

            .brand-name{
                font-size:16px;
            }

            .hero-grid,
            .demo-wrap,
            .member-wrap,
            .form-shell,
            .faq-wrap{
                grid-template-columns:1fr;
            }

            .hero-main{
                min-height:auto;
            }

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

            .points-card{
                grid-column:span 2;
            }

            .trust-grid,
            .timeline{
                grid-template-columns:1fr 1fr;
            }

            .news-layout{
                grid-template-columns:1fr;
            }
        }

        @media (max-width:991.98px){
            body{
                padding-bottom:98px;
            }

            .side-nav{
                display:none;
            }

            .mobile-header{
                display:block;
            }

            .page,
            .site-footer{
                margin-left:0;
            }

            .container-page{
                width:min(100% - 28px, 900px);
            }

            .hero{
                padding-top:18px;
            }

            .hero-stage{
                padding:24px;
                min-height:auto;
                border-radius:28px;
            }

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

            .points-card{
                grid-column:auto;
            }

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

            .quote-row,
            .footer-grid{
                grid-template-columns:1fr;
            }

            .footer-links{
                justify-content:flex-start;
            }

            .fixed-cta{
                left:14px;
                right:14px;
                bottom:12px;
            }
        }

        @media (max-width:767.98px){
            .section{
                padding:54px 0;
            }

            .section-head{
                display:block;
            }

            .hero h1{
                font-size:42px;
            }

            .hero-intro{
                font-size:16px;
            }

            .count-card{
                align-items:flex-start;
                flex-direction:column;
            }

            .count-ring{
                width:112px;
                height:112px;
            }

            .visual-grid,
            .rights-grid,
            .trust-grid,
            .timeline{
                grid-template-columns:1fr;
            }

            .news-item{
                grid-template-columns:1fr auto;
            }

            .news-date{
                grid-column:1 / -1;
                text-align:left;
            }

            .fixed-cta{
                align-items:stretch;
                flex-direction:column;
                border-radius:22px;
            }

            .fixed-cta .btn-brand{
                width:100%;
            }

            .copyright{
                display:block;
            }

            .copyright span{
                display:block;
                margin-top:8px;
            }
        }

        @media (max-width:520px){
            .mobile-header-inner{
                padding:0 14px;
            }

            .mobile-brand span{
                max-width:210px;
            }

            .hero-stage{
                padding:20px;
            }

            .hero h1{
                font-size:36px;
                letter-spacing:-.055em;
            }

            .release-strip,
            .hero-actions{
                align-items:stretch;
                flex-direction:column;
            }

            .hero-actions a{
                width:100%;
            }

            .metric-tile strong{
                font-size:23px;
            }

            .section-title{
                font-size:28px;
            }

            .form-shell{
                padding:18px;
                border-radius:28px;
            }

            .lead-form{
                padding:20px;
                border-radius:24px;
            }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}