/* roulang page: index */
:root{
            --bg:#05080d;
            --bg-2:#08111a;
            --panel:#0d1721;
            --panel-2:#101c29;
            --panel-3:#122232;
            --text:#eaf3fb;
            --muted:#98acbf;
            --soft:#6d8095;
            --line:rgba(130, 212, 255, .14);
            --line-2:rgba(165, 112, 255, .18);
            --primary:#50e6ff;
            --primary-2:#7d7dff;
            --accent:#ffb15c;
            --good:#7cf3b0;
            --danger:#ff7b89;
            --shadow:0 18px 50px rgba(0,0,0,.35);
            --shadow-soft:0 10px 30px rgba(0,0,0,.24);
            --radius:20px;
            --radius-sm:16px;
            --radius-xs:12px;
            --space:24px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: PingFang SC, Microsoft YaHei, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 15% 15%, rgba(80,230,255,.08), transparent 30%),
                radial-gradient(circle at 85% 10%, rgba(125,125,255,.08), transparent 26%),
                radial-gradient(circle at 50% 80%, rgba(255,177,92,.05), transparent 32%),
                linear-gradient(180deg, #05070b 0%, #071018 50%, #05080d 100%);
            min-height:100vh;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.07) 50%, rgba(0,0,0,.18));
            opacity:.25;
            z-index:-2;
        }
        body::after{
            content:"";
            position:fixed;
            inset:-10%;
            pointer-events:none;
            background:
                radial-gradient(circle at 50% 0%, rgba(80,230,255,.06), transparent 22%),
                radial-gradient(circle at 100% 80%, rgba(125,125,255,.05), transparent 26%);
            z-index:-3;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition: color .22s ease, opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
        }
        a:hover{color:var(--primary)}
        a:focus-visible,
        button:focus-visible,
        .btn:focus-visible,
        .navbar-toggler:focus-visible,
        .accordion-button:focus-visible{
            outline:none;
            box-shadow:0 0 0 .2rem rgba(80,230,255,.22), 0 0 0 .4rem rgba(80,230,255,.08);
        }
        img{max-width:100%;display:block}
        .container-fluid, .container-xl{
            padding-left: clamp(16px, 2vw, 30px);
            padding-right: clamp(16px, 2vw, 30px);
        }
        .section-pad{
            padding: 92px 0;
            position:relative;
            scroll-margin-top:110px;
        }
        .section-pad.tight{padding-top:72px;padding-bottom:72px}
        .section-head{
            max-width: 760px;
            margin-bottom: 28px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(10,18,26,.65);
            color:#c4d6e5;
            font-size:13px;
            line-height:1;
            letter-spacing:.02em;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .eyebrow i{color:var(--primary)}
        h1,h2,h3,h4,p{margin:0}
        h1{
            font-size: clamp(2rem, 4.4vw, 3.65rem);
            line-height:1.06;
            font-weight:800;
            letter-spacing:-.03em;
        }
        h2{
            font-size: clamp(1.65rem, 2.6vw, 2.5rem);
            line-height:1.12;
            font-weight:750;
            letter-spacing:-.02em;
        }
        h3{
            font-size: clamp(1.08rem, 1.5vw, 1.35rem);
            line-height:1.25;
            font-weight:700;
        }
        p{
            color:var(--muted);
            line-height:1.85;
            font-size: 1rem;
        }
        .small-copy{
            font-size:.94rem;
            color:var(--soft);
            line-height:1.78;
        }
        .text-accent{color:var(--primary)}
        .text-soft{color:var(--soft)}
        .site-header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            z-index:1030;
            background:rgba(7, 12, 18, .76);
            backdrop-filter: blur(18px);
            border-bottom:1px solid rgba(130, 212, 255, .12);
            box-shadow: 0 8px 28px rgba(0,0,0,.18);
        }
        .site-header::after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:-1px;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(80,230,255,.8), rgba(125,125,255,.7), transparent);
            opacity:.65;
        }
        .navbar{
            padding-top:14px;
            padding-bottom:14px;
        }
        .navbar-brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
        }
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:14px;
            position:relative;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 30%),
                linear-gradient(145deg, rgba(80,230,255,.9), rgba(125,125,255,.85));
            box-shadow:0 12px 30px rgba(80,230,255,.18);
            border:1px solid rgba(255,255,255,.08);
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:9px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.42);
            opacity:.8;
        }
        .brand-mark::after{
            inset:14px;
            border-radius:50%;
            border-color:rgba(255,255,255,.2);
        }
        .navbar-nav .nav-link{
            color:#c8d8e6;
            font-weight:600;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid transparent;
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus{
            color:var(--text);
            border-color:var(--line);
            background:rgba(255,255,255,.03);
        }
        .navbar-nav .nav-link.active{
            color:var(--text);
            background:linear-gradient(135deg, rgba(80,230,255,.15), rgba(125,125,255,.12));
            border-color:rgba(80,230,255,.28);
            box-shadow:0 0 0 1px rgba(80,230,255,.08) inset, 0 12px 30px rgba(80,230,255,.08);
        }
        .navbar-toggler{
            border:1px solid rgba(130, 212, 255, .18);
            padding:.65rem .78rem;
            border-radius:14px;
            background:rgba(255,255,255,.02);
        }
        .navbar-toggler-icon{
            width:1.1em;
            height:1.1em;
            background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(234,243,251,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        .nav-shell{
            display:flex;
            align-items:center;
            gap:14px;
        }
        .btn{
            border-radius:999px;
            font-weight:700;
            padding:.82rem 1.15rem;
            border:1px solid transparent;
            transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn-primary-neon{
            color:#071018;
            background:linear-gradient(135deg, var(--primary) 0%, #88f6ff 100%);
            border-color:rgba(255,255,255,.12);
            box-shadow:0 12px 28px rgba(80,230,255,.18);
        }
        .btn-primary-neon:hover{
            color:#041018;
            box-shadow:0 16px 34px rgba(80,230,255,.28), 0 0 0 1px rgba(80,230,255,.18) inset;
        }
        .btn-outline-neon{
            color:var(--text);
            background:rgba(255,255,255,.02);
            border-color:rgba(130,212,255,.22);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .btn-outline-neon:hover{
            color:var(--text);
            border-color:rgba(80,230,255,.46);
            background:rgba(80,230,255,.06);
            box-shadow:0 12px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(80,230,255,.08) inset;
        }
        .hero-section{
            padding: 128px 0 72px;
            position:relative;
            overflow:hidden;
        }
        .hero-section::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 16%, rgba(80,230,255,.10), transparent 19%),
                radial-gradient(circle at 80% 12%, rgba(125,125,255,.10), transparent 18%),
                radial-gradient(circle at 50% 100%, rgba(255,177,92,.06), transparent 26%);
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
            gap: 30px;
            align-items:center;
        }
        .hero-copy-wrap{
            position:relative;
            z-index:1;
        }
        .hero-kicker{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(18, 34, 50, .84);
            border:1px solid var(--line);
            color:#dce8f1;
            font-size:.92rem;
            margin-bottom:18px;
        }
        .hero-kicker .dot{
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--good);
            box-shadow:0 0 0 6px rgba(124,243,176,.12), 0 0 18px rgba(124,243,176,.3);
        }
        .hero-title{
            max-width: 11ch;
            margin-bottom: 16px;
        }
        .hero-copy{
            max-width: 680px;
            font-size: 1.05rem;
            color:#b9c9d8;
            margin-bottom: 24px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-bottom: 26px;
        }
        .hero-stats{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .mini-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130,212,255,.16);
            color:#dce8f1;
            font-size:.92rem;
        }
        .mini-chip strong{color:var(--primary);font-size:1rem}
        .hero-visual{
            position:relative;
            min-height: 470px;
            border-radius: 28px;
            background:
                linear-gradient(180deg, rgba(17,29,40,.98), rgba(10,16,23,.96));
            border:1px solid rgba(130,212,255,.16);
            box-shadow: var(--shadow);
            overflow:hidden;
            padding: 20px;
        }
        .hero-visual::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(135deg, rgba(80,230,255,.07), transparent 28%),
                linear-gradient(225deg, rgba(125,125,255,.08), transparent 32%);
            pointer-events:none;
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:18px;
            border-radius:22px;
            border:1px dashed rgba(130,212,255,.12);
            pointer-events:none;
        }
        .visual-grid{
            position:relative;
            height:100%;
            min-height:430px;
            display:grid;
            grid-template-columns: 1.2fr .8fr;
            gap:14px;
            z-index:1;
        }
        .visual-stack{
            display:grid;
            gap:14px;
        }
        .visual-card,
        .info-card,
        .point-card,
        .stat-card,
        .voice-card,
        .latest-card,
        .support-card,
        .faq-card,
        .cta-card,
        .soft-box{
            border-radius: var(--radius);
            background:
                linear-gradient(180deg, rgba(18,29,42,.94), rgba(11,18,26,.96));
            border:1px solid rgba(130,212,255,.14);
            box-shadow: var(--shadow-soft);
        }
        .visual-card{
            padding:20px;
            position:relative;
            overflow:hidden;
        }
        .visual-card::before{
            content:"";
            position:absolute;
            inset:auto -10% -35% auto;
            width:180px;
            height:180px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(80,230,255,.17), transparent 60%);
            pointer-events:none;
        }
        .visual-card .caption{
            color:#90a7bc;
            font-size:.88rem;
            margin-bottom:8px;
        }
        .visual-card .big-num{
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight:800;
            line-height:1;
            margin-bottom:10px;
            letter-spacing:-.03em;
        }
        .route-list{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .route-item{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:13px 14px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130,212,255,.12);
        }
        .route-num{
            width:32px;
            height:32px;
            border-radius:11px;
            display:grid;
            place-items:center;
            flex:none;
            background:rgba(80,230,255,.12);
            color:var(--primary);
            font-weight:800;
        }
        .route-item h4{
            font-size:1rem;
            font-weight:700;
            margin-bottom:3px;
        }
        .route-item p{
            font-size:.9rem;
            line-height:1.65;
            color:#9fb2c4;
        }
        .node-stack{
            display:grid;
            gap:14px;
        }
        .node-card{
            padding:16px 16px 15px;
            border-radius:22px;
            background:rgba(255,255,255,.025);
            border:1px solid rgba(130,212,255,.13);
            position:relative;
            overflow:hidden;
        }
        .node-card::after{
            content:"";
            position:absolute;
            inset:auto -40px -40px auto;
            width:120px;
            height:120px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(125,125,255,.22), transparent 62%);
        }
        .node-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            margin-bottom:10px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 11px;
            border-radius:999px;
            font-size:12px;
            color:#daefff;
            background:rgba(80,230,255,.08);
            border:1px solid rgba(80,230,255,.18);
        }
        .tag.good{
            background:rgba(124,243,176,.08);
            border-color:rgba(124,243,176,.18);
            color:#dff8ea;
        }
        .tag.warn{
            background:rgba(255,177,92,.08);
            border-color:rgba(255,177,92,.22);
            color:#ffe7cd;
        }
        .tag.purple{
            background:rgba(125,125,255,.10);
            border-color:rgba(125,125,255,.22);
            color:#e7e8ff;
        }
        .node-title{
            font-size:1.03rem;
            font-weight:700;
            margin-bottom:6px;
        }
        .node-text{
            font-size:.92rem;
            line-height:1.72;
            color:#9eb2c4;
        }
        .node-line{
            margin-top:12px;
            height:10px;
            border-radius:999px;
            background:
                linear-gradient(90deg, rgba(80,230,255,.12), rgba(125,125,255,.25), rgba(124,243,176,.12));
            position:relative;
            overflow:hidden;
        }
        .node-line::before{
            content:"";
            position:absolute;
            inset:0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
            animation: shimmer 3.5s linear infinite;
        }
        .pulse-orbit{
            position:absolute;
            inset:auto 20px 20px auto;
            width:140px;
            height:140px;
            border-radius:50%;
            border:1px dashed rgba(80,230,255,.22);
            box-shadow:0 0 0 18px rgba(80,230,255,.03);
        }
        .pulse-orbit::before,
        .pulse-orbit::after{
            content:"";
            position:absolute;
            inset:22px;
            border-radius:50%;
            border:1px dashed rgba(125,125,255,.18);
        }
        .pulse-orbit::after{
            inset:44px;
            border-color:rgba(124,243,176,.15);
        }
        @keyframes shimmer{
            0%{transform:translateX(-100%)}
            100%{transform:translateX(100%)}
        }
        .section-title{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom: 26px;
        }
        .section-title p{
            max-width: 720px;
            font-size: 1rem;
        }
        .info-grid{
            display:grid;
            grid-template-columns: repeat(12, 1fr);
            gap:18px;
        }
        .point-card{
            padding:24px;
            grid-column: span 3;
            position:relative;
            overflow:hidden;
            min-height: 210px;
        }
        .point-card::before{
            content:"";
            position:absolute;
            inset:auto -18% -28% auto;
            width:180px;
            height:180px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(80,230,255,.12), transparent 62%);
        }
        .point-icon{
            width:44px;
            height:44px;
            border-radius:16px;
            display:grid;
            place-items:center;
            margin-bottom:14px;
            color:var(--primary);
            background:rgba(80,230,255,.08);
            border:1px solid rgba(80,230,255,.16);
            font-size:1.05rem;
        }
        .point-card h3{margin-bottom:8px}
        .point-card p{font-size:.95rem}
        .solution-grid{
            display:grid;
            grid-template-columns: 1.15fr .85fr;
            gap:18px;
            align-items:stretch;
        }
        .soft-box{
            padding:24px;
            position:relative;
            overflow:hidden;
        }
        .soft-box .mini-line{
            width:84px;
            height:3px;
            border-radius:99px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
            margin-bottom:16px;
        }
        .steps{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .step{
            display:flex;
            gap:14px;
            padding:16px 15px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130,212,255,.12);
        }
        .step-index{
            width:36px;
            height:36px;
            border-radius:13px;
            flex:none;
            display:grid;
            place-items:center;
            background:rgba(125,125,255,.12);
            color:#dfe3ff;
            font-weight:800;
        }
        .step h3{
            font-size:1rem;
            margin-bottom:4px;
        }
        .step p{
            font-size:.92rem;
            line-height:1.7;
            color:#9eb2c4;
        }
        .feature-panel{
            display:grid;
            gap:14px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .feature-tile{
            padding:18px;
            min-height: 146px;
            border-radius:20px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130,212,255,.12);
        }
        .feature-tile h3{
            font-size:1rem;
            margin-bottom:8px;
        }
        .feature-tile p{
            font-size:.92rem;
            line-height:1.7;
            color:#9eb2c4;
        }
        .feature-tile.highlight{
            grid-column:1 / -1;
            background:
                linear-gradient(135deg, rgba(80,230,255,.10), rgba(125,125,255,.08)),
                rgba(255,255,255,.03);
            border-color: rgba(80,230,255,.20);
        }
        .metric-grid{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .stat-card{
            padding:24px;
            position:relative;
            overflow:hidden;
        }
        .stat-card .value{
            font-size: clamp(2rem, 3vw, 2.95rem);
            font-weight:800;
            line-height:1;
            letter-spacing:-.04em;
            margin-bottom:10px;
        }
        .stat-card .label{
            font-weight:700;
            margin-bottom:8px;
        }
        .stat-card .desc{
            font-size:.94rem;
            line-height:1.72;
            color:#9eb2c4;
        }
        .progress-list{
            display:grid;
            gap:16px;
            margin-top:22px;
        }
        .progress-row{
            display:grid;
            gap:8px;
        }
        .progress-row .line-head{
            display:flex;
            justify-content:space-between;
            gap:12px;
            font-size:.94rem;
            color:#c5d4e2;
        }
        .bar{
            height:12px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(130,212,255,.1);
            overflow:hidden;
        }
        .bar span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
            box-shadow:0 0 24px rgba(80,230,255,.16);
        }
        .voice-grid{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .voice-card{
            padding:24px;
            position:relative;
            overflow:hidden;
        }
        .voice-card::after{
            content:"“";
            position:absolute;
            right:16px;
            top:8px;
            font-size:4.3rem;
            line-height:1;
            color:rgba(80,230,255,.08);
            font-family:Georgia, serif;
        }
        .voice-top{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:14px;
        }
        .avatar{
            width:44px;
            height:44px;
            border-radius:16px;
            display:grid;
            place-items:center;
            font-weight:800;
            color:#09111a;
            background:linear-gradient(135deg, var(--primary), #a9fdff);
            flex:none;
        }
        .voice-name{
            font-weight:700;
            margin-bottom:2px;
        }
        .voice-role{
            font-size:.86rem;
            color:#90a7bc;
        }
        .voice-card p{
            font-size:.95rem;
            line-height:1.8;
            color:#c0cfdd;
        }
        .voice-meta{
            margin-top:16px;
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }
        .voice-meta .tag{font-size:12px}
        .latest-wrap{
            display:grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
            gap:18px;
            align-items:start;
        }
        .latest-list{
            display:grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        .latest-card{
            overflow:hidden;
        }
        .latest-card-link{
            display:block;
            padding:22px;
            min-height: 220px;
            height:100%;
        }
        .latest-card:hover{
            transform:translateY(-3px);
            border-color: rgba(80,230,255,.28);
            box-shadow: 0 16px 36px rgba(0,0,0,.32);
        }
        .latest-card h3{
            margin:12px 0 10px;
        }
        .latest-card p{
            font-size:.94rem;
            line-height:1.78;
            color:#a6b8c9;
        }
        .post-meta{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            color:#8ea4b8;
            font-size:.86rem;
        }
        .post-meta .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 11px;
            border-radius:999px;
            background:rgba(80,230,255,.08);
            border:1px solid rgba(80,230,255,.16);
            color:#dff9ff;
        }
        .latest-more{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:16px;
            font-weight:700;
            color:#dff8ff;
        }
        .latest-more i{transition:transform .22s ease}
        .latest-card:hover .latest-more i{transform:translateX(3px)}
        .latest-card-featured{
            grid-column: span 2;
        }
        .latest-card-featured .latest-card-link{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height: 270px;
            background:
                radial-gradient(circle at top right, rgba(80,230,255,.10), transparent 28%),
                radial-gradient(circle at 12% 20%, rgba(125,125,255,.10), transparent 24%);
        }
        .latest-aside{
            position:sticky;
            top:104px;
            display:grid;
            gap:16px;
        }
        .support-card{
            padding:22px;
        }
        .support-card h3{margin-bottom:8px}
        .support-list{
            display:grid;
            gap:10px;
            margin-top:14px;
        }
        .support-item{
            display:flex;
            gap:12px;
            align-items:flex-start;
            color:#cbd8e4;
            line-height:1.7;
            font-size:.94rem;
        }
        .support-item i{
            color:var(--primary);
            margin-top:4px;
            flex:none;
        }
        .empty-state{
            padding: 26px;
            border-radius: var(--radius);
            background:rgba(255,255,255,.03);
            border:1px dashed rgba(130,212,255,.18);
            color:#c4d6e5;
            min-height: 140px;
            display:grid;
            place-items:center;
            text-align:center;
        }
        .accordion-modern .accordion-item{
            background:transparent;
            border:none;
            margin-bottom:12px;
        }
        .accordion-modern .accordion-button{
            border-radius:18px !important;
            background:rgba(255,255,255,.03);
            color:var(--text);
            border:1px solid rgba(130,212,255,.14);
            box-shadow:none;
            padding:18px 20px;
            font-weight:700;
        }
        .accordion-modern .accordion-button:not(.collapsed){
            color:var(--text);
            background:linear-gradient(135deg, rgba(80,230,255,.09), rgba(125,125,255,.07));
            border-color: rgba(80,230,255,.22);
        }
        .accordion-modern .accordion-button::after{
            filter: invert(1) grayscale(1) brightness(1.5);
            opacity:.9;
        }
        .accordion-modern .accordion-button:focus{
            box-shadow:none;
        }
        .accordion-modern .accordion-body{
            color:#b9c9d8;
            line-height:1.85;
            padding:18px 20px 8px;
        }
        .cta-section{
            padding: 76px 0 96px;
        }
        .cta-card{
            padding:30px;
            position:relative;
            overflow:hidden;
            background:
                linear-gradient(135deg, rgba(80,230,255,.08), rgba(125,125,255,.06)),
                linear-gradient(180deg, rgba(16,27,39,.98), rgba(10,16,23,.98));
        }
        .cta-card::before{
            content:"";
            position:absolute;
            inset:auto -10% -35% auto;
            width:250px;
            height:250px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(80,230,255,.16), transparent 64%);
        }
        .cta-card .cta-inner{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
        }
        .cta-card p{
            max-width: 720px;
            color:#c1d2df;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        .site-footer{
            border-top:1px solid rgba(130,212,255,.12);
            background:linear-gradient(180deg, rgba(8,14,20,.92), rgba(5,8,13,.98));
            padding: 28px 0 36px;
        }
        .footer-grid{
            display:grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap:24px;
            align-items:start;
        }
        .footer-brand{
            display:flex;
            align-items:flex-start;
            gap:14px;
        }
        .footer-brand .brand-mark{
            width:34px;
            height:34px;
            border-radius:12px;
        }
        .footer-brand h3{
            margin-bottom:6px;
        }
        .footer-links{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:#c8d8e6;
        }
        .footer-links a:hover{
            color:var(--primary);
        }
        .footer-note{
            margin-top:18px;
            color:#8ca0b3;
            font-size:.92rem;
            line-height:1.75;
        }
        .footer-divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(80,230,255,.18), rgba(125,125,255,.16), transparent);
            margin: 22px 0;
        }
        .status-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:12px;
        }
        .status-row .tag{
            background:rgba(255,255,255,.03);
        }
        .underline-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#dff8ff;
            font-weight:700;
        }
        .underline-link:hover{
            color:var(--primary);
        }
        .underline-link i{
            transition:transform .22s ease;
        }
        .underline-link:hover i{
            transform:translateX(3px);
        }
        .sticky-gap{margin-top:14px}
        .block-note{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            margin-top:12px;
        }
        .block-note .tag{font-size:12px}
        .lead-list{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .lead-row{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:14px 15px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130,212,255,.12);
        }
        .lead-row i{
            color:var(--primary);
            margin-top:4px;
        }
        .lead-row strong{
            display:block;
            margin-bottom:4px;
            font-size:1rem;
        }
        .lead-row span{
            color:#9eb2c4;
            line-height:1.7;
            font-size:.93rem;
        }
        .content-rail{
            position:relative;
        }
        .content-rail::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            bottom:0;
            width:1px;
            background:linear-gradient(180deg, transparent, rgba(80,230,255,.16), transparent);
        }
        .inline-badges{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            margin-top:14px;
        }
        .inline-badges .tag{padding:8px 12px}
        .mobile-note{
            display:none;
        }
        ::-webkit-scrollbar{width:12px;height:12px}
        ::-webkit-scrollbar-track{background:#061019}
        ::-webkit-scrollbar-thumb{
            background:linear-gradient(180deg, rgba(80,230,255,.35), rgba(125,125,255,.28));
            border:3px solid #061019;
            border-radius:999px;
        }
        ::selection{
            background: rgba(80,230,255,.22);
            color: var(--text);
        }
        @media (max-width: 1199.98px){
            .hero-grid,
            .solution-grid,
            .latest-wrap,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .latest-aside{position:relative;top:auto}
            .hero-visual{min-height:420px}
            .visual-grid{min-height:390px}
            .point-card{grid-column: span 6}
            .voice-grid{grid-template-columns:1fr}
            .latest-list{grid-template-columns:1fr}
            .latest-card-featured{grid-column:span 1}
            .metric-grid{grid-template-columns:1fr}
            .cta-card .cta-inner{flex-direction:column;align-items:flex-start}
            .cta-actions{justify-content:flex-start}
        }
        @media (max-width: 991.98px){
            .section-pad{padding:74px 0}
            .hero-section{padding:112px 0 58px}
            h1{max-width:14ch}
            .info-grid{gap:16px}
            .point-card{grid-column: span 6}
            .feature-panel{grid-template-columns:1fr}
            .cta-card{padding:24px}
            .navbar-collapse{
                margin-top:14px;
                padding:14px;
                border-radius:22px;
                background:rgba(10,18,26,.96);
                border:1px solid rgba(130,212,255,.12);
                box-shadow:var(--shadow);
            }
            .nav-shell{
                align-items:stretch;
                flex-direction:column;
            }
            .navbar-nav{
                gap:6px;
                margin-bottom:12px;
            }
            .navbar-nav .nav-link{
                width:100%;
                justify-content:flex-start;
            }
        }
        @media (max-width: 767.98px){
            .hero-title{
                max-width: 100%;
            }
            .hero-copy{
                font-size:1rem;
            }
            .hero-visual{
                min-height:auto;
                padding:16px;
            }
            .visual-grid{
                grid-template-columns:1fr;
                min-height:auto;
            }
            .visual-stack{gap:12px}
            .pulse-orbit{display:none}
            .point-card{grid-column: span 12}
            .section-title{
                flex-direction:column;
                align-items:flex-start;
            }
            .hero-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .hero-actions .btn{
                width:100%;
                justify-content:center;
            }
            .cta-card .cta-inner{gap:18px}
            .cta-actions .btn{width:100%;justify-content:center}
            .footer-grid{grid-template-columns:1fr}
            .mobile-note{display:block}
        }
        @media (max-width: 575.98px){
            .section-pad{padding:62px 0}
            .hero-section{padding:104px 0 50px}
            h1{font-size:clamp(1.95rem, 9vw, 2.5rem)}
            h2{font-size:clamp(1.45rem, 7vw, 2rem)}
            .hero-kicker, .mini-chip, .eyebrow{font-size:.84rem}
            .hero-visual, .soft-box, .stat-card, .voice-card, .cta-card, .support-card, .latest-card-link, .point-card{
                border-radius:18px;
            }
            .point-card, .visual-card, .visual-card, .lead-row, .step{
                padding:16px;
            }
            .navbar{padding-top:12px;padding-bottom:12px}
        }

/* roulang page: article */
:root{
            --bg:#05080d;
            --bg-2:#08111a;
            --panel:#0d1721;
            --panel-2:#101c29;
            --panel-3:#122232;
            --text:#eaf3fb;
            --muted:#98acbf;
            --soft:#6d8095;
            --line:rgba(130, 212, 255, .14);
            --line-2:rgba(165, 112, 255, .18);
            --primary:#50e6ff;
            --primary-2:#7d7dff;
            --accent:#ffb15c;
            --good:#7cf3b0;
            --danger:#ff7b89;
            --shadow:0 18px 50px rgba(0,0,0,.35);
            --shadow-soft:0 10px 30px rgba(0,0,0,.24);
            --radius:20px;
            --radius-sm:16px;
            --radius-xs:12px;
            --space:24px;
        }
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: PingFang SC, Microsoft YaHei, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 15% 15%, rgba(80,230,255,.08), transparent 30%),
                radial-gradient(circle at 85% 10%, rgba(125,125,255,.08), transparent 26%),
                radial-gradient(circle at 50% 80%, rgba(255,177,92,.05), transparent 32%),
                linear-gradient(180deg, #05070b 0%, #071018 50%, #05080d 100%);
            min-height:100vh;
            overflow-x:hidden;
            padding-top: 88px;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.07) 50%, rgba(0,0,0,.18));
            opacity:.25;
            z-index:-2;
        }
        body::after{
            content:"";
            position:fixed;
            inset:-10%;
            pointer-events:none;
            background:
                radial-gradient(circle at 50% 0%, rgba(80,230,255,.06), transparent 22%),
                radial-gradient(circle at 100% 80%, rgba(125,125,255,.05), transparent 26%);
            z-index:-3;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition: color .22s ease, opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
        }
        a:hover{color:var(--primary)}
        a:focus-visible,
        button:focus-visible,
        .btn:focus-visible,
        .navbar-toggler:focus-visible,
        .accordion-button:focus-visible{
            outline:none;
            box-shadow:0 0 0 .2rem rgba(80,230,255,.22), 0 0 0 .4rem rgba(80,230,255,.08);
        }
        img{max-width:100%;display:block}
        .container-fluid, .container-xl{
            padding-left: clamp(16px, 2vw, 30px);
            padding-right: clamp(16px, 2vw, 30px);
        }
        .section-pad{
            padding: 92px 0;
            position:relative;
            scroll-margin-top:110px;
        }
        .section-pad.tight{padding-top:72px;padding-bottom:72px}
        .section-head{
            max-width: 760px;
            margin-bottom: 28px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(10,18,26,.65);
            color:#c4d6e5;
            font-size:13px;
            line-height:1;
            letter-spacing:.02em;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .eyebrow i{color:var(--primary)}
        .text-accent{color:var(--primary)}
        .text-soft{color:var(--soft)}
        .site-header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            z-index:1030;
            background:rgba(7, 12, 18, .76);
            backdrop-filter: blur(18px);
            border-bottom:1px solid rgba(130, 212, 255, .12);
            box-shadow: 0 8px 28px rgba(0,0,0,.18);
        }
        .site-header::after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:-1px;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(80,230,255,.8), rgba(125,125,255,.7), transparent);
            opacity:.65;
        }
        .navbar{
            padding-top:14px;
            padding-bottom:14px;
        }
        .navbar-brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
        }
        .navbar-brand:hover{color:var(--text)}
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:14px;
            position:relative;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 30%),
                linear-gradient(145deg, rgba(80,230,255,.9), rgba(125,125,255,.85));
            box-shadow:0 12px 30px rgba(80,230,255,.18);
            border:1px solid rgba(255,255,255,.08);
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:9px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.42);
            opacity:.8;
        }
        .brand-mark::after{
            inset:14px;
            border-radius:50%;
            border-color:rgba(255,255,255,.2);
        }
        .nav-shell{
            display:flex;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
        }
        .navbar-nav .nav-link{
            color:#c8d8e6;
            font-weight:600;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid transparent;
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus{
            color:var(--text);
            border-color:var(--line);
            background:rgba(255,255,255,.03);
        }
        .navbar-nav .nav-link.active{
            color:var(--text);
            background:linear-gradient(135deg, rgba(80,230,255,.15), rgba(125,125,255,.12));
            border-color:rgba(80,230,255,.28);
            box-shadow:0 0 0 1px rgba(80,230,255,.08) inset, 0 12px 30px rgba(80,230,255,.08);
        }
        .navbar-toggler{
            border:1px solid rgba(130, 212, 255, .18);
            background:rgba(255,255,255,.02);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .navbar-toggler-icon{
            filter: invert(1) brightness(1.25);
        }
        .btn{
            border-radius:999px;
            font-weight:700;
            padding:.88rem 1.2rem;
            border:1px solid transparent;
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
        }
        .btn:hover{
            transform: translateY(-1px);
        }
        .btn:active{
            transform: translateY(0);
        }
        .btn-primary-neon{
            color:#031016;
            background:linear-gradient(135deg, #65ecff, #7d7dff);
            border-color:rgba(255,255,255,.08);
            box-shadow:0 16px 34px rgba(80,230,255,.18), inset 0 1px 0 rgba(255,255,255,.22);
        }
        .btn-primary-neon:hover{
            color:#021017;
            box-shadow:0 18px 42px rgba(80,230,255,.24), 0 0 0 1px rgba(80,230,255,.18) inset;
        }
        .btn-outline-neon{
            color:var(--text);
            background:rgba(255,255,255,.02);
            border-color:rgba(130, 212, 255, .22);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }
        .btn-outline-neon:hover{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(80,230,255,.42);
            box-shadow:0 14px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(80,230,255,.08) inset;
        }
        .btn-sm{
            padding:.7rem 1rem;
            font-size:.95rem;
        }
        .hero-article{
            padding: 34px 0 12px;
            position:relative;
        }
        .hero-grid{
            display:grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
            gap:24px;
            align-items:stretch;
        }
        .hero-card,
        .content-card,
        .info-card,
        .stat-card,
        .faq-card,
        .cta-panel,
        .latest-card{
            background:linear-gradient(180deg, rgba(13,23,33,.92), rgba(10,17,26,.96));
            border:1px solid rgba(130, 212, 255, .12);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            position:relative;
            overflow:hidden;
        }
        .hero-card{
            padding:28px;
        }
        .hero-card::before,
        .content-card::before,
        .info-card::before,
        .latest-card::before,
        .cta-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 12% 10%, rgba(80,230,255,.12), transparent 18%),
                radial-gradient(circle at 88% 0%, rgba(125,125,255,.08), transparent 20%);
            pointer-events:none;
        }
        .meta-strip{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .meta-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            border:1px solid rgba(130, 212, 255, .16);
            background:rgba(255,255,255,.03);
            color:#c8d8e6;
            font-size:13px;
            line-height:1;
        }
        .meta-pill i{color:var(--primary)}
        .hero-title{
            font-size: clamp(32px, 4vw, 54px);
            line-height:1.08;
            font-weight:800;
            margin:0 0 16px;
            letter-spacing:-.02em;
        }
        .hero-subtitle{
            font-size: clamp(16px, 1.3vw, 18px);
            line-height:1.8;
            color:var(--muted);
            margin:0 0 22px;
            max-width: 64ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-bottom:20px;
        }
        .breadcrumb-wrap{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            font-size:13px;
            color:#bbccdc;
        }
        .breadcrumb-wrap a{
            color:#d5e3ef;
        }
        .breadcrumb-wrap a:hover{color:var(--primary)}
        .breadcrumb-sep{
            color:rgba(152,172,191,.7);
        }
        .hero-stats{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:12px;
            margin-top:20px;
        }
        .stat-card{
            padding:16px;
            border-radius:18px;
        }
        .stat-label{
            color:var(--soft);
            font-size:12px;
            letter-spacing:.04em;
            text-transform:uppercase;
            margin-bottom:8px;
        }
        .stat-value{
            font-size:22px;
            font-weight:800;
            line-height:1.15;
            margin:0;
        }
        .stat-note{
            margin-top:6px;
            color:var(--muted);
            font-size:13px;
            line-height:1.6;
        }
        .hero-visual{
            padding:22px;
            min-height: 100%;
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .visual-cover{
            flex:1 1 auto;
            min-height:320px;
            border-radius:24px;
            background:
                radial-gradient(circle at 18% 22%, rgba(80,230,255,.28), transparent 22%),
                radial-gradient(circle at 80% 12%, rgba(125,125,255,.24), transparent 26%),
                linear-gradient(145deg, rgba(8,15,22,.92), rgba(15,27,40,.88));
            border:1px solid rgba(130, 212, 255, .16);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
            position:relative;
            overflow:hidden;
            padding:20px;
        }
        .visual-cover::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, transparent 0%, rgba(5,8,13,.35) 100%),
                linear-gradient(90deg, transparent 49%, rgba(80,230,255,.12) 50%, transparent 51%);
            background-size:auto, 18px 18px;
            opacity:.85;
            pointer-events:none;
        }
        .visual-route{
            position:absolute;
            inset:0;
            pointer-events:none;
        }
        .visual-route::before,
        .visual-route::after{
            content:"";
            position:absolute;
            border-radius:999px;
            background:linear-gradient(90deg, transparent, rgba(80,230,255,.75), rgba(125,125,255,.7), transparent);
            filter: blur(.2px);
        }
        .visual-route::before{
            left:8%;
            right:12%;
            top:28%;
            height:2px;
            opacity:.8;
            transform: rotate(-12deg);
        }
        .visual-route::after{
            left:18%;
            right:18%;
            bottom:22%;
            height:1px;
            opacity:.55;
            transform: rotate(9deg);
        }
        .node{
            position:absolute;
            width:14px;
            height:14px;
            border-radius:50%;
            background:var(--primary);
            box-shadow:0 0 0 6px rgba(80,230,255,.08), 0 0 22px rgba(80,230,255,.45);
        }
        .node.n1{left:18%; top:22%}
        .node.n2{right:16%; top:18%; background:var(--primary-2); box-shadow:0 0 0 6px rgba(125,125,255,.08), 0 0 22px rgba(125,125,255,.4)}
        .node.n3{left:44%; bottom:28%; background:var(--accent); box-shadow:0 0 0 6px rgba(255,177,92,.08), 0 0 22px rgba(255,177,92,.35)}
        .visual-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(7,12,18,.72);
            border:1px solid rgba(130, 212, 255, .18);
            color:#dce9f4;
            font-size:13px;
            position:relative;
            z-index:1;
        }
        .visual-badge i{color:var(--good)}
        .cover-title{
            position:relative;
            z-index:1;
            margin-top:54px;
            max-width: 12ch;
            font-size: clamp(24px, 2.8vw, 38px);
            line-height:1.08;
            font-weight:800;
            letter-spacing:-.03em;
        }
        .cover-sub{
            position:relative;
            z-index:1;
            margin-top:12px;
            max-width: 34ch;
            color:#c7d5e2;
            line-height:1.75;
            font-size:15px;
        }
        .cover-metrics{
            position:absolute;
            left:20px;
            right:20px;
            bottom:20px;
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:10px;
            z-index:1;
        }
        .metric-box{
            padding:14px 12px;
            border-radius:18px;
            background:rgba(8,15,22,.74);
            border:1px solid rgba(130, 212, 255, .14);
            backdrop-filter: blur(12px);
        }
        .metric-box .k{
            display:block;
            color:var(--soft);
            font-size:12px;
            margin-bottom:6px;
        }
        .metric-box strong{
            font-size:18px;
            line-height:1.2;
        }
        .metric-box span{
            display:block;
            color:var(--muted);
            font-size:12px;
            margin-top:4px;
        }
        .page-grid{
            display:grid;
            grid-template-columns:minmax(0, 1.62fr) minmax(300px, .86fr);
            gap:24px;
            align-items:start;
        }
        .content-card,
        .info-card,
        .latest-card,
        .faq-card,
        .cta-panel{
            padding:26px;
        }
        .content-card{
            margin-bottom:24px;
        }
        .content-title{
            font-size:28px;
            font-weight:800;
            line-height:1.18;
            margin:0 0 16px;
        }
        .content-lead{
            color:var(--muted);
            font-size:16px;
            line-height:1.85;
            margin-bottom:18px;
            max-width: 78ch;
        }
        .article-body{
            color:var(--text);
            font-size:17px;
            line-height:1.9;
            word-break:break-word;
        }
        .article-body :is(h1,h2,h3,h4){
            color:var(--text);
            font-weight:800;
            line-height:1.28;
            margin-top:1.8em;
            margin-bottom:.72em;
            letter-spacing:-.01em;
        }
        .article-body h2{font-size: clamp(24px, 2.2vw, 32px);}
        .article-body h3{font-size: 22px;}
        .article-body p{
            margin:0 0 1.1em;
            color:#dfebf6;
        }
        .article-body a{
            color:#86efff;
            text-decoration: underline;
            text-decoration-color: rgba(80,230,255,.35);
            text-underline-offset: 3px;
        }
        .article-body a:hover{
            color:#b7f7ff;
            text-decoration-color: rgba(80,230,255,.75);
        }
        .article-body ul,
        .article-body ol{
            padding-left:1.25em;
            margin:0 0 1.2em;
        }
        .article-body li{
            margin: .45em 0;
            color:#e0ebf6;
        }
        .article-body blockquote{
            margin:1.5em 0;
            padding:18px 20px;
            border-left:3px solid rgba(80,230,255,.75);
            background:rgba(255,255,255,.03);
            border-radius:0 18px 18px 0;
            color:#d8e7f2;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .article-body code{
            padding:.18rem .42rem;
            border-radius:8px;
            background:rgba(80,230,255,.08);
            color:#dffcff;
        }
        .article-body pre{
            padding:18px 20px;
            border-radius:18px;
            background:#07111a;
            border:1px solid rgba(130, 212, 255, .14);
            overflow:auto;
            color:#dce9f4;
            box-shadow:var(--shadow-soft);
        }
        .article-body hr{
            border:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(130, 212, 255, .24), transparent);
            margin:1.6em 0;
        }
        .article-body img{
            margin:1.4em 0;
            border-radius:18px;
            border:1px solid rgba(130, 212, 255, .12);
            box-shadow:var(--shadow-soft);
        }
        .article-body table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            margin:1.2em 0;
            overflow:hidden;
            border-radius:18px;
            border:1px solid rgba(130, 212, 255, .12);
            background:rgba(255,255,255,.02);
        }
        .article-body th,
        .article-body td{
            padding:14px 14px;
            border-bottom:1px solid rgba(130, 212, 255, .09);
            vertical-align:top;
        }
        .article-body th{
            background:rgba(255,255,255,.04);
            color:#f0f8ff;
        }
        .article-body tr:last-child td{border-bottom:0}
        .article-meta-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:12px;
            margin-top:18px;
        }
        .article-meta-item{
            padding:14px 15px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130, 212, 255, .12);
        }
        .article-meta-item .label{
            display:flex;
            align-items:center;
            gap:8px;
            color:var(--soft);
            font-size:12px;
            text-transform:uppercase;
            letter-spacing:.04em;
            margin-bottom:8px;
        }
        .article-meta-item .label i{color:var(--primary)}
        .article-meta-item .value{
            color:#ecf4fb;
            font-weight:700;
            line-height:1.5;
            font-size:14px;
        }
        .side-sticky{
            position:sticky;
            top:106px;
            display:grid;
            gap:18px;
        }
        .info-card .card-title,
        .latest-card .card-title,
        .faq-card .card-title,
        .cta-panel .card-title{
            margin:0 0 14px;
            font-size:20px;
            font-weight:800;
        }
        .info-list{
            display:grid;
            gap:12px;
        }
        .info-row{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:14px 15px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(130, 212, 255, .12);
        }
        .info-ico{
            width:38px;
            height:38px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, rgba(80,230,255,.14), rgba(125,125,255,.12));
            color:var(--primary);
            flex:0 0 auto;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }
        .info-row strong{
            display:block;
            margin-bottom:4px;
            color:#f0f8ff;
        }
        .info-row p{
            margin:0;
            color:var(--muted);
            line-height:1.65;
            font-size:14px;
        }
        .chip-wrap{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            color:#d8e7f2;
            border:1px solid rgba(130, 212, 255, .12);
            font-size:13px;
        }
        .chip i{color:var(--primary)}
        .latest-list{
            display:grid;
            gap:14px;
        }
        .latest-item{
            padding:16px;
            border-radius:18px;
            border:1px solid rgba(130, 212, 255, .12);
            background:rgba(255,255,255,.03);
            transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        .latest-item:hover{
            transform: translateY(-2px);
            border-color:rgba(80,230,255,.24);
            box-shadow:0 12px 26px rgba(0,0,0,.18);
        }
        .latest-item h4{
            margin:0 0 8px;
            font-size:17px;
            line-height:1.4;
            font-weight:700;
        }
        .latest-item p{
            margin:0 0 12px;
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
        }
        .latest-meta{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            align-items:center;
            color:#b9c7d5;
            font-size:12px;
        }
        .latest-meta .tag{
            padding:5px 9px;
            border-radius:999px;
            background:rgba(80,230,255,.08);
            color:#bff5ff;
            border:1px solid rgba(80,230,255,.12);
        }
        .latest-meta .time{
            color:var(--soft);
        }
        .empty-state{
            padding:28px 22px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,123,137,.18);
            text-align:left;
        }
        .empty-state h3{
            margin:0 0 10px;
            font-size:22px;
            font-weight:800;
        }
        .empty-state p{
            margin:0 0 18px;
            color:var(--muted);
            line-height:1.8;
        }
        .faq-card .accordion{
            display:grid;
            gap:12px;
        }
        .accordion-item{
            border:1px solid rgba(130, 212, 255, .12) !important;
            background:rgba(255,255,255,.03);
            border-radius:18px !important;
            overflow:hidden;
            box-shadow:none;
        }
        .accordion-item + .accordion-item{
            margin-top:0;
        }
        .accordion-button{
            background:transparent;
            color:var(--text);
            font-weight:700;
            padding:18px 18px;
            box-shadow:none !important;
        }
        .accordion-button:not(.collapsed){
            background:linear-gradient(135deg, rgba(80,230,255,.09), rgba(125,125,255,.08));
            color:var(--text);
        }
        .accordion-button::after{
            filter: invert(1) brightness(1.4);
            opacity:.85;
        }
        .accordion-body{
            color:var(--muted);
            padding:0 18px 18px;
            line-height:1.8;
        }
        .cta-panel{
            padding:30px;
            background:
                radial-gradient(circle at 15% 20%, rgba(80,230,255,.12), transparent 22%),
                radial-gradient(circle at 85% 0%, rgba(125,125,255,.12), transparent 24%),
                linear-gradient(180deg, rgba(13,23,33,.96), rgba(10,17,26,.98));
        }
        .cta-panel .lead{
            color:var(--muted);
            line-height:1.8;
            max-width: 62ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:18px;
        }
        .site-footer{
            padding: 28px 0 30px;
            margin-top: 6px;
            position:relative;
            background: linear-gradient(180deg, rgba(6,10,15,.12), rgba(6,10,15,.48));
            border-top:1px solid rgba(130, 212, 255, .12);
        }
        .site-footer::before{
            content:"";
            position:absolute;
            left:0;
            right:0;
            top:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(80,230,255,.65), rgba(125,125,255,.55), transparent);
            opacity:.75;
        }
        .footer-grid{
            display:grid;
            grid-template-columns: 1.2fr .72fr .72fr;
            gap:24px;
        }
        .footer-brand{
            display:flex;
            align-items:flex-start;
            gap:14px;
        }
        .footer-brand h3{
            margin:0 0 8px;
            font-size:20px;
            font-weight:800;
        }
        .small-copy{
            color:var(--soft);
            font-size:13px;
            line-height:1.7;
        }
        .footer-note{
            margin-top:16px;
            color:#c5d6e4;
            line-height:1.8;
            max-width: 42ch;
        }
        .footer-links{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-links a{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#cfddea;
            padding:6px 0;
        }
        .footer-links a:hover{color:var(--primary)}
        .footer-divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(130,212,255,.16), transparent);
            margin:22px 0;
        }
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 11px;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            color:#cddae6;
            border:1px solid rgba(130, 212, 255, .12);
            font-size:12px;
        }
        .badge-soft i{color:var(--good)}
        .top-gap{margin-top:18px}
        .divider-soft{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(130,212,255,.14), transparent);
            margin:20px 0;
        }
        .sticky-note{
            position:relative;
            padding-left:14px;
            color:#d7e4ef;
        }
        .sticky-note::before{
            content:"";
            position:absolute;
            left:0;
            top:.35em;
            width:4px;
            height:1.1em;
            border-radius:999px;
            background:linear-gradient(180deg, var(--primary), var(--primary-2));
            box-shadow:0 0 14px rgba(80,230,255,.45);
        }
        .return-links{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .back-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#dce9f4;
            padding:10px 0;
            font-weight:700;
        }
        .back-link:hover{color:var(--primary)}
        @media (max-width: 1199.98px){
            .hero-grid,
            .page-grid{
                grid-template-columns:1fr;
            }
            .side-sticky{
                position:relative;
                top:auto;
            }
            .hero-stats{
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        @media (max-width: 991.98px){
            body{padding-top:82px;}
            .navbar-collapse{
                margin-top:14px;
                padding:14px;
                border-radius:18px;
                background:rgba(8,15,22,.92);
                border:1px solid rgba(130, 212, 255, .12);
                box-shadow:var(--shadow);
            }
            .nav-shell{
                width:100%;
                align-items:stretch;
            }
            .navbar-nav{
                width:100%;
                gap:8px;
                padding-bottom:12px;
            }
            .navbar-nav .nav-link{
                width:100%;
                text-align:left;
            }
            .hero-card,
            .hero-visual,
            .content-card,
            .info-card,
            .latest-card,
            .faq-card,
            .cta-panel{
                padding:22px;
            }
            .visual-cover{
                min-height:280px;
            }
            .footer-grid{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 767.98px){
            .section-pad{padding:72px 0;}
            .hero-title{
                font-size:clamp(28px, 9vw, 38px);
            }
            .hero-stats{
                grid-template-columns:1fr;
            }
            .cover-metrics{
                grid-template-columns:1fr;
                position:static;
                margin-top:14px;
            }
            .visual-cover{
                min-height:auto;
                padding-bottom:18px;
            }
            .content-title{
                font-size:24px;
            }
            .article-meta-grid{
                grid-template-columns:1fr;
            }
            .cta-actions,
            .hero-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .hero-actions .btn,
            .cta-actions .btn{
                width:100%;
            }
        }
        @media (max-width: 575.98px){
            .container-fluid, .container-xl{
                padding-left:16px;
                padding-right:16px;
            }
            .hero-card,
            .hero-visual,
            .content-card,
            .info-card,
            .latest-card,
            .faq-card,
            .cta-panel{
                padding:18px;
            }
            .hero-title{
                line-height:1.1;
            }
            .meta-strip{
                gap:8px;
            }
            .meta-pill{
                width:100%;
                justify-content:flex-start;
            }
            .cover-title{
                max-width:none;
            }
        }

/* 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}