/* roulang page: index */
:root{
            --ink:#191b1a;
            --ink-soft:#343836;
            --muted:#747b76;
            --paper:#f5f1e9;
            --paper-deep:#ebe5da;
            --white:#fffdf8;
            --line:#d9d2c6;
            --accent:#c6533d;
            --accent-dark:#9e3e2e;
            --sage:#8b9b91;
            --radius:10px;
            --shadow:0 16px 40px rgba(35,30,24,.09);
            --ease:all .24s ease;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.75;font-size:16px}
        a{color:inherit;text-decoration:none}
        img{display:block;width:100%;max-width:100%;object-fit:cover}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer;border:0}
        :focus-visible{outline:3px solid rgba(198,83,61,.42);outline-offset:4px}
        .container{width:min(1200px,calc(100% - 48px));margin:auto}
        .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.14em}
        .eyebrow:before{content:"";width:27px;height:2px;background:var(--accent)}
        .section{padding:108px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
        .section-head h2{font-size:clamp(29px,4vw,44px);line-height:1.2;letter-spacing:-.04em}
        .section-head p{max-width:430px;color:var(--muted);font-size:15px}
        .topbar{height:76px;background:rgba(245,241,233,.97);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20}
        .nav-wrap{display:flex;align-items:center;justify-content:space-between}
        .logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em}
        .logo-mark{width:28px;height:28px;border:2px solid var(--ink);display:grid;place-items:center;position:relative}
        .logo-mark:after{content:"";width:10px;height:10px;background:var(--accent);position:absolute;right:-5px;bottom:-5px}
        .logo-text{font-size:18px}
        .logo-text small{font-size:10px;color:var(--muted);display:block;letter-spacing:.12em;font-weight:600;margin-top:-4px}
        .nav{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:32px}
        .nav a{font-size:14px;color:var(--ink-soft);position:relative;padding:26px 0}
        .nav a:after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:2px;background:var(--accent);transition:var(--ease)}
        .nav a:hover,.nav a.active{color:var(--ink);font-weight:700}
        .nav a:hover:after,.nav a.active:after{right:0}
        .nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 21px;border-radius:7px;font-weight:700;font-size:14px;transition:var(--ease)}
        .nav-cta,.btn-primary{background:var(--accent);color:#fffaf2}
        .nav-cta:hover,.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(158,62,46,.18)}
        .menu-toggle{display:none;background:transparent;font-size:24px;color:var(--ink)}
        .hero{min-height:680px;display:grid;grid-template-columns:5fr 7fr;align-items:stretch;gap:60px;padding:76px 0 84px;position:relative;overflow:hidden}
        .hero-copy{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
        .hero h1{font-size:clamp(43px,6vw,72px);line-height:1.12;letter-spacing:-.07em;margin:24px 0 25px;max-width:620px}
        .hero h1 em{color:var(--accent);font-style:normal}
        .hero-copy>p{font-size:18px;color:var(--muted);max-width:510px;line-height:1.9}
        .hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
        .btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}
        .btn-outline:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
        .hero-visual{position:relative;min-height:500px}
        .hero-image{height:100%;min-height:500px}
        .hero-image img{height:100%;filter:saturate(.72)}
        .hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,27,26,.28),transparent 55%)}
        .hero-stamp{position:absolute;right:-18px;top:38px;background:var(--accent);color:#fff9ee;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:12px;line-height:1.45;transform:rotate(9deg);z-index:2}
        .hero-note{position:absolute;left:-30px;bottom:28px;background:var(--ink);color:#f7f0e5;padding:20px 24px;width:250px;z-index:2}
        .hero-note b{display:block;font-size:22px;margin-bottom:3px}
        .hero-note span{font-size:12px;color:#bfc3bb}
        .index-line{position:absolute;right:7%;top:28%;writing-mode:vertical-rl;color:rgba(255,255,255,.7);letter-spacing:.25em;font-size:11px;z-index:2}
        .info-strip{background:var(--ink);color:#f7f0e5;padding:27px 0}
        .info-grid{display:grid;grid-template-columns:repeat(4,1fr)}
        .info-item{padding:5px 28px;border-left:1px solid #50534d}
        .info-item:first-child{border-left:0;padding-left:0}
        .info-item small{color:#9fa69e;font-size:12px;letter-spacing:.12em}
        .info-item strong{display:block;font-size:18px;margin:3px 0}
        .info-item span{color:#c6c8c1;font-size:13px}
        .business{background:var(--white)}
        .business-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:25px}
        .feature-card{min-height:440px;background:var(--ink);color:#fffaf2;position:relative;overflow:hidden;padding:36px;display:flex;flex-direction:column;justify-content:end}
        .feature-card img{position:absolute;inset:0;height:100%;opacity:.52;transition:var(--ease)}
        .feature-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(15,17,16,.94))}
        .feature-content{position:relative;z-index:1;max-width:570px}
        .feature-content .tag{color:#f19b84}
        .feature-content h3{font-size:32px;line-height:1.25;margin:13px 0}
        .feature-content p{color:#d6d4ca;max-width:520px}
        .feature-card:hover img{transform:scale(1.04)}
        .entry-list{display:flex;flex-direction:column;gap:12px}
        .entry{border:1px solid var(--line);padding:24px 24px 22px;background:var(--paper);transition:var(--ease);display:flex;gap:18px;justify-content:space-between;align-items:start}
        .entry:hover{border-color:var(--accent);transform:translateX(4px);box-shadow:var(--shadow)}
        .entry-num{color:var(--accent);font-weight:800;font-size:13px}
        .entry h3{font-size:20px;margin-bottom:5px}
        .entry p{color:var(--muted);font-size:14px;line-height:1.7}
        .arrow{font-size:22px;color:var(--accent);transition:var(--ease)}
        .entry:hover .arrow{transform:translateX(5px)}
        .tag{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.09em}
        .editorial{display:grid;grid-template-columns:4fr 8fr;gap:80px}
        .editorial-intro h2{font-size:38px;line-height:1.25;margin:18px 0}
        .editorial-intro p{color:var(--muted)}
        .article-list{border-top:1px solid var(--line)}
        .article-item{display:grid;grid-template-columns:60px 1fr 155px 24px;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:var(--ease)}
        .article-item:hover{padding-left:8px}
        .article-item .num{font-size:13px;color:var(--accent);font-weight:800}
        .article-item h3{font-size:18px;margin-bottom:3px}
        .article-item p,.article-item time{color:var(--muted);font-size:13px}
        .article-item time{text-align:right}
        .dark-panel{background:var(--ink);color:#fffaf2;padding:74px 8%;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
        .dark-panel h2{font-size:clamp(30px,4vw,48px);line-height:1.25;margin:18px 0}
        .dark-panel p{color:#c6c8c1;max-width:590px}
        .keyword-wall{display:flex;flex-wrap:wrap;gap:11px;justify-content:flex-end}
        .keyword-wall span{border:1px solid #686c64;padding:9px 14px;color:#e2ded4;font-size:13px}
        .faq-layout{display:grid;grid-template-columns:4fr 8fr;gap:80px}
        .faq-layout h2{font-size:38px;line-height:1.25}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-q{width:100%;background:transparent;text-align:left;padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink)}
        .faq-q span{font-size:22px;color:var(--accent);transition:var(--ease)}
        .faq-item.open .faq-q span{transform:rotate(45deg)}
        .faq-a{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;transition:max-height .3s ease}
        .faq-item.open .faq-a{max-height:140px;padding:0 35px 22px 0}
        .contact{background:var(--paper-deep)}
        .contact-box{display:grid;grid-template-columns:5fr 7fr;gap:80px}
        .contact-box h2{font-size:42px;line-height:1.25;margin:18px 0}
        .contact-box p{color:var(--muted)}
        .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
        .field{display:flex;flex-direction:column;gap:7px}
        .field.full{grid-column:1/-1}
        .field label{font-size:13px;font-weight:700}
        .field input,.field textarea,.field select{border:1px solid var(--line);border-radius:7px;background:var(--white);padding:13px 14px;color:var(--ink);transition:var(--ease)}
        .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:3px solid rgba(198,83,61,.13)}
        .field textarea{min-height:120px;resize:vertical}
        .form-submit{grid-column:1/-1;display:flex;align-items:center;gap:18px}
        .form-message{font-size:13px;color:var(--accent);display:none}
        footer{background:var(--ink);color:#f8f2e8;padding:58px 0 24px}
        .footer-main{display:flex;justify-content:space-between;gap:50px;padding-bottom:48px;border-bottom:1px solid #444841}
        footer .logo-mark{border-color:#f8f2e8}
        .footer-note{color:#adb1a8;font-size:14px;max-width:300px;margin-top:17px}
        .footer-links{display:flex;gap:70px}
        .footer-links h4{font-size:13px;color:#9fa69e;margin-bottom:15px}
        .footer-links a{display:block;font-size:14px;margin:8px 0;color:#e6e1d7;transition:var(--ease)}
        .footer-links a:hover{color:#ef8d76}
        .copyright{display:flex;justify-content:space-between;color:#8c938a;font-size:12px;padding-top:20px}
        @media(max-width:1024px){
            .hero{gap:32px}.editorial,.faq-layout{gap:42px}.contact-box{gap:45px}
            .nav{gap:20px;margin-right:18px}
        }
        @media(max-width:768px){
            .container{width:min(100% - 40px,600px)}
            .section{padding:72px 0}.section-head{display:block;margin-bottom:28px}.section-head p{margin-top:13px}
            .topbar{height:68px}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:15px 20px;flex-direction:column;align-items:stretch;gap:0}
            .nav.open{display:flex}.nav a{padding:14px 0}.nav a:after{bottom:7px}.nav-cta{display:none}.menu-toggle{display:block}
            .hero{display:flex;flex-direction:column;padding:54px 0 64px;min-height:0}.hero h1{font-size:44px}.hero-copy>p{font-size:16px}.hero-visual{min-height:390px}.hero-image{min-height:390px}.hero-note{left:14px;bottom:18px}.hero-stamp{right:8px;top:18px}
            .info-grid{grid-template-columns:1fr 1fr;gap:18px}.info-item{padding:4px 0 4px 15px}.info-item:nth-child(3){border-left:0;padding-left:0}
            .business-layout,.editorial,.faq-layout,.contact-box,.dark-panel{grid-template-columns:1fr;gap:30px}.feature-card{min-height:390px}.editorial-intro h2,.faq-layout h2{font-size:31px}
            .article-item{grid-template-columns:38px 1fr 22px}.article-item time{display:none}
            .dark-panel{padding:48px 28px}.keyword-wall{justify-content:flex-start}
            .contact-box h2{font-size:35px}.contact-form{grid-template-columns:1fr}.field.full,.form-submit{grid-column:auto}.form-submit{display:block}.form-submit .btn{width:100%}.form-message{margin-top:12px}
            .footer-main{display:block}.footer-links{margin-top:35px;gap:45px}.copyright{display:block}.copyright span{display:block;margin-top:8px}
        }
        @media(max-width:520px){
            .hero h1{font-size:38px}.hero-visual,.hero-image{min-height:315px}.info-item strong{font-size:16px}.info-item span{font-size:12px}
            .feature-card{min-height:350px;padding:24px}.feature-content h3{font-size:26px}.entry{padding:19px}.article-item h3{font-size:16px}
        }

/* roulang page: category1 */
:root{
 --ink:#191b1a;--ink-soft:#343836;--muted:#747b76;--paper:#f5f1e9;
 --paper-deep:#ebe5da;--white:#fffdf8;--line:#d9d2c6;--accent:#c6533d;
 --accent-dark:#9e3e2e;--sage:#8b9b91;--radius:10px;
 --shadow:0 16px 40px rgba(35,30,24,.09);--ease:all .24s ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;max-width:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(1200px,calc(100% - 48px));margin:auto}
.topbar{height:76px;background:rgba(245,241,233,.98);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20}
.nav-wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em}
.logo-mark{width:28px;height:28px;border:2px solid var(--ink);display:grid;place-items:center;position:relative}
.logo-mark:after{content:"";width:10px;height:10px;background:var(--accent);position:absolute;right:-5px;bottom:-5px}
.logo-text{font-size:18px}.logo-text small{font-size:10px;color:var(--muted);display:block;letter-spacing:.12em;font-weight:600;margin-top:-4px}
.nav{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:32px}
.nav a{font-size:14px;color:var(--ink-soft);position:relative;padding:26px 0}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:2px;background:var(--accent);transition:var(--ease)}
.nav a:hover,.nav a.active{color:var(--ink);font-weight:700}
.nav a:hover:after,.nav a.active:after{right:0}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 21px;border-radius:7px;font-weight:700;font-size:14px;transition:var(--ease)}
.nav-cta,.btn-primary{background:var(--accent);color:#fffaf2}
.nav-cta:hover,.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(158,62,46,.18)}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.btn:focus,.nav-cta:focus,.nav a:focus,input:focus,textarea:focus{outline:3px solid rgba(198,83,61,.28);outline-offset:3px}
.menu-toggle{display:none;background:transparent;font-size:24px;color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.14em}
.eyebrow:before{content:"";width:27px;height:2px;background:var(--accent)}
.page-hero{padding:82px 0 74px;background:var(--paper-deep);border-bottom:1px solid var(--line)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:32px}
.breadcrumb a:hover{color:var(--accent)}
.page-hero-grid{display:grid;grid-template-columns:6fr 6fr;gap:70px;align-items:center}
.page-hero h1{font-size:clamp(40px,5vw,64px);line-height:1.15;letter-spacing:-.06em;margin:20px 0}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero p{max-width:590px;color:var(--muted);font-size:17px;line-height:1.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cover-frame{height:360px;position:relative;overflow:hidden;background:var(--ink)}
.cover-frame img{height:100%;filter:saturate(.7)}
.cover-label{position:absolute;left:22px;bottom:20px;background:var(--ink);color:var(--white);padding:12px 17px;font-size:13px}
.section{padding:100px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.section-head h2{font-size:clamp(29px,4vw,43px);line-height:1.2;letter-spacing:-.04em;margin:0}
.section-head p{max-width:440px;color:var(--muted);font-size:15px;margin:0}
.summary{background:var(--ink);color:var(--white);padding:30px 0}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.summary-item{padding:4px 27px;border-left:1px solid #50534d}
.summary-item:first-child{border-left:0;padding-left:0}
.summary-item small{display:block;color:#aeb4ab;font-size:12px;letter-spacing:.1em}
.summary-item strong{display:block;font-size:18px;margin:5px 0}
.summary-item span{color:#c6c8c1;font-size:13px}
.content-grid{display:grid;grid-template-columns:7fr 5fr;gap:34px}
.main-card{background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:45% 55%;min-height:340px;transition:var(--ease)}
.main-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px)}
.main-card img{height:100%;min-height:340px}
.card-copy{padding:34px;display:flex;flex-direction:column;justify-content:center}
.tag{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.1em}
.card-copy h3{font-size:27px;line-height:1.35;margin:14px 0}
.card-copy p{color:var(--muted);font-size:15px;margin:0 0 24px}
.text-link{color:var(--accent);font-weight:700;font-size:14px}
.text-link:hover{color:var(--accent-dark)}
.entry-list{display:flex;flex-direction:column;gap:12px}
.entry{background:var(--paper-deep);border:1px solid transparent;padding:24px;display:flex;justify-content:space-between;gap:20px;transition:var(--ease)}
.entry:hover{border-color:var(--accent);background:var(--white);transform:translateX(4px)}
.entry h3{font-size:19px;margin:7px 0 4px}.entry p{font-size:13px;color:var(--muted);margin:0}.arrow{font-size:22px;color:var(--accent);align-self:center}
.reading{background:var(--white)}
.reading-grid{display:grid;grid-template-columns:4fr 8fr;gap:75px}
.reading-intro h2{font-size:38px;line-height:1.3;margin:17px 0}
.reading-intro p{color:var(--muted)}
.article-list{border-top:1px solid var(--line)}
.article-item{display:grid;grid-template-columns:54px 1fr 110px 20px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:var(--ease)}
.article-item:hover{padding-left:8px}.article-item .num{color:var(--accent);font-weight:800}
.article-item h3{font-size:18px;margin:0 0 3px}.article-item p,.article-item time{font-size:13px;color:var(--muted);margin:0}.article-item time{text-align:right}
.faq-layout{display:grid;grid-template-columns:4fr 8fr;gap:80px}
.faq-layout h2{font-size:38px;line-height:1.3;margin:16px 0}
.faq-layout>div>p{color:var(--muted)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:transparent;text-align:left;padding:21px 0;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink)}
.faq-q span{font-size:22px;color:var(--accent);transition:var(--ease)}
.faq-a{display:none;padding:0 45px 20px 0;color:var(--muted);font-size:14px}
.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span{transform:rotate(45deg)}
.cta{background:var(--accent);color:#fffaf2;padding:68px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.cta h2{font-size:clamp(28px,4vw,42px);margin:0 0 10px;line-height:1.25}
.cta p{margin:0;color:#f4d9cf;max-width:570px}
.cta .btn{background:var(--white);color:var(--ink);white-space:nowrap}.cta .btn:hover{background:var(--ink);color:var(--white)}
footer{background:var(--ink);color:var(--white);padding:55px 0 24px}
.footer-main{display:flex;justify-content:space-between;gap:50px;padding-bottom:42px;border-bottom:1px solid #454944}
.footer-note{color:#aeb4ab;font-size:14px;margin:18px 0 0}.footer-links{display:flex;gap:90px}
.footer-links h4{font-size:14px;margin:0 0 14px;color:var(--white)}
.footer-links a{display:block;color:#aeb4ab;font-size:13px;margin:8px 0}.footer-links a:hover{color:#f19b84}
.copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#858c84;font-size:12px}
@media(max-width:1024px){.nav{gap:20px;margin-right:18px}.page-hero-grid{gap:35px}.section{padding:78px 0}.reading-grid{gap:40px}.faq-layout{gap:40px}}
@media(max-width:768px){
 .container{width:min(100% - 40px,620px)}.topbar{height:68px}.logo-text{font-size:16px}.logo-text small{font-size:8px}
 .menu-toggle{display:block}.nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper);border-bottom:1px solid var(--line);padding:14px 20px;flex-direction:column;align-items:stretch;gap:0;margin:0}
 .nav.show{display:flex}.nav a{padding:13px 0}.nav a:after{bottom:7px}.nav-cta{display:none}
 .page-hero{padding:55px 0}.page-hero-grid,.content-grid,.reading-grid,.faq-layout{grid-template-columns:1fr}
 .cover-frame{height:280px}.summary-grid{grid-template-columns:repeat(2,1fr);gap:24px}.summary-item{border-left:0;padding:0}.section{padding:65px 0}
 .section-head,.cta-inner,.footer-main{display:block}.section-head p{margin-top:16px}.main-card{grid-template-columns:1fr}.main-card img{height:230px;min-height:0}.card-copy{padding:25px}
 .article-item{grid-template-columns:38px 1fr 20px}.article-item time{display:none}.faq-layout h2{font-size:31px}
 .cta .btn{margin-top:25px}.footer-links{margin-top:35px;gap:55px}.copyright{display:block}.copyright span{display:block;margin-top:7px}
}
@media(max-width:520px){.page-hero h1{font-size:40px}.hero-actions .btn{width:100%}.summary-grid{grid-template-columns:1fr 1fr;gap:18px}.summary-item strong{font-size:16px}.entry{padding:19px}.article-item h3{font-size:16px}}