/* roulang page: index */
:root{
            --ink:#171318;
            --ink-soft:#211b22;
            --paper:#f4efe8;
            --paper-deep:#e9dfd4;
            --cream:#fffaf4;
            --text:#312a31;
            --muted:#756b73;
            --line:rgba(49,42,49,.14);
            --copper:#b66d4d;
            --copper-dark:#8f4d37;
            --amber:#d5a75d;
            --plum:#392535;
            --radius:16px;
            --shadow:0 18px 45px rgba(40,25,30,.10);
            --ease:all .28s ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--text);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.8}
        a{color:inherit;text-decoration:none;transition:var(--ease)}
        img{display:block;max-width:100%;height:auto}
        button,input,select{font:inherit}
        button:focus,a:focus,input:focus,select:focus{outline:3px solid rgba(182,109,77,.35);outline-offset:3px}
        .container{width:min(1240px,calc(100% - 48px));margin:0 auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(23,19,24,.96);border-bottom:1px solid rgba(255,255,255,.12)}
        .nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:flex;align-items:center;gap:12px;color:#fffaf4;font-weight:800;letter-spacing:-.04em;font-size:20px;white-space:nowrap}
        .brand-mark{width:34px;height:34px;border:1px solid var(--copper);display:grid;place-items:center;color:var(--amber);font-size:13px}
        .main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
        .main-nav a{color:#d5c9cc;font-size:14px;padding:26px 0;position:relative}
        .main-nav a:hover,.main-nav a.active{color:#fff}
        .main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--copper)}
        .nav-cta,.button.primary{background:var(--copper);color:#fffaf4;border:1px solid var(--copper);padding:11px 18px;border-radius:7px;font-weight:700;display:inline-block}
        .nav-cta:hover,.button.primary:hover{background:var(--copper-dark);transform:translateY(-2px)}
        .hero{position:relative;min-height:650px;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
        .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,19,24,.95) 0%,rgba(23,19,24,.75) 48%,rgba(23,19,24,.22) 100%),url('/assets/images/d75eb558ba89ab3f.jpg') center/cover}
        .hero-inner{position:relative;z-index:1;padding:100px 0 90px}
        .eyebrow{color:var(--amber);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
        h1,h2,h3{font-weight:800;letter-spacing:-.055em;line-height:1.2;margin:0;color:var(--ink)}
        .hero h1{max-width:760px;color:#fffaf4;font-size:clamp(42px,6vw,76px);margin:18px 0 24px}
        .hero-copy{max-width:700px;color:#e4d9d5;font-size:18px;line-height:1.9;margin:0 0 32px}
        .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
        .button.secondary{display:inline-block;padding:11px 18px;border:1px solid rgba(255,250,244,.45);color:#fffaf4;border-radius:7px}
        .button.secondary:hover{border-color:#fff;background:rgba(255,255,255,.1)}
        .trust-line{display:flex;gap:22px;flex-wrap:wrap;margin-top:38px;color:#c5b7b8;font-size:13px}
        .trust-line span:before{content:"•";color:var(--amber);margin-right:8px}
        .notice-strip{background:var(--plum);color:#e8dcda;padding:12px 0;font-size:13px}
        section{padding:92px 0;border-bottom:1px solid var(--line)}
        .section-head{max-width:720px;margin-bottom:36px}
        .section-head h2{font-size:clamp(30px,4vw,48px);margin:10px 0 16px}
        .section-head p{color:var(--muted);margin:0;line-height:1.85}
        .dark-section{background:var(--ink);color:#f8eee8}
        .dark-section h2,.dark-section h3{color:#fffaf4}
        .dark-section .section-head p{color:#b9aaae}
        .feature-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .feature-item{padding:28px 26px;border-right:1px solid var(--line)}
        .feature-item:last-child{border-right:0}
        .number{color:var(--copper);font-weight:800;font-size:13px;letter-spacing:.12em}
        .feature-item h3{font-size:22px;margin:14px 0 9px}
        .feature-item p,.topic-card p,.list-item p,.step p,.article p{color:var(--muted);font-size:14px;margin:0}
        .tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
        .tag{display:inline-flex;border:1px solid var(--line);padding:9px 14px;border-radius:30px;color:var(--plum);font-size:14px;background:rgba(255,255,255,.28)}
        .tag:hover{border-color:var(--copper);color:var(--copper-dark);transform:translateY(-2px)}
        .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
        .process{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--cream);border:1px solid var(--line)}
        .step{min-height:250px;padding:30px;border-right:1px solid var(--line)}
        .step:last-child{border-right:0}
        .step-no{font-size:42px;color:var(--copper);font-weight:800;line-height:1}
        .step h3{font-size:21px;margin:24px 0 10px}
        .topic-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:16px}
        .topic-card{position:relative;min-height:260px;padding:26px;background:var(--cream);border:1px solid var(--line);overflow:hidden}
        .topic-card.featured{grid-row:span 2;min-height:536px;color:#fff;background:linear-gradient(180deg,rgba(32,21,28,.08),rgba(32,21,28,.9)),url('/assets/images/d37ed17c1a1275b6.jpg') center/cover}
        .topic-card.featured h3,.topic-card.featured p{color:#fffaf4}
        .topic-card h3{font-size:23px;margin:20px 0 10px}
        .topic-meta{font-size:12px;color:var(--copper-dark);letter-spacing:.06em}
        .topic-card.featured .topic-meta{color:#f2c589}
        .text-link{display:inline-block;color:var(--copper-dark);font-weight:700;font-size:14px;margin-top:22px}
        .text-link:hover{color:var(--plum);letter-spacing:.02em}
        .content-list{border-top:1px solid var(--line)}
        .list-item{display:grid;grid-template-columns:110px 1fr 130px 86px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
        .list-date{font-size:13px;color:var(--muted)}
        .list-item h3{font-size:19px;margin:0 0 5px}
        .status{display:inline-block;padding:4px 9px;border-radius:4px;background:#ead9c6;color:var(--copper-dark);font-size:12px;white-space:nowrap}
        .list-type{font-size:13px;color:var(--muted)}
        .filter-panel{background:var(--ink-soft);padding:28px;color:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
        .filter-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:12px}
        .filter-panel label{display:block;color:#c9b9bb;font-size:12px;margin-bottom:6px}
        .filter-panel input,.filter-panel select{width:100%;height:46px;border:1px solid rgba(255,255,255,.18);background:#302730;color:#fff;border-radius:6px;padding:0 13px}
        .filter-button{height:46px;border:1px solid var(--copper);background:var(--copper);color:white;padding:0 20px;border-radius:6px;cursor:pointer}
        .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.15);margin-top:28px}
        .metric{padding:28px;background:var(--ink)}
        .metric strong{font-size:38px;color:var(--amber);display:block;line-height:1.1}
        .metric span{color:#c5b7b8;font-size:13px}
        .comparison{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
        .compare-col{padding:30px}
        .compare-col:first-child{background:#e9dfd4}
        .compare-col:last-child{background:var(--plum);color:#fff}
        .compare-col h3{font-size:22px;margin-bottom:22px}
        .compare-col:last-child h3{color:#fff}
        .compare-col ul{list-style:none;margin:0;padding:0}
        .compare-col li{padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
        .compare-col:last-child li{border-color:rgba(255,255,255,.18);color:#e6d8d8}
        .article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .article{padding:24px;background:var(--cream);border:1px solid var(--line)}
        .article .date{color:var(--copper-dark);font-size:12px}
        .article h3{font-size:20px;margin:14px 0 10px}
        .guide-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
        .guide-card{padding:22px 16px;background:var(--cream);border-top:3px solid var(--copper)}
        .guide-card strong{display:block;color:var(--copper);font-size:24px;margin-bottom:12px}
        .guide-card p{font-size:14px;color:var(--muted);margin:0}
        .accordion{margin:0;background:transparent}
        .accordion-title{background:var(--cream);border:1px solid var(--line);color:var(--ink);font-weight:700;padding:18px 22px}
        .accordion-title:hover{background:#eee3d8}
        .accordion-content{border:1px solid var(--line);border-top:0;background:#fffaf4;color:var(--muted);padding:18px 22px;font-size:14px}
        .callout{margin:0;background:#f1dfbb;border:1px solid #d8b879;color:#5d452c;border-radius:var(--radius);padding:28px}
        .callout h3{font-size:24px;margin-bottom:8px}
        .guard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
        .guard{padding:22px;background:var(--cream);border:1px solid var(--line);border-radius:10px}
        .guard strong{display:block;margin-bottom:8px}
        .guard span{font-size:13px;color:var(--muted)}
        .fixed-cta{position:fixed;z-index:19;bottom:0;left:0;right:0;background:rgba(23,19,24,.97);border-top:1px solid rgba(255,255,255,.14);padding:12px 0}
        .fixed-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
        .fixed-inner p{margin:0;color:#e7dada;font-size:14px}
        .fixed-actions{display:flex;gap:10px}
        .site-footer{background:var(--ink);color:#c8bbbd;padding:60px 0 110px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
        .footer-brand{color:#fffaf4;font-size:22px;font-weight:800;margin-bottom:14px}
        .site-footer p{font-size:13px;line-height:1.8;color:#9f9195}
        .footer-links{display:flex;flex-direction:column;gap:9px;font-size:14px}
        .footer-links a:hover{color:var(--amber)}
        .copyright{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#897b80}
        @media(max-width:1023px){
            .main-nav{gap:14px}.main-nav a{font-size:13px}
            .topic-grid{grid-template-columns:1fr 1fr}.topic-card.featured{grid-row:auto;min-height:360px}
            .guide-grid{grid-template-columns:repeat(3,1fr)}
            .filter-grid{grid-template-columns:1fr 1fr}.filter-button{width:100%}
        }
        @media(max-width:767px){
            .container{width:min(100% - 32px,600px)}
            .nav-shell{min-height:66px}.brand{font-size:16px}.brand-mark{width:29px;height:29px}
            .main-nav{display:none}.nav-cta{padding:8px 11px;font-size:12px}
            .hero{min-height:640px}.hero-inner{padding:80px 0}.hero-copy{font-size:16px}
            section{padding:64px 0}.feature-row,.process,.split-grid,.comparison{grid-template-columns:1fr}
            .feature-item,.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child,.feature-item:last-child{border-bottom:0}
            .topic-grid,.article-grid,.guard-grid{grid-template-columns:1fr}.topic-card.featured{min-height:320px}
            .list-item{grid-template-columns:1fr;gap:6px;padding:20px 0}.list-item .text-link{margin-top:4px}
            .metrics{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr 1fr}
            .fixed-inner{align-items:stretch}.fixed-inner p{display:none}.fixed-actions{width:100%}.fixed-actions a{flex:1;text-align:center;padding:10px 5px}
            .site-footer{padding-bottom:100px}.footer-grid{grid-template-columns:1fr;gap:28px}
        }
        @media(max-width:420px){.hero h1{font-size:39px}.guide-grid{grid-template-columns:1fr}.hero-actions a{width:100%;text-align:center}}

/* roulang page: category1 */
:root{
 --ink:#171318;
 --ink-soft:#211b22;
 --paper:#f4efe8;
 --paper-deep:#e9dfd4;
 --cream:#fffaf4;
 --text:#312a31;
 --muted:#756b73;
 --line:rgba(49,42,49,.14);
 --copper:#b66d4d;
 --copper-dark:#8f4d37;
 --amber:#d5a75d;
 --plum:#392535;
 --radius:16px;
 --shadow:0 18px 45px rgba(40,25,30,.10);
 --ease:all .28s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.8}
a{color:inherit;text-decoration:none;transition:var(--ease)}
img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit}
button:focus,a:focus,input:focus,select:focus{outline:3px solid rgba(182,109,77,.35);outline-offset:3px}
.container{width:min(1240px,calc(100% - 48px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(23,19,24,.97);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;color:#fffaf4;font-weight:800;letter-spacing:-.04em;font-size:20px;white-space:nowrap}
.brand-mark{width:34px;height:34px;border:1px solid var(--copper);display:grid;place-items:center;color:var(--amber);font-size:13px}
.main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.main-nav a{color:#d5c9cc;font-size:14px;padding:26px 0;position:relative}
.main-nav a:hover,.main-nav a.active{color:#fff}
.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--copper)}
.nav-cta,.button.primary{background:var(--copper);color:#fffaf4;border:1px solid var(--copper);padding:11px 18px;border-radius:7px;font-weight:700;display:inline-block}
.nav-cta:hover,.button.primary:hover{background:var(--copper-dark);transform:translateY(-2px)}
.page-intro{background:var(--ink);color:#fffaf4;padding:76px 0 68px;position:relative;overflow:hidden}
.page-intro:after{content:"";position:absolute;right:0;top:0;width:45%;height:100%;opacity:.3;background:linear-gradient(90deg,var(--ink),transparent),url('/assets/images/4a90ab3e8e747c7c.jpg') center/cover}
.intro-inner{position:relative;z-index:1}
.eyebrow{color:var(--amber);font-size:12px;letter-spacing:.18em;font-weight:800}
.page-intro h1{font-size:clamp(38px,5vw,64px);line-height:1.18;letter-spacing:-.05em;max-width:760px;margin:16px 0 18px}
.page-intro p{max-width:720px;color:#d9ccce;margin:0;font-size:17px}
.breadcrumb{display:flex;gap:10px;align-items:center;color:#b9aaae;font-size:13px;margin-top:28px}
.breadcrumb a:hover{color:#fff}
section{padding:76px 0;border-bottom:1px solid var(--line)}
.section-head{max-width:760px;margin-bottom:30px}
.section-head h2{font-size:clamp(28px,4vw,44px);line-height:1.25;letter-spacing:-.04em;margin:8px 0 13px}
.section-head p{color:var(--muted);margin:0}
.filter-section{background:var(--ink);color:#fffaf4}
.filter-section .section-head p{color:#b9aaae}
.filter-panel{border:1px solid rgba(255,255,255,.15);padding:24px;background:rgba(255,255,255,.045);border-radius:12px}
.filter-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:12px}
.filter-label{display:block;color:#d8cacc;font-size:12px;margin-bottom:6px}
.filter-panel input,.filter-panel select{width:100%;height:46px;border:1px solid rgba(255,255,255,.18);background:#302730;color:#fff;border-radius:6px;padding:0 13px}
.filter-panel input::placeholder{color:#9d9095}
.filter-button{height:46px;border:1px solid var(--copper);background:var(--copper);color:white;padding:0 20px;border-radius:6px;cursor:pointer;transition:var(--ease);align-self:end}
.filter-button:hover{background:var(--copper-dark);transform:translateY(-2px)}
.filter-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;color:#cdbfc2;font-size:13px}
.filter-state .tag{color:#f5dfca;border-color:rgba(213,167,93,.55);background:rgba(213,167,93,.08)}
.tag{display:inline-flex;border:1px solid var(--line);padding:6px 12px;border-radius:30px;color:var(--plum);font-size:13px;background:rgba(255,255,255,.28)}
.tag:hover{border-color:var(--copper);color:var(--copper-dark);transform:translateY(-2px)}
.content-list{border-top:1px solid var(--line)}
.list-item{display:grid;grid-template-columns:112px 1fr 145px 110px;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}
.list-date{font-size:13px;color:var(--muted)}
.list-item h3{font-size:19px;line-height:1.45;margin:0 0 5px}
.list-item p{font-size:14px;color:var(--muted);margin:0}
.list-type{font-size:13px;color:var(--muted)}
.status{display:inline-block;font-size:12px;color:var(--copper-dark);border:1px solid rgba(182,109,77,.35);padding:4px 8px;border-radius:4px;white-space:nowrap}
.text-link{display:inline-block;color:var(--copper-dark);font-weight:700;font-size:14px}
.text-link:hover{color:var(--plum);letter-spacing:.02em}
.more-row{text-align:center;padding-top:30px}
.topic-strip{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:16px}
.topic-card{min-height:220px;padding:26px;background:var(--cream);border:1px solid var(--line);position:relative;overflow:hidden}
.topic-card:first-child{color:#fffaf4;background:linear-gradient(160deg,rgba(57,37,53,.16),rgba(30,20,27,.92)),url('/assets/images/05e42c88fa6b938f.jpg') center/cover}
.topic-card:first-child h3,.topic-card:first-child p{color:#fffaf4}
.topic-card h3{font-size:22px;line-height:1.4;margin:18px 0 10px}
.topic-card p{color:var(--muted);font-size:14px;margin:0}
.topic-card:first-child p{color:#ded0d0}
.topic-meta{font-size:12px;color:var(--copper-dark);letter-spacing:.05em}
.topic-card:first-child .topic-meta{color:#f2c589}
.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.rule-panel{background:var(--cream);border:1px solid var(--line);padding:28px;border-radius:12px}
.rule-panel h3{font-size:22px;margin:0 0 13px}
.rule-panel p{color:var(--muted);font-size:15px;margin:0}
.rule-list{list-style:none;padding:0;margin:18px 0 0}
.rule-list li{border-top:1px solid var(--line);padding:12px 0;font-size:14px}
.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.article{background:var(--cream);border:1px solid var(--line);padding:24px;transition:var(--ease)}
.article:hover{border-color:var(--copper);transform:translateY(-3px);box-shadow:var(--shadow)}
.article .article-meta{font-size:12px;color:var(--copper-dark)}
.article h3{font-size:20px;line-height:1.45;margin:13px 0 8px}
.article p{font-size:14px;color:var(--muted);margin:0}
.accordion{background:transparent;margin:0;border:0}
.accordion-item{border-top:1px solid var(--line);background:transparent}
.accordion-item:last-child{border-bottom:1px solid var(--line)}
.accordion-title{font-size:17px;font-weight:700;color:var(--text);padding:20px 42px 20px 0;border:0;background:transparent}
.accordion-title:hover{color:var(--copper-dark);background:transparent}
.accordion-content{border:0;background:transparent;color:var(--muted);padding:0 42px 20px 0;font-size:15px}
.callout-note{background:#f0e2c9;border:1px solid rgba(181,137,70,.35);padding:24px;border-radius:10px;color:#59463b}
.callout-note strong{display:block;font-size:18px;margin-bottom:5px;color:#49332e}
.action-section{background:var(--plum);color:#fffaf4;padding:54px 0}
.action-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.action-inner h2{font-size:32px;line-height:1.3;margin:0 0 8px;color:#fffaf4}
.action-inner p{color:#d9ccce;margin:0}
.action-buttons{display:flex;gap:12px;flex-wrap:wrap}
.button.secondary{display:inline-block;padding:11px 18px;border:1px solid rgba(255,250,244,.45);color:#fffaf4;border-radius:7px}
.button.secondary:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.site-footer{background:var(--ink);color:#d5c9cc;padding:58px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
.footer-brand{color:#fffaf4;font-size:22px;font-weight:800;margin-bottom:12px}
.site-footer p{font-size:14px;color:#b9aaae;max-width:450px;margin:0}
.site-footer h3{color:#fffaf4;font-size:17px;margin:0 0 14px}
.footer-links{display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-links a:hover{color:var(--amber)}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:20px;color:#97888e;font-size:12px}
@media(max-width:1100px){
 .main-nav{gap:17px}
 .filter-grid{grid-template-columns:1fr 1fr 1fr}
 .filter-grid>div:first-child{grid-column:span 3}
 .filter-button{width:100%}
}
@media(max-width:760px){
 .container{width:min(100% - 32px,620px)}
 .nav-shell{min-height:68px;gap:12px}
 .brand{font-size:16px}
 .brand-mark{width:30px;height:30px}
 .main-nav{display:none}
 .nav-cta{font-size:13px;padding:9px 12px}
 .page-intro{padding:58px 0 52px}
 .page-intro:after{width:75%;opacity:.18}
 .page-intro h1{font-size:39px}
 section{padding:58px 0}
 .filter-grid{grid-template-columns:1fr}
 .filter-grid>div:first-child{grid-column:auto}
 .topic-strip,.rule-grid,.article-grid{grid-template-columns:1fr}
 .list-item{grid-template-columns:1fr;gap:7px;padding:20px 0}
 .list-item .list-type{display:inline-block}
 .action-inner{display:block}
 .action-buttons{margin-top:22px}
 .footer-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:480px){
 .brand{font-size:14px}
 .nav-cta{display:none}
 .page-intro h1{font-size:34px}
 .page-intro p{font-size:15px}
 .section-head h2{font-size:29px}
 .filter-panel{padding:18px}
 .action-inner h2{font-size:27px}
}
