/* roulang page: index */
:root{
            --bg-root:#060B14;
            --bg-dark:#0A1220;
            --bg-medium:#0D1A2C;
            --block-dark:linear-gradient(180deg,#0C1626 0%,#101E33 100%);
            --primary:#1E6FFF;
            --glow:#38C8FF;
            --gold:#E8B67A;
            --white-hi:rgba(240,247,255,.96);
            --text-soft:rgba(174,194,219,.92);
            --text-weak:rgba(144,162,185,.72);
            --line-soft:rgba(120,160,220,.14);
            --card-radius:14px;
            --btn-radius:10px;
            --shadow-card:0 16px 30px -18px rgba(0,0,0,.45),0 6px 16px -8px rgba(14,45,99,.25);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
        body{
            margin:0;
            font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
            background:linear-gradient(165deg,#060B14 0%,#0A1220 52%,#0D1A2C 100%);
            color:var(--text-soft);
            line-height:1.75;
            word-break:break-word;
            font-size:15px;
            letter-spacing:.01em;
        }
        a{color:inherit;text-decoration:none;transition:color .25s ease,border-color .25s ease,background .25s ease}
        img{max-width:100%;height:auto;display:block}
        button,input{font-family:inherit}
        .peak-container{max-width:1320px;margin:0 auto;padding:0 24px}
        .section{padding:78px 0;position:relative}
        .section-ridge{position:relative}
        .section-ridge:after{
            content:"";
            position:absolute;
            left:0;right:0;bottom:0;height:1px;
            background:linear-gradient(90deg,transparent,rgba(120,170,255,.22) 20%,rgba(56,200,255,.4) 50%,rgba(120,170,255,.22) 80%,transparent);
            pointer-events:none;
        }
        .section-head{
            display:flex;align-items:flex-end;justify-content:space-between;
            margin-bottom:34px;gap:24px;flex-wrap:wrap;
        }
        .section-head h2{
            font-size:32px;line-height:1.3;font-weight:700;color:var(--white-hi);margin:0;letter-spacing:.02em;
        }
        .section-head .section-lead{color:var(--text-weak);max-width:640px;margin:8px 0 0;font-size:14px}
        .more-link{color:var(--glow);font-size:14px;white-space:nowrap;border-bottom:1px solid rgba(56,200,255,.35);padding-bottom:2px}
        .more-link:hover{color:var(--gold);border-color:var(--gold)}

        /* ========== 双行导航 ========== */
        .peak-nav{
            position:sticky;top:0;z-index:1070;
            background:rgba(8,15,28,.74);
            backdrop-filter:blur(16px);
            -webkit-backdrop-filter:blur(16px);
            border-bottom:1px solid rgba(120,160,220,.08);
            transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
        }
        .peak-nav.nav-scrolled{
            background:rgba(8,15,28,.93);
            border-bottom-color:rgba(56,200,255,.18);
            box-shadow:0 10px 30px -14px rgba(0,0,0,.55);
        }
        .brand-row{display:flex;align-items:center;min-height:68px;gap:16px;flex-wrap:wrap}
        .brand-lockup{display:inline-flex;align-items:center;gap:12px}
        .brand-mark{
            width:40px;height:40px;border-radius:12px;flex:0 0 40px;
            display:flex;align-items:center;justify-content:center;
            background:linear-gradient(135deg,#16345f,#0B1630);
            border:1px solid rgba(56,200,255,.38);
            color:var(--glow);font-size:20px;position:relative;
        }
        .brand-mark:after{
            content:"";position:absolute;width:7px;height:7px;right:-2px;bottom:-2px;
            background:var(--gold);border-radius:0 0 8px 0;box-shadow:0 0 8px rgba(232,182,122,.6);
        }
        .brand-text{display:flex;flex-direction:column;line-height:1.25}
        .brand-text-main{font-size:21px;font-weight:800;color:var(--white-hi);letter-spacing:.04em}
        .brand-text-sub{font-size:13px;color:rgba(174,194,219,.74);margin-top:1px;letter-spacing:.18em}
        .brand-text-main .hl-blue{color:#5B9BFF}
        .brand-row-right{display:flex;align-items:center;gap:20px;margin-left:auto}
        .header-note{font-size:13px;color:var(--text-weak);display:inline-flex;align-items:center;gap:6px;border-left:1px solid var(--line-soft);padding-left:18px}
        .header-note i{color:var(--gold)}
        .nav-mini-btn{
            display:inline-flex;align-items:center;gap:6px;
            border:1px solid rgba(56,200,255,.3);color:#CFE8FF;
            background:rgba(30,111,255,.08);border-radius:8px;padding:6px 14px;font-size:14px;
        }
        .nav-mini-btn:hover{color:#fff;border-color:var(--glow);background:rgba(56,200,255,.12)}
        .channel-desktop{border-top:1px solid rgba(120,160,220,.08);display:flex;align-items:center;min-height:52px;gap:28px}
        .nav-channels{display:flex;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}
        .channel-link{
            display:inline-block;padding:8px 16px;font-size:15px;font-weight:500;
            color:rgba(215,226,240,.82);border-radius:100px;position:relative;
            border:1px solid transparent;
        }
        .channel-link:hover{color:#fff}
        .channel-link.active{color:#ffffff}
        .channel-link.active:after{
            content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;
            background:var(--glow);border-radius:2px;box-shadow:0 0 8px rgba(56,200,255,.6);
        }
        .header-search{
            margin-left:auto;display:flex;align-items:center;gap:8px;
            background:rgba(255,255,255,.04);border:1px solid var(--line-soft);
            border-radius:8px;padding:6px 12px;width:250px;transition:border .3s;
        }
        .header-search:focus-within{border-color:rgba(56,200,255,.5)}
        .header-search i{color:var(--glow);font-size:14px}
        .header-search input{background:transparent;border:0;outline:none;color:#EAF2FF;font-size:14px;width:100%}
        .header-search input::placeholder{color:rgba(144,162,185,.65)}
        .navbar-toggler-peak{
            border:1px solid rgba(120,160,220,.25);background:rgba(255,255,255,.04);
            border-radius:8px;color:#DEEBFF;width:42px;height:38px;padding:0;
        }
        .navbar-toggler-peak:focus{box-shadow:0 0 0 3px rgba(56,200,255,.2)}
        .mobile-nav-panel{border-top:1px solid var(--line-soft);padding:10px 4px 14px}
        .mobile-nav-panel a{
            display:block;padding:10px 8px;color:#D6E4F5;border-radius:8px;font-size:15px;
            border-bottom:1px solid rgba(120,160,220,.06);
        }
        .mobile-nav-panel a.active{color:var(--glow)}
        .mobile-nav-panel a:hover{color:#fff;background:rgba(56,200,255,.05)}

        /* ========== 幽灵动线分割 ========== */
        .ridge-line{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,rgba(56,200,255,.4) 50%,transparent)}

        /* ========== Hero ========== */
        .peak-hero{
            position:relative;
            min-height:660px;
            display:flex;align-items:center;
            background:url('/assets/images/backpic/back-1.png') center 25% / cover no-repeat,#0A1020;
            padding:76px 0 68px;
            overflow:hidden;
        }
        .peak-hero:before{
            content:"";position:absolute;inset:0;
            background:linear-gradient(128deg,rgba(4,8,15,.92) 6%,rgba(5,10,19,.8) 44%,rgba(9,21,40,.72) 88%,rgba(9,21,40,.66) 100%);
        }
        .peak-hero .peak-container,.peak-hero .row{position:relative;z-index:2}
        .hero-echo{
            display:inline-flex;align-items:center;gap:8px;
            border:1px solid rgba(56,200,255,.25);border-radius:100px;
            padding:5px 14px;color:#BDE5FF;font-size:13px;background:rgba(30,111,255,.08);
            margin-bottom:22px;
        }
        .hero-echo i{color:var(--glow)}
        .peak-hero h1{
            color:var(--white-hi);
            font-size:42px;line-height:1.32;font-weight:800;letter-spacing:.01em;margin:0 0 16px;
        }
        .peak-hero h1 .peak-word{color:#60A1FF}
        .peak-hero .hero-description{
            font-size:16px;color:rgba(190,207,228,.9);max-width:660px;margin:0;
        }
        .hero-meta-note{
            font-size:13px;color:rgba(144,162,185,.75);margin:14px 0 0;
            line-height:1.7;max-width:640px;border-left:2px solid rgba(232,182,122,.5);
            padding-left:12px;
        }
        .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}

        /* ========== 按钮系统 ========== */
        .btn-peak{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            border-radius:var(--btn-radius);font-weight:600;letter-spacing:.03em;
            font-size:15px;padding:11px 24px;line-height:1.5;border:1px solid transparent;
            transition:all .25s ease;position:relative;
        }
        .btn-primary-peak{
            background:var(--primary);border-color:#2E7FFF;color:#FFFFFF;
            box-shadow:0 6px 18px -6px rgba(30,111,255,.5);
        }
        .btn-primary-peak:after{
            content:"";position:absolute;right:5px;bottom:3px;height:2px;width:22px;
            background:var(--gold);border-radius:2px;opacity:.92;
        }
        .btn-primary-peak:hover{background:#2A79FF;border-color:#4390FF;color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(30,111,255,.6)}
        .btn-primary-peak:active{transform:translateY(0);background:#175CE0}
        .btn-ghost-peak{
            background:rgba(255,255,255,.035);border-color:rgba(120,170,220,.25);color:#D7E8FF;
        }
        .btn-ghost-peak:hover{border-color:var(--glow);color:#fff;background:rgba(56,200,255,.06)}
        .btn-gold-tip{position:relative;overflow:hidden}
        .btn-gold-tip i{color:var(--gold);font-size:13px}

        /* ========== hero 信息面板 ========== */
        .glass-panel{
            background:linear-gradient(140deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            border:1px solid rgba(120,165,215,.18);
            border-radius:var(--card-radius);
            box-shadow:0 18px 34px -20px rgba(0,0,0,.5);
            position:relative;
        }
        .glass-panel:after{
            content:"";position:absolute;top:0;left:28px;right:28px;height:1px;
            background:linear-gradient(90deg,transparent,rgba(195,225,255,.6),transparent);
        }
        .hero-panel-wrap{max-width:500px;margin-left:auto}
        .hero-panel{padding:12px}
        .hero-panel-cover{border-radius:10px;width:100%;height:auto;object-fit:cover}
        .hero-panel-content{padding:12px 12px 8px}
        .panel-kicker{display:flex;align-items:center;gap:6px;color:var(--gold);font-size:13px}
        .panel-kicker i{color:var(--glow)}
        .app-title{font-size:22px;font-weight:800;color:var(--white-hi);margin:6px 0 10px}
        .version-line{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
        .badge-soft{
            display:inline-flex;align-items:center;gap:6px;
            background:rgba(56,200,255,.08);border:1px solid rgba(56,200,255,.3);
            color:#BFE9FF;font-size:12px;border-radius:100px;padding:3px 12px;
        }
        .badge-gold{
            background:rgba(232,182,122,.08);border:1px solid rgba(232,182,122,.35);
            color:#F2D3A6;font-size:12px;border-radius:100px;padding:3px 12px;
        }
        .app-info-list{list-style:none;margin:0 0 12px;padding:0;font-size:14px}
        .app-info-list li{display:flex;gap:10px;padding:7px 2px;border-top:1px solid rgba(120,160,220,.1);color:#C9D8ED}
        .app-info-list li dt{flex:0 0 78px;color:rgba(144,162,185,.8)}
        .app-info-list li dd{margin:0;flex:1}
        .status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 6px var(--glow);margin-right:6px}
        .status-dot.gold-dot{background:var(--gold);box-shadow:0 0 6px var(--gold)}
        .panel-note{font-size:12px;color:rgba(144,162,185,.7);margin:6px 0 4px;line-height:1.6;border-top:1px dashed rgba(120,160,220,.18);padding-top:12px}

        /* ========== 信息安全保障条 ========== */
        .trust-bar{border-top:1px solid rgba(120,160,220,.1)}
        .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 0}
        .trust-item{display:flex;align-items:flex-start;gap:14px}
        .trust-item .t-icon{
            width:44px;height:44px;border-radius:12px;flex:0 0 44px;
            color:var(--glow);background:rgba(56,200,255,.07);
            border:1px solid rgba(56,200,255,.18);
            display:flex;align-items:center;justify-content:center;font-size:20px;
        }
        .trust-item h3{font-size:16px;color:var(--white-hi);margin:0 0 2px;font-weight:600}
        .trust-item small{font-size:13px;color:rgba(144,162,185,.75);font-weight:400}

        /* ========== 功能维度区块 ========== */
        .info-grid-section{background:linear-gradient(180deg,rgba(10,18,32,.6),rgba(10,18,32,.2))}
        .feature-card{
            height:100%;border-radius:var(--card-radius);
            background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
            border:1px solid rgba(120,160,220,.13);
            padding:26px 24px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
            position:relative;overflow:hidden;
        }
        .feature-card:after{
            content:"";position:absolute;top:0;left:30%;right:30%;height:1px;
            background:linear-gradient(90deg,transparent,rgba(190,225,255,.5),transparent);
            opacity:.7;
        }
        .feature-card:hover{transform:translateY(-3px);border-color:rgba(56,200,255,.45);box-shadow:0 14px 28px -18px rgba(56,200,255,.3)}
        .feature-card .feature-icon{
            width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
            font-size:23px;color:var(--glow);background:rgba(30,111,255,.1);
            border:1px solid rgba(30,111,255,.22);margin-bottom:16px;
        }
        .feature-card h3{font-size:18px;font-weight:700;color:var(--white-hi);margin:0 0 8px}
        .feature-card p{font-size:14px;color:var(--text-weak);line-height:1.7;margin:0}

        /* ========== 版本信息区 ========== */
        .version-strip{overflow:hidden}
        .version-status-box{
            background:linear-gradient(180deg,rgba(10,18,32,.8),rgba(7,13,24,.45));
            border-radius:20px;border:1px solid rgba(120,165,220,.15);
            padding:30px;
            position:relative;height:100%;
        }
        .version-status-row{
            border-bottom:1px solid rgba(120,160,220,.1);padding:18px 4px;
            display:flex;align-items:center;gap:18px;flex-wrap:wrap;
        }
        .version-status-row:last-child{border-bottom:0}
        .version-status-row .platform-ico{
            width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.045);
            border:1px solid rgba(120,160,220,.18);display:flex;align-items:center;justify-content:center;
            color:var(--glow);font-size:21px;flex:0 0 42px;
        }
        .platform-name{font-size:17px;font-weight:700;color:var(--white-hi);min-width:76px}
        .version-no{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:15px;color:#B6E0FF;background:rgba(56,200,255,.07);padding:3px 12px;border-radius:6px}
        .version-desc{font-size:13px;color:rgba(144,162,185,.75);flex:1 1 180px;min-width:160px}
        .link-arrow{color:var(--glow);font-size:14px;white-space:nowrap}
        .link-arrow:hover{color:var(--gold)}
        .version-visual img{border-radius:16px;width:100%;height:auto;box-shadow:0 20px 44px -24px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.06)}

        /* ========== 资讯动态 ========== */
        .news-section{background:linear-gradient(180deg,rgba(4,9,16,.1),rgba(9,18,32,.75))}
        .news-item{
            display:block;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
            border:1px solid rgba(120,160,220,.14);
            border-radius:14px;height:100%;padding:22px 24px;position:relative;
            transition:border-color .25s,background .25s,transform .25s;overflow:hidden;
        }
        .news-item:hover{border-color:rgba(56,200,255,.45);background:rgba(255,255,255,.06);transform:translateY(-2px)}
        .news-item:after{content:"";position:absolute;top:0;left:24px;right:60%;height:1px;background:linear-gradient(90deg,rgba(190,225,255,.5),transparent)}
        .news-cat{display:inline-block;font-size:12px;color:#BFE9FF;border:1px solid rgba(56,200,255,.3);padding:2px 12px;border-radius:100px;margin-bottom:12px;background:rgba(56,200,255,.06)}
        .news-item h3{color:var(--white-hi);font-size:18px;font-weight:600;line-height:1.5;margin:0 0 10px}
        .news-item p{color:var(--text-weak);font-size:14px;margin:0 0 14px;line-height:1.65;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
        .news-meta{display:flex;align-items:center;justify-content:space-between;width:100%;color:rgba(136,158,184,.78);font-size:13px}
        .news-meta i{margin-right:7px;color:rgba(56,200,255,.7)}
        .news-more{color:var(--gold);border-bottom:1px solid rgba(232,182,122,.3)}
        .news-empty{
            grid-column:1/-1;text-align:center;color:var(--text-weak);
            border:1px dashed rgba(120,160,220,.22);border-radius:14px;
            padding:40px;font-size:15px;
        }

        /* ========== 用户评价轮播 ========== */
        .quote-section{background:rgba(6,11,18,.35)}
        .quote-card{
            height:100%;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
            border:1px solid rgba(120,160,220,.15);border-radius:14px;padding:24px;
            position:relative;
        }
        .quote-card i.bi-star-fill{color:var(--gold);font-size:14px}
        .quote-stars{display:flex;gap:4px;margin-bottom:14px}
        .quote-text{font-size:15px;line-height:1.75;color:#D8E3F1;margin-bottom:16px}
        .quote-user{display:flex;align-items:center;gap:12px}
        .quote-avatar{
            flex:0 0 38px;width:38px;height:38px;border-radius:50%;
            background:rgba(30,111,255,.15);border:1px solid rgba(56,200,255,.3);
            color:var(--glow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
        }
        .quote-info .quote-role{font-size:13px;color:#C9D8EF}
        .quote-info small{color:rgba(144,162,185,.62)}
        .carousel-dark .carousel-indicators [data-bs-target]{background-color:rgba(56,200,255,.4)}
        .quote-indicators{bottom:-54px}
        .quote-indicators [data-bs-target]{width:9px;height:9px;border-radius:50%;margin:0 6px;background:rgba(56,200,255,.4)}
        .quote-indicators .active{background:var(--gold)}
        .quote-carousel{padding-bottom:54px}

        /* ========== FAQ ========== */
        .faq-section{background:linear-gradient(180deg,rgba(8,16,30,.5),rgba(6,12,22,.3));}
        .faq-title-wrap h2{font-size:33px;color:var(--white-hi);font-weight:800;line-height:1.35;margin-bottom:12px}
        .faq-title-wrap p{color:var(--text-weak);font-size:15px;max-width:380px}
        .faq-accordion .accordion-item{
            background:rgba(255,255,255,.028);
            border:1px solid rgba(120,170,225,.13);
            border-radius:12px !important;
            margin-bottom:14px;overflow:hidden;
        }
        .faq-accordion .accordion-button{
            background:transparent;color:var(--white-hi);font-weight:600;
            font-size:16px;padding:16px 20px;box-shadow:none;border-bottom:1px solid transparent;
        }
        .faq-accordion .accordion-button:not(.collapsed){color:#fff;border-bottom-color:rgba(120,170,225,.1)}
        .faq-accordion .accordion-button:focus{box-shadow:none}
        .faq-accordion .accordion-button::after{
            background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2338C8FF' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        .faq-accordion .accordion-body{color:#AFC3DC;font-size:15px;line-height:1.85;padding:8px 20px 20px}

        /* ========== CTA ========== */
        .cta-banner{
            position:relative;border-radius:24px;overflow:hidden;
            background:url('/assets/images/backpic/back-3.webp') center/cover no-repeat,#0B1630;
            padding:58px 50px;border:1px solid rgba(120,165,220,.18);
        }
        .cta-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,8,15,.94),rgba(6,14,26,.86) 56%,rgba(13,29,52,.72))}
        .cta-banner .cta-content,.cta-banner .cta-button{position:relative;z-index:2}
        .cta-banner h2{color:var(--white-hi);font-size:30px;font-weight:800;line-height:1.35;margin-bottom:12px}
        .cta-banner p{color:rgba(190,207,228,.9);font-size:16px;margin-bottom:0;max-width:720px}
        .cta-button{display:flex;align-items:center;gap:14px;justify-content:flex-end;flex-wrap:wrap}

        /* ========== 页脚 ========== */
        .footer{
            background:linear-gradient(180deg,rgba(3,6,12,.5),rgba(3,6,10,.92));
            position:relative;padding-top:62px;
        }
        .footer:before{
            content:"";position:absolute;top:0;left:0;right:0;height:1px;
            background:linear-gradient(90deg,transparent,rgba(120,180,255,.36),rgba(56,200,255,.32),rgba(120,180,255,.36),transparent);
        }
        .footer .footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px}
        .footer .footer-brand-name-main{display:block;color:var(--white-hi);font-size:23px;font-weight:800}
        .footer .footer-brand-name-sub{display:block;font-size:12px;color:var(--gold);letter-spacing:.22em;margin-top:2px}
        .footer p.footer-desc{color:rgba(144,162,185,.74);font-size:14px;line-height:1.85;max-width:360px}
        .footer h4{font-size:16px;color:var(--white-hi);font-weight:700;margin-bottom:14px}
        .footer-links{list-style:none;padding:0;margin:0}
        .footer-links li{margin-bottom:9px}
        .footer-links a{color:rgba(158,179,205,.76);font-size:14px;display:inline-flex;align-items:center;gap:8px}
        .footer-links a:before{content:"›";color:rgba(56,200,255,.55)}
        .footer-links a:hover{color:var(--glow)}
        .footer .footer-bottom{
            margin-top:46px;border-top:1px solid rgba(120,160,220,.1);padding:20px 0 22px;
            font-size:13px;color:rgba(144,162,185,.62);display:flex;flex-wrap:wrap;gap:10px;
            align-items:center;justify-content:space-between;
        }
        .footer-bottom .fw-keyword{color:var(--gold);opacity:.78}

        /* ========== 响应式 ========== */
        @media (max-width: 1199px){
            .footer-brand-block{margin-bottom:36px}
            .cta-banner{padding:44px 30px}
            .cta-button{justify-content:flex-start;margin-top:22px}
        }
        @media (max-width: 991px){
            .section{padding:58px 0}
            .section-head h2{font-size:28px}
            .peak-hero{min-height:0;padding:58px 0}
            .peak-hero h1{font-size:32px}
            .hero-panel-wrap{margin-left:0}
            .trust-grid{grid-template-columns:repeat(2,1fr)}
            .brand-row-right{display:none}
        }
        @media (max-width: 767px){
            .peak-container{padding:0 16px}
            .section{padding:52px 0}
            .section-head h2{font-size:25px}
            .brand-row{gap:10px;min-height:60px}
            .brand-text-main{font-size:19px}
            .brand-text-sub{font-size:11px}
            .peak-hero h1{font-size:28px;line-height:1.35}
            .hero-actions .btn-peak{width:100%}
            .trust-grid{grid-template-columns:1fr 1fr;gap:18px;padding:16px 0 10px}
            .trust-item{flex-wrap:wrap;gap:8px}
            .trust-item .t-icon{width:38px;height:38px;flex:0 0 38px}
            .version-status-row{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 2px}
            .version-desc{font-size:14px}
            .version-status-box{padding:20px}
            .news-item{padding:18px}
            .cta-banner{padding:34px 24px}
            .cta-banner h2{font-size:24px}
            .cta-banner p{line-height:1.7}
            .footer{padding-top:50px}
        }
        @media (max-width: 520px){
            .trust-grid{grid-template-columns:1fr}
            .trust-item{justify-content:center;text-align:center}
            .trust-item .t-icon{margin:0 auto}
            .section-head .more-link{margin-left:auto}
            .quote-card{padding:18px}
        }
        @media (prefers-reduced-motion: reduce){
            *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
        }
        a:focus-visible,.btn-peak:focus-visible,.channel-link:focus-visible{
            outline:2px solid var(--glow);outline-offset:3px;border-radius:6px;
        }

/* roulang page: category1 */
:root {
            --bg-start: #060B14;
            --bg-mid: #0A1220;
            --bg-soft: #0D1A2C;
            --bg-block: #0C1626;
            --brand-blue: #1E6FFF;
            --ice-cyan: #38C8FF;
            --gold: #E8B67A;
            --text-high: rgba(240, 247, 255, 0.96);
            --text-body: rgba(174, 194, 219, 0.92);
            --text-muted: rgba(132, 155, 184, 0.82);
            --line-soft: rgba(128, 175, 225, 0.15);
            --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --shadow-deep: 0 16px 30px -18px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(14, 45, 99, 0.25);
            --shadow-light: 0 24px 50px -32px rgba(0, 10, 25, 0.7);
            --font-stack: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: var(--font-stack);
            background: linear-gradient(160deg, var(--bg-start), var(--bg-mid) 55%, var(--bg-soft));
            background-attachment: fixed;
            color: var(--text-body);
            line-height: 1.75;
            word-break: break-word;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        a {
            color: var(--ice-cyan);
            text-decoration: none;
            transition: color 0.25s ease;
        }

        a:hover {
            color: #7fdaff;
        }

        :focus-visible {
            outline: 2px solid var(--ice-cyan);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .peak-container {
            max-width: 1320px;
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        .peak-container-sm {
            max-width: 1020px;
            margin: 0 auto;
        }

        section {
            padding-top: 88px;
            padding-bottom: 88px;
        }

        .section-compact {
            padding-top: 56px;
            padding-bottom: 56px;
        }

        .peak-rise {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(120, 185, 255, 0.28), transparent);
            border: 0;
            margin: 0;
        }

        .hl-blue {
            color: var(--brand-blue);
        }

        .hl-cyan {
            color: var(--ice-cyan);
        }

        .hl-gold {
            color: var(--gold);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ice-cyan);
            letter-spacing: 0.12em;
            padding: 6px 14px;
            border: 1px solid rgba(56, 200, 255, 0.25);
            border-radius: 999px;
            background: rgba(56, 200, 255, 0.06);
        }

        .sec-title {
            color: var(--text-high);
            font-size: 30px;
            line-height: 1.35;
            font-weight: 700;
            letter-spacing: 0.02em;
            margin: 13px 0 12px;
        }

        .sec-desc {
            max-width: 720px;
            color: var(--text-body);
            font-size: 16px;
            margin: 0 auto;
        }

        .text-center .sec-desc {
            margin-left: auto;
            margin-right: auto;
        }

        .peak-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 15px;
            line-height: 1;
            padding: 13px 22px 14px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #1E6FFF, #175fdd);
            color: #fff;
            box-shadow: 0 10px 24px -10px rgba(30, 111, 255, 0.65);
            transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
            border: 0;
        }

        .peak-btn::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 34px;
            height: 2px;
            background: var(--gold);
            border-radius: 4px 0 0 0;
            transition: width 0.3s ease, opacity 0.3s ease;
        }

        .peak-btn:hover {
            filter: brightness(1.06);
            transform: translateY(-2px);
            color: #fff;
            box-shadow: 0 16px 30px -12px rgba(30, 111, 255, 0.75);
        }

        .peak-btn-ghost {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(235, 245, 255, 0.9);
            border: 1px solid rgba(160, 200, 240, 0.2);
            box-shadow: none;
            backdrop-filter: blur(6px);
        }

        .peak-btn-ghost::after {
            background: var(--ice-cyan);
        }

        .peak-btn-ghost:hover {
            background: rgba(56, 200, 255, 0.1);
            border-color: rgba(56, 200, 255, 0.5);
            color: #fff;
            box-shadow: 0 12px 28px -16px rgba(56, 200, 255, 0.5);
        }

        .peak-btn-sm {
            padding: 10px 16px 11px;
            font-size: 14px;
        }

        .peak-btn-ghost-light {
            background: rgba(10, 18, 32, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.28);
            color: #fff;
            box-shadow: none;
        }

        .peak-btn-ghost-light:hover {
            border-color: rgba(255, 255, 255, 0.65);
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
        }

        .badge-tag {
            display: inline-block;
            background: rgba(30, 111, 255, 0.1);
            border: 1px solid rgba(30, 111, 255, 0.3);
            color: var(--ice-cyan);
            padding: 4px 11px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
            white-space: nowrap;
        }

        .badge-soft {
            background: rgba(56, 200, 255, 0.1);
            border-color: rgba(56, 200, 255, 0.2);
        }

        .glass-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
            border: 1px solid rgba(170, 210, 255, 0.13);
            border-top: 1px solid rgba(210, 230, 255, 0.18);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-deep);
            backdrop-filter: blur(8px);
            position: relative;
        }

        .glass-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(190, 220, 255, 0.25), rgba(255, 255, 255, 0.01));
            border-radius: 14px 14px 0 0;
            pointer-events: none;
        }

        .glass-card-hover {
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .glass-card-hover:hover {
            transform: translateY(-4px);
            border-color: rgba(56, 200, 255, 0.4);
            box-shadow: 0 20px 36px -20px rgba(0, 10, 25, 0.65), 0 10px 30px -12px rgba(30, 111, 255, 0.28);
        }

        .section-head {
            margin-bottom: 42px;
        }

        .section-head .text-light-title {
            font-size: 15px;
        }

        /* 顶栏与导航 */
        .peak-nav {
            position: sticky;
            top: 0;
            z-index: 1080;
            background: rgba(6, 12, 22, 0.62);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(130, 175, 225, 0.08);
            padding: 0;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .peak-nav.is-scrolled {
            background: rgba(8, 15, 28, 0.92);
            box-shadow: 0 14px 25px -20px rgba(0, 5, 15, 0.8);
            border-bottom-color: rgba(56, 200, 255, 0.14);
        }

        .peak-nav .navbar-toggler-peak {
            background: transparent;
            border: 1px solid rgba(170, 205, 240, 0.2);
            border-radius: 8px;
            color: rgba(235, 244, 255, 0.92);
            width: 44px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: border 0.2s ease;
        }

        .peak-nav .navbar-toggler-peak:hover {
            border-color: var(--ice-cyan);
            color: var(--ice-cyan);
        }

        .brand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 12px 0 0;
            flex-wrap: wrap;
        }

        .brand-lockup {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            min-width: 0;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            background: linear-gradient(150deg, rgba(30, 111, 255, 0.95), rgba(18, 42, 86, 0.8));
            border-radius: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
            color: #fff;
            box-shadow: 0 0 0 1px rgba(60, 150, 255, 0.22), 0 9px 22px -8px rgba(30, 111, 255, 0.7);
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .brand-text-main {
            font-size: 19px;
            font-weight: 700;
            color: var(--text-high);
            letter-spacing: 0.01em;
            line-height: 1.3;
            white-space: nowrap;
        }

        .brand-text-sub {
            font-size: 12px;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            white-space: nowrap;
            margin-top: 1px;
        }

        .brand-row-right {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .header-note {
            color: var(--text-muted);
            font-size: 13px;
            border: 1px solid rgba(255, 255, 255, 0.13);
            padding: 4px 12px;
            border-radius: 999px;
        }

        .header-note i {
            color: var(--gold);
            margin-right: 4px;
        }

        .nav-mini-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ice-cyan);
            padding: 5px 12px;
            border: 1px solid rgba(56, 200, 255, 0.25);
            border-radius: 999px;
            background: rgba(56, 200, 255, 0.05);
            transition: background 0.2s ease, color 0.2s ease;
        }

        .nav-mini-btn:hover {
            background: rgba(56, 200, 255, 0.12);
            color: #fff;
        }

        .channel-desktop {
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 5px 0 8px;
            margin-top: 4px;
        }

        .nav-channels {
            display: flex;
            align-items: center;
            gap: 30px;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

        .page-nav .nav-channels {
            gap: 28px;
        }

        .channel-link {
            display: inline-block;
            padding: 9px 2px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(206, 222, 244, 0.8);
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
            position: relative;
        }

        .channel-link:hover {
            color: var(--ice-cyan);
            border-bottom-color: rgba(56, 200, 255, 0.55);
        }

        .channel-link.active {
            color: #fff;
            border-bottom-color: var(--brand-blue);
            font-weight: 600;
        }

        .channel-link.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            border-radius: 4px;
            background: var(--brand-blue);
        }

        .header-search {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(0, 0, 0, 0.22);
            border: 1px solid rgba(150, 188, 230, 0.18);
            padding: 4px 12px;
            border-radius: 8px;
            min-width: 220px;
            color: rgba(160, 186, 215, 0.6);
            transition: border 0.25s ease, background 0.25s ease;
        }

        .header-search i {
            font-size: 13px;
        }

        .header-search input {
            border: 0;
            background: transparent;
            padding: 5px 0;
            color: rgba(240, 247, 255, 0.9);
            font-size: 13px;
            width: 100%;
        }

        .header-search input:focus {
            outline: none;
        }

        .header-search:focus-within {
            border-color: rgba(56, 200, 255, 0.5);
            background: rgba(10, 17, 30, 0.9);
        }

        .mobile-nav-panel {
            margin-top: 8px;
            padding: 12px 0 17px;
            border-top: 1px solid rgba(133, 180, 230, 0.18);
        }

        .mobile-nav-panel a {
            display: block;
            padding: 10px 4px;
            font-size: 15px;
            color: rgba(200, 216, 238, 0.8);
            border-radius: 5px;
        }

        .mobile-nav-panel a.active {
            color: #fff;
            background: rgba(30, 111, 255, 0.16);
            padding-left: 12px;
            border-left: 3px solid var(--brand-blue);
        }

        .mobile-nav-panel a:hover {
            color: var(--ice-cyan);
        }

        /* 面包屑 */
        .breadcrumb-peak {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
            padding: 18px 0 0;
            margin: 0;
            font-size: 13px;
            color: rgba(153, 175, 202, 0.86);
        }

        .breadcrumb-peak li {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .breadcrumb-peak li + li::before {
            content: "/";
            color: rgba(128, 155, 190, 0.5);
            margin-right: 3px;
        }

        .breadcrumb-peak a {
            color: rgba(160, 186, 215, 0.76);
        }

        .breadcrumb-peak a:hover {
            color: var(--ice-cyan);
        }

        .breadcrumb-peak .active {
            color: #f0f6ff;
        }

        /* 分类页 Hero */
        .cat-hero {
            position: relative;
            overflow: hidden;
            padding: 62px 0 76px;
            background-image: linear-gradient(118deg, rgba(6, 10, 20, 0.93) 10%, rgba(11, 22, 38, 0.82) 52%, rgba(5, 12, 24, 0.7)), url('/assets/images/backpic/back-1.png');
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid rgba(120, 180, 245, 0.16);
        }

        .cat-hero::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(186, 224, 255, 0.4), transparent);
            opacity: 0.7;
        }

        .cat-hero .hero-label {
            margin-bottom: 18px;
        }

        .cat-hero h1 {
            color: rgba(242, 248, 255, 0.98);
            font-size: 33px;
            line-height: 1.38;
            font-weight: 800;
            letter-spacing: 0.01em;
            margin: 0 0 17px;
        }

        .cat-hero .lead {
            font-size: 16px;
            line-height: 1.85;
            color: rgba(204, 220, 240, 0.9);
            max-width: 760px;
            margin: 0 0 22px;
        }

        .cat-hero .meta-note {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            font-size: 13px;
            color: rgba(165, 188, 214, 0.75);
            margin-bottom: 28px;
        }

        .hero-actions-inline {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .hero-card {
            background: linear-gradient(145deg, rgba(25, 43, 66, 0.78), rgba(10, 17, 30, 0.7));
            border: 1px solid rgba(130, 180, 235, 0.22);
            border-top: 1px solid rgba(190, 218, 255, 0.32);
            border-radius: 14px;
            padding: 24px 24px;
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-deep);
            color: rgba(214, 232, 252, 0.8);
        }

        .hero-card h3 {
            font-size: 16px;
            color: rgba(240, 247, 255, 0.95);
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(160, 200, 240, 0.13);
        }

        .hero-card dl {
            display: grid;
            gap: 10px;
            margin: 13px 0 0;
        }

        .hero-card dt {
            font-size: 12px;
            color: rgba(140, 170, 205, 0.82);
            letter-spacing: 0.05em;
            margin-bottom: 1px;
            text-transform: none;
        }

        .hero-card dd {
            font-size: 14px;
            color: rgba(225, 241, 255, 0.96);
            margin: 0;
            line-height: 1.6;
        }

        .hero-card .mini-badge-list {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .hero-card .mini-badge-list span {
            font-size: 12px;
            color: var(--ice-cyan);
            border: 1px solid rgba(56, 200, 255, 0.22);
            border-radius: 999px;
            padding: 3px 12px;
            background: rgba(56, 200, 255, 0.04);
        }

        .feature-trust-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 8px;
        }

        /* 栏目观察点 */
        .observe-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .observe-item {
            padding: 22px 20px 18px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(145, 185, 230, 0.18);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
        }

        .observe-item i {
            font-size: 20px;
            color: var(--ice-cyan);
            display: block;
            margin-bottom: 10px;
        }

        .observe-item h4 {
            color: rgba(235, 245, 255, 0.95);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .observe-item p {
            font-size: 13px;
            line-height: 1.7;
            margin: 0;
            color: rgba(174, 194, 219, 0.85);
        }

        /* 双横图文卡片 */
        .story-card {
            display: grid;
            grid-template-columns: 5.6fr 6.4fr;
            gap: 34px;
            align-items: center;
            padding: 26px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(15, 27, 47, 0.84), rgba(8, 15, 28, 0.4));
            border: 1px solid rgba(140, 183, 234, 0.15);
            border-top: 1px solid rgba(190, 223, 251, 0.2);
            box-shadow: var(--shadow-deep);
            overflow: hidden;
        }

        .story-media {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background: #101b30;
            min-height: 240px;
        }

        .story-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }

        .story-media .img-fallback-cover {
            display: block;
            width: 100%;
            height: 250px;
            background-image: linear-gradient(135deg, rgba(30, 111, 255, 0.15), transparent), url('/assets/images/coverpic/cover-1.png');
            background-size: cover;
            background-position: center;
        }

        .story-body {
            padding-right: 2px;
        }

        .story-body h3 {
            font-size: 22px;
            font-weight: 700;
            color: rgba(243, 249, 255, 0.97);
            margin: 0 0 9px;
        }

        .story-body p {
            font-size: 15px;
            line-height: 1.85;
            color: rgba(184, 204, 227, 0.86);
            margin-bottom: 12px;
        }

        .story-points {
            list-style: none;
            padding: 0;
            display: grid;
            gap: 7px;
            margin: 0 0 16px;
        }

        .story-points li {
            position: relative;
            padding-left: 22px;
            font-size: 14px;
            color: rgba(195, 216, 240, 0.87);
            line-height: 1.7;
        }

        .story-points li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 11px;
            width: 12px;
            height: 2px;
            background: var(--ice-cyan);
            border-radius: 99px;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--ice-cyan);
            font-weight: 600;
            font-size: 14px;
            border-bottom: 1px solid rgba(56, 200, 255, 0.3);
            padding-bottom: 2px;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .text-link i {
            font-size: 13px;
            transition: transform 0.2s ease;
        }

        .text-link:hover {
            color: #fff;
            border-color: #fff;
        }

        .text-link:hover i {
            transform: translateX(3px);
        }

        /* 阅读路径 步骤卡 */
        .step-wrap {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            counter-reset: stepCounter;
        }

        .step-item {
            background: rgba(13, 24, 41, 0.55);
            border: 1px solid rgba(135, 176, 224, 0.13);
            border-radius: 14px;
            padding: 24px 18px 19px;
            position: relative;
            transition: transform 0.25s ease, border-color 0.25s ease;
            counter-increment: stepCounter;
        }

        .step-item::before {
            content: "0" counter(stepCounter);
            position: absolute;
            top: -11px;
            right: 15px;
            background: rgba(30, 111, 255, 0.85);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 6px;
            box-shadow: 0 6px 14px -8px rgba(30, 111, 255, 0.9);
        }

        .step-item:hover {
            transform: translateY(-3px);
            border-color: rgba(56, 200, 255, 0.35);
        }

        .step-item i {
            color: var(--ice-cyan);
            font-size: 19px;
            display: block;
            margin: 0 auto 9px;
            text-align: center;
        }

        .step-item h4 {
            font-size: 16px;
            color: var(--text-high);
            font-weight: 600;
            margin-bottom: 7px;
            text-align: center;
        }

        .step-item p {
            font-size: 13px;
            line-height: 1.72;
            color: rgba(166, 184, 210, 0.8);
            text-align: center;
            margin: 0;
        }

        /* FAQ 手风琴 */
        .faq-layout {
            display: grid;
            grid-template-columns: 1fr 1.7fr;
            gap: 38px;
            align-items: start;
        }

        .accordion {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .peak-accordion-item {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
            border: 1px solid rgba(120, 168, 226, 0.16) !important;
            border-radius: 12px !important;
            overflow: hidden;
            box-shadow: none;
        }

        .peak-accordion-item .accordion-button {
            background: transparent;
            color: var(--text-high);
            padding: 18px 18px;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.6;
            border: none !important;
            box-shadow: none !important;
        }

        .peak-accordion-item .accordion-button:not(.collapsed) {
            background: transparent;
            color: #fff;
        }

        .peak-accordion-item .accordion-button::after {
            background-image: none;
            font-family: 'bootstrap-icons';
            content: "\F64D";
            font-size: 18px;
            color: var(--ice-cyan);
            opacity: 0.85;
        }

        .peak-accordion-item .accordion-button:not(.collapsed)::after {
            background-image: none;
            transform: rotate(180deg);
            color: #fff;
        }

        .peak-accordion-item .accordion-body {
            color: rgba(180, 203, 231, 0.9);
            font-size: 14.5px;
            line-height: 1.9;
            padding: 0 18px 17px;
            border-top: 0;
        }

        .peak-accordion-item .accordion-body p {
            margin-bottom: 0;
        }

        /* CTA 横幅 */
        .cat-cta {
            background-image: linear-gradient(100deg, rgba(4, 9, 16, 0.86), rgba(7, 18, 35, 0.72)), url('/assets/images/backpic/back-2.png');
            background-size: cover;
            background-position: center;
            border-radius: 22px;
            border: 1px solid rgba(130, 186, 231, 0.3);
            border-top-color: rgba(230, 246, 255, 0.4);
            padding: 38px 44px;
            box-shadow: var(--shadow-deep);
            color: rgba(225, 240, 255, 0.95);
        }

        .cat-cta h2 {
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .cat-cta p {
            color: rgba(196, 216, 238, 0.9);
            font-size: 15px;
            max-width: 640px;
            margin-bottom: 0;
        }

        .cat-cta .btn-cta-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: flex-end;
        }

        /* footer 复用样式 */
        .footer {
            background: #070e1b;
            border-top: 0;
            color: rgba(156, 175, 202, 0.9);
            padding: 43px 0 20px;
            position: relative;
        }

        .footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(139, 195, 245, 0.35), transparent);
            pointer-events: none;
        }

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

        .footer .footer-brand .brand-mark {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
            font-size: 19px;
        }

        .footer-brand-name-main {
            display: block;
            color: rgba(226, 243, 255, 0.98);
            font-weight: 700;
            font-size: 17px;
        }

        .footer-brand-name-sub {
            display: block;
            color: rgba(127, 155, 185, 0.8);
            font-size: 11px;
            letter-spacing: 0.08em;
        }

        .footer-desc {
            font-size: 13px;
            line-height: 1.8;
            color: rgba(151, 174, 202, 0.88);
            margin-top: 10px;
            max-width: 420px;
        }

        .footer h4 {
            color: rgba(220, 235, 254, 0.95);
            font-size: 16px;
            font-weight: 600;
            margin: 2px 0 18px;
        }

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

        .footer-links a {
            color: rgba(153, 177, 207, 0.8);
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: color 0.22s ease, padding-left 0.22s ease;
        }

        .footer-links a::before {
            content: "";
            width: 3px;
            height: 3px;
            background: rgba(168, 188, 214, 0.5);
            border-radius: 50px;
        }

        .footer-links a:hover {
            color: var(--ice-cyan);
            padding-left: 4px;
        }

        .footer-bottom {
            margin-top: 30px;
            border-top: 1px solid rgba(129, 162, 200, 0.1);
            padding: 18px 0 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 12px;
            color: rgba(143, 165, 195, 0.7);
        }

        .footer-bottom span + span::before {
            content: "·";
            margin-right: 8px;
            color: rgba(88, 118, 150, 0.5);
        }

        .fw-keyword {
            color: rgba(184, 207, 235, 0.88);
        }

        /* 移动端适配 */
        @media (max-width: 1199.98px) {
            .peak-container {
                padding-left: 20px;
                padding-right: 20px;
            }

            .nav-channels {
                gap: 20px;
            }

            .header-search {
                min-width: 180px;
            }
        }

        @media (max-width: 991.98px) {
            section {
                padding-top: 66px;
                padding-bottom: 66px;
            }

            .sec-title {
                font-size: 27px;
            }

            .cat-hero {
                padding: 45px 0 55px;
            }

            .cat-hero h1 {
                font-size: 29px;
            }

            .observe-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .story-card {
                grid-template-columns: 1fr;
                gap: 21px;
            }

            .story-media {
                min-height: 190px;
            }

            .step-wrap {
                grid-template-columns: repeat(2, 1fr);
                gap: 22px 16px;
            }

            .faq-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .cat-cta {
                padding: 30px;
            }

            .hero-card {
                margin-top: 28px;
            }
        }

        @media (max-width: 767.98px) {
            .brand-row {
                gap: 8px;
                padding-top: 9px;
            }

            .brand-lockup .brand-mark {
                width: 38px;
                height: 38px;
                flex-basis: 38px;
                font-size: 18px;
            }

            .brand-text-main {
                font-size: 17px;
            }

            .header-note {
                display: none;
            }

            .peak-container {
                padding-left: 16px;
                padding-right: 16px;
            }

            .cat-hero h1 {
                font-size: 25px;
            }

            .cat-hero .lead {
                font-size: 15px;
            }

            .hero-actions-inline {
                align-items: stretch;
            }

            .hero-actions-inline .peak-btn {
                width: 100%;
                justify-content: center;
            }

            .story-card {
                padding: 0;
                background: transparent;
                border: 0;
                box-shadow: none;
            }

            .story-card .story-media {
                border-radius: 14px;
                margin-bottom: 2px;
            }

            .story-body {
                padding: 10px 0 0;
            }

            .story-body h3 {
                font-size: 19px;
            }

            .observe-cards,
            .step-wrap {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            section {
                padding-top: 52px;
                padding-bottom: 52px;
            }

            .cat-cta {
                border-radius: 16px;
                padding: 26px 20px;
                text-align: center;
            }

            .cat-cta h2 {
                font-size: 20px;
            }

            .cat-cta .btn-cta-wrap {
                justify-content: center;
                margin-top: 9px;
                flex-direction: column;
            }

            .cat-cta .btn-cta-wrap .peak-btn {
                justify-content: center;
            }

            .footer-bottom {
                flex-direction: column;
            }

            .footer-bottom span + span::before {
                content: "";
                display: none;
            }
        }

        @media (max-width: 520px) {
            .brand-text-sub {
                display: none;
            }

            .nav-mini-btn {
                font-size: 12px;
                padding: 4px 9px;
            }

            .breadcrumb-peak {
                font-size: 12.5px;
            }

            .cat-hero .meta-note {
                gap: 8px 12px;
            }

            .feature-trust-row {
                gap: 8px;
            }

            .feature-trust-row .badge-tag {
                font-size: 11px;
                padding: 3px 8px;
            }

            .text-center.sec-desc {
                font-size: 14px;
            }

            .story-points li {
                font-size: 13.5px;
            }

            .peak-btn {
                font-size: 14px;
            }
        }

/* roulang page: article */
:root{
    --bg-root-start:#060B14;
    --bg-root-mid:#0A1220;
    --bg-root-end:#0D1A2C;
    --bg-section:#0C1626;
    --glass-bg:rgba(255,255,255,.045);
    --glass-bg-2:rgba(255,255,255,.02);
    --primary:#1E6FFF;
    --primary-deep:#1B63E9;
    --accent:#38C8FF;
    --gold:#E8B67A;
    --h-clr:rgba(240,247,255,.96);
    --body-clr:rgba(174,194,219,.92);
    --muted-clr:rgba(147,168,192,.78);
    --line:rgba(132,171,220,.16);
    --line-2:rgba(132,171,220,.28);
    --reader-bg:#F7F9FC;
    --reader-text:#243041;
    --radius:12px;
    --radius-lg:16px;
    --shadow:0 16px 30px -18px rgba(0,0,0,.45);
    --shadow-blue:0 18px 34px -24px rgba(14,45,99,.5);
    --font-stack:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
    --content-max:1320px;
}
*{box-sizing:border-box;word-break:break-word}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:linear-gradient(180deg,var(--bg-root-start) 0%,var(--bg-root-mid) 46%,var(--bg-root-end) 100%);
    background-attachment:fixed;
    color:var(--body-clr);
    font-family:var(--font-stack);
    font-size:16px;
    line-height:1.72;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
button,input,textarea{font-family:inherit}
ul,ol{margin:0;padding:0}
input:focus-visible,button:focus-visible,a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:4px;
}
.peak-container{
    width:100%;
    max-width:var(--content-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:24px;
    padding-right:24px;
}

/* ===== 吸顶双行导航 ===== */
.peak-nav{
    position:sticky;
    top:0;
    z-index:1080;
    background:linear-gradient(180deg,rgba(7,13,24,.92) 0%,rgba(8,15,28,.74) 100%);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
    border-bottom:1px solid rgba(132,171,220,.08);
}
.peak-nav.scrolled{
    background:rgba(8,15,28,.93);
    box-shadow:0 18px 34px -28px rgba(0,0,0,.7);
    border-bottom-color:rgba(132,171,220,.12);
}
.brand-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 0 12px;
}
.brand-lockup{
    display:inline-flex;
    align-items:center;
    gap:11px;
    min-width:0;
}
.brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:12px;
    color:var(--accent);
    font-size:20px;
    background:linear-gradient(150deg,rgba(30,111,255,.22),rgba(56,200,255,.06));
    border:1px solid rgba(56,200,255,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 16px -12px rgba(30,111,255,.6);
    flex:0 0 auto;
}
.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.28;
}
.brand-text-main{
    display:block;
    font-size:19px;
    font-weight:700;
    letter-spacing:.01em;
    color:rgba(240,247,255,.96);
    white-space:nowrap;
}
.hl-blue{color:var(--accent);font-weight:800}
.brand-text-sub{
    display:block;
    font-size:12.5px;
    color:var(--muted-clr);
    letter-spacing:.04em;
    margin-top:3px;
    white-space:nowrap;
}
.brand-row-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:14px;
}
.header-note{
    font-size:13px;
    color:var(--muted-clr);
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.header-note i{color:#79D6A5}
.nav-mini-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--line-2);
    border-radius:10px;
    padding:7px 13px;
    font-size:13px;
    color:rgba(219,232,247,.9);
    background:rgba(255,255,255,.03);
    transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.nav-mini-btn:hover{
    color:var(--accent);
    border-color:rgba(56,200,255,.5);
    background:rgba(56,200,255,.06);
}
.navbar-toggler-peak{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:11px;
    color:var(--body-clr);
    background:rgba(255,255,255,.03);
    margin-left:auto;
}
.channel-desktop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid rgba(132,171,220,.08);
    margin-top:2px;
    min-height:52px;
}
.nav-channels{
    list-style:none;
    display:flex;
    gap:4px;
    margin:0;
    padding:0;
    overflow-x:auto;
    scrollbar-width:none;
}
.nav-channels::-webkit-scrollbar{display:none}
.channel-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:48px;
    padding:0 14px;
    font-size:14.5px;
    color:rgba(189,209,230,.82);
    position:relative;
    white-space:nowrap;
    transition:color .2s ease;
}
.channel-link i{color:var(--muted-clr)}
.channel-link:hover{
    color:#FFFFFF;
    background:transparent;
}
.channel-link::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:-1px;
    height:2px;
    background:linear-gradient(90deg,#1E6FFF,#38C8FF);
    border-radius:3px;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
}
.channel-link:hover::after{
    transform:scaleX(.5);
}
.channel-link.active{
    color:#fff;
    font-weight:600;
}
.channel-link.active::after{
    transform:scaleX(1);
}
.header-search{
    position:relative;
    flex:0 0 260px;
    max-width:260px;
    display:flex;
    align-items:center;
}
.header-search .bi-search{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted-clr);
    font-size:14px;
    pointer-events:none;
}
.header-search input{
    width:100%;
    height:34px;
    border-radius:8px;
    border:1px solid rgba(132,171,220,.14);
    background:rgba(255,255,255,.035);
    color:rgba(225,237,250,.9);
    font-size:13px;
    padding:0 12px 0 34px;
    transition:border-color .2s ease,background .2s ease;
}
.header-search input::placeholder{color:rgba(147,168,192,.68)}
.header-search input:focus{
    outline:none;
    border-color:rgba(56,200,255,.55);
    background:rgba(255,255,255,.07);
}
.mobile-nav-panel{
    padding:8px 0 18px;
    border-top:1px solid rgba(132,171,220,.1);
}
.mobile-nav-panel a{
    display:block;
    padding:13px 2px;
    border-bottom:1px solid rgba(132,171,220,.08);
    color:var(--body-clr);
    font-size:15px;
}
.mobile-nav-panel a.active{color:#fff;font-weight:600}
.mobile-nav-panel a:hover{color:var(--accent)}
.mobile-search{
    position:relative;
    margin-top:14px;
    display:flex;
    align-items:center;
}
.mobile-search i{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted-clr);
    font-size:14px;
}
.mobile-search input{
    width:100%;
    height:40px;
    border-radius:9px;
    border:1px solid rgba(132,171,220,.16);
    background:rgba(255,255,255,.04);
    color:var(--body-clr);
    padding:0 12px 0 36px;
    font-size:14px;
}

/* ===== 文章页首屏信息区 ===== */
.article-hero{
    position:relative;
    padding:46px 0 74px;
    background:
        linear-gradient(108deg,rgba(6,11,20,.95) 0%,rgba(9,18,33,.87) 48%,rgba(13,29,49,.72) 100%),
        url('/assets/images/backpic/back-1.png') center/cover no-repeat;
    isolation:isolate;
}
.article-hero::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(76,130,196,.55),transparent);
    z-index:2;
}
.breadcrumb-article{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--muted-clr);
    margin-bottom:22px;
    list-style:none;
}
.breadcrumb-article a{color:rgba(190,210,232,.78)}
.breadcrumb-article a:hover{color:var(--accent)}
.breadcrumb-article .sep{opacity:.55}
.breadcrumb-article .bc-current{
    color:rgba(242,248,255,.95);
    display:inline-flex;
    align-items:center;
    gap:5px;
    max-width:440px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.article-heading-block{
    max-width:960px;
}
.article-hero .topic-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
}
.chip-category{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(56,200,255,.28);
    background:rgba(56,200,255,.08);
    color:var(--accent);
    font-size:12.5px;
    border-radius:7px;
    padding:5px 11px;
    letter-spacing:.03em;
}
.chip-update{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(121,214,165,.3);
    background:rgba(121,214,165,.07);
    color:#7ED8AB;
    font-size:12.5px;
    border-radius:7px;
    padding:5px 11px;
}
.article-main-title{
    margin:0 0 12px;
    color:var(--h-clr);
    font-size:clamp(27px,4vw,40px);
    line-height:1.28;
    font-weight:800;
    letter-spacing:.01em;
}
.article-main-title .hl-line{color:var(--accent)}
.article-abstract{
    margin:0 0 22px;
    color:rgba(183,207,229,.88);
    max-width:760px;
    font-size:15.5px;
    line-height:1.8;
}
.article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px 22px;
    align-items:center;
    margin-top:18px;
    font-size:13.5px;
    color:var(--muted-clr);
}
.article-meta .meta-item{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.article-meta .meta-item i{color:var(--accent)}
.article-meta .meta-item strong{color:rgba(205,222,241,.9);font-weight:600}

/* ===== 阅读区外层 ===== */
.article-main{
    position:relative;
    background:
        radial-gradient(circle at 50% -10%,rgba(20,52,92,.18),transparent 44%),
        linear-gradient(180deg,var(--bg-root-start) 0%,var(--bg-root-mid) 100%);
    padding:0 0 80px;
}
.article-main .peak-container{
    max-width:940px;
    padding:0;
}
.reader-shell{
    margin-top:-24px;
    padding:0 20px;
}
.article-reader{
    background:var(--reader-bg);
    border-radius:var(--radius-lg);
    box-shadow:0 24px 50px -32px rgba(0,10,25,.75);
    padding:48px clamp(18px,5vw,60px) 52px;
    color:var(--reader-text);
    position:relative;
    transition:box-shadow .35s ease;
}
.article-reader::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(230,241,255,.8) 45%,rgba(255,255,255,.2) 100%);
    border-radius:0 0 2px 2px;
    pointer-events:none;
}
.article-body{
    font-size:16.5px;
    line-height:1.85;
    color:var(--reader-text);
}
.article-body > *:first-child{margin-top:0}
.article-body .wp-block-image,
.article-body figure{
    margin:28px 0;
}
.article-body img{
    border-radius:14px;
    box-shadow:0 14px 30px -18px rgba(10,20,40,.28);
}
.article-body h2,
.article-body h3{
    font-weight:700;
    color:#18253a;
    margin-top:1.78em;
    margin-bottom:.72em;
}
.article-body h2{
    font-size:24px;
    line-height:1.35;
    padding-left:14px;
    border-left:4px solid var(--primary);
    border-radius:2px;
}
.article-body h3{
    font-size:19px;
    line-height:1.45;
}
.article-body p{
    margin:0 0 1.5em;
}
.article-body a{
    color:#1D5DCC;
    border-bottom:1px solid rgba(29,93,204,.35);
    transition:border-color .2s ease;
}
.article-body a:hover{
    color:var(--accent);
    border-color:var(--accent);
}
.article-body ul,
.article-body ol{
    margin:0 0 1.6em 1.25em;
    padding:0;
}
.article-body li{
    margin-bottom:.55em;
}
.article-body blockquote{
    margin:1.7em 0;
    padding:16px 18px 14px;
    background:#EEF3FA;
    border-left:3px solid var(--primary);
    border-radius:0 10px 10px 0;
    color:#2B3647;
    line-height:1.85;
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body pre{
    margin:1.6em 0;
    padding:16px 18px;
    background:#132033;
    color:#dce8f5;
    border-radius:12px;
    overflow-x:auto;
    font-size:14px;
    line-height:1.7;
}
.article-body code{
    background:rgba(30,111,255,.08);
    border-radius:5px;
    padding:2px 6px;
    font-size:.88em;
    color:#173D8C;
}
.article-body pre code{
    background:transparent;
    color:inherit;
    padding:0;
}
.article-body table{
    width:100%;
    border-collapse:collapse;
    margin:1.6em 0;
    font-size:14.5px;
    min-width:520px;
}
.article-body table th,
.article-body table td{
    border:1px solid #E1E7F0;
    padding:9px 12px;
    text-align:left;
    vertical-align:top;
    background:#fff;
}
.article-body table th{
    background:#EAEFF7;
    font-weight:600;
    color:#192840;
}
.article-body table tr:nth-child(even) td{
    background:#FBFCFE;
}

/* ===== 阅读区底部：继续阅读 ===== */
.reader-bottom-group{
    margin-top:56px;
    border-top:1px dashed #D6DFE9;
    padding-top:34px;
}
.reader-bottom-title{
    font-size:20px;
    font-weight:700;
    color:#1C273A;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:9px;
}
.reader-bottom-title i{color:var(--primary)}
.related-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#FFFFFF;
    border:1px solid #E3E9F2;
    border-radius:13px;
    overflow:hidden;
    padding:0;
    box-shadow:0 8px 20px -16px rgba(19,50,86,.24);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.related-card:hover{
    transform:translateY(-3px);
    border-color:#C9D9EF;
    box-shadow:0 20px 34px -24px rgba(19,50,86,.34);
}
.related-card .related-thumb{
    position:relative;
    aspect-ratio:16/8.7;
    overflow:hidden;
    border-bottom:1px solid #E4EAF2;
}
.related-card .related-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.related-card:hover .related-thumb img{
    transform:scale(1.04);
}
.related-card .related-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    padding:15px 17px 19px;
}
.related-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:600;
    color:#1766E8;
    background:rgba(30,111,255,.09);
    border-radius:5px;
    padding:4px 8px;
    letter-spacing:.03em;
}
.related-card h3{
    margin:0;
    font-size:16px;
    line-height:1.45;
    color:#1B2739;
    font-weight:700;
}
.related-card p{
    margin:0;
    font-size:13px;
    line-height:1.65;
    color:#5C6B82;
}
.related-more-link{
    margin-top:3px;
    font-size:13.5px;
    color:#1D5DCC;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border-bottom:1px solid transparent;
}
.related-more-link:hover{color:var(--accent);border-bottom-color:rgba(56,200,255,.5)}
.reader-simple-footer{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
}
.reader-back-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#1D5DCC;
    font-weight:600;
    font-size:14px;
    border-bottom:1px solid transparent;
}
.reader-back-link:hover{color:var(--accent);border-color:rgba(56,200,255,.55)}
.reader-note-small{
    font-size:12.5px;
    color:#83909F;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

/* ===== 信息声明条 ===== */
.info-strip{
    margin-top:10px;
    padding:0 20px;
}
.info-strip .info-strip-inner{
    background:linear-gradient(135deg,rgba(11,25,48,.92),rgba(8,17,32,.96));
    border:1px solid rgba(132,171,220,.13);
    border-radius:16px;
    padding:26px 28px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.info-strip .eyebrow{
    font-size:12px;
    letter-spacing:.12em;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
}
.info-strip .eyebrow i{color:var(--accent)}
.info-strip h2{
    margin:0;
    color:var(--h-clr);
    font-size:20px;
    line-height:1.4;
    font-weight:700;
}
.info-strip p{
    margin:8px 0 0;
    color:var(--muted-clr);
    font-size:13.5px;
    max-width:630px;
    line-height:1.75;
}
.info-strip-actions{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}
.btn-peak{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:10px;
    background:linear-gradient(180deg,#2B7BFF,#1B63E9);
    color:#fff;
    border:1px solid rgba(56,200,255,.3);
    font-size:14.5px;
    font-weight:600;
    padding:11px 19px;
    box-shadow:0 14px 24px -18px rgba(20,90,255,.7);
    transition:background .25s ease,transform .2s ease,box-shadow .25s ease;
    position:relative;
    overflow:hidden;
}
.btn-peak::after{
    content:"";
    position:absolute;
    left:13px;
    bottom:6px;
    width:15px;
    height:2px;
    background:var(--gold);
    border-radius:2px;
}
.btn-peak:hover{
    background:linear-gradient(180deg,#357FF0,#2267E0);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 18px 28px -18px rgba(20,90,255,.8);
}
.btn-peak-outline{
    background:rgba(255,255,255,.03);
    border-color:rgba(56,200,255,.22);
    box-shadow:none;
    color:rgba(232,246,255,.9);
}
.btn-peak-outline::after{
    background:var(--accent);
}
.btn-peak-outline:hover{
    background:rgba(56,200,255,.08);
    color:#fff;
    box-shadow:none;
    border-color:rgba(56,200,255,.5);
}
.btn-peak-md{
    padding:9px 16px;
    font-size:13.5px;
}
.btn-peak-md::after{display:none}

/* ===== 未找到状态 ===== */
.reader-empty{
    padding:86px 0 64px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.reader-empty i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    border-radius:50%;
    color:var(--accent);
    background:rgba(30,111,255,.09);
    border:1px solid rgba(56,200,255,.2);
    font-size:27px;
    margin-bottom:2px;
}
.reader-empty h2{
    font-size:22px;
    font-weight:750;
    color:#1E2A40;
    margin:0;
}
.reader-empty p{
    margin:0;
    color:#63728A;
    font-size:14.5px;
    max-width:420px;
}

/* ===== 页脚 ===== */
.footer{
    position:relative;
    background:linear-gradient(180deg,rgba(5,9,17,.72),rgba(4,8,15,.98));
    padding:62px 0 30px;
    color:var(--body-clr);
    border-top:1px solid rgba(132,171,220,.08);
}
.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(56,200,255,.34),rgba(232,182,122,.3),transparent);
}
.footer .footer-brand{
    display:flex;
    align-items:center;
    gap:11px;
}
.footer .brand-mark{
    width:38px;
    height:38px;
    font-size:18px;
}
.footer-brand-name-main{
    display:block;
    color:var(--h-clr);
    font-size:17px;
    font-weight:700;
    line-height:1.3;
}
.footer-brand-name-sub{
    display:block;
    font-size:11.5px;
    color:var(--muted-clr);
    letter-spacing:.05em;
    margin-top:3px;
    text-transform:lowercase;
}
.footer-desc{
    margin:18px 0 0;
    color:var(--muted-clr);
    font-size:13.5px;
    line-height:1.8;
    max-width:520px;
}
.footer h4{
    color:rgba(238,246,255,.9);
    font-size:14px;
    font-weight:600;
    letter-spacing:.06em;
    margin:4px 0 15px;
}
.footer-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.footer-links li{
    margin:0;
}
.footer-links a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--muted-clr);
    font-size:13.5px;
    transition:color .2s ease,padding-left .2s ease;
}
.footer-links a::before{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(56,200,255,.35);
    flex:0 0 auto;
}
.footer-links a:hover{
    color:var(--accent);
    padding-left:3px;
}
.footer-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid rgba(132,171,220,.1);
    margin-top:46px;
    padding-top:22px;
    font-size:12.5px;
    color:rgba(147,168,192,.62);
}
.footer-bottom .fw-keyword{
    color:rgba(160,182,208,.7);
    font-size:12.5px;
}
.footer .brand-mark{
    background:linear-gradient(150deg,rgba(30,111,255,.24),rgba(56,200,255,.08));
}

/* ===== 响应式 ===== */
@media (max-width:1199.98px){
    .brand-text-main{
        font-size:17px;
    }
    .brand-text-sub{
        font-size:11.8px;
    }
    .header-search{
        max-width:210px;
        flex-basis:210px;
    }
}
@media (max-width:991.98px){
    .header-note{
        display:none;
    }
    .nav-channels{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .article-hero{
        padding-top:38px;
    }
    .article-main .peak-container{
        max-width:860px;
    }
    .article-reader{
        padding:38px 24px 42px;
    }
}
@media (max-width:767.98px){
    .peak-container{
        padding-left:16px;
        padding-right:16px;
    }
    .brand-row{
        padding:12px 0 10px;
        gap:8px;
    }
    .brand-mark{
        width:36px;
        height:36px;
        font-size:17px;
        border-radius:10px;
    }
    .brand-text-main{
        font-size:16px;
        white-space:normal;
        line-height:1.3;
    }
    .brand-text-sub{
        font-size:11px;
        white-space:normal;
        line-height:1.3;
    }
    .nav-mini-btn{
        padding:6px 10px;
        font-size:12px;
        border-radius:8px;
    }
    .nav-mini-btn .mini-text{
        display:none;
    }
    .article-hero{
        padding:32px 0 54px;
    }
    .breadcrumb-article{
        margin-bottom:16px;
    }
    .article-main{
        padding-bottom:60px;
    }
    .reader-shell{
        margin-top:-12px;
        padding:0 0;
    }
    .article-reader{
        border-radius:0 0 14px 14px;
        padding:30px 17px 38px;
    }
    .article-main-title{
        font-size:24px;
    }
    .article-body h2{
        font-size:20px;
    }
    .article-body h3{
        font-size:17px;
    }
    .article-body{
        font-size:15.5px;
    }
    .reader-bottom-title{
        font-size:18px;
    }
    .info-strip{
        padding:0 12px;
        margin-top:8px;
    }
    .info-strip .info-strip-inner{
        padding:22px 18px;
    }
    .footer{
        padding-top:48px;
    }
    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}
@media (max-width:520px){
    .peak-container{
        padding-left:14px;
        padding-right:14px;
    }
    .brand-row{
        flex-wrap:nowrap;
    }
    .brand-row-right .nav-mini-btn i{
        font-size:15px;
    }
    .brand-text-sub{
        display:none;
    }
    .footer-links a{
        font-size:13px;
    }
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        transition:none!important;
        animation:none!important;
        scroll-behavior:auto!important;
    }
}

/* roulang page: category2 */
:root {
            --bg-start: #060B14;
            --bg-mid: #0A1220;
            --bg-end: #0D1A2C;
            --block-a: #0C1626;
            --block-b: #101E33;
            --blue: #1E6FFF;
            --cyan: #38C8FF;
            --gold: #E8B67A;
            --white-hi: rgba(240, 247, 255, .96);
            --white-body: rgba(174, 194, 219, .92);
            --white-sub: rgba(148, 168, 201, .76);
            --panel-bg: #F7F9FC;
            --panel-text: #243041;
            --glass-bg: rgba(255, 255, 255, .045);
            --glass-border: rgba(148, 181, 223, .18);
            --line-soft: rgba(122, 158, 205, .22);
            --green: #79D6A5;
            --amber: #C9A86A;
            --radius: 14px;
            --shadow: 0 16px 30px -18px rgba(0, 0, 0, .45), 0 8px 28px -18px rgba(14, 45, 99, .25);
            --container: 1320px;
            --navbar-h: 118px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.7;
            background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 42%, var(--bg-end) 100%);
            color: var(--white-body);
            word-break: break-word;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            color: inherit;
            text-decoration: none;
        }

        img {
            max-width: 100%;
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        textarea:focus-visible {
            outline: 2px solid var(--cyan);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .peak-container {
            max-width: var(--container);
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        .peak-nav {
            position: sticky;
            top: 0;
            z-index: 1055;
            background: rgba(8, 15, 28, .82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
        }

        .peak-nav.peak-nav-scrolled {
            background: rgba(6, 12, 22, .96);
            border-bottom-color: rgba(128, 174, 228, .2);
            box-shadow: 0 12px 28px -20px rgba(0, 0, 0, .6), 0 4px 16px -8px rgba(28, 84, 155, .3);
        }

        .brand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 66px;
            gap: 16px;
        }

        .brand-lockup {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand-mark {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background: rgba(30, 111, 255, .12);
            border: 1px solid rgba(56, 200, 255, .24);
            color: var(--cyan);
            font-size: 21px;
        }

        .brand-text-main {
            display: block;
            font-size: 20px;
            line-height: 1.25;
            font-weight: 700;
            letter-spacing: .01em;
            color: var(--white-hi);
        }

        .brand-text-main .hl-blue {
            color: var(--blue);
        }

        .brand-text-sub {
            display: block;
            font-size: 12px;
            color: var(--white-sub);
            margin-top: 1px;
            font-weight: 400;
        }

        .brand-row-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .header-note {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--white-sub);
            border: 1px solid rgba(148, 181, 223, .16);
            border-radius: 999px;
            padding: 4px 12px;
        }

        .nav-mini-btn {
            font-size: 14px;
            color: var(--white-hi);
            padding: 6px 14px;
            border-radius: 8px;
            background: rgba(30, 111, 255, .13);
            border: 1px solid rgba(56, 200, 255, .28);
            transition: all .2s ease;
        }

        .nav-mini-btn:hover {
            background: rgba(30, 111, 255, .22);
            color: #fff;
            border-color: var(--cyan);
        }

        .navbar-toggler-peak {
            border: 1px solid rgba(148, 181, 223, .24);
            background: rgba(148, 181, 223, .07);
            color: var(--white-hi);
            min-width: 42px;
            height: 40px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 10px;
        }

        .channel-desktop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 50px;
            border-top: 1px solid rgba(148, 181, 223, .08);
            gap: 20px;
        }

        .nav-channels {
            list-style: none;
            display: flex;
            gap: 8px;
            padding: 0;
            margin: 0;
            flex-wrap: wrap;
        }

        .nav-channels li {
            margin: 0;
        }

        .channel-link {
            display: inline-flex;
            align-items: center;
            min-height: 46px;
            padding: 4px 12px;
            font-size: 15px;
            color: var(--white-body);
            border-radius: 6px 6px 0 0;
            position: relative;
            transition: color .2s ease;
        }

        .channel-link:hover {
            color: var(--cyan);
        }

        .channel-link.active {
            color: #fff;
            font-weight: 600;
        }

        .channel-link.active::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: -2px;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--cyan), var(--blue));
        }

        .header-search {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 248px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(148, 181, 223, .15);
            border-radius: 8px;
            padding: 0 12px;
            color: var(--white-sub);
            transition: border-color .2s ease, background .2s ease;
        }

        .header-search:focus-within {
            border-color: var(--cyan);
            background: rgba(255, 255, 255, .08);
        }

        .header-search input {
            border: 0;
            outline: none;
            background: transparent;
            color: #fff;
            font-size: 14px;
            width: 100%;
            padding: 8px 0;
        }

        .header-search input::placeholder {
            color: rgba(150, 166, 195, .72);
        }

        .mobile-nav-panel {
            border-top: 1px solid rgba(148, 181, 223, .12);
            padding: 8px 0 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .mobile-nav-panel a {
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 15px;
            color: var(--white-body);
        }

        .mobile-nav-panel a.active {
            color: #fff;
            background: rgba(30, 111, 255, .14);
            font-weight: 600;
        }

        .site-main {
            overflow: hidden;
        }

        .category-hero {
            position: relative;
            padding: 56px 0 64px;
            background-image: linear-gradient(108deg, rgba(6, 11, 20, .92) 0%, rgba(9, 18, 33, .82) 42%, rgba(16, 30, 51, .62) 100%), url("/assets/images/backpic/back-2.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
        }

        .category-hero::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, .42), rgba(232, 182, 122, .34), transparent);
        }

        .breadcrumb-peak {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--white-sub);
            margin-bottom: 26px;
        }

        .breadcrumb-peak a {
            color: var(--white-sub);
            transition: color .2s ease;
        }

        .breadcrumb-peak a:hover {
            color: var(--cyan);
        }

        .breadcrumb-peak .sep {
            color: rgba(148, 181, 223, .5);
            padding: 0 2px;
        }

        .breadcrumb-peak .current {
            color: var(--white-hi);
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            letter-spacing: .08em;
            color: var(--cyan);
            margin-bottom: 14px;
        }

        .category-hero h1 {
            font-size: clamp(28px, 3.2vw, 44px);
            font-weight: 800;
            color: var(--white-hi);
            line-height: 1.24;
            letter-spacing: .01em;
            margin-bottom: 16px;
        }

        .category-hero h1 .hl-blue {
            color: var(--blue);
        }

        .hero-version-label {
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
            font-size: .56em;
            color: var(--gold);
            border: 1px solid rgba(232, 182, 122, .3);
            background: rgba(232, 182, 122, .08);
            padding: 2px 10px;
            border-radius: 6px;
            letter-spacing: .05em;
        }

        .hero-desc {
            font-size: 16px;
            line-height: 1.9;
            color: var(--white-body);
            max-width: 640px;
            margin-bottom: 24px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .btn-peak-primary,
        .btn-peak-ghost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 10px;
            border-width: 1px;
            border-style: solid;
            font-size: 15px;
            line-height: 1.4;
            font-weight: 600;
            padding: 11px 22px;
            position: relative;
            transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
            will-change: transform;
        }

        .btn-peak-primary {
            background-color: var(--blue);
            border-color: rgba(97, 168, 255, .8);
            color: #fff;
            box-shadow: 0 10px 24px -12px rgba(30, 111, 255, .56);
        }

        .btn-peak-primary::after {
            content: "";
            position: absolute;
            right: 7px;
            bottom: 4px;
            width: 12px;
            height: 2px;
            border-radius: 3px;
            background: var(--gold);
        }

        .btn-peak-primary:hover {
            background: #2d7dff;
            border-color: rgba(144, 204, 255, .9);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px -12px rgba(30, 111, 255, .72);
            color: #fff;
        }

        .btn-peak-ghost {
            background: rgba(255, 255, 255, .04);
            border-color: rgba(148, 181, 223, .28);
            color: var(--white-hi);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .btn-peak-ghost:hover {
            border-color: var(--cyan);
            color: var(--cyan);
            background: rgba(56, 200, 255, .08);
            transform: translateY(-2px);
        }

        .hero-info-glass {
            background: linear-gradient(155deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .018) 100%);
            border: 1px solid rgba(148, 181, 223, .18);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow);
            border-radius: var(--radius);
            padding: 24px;
        }

        .hero-info-glass .glass-topline {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: rgba(156, 182, 216, .86);
            border-bottom: 1px solid rgba(148, 181, 223, .12);
            padding-bottom: 12px;
        }

        .dot-pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green);
            display: inline-flex;
            box-shadow: 0 0 0 4px rgba(121, 214, 165, .1);
        }

        .glass-title {
            font-size: 18px;
            color: var(--white-hi);
            font-weight: 600;
            margin-top: 14px;
            margin-bottom: 10px;
        }

        .hero-list {
            list-style: none;
            margin: 0 0 14px;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .hero-list li {
            font-size: 14px;
            line-height: 1.7;
            color: var(--white-body);
            padding-left: 24px;
            position: relative;
        }

        .hero-list li::before {
            content: "\f26a";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 0;
            top: 1px;
            color: var(--cyan);
            font-size: 14px;
        }

        .hero-safe-strip {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            background: rgba(56, 200, 255, .06);
            border: 1px solid rgba(56, 200, 255, .14);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 13px;
            color: rgba(193, 220, 248, .92);
        }

        .hero-safe-strip i {
            color: var(--cyan);
            font-size: 16px;
            line-height: 1.2;
        }

        .feature-strip {
            border-bottom: 1px solid rgba(148, 181, 223, .08);
            background: rgba(6, 12, 22, .36);
        }

        .feature-strip .peak-container {
            padding-top: 26px;
            padding-bottom: 26px;
        }

        .feature-strip-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .feature-strip-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .feature-strip-item .item-icon {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            border: 1px solid rgba(56, 200, 255, .18);
            background: rgba(56, 200, 255, .06);
            color: var(--cyan);
            font-size: 19px;
        }

        .feature-strip-item .item-title {
            font-size: 14px;
            color: var(--white-hi);
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 2px;
        }

        .feature-strip-item .item-text {
            font-size: 13px;
            color: var(--white-sub);
            line-height: 1.45;
        }

        .peak-section {
            padding-top: clamp(56px, 6vw, 84px);
            padding-bottom: clamp(56px, 6vw, 84px);
            position: relative;
        }

        .peak-ridge {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(148, 181, 223, .36), rgba(232, 182, 122, .22), transparent);
        }

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

        .section-kicker {
            font-size: 13px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--cyan);
            margin-bottom: 6px;
            display: block;
        }

        .section-title {
            font-size: clamp(24px, 3vw, 33px);
            color: var(--white-hi);
            line-height: 1.28;
            font-weight: 700;
            letter-spacing: .01em;
            margin: 0;
        }

        .section-title .text-accent {
            color: var(--blue);
        }

        .section-sub {
            color: var(--white-body);
            max-width: 520px;
            font-size: 15px;
            line-height: 1.8;
        }

        .section-extra-link {
            color: var(--cyan);
            font-size: 14px;
            white-space: nowrap;
            border-bottom: 1px solid transparent;
            transition: border-color .2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .section-extra-link:hover {
            border-bottom-color: var(--cyan);
            color: var(--cyan);
        }

        .info-layout-card {
            background: linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow);
            overflow: hidden;
        }

        .info-layout-body {
            padding: clamp(22px, 2.5vw, 36px);
        }

        .info-layout-body h3,
        .glance-title {
            font-size: 22px;
            color: var(--white-hi);
            font-weight: 700;
            line-height: 1.4;
        }

        .info-layout-body .lead-text {
            font-size: 15px;
            color: var(--white-body);
            line-height: 1.95;
            margin: 12px 0 18px;
        }

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

        .check-list li {
            padding-left: 28px;
            position: relative;
            color: var(--white-body);
            font-size: 15px;
        }

        .check-list li::before {
            content: "\f26a";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 0;
            top: 1px;
            color: var(--cyan);
        }

        .image-panel {
            position: relative;
            height: 100%;
            min-height: 260px;
        }

        .image-panel img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            min-height: 300px;
            border-radius: 16px 0 16px 16px;
            display: block;
        }

        .image-caption {
            position: absolute;
            bottom: 12px;
            left: 12px;
            right: 12px;
            background: rgba(6, 12, 22, .72);
            border: 1px solid rgba(148, 181, 223, .15);
            backdrop-filter: blur(8px);
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 13px;
            color: rgba(230, 242, 255, .9);
        }

        .origin-note {
            margin-top: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: rgba(206, 220, 238, .84);
            border-left: 3px solid var(--blue);
            background: rgba(30, 111, 255, .08);
            border-radius: 0 10px 10px 0;
            padding: 12px 16px;
        }

        .version-list-wrap {
            background: linear-gradient(180deg, rgba(10, 18, 32, .45), rgba(8, 15, 28, .65));
            border: 1px solid rgba(148, 181, 223, .12);
            border-radius: 16px;
        }

        .version-item-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
            border: 1px solid rgba(148, 181, 223, .13);
            border-radius: 12px;
            padding: 20px 22px;
            margin-bottom: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
            transition: border-color .2s ease, transform .2s ease, background .2s ease;
        }

        .version-item-card:last-child {
            margin-bottom: 0;
        }

        .version-item-card:hover {
            border-color: rgba(56, 200, 255, .42);
            transform: translateY(-2px);
            background: rgba(255, 255, 255, .06);
        }

        .version-platform {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 180px;
        }

        .version-platform-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(56, 200, 255, .08);
            border: 1px solid rgba(56, 200, 255, .2);
            color: var(--cyan);
            font-size: 20px;
        }

        .version-platform-name {
            font-size: 17px;
            font-weight: 700;
            color: var(--white-hi);
        }

        .version-platform-tag {
            font-size: 12px;
            color: var(--white-sub);
        }

        .version-desc-text {
            font-size: 14px;
            color: var(--white-body);
            line-height: 1.85;
        }

        .badge-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--cyan);
            border: 1px solid rgba(56, 200, 255, .2);
            background: rgba(56, 200, 255, .05);
            border-radius: 999px;
            padding: 3px 10px;
            margin: 3px 4px 3px 0;
            line-height: 1.5;
        }

        .badge-tag.gold {
            color: var(--gold);
            border-color: rgba(232, 182, 122, .22);
            background: rgba(232, 182, 122, .05);
        }

        .dot-classic {
            width: 6px;
            height: 6px;
            background: var(--green);
            border-radius: 50%;
        }

        .version-meta-line {
            font-size: 13px;
            color: var(--white-sub);
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 18px;
        }

        .tag-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .feature-tag-card {
            background: linear-gradient(155deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
            border: 1px solid rgba(148, 181, 223, .13);
            border-radius: var(--radius);
            padding: 22px;
            position: relative;
            transition: border-color .22s ease, transform .22s ease, background .22s ease;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
            overflow: hidden;
        }

        .feature-tag-card::after {
            content: "";
            position: absolute;
            right: -12px;
            top: -12px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(56, 200, 255, .16), transparent 68%);
            opacity: 0;
            transition: opacity .3s ease;
        }

        .feature-tag-card:hover {
            border-color: rgba(56, 200, 255, .26);
            transform: translateY(-3px);
            background: rgba(255, 255, 255, .055);
        }

        .feature-tag-card:hover::after {
            opacity: 1;
        }

        .feature-tag-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(30, 111, 255, .1);
            border: 1px solid rgba(56, 200, 255, .16);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            color: var(--cyan);
            font-size: 20px;
        }

        .feature-tag-card h3 {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--white-hi);
        }

        .feature-tag-card p {
            font-size: 14px;
            color: var(--white-body);
            line-height: 1.85;
            margin: 0;
        }

        .process-row {
            position: relative;
        }

        .process-row::before {
            content: "";
            position: absolute;
            top: 28px;
            bottom: 28px;
            left: 25px;
            width: 1px;
            background: linear-gradient(180deg, rgba(56, 200, 255, .18), rgba(56, 200, 255, .04));
        }

        .process-step {
            position: relative;
            padding-left: 70px;
            margin-bottom: 24px;
        }

        .process-step:last-child {
            margin-bottom: 0;
        }

        .step-number {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(30, 111, 255, .12);
            border: 1px solid rgba(56, 200, 255, .26);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: var(--cyan);
            box-shadow: 0 0 26px -8px rgba(56, 200, 255, .26);
        }

        .process-step-title {
            font-size: 17px;
            color: var(--white-hi);
            font-weight: 700;
            margin-bottom: 6px;
        }

        .process-step-text {
            font-size: 15px;
            color: var(--white-body);
            line-height: 1.85;
        }

        .notice-box {
            display: flex;
            gap: 12px;
            border-radius: 12px;
            padding: 16px 18px;
            font-size: 14px;
            line-height: 1.8;
            margin-top: 24px;
        }

        .notice-box-info {
            background: rgba(56, 200, 255, .07);
            border: 1px solid rgba(56, 200, 255, .16);
            color: rgba(197, 222, 245, .9);
        }

        .notice-box-amber {
            background: rgba(201, 168, 106, .08);
            border: 1px solid rgba(201, 168, 106, .2);
            color: rgba(226, 210, 178, .92);
        }

        .notice-box i {
            font-size: 18px;
            line-height: 1.4;
        }

        .notice-box-info i {
            color: var(--cyan);
        }

        .notice-box-amber i {
            color: var(--amber);
        }

        .section-bg-deep {
            background: rgba(8, 15, 28, .38);
            border-top: 1px solid rgba(148, 181, 223, .08);
            border-bottom: 1px solid rgba(148, 181, 223, .08);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .85fr 1.5fr;
            gap: 36px;
            align-items: start;
        }

        .faq-intro-title {
            font-size: clamp(24px, 3vw, 32px);
            line-height: 1.3;
            color: var(--white-hi);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .faq-intro-text {
            color: var(--white-body);
            font-size: 15px;
            line-height: 1.9;
        }

        .faq-intro-contact {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 20px;
        }

        .accordion-custom .accordion-item {
            background: rgba(10, 18, 32, .6);
            border: 1px solid rgba(148, 181, 223, .14);
            border-radius: 12px !important;
            margin-bottom: 12px;
            overflow: hidden;
        }

        .accordion-custom .accordion-item:last-child {
            margin-bottom: 0;
        }

        .accordion-custom .accordion-button {
            background: rgba(255, 255, 255, .028);
            color: var(--white-hi);
            font-size: 15px;
            font-weight: 600;
            padding: 17px 18px;
            line-height: 1.5;
            box-shadow: none;
        }

        .accordion-custom .accordion-button:not(.collapsed) {
            color: #fff;
            background: rgba(30, 111, 255, .1);
        }

        .accordion-custom .accordion-button::after {
            background-image: none;
            content: "\f229";
            font-family: "bootstrap-icons";
            color: var(--cyan);
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
        }

        .accordion-custom .accordion-button:not(.collapsed)::after {
            content: "\f229";
            color: var(--cyan);
            transform: rotate(180deg);
        }

        .accordion-custom .accordion-body {
            padding: 0 18px 18px;
            color: rgba(174, 194, 219, .92);
            font-size: 14px;
            line-height: 1.85;
            border-top: 1px solid rgba(148, 181, 223, .08);
        }

        .cta-banner {
            position: relative;
            background-image: linear-gradient(110deg, rgba(6, 11, 20, .92) 0%, rgba(8, 18, 32, .82) 48%, rgba(14, 28, 48, .7) 100%), url("/assets/images/backpic/back-3.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            border-radius: 18px;
            padding: clamp(28px, 4vw, 52px);
            box-shadow: var(--shadow);
            overflow: hidden;
            border: 1px solid rgba(148, 181, 223, .14);
        }

        .cta-banner::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, .5), rgba(232, 182, 122, .4), transparent);
        }

        .cta-banner-title {
            font-size: clamp(22px, 2.8vw, 31px);
            color: var(--white-hi);
            font-weight: 800;
            margin-bottom: 12px;
        }

        .cta-banner-text {
            color: var(--white-body);
            max-width: 640px;
            font-size: 15px;
            line-height: 1.85;
            margin-bottom: 22px;
        }

        .cta-banner-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .footer {
            background: linear-gradient(180deg, rgba(6, 11, 20, .92), #05090f);
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, .04);
        }

        .footer .peak-container {
            padding-top: 40px;
            padding-bottom: 24px;
        }

        .footer::before {
            content: "";
            display: block;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(148, 181, 223, .38), rgba(232, 182, 122, .2), transparent);
        }

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

        .footer-brand-name-main {
            display: block;
            color: var(--white-hi);
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
        }

        .footer-brand-name-sub {
            display: block;
            font-size: 12px;
            color: var(--white-sub);
            letter-spacing: .02em;
        }

        .footer-desc {
            color: rgba(174, 194, 219, .76);
            font-size: 14px;
            line-height: 1.9;
            max-width: 440px;
            margin: 0;
        }

        .footer h4 {
            font-size: 15px;
            color: var(--white-hi);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 9px;
        }

        .footer-links a {
            font-size: 14px;
            color: rgba(174, 194, 219, .84);
            transition: color .2s ease, padding-left .2s ease;
        }

        .footer-links a:hover {
            color: var(--cyan);
            padding-left: 4px;
        }

        .footer-bottom {
            margin-top: 28px;
            padding-top: 16px;
            border-top: 1px solid rgba(148, 181, 223, .1);
            display: flex;
            flex-wrap: wrap;
            gap: 8px 22px;
            justify-content: space-between;
            color: rgba(130, 148, 180, .78);
            font-size: 13px;
        }

        .footer-bottom .fw-keyword {
            color: rgba(174, 194, 219, .9);
        }

        @media (max-width: 1199.98px) {
            .brand-row-right .header-note {
                display: none;
            }

            .header-search {
                width: 200px;
            }

            .version-item-card .row {
                row-gap: 14px;
            }
        }

        @media (max-width: 991.98px) {
            .feature-strip-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .tag-grid {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .brand-lockup .brand-text-sub {
                font-size: 11px;
            }

            .hero-info-glass {
                margin-top: 20px;
            }

            .section-head {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }
        }

        @media (max-width: 767.98px) {
            .peak-container {
                padding-left: 16px;
                padding-right: 16px;
            }

            .brand-row {
                min-height: 60px;
            }

            .brand-text-main {
                font-size: 17px;
            }

            .brand-mark {
                width: 36px;
                height: 36px;
                flex-basis: 36px;
                font-size: 18px;
                border-radius: 10px;
            }

            .nav-mini-btn {
                font-size: 12px;
                padding: 6px 10px;
            }

            .category-hero {
                padding: 40px 0 46px;
            }

            .category-hero h1 {
                font-size: 28px;
            }

            .hero-version-label {
                font-size: .6em;
                margin-left: 0;
                margin-top: 8px;
            }

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

            .feature-strip-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

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

            .version-item-card {
                padding: 17px;
            }

            .process-step {
                padding-left: 62px;
            }

            .step-number {
                width: 44px;
                height: 44px;
                font-size: 14px;
            }

            .cta-banner {
                padding: 24px 18px;
            }

            .cta-banner-title {
                font-size: 22px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 8px;
            }
        }

        @media (max-width: 520px) {
            .brand-text-main {
                font-size: 16px;
            }

            .brand-lockup .brand-text-sub {
                display: none;
            }

            .brand-row-right {
                gap: 6px;
            }

            .nav-mini-btn {
                display: none;
            }

            .hero-actions .btn-peak-primary,
            .hero-actions .btn-peak-ghost,
            .cta-banner-actions .btn-peak-primary,
            .cta-banner-actions .btn-peak-ghost {
                width: 100%;
                justify-content: center;
            }

            .section-head {
                gap: 8px;
            }

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

            .image-panel img {
                min-height: 220px;
            }

            .info-layout-body .glance-title {
                font-size: 20px;
            }

            .version-meta-line {
                flex-direction: column;
                gap: 2px 0;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
            }
        }

/* roulang page: category3 */
:root {
            --bg-deep: #060B14;
            --bg-mid: #0A1220;
            --bg-section: #0C1626;
            --bg-section-soft: #101E33;
            --primary: #1E6FFF;
            --cyan: #38C8FF;
            --gold: #E8B67A;
            --white: #F7FAFF;
            --text-main: rgba(240, 247, 255, 0.96);
            --text-copy: rgba(174, 194, 219, 0.92);
            --muted: #7F96B4;
            --border-glass: rgba(255, 255, 255, 0.09);
            --light-panel: #F7F9FC;
            --light-text: #243041;
            --shadow-deep: 0 16px 30px -18px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(14, 45, 99, 0.25);
            --radius-card: 12px;
            --radius-glass: 14px;
            --radius-panel: 16px;
            --radius-btn: 10px;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
            background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 45%, #0D1A2C 100%);
            background-attachment: fixed;
            color: var(--text-copy);
            line-height: 1.7;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            word-break: break-word;
        }
        img {
            max-width: 100%;
            border: 0;
            display: block;
        }
        a {
            text-decoration: none;
            color: inherit;
            transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        }
        p {
            margin-top: 0;
            margin-bottom: 1rem;
        }
        .peak-container {
            width: min(100% - 48px, 1320px);
            margin-inline: auto;
        }
        @media (max-width: 576px) {
            .peak-container {
                width: min(100% - 32px, 1320px);
            }
        }
        section {
            scroll-margin-top: 150px;
        }
        .peak-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
            padding: 0;
            background: transparent;
            transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
            border-bottom: 1px solid transparent;
        }
        .peak-nav.scrolled {
            background: rgba(8, 15, 28, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom-color: rgba(56, 200, 255, 0.15);
            box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.8);
        }
        .brand-row {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 14px 0 8px;
            flex-wrap: wrap;
        }
        .brand-lockup {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1E6FFF 0%, #38C8FF 100%);
            color: #fff;
            font-size: 19px;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 20px -14px rgba(56, 200, 255, 0.8);
            flex: 0 0 auto;
        }
        .brand-text {
            line-height: 1.3;
            min-width: 0;
        }
        .brand-text-main {
            display: block;
            font-size: 18px;
            font-weight: 800;
            color: rgba(240, 247, 255, 0.96);
            letter-spacing: 0.01em;
        }
        .brand-text-main .hl-blue {
            color: var(--cyan);
        }
        .brand-text-sub {
            display: block;
            font-size: 11px;
            letter-spacing: 0.18em;
            color: var(--muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .brand-row-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .header-note {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #9BB4D2;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            padding: 6px 13px;
            background: rgba(255, 255, 255, 0.04);
        }
        .header-note i {
            color: var(--cyan);
        }
        .nav-mini-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
            color: #fff;
            background: rgba(30, 111, 255, 0.18);
            border: 1px solid rgba(30, 111, 255, 0.38);
            border-radius: var(--radius-btn);
            padding: 8px 15px;
            font-weight: 600;
        }
        .nav-mini-btn:hover {
            border-color: var(--cyan);
            color: #fff;
            background: rgba(30, 111, 255, 0.3);
        }
        .channel-desktop {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            padding: 4px 0;
        }
        .nav-channels {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            padding: 0;
            list-style: none;
            flex-wrap: wrap;
        }
        .channel-link {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            padding: 11px 14px 10px;
            color: #B7C9DD;
            font-size: 15px;
            font-weight: 500;
            border-bottom: 2px solid transparent;
            white-space: nowrap;
        }
        .channel-link:hover {
            color: var(--cyan);
        }
        .channel-link.active {
            color: #fff;
            border-bottom-color: var(--primary);
        }
        .header-search {
            display: flex;
            align-items: center;
            gap: 9px;
            width: 240px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 6px 12px;
            color: #8CA5C2;
            transition: border-color 0.25s ease, background 0.25s ease;
        }
        .header-search:focus-within {
            border-color: rgba(56, 200, 255, 0.55);
            background: rgba(255, 255, 255, 0.09);
        }
        .header-search input {
            border: 0;
            background: transparent;
            outline: none;
            color: #fff;
            width: 100%;
            font-size: 14px;
        }
        .header-search input::placeholder {
            color: #6E88A6;
        }
        .navbar-toggler-peak {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.16);
            color: #fff;
            width: 42px;
            height: 38px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .navbar-toggler-peak:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(56, 200, 255, 0.2);
        }
        .mobile-nav-panel {
            background: rgba(7, 13, 24, 0.98);
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            padding: 12px 4px 16px;
            border-radius: 0 0 16px 16px;
        }
        .mobile-nav-panel a {
            display: block;
            padding: 13px 14px;
            border-radius: 10px;
            color: #C7D6E6;
            font-size: 15px;
            border-left: 3px solid transparent;
            margin-bottom: 4px;
        }
        .mobile-nav-panel a:hover {
            background: rgba(56, 200, 255, 0.1);
            color: #fff;
        }
        .mobile-nav-panel a.active {
            background: rgba(30, 111, 255, 0.18);
            border-left-color: var(--cyan);
            color: #fff;
        }
        .btn-peak,
        .btn-peak:hover,
        .btn-ghost,
        .btn-ghost:hover {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border-radius: var(--radius-btn);
            padding: 12px 22px;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.25s ease;
        }
        .btn-peak {
            position: relative;
            background: linear-gradient(180deg, #2474FF 0%, #155DE8 100%);
            color: #fff;
            border: 0;
            box-shadow: 0 14px 24px -14px rgba(30, 111, 255, 0.8);
            overflow: hidden;
        }
        .btn-peak::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 28px;
            height: 2px;
            background: var(--gold);
        }
        .btn-peak:hover {
            transform: translateY(-3px);
            background: linear-gradient(180deg, #3184FF 0%, #1A6BFF 100%);
            box-shadow: 0 18px 30px -14px rgba(30, 111, 255, 0.9);
            color: #fff;
        }
        .btn-ghost {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(240, 247, 255, 0.92);
        }
        .btn-ghost:hover {
            border-color: rgba(56, 200, 255, 0.55);
            color: #fff;
            background: rgba(56, 200, 255, 0.08);
            transform: translateY(-2px);
        }
        .btn-peak:focus-visible,
        .btn-ghost:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(56, 200, 255, 0.22);
        }
        .security-hero {
            position: relative;
            padding: 190px 0 84px;
            background:
                linear-gradient(118deg, rgba(5, 10, 18, 0.97) 0%, rgba(8, 20, 35, 0.88) 48%, rgba(13, 28, 47, 0.72) 100%),
                url('/assets/images/backpic/back-1.png') center center / cover no-repeat;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            overflow: hidden;
        }
        .security-hero::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, 0.55), transparent);
        }
        .hero-inner {
            position: relative;
            z-index: 2;
        }
        .crumb-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            color: #8299B8;
            margin-bottom: 34px;
        }
        .crumb-line a {
            color: #9DB6D2;
        }
        .crumb-line a:hover {
            color: var(--cyan);
        }
        .crumb-line span {
            color: rgba(235, 244, 255, 0.88);
        }
        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.06em;
            border: 1px solid rgba(56, 200, 255, 0.26);
            background: rgba(56, 200, 255, 0.07);
            padding: 7px 15px;
            border-radius: 100px;
            margin-bottom: 18px;
        }
        .hero-title {
            margin: 0 0 18px;
        }
        .hero-title h1 {
            margin: 0;
        }
        .hero-title-main {
            display: block;
            font-size: clamp(34px, 4.1vw, 48px);
            font-weight: 800;
            line-height: 1.18;
            letter-spacing: 0.01em;
            color: rgba(240, 247, 255, 0.97);
        }
        .hero-title-sub {
            display: block;
            font-size: clamp(18px, 2vw, 24px);
            font-weight: 600;
            color: rgba(190, 211, 234, 0.95);
            margin-top: 12px;
        }
        .hero-lead {
            font-size: 16px;
            line-height: 1.85;
            color: rgba(174, 194, 219, 0.94);
            max-width: 700px;
            margin-bottom: 24px;
        }
        .pill-line {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 28px;
        }
        .info-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 100px;
            padding: 6px 13px;
            font-size: 13px;
            color: #BCD1E7;
        }
        .info-pill i {
            color: var(--cyan);
            font-size: 14px;
        }
        .hero-btn-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .hero-check-card {
            position: relative;
            padding: 22px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.023) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-glass);
            box-shadow: var(--shadow-deep);
            color: #C2D6E9;
            overflow: hidden;
        }
        .hero-check-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 24px;
            right: 24px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, 0.6), transparent);
        }
        .hero-check-card .check-title {
            font-size: 16px;
            font-weight: 700;
            color: rgba(240, 247, 255, 0.95);
            margin-bottom: 4px;
        }
        .hero-check-card .check-subtitle {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 14px;
        }
        .hero-check-card .card-media {
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        .hero-check-card .card-media img {
            width: 100%;
            height: 130px;
            object-fit: cover;
        }
        .hero-check-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .hero-check-list li {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            padding: 7px 0;
            font-size: 14px;
            line-height: 1.6;
        }
        .hero-check-list .check-icon {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(56, 200, 255, 0.14);
            color: var(--cyan);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex: 0 0 auto;
            margin-top: 4px;
        }
        .hero-note {
            margin-top: 16px;
            padding: 11px 14px;
            border-radius: 10px;
            border: 1px solid rgba(232, 182, 122, 0.18);
            background: rgba(232, 182, 122, 0.08);
            font-size: 12px;
            line-height: 1.7;
            color: #DDC9A6;
        }
        .security-main {
            background: linear-gradient(180deg, #0B1524 0%, #0E1B2D 50%, #0A1422 100%);
            padding: 92px 0 88px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            position: relative;
        }
        .security-main::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 65%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, 0.28), transparent);
        }
        .label-line {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .label-line .section-kicker {
            color: var(--cyan);
            font-size: 14px;
            letter-spacing: 0.06em;
            font-weight: 600;
        }
        .label-line span.line {
            width: 44px;
            height: 1px;
            background: linear-gradient(90deg, rgba(56, 200, 255, 0.6), transparent);
        }
        .side-nav-wrap {
            position: sticky;
            top: 150px;
            padding: 20px 0;
        }
        .side-nav-caption {
            font-size: 12px;
            letter-spacing: 0.14em;
            color: #6E87A5;
            text-transform: uppercase;
            margin-bottom: 14px;
        }
        .side-nav-list {
            margin: 0 0 18px;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .side-nav-list a {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 12px 14px;
            border-radius: var(--radius-card);
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.025);
            color: #AFc3D8;
            font-size: 14px;
            line-height: 1.35;
        }
        .side-nav-list a i {
            color: #6C85A4;
        }
        .side-nav-list a:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(56, 200, 255, 0.32);
            color: #fff;
            transform: translateX(3px);
        }
        .side-nav-list a.active {
            background: rgba(30, 111, 255, 0.13);
            border-color: rgba(30, 111, 255, 0.4);
            color: #fff;
        }
        .side-nav-list a.active i {
            color: var(--cyan);
        }
        .side-note-card {
            padding: 15px;
            background: rgba(232, 182, 122, 0.07);
            border: 1px solid rgba(232, 182, 122, 0.15);
            border-left: 3px solid var(--gold);
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.75;
            color: #D7C5A8;
        }
        .help-content-panel {
            background: var(--light-panel);
            border-radius: var(--radius-panel);
            color: var(--light-text);
            padding: 46px 48px;
            box-shadow: 0 24px 50px -32px rgba(0, 10, 25, 0.7), 0 8px 18px -14px rgba(0, 0, 0, 0.18);
        }
        .content-section {
            padding: 30px 0;
            border-bottom: 1px solid #E3EAF2;
        }
        .content-section:first-child {
            padding-top: 0;
        }
        .content-section:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
        .content-section .section-no {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--primary);
            background: rgba(30, 111, 255, 0.1);
            padding: 4px 10px;
            border-radius: 100px;
            margin-bottom: 14px;
        }
        .content-section h2 {
            font-size: 25px;
            color: #16253A;
            font-weight: 700;
            margin: 0 0 12px;
            line-height: 1.4;
        }
        .content-section h2 span {
            color: #1E6FFF;
        }
        .content-section p {
            font-size: 15px;
            line-height: 1.9;
            color: #364454;
        }
        .simple-list {
            margin: 16px 0 18px;
            padding: 0;
            list-style: none;
        }
        .simple-list li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 11px;
            font-size: 15px;
            line-height: 1.85;
            color: #364454;
        }
        .simple-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.8em;
            width: 7px;
            height: 7px;
            border-radius: 1px;
            background: var(--cyan);
            box-shadow: 0 0 0 3px rgba(56, 200, 255, 0.16);
        }
        .notice {
            border-radius: 12px;
            padding: 16px 18px;
            margin-top: 16px;
            border-left: 3px solid var(--gold);
            background: #FFF6E7;
            color: #554836;
            font-size: 14px;
            line-height: 1.8;
        }
        .notice-blue {
            border-left-color: var(--primary);
            background: #EDF4FF;
            color: #2B415E;
        }
        .notice i {
            margin-right: 6px;
        }
        .chip-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }
        .chip-links a {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 14px;
            border-radius: 100px;
            background: rgba(30, 111, 255, 0.08);
            color: var(--primary);
            border: 1px solid rgba(30, 111, 255, 0.2);
            font-size: 13px;
            font-weight: 600;
        }
        .chip-links a:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        .faq-section {
            background: linear-gradient(180deg, #0B1728 0%, #0C1B2F 60%, #0A1422 100%);
            padding: 92px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            position: relative;
        }
        .faq-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 12%;
            right: 12%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, 0.25), transparent);
        }
        .faq-left {
            padding-right: 20px;
        }
        .faq-left .section-kicker {
            font-size: 14px;
            letter-spacing: 0.08em;
            color: var(--cyan);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .faq-left h2 {
            color: rgba(240, 247, 255, 0.96);
            font-size: clamp(26px, 3vw, 34px);
            font-weight: 800;
            line-height: 1.3;
            margin: 0 0 18px;
        }
        .faq-left h2 span {
            color: var(--cyan);
        }
        .faq-left .faq-helper {
            color: #8199B6;
            font-size: 15px;
            line-height: 1.9;
        }
        .faq-acct {
            border: 0;
            border-radius: 0;
        }
        .accordion-item {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px !important;
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: 0 10px 22px -22px rgba(0, 0, 0, 0.6);
        }
        .accordion-button {
            background: transparent;
            color: #E4EEF8;
            font-weight: 600;
            font-size: 16px;
            padding: 20px 22px;
            line-height: 1.6;
            border: 0;
        }
        .accordion-button:not(.collapsed) {
            background: rgba(30, 111, 255, 0.15);
            color: #fff;
        }
        .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
            background: rgba(30, 111, 255, 0.1);
        }
        .accordion-button::after {
            filter: brightness(0) invert(1);
            opacity: 0.65;
        }
        .accordion-button:not(.collapsed)::after {
            filter: none;
            opacity: 1;
        }
        .accordion-body {
            color: rgba(174, 194, 219, 0.9);
            font-size: 15px;
            line-height: 1.9;
            padding: 8px 22px 22px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        .cta-banner {
            padding: 90px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            background:
                linear-gradient(112deg, rgba(6, 11, 20, 0.97) 0%, rgba(10, 20, 36, 0.93) 48%, rgba(13, 27, 46, 0.82) 100%),
                url('/assets/images/backpic/back-3.webp') center center / cover no-repeat;
        }
        .cta-banner .cta-kicker {
            color: var(--cyan);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.08em;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cta-banner h2 {
            color: rgba(240, 247, 255, 0.98);
            font-size: clamp(28px, 3.4vw, 38px);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 14px;
        }
        .cta-banner h2 span {
            color: var(--cyan);
        }
        .cta-banner p {
            color: rgba(174, 194, 219, 0.92);
            font-size: 16px;
            line-height: 1.9;
            max-width: 620px;
            margin-bottom: 0;
        }
        .footer {
            background: #0A1320;
            border-top: 1px solid rgba(56, 200, 255, 0.12);
            position: relative;
            padding: 66px 0 0;
        }
        .footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 200, 255, 0.35), transparent);
        }
        .footer-brand {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }
        .footer-brand .brand-mark {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, #1E6FFF, #38C8FF);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .footer-brand-name-main {
            display: block;
            font-weight: 800;
            color: #fff;
            font-size: 18px;
            line-height: 1.4;
        }
        .footer-brand-name-sub {
            display: block;
            font-size: 11px;
            color: #69819D;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-top: 2px;
        }
        .footer-desc {
            color: #8CA3BD;
            font-size: 14px;
            line-height: 1.9;
            max-width: 520px;
            margin-bottom: 0;
        }
        .footer h4 {
            color: #DCE8F5;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 18px;
            letter-spacing: 0.03em;
        }
        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-links li {
            margin-bottom: 12px;
        }
        .footer-links a {
            color: #819AB6;
            font-size: 14px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .footer-links a::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(56, 200, 255, 0.65);
            flex: 0 0 auto;
        }
        .footer-links a:hover {
            color: var(--cyan);
        }
        .footer-bottom {
            margin-top: 48px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 24px 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px 18px;
            color: #6D87A1;
            font-size: 13px;
        }
        .footer-bottom .fw-keyword {
            color: #9DB5CC;
        }
        @media (max-width: 1199.98px) {
            .header-note {
                display: none;
            }
        }
        @media (max-width: 991.98px) {
            .brand-row {
                padding: 12px 0;
            }
            .brand-row-right {
                margin-left: 0;
            }
            .security-hero {
                padding: 150px 0 60px;
            }
            .hero-check-card {
                margin-top: 44px;
            }
            .security-main {
                padding: 66px 0 58px;
            }
            .help-content-panel {
                margin-top: 28px;
                padding: 32px;
            }
            .faq-section {
                padding: 64px 0;
            }
            .faq-left {
                margin-bottom: 30px;
            }
        }
        @media (max-width: 767.98px) {
            .security-hero {
                padding: 142px 0 48px;
            }
            .hero-title-main {
                font-size: clamp(28px, 7vw, 38px);
            }
            .hero-title-sub {
                font-size: 18px;
            }
            .pill-line {
                margin-bottom: 22px;
            }
            .hero-btn-row .btn-peak,
            .hero-btn-row .btn-ghost {
                width: 100%;
            }
            .brand-text-main {
                font-size: 16px;
            }
            .security-main {
                padding: 54px 0;
            }
            .help-content-panel {
                padding: 24px 20px;
                border-radius: 14px;
            }
            .content-section h2 {
                font-size: 21px;
            }
            .content-section p,
            .simple-list li {
                font-size: 14px;
            }
            .faq-section {
                padding: 56px 0;
            }
            .accordion-button {
                font-size: 15px;
                padding: 17px 16px;
            }
            .accordion-body {
                padding: 8px 16px 18px;
                font-size: 14px;
            }
            .cta-banner {
                padding: 60px 0;
            }
            .cta-banner .btn-peak {
                width: 100%;
                margin-top: 18px;
            }
            .footer-bottom {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        @media (max-width: 575.98px) {
            .peak-container {
                width: min(100% - 24px, 1320px);
            }
            .brand-row {
                gap: 10px;
            }
            .brand-text-sub {
                font-size: 9px;
                letter-spacing: 0.08em;
            }
            .nav-mini-btn {
                padding: 7px 10px;
                font-size: 13px;
            }
            .nav-mini-btn i {
                display: none;
            }
            .hero-lead {
                font-size: 15px;
            }
            .crumb-line {
                margin-bottom: 24px;
            }
        }