/* roulang page: index */
:root{
            --ink:#241d36;
            --muted:#746b82;
            --soft:#f8f5fb;
            --paper:#fff;
            --line:#ebe4f1;
            --violet:#7357d9;
            --violet-dark:#5035ad;
            --rose:#ef7290;
            --gold:#e9b95d;
            --shadow:0 18px 50px rgba(54,35,92,.11);
            --shadow-sm:0 8px 24px rgba(54,35,92,.08);
            --radius:22px;
            --radius-sm:14px;
            --container:1180px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--soft);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.75;font-size:16px}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%;height:auto}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(235,228,241,.8)}
        .nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
        .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em;font-size:20px;white-space:nowrap}
        .brand-mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--violet),var(--rose));display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 8px 18px rgba(115,87,217,.28)}
        .nav-links{display:flex;align-items:center;gap:6px}
        .nav-links a{padding:9px 13px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:700;transition:.25s ease}
        .nav-links a:hover,.nav-links a.active{background:#f0ebfb;color:var(--violet-dark)}
        .nav-actions{display:flex;align-items:center;gap:12px}
        .mini-note{font-size:12px;color:var(--muted);font-weight:700}
        .menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:25px}
        .hero{position:relative;overflow:hidden;min-height:650px;display:flex;align-items:center;background:linear-gradient(110deg,rgba(36,29,54,.82),rgba(75,47,125,.56)),url('/assets/images/backpic/back-1.webp') center/cover}
        .hero::after{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-120px;top:-80px;box-shadow:0 0 0 42px rgba(255,255,255,.04),0 0 0 86px rgba(255,255,255,.03)}
        .hero-content{position:relative;z-index:1;color:#fff;max-width:760px;padding:92px 0}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;font-size:13px;font-weight:800;background:rgba(255,255,255,.1)}
        .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffc976;box-shadow:0 0 0 5px rgba(255,201,118,.16)}
        h1{font-size:clamp(42px,6vw,76px);line-height:1.12;letter-spacing:-.065em;margin:24px 0 22px;max-width:760px}
        .hero-copy{font-size:19px;line-height:1.9;color:rgba(255,255,255,.82);max-width:680px}
        .hero-buttons{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 21px;border-radius:13px;border:1px solid transparent;font-weight:800;font-size:14px;transition:.25s ease}
        .btn-primary{background:#fff;color:var(--violet-dark);box-shadow:0 10px 25px rgba(0,0,0,.16)}
        .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
        .btn-outline{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08)}
        .btn-outline:hover{background:rgba(255,255,255,.18);border-color:#fff}
        .btn-violet{background:var(--violet);color:#fff;box-shadow:0 10px 22px rgba(115,87,217,.24)}
        .btn-violet:hover{background:var(--violet-dark);transform:translateY(-2px)}
        .btn:focus-visible,.nav-links a:focus-visible,.faq-q:focus-visible{outline:3px solid rgba(239,114,144,.45);outline-offset:3px}
        .section{padding:94px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
        .section-kicker{font-size:12px;color:var(--violet);font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
        h2{font-size:clamp(28px,4vw,44px);line-height:1.2;letter-spacing:-.045em;margin:0}
        .section-intro{max-width:510px;color:var(--muted);margin:0}
        .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .feature-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;min-height:245px;box-shadow:var(--shadow-sm);transition:.3s ease}
        .feature-card:hover,.topic-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
        .icon-box{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--violet-dark);background:#f0ebfb;font-size:20px;margin-bottom:22px}
        .feature-card h3,.topic-card h3{font-size:20px;margin:0 0 9px;letter-spacing:-.025em}
        .feature-card p,.topic-card p{font-size:14px;color:var(--muted);margin:0}
        .topics{background:#fff}
        .topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .topic-card{overflow:hidden;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);transition:.3s ease}
        .topic-card img{width:100%;height:170px;object-fit:cover}
        .topic-body{padding:22px}
        .topic-tag{display:inline-block;color:var(--violet);font-size:12px;font-weight:900;margin-bottom:10px}
        .topic-link{display:inline-flex;margin-top:19px;color:var(--violet-dark);font-size:13px;font-weight:900}
        .topic-link span{transition:.2s}.topic-link:hover span{transform:translateX(4px)}
        .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
        .image-frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
        .image-frame img{width:100%;min-height:410px;object-fit:cover}
        .image-label{position:absolute;left:22px;bottom:22px;padding:12px 16px;border-radius:13px;color:#fff;background:rgba(36,29,54,.78);backdrop-filter:blur(10px);font-weight:800;font-size:13px}
        .check-list{padding:0;margin:28px 0 0;list-style:none;display:grid;gap:15px}
        .check-list li{position:relative;padding-left:34px;color:#514960}
        .check-list li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eee8fb;color:var(--violet);font-size:13px;font-weight:900}
        .trust-strip{background:#2e2444;color:#fff}
        .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
        .trust-item{padding:8px 0 8px 24px;border-left:1px solid rgba(255,255,255,.24)}
        .trust-item strong{display:block;font-size:18px;margin-bottom:6px}.trust-item span{color:rgba(255,255,255,.65);font-size:14px}
        .updates{display:grid;grid-template-columns:1fr 1.3fr;gap:65px;align-items:start}
        .update-list{display:grid;gap:12px}
        .update-item{display:grid;grid-template-columns:92px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px 19px;transition:.25s}
        .update-item:hover{border-color:#cfc3ee;box-shadow:var(--shadow-sm)}
        .update-date{font-size:12px;color:var(--muted)}.update-title{font-weight:800;font-size:14px}.update-cat{font-size:11px;color:var(--violet);font-weight:900}
        .empty-note{padding:25px;background:#fff;border:1px dashed #d7cce8;border-radius:15px;color:var(--muted);text-align:center}
        .faq-area{background:#fff}
        .faq-list{max-width:850px;margin:auto;display:grid;gap:12px}
        .faq-item{border:1px solid var(--line);border-radius:15px;background:var(--soft);overflow:hidden}
        .faq-q{width:100%;border:0;background:transparent;text-align:left;padding:21px 24px;color:var(--ink);font-weight:900;display:flex;justify-content:space-between;gap:20px}
        .faq-q::after{content:"+";color:var(--violet);font-size:23px;line-height:1}
        .faq-a{padding:0 24px 21px;color:var(--muted);font-size:14px}
        .cta{padding:70px 0;background:linear-gradient(120deg,#7357d9,#a463b8);color:#fff}
        .cta-box{display:flex;align-items:center;justify-content:space-between;gap:35px}.cta h2{max-width:600px}.cta p{color:rgba(255,255,255,.78);max-width:600px;margin:13px 0 0}
        .site-footer{background:#211a31;color:#fff;padding:50px 0 25px}
        .footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.13)}
        .footer-brand p{color:rgba(255,255,255,.58);font-size:13px;max-width:340px;margin:14px 0 0}
        .footer-links{display:flex;gap:15px;flex-wrap:wrap;align-content:flex-start}.footer-links a{color:rgba(255,255,255,.7);font-size:13px}.footer-links a:hover{color:#fff}
        .copyright{display:flex;justify-content:space-between;gap:20px;padding-top:22px;color:rgba(255,255,255,.42);font-size:12px}
        @media(max-width:1024px){.topic-grid{grid-template-columns:repeat(2,1fr)}.updates{gap:35px}.hero{min-height:590px}}
        @media(max-width:768px){.container{width:min(100% - 34px,var(--container))}.nav{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 17px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow-sm)}.nav-links.open{display:flex}.nav-links a{padding:12px 14px}.nav-actions{display:none}.feature-grid,.trust-grid,.split,.updates{grid-template-columns:1fr}.section{padding:68px 0}.hero-content{padding:75px 0}.hero-copy{font-size:17px}.section-head{display:block}.section-intro{margin-top:13px}.split{gap:34px}.image-frame img{min-height:300px}.cta-box,.footer-top,.copyright{display:block}.cta .btn{margin-top:24px}.footer-links{margin-top:28px}.copyright span{display:block;margin-top:8px}}
        @media(max-width:520px){h1{font-size:42px}.topic-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.update-item{grid-template-columns:1fr;gap:4px}.hero-buttons .btn{width:100%}.trust-item{padding-left:17px}.brand{font-size:17px}}

/* roulang page: article */
:root{
            --bg:#07111f;
            --bg-soft:#0b1628;
            --surface:#0f1d33;
            --surface-2:#13243d;
            --card:#10203a;
            --card-2:#0d1a2f;
            --text:#e8eefc;
            --muted:#9fb0cf;
            --line:rgba(255,255,255,.09);
            --line-strong:rgba(255,255,255,.15);
            --primary:#6d7cff;
            --primary-2:#8c6cff;
            --accent:#24d3a4;
            --warn:#ffcc66;
            --shadow:0 24px 70px rgba(4,10,22,.42);
            --shadow-soft:0 14px 38px rgba(4,10,22,.26);
            --radius:22px;
            --radius-sm:14px;
            --container:1180px;
            --transition:180ms ease;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            color:var(--text);
            line-height:1.7;
            background:
                radial-gradient(circle at top left, rgba(109,124,255,.16), transparent 32%),
                radial-gradient(circle at top right, rgba(36,211,164,.12), transparent 28%),
                linear-gradient(180deg, #06101c 0%, #091425 48%, #07111f 100%);
            min-height:100vh;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        a{color:inherit;text-decoration:none;transition:color var(--transition),transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(109,124,255,.35);color:#fff}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:blur(16px);
            background:rgba(7,17,31,.75);
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .header-inner{
            min-height:78px;
            display:flex;
            align-items:center;
            gap:18px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
            white-space:nowrap;
        }
        .brand:hover{transform:translateY(-1px)}
        .brand-mark{
            width:36px;
            height:36px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(109,124,255,.25), rgba(36,211,164,.22));
            border:1px solid rgba(255,255,255,.1);
            box-shadow:0 10px 24px rgba(0,0,0,.18);
            color:#fff;
        }
        .brand span:last-child{font-size:1.02rem}
        .nav-toggle{
            display:none;
            margin-left:auto;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            align-items:center;
            justify-content:center;
            gap:5px;
            flex-direction:column;
            padding:0;
        }
        .nav-toggle span{
            width:18px;
            height:2px;
            border-radius:99px;
            background:currentColor;
            display:block;
        }
        .nav-links{
            margin-left:auto;
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
        }
        .nav-links a{
            padding:11px 15px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            background:transparent;
            font-size:.96rem;
        }
        .nav-links a:hover,
        .nav-links a:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.08);
            transform:translateY(-1px);
            outline:none;
        }
        .nav-links a.active{
            color:#fff;
            background:linear-gradient(135deg, rgba(109,124,255,.24), rgba(36,211,164,.16));
            border-color:rgba(109,124,255,.32);
            box-shadow:0 10px 24px rgba(109,124,255,.12);
        }
        .hero{
            position:relative;
            overflow:hidden;
            padding:42px 0 28px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(7,17,31,.34), rgba(7,17,31,.78)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            opacity:.9;
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.32fr) minmax(300px,.92fr);
            gap:24px;
            align-items:stretch;
        }
        .hero-copy,
        .hero-panel,
        .article-shell,
        .info-card,
        .faq-card,
        .cta-card,
        .notfound-card{
            background:linear-gradient(180deg, rgba(18,31,53,.96), rgba(12,23,41,.96));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
            border-radius:var(--radius);
        }
        .hero-copy{
            padding:34px;
            min-height:360px;
            display:flex;
            flex-direction:column;
            justify-content:center;
            gap:18px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:fit-content;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(109,124,255,.14);
            border:1px solid rgba(109,124,255,.26);
            color:#dfe5ff;
            font-size:.9rem;
            letter-spacing:.02em;
        }
        .hero h1{
            margin:0;
            font-size:clamp(2rem, 4vw, 3.65rem);
            line-height:1.12;
            letter-spacing:-.03em;
        }
        .hero-desc{
            margin:0;
            color:var(--muted);
            font-size:1.04rem;
            max-width:62ch;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:#d9e4ff;
            font-size:.92rem;
        }
        .chip strong{color:#fff;font-weight:700}
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:2px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:46px;
            padding:0 18px;
            border-radius:14px;
            border:1px solid transparent;
            font-weight:700;
            letter-spacing:.01em;
            transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition);
        }
        .btn:hover,
        .btn:focus-visible{
            transform:translateY(-1px);
            outline:none;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow:0 14px 30px rgba(109,124,255,.22);
        }
        .btn-primary:hover,
        .btn-primary:focus-visible{
            box-shadow:0 18px 34px rgba(109,124,255,.3);
        }
        .btn-ghost{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.1);
        }
        .btn-ghost:hover,
        .btn-ghost:focus-visible{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.16);
        }
        .hero-panel{
            overflow:hidden;
            display:flex;
            flex-direction:column;
        }
        .hero-media{
            position:relative;
            min-height:220px;
            background:#0d1728;
        }
        .hero-media img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .hero-media::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,17,31,.06), rgba(7,17,31,.45));
            pointer-events:none;
        }
        .hero-panel-body{
            padding:22px 22px 24px;
            display:grid;
            gap:16px;
        }
        .hero-panel-body h2{
            margin:0;
            font-size:1.12rem;
            letter-spacing:-.01em;
        }
        .check-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:12px;
        }
        .check-list li{
            position:relative;
            padding-left:28px;
            color:var(--muted);
        }
        .check-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:.44em;
            width:16px;
            height:16px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #54e2b8);
            box-shadow:0 0 0 4px rgba(36,211,164,.15);
        }
        .content-wrap{
            padding:26px 0 10px;
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.72fr) minmax(290px,.88fr);
            gap:24px;
            align-items:start;
        }
        .article-shell{
            padding:28px;
        }
        .section-title{
            display:flex;
            flex-direction:column;
            gap:8px;
            margin-bottom:18px;
        }
        .section-title .eyebrow{font-size:.85rem}
        .section-title h2{
            margin:0;
            font-size:1.38rem;
            letter-spacing:-.02em;
        }
        .article-body{
            font-size:1.02rem;
            color:#d8e2f7;
        }
        .article-body > :first-child{margin-top:0}
        .article-body > :last-child{margin-bottom:0}
        .article-body h2,
        .article-body h3,
        .article-body h4{
            line-height:1.28;
            letter-spacing:-.02em;
            margin:1.5em 0 .7em;
            color:#fff;
        }
        .article-body h2{font-size:1.55rem}
        .article-body h3{font-size:1.28rem}
        .article-body p{
            margin:.9em 0;
            color:#d8e2f7;
        }
        .article-body a{
            color:#9db0ff;
            text-decoration:underline;
            text-decoration-color:rgba(157,176,255,.4);
            text-underline-offset:3px;
        }
        .article-body a:hover{color:#c3cffd;text-decoration-color:rgba(195,207,253,.65)}
        .article-body ul,
        .article-body ol{
            margin:1em 0;
            padding-left:1.25em;
        }
        .article-body li{margin:.42em 0}
        .article-body blockquote{
            margin:1.2em 0;
            padding:18px 18px 18px 20px;
            border-left:4px solid var(--accent);
            background:rgba(36,211,164,.08);
            border-radius:0 16px 16px 0;
            color:#e4fff7;
        }
        .article-body img{
            border-radius:18px;
            margin:1.2em 0;
            box-shadow:0 20px 38px rgba(0,0,0,.24);
        }
        .article-body hr{
            border:none;
            border-top:1px solid var(--line);
            margin:1.4em 0;
        }
        .article-body table{
            width:100%;
            border-collapse:collapse;
            margin:1.2em 0;
            overflow:hidden;
            border-radius:16px;
            box-shadow:0 0 0 1px var(--line);
        }
        .article-body th,
        .article-body td{
            padding:12px 14px;
            border-bottom:1px solid var(--line);
            text-align:left;
        }
        .article-body th{
            background:rgba(255,255,255,.04);
            color:#fff;
            font-weight:700;
        }
        .article-body tr:last-child td{border-bottom:none}
        .article-body code{
            padding:.18rem .42rem;
            border-radius:8px;
            background:rgba(255,255,255,.07);
            color:#ffe7a8;
        }
        .article-body pre{
            overflow:auto;
            padding:16px;
            border-radius:16px;
            background:#07101d;
            border:1px solid var(--line);
        }
        .article-empty{
            padding:20px 0 8px;
        }
        .article-empty h2{
            margin:0 0 12px;
            font-size:1.28rem;
        }
        .article-empty p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .sidebar{
            display:grid;
            gap:18px;
            position:sticky;
            top:98px;
        }
        .info-card{
            overflow:hidden;
        }
        .info-card .image-wrap{
            aspect-ratio:16/10;
            overflow:hidden;
            background:#0b1527;
        }
        .info-card .image-wrap img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .info-card .card-body{
            padding:20px;
            display:grid;
            gap:14px;
        }
        .info-card h3{
            margin:0;
            font-size:1.12rem;
        }
        .detail-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }
        .detail-list li{
            padding:12px 14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            border-radius:14px;
            color:var(--muted);
        }
        .detail-list strong{color:#fff}
        .mini-tag-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .mini-tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
            color:#dce6ff;
            font-size:.9rem;
        }
        .support-grid{
            padding:8px 0 8px;
        }
        .support-grid .grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .support-card{
            padding:22px;
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(16,32,58,.9), rgba(12,23,41,.9));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
        }
        .support-card .icon{
            width:44px;
            height:44px;
            border-radius:14px;
            display:grid;
            place-items:center;
            margin-bottom:14px;
            background:rgba(109,124,255,.14);
            border:1px solid rgba(109,124,255,.22);
            color:#fff;
            font-weight:800;
        }
        .support-card h3{
            margin:0 0 8px;
            font-size:1.08rem;
        }
        .support-card p{
            margin:0;
            color:var(--muted);
        }
        .faq-section,
        .cta-section{
            padding:8px 0 28px;
        }
        .faq-card,
        .cta-card{
            padding:28px;
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        details.faq-item{
            border:1px solid var(--line);
            border-radius:18px;
            background:rgba(255,255,255,.03);
            overflow:hidden;
        }
        details.faq-item[open]{
            border-color:rgba(109,124,255,.28);
            background:rgba(109,124,255,.08);
        }
        details.faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:16px 18px;
            font-weight:700;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.08);
            color:#fff;
            flex:0 0 auto;
        }
        details.faq-item[open] summary::after{content:"–"}
        details.faq-item .faq-content{
            padding:0 18px 16px;
            color:var(--muted);
        }
        .cta-card{
            display:grid;
            gap:16px;
            background:
                radial-gradient(circle at top right, rgba(109,124,255,.18), transparent 36%),
                linear-gradient(180deg, rgba(16,32,58,.96), rgba(11,22,40,.96));
        }
        .cta-card h2{
            margin:0;
            font-size:1.5rem;
        }
        .cta-card p{
            margin:0;
            color:var(--muted);
            max-width:70ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:4px;
        }
        .notfound-wrap{
            padding:42px 0 64px;
        }
        .notfound-card{
            padding:34px;
            text-align:center;
        }
        .notfound-card h1{
            margin:0 0 12px;
            font-size:clamp(1.8rem, 3vw, 2.6rem);
        }
        .notfound-card p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .site-footer{
            margin-top:18px;
            background:#06101c;
            border-top:1px solid rgba(255,255,255,.08);
        }
        .footer-top{
            padding:30px 0 18px;
            display:flex;
            gap:22px;
            align-items:flex-start;
            justify-content:space-between;
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .footer-brand{
            max-width:420px;
        }
        .footer-brand .brand{margin-bottom:12px}
        .footer-brand p{
            margin:0;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:10px;
        }
        .footer-links a{
            padding:10px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:#dbe5ff;
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.15);
            transform:translateY(-1px);
            outline:none;
        }
        .copyright{
            padding:16px 0 22px;
            display:flex;
            flex-wrap:wrap;
            gap:10px 18px;
            color:var(--muted);
            font-size:.95rem;
            justify-content:space-between;
        }
        .focus-ring:focus-visible,
        a:focus-visible,
        button:focus-visible,
        summary:focus-visible{
            outline:3px solid rgba(109,124,255,.4);
            outline-offset:2px;
        }
        @media (max-width: 1024px){
            .hero-inner,
            .article-layout{
                grid-template-columns:1fr;
            }
            .sidebar{
                position:static;
            }
            .support-grid .grid{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 900px){
            .header-inner{
                min-height:72px;
            }
            .nav-toggle{
                display:inline-flex;
            }
            .nav-links{
                position:absolute;
                left:16px;
                right:16px;
                top:78px;
                padding:12px;
                border-radius:22px;
                background:rgba(9,20,37,.96);
                border:1px solid rgba(255,255,255,.08);
                box-shadow:var(--shadow);
                display:none;
            }
            .site-header.nav-open .nav-links{
                display:flex;
                flex-direction:column;
                align-items:stretch;
            }
            .nav-links a{
                width:100%;
                border-radius:14px;
                padding:12px 14px;
            }
            .footer-top{
                flex-direction:column;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }
        @media (max-width: 768px){
            .hero{
                padding-top:28px;
            }
            .hero-copy,
            .hero-panel,
            .article-shell,
            .faq-card,
            .cta-card,
            .notfound-card,
            .support-card,
            .info-card .card-body{
                padding:20px;
            }
            .hero-copy{
                min-height:auto;
            }
            .hero h1{
                font-size:clamp(1.7rem, 9vw, 2.7rem);
            }
            .article-body{
                font-size:1rem;
            }
            .article-body h2{font-size:1.3rem}
            .article-body h3{font-size:1.12rem}
            .copyright{
                flex-direction:column;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .header-inner{
                gap:10px;
            }
            .brand span:last-child{
                font-size:.96rem;
            }
            .hero-actions,
            .cta-actions{
                flex-direction:column;
            }
            .btn{
                width:100%;
            }
            .meta-row,
            .mini-tag-row{
                gap:8px;
            }
            .chip,
            .mini-tag{
                font-size:.86rem;
            }
            .support-card .icon{
                width:40px;
                height:40px;
            }
        }

/* roulang page: category1 */
:root{
            --bg:#080b14;
            --bg-soft:#0f1424;
            --panel:#11192d;
            --panel-2:#151f38;
            --card:#111a30;
            --text:#eef3ff;
            --muted:#a7b2d3;
            --soft:#7f8ab1;
            --line:rgba(255,255,255,.08);
            --line-2:rgba(255,255,255,.14);
            --brand:#ff5d8f;
            --brand-2:#8a7dff;
            --brand-3:#31d0aa;
            --warn:#ffb454;
            --shadow:0 22px 70px rgba(0,0,0,.35);
            --shadow-soft:0 16px 40px rgba(2,5,14,.24);
            --radius:22px;
            --radius-lg:30px;
            --container:1180px;
            --gap:24px;
            --speed:.22s ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Arial,sans-serif;
            background:
                radial-gradient(circle at top left, rgba(255,93,143,.14), transparent 28%),
                radial-gradient(circle at top right, rgba(138,125,255,.16), transparent 22%),
                linear-gradient(180deg, #080b14 0%, #0b1020 40%, #070a12 100%);
            color:var(--text);
            line-height:1.75;
            min-height:100vh;
            overflow-x:hidden;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color var(--speed), background-color var(--speed), border-color var(--speed), transform var(--speed), box-shadow var(--speed), opacity var(--speed);
        }
        img{
            max-width:100%;
            display:block;
        }
        button,input,textarea{
            font:inherit;
        }
        ::selection{
            background:rgba(255,93,143,.25);
            color:var(--text);
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter:blur(18px);
            background:rgba(7,10,18,.68);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            min-height:78px;
            padding:12px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-size:1.05rem;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
        }
        .brand:hover{opacity:.92}
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:12px;
            display:grid;
            place-items:center;
            color:#fff;
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            box-shadow:0 10px 30px rgba(255,93,143,.25);
            flex:none;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .nav-links a{
            position:relative;
            padding:11px 16px;
            color:var(--muted);
            border:1px solid transparent;
            border-radius:999px;
            background:transparent;
            line-height:1;
            font-weight:600;
        }
        .nav-links a:hover{
            color:var(--text);
            border-color:rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
            transform:translateY(-1px);
        }
        .nav-links a.active{
            color:#fff;
            border-color:rgba(255,93,143,.35);
            background:linear-gradient(135deg, rgba(255,93,143,.18), rgba(138,125,255,.15));
            box-shadow:0 10px 24px rgba(255,93,143,.14);
        }
        .nav-links a:focus-visible,
        .brand:focus-visible,
        .btn:focus-visible,
        .cta-form input:focus-visible,
        .cta-form textarea:focus-visible,
        .faq details summary:focus-visible{
            outline:none;
            box-shadow:0 0 0 3px rgba(255,93,143,.22), 0 0 0 1px rgba(255,93,143,.5);
        }

        .hero{
            position:relative;
            padding:28px 0 20px;
        }
        .hero-card{
            position:relative;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.1);
            border-radius:var(--radius-lg);
            background:
                linear-gradient(180deg, rgba(6,9,18,.42), rgba(6,9,18,.74)),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .hero-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 20% 20%, rgba(255,93,143,.18), transparent 28%),
                radial-gradient(circle at 80% 20%, rgba(138,125,255,.2), transparent 26%),
                linear-gradient(135deg, rgba(8,11,20,.24), rgba(8,11,20,.72));
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:28px;
            padding:34px;
            align-items:stretch;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(12,16,30,.55);
            color:#f7d9e4;
            font-size:.92rem;
            letter-spacing:.02em;
        }
        .eyebrow .dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            box-shadow:0 0 0 4px rgba(255,93,143,.15);
        }
        .hero h1{
            margin:18px 0 14px;
            font-size:clamp(2.2rem, 4.6vw, 4.4rem);
            line-height:1.08;
            letter-spacing:-.03em;
            max-width:11ch;
        }
        .hero-lead{
            margin:0;
            max-width:60ch;
            color:rgba(238,243,255,.84);
            font-size:1.06rem;
        }
        .hero-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            margin-top:24px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 20px;
            border-radius:14px;
            border:1px solid transparent;
            font-weight:700;
            cursor:pointer;
            user-select:none;
            transform:translateZ(0);
        }
        .btn-primary{
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            color:#fff;
            box-shadow:0 14px 30px rgba(255,93,143,.22);
        }
        .btn-primary:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 36px rgba(255,93,143,.28);
        }
        .btn-secondary{
            color:var(--text);
            border-color:rgba(255,255,255,.12);
            background:rgba(255,255,255,.05);
        }
        .btn-secondary:hover{
            border-color:rgba(255,255,255,.2);
            background:rgba(255,255,255,.08);
            transform:translateY(-2px);
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.1);
            color:rgba(238,243,255,.88);
            font-size:.92rem;
            white-space:nowrap;
        }
        .tag::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--brand), var(--brand-3));
            box-shadow:0 0 0 4px rgba(49,208,170,.12);
        }
        .hero-visual{
            display:grid;
            gap:14px;
            grid-template-columns:1.06fr .94fr;
            min-height:100%;
        }
        .visual-main,
        .visual-card{
            position:relative;
            overflow:hidden;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.05);
            box-shadow:var(--shadow-soft);
        }
        .visual-main{
            min-height:420px;
            background:url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
        }
        .visual-main::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,10,18,.08), rgba(7,10,18,.8));
        }
        .visual-overlay{
            position:absolute;
            inset:auto 18px 18px 18px;
            z-index:1;
            display:grid;
            gap:10px;
        }
        .visual-overlay .overlay-title{
            font-size:1.2rem;
            font-weight:800;
            letter-spacing:.01em;
        }
        .visual-overlay .overlay-text{
            color:rgba(238,243,255,.82);
            font-size:.95rem;
        }
        .visual-note{
            display:grid;
            gap:10px;
            padding:18px;
            background:linear-gradient(180deg, rgba(17,25,45,.96), rgba(17,25,45,.82));
        }
        .note-line{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:rgba(238,243,255,.88);
            font-size:.95rem;
        }
        .note-bullet{
            width:22px;
            height:22px;
            flex:none;
            border-radius:8px;
            display:grid;
            place-items:center;
            background:rgba(255,93,143,.14);
            color:#ffd4e3;
            font-size:.8rem;
        }
        .visual-stack{
            display:grid;
            gap:14px;
        }
        .cover-thumb{
            position:relative;
            overflow:hidden;
            min-height:203px;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.12);
            box-shadow:var(--shadow-soft);
            background:#12172a;
        }
        .cover-thumb::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,10,18,.12), rgba(7,10,18,.72));
            z-index:1;
        }
        .cover-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .thumb-copy{
            position:absolute;
            left:16px;
            right:16px;
            bottom:16px;
            z-index:2;
        }
        .thumb-copy strong{
            display:block;
            margin-bottom:6px;
            font-size:1rem;
        }
        .thumb-copy span{
            color:rgba(238,243,255,.78);
            font-size:.88rem;
        }
        .section{
            padding:72px 0 0;
        }
        .section-heading{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:24px;
        }
        .section-heading h2{
            margin:0;
            font-size:clamp(1.7rem, 3vw, 2.7rem);
            line-height:1.12;
            letter-spacing:-.02em;
        }
        .section-heading p{
            margin:0;
            max-width:60ch;
            color:var(--muted);
        }
        .subtle{
            color:var(--soft);
        }
        .stats{
            margin-top:22px;
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:14px;
        }
        .stat{
            padding:20px;
            border-radius:22px;
            background:linear-gradient(180deg, rgba(17,25,45,.98), rgba(17,25,45,.86));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
        }
        .stat strong{
            display:block;
            font-size:1.45rem;
            line-height:1.1;
            margin-bottom:6px;
            color:#fff;
        }
        .stat span{
            color:var(--muted);
            font-size:.95rem;
        }
        .card-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:var(--gap);
        }
        .soft-card{
            position:relative;
            overflow:hidden;
            padding:22px;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(17,25,45,.95), rgba(15,20,36,.92));
            box-shadow:var(--shadow-soft);
            transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed), background-color var(--speed);
        }
        .soft-card::before{
            content:"";
            position:absolute;
            inset:0 auto auto 0;
            width:100%;
            height:3px;
            background:linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
            opacity:.82;
        }
        .soft-card:hover{
            transform:translateY(-4px);
            border-color:rgba(255,255,255,.14);
            box-shadow:0 22px 42px rgba(0,0,0,.34);
        }
        .soft-card .icon{
            width:46px;
            height:46px;
            display:grid;
            place-items:center;
            border-radius:16px;
            margin-bottom:16px;
            font-size:1.1rem;
            color:#fff;
            background:linear-gradient(135deg, rgba(255,93,143,.22), rgba(138,125,255,.18));
            border:1px solid rgba(255,255,255,.08);
        }
        .soft-card h3{
            margin:0 0 10px;
            font-size:1.14rem;
            line-height:1.25;
        }
        .soft-card p{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }
        .split{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:var(--gap);
            align-items:stretch;
        }
        .panel{
            position:relative;
            overflow:hidden;
            padding:28px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(17,25,45,.96), rgba(15,20,36,.94));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
        }
        .panel::before{
            content:"";
            position:absolute;
            inset:auto -20% -38% auto;
            width:320px;
            height:320px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(255,93,143,.18), transparent 68%);
            pointer-events:none;
        }
        .panel h3{
            margin:0 0 14px;
            font-size:1.55rem;
            line-height:1.2;
        }
        .panel p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .check-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .check-list li{
            position:relative;
            padding-left:30px;
            color:rgba(238,243,255,.9);
        }
        .check-list li::before{
            content:"✓";
            position:absolute;
            left:0;
            top:0;
            width:20px;
            height:20px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:rgba(49,208,170,.14);
            color:#8bf1d7;
            font-size:.8rem;
            font-weight:900;
        }
        .media-panel{
            display:grid;
            grid-template-rows:minmax(280px, 1fr) auto;
            overflow:hidden;
            padding:0;
        }
        .media-frame{
            min-height:290px;
            background:
                linear-gradient(180deg, rgba(7,10,18,.15), rgba(7,10,18,.72)),
                url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
        }
        .media-content{
            padding:24px;
            border-top:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(16,22,40,.95), rgba(13,18,32,.96));
        }
        .mini-grid{
            display:grid;
            gap:14px;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            margin-top:18px;
        }
        .mini{
            padding:16px 17px;
            border-radius:18px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
        }
        .mini strong{
            display:block;
            margin-bottom:6px;
            font-size:1rem;
        }
        .mini span{
            color:var(--muted);
            font-size:.92rem;
        }
        .scene-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:var(--gap);
        }
        .scene-card{
            overflow:hidden;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(17,25,45,.96), rgba(14,19,34,.94));
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
            transition:transform var(--speed), box-shadow var(--speed);
        }
        .scene-card:hover{
            transform:translateY(-4px);
            box-shadow:0 24px 48px rgba(0,0,0,.34);
        }
        .scene-img{
            position:relative;
            aspect-ratio:4/3;
            overflow:hidden;
        }
        .scene-img::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,10,18,.12), rgba(7,10,18,.68));
        }
        .scene-img img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .scene-body{
            padding:18px;
        }
        .scene-body h3{
            margin:0 0 8px;
            font-size:1.06rem;
        }
        .scene-body p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .scene-points{
            margin:14px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:8px;
        }
        .scene-points li{
            padding-left:18px;
            position:relative;
            color:rgba(238,243,255,.88);
            font-size:.92rem;
        }
        .scene-points li::before{
            content:"";
            position:absolute;
            left:0;
            top:.66em;
            width:7px;
            height:7px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
        }
        .highlight{
            position:relative;
            overflow:hidden;
            margin-top:72px;
            border-radius:30px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(255,93,143,.13), rgba(138,125,255,.12)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .highlight::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,10,18,.28), rgba(7,10,18,.82));
        }
        .highlight-inner{
            position:relative;
            z-index:1;
            padding:30px;
            display:grid;
            grid-template-columns:1.02fr .98fr;
            gap:24px;
        }
        .highlight h2{
            margin:0 0 12px;
            font-size:clamp(1.6rem, 2.8vw, 2.45rem);
            line-height:1.15;
        }
        .highlight p{
            margin:0 0 20px;
            color:rgba(238,243,255,.82);
            max-width:60ch;
        }
        .info-list{
            display:grid;
            gap:14px;
        }
        .info-item{
            padding:18px;
            border-radius:20px;
            background:rgba(11,15,28,.55);
            border:1px solid rgba(255,255,255,.08);
        }
        .info-item strong{
            display:block;
            margin-bottom:6px;
            font-size:1rem;
        }
        .info-item span{
            color:var(--muted);
            font-size:.93rem;
        }
        .notice{
            display:grid;
            gap:12px;
            align-content:start;
            padding:22px;
            border-radius:24px;
            background:rgba(10,14,26,.62);
            border:1px solid rgba(255,255,255,.08);
            backdrop-filter:blur(12px);
        }
        .notice h3{
            margin:0;
            font-size:1.15rem;
        }
        .notice ul{
            margin:0;
            padding-left:18px;
            color:rgba(238,243,255,.88);
        }
        .notice li{
            margin:6px 0;
        }
        .faq{
            display:grid;
            gap:14px;
        }
        .faq details{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(17,25,45,.96), rgba(15,20,36,.94));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .faq summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            font-weight:700;
            position:relative;
        }
        .faq summary::-webkit-details-marker{display:none}
        .faq summary::after{
            content:"+";
            position:absolute;
            right:20px;
            top:50%;
            transform:translateY(-50%);
            color:var(--muted);
            font-size:1.2rem;
        }
        .faq details[open] summary::after{
            content:"–";
        }
        .faq .answer{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .cta{
            margin-top:72px;
            margin-bottom:72px;
        }
        .cta-panel{
            overflow:hidden;
            border-radius:30px;
            border:1px solid rgba(255,255,255,.1);
            background:
                linear-gradient(135deg, rgba(255,93,143,.18), rgba(138,125,255,.16)),
                linear-gradient(180deg, rgba(17,25,45,.98), rgba(15,20,36,.96));
            box-shadow:var(--shadow);
        }
        .cta-inner{
            padding:30px;
            display:grid;
            grid-template-columns:1fr auto;
            gap:24px;
            align-items:center;
        }
        .cta h2{
            margin:0 0 10px;
            font-size:clamp(1.6rem, 2.9vw, 2.5rem);
            line-height:1.15;
        }
        .cta p{
            margin:0;
            color:rgba(238,243,255,.82);
            max-width:60ch;
        }
        .cta-form{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:12px;
            min-width:min(100%, 430px);
        }
        .field{
            display:grid;
            gap:8px;
        }
        .field.full{
            grid-column:1 / -1;
        }
        .field label{
            font-size:.92rem;
            color:rgba(238,243,255,.8);
        }
        .cta-form input,
        .cta-form textarea{
            width:100%;
            border:1px solid rgba(255,255,255,.1);
            border-radius:16px;
            background:rgba(7,10,18,.44);
            color:var(--text);
            padding:13px 14px;
            outline:none;
            transition:border-color var(--speed), background-color var(--speed), box-shadow var(--speed), transform var(--speed);
        }
        .cta-form textarea{
            resize:vertical;
            min-height:100px;
        }
        .cta-form input::placeholder,
        .cta-form textarea::placeholder{color:rgba(167,178,211,.62)}
        .cta-form input:hover,
        .cta-form textarea:hover{
            border-color:rgba(255,255,255,.18);
            background:rgba(7,10,18,.58);
        }
        .site-footer{
            border-top:1px solid rgba(255,255,255,.08);
            background:rgba(5,8,15,.82);
            padding:36px 0 26px;
        }
        .footer-top{
            display:flex;
            justify-content:space-between;
            gap:28px;
            align-items:flex-start;
        }
        .footer-brand{
            max-width:430px;
        }
        .footer-brand p{
            margin:14px 0 0;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:10px;
        }
        .footer-links a{
            padding:9px 12px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
        }
        .footer-links a:hover{
            color:#fff;
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.1);
        }
        .copyright{
            margin-top:28px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            color:rgba(167,178,211,.82);
            font-size:.92rem;
        }
        .mobile-toggle{
            display:none;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.05);
            color:#fff;
            cursor:pointer;
        }
        .mobile-toggle span{
            display:block;
            width:18px;
            height:2px;
            margin:4px auto;
            border-radius:999px;
            background:currentColor;
        }
        @media (max-width:1024px){
            .hero-inner,
            .highlight-inner,
            .split{
                grid-template-columns:1fr;
            }
            .hero h1{
                max-width:14ch;
            }
            .hero-visual{
                grid-template-columns:1fr 1fr;
            }
            .visual-main{
                min-height:330px;
            }
            .card-grid,
            .scene-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .cta-inner{
                grid-template-columns:1fr;
            }
            .cta-form{
                width:100%;
                min-width:0;
            }
        }
        @media (max-width:768px){
            .header-inner{
                min-height:68px;
            }
            .mobile-toggle{
                display:block;
                flex:none;
            }
            .nav-links{
                position:absolute;
                left:16px;
                right:16px;
                top:74px;
                display:none;
                flex-direction:column;
                align-items:stretch;
                padding:14px;
                border-radius:22px;
                background:rgba(8,11,20,.96);
                border:1px solid rgba(255,255,255,.1);
                box-shadow:var(--shadow);
            }
            .nav-links.is-open{
                display:flex;
            }
            .nav-links a{
                border-radius:14px;
                padding:14px 16px;
            }
            .hero{
                padding-top:18px;
            }
            .hero-inner{
                padding:22px;
            }
            .hero-visual{
                grid-template-columns:1fr;
            }
            .visual-main{
                min-height:280px;
            }
            .stats{
                grid-template-columns:1fr;
            }
            .section{
                padding-top:54px;
            }
            .section-heading{
                align-items:flex-start;
                flex-direction:column;
            }
            .footer-top{
                flex-direction:column;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }
        @media (max-width:520px){
            .container{
                width:min(100% - 24px, var(--container));
            }
            .brand{
                font-size:.98rem;
            }
            .brand-mark{
                width:34px;
                height:34px;
                border-radius:11px;
            }
            .hero-card,
            .highlight,
            .cta-panel{
                border-radius:24px;
            }
            .hero-inner,
            .highlight-inner,
            .cta-inner{
                padding:18px;
            }
            .hero-actions{
                flex-direction:column;
            }
            .btn{
                width:100%;
            }
            .card-grid,
            .scene-grid,
            .mini-grid,
            .cta-form{
                grid-template-columns:1fr;
            }
            .soft-card,
            .panel{
                padding:20px;
                border-radius:22px;
            }
            .copyright{
                flex-direction:column;
            }
        }

/* roulang page: category2 */
:root{
            --bg:#f7f3ef;
            --bg-soft:#fffaf6;
            --surface:#ffffff;
            --surface-2:#fff4ea;
            --text:#241b17;
            --muted:#776a62;
            --subtle:#a1938a;
            --primary:#9d4edd;
            --primary-dark:#6d28d9;
            --primary-soft:#f2e7ff;
            --accent:#ff7a59;
            --accent-soft:#fff0e9;
            --safe:#1fa97a;
            --warning:#c77800;
            --border:rgba(56,38,28,.12);
            --shadow:0 22px 60px rgba(55,35,20,.12);
            --shadow-sm:0 10px 30px rgba(55,35,20,.08);
            --radius:24px;
            --radius-lg:34px;
            --radius-sm:14px;
            --container:1180px;
            --font:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            font-family:var(--font);
            color:var(--text);
            background:
                radial-gradient(circle at 8% 6%, rgba(157,78,221,.16), transparent 32%),
                radial-gradient(circle at 92% 14%, rgba(255,122,89,.14), transparent 30%),
                linear-gradient(180deg,var(--bg) 0%,#fff 54%,var(--bg-soft) 100%);
            line-height:1.7;
            min-height:100vh;
            overflow-x:hidden;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%;height:auto}
        button,input,textarea{font:inherit}
        button{border:0;cursor:pointer;background:none}
        .container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            background:rgba(255,250,246,.84);
            backdrop-filter:blur(18px);
            border-bottom:1px solid var(--border);
        }
        .header-inner{
            height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-weight:900;
            letter-spacing:.02em;
            color:var(--text);
            white-space:nowrap;
        }
        .brand-mark{
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            color:#fff;
            border-radius:14px;
            background:linear-gradient(135deg,var(--primary),var(--accent));
            box-shadow:0 12px 26px rgba(157,78,221,.24);
        }
        .nav-links{
            display:flex;
            align-items:center;
            justify-content:flex-end;
            gap:8px;
        }
        .nav-links a{
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            font-size:15px;
            font-weight:700;
            transition:.22s ease;
        }
        .nav-links a:hover{
            color:var(--primary-dark);
            background:var(--primary-soft);
            transform:translateY(-1px);
        }
        .nav-links a.active{
            color:#fff;
            background:linear-gradient(135deg,var(--primary-dark),var(--primary));
            box-shadow:0 12px 24px rgba(109,40,217,.2);
        }
        .menu-toggle{
            display:none;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid var(--border);
            background:#fff;
            color:var(--text);
        }
        .menu-toggle span{
            display:block;
            width:20px;
            height:2px;
            margin:5px auto;
            background:currentColor;
            border-radius:2px;
            transition:.2s ease;
        }
        .section{padding:82px 0}
        .section-tight{padding:56px 0}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 13px;
            border:1px solid rgba(157,78,221,.22);
            background:rgba(242,231,255,.78);
            color:var(--primary-dark);
            border-radius:999px;
            font-size:13px;
            font-weight:800;
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(255,122,89,.16);
        }
        .hero{
            position:relative;
            padding:86px 0 66px;
            isolation:isolate;
            overflow:hidden;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            z-index:-2;
            background:
                linear-gradient(90deg,rgba(247,243,239,.96) 0%,rgba(247,243,239,.86) 45%,rgba(247,243,239,.68) 100%),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
        }
        .hero::after{
            content:"";
            position:absolute;
            right:-140px;
            bottom:-190px;
            width:520px;
            height:520px;
            border-radius:50%;
            background:rgba(255,122,89,.15);
            filter:blur(8px);
            z-index:-1;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:46px;
            align-items:center;
        }
        .hero-copy h1{
            margin-top:18px;
            max-width:820px;
            font-size:clamp(38px,5vw,66px);
            line-height:1.08;
            letter-spacing:-.05em;
            font-weight:950;
        }
        .hero-copy p{
            margin-top:22px;
            max-width:720px;
            color:var(--muted);
            font-size:18px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:14px;
            margin-top:32px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            min-height:48px;
            padding:13px 20px;
            border-radius:999px;
            font-weight:900;
            transition:.22s ease;
            border:1px solid transparent;
            line-height:1.2;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg,var(--primary-dark),var(--primary));
            box-shadow:0 16px 34px rgba(109,40,217,.22);
        }
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(109,40,217,.28)}
        .btn-secondary{
            background:rgba(255,255,255,.82);
            border-color:var(--border);
            color:var(--text);
        }
        .btn-secondary:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
        .btn:focus-visible,.nav-links a:focus-visible,.faq-question:focus-visible,.menu-toggle:focus-visible{
            outline:3px solid rgba(157,78,221,.28);
            outline-offset:3px;
        }
        .hero-panel{
            position:relative;
            padding:18px;
            border-radius:var(--radius-lg);
            background:rgba(255,255,255,.62);
            border:1px solid rgba(255,255,255,.72);
            box-shadow:var(--shadow);
            backdrop-filter:blur(12px);
        }
        .hero-panel img{
            width:100%;
            aspect-ratio:4/3;
            object-fit:cover;
            border-radius:26px;
        }
        .audit-card{
            margin-top:-58px;
            margin-left:26px;
            width:min(88%,390px);
            position:relative;
            padding:18px;
            border-radius:22px;
            background:rgba(255,255,255,.92);
            border:1px solid var(--border);
            box-shadow:0 20px 46px rgba(36,27,23,.14);
        }
        .audit-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:10px 0;
            border-bottom:1px dashed var(--border);
            color:var(--muted);
            font-weight:700;
        }
        .audit-row:last-child{border-bottom:0}
        .audit-row strong{color:var(--safe)}
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:28px;
            margin-bottom:34px;
        }
        .section-title h2{
            margin-top:12px;
            font-size:clamp(28px,3.2vw,44px);
            line-height:1.15;
            letter-spacing:-.035em;
        }
        .section-title p{
            margin-top:14px;
            max-width:700px;
            color:var(--muted);
            font-size:17px;
        }
        .mini-note{
            max-width:360px;
            padding:16px 18px;
            border-radius:20px;
            background:var(--surface);
            border:1px solid var(--border);
            color:var(--muted);
            box-shadow:var(--shadow-sm);
        }
        .grid-3{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
        }
        .grid-2{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:24px;
        }
        .card{
            background:rgba(255,255,255,.86);
            border:1px solid var(--border);
            border-radius:var(--radius);
            padding:26px;
            box-shadow:var(--shadow-sm);
            transition:.22s ease;
        }
        .card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
            border-color:rgba(157,78,221,.24);
        }
        .icon{
            width:48px;
            height:48px;
            display:grid;
            place-items:center;
            border-radius:16px;
            background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));
            color:var(--primary-dark);
            font-size:22px;
            margin-bottom:18px;
        }
        .card h3{
            font-size:21px;
            line-height:1.25;
            margin-bottom:10px;
        }
        .card p{color:var(--muted)}
        .tag-list{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            padding:7px 11px;
            border-radius:999px;
            background:var(--bg-soft);
            border:1px solid var(--border);
            color:var(--muted);
            font-size:13px;
            font-weight:800;
        }
        .feature-band{
            border-radius:var(--radius-lg);
            overflow:hidden;
            background:linear-gradient(135deg,#2f174c,#6d28d9 58%,#9d4edd);
            color:#fff;
            display:grid;
            grid-template-columns:.9fr 1.1fr;
            box-shadow:var(--shadow);
        }
        .feature-band img{
            height:100%;
            min-height:430px;
            width:100%;
            object-fit:cover;
            mix-blend-mode:screen;
            opacity:.82;
        }
        .feature-content{padding:44px}
        .feature-content h2{
            font-size:clamp(28px,3vw,42px);
            line-height:1.16;
            letter-spacing:-.035em;
            margin-bottom:18px;
        }
        .feature-content p{color:rgba(255,255,255,.82);font-size:17px}
        .check-list{
            list-style:none;
            display:grid;
            gap:14px;
            margin-top:26px;
        }
        .check-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px 16px;
            border-radius:18px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.16);
        }
        .check-list li::before{
            content:"✓";
            flex:0 0 26px;
            width:26px;
            height:26px;
            display:grid;
            place-items:center;
            border-radius:50%;
            background:rgba(255,255,255,.2);
            color:#fff;
            font-weight:900;
        }
        .steps{
            counter-reset:step;
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:18px;
        }
        .step{
            position:relative;
            padding:24px;
            border-radius:var(--radius);
            background:var(--surface);
            border:1px solid var(--border);
            box-shadow:var(--shadow-sm);
        }
        .step::before{
            counter-increment:step;
            content:"0" counter(step);
            display:inline-flex;
            margin-bottom:18px;
            color:var(--primary-dark);
            background:var(--primary-soft);
            border-radius:999px;
            padding:5px 11px;
            font-weight:950;
            font-size:13px;
        }
        .step h3{font-size:19px;margin-bottom:8px}
        .step p{color:var(--muted);font-size:15px}
        .risk-wrap{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:24px;
            align-items:stretch;
        }
        .risk-side{
            padding:30px;
            border-radius:var(--radius);
            background:var(--surface-2);
            border:1px solid rgba(255,122,89,.2);
        }
        .risk-side h2{
            font-size:32px;
            line-height:1.18;
            letter-spacing:-.03em;
            margin:12px 0;
        }
        .risk-side p{color:var(--muted)}
        .risk-items{
            display:grid;
            gap:14px;
        }
        .risk-item{
            display:flex;
            gap:16px;
            align-items:flex-start;
            padding:20px;
            border-radius:22px;
            background:var(--surface);
            border:1px solid var(--border);
            box-shadow:var(--shadow-sm);
        }
        .risk-dot{
            flex:0 0 36px;
            width:36px;
            height:36px;
            display:grid;
            place-items:center;
            border-radius:13px;
            color:#fff;
            background:linear-gradient(135deg,var(--accent),#ffb067);
            font-weight:900;
        }
        .risk-item h3{font-size:18px;margin-bottom:4px}
        .risk-item p{color:var(--muted);font-size:15px}
        .scenario-card{
            min-height:260px;
            position:relative;
            overflow:hidden;
            padding:0;
        }
        .scenario-card img{
            width:100%;
            aspect-ratio:16/9;
            object-fit:cover;
        }
        .scenario-body{padding:22px}
        .scenario-body h3{font-size:20px;margin-bottom:8px}
        .scenario-body p{color:var(--muted)}
        .faq{
            display:grid;
            gap:14px;
        }
        .faq-item{
            border:1px solid var(--border);
            border-radius:20px;
            background:rgba(255,255,255,.88);
            box-shadow:var(--shadow-sm);
            overflow:hidden;
        }
        .faq-question{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:20px 22px;
            text-align:left;
            color:var(--text);
            font-weight:900;
        }
        .faq-question::after{
            content:"+";
            width:30px;
            height:30px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:var(--primary-soft);
            color:var(--primary-dark);
            transition:.2s ease;
            flex:0 0 30px;
        }
        .faq-item.open .faq-question::after{
            content:"−";
            transform:rotate(180deg);
        }
        .faq-answer{
            display:none;
            padding:0 22px 22px;
            color:var(--muted);
        }
        .faq-item.open .faq-answer{display:block}
        .cta{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-lg);
            padding:48px;
            background:
                linear-gradient(135deg,rgba(36,27,23,.84),rgba(109,40,217,.7)),
                url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .cta::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
        }
        .cta-inner{
            position:relative;
            z-index:1;
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:28px;
        }
        .cta h2{
            font-size:clamp(28px,3vw,42px);
            line-height:1.16;
            margin-top:12px;
            max-width:680px;
        }
        .cta p{
            margin-top:14px;
            max-width:640px;
            color:rgba(255,255,255,.84);
            font-size:17px;
        }
        .cta-panel{
            min-width:min(100%,320px);
            padding:20px;
            border-radius:22px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.18);
            backdrop-filter:blur(10px);
        }
        .cta-panel .btn{width:100%}
        .site-footer{
            padding:46px 0 28px;
            border-top:1px solid var(--border);
            background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(247,243,239,.95));
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:30px;
            padding-bottom:26px;
        }
        .footer-brand{
            max-width:420px;
        }
        .footer-brand p{
            margin-top:14px;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:10px 14px;
        }
        .footer-links a{
            color:var(--muted);
            font-weight:700;
            padding:8px 0;
            border-bottom:1px solid transparent;
            transition:.2s ease;
        }
        .footer-links a:hover{
            color:var(--primary-dark);
            border-color:rgba(157,78,221,.35);
        }
        .copyright{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:10px 18px;
            padding-top:18px;
            color:var(--subtle);
            border-top:1px solid var(--border);
            font-size:14px;
        }
        .data-strip{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:16px;
        }
        .data-box{
            padding:22px;
            border-radius:22px;
            background:var(--surface);
            border:1px solid var(--border);
            box-shadow:var(--shadow-sm);
        }
        .data-box strong{
            display:block;
            font-size:30px;
            line-height:1.1;
            color:var(--primary-dark);
            margin-bottom:6px;
        }
        .data-box span{color:var(--muted);font-size:14px}
        .inline-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:#fff;
            border:1px solid var(--border);
            color:var(--muted);
            font-size:13px;
            font-weight:800;
        }
        .badge i{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--safe);
        }
        .text-link{
            color:var(--primary-dark);
            font-weight:800;
        }
        .text-link:hover{text-decoration:underline}
        .sticky-note{
            padding:18px 20px;
            border-radius:20px;
            background:linear-gradient(135deg,rgba(31,169,122,.1),rgba(255,122,89,.09));
            border:1px solid rgba(31,169,122,.18);
            color:#3f6658;
        }
        @media (max-width: 1024px){
            .hero-grid,.risk-wrap,.feature-band,.grid-3,.steps,.data-strip,.grid-2{
                grid-template-columns:1fr;
            }
            .feature-content{padding:32px}
            .cta-inner,.footer-top,.section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .audit-card{margin-left:0}
        }
        @media (max-width: 768px){
            .container{width:min(calc(100% - 28px),var(--container))}
            .header-inner{height:68px}
            .menu-toggle{display:inline-block}
            .nav-links{
                position:absolute;
                top:68px;
                left:14px;
                right:14px;
                display:none;
                flex-direction:column;
                align-items:stretch;
                padding:12px;
                border-radius:24px;
                background:rgba(255,250,246,.98);
                border:1px solid var(--border);
                box-shadow:var(--shadow);
            }
            .nav-links.open{display:flex}
            .nav-links a{justify-content:center;text-align:center}
            .hero{padding:56px 0 42px}
            .section{padding:64px 0}
            .section-tight{padding:40px 0}
            .hero-copy p,.section-title p,.feature-content p{font-size:16px}
            .hero-actions,.footer-links,.copyright{gap:10px}
            .feature-content{padding:28px 22px}
            .cta{padding:28px 22px}
            .card,.step,.data-box,.risk-item{padding:20px}
        }
        @media (max-width: 520px){
            .hero-copy h1{font-size:32px}
            .section-title h2,.feature-content h2,.cta h2,.risk-side h2{font-size:26px}
            .btn{width:100%}
            .hero-actions{flex-direction:column}
            .audit-card{width:100%;margin-top:16px}
            .nav-links{top:66px}
            .footer-top{padding-bottom:18px}
            .copyright{font-size:13px}
        }

/* roulang page: category3 */
:root{
            --bg:#07111d;
            --bg-soft:#0b1728;
            --panel:#101f34;
            --panel-2:#14263f;
            --line:rgba(175, 198, 255, .12);
            --line-strong:rgba(175, 198, 255, .2);
            --text:#edf3ff;
            --muted:#9db0d1;
            --muted-2:#7f93b7;
            --primary:#78d7ff;
            --primary-2:#a78bfa;
            --accent:#ff8ec7;
            --success:#57d39d;
            --warning:#ffd36a;
            --shadow:0 24px 80px rgba(0, 8, 18, .38);
            --shadow-soft:0 12px 36px rgba(0, 8, 18, .22);
            --radius:22px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1180px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:20px;
            --space-5:28px;
            --space-6:36px;
            --space-7:48px;
            --space-8:64px;
            --space-9:84px;
            --transition:.25s ease;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            min-height:100vh;
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
            line-height:1.75;
            background:
                radial-gradient(circle at top left, rgba(120,215,255,.16), transparent 36%),
                radial-gradient(circle at top right, rgba(167,139,250,.14), transparent 32%),
                linear-gradient(180deg, #07111d 0%, #08101b 40%, #091221 100%);
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size:34px 34px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
            opacity:.28;
            z-index:0;
        }
        img{
            display:block;
            max-width:100%;
            height:auto;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
        }
        button,input,textarea,select{
            font:inherit;
            color:inherit;
        }
        button{
            cursor:pointer;
            border:0;
            background:none;
        }
        ::selection{background:rgba(120,215,255,.28); color:#fff}
        :focus-visible{
            outline:3px solid rgba(120,215,255,.55);
            outline-offset:3px;
            border-radius:10px;
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
            position:relative;
            z-index:1;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:30;
            backdrop-filter:blur(18px);
            background:rgba(7,17,29,.7);
            border-bottom:1px solid rgba(175, 198, 255, .12);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding:14px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
        }
        .brand-mark{
            width:36px;
            height:36px;
            display:grid;
            place-items:center;
            border-radius:12px;
            color:#fff;
            background:linear-gradient(135deg, var(--primary), var(--primary-2) 55%, var(--accent));
            box-shadow:0 10px 24px rgba(120,215,255,.18);
            flex:0 0 auto;
        }
        .brand span:last-child{font-size:1.05rem}
        .nav-links{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .nav-links a{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:10px 15px;
            border:1px solid transparent;
            border-radius:999px;
            color:var(--muted);
            background:rgba(255,255,255,.02);
        }
        .nav-links a:hover{
            color:#fff;
            border-color:rgba(120,215,255,.26);
            background:rgba(120,215,255,.08);
            transform:translateY(-1px);
        }
        .nav-links a.active,
        .nav-links a[aria-current="page"]{
            color:#08111d;
            background:linear-gradient(135deg, rgba(120,215,255,.95), rgba(167,139,250,.92));
            box-shadow:0 12px 24px rgba(120,215,255,.15);
        }
        .hero{
            position:relative;
            overflow:hidden;
            padding:66px 0 40px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(7,17,29,.4), rgba(7,17,29,.92)),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            opacity:1;
            z-index:-2;
        }
        .hero::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,17,29,.18), rgba(7,17,29,.84) 82%, rgba(7,17,29,1));
            z-index:-1;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
            gap:28px;
            align-items:end;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border:1px solid rgba(120,215,255,.22);
            border-radius:999px;
            background:rgba(16,31,52,.72);
            color:#d8e9ff;
            font-size:.92rem;
            box-shadow:var(--shadow-soft);
            margin-bottom:18px;
        }
        .eyebrow .dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--success);
            box-shadow:0 0 0 5px rgba(87,211,157,.12);
        }
        h1{
            margin:0;
            font-size:clamp(2.15rem, 5vw, 4.35rem);
            line-height:1.08;
            letter-spacing:-.03em;
        }
        .hero p{
            margin:18px 0 0;
            max-width:58ch;
            color:var(--muted);
            font-size:1.04rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:700;
            letter-spacing:.01em;
            transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
        }
        .btn:hover{
            transform:translateY(-2px);
            box-shadow:var(--shadow-soft);
        }
        .btn-primary{
            color:#07111d;
            background:linear-gradient(135deg, var(--primary), #a9efff);
        }
        .btn-primary:hover{
            background:linear-gradient(135deg, #8de2ff, #c7f4ff);
        }
        .btn-secondary{
            color:#fff;
            border-color:rgba(255,255,255,.14);
            background:rgba(255,255,255,.04);
        }
        .btn-secondary:hover{
            border-color:rgba(120,215,255,.3);
            background:rgba(120,215,255,.08);
        }
        .search-bar{
            display:flex;
            gap:10px;
            margin-top:22px;
            padding:10px;
            border:1px solid rgba(175,198,255,.12);
            border-radius:18px;
            background:rgba(9,18,33,.74);
            box-shadow:var(--shadow-soft);
            max-width:720px;
        }
        .search-bar input{
            flex:1;
            min-width:0;
            height:50px;
            padding:0 16px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--text);
        }
        .search-bar input::placeholder{color:var(--muted-2)}
        .search-bar input:focus{
            border-color:rgba(120,215,255,.34);
            box-shadow:0 0 0 4px rgba(120,215,255,.08);
            outline:none;
        }
        .search-bar .btn{
            flex:0 0 auto;
            min-width:136px;
        }
        .hero-note{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:20px;
        }
        .mini-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 13px;
            border:1px solid rgba(175,198,255,.12);
            border-radius:999px;
            background:rgba(255,255,255,.04);
            color:#dce7fb;
            font-size:.93rem;
        }
        .mini-pill strong{color:#fff}
        .hero-visual{
            display:grid;
            gap:14px;
        }
        .visual-shell{
            padding:14px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(18,34,55,.88), rgba(11,21,38,.88));
            border:1px solid rgba(175,198,255,.12);
            box-shadow:var(--shadow);
            backdrop-filter:blur(8px);
        }
        .visual-mosaic{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:12px;
            min-height:390px;
        }
        .visual-card{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background:var(--panel);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .visual-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            filter:saturate(1.02) contrast(1.04);
            transition:transform .45s ease;
        }
        .visual-card:hover img{transform:scale(1.03)}
        .visual-card .overlay{
            position:absolute;
            inset:auto 0 0 0;
            padding:16px 16px 14px;
            background:linear-gradient(180deg, transparent, rgba(7,17,29,.8));
        }
        .visual-card .overlay strong{
            display:block;
            font-size:1rem;
            margin-bottom:4px;
        }
        .visual-card .overlay span{
            color:#d4e1f7;
            font-size:.92rem;
        }
        .visual-stack{
            display:grid;
            gap:12px;
        }
        .visual-stack .visual-card{min-height:184px}
        .visual-large{min-height:388px}
        .section{
            padding:var(--space-9) 0;
            position:relative;
        }
        .section + .section{
            padding-top:0;
        }
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:26px;
        }
        .section-title{
            max-width:720px;
        }
        .section-title .label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid rgba(175,198,255,.14);
            background:rgba(255,255,255,.03);
            color:#dce7fb;
            font-size:.9rem;
            margin-bottom:12px;
        }
        .section-title h2{
            margin:0;
            font-size:clamp(1.55rem, 2.5vw, 2.35rem);
            line-height:1.15;
            letter-spacing:-.02em;
        }
        .section-title p{
            margin:12px 0 0;
            color:var(--muted);
            max-width:68ch;
        }
        .subtle-link{
            color:#d9e7ff;
            border-bottom:1px solid rgba(120,215,255,.35);
            padding-bottom:2px;
        }
        .subtle-link:hover{color:#fff; border-color:rgba(255,255,255,.7)}
        .grid-3{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .grid-2{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:18px;
        }
        .card{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius);
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(18,33,54,.94), rgba(12,24,41,.94));
            box-shadow:var(--shadow-soft);
        }
        .card::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%);
            pointer-events:none;
        }
        .card:hover{
            border-color:rgba(120,215,255,.22);
            transform:translateY(-3px);
            box-shadow:0 18px 44px rgba(0,8,18,.3);
        }
        .card{
            transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .card-body{
            padding:22px;
            position:relative;
            z-index:1;
        }
        .card-media{
            height:182px;
            border-bottom:1px solid rgba(255,255,255,.06);
            overflow:hidden;
        }
        .card-media img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .card h3{
            margin:0;
            font-size:1.16rem;
            line-height:1.35;
        }
        .card p{
            margin:10px 0 0;
            color:var(--muted);
        }
        .card .meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:16px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(175,198,255,.12);
            color:#d8e4f9;
            font-size:.88rem;
        }
        .tag.success{background:rgba(87,211,157,.12); border-color:rgba(87,211,157,.2); color:#d8fff0}
        .tag.primary{background:rgba(120,215,255,.12); border-color:rgba(120,215,255,.2); color:#daf6ff}
        .tag.accent{background:rgba(255,142,199,.12); border-color:rgba(255,142,199,.18); color:#ffe0ef}
        .feature-card{
            padding:24px;
        }
        .feature-icon{
            width:50px;
            height:50px;
            border-radius:16px;
            display:grid;
            place-items:center;
            color:#06111d;
            font-size:1.2rem;
            background:linear-gradient(135deg, rgba(120,215,255,.95), rgba(255,255,255,.94));
            box-shadow:0 14px 30px rgba(120,215,255,.12);
            margin-bottom:16px;
        }
        .feature-card ul,
        .check-list,
        .bullet-list{
            list-style:none;
            margin:16px 0 0;
            padding:0;
        }
        .feature-card li,
        .check-list li,
        .bullet-list li{
            position:relative;
            padding-left:26px;
            color:#dce7fb;
        }
        .feature-card li + li,
        .check-list li + li,
        .bullet-list li + li{
            margin-top:10px;
        }
        .feature-card li::before,
        .check-list li::before,
        .bullet-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:.72em;
            width:10px;
            height:10px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            box-shadow:0 0 0 4px rgba(120,215,255,.08);
            transform:translateY(-50%);
        }
        .split-panel{
            display:grid;
            grid-template-columns:minmax(0,1.02fr) minmax(300px,.98fr);
            gap:18px;
            align-items:stretch;
        }
        .panel{
            border-radius:var(--radius);
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(16,31,52,.95), rgba(10,21,36,.95));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .panel-body{padding:26px}
        .panel h3{
            margin:0;
            font-size:1.28rem;
        }
        .panel p{
            margin:12px 0 0;
            color:var(--muted);
        }
        .check-list li{
            color:#eef5ff;
        }
        .check-list li span{
            color:var(--muted);
        }
        .step-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
            margin-top:22px;
        }
        .step{
            padding:20px;
            border-radius:20px;
            border:1px solid rgba(175,198,255,.12);
            background:rgba(255,255,255,.03);
            position:relative;
        }
        .step .num{
            width:38px;
            height:38px;
            border-radius:12px;
            display:grid;
            place-items:center;
            font-weight:800;
            color:#07111d;
            background:linear-gradient(135deg, var(--warning), #fff2b0);
            margin-bottom:14px;
        }
        .step h4{
            margin:0;
            font-size:1.02rem;
        }
        .step p{
            margin:10px 0 0;
            color:var(--muted);
        }
        .story-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .story-card{
            overflow:hidden;
        }
        .story-card .card-media{
            height:220px;
        }
        .story-card .story-foot{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            margin-top:16px;
        }
        .story-foot small{
            color:var(--muted-2);
        }
        .story-card .btn{
            min-height:40px;
            padding:0 14px;
            font-size:.92rem;
        }
        .privacy-banner{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            border:1px solid rgba(120,215,255,.16);
            background:
                linear-gradient(135deg, rgba(7,17,29,.2), rgba(7,17,29,.88)),
                url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .privacy-banner .panel-body{
            display:grid;
            grid-template-columns:minmax(0,1fr) minmax(280px,.84fr);
            gap:18px;
            align-items:center;
            min-height:330px;
        }
        .privacy-copy{
            max-width:62ch;
        }
        .privacy-copy .chips{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .privacy-copy .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.12);
            color:#e9f2ff;
        }
        .privacy-side{
            padding:18px;
            border-radius:22px;
            background:rgba(7,17,29,.42);
            border:1px solid rgba(255,255,255,.1);
        }
        .privacy-side .stat{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:14px 0;
        }
        .privacy-side .stat + .stat{
            border-top:1px solid rgba(255,255,255,.08);
        }
        .privacy-side .badge-num{
            width:32px;
            height:32px;
            border-radius:10px;
            display:grid;
            place-items:center;
            font-weight:800;
            background:rgba(120,215,255,.14);
            color:#dff6ff;
            flex:0 0 auto;
        }
        .privacy-side strong{display:block; margin-bottom:4px}
        .privacy-side span{color:var(--muted)}
        .faq{
            display:grid;
            gap:14px;
        }
        details.faq-item{
            border-radius:20px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(16,31,52,.95), rgba(10,21,36,.95));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        details.faq-item[open]{
            border-color:rgba(120,215,255,.22);
        }
        .faq-item summary{
            list-style:none;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:20px 22px;
            cursor:pointer;
            font-weight:700;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{
            content:"+";
            width:34px;
            height:34px;
            display:grid;
            place-items:center;
            border-radius:12px;
            background:rgba(255,255,255,.05);
            color:#dce7fb;
            flex:0 0 auto;
            transition:transform var(--transition), background var(--transition);
        }
        .faq-item[open] summary::after{
            content:"–";
            transform:rotate(0deg);
            background:rgba(120,215,255,.12);
        }
        .faq-item .answer{
            padding:0 22px 20px;
            color:var(--muted);
        }
        .cta{
            padding:0 0 76px;
        }
        .cta-box{
            position:relative;
            overflow:hidden;
            border-radius:30px;
            border:1px solid rgba(120,215,255,.18);
            background:
                linear-gradient(135deg, rgba(7,17,29,.2), rgba(7,17,29,.88)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .cta-inner{
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
            gap:20px;
            align-items:center;
            padding:34px;
        }
        .cta h2{
            margin:0;
            font-size:clamp(1.5rem, 2.6vw, 2.4rem);
            line-height:1.18;
        }
        .cta p{
            margin:12px 0 0;
            color:#d6e4fb;
            max-width:66ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        .info-box{
            border-radius:22px;
            padding:18px;
            background:rgba(7,17,29,.44);
            border:1px solid rgba(255,255,255,.12);
            color:#eef5ff;
        }
        .info-box p{
            margin:0;
            color:#cfdcf5;
        }
        .info-box strong{
            display:block;
            margin-bottom:8px;
            font-size:1rem;
        }
        .site-footer{
            position:relative;
            z-index:1;
            padding:26px 0 30px;
            border-top:1px solid rgba(175,198,255,.12);
            background:rgba(6,13,23,.85);
            backdrop-filter:blur(14px);
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:24px;
            padding-bottom:20px;
        }
        .footer-brand{
            max-width:420px;
        }
        .footer-brand .brand{margin-bottom:12px}
        .footer-brand p{
            margin:0;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:10px 12px;
        }
        .footer-links a{
            color:#d8e4f8;
            padding:8px 10px;
            border-radius:10px;
            border:1px solid transparent;
        }
        .footer-links a:hover{
            border-color:rgba(120,215,255,.18);
            background:rgba(255,255,255,.04);
            color:#fff;
        }
        .copyright{
            display:flex;
            flex-wrap:wrap;
            gap:10px 18px;
            padding-top:18px;
            border-top:1px solid rgba(175,198,255,.1);
            color:var(--muted-2);
            font-size:.94rem;
        }
        .copyright span:first-child{color:#dfe9fb}
        .muted{
            color:var(--muted);
        }
        .compact{
            font-size:.95rem;
        }
        .anchor{
            position:absolute;
            top:-90px;
        }
        @media (max-width: 1080px){
            .hero-grid,
            .split-panel,
            .privacy-banner .panel-body,
            .cta-inner{
                grid-template-columns:1fr;
            }
            .visual-mosaic{
                min-height:unset;
                grid-template-columns:1fr;
            }
            .visual-large,
            .visual-stack .visual-card{
                min-height:240px;
            }
            .grid-3,
            .story-grid,
            .step-grid{
                grid-template-columns:repeat(2,minmax(0,1fr));
            }
            .cta-actions{
                justify-content:flex-start;
            }
        }
        @media (max-width: 768px){
            .header-inner{
                flex-direction:column;
                align-items:flex-start;
            }
            .nav-links{
                width:100%;
                justify-content:flex-start;
                overflow-x:auto;
                padding-bottom:2px;
                flex-wrap:nowrap;
                -webkit-overflow-scrolling:touch;
            }
            .nav-links a{white-space:nowrap}
            .hero{
                padding:44px 0 28px;
            }
            .section{
                padding:52px 0;
            }
            .section-head{
                align-items:flex-start;
                flex-direction:column;
            }
            .grid-3,
            .story-grid,
            .step-grid,
            .grid-2{
                grid-template-columns:1fr;
            }
            .search-bar{
                flex-direction:column;
            }
            .search-bar .btn{
                width:100%;
            }
            .cta-inner,
            .privacy-banner .panel-body,
            .panel-body{
                padding:22px;
            }
            .footer-top{
                flex-direction:column;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .hero-actions{
                flex-direction:column;
            }
            .btn{
                width:100%;
            }
            h1{
                font-size:2.1rem;
            }
            .card-body,
            .feature-card,
            .step,
            .faq-item summary,
            .faq-item .answer{
                padding-left:18px;
                padding-right:18px;
            }
            .card-media{
                height:172px;
            }
            .story-card .card-media{
                height:192px;
            }
        }

/* roulang page: category4 */
:root{
            --bg:#07111f;
            --bg-soft:#0d1728;
            --panel:#111c2f;
            --panel-2:#16233a;
            --card:#132038;
            --card-strong:#182845;
            --line:rgba(255,255,255,.08);
            --line-strong:rgba(255,255,255,.14);
            --text:#eef4ff;
            --muted:#a9b7d3;
            --muted-2:#8896b2;
            --accent:#7d5cff;
            --accent-2:#37d5c5;
            --accent-3:#ffb86b;
            --danger:#ff6b8b;
            --shadow:0 24px 70px rgba(0,0,0,.35);
            --shadow-soft:0 14px 36px rgba(0,0,0,.24);
            --radius:24px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1180px;
            --space:24px;
            --space-lg:36px;
            --space-xl:56px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(125,92,255,.18), transparent 26%),
                radial-gradient(circle at top right, rgba(55,213,197,.12), transparent 22%),
                linear-gradient(180deg, #060c18 0%, #0a1322 35%, #07111f 100%);
            line-height:1.7;
            letter-spacing:.01em;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%;height:auto}
        button,input,textarea,select{font:inherit}
        button{border:0;background:none}
        :focus-visible{outline:3px solid rgba(55,213,197,.7);outline-offset:3px}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            backdrop-filter: blur(18px);
            background:rgba(7,17,31,.72);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:16px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            color:var(--text);
            font-weight:800;
            letter-spacing:.03em;
            white-space:nowrap;
        }
        .brand-mark{
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            border-radius:14px;
            background:linear-gradient(135deg, rgba(125,92,255,.95), rgba(55,213,197,.9));
            box-shadow:0 10px 24px rgba(125,92,255,.25);
            color:#fff;
            font-size:18px;
        }
        .brand span:last-child{
            font-size:1.05rem;
        }
        .nav-links{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:10px;
            margin:0;
            padding:0;
        }
        .nav-links a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:10px 16px;
            border:1px solid transparent;
            border-radius:999px;
            color:var(--muted);
            background:rgba(255,255,255,.03);
            transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
        }
        .nav-links a:hover{
            color:var(--text);
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.1);
            transform:translateY(-1px);
        }
        .nav-links a.active{
            color:#fff;
            background:linear-gradient(135deg, rgba(125,92,255,.95), rgba(55,213,197,.78));
            box-shadow:0 10px 28px rgba(125,92,255,.24);
        }

        .site-main{
            padding-bottom:var(--space-xl);
        }
        .hero{
            position:relative;
            overflow:hidden;
            padding:34px 0 24px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(7,17,31,.52), rgba(7,17,31,.86)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            opacity:.95;
            z-index:-2;
        }
        .hero::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 20%, rgba(55,213,197,.18), transparent 24%),
                radial-gradient(circle at 82% 14%, rgba(125,92,255,.24), transparent 22%),
                linear-gradient(180deg, rgba(7,17,31,.2), rgba(7,17,31,.6));
            z-index:-1;
        }
        .hero-grid{
            display:grid;
            grid-template-columns: 1.12fr .88fr;
            gap:24px;
            align-items:stretch;
        }
        .hero-copy,
        .hero-panel,
        .section-card,
        .cta-box,
        .faq-card,
        .info-card{
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
            box-shadow:var(--shadow-soft);
            backdrop-filter: blur(10px);
        }
        .hero-copy{
            border-radius:var(--radius);
            padding:34px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:24px;
            min-height:100%;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:10px;
            width:max-content;
            padding:8px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.05);
            color:#d7e1f7;
            font-size:.92rem;
            letter-spacing:.04em;
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent-2), var(--accent));
            box-shadow:0 0 0 6px rgba(55,213,197,.14);
        }
        h1,h2,h3,h4,p{margin:0}
        h1{
            font-size:clamp(2.2rem, 4.1vw, 4.35rem);
            line-height:1.08;
            letter-spacing:-.03em;
            max-width:11ch;
        }
        .hero-copy p{
            color:var(--muted);
            font-size:1.03rem;
            max-width:58ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 20px;
            border-radius:999px;
            border:1px solid transparent;
            cursor:pointer;
            transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
            font-weight:700;
            letter-spacing:.01em;
        }
        .btn:hover{
            transform:translateY(-1px);
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--accent), #9b7dff 55%, var(--accent-2));
            box-shadow:0 16px 30px rgba(125,92,255,.25);
        }
        .btn-primary:hover{
            box-shadow:0 20px 34px rgba(125,92,255,.32);
        }
        .btn-ghost{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.1);
        }
        .btn-ghost:hover{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.16);
        }
        .chip-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 13px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:#dbe6fd;
            font-size:.92rem;
        }
        .chip i{
            width:8px;height:8px;border-radius:50%;
            display:inline-block;
            background:var(--accent-2);
            box-shadow:0 0 0 5px rgba(55,213,197,.12);
        }
        .hero-panel{
            border-radius:var(--radius);
            padding:16px;
            overflow:hidden;
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .hero-media{
            position:relative;
            overflow:hidden;
            border-radius:20px;
            min-height:220px;
            aspect-ratio: 16 / 10;
            background:
                linear-gradient(180deg, rgba(7,17,31,.16), rgba(7,17,31,.52));
        }
        .hero-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            border-radius:20px;
            filter:saturate(1.02) contrast(1.05);
        }
        .hero-media::after{
            content:"";
            position:absolute;
            inset:0;
            border-radius:20px;
            background:linear-gradient(180deg, rgba(7,17,31,.04), rgba(7,17,31,.55));
            pointer-events:none;
        }
        .panel-body{
            display:flex;
            flex-direction:column;
            gap:14px;
            padding:4px 6px 8px;
        }
        .panel-body h2{
            font-size:1.32rem;
            line-height:1.25;
        }
        .mini-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .mini-list li{
            position:relative;
            padding-left:24px;
            color:var(--muted);
        }
        .mini-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:.55em;
            width:10px;
            height:10px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent-2), var(--accent));
            box-shadow:0 0 0 5px rgba(55,213,197,.12);
        }
        .mini-check{
            margin-top:2px;
            padding:14px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
        }
        .mini-check label{
            display:block;
            margin-bottom:10px;
            font-size:.92rem;
            color:#dce5fb;
            letter-spacing:.02em;
        }
        .form-row{
            display:grid;
            grid-template-columns:1fr auto;
            gap:10px;
        }
        .mini-check input{
            width:100%;
            min-height:48px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(4,10,18,.46);
            color:var(--text);
            padding:0 14px;
            transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .mini-check input::placeholder{color:#7f8faa}
        .mini-check input:focus{
            border-color:rgba(55,213,197,.45);
            box-shadow:0 0 0 4px rgba(55,213,197,.12);
            background:rgba(4,10,18,.64);
            outline:none;
        }
        .mini-check button{
            min-width:116px;
        }
        .form-hint{
            margin-top:10px;
            font-size:.9rem;
            color:var(--muted-2);
        }

        .section{
            padding:28px 0;
        }
        .section-soft{
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
            border-top:1px solid rgba(255,255,255,.04);
            border-bottom:1px solid rgba(255,255,255,.04);
        }
        .section-head{
            display:flex;
            flex-direction:column;
            gap:10px;
            margin-bottom:20px;
        }
        .section-label{
            width:max-content;
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
            color:#dce5fb;
            font-size:.88rem;
        }
        .section-label::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            background:var(--accent-2);
        }
        .section-head h2{
            font-size:clamp(1.5rem, 2.4vw, 2.2rem);
            line-height:1.18;
            letter-spacing:-.02em;
        }
        .section-head p{
            max-width:70ch;
            color:var(--muted);
        }

        .grid-4{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:16px;
        }
        .grid-2{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:18px;
        }
        .section-card,
        .faq-card,
        .info-card{
            border-radius:var(--radius-sm);
            padding:22px;
            transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .section-card:hover,
        .info-card:hover,
        .faq-card:hover{
            transform:translateY(-2px);
            border-color:rgba(255,255,255,.16);
            box-shadow:var(--shadow);
        }
        .card-icon{
            width:44px;
            height:44px;
            border-radius:15px;
            display:grid;
            place-items:center;
            margin-bottom:14px;
            background:linear-gradient(135deg, rgba(125,92,255,.22), rgba(55,213,197,.18));
            border:1px solid rgba(255,255,255,.08);
            color:#dff8f3;
            font-size:1rem;
        }
        .section-card h3,
        .info-card h3{
            font-size:1.08rem;
            line-height:1.35;
            margin-bottom:8px;
        }
        .section-card p,
        .info-card p{
            color:var(--muted);
            font-size:.96rem;
        }
        .tag-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:4px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:#b9c8e3;
            font-size:.78rem;
        }
        .split-section{
            display:grid;
            grid-template-columns:.92fr 1.08fr;
            gap:24px;
            align-items:stretch;
        }
        .feature-image{
            position:relative;
            overflow:hidden;
            min-height:360px;
            border-radius:var(--radius);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .feature-image img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .feature-image::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(7,17,31,.04), rgba(7,17,31,.72));
        }
        .image-caption{
            position:absolute;
            z-index:1;
            left:22px;
            right:22px;
            bottom:20px;
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:14px;
        }
        .image-caption strong{
            display:block;
            max-width:18ch;
            font-size:1.35rem;
            line-height:1.25;
        }
        .image-caption span{
            color:#cfdaef;
            font-size:.86rem;
            white-space:nowrap;
        }
        .info-stack{
            display:grid;
            gap:14px;
        }
        .info-card{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:16px;
            align-items:start;
        }
        .info-card .card-icon{
            margin:0;
        }
        .number-list{
            display:grid;
            gap:12px;
            margin-top:4px;
        }
        .number-item{
            display:grid;
            grid-template-columns:36px 1fr;
            gap:12px;
            align-items:start;
            padding:14px 0;
            border-bottom:1px solid var(--line);
        }
        .number-item:last-child{border-bottom:0;padding-bottom:0}
        .number{
            width:32px;
            height:32px;
            display:grid;
            place-items:center;
            border-radius:11px;
            background:rgba(125,92,255,.16);
            border:1px solid rgba(125,92,255,.3);
            color:#dcd3ff;
            font-weight:800;
            font-size:.9rem;
        }
        .number-item strong{
            display:block;
            margin-bottom:3px;
            font-size:1rem;
        }
        .number-item p{
            color:var(--muted);
            font-size:.93rem;
        }
        .notice{
            display:flex;
            align-items:flex-start;
            gap:14px;
            padding:18px 20px;
            border-radius:var(--radius-sm);
            border:1px solid rgba(255,184,107,.22);
            background:rgba(255,184,107,.07);
            color:#f7ddbd;
        }
        .notice-icon{
            flex:0 0 auto;
            width:30px;
            height:30px;
            display:grid;
            place-items:center;
            border-radius:10px;
            background:rgba(255,184,107,.18);
            color:var(--accent-3);
            font-weight:800;
        }
        .notice p{
            color:#d8c4aa;
            font-size:.94rem;
        }
        .faq-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:14px;
        }
        .faq-card summary{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            cursor:pointer;
            list-style:none;
            font-weight:700;
            color:#edf3ff;
        }
        .faq-card summary::-webkit-details-marker{display:none}
        .faq-card summary::after{
            content:"+";
            flex:0 0 auto;
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:9px;
            background:rgba(255,255,255,.06);
            color:var(--accent-2);
            font-size:1.2rem;
            transition:transform .2s ease, background .2s ease;
        }
        .faq-card[open] summary::after{
            content:"−";
            background:rgba(55,213,197,.12);
        }
        .faq-card p{
            margin-top:13px;
            padding-top:13px;
            border-top:1px solid var(--line);
            color:var(--muted);
            font-size:.94rem;
        }
        .cta-box{
            position:relative;
            overflow:hidden;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
            padding:30px;
            border-radius:var(--radius);
            background:
                radial-gradient(circle at 90% 20%, rgba(55,213,197,.19), transparent 28%),
                radial-gradient(circle at 10% 90%, rgba(125,92,255,.22), transparent 34%),
                rgba(255,255,255,.045);
        }
        .cta-box::before{
            content:"";
            position:absolute;
            width:220px;
            height:220px;
            right:-90px;
            bottom:-130px;
            border:1px solid rgba(255,255,255,.14);
            border-radius:50%;
        }
        .cta-content{
            position:relative;
            z-index:1;
        }
        .cta-content h2{
            font-size:clamp(1.45rem,2.5vw,2.1rem);
            line-height:1.2;
            margin-bottom:8px;
        }
        .cta-content p{
            color:var(--muted);
            max-width:60ch;
        }
        .cta-box .btn{
            position:relative;
            z-index:1;
            flex:0 0 auto;
        }
        .site-footer{
            border-top:1px solid rgba(255,255,255,.08);
            background:rgba(3,9,17,.55);
            padding:34px 0 20px;
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:32px;
            padding-bottom:26px;
        }
        .footer-brand{
            max-width:390px;
        }
        .footer-brand .brand{
            margin-bottom:12px;
        }
        .footer-brand p{
            color:var(--muted-2);
            font-size:.91rem;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:10px 18px;
        }
        .footer-links a{
            color:var(--muted);
            font-size:.9rem;
            transition:color .2s ease;
        }
        .footer-links a:hover{
            color:var(--accent-2);
        }
        .copyright{
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:18px;
            border-top:1px solid var(--line);
            color:#7887a3;
            font-size:.82rem;
        }
        @media (max-width:1024px){
            .hero-grid{grid-template-columns:1fr .85fr}
            .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
            .split-section{grid-template-columns:1fr}
            .feature-image{min-height:300px}
        }
        @media (max-width:768px){
            .header-inner{
                align-items:flex-start;
                flex-direction:column;
            }
            .nav-links{
                width:100%;
                justify-content:flex-start;
                overflow-x:auto;
                flex-wrap:nowrap;
                padding-bottom:3px;
                scrollbar-width:none;
            }
            .nav-links::-webkit-scrollbar{display:none}
            .nav-links a{
                flex:0 0 auto;
                padding:9px 14px;
                font-size:.9rem;
            }
            .hero{padding-top:22px}
            .hero-grid{grid-template-columns:1fr}
            .hero-copy{padding:26px}
            h1{max-width:14ch}
            .hero-panel{padding:12px}
            .section{padding:23px 0}
            .cta-box{
                align-items:flex-start;
                flex-direction:column;
                padding:25px;
            }
            .footer-top{
                flex-direction:column;
                gap:22px;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }
        @media (max-width:520px){
            .container{width:min(var(--container),calc(100% - 22px))}
            .brand-mark{width:34px;height:34px;border-radius:12px}
            .brand span:last-child{font-size:.98rem}
            .hero-copy{padding:22px}
            h1{font-size:clamp(2rem,12vw,3rem)}
            .hero-copy p{font-size:.96rem}
            .hero-actions,
            .hero-actions .btn{width:100%}
            .grid-4,
            .grid-2,
            .faq-grid{grid-template-columns:1fr}
            .section-card,
            .faq-card,
            .info-card{padding:18px}
            .form-row{grid-template-columns:1fr}
            .mini-check button{width:100%}
            .feature-image{min-height:250px}
            .image-caption{
                left:16px;
                right:16px;
                bottom:16px;
                flex-direction:column;
                align-items:flex-start;
            }
            .image-caption span{white-space:normal}
            .notice{padding:15px}
            .copyright{
                align-items:flex-start;
                flex-direction:column;
                gap:8px;
            }
        }