/* roulang page: index */
:root{
            --purple-950:#33263f;
            --purple-800:#514061;
            --purple-700:#694f78;
            --purple-500:#967ca1;
            --lilac:#e8dfea;
            --mist:#f5f1ee;
            --cream:#fbf8f4;
            --sage:#dfe7df;
            --yellow:#d7b965;
            --ink:#302b35;
            --muted:#756d79;
            --line:#ddd4de;
            --white:#fffdfb;
            --radius:16px;
            --shadow:0 16px 42px rgba(64,47,70,.08);
            --ease:all .25s ease;
        }
        *,*:before,*:after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
            font-size:16px;
            line-height:1.8;
        }
        a{color:inherit;text-decoration:none;transition:var(--ease)}
        a:hover{color:var(--purple-700)}
        button,input,select,textarea{font:inherit}
        button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
            outline:3px solid rgba(215,185,101,.55);
            outline-offset:3px;
        }
        .container{max-width:1180px;margin:0 auto;padding:0 28px}
        .site-header{
            background:rgba(251,248,244,.94);
            border-bottom:1px solid var(--line);
            position:sticky;top:0;z-index:20;
            backdrop-filter:blur(12px);
        }
        .nav-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
        .brand{display:flex;align-items:center;gap:12px;min-width:265px}
        .brand-mark{
            width:34px;height:34px;border:1px solid var(--purple-700);border-radius:50%;
            position:relative;display:grid;place-items:center;color:var(--purple-700);font-size:15px;
        }
        .brand-mark:after{content:"";width:7px;height:7px;background:var(--yellow);border-radius:50%;position:absolute;right:0;top:2px}
        .brand-name{font-size:17px;font-weight:650;letter-spacing:.04em;color:var(--purple-950)}
        .brand-sub{display:block;font-size:11px;line-height:1.3;color:var(--muted);letter-spacing:.13em}
        .nav-links{display:flex;align-items:center;gap:8px}
        .nav-links a{padding:8px 16px;color:var(--muted);font-size:14px;position:relative}
        .nav-links a:after{content:"";position:absolute;left:16px;right:16px;bottom:1px;height:2px;background:var(--purple-700);transform:scaleX(0);transform-origin:left;transition:var(--ease)}
        .nav-links a:hover,.nav-links a.active{color:var(--purple-950)}
        .nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
        .nav-action{border:1px solid var(--purple-700);padding:9px 17px;font-size:13px;color:var(--purple-800);border-radius:8px}
        .nav-action:hover{background:var(--purple-800);color:white}
        .menu-toggle{display:none;border:0;background:none;color:var(--purple-800);font-size:25px}
        .hero{padding:78px 0 54px;position:relative;overflow:hidden}
        .hero:before{
            content:"";position:absolute;right:-120px;top:30px;width:440px;height:270px;opacity:.4;
            background:repeating-linear-gradient(90deg,transparent 0 35px,rgba(150,124,161,.16) 36px 37px),
            repeating-linear-gradient(0deg,transparent 0 35px,rgba(150,124,161,.13) 36px 37px);
            transform:rotate(-8deg);pointer-events:none;
        }
        .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-700);font-weight:650}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(36px,5.2vw,68px);line-height:1.18;letter-spacing:-.045em;color:var(--purple-950);margin:14px 0 22px;max-width:760px}
        h2{font-size:clamp(26px,3vw,39px);line-height:1.25;letter-spacing:-.025em;color:var(--purple-950);margin:8px 0 14px}
        h3{font-size:19px;line-height:1.4;color:var(--purple-950);margin-bottom:8px}
        .hero-copy{font-size:18px;color:var(--muted);max-width:700px;margin-bottom:27px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
        .button{border-radius:9px!important;padding:12px 22px!important;font-weight:600;transition:var(--ease)}
        .button.primary{background:var(--purple-800);color:white}
        .button.primary:hover{background:var(--purple-950);transform:translateY(-2px)}
        .button.secondary{background:transparent;color:var(--purple-800);border:1px solid var(--purple-500)}
        .button.secondary:hover{background:var(--lilac)}
        .hero-note{margin-top:28px;display:flex;gap:25px;flex-wrap:wrap;color:var(--muted);font-size:13px}
        .hero-note strong{color:var(--purple-800);font-size:19px;margin-right:5px}
        .section{padding:76px 0}
        .section.mist{background:var(--mist)}
        .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}
        .section-intro{max-width:530px;color:var(--muted);margin-bottom:0}
        .index-label{color:var(--yellow);font-weight:700;font-size:14px;letter-spacing:.1em}
        .metric-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
        .metric-main,.metric-small,.matrix-main,.matrix-card,.compare-panel,.info-strip,.form-card{
            border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow)
        }
        .metric-main{padding:32px;min-height:220px;background:var(--purple-950);color:white;position:relative;overflow:hidden}
        .metric-main:after{content:"06";position:absolute;right:23px;bottom:-20px;font-size:130px;font-weight:800;color:rgba(255,255,255,.06)}
        .metric-main .eyebrow{color:#d9c7dc}.metric-main h3{color:white;font-size:25px;margin-top:18px}
        .metric-number{font-size:64px;line-height:1;color:#f1dd96;font-weight:700;margin:18px 0 4px}
        .metric-small{padding:25px;min-height:101px;display:flex;justify-content:space-between;align-items:center}
        .metric-small strong{display:block;color:var(--purple-800);font-size:31px;line-height:1}
        .metric-small span{font-size:13px;color:var(--muted)}
        .status-bar{grid-column:1/-1;padding:16px 20px;border:1px solid var(--line);background:var(--lilac);border-radius:12px;display:flex;align-items:center;gap:14px;font-size:14px}
        .dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);display:inline-block;flex:none}
        .bar{height:5px;flex:1;background:rgba(105,79,120,.16);border-radius:5px;overflow:hidden}
        .bar i{display:block;width:78%;height:100%;background:var(--purple-700)}
        .matrix{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
        .matrix-main{padding:34px;background:var(--lilac);min-height:290px}
        .matrix-main p,.matrix-card p,.info-strip p,.compare-panel p{color:var(--muted);font-size:15px}
        .matrix-side{display:grid;gap:18px}
        .matrix-card{padding:25px}
        .card-link{display:inline-flex;align-items:center;gap:8px;color:var(--purple-700);font-size:14px;font-weight:650;margin-top:12px}
        .card-link:after{content:"→";transition:var(--ease)}
        .card-link:hover:after{transform:translateX(4px)}
        .tag{display:inline-block;padding:4px 9px;border-radius:5px;background:var(--sage);color:var(--purple-800);font-size:12px;line-height:1.4}
        .index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .index-item{padding:20px;border-top:2px solid var(--purple-500);background:var(--white);border-bottom:1px solid var(--line)}
        .index-item:nth-child(2){border-top-color:var(--yellow)}
        .index-item:nth-child(3){border-top-color:#9aaf9d}
        .index-item b{display:block;color:var(--purple-700);font-size:12px;margin-bottom:7px}
        .index-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
        .compare{display:grid;grid-template-columns:1fr 80px 1fr;align-items:stretch;gap:0}
        .compare-panel{padding:30px}
        .compare-panel.after{background:var(--purple-950);color:white;border-color:var(--purple-950)}
        .compare-panel.after h3,.compare-panel.after p{color:white}
        .compare-panel.after p{opacity:.77}
        .compare-mid{display:grid;place-items:center;color:var(--yellow);font-size:25px}
        .check-list{list-style:none;padding:0;margin:20px 0 0}
        .check-list li{padding:9px 0;border-top:1px solid var(--line);font-size:14px}
        .after .check-list li{border-color:rgba(255,255,255,.18)}
        .faq-wrap{max-width:900px;margin:auto}
        details{border-top:1px solid var(--line);padding:20px 4px}
        details:last-child{border-bottom:1px solid var(--line)}
        summary{cursor:pointer;list-style:none;color:var(--purple-950);font-weight:650;display:flex;gap:18px;align-items:center}
        summary::-webkit-details-marker{display:none}
        summary:before{content:"＋";color:var(--yellow);font-size:21px;font-weight:400}
        details[open] summary:before{content:"－"}
        details p{padding:12px 0 0 39px;margin:0;color:var(--muted);font-size:15px}
        .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
        .contact-copy{padding:16px 0}
        .contact-copy p{color:var(--muted);max-width:430px}
        .info-strip{margin-top:28px;padding:18px;background:var(--sage);box-shadow:none;font-size:14px;color:var(--purple-800)}
        .form-card{padding:30px}
        label{font-size:13px;color:var(--purple-800);font-weight:650}
        input,select,textarea{border:1px solid var(--line)!important;background:#fff!important;border-radius:8px!important;box-shadow:none!important;color:var(--ink)!important}
        input:focus,select:focus,textarea:focus{border-color:var(--purple-700)!important;box-shadow:0 0 0 3px rgba(150,124,161,.18)!important}
        textarea{min-height:105px;resize:vertical}
        .footer{background:var(--purple-950);color:#eee4ed;padding:42px 0 25px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
        .footer .brand-name{color:white}.footer .brand-sub{color:#bcaebe}
        .footer p,.footer a{font-size:13px;color:#c5b8c5}
        .footer a:hover{color:#f1dd96}
        .footer-links{display:flex;flex-direction:column;gap:7px}
        .footer-title{font-size:13px;color:#f1dd96;margin-bottom:8px}
        .copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;font-size:12px;color:#a99baa}
        @media(max-width:900px){
            .nav-action{display:none}.metric-layout,.matrix,.contact-grid{grid-template-columns:1fr}
            .metric-small{min-height:90px}.index-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:640px){
            .container{padding:0 19px}.nav-row{min-height:68px}.brand{min-width:0}.brand-name{font-size:14px}.brand-sub{display:none}
            .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--cream);padding:13px 19px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}
            .nav-links.open{display:flex}.nav-links a{padding:9px 4px}.nav-links a:after{left:4px;right:auto;width:40px}
            .menu-toggle{display:block}.hero{padding:55px 0 38px}h1{font-size:39px}.hero-copy{font-size:16px}
            .section{padding:55px 0}.section-head{display:block}.section-intro{margin-top:10px}.metric-main{padding:25px}.metric-number{font-size:53px}
            .index-grid{grid-template-columns:1fr}.compare{display:block}.compare-mid{height:55px}.compare-panel{padding:24px}
            .form-card{padding:21px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
        }

/* roulang page: category1 */
:root{
 --purple-950:#33263f;
 --purple-800:#514061;
 --purple-700:#694f78;
 --purple-500:#967ca1;
 --lilac:#e8dfea;
 --mist:#f5f1ee;
 --cream:#fbf8f4;
 --sage:#dfe7df;
 --yellow:#d7b965;
 --ink:#302b35;
 --muted:#756d79;
 --line:#ddd4de;
 --white:#fffdfb;
 --radius:16px;
 --shadow:0 16px 42px rgba(64,47,70,.08);
 --ease:all .25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--ink);background:var(--cream);
 font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
 font-size:16px;line-height:1.8;
}
a{color:inherit;text-decoration:none;transition:var(--ease)}
a:hover{color:var(--purple-700)}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:3px solid rgba(215,185,101,.6);outline-offset:3px;
}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.site-header{
 position:sticky;top:0;z-index:20;background:rgba(251,248,244,.94);
 border-bottom:1px solid var(--line);backdrop-filter:blur(12px);
}
.nav-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;min-width:265px}
.brand-mark{
 width:34px;height:34px;border:1px solid var(--purple-700);border-radius:50%;
 display:grid;place-items:center;position:relative;color:var(--purple-700);font-size:15px;
}
.brand-mark:after{
 content:"";position:absolute;right:0;top:2px;width:7px;height:7px;border-radius:50%;background:var(--yellow);
}
.brand-name{display:block;font-size:17px;font-weight:650;letter-spacing:.04em;color:var(--purple-950)}
.brand-sub{display:block;font-size:11px;line-height:1.3;color:var(--muted);letter-spacing:.13em}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:8px 16px;color:var(--muted);font-size:14px;position:relative;white-space:nowrap}
.nav-links a:after{
 content:"";position:absolute;left:16px;right:16px;bottom:1px;height:2px;background:var(--purple-700);
 transform:scaleX(0);transform-origin:left;transition:var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--purple-950)}
.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-action{
 border:1px solid var(--purple-700);padding:9px 17px;border-radius:8px;color:var(--purple-800);
 font-size:13px;white-space:nowrap;
}
.nav-action:hover{background:var(--purple-800);color:#fff}
.menu-toggle{display:none;border:0;background:none;color:var(--purple-800);font-size:25px;padding:5px}
.mobile-nav{display:none}
.section{padding:78px 0}
.section.mist{background:var(--mist)}
.eyebrow{margin:0 0 10px;font-size:12px;font-weight:650;letter-spacing:.18em;color:var(--purple-700)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:32px}
.section-head h2{margin:0;color:var(--purple-950);font-size:31px;line-height:1.35;letter-spacing:.02em}
.section-intro{max-width:510px;margin:0;color:var(--muted)}
.button{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px!important;
 padding:12px 22px!important;font-weight:650;line-height:1.45;transition:var(--ease);
}
.button.primary{background:var(--purple-800);color:#fff}
.button.primary:hover{background:var(--purple-950);color:#fff;transform:translateY(-2px)}
.button.secondary{background:transparent;color:var(--purple-800);border:1px solid var(--purple-500)}
.button.secondary:hover{background:var(--lilac);color:var(--purple-950)}
.tag{
 display:inline-block;padding:4px 9px;border-radius:5px;background:var(--sage);
 color:var(--purple-800);font-size:12px;line-height:1.4;
}
.page-hero{
 position:relative;overflow:hidden;padding:78px 0 64px;border-bottom:1px solid var(--line);
 background:linear-gradient(115deg,var(--cream) 0%,#f7f0f4 62%,var(--lilac) 100%);
}
.page-hero:before{
 content:"";position:absolute;right:5%;top:-68px;width:390px;height:390px;border:1px solid rgba(105,79,120,.19);
 border-radius:48% 52% 42% 58%;transform:rotate(-24deg);
}
.page-hero:after{
 content:"";position:absolute;right:13%;bottom:-60px;width:255px;height:255px;
 background:repeating-linear-gradient(90deg,transparent 0 25px,rgba(150,124,161,.14) 26px 27px),
 repeating-linear-gradient(0deg,transparent 0 25px,rgba(150,124,161,.12) 26px 27px);
 transform:rotate(14deg);
}
.hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;gap:50px;align-items:end}
.hero-title{margin:0 0 20px;color:var(--purple-950);font-size:50px;line-height:1.2;letter-spacing:-.035em}
.hero-copy{max-width:680px;margin:0;color:var(--muted);font-size:17px;line-height:1.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-panel{
 position:relative;padding:27px;background:rgba(255,253,251,.82);border:1px solid var(--line);
 border-radius:var(--radius);box-shadow:var(--shadow);
}
.panel-index{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);letter-spacing:.08em}
.panel-index strong{font-size:22px;color:var(--purple-700);line-height:1}
.path-list{list-style:none;padding:0;margin:17px 0 0}
.path-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(221,212,222,.75);font-size:14px;line-height:1.55}
.path-list li:last-child{border-bottom:0}
.path-dot{width:9px;height:9px;flex:none;border-radius:50%;margin-top:6px;background:var(--yellow)}
.path-list li:nth-child(2) .path-dot{background:var(--purple-500)}
.path-list li:nth-child(3) .path-dot{background:#93a996}
.filter-bar{
 display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 0 24px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.filter-label{margin-right:8px;color:var(--muted);font-size:13px}
.filter-item{padding:7px 13px;border:1px solid transparent;border-radius:7px;color:var(--muted);font-size:13px}
.filter-item:hover{background:var(--lilac);color:var(--purple-800)}
.filter-item.active{border-color:var(--purple-500);background:var(--white);color:var(--purple-950);font-weight:650}
.guide-layout{display:grid;grid-template-columns:238px 1fr;gap:42px;align-items:start}
.side-index{position:sticky;top:106px;padding:22px 20px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.side-index h3{margin:0 0 14px;font-size:14px;color:var(--purple-950)}
.side-index a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.side-index a:last-child{border-bottom:0}
.side-index a:hover{padding-left:4px;color:var(--purple-700)}
.side-index b{display:inline-block;width:27px;color:var(--yellow);font-size:11px}
.featured-guide{
 position:relative;overflow:hidden;padding:36px;margin-bottom:18px;background:var(--purple-950);color:#fff;
 border-radius:var(--radius);box-shadow:var(--shadow);
}
.featured-guide:after{content:"丁香";position:absolute;right:26px;bottom:-34px;color:rgba(255,255,255,.055);font-size:104px;font-weight:800;line-height:1}
.featured-guide .tag{background:rgba(232,223,234,.18);color:#f1e8f2}
.featured-guide h2{position:relative;z-index:1;max-width:650px;margin:20px 0 13px;color:#fff;font-size:30px;line-height:1.4}
.featured-guide p{position:relative;z-index:1;max-width:650px;margin:0;color:#e1d6e4;font-size:15px}
.featured-guide .card-link{position:relative;z-index:1;color:#fff}
.guide-item{
 display:grid;grid-template-columns:70px 1fr auto;gap:22px;align-items:center;padding:25px 27px;margin-bottom:12px;
 background:var(--white);border:1px solid var(--line);border-radius:12px;transition:var(--ease);
}
.guide-item:hover{border-color:var(--purple-500);transform:translateX(4px);box-shadow:0 12px 28px rgba(64,47,70,.07)}
.guide-number{font-size:27px;font-weight:700;color:var(--purple-500);letter-spacing:-.04em}
.guide-item h3{margin:5px 0 7px;color:var(--purple-950);font-size:19px;line-height:1.45}
.guide-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.card-link{display:inline-flex;align-items:center;gap:8px;color:var(--purple-700);font-size:14px;font-weight:650;white-space:nowrap}
.card-link:after{content:"→";transition:var(--ease)}
.card-link:hover:after{transform:translateX(4px)}
.scenario-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.scenario-main,.scenario-card,.process-card,.faq-wrap,.next-nav{
 border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.scenario-main{padding:35px;background:var(--lilac)}
.scenario-main h3{margin:16px 0 12px;color:var(--purple-950);font-size:25px;line-height:1.4}
.scenario-main p,.scenario-card p{margin:0;color:var(--muted);font-size:15px}
.scenario-stack{display:grid;gap:18px}
.scenario-card{padding:25px;background:var(--white)}
.scenario-card:nth-child(2){background:var(--sage)}
.scenario-card h3{margin:12px 0 7px;font-size:18px;color:var(--purple-950)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.process-card{position:relative;padding:26px;background:var(--white)}
.process-card:before{content:"";position:absolute;top:0;left:25px;width:44px;height:3px;background:var(--yellow)}
.process-num{display:block;margin-bottom:15px;color:var(--purple-500);font-size:12px;font-weight:700;letter-spacing:.13em}
.process-card h3{margin:0 0 8px;color:var(--purple-950);font-size:18px}
.process-card p{margin:0;color:var(--muted);font-size:14px}
.faq-wrap{max-width:900px;margin:0 auto;overflow:hidden;background:var(--white)}
.accordion{margin:0;background:transparent}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-item:last-child{border-bottom:0}
.accordion-title{
 padding:20px 56px 20px 24px;border:0!important;background:var(--white);color:var(--purple-950);
 font-size:16px;font-weight:650;line-height:1.55;
}
.accordion-title:hover,.accordion-title:focus{background:var(--mist);color:var(--purple-700)}
.accordion-title:before{right:24px;color:var(--purple-700);font-size:21px;font-weight:400}
.accordion-content{padding:0 25px 22px;border:0!important;background:var(--white);color:var(--muted);font-size:15px;line-height:1.85}
.question-no{display:inline-block;width:39px;color:var(--yellow);font-size:12px;letter-spacing:.08em}
.next-nav{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:var(--white)}
.next-nav a{padding:29px 32px;min-height:145px}
.next-nav a+ a{border-left:1px solid var(--line)}
.next-nav a:hover{background:var(--lilac);color:var(--purple-950)}
.next-nav small{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;letter-spacing:.1em}
.next-nav strong{display:block;font-size:20px;line-height:1.4;color:var(--purple-950)}
.next-nav span{display:block;margin-top:10px;color:var(--purple-700);font-size:13px}
.footer{padding:54px 0 22px;background:var(--purple-950);color:#e7dfe7}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:#bfb0c4}
.footer .brand-mark{border-color:#d9c7dc;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .9fr;gap:38px}
.footer p{color:#c7bbc9;font-size:14px;line-height:1.8}
.footer-title{margin-bottom:14px;color:#fff;font-size:13px;font-weight:650;letter-spacing:.08em}
.footer-links{display:flex;flex-direction:column;gap:8px;color:#c7bbc9;font-size:14px}
.footer-links a:hover{padding-left:3px;color:#fff}
.copyright{margin-top:39px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#aa9cac;font-size:12px}
@media(max-width:1024px){
 .container{padding:0 24px}
 .hero-layout{gap:28px}
 .hero-title{font-size:43px}
 .guide-layout{grid-template-columns:205px 1fr;gap:25px}
}
@media(max-width:767px){
 body{font-size:15px}
 .container{padding:0 19px}
 .nav-row{min-height:68px;gap:12px}
 .brand{min-width:0;gap:9px}
 .brand-name{font-size:15px}
 .brand-sub{font-size:9px}
 .nav-links,.nav-action{display:none}
 .menu-toggle{display:block}
 .mobile-nav{padding:0 19px 16px;border-top:1px solid var(--line)}
 .mobile-nav.is-open{display:grid;gap:5px}
 .mobile-nav a{padding:9px 4px;color:var(--muted);font-size:14px}
 .mobile-nav a.active{color:var(--purple-950);font-weight:650}
 .page-hero{padding:54px 0 48px}
 .page-hero:before{right:-120px;width:300px;height:300px}
 .hero-layout{grid-template-columns:1fr;gap:28px}
 .hero-title{font-size:36px}
 .hero-copy{font-size:16px}
 .section{padding:57px 0}
 .section-head{display:block;margin-bottom:25px}
 .section-head h2{font-size:26px}
 .section-intro{margin-top:12px}
 .guide-layout{grid-template-columns:1fr}
 .side-index{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:16px}
 .side-index h3{grid-column:1/-1}
 .side-index a:nth-last-child(2){border-bottom:0}
 .featured-guide{padding:27px}
 .featured-guide h2{font-size:25px}
 .guide-item{grid-template-columns:48px 1fr;padding:22px 20px;gap:14px}
 .guide-item .card-link{grid-column:2;justify-self:start}
 .scenario-grid,.process-grid{grid-template-columns:1fr}
 .next-nav{grid-template-columns:1fr}
 .next-nav a+a{border-left:0;border-top:1px solid var(--line)}
 .footer-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:520px){
 .hero-title{font-size:31px}
 .hero-actions{display:grid;grid-template-columns:1fr}
 .hero-actions .button{width:100%}
 .side-index{grid-template-columns:1fr}
 .side-index a:nth-last-child(2){border-bottom:1px solid var(--line)}
 .guide-item{display:block}
 .guide-number{margin-bottom:10px}
 .guide-item .card-link{margin-top:12px}
 .featured-guide{padding:24px}
 .accordion-title{padding:18px 46px 18px 17px;font-size:15px}
 .accordion-content{padding:0 17px 19px}
 .question-no{width:32px}
}

/* roulang page: category2 */
:root{
 --purple-950:#33263f;
 --purple-800:#514061;
 --purple-700:#694f78;
 --purple-500:#967ca1;
 --lilac:#e8dfea;
 --mist:#f5f1ee;
 --cream:#fbf8f4;
 --sage:#dfe7df;
 --yellow:#d7b965;
 --ink:#302b35;
 --muted:#756d79;
 --line:#ddd4de;
 --white:#fffdfb;
 --radius:16px;
 --shadow:0 16px 42px rgba(64,47,70,.08);
 --ease:all .25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--ink);background:var(--cream);
 font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
 font-size:16px;line-height:1.8;
}
a{color:inherit;text-decoration:none;transition:var(--ease)}
a:hover{color:var(--purple-700)}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:3px solid rgba(215,185,101,.55);outline-offset:3px;
}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.site-header{
 background:rgba(251,248,244,.94);border-bottom:1px solid var(--line);
 position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
}
.nav-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;min-width:265px}
.brand-mark{
 width:34px;height:34px;border:1px solid var(--purple-700);border-radius:50%;
 position:relative;display:grid;place-items:center;color:var(--purple-700);font-size:15px;
}
.brand-mark:after{content:"";width:7px;height:7px;background:var(--yellow);border-radius:50%;position:absolute;right:0;top:2px}
.brand-name{font-size:17px;font-weight:650;letter-spacing:.04em;color:var(--purple-950)}
.brand-sub{display:block;font-size:11px;line-height:1.3;color:var(--muted);letter-spacing:.13em}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:8px 16px;color:var(--muted);font-size:14px;position:relative}
.nav-links a:after{content:"";position:absolute;left:16px;right:16px;bottom:1px;height:2px;background:var(--purple-700);transform:scaleX(0);transform-origin:left;transition:var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--purple-950)}
.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-action{border:1px solid var(--purple-700);padding:9px 17px;font-size:13px;color:var(--purple-800);border-radius:8px}
.nav-action:hover{background:var(--purple-800);color:#fff}
.menu-toggle{display:none;border:0;background:none;color:var(--purple-800);font-size:25px;cursor:pointer}
.hero{
 padding:74px 0 52px;position:relative;overflow:hidden;
 background:linear-gradient(180deg,#fbf8f4 0%,#f4eef3 100%);
 border-bottom:1px solid var(--line);
}
.hero:before{
 content:"";position:absolute;right:-85px;top:-30px;width:465px;height:350px;opacity:.52;
 background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(150,124,161,.17) 35px 36px),
 repeating-linear-gradient(0deg,transparent 0 34px,rgba(150,124,161,.13) 35px 36px);
 transform:rotate(-8deg);pointer-events:none;
}
.hero:after{
 content:"";position:absolute;right:14%;bottom:20px;width:135px;height:135px;
 border:1px solid rgba(105,79,120,.3);border-radius:50% 50% 50% 12%;
 transform:rotate(31deg);pointer-events:none;
}
.hero-grid{position:relative;z-index:1;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--purple-700);font-weight:700;margin-bottom:13px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(34px,4.3vw,58px);line-height:1.2;letter-spacing:-.045em;color:var(--purple-950);margin-bottom:20px;font-weight:700}
h2{font-size:clamp(26px,3vw,38px);line-height:1.28;letter-spacing:-.03em;color:var(--purple-950);margin-bottom:12px}
h3{font-size:20px;line-height:1.4;color:var(--purple-800);margin-bottom:10px}
.hero-copy{font-size:17px;color:var(--muted);max-width:620px;margin-bottom:26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{border-radius:9px!important;padding:12px 22px!important;font-weight:650;transition:var(--ease);margin:0!important}
.button.primary{background:var(--purple-800);color:#fff}
.button.primary:hover{background:var(--purple-950);color:#fff;transform:translateY(-2px)}
.button.secondary{background:transparent;color:var(--purple-800);border:1px solid var(--purple-500)}
.button.secondary:hover{background:var(--lilac);color:var(--purple-950)}
.hero-note{margin-top:27px;display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.hero-note strong{color:var(--purple-800);font-size:18px;margin-right:4px}
.hero-panel{
 background:var(--purple-950);color:#fff;border-radius:var(--radius);padding:28px;
 box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:288px;
}
.hero-panel:before{content:"";position:absolute;right:-25px;bottom:-44px;width:190px;height:190px;border:1px solid rgba(255,255,255,.17);border-radius:50%}
.panel-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.18)}
.panel-label{font-size:12px;letter-spacing:.12em;color:#dccce0}
.status-dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#eee4d9}
.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.panel-number{font-size:64px;line-height:1;font-weight:700;letter-spacing:-.06em;color:#fff;margin:30px 0 12px}
.panel-copy{color:#ddd4df;font-size:14px;line-height:1.75;max-width:330px;position:relative}
.progress-track{height:4px;background:rgba(255,255,255,.18);margin-top:27px;position:relative}
.progress-track span{display:block;width:76%;height:100%;background:var(--yellow)}
.section{padding:78px 0}
.section.mist{background:var(--mist);border-top:1px solid rgba(221,212,222,.75);border-bottom:1px solid rgba(221,212,222,.75)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:31px}
.section-intro{max-width:555px;color:var(--muted);margin-bottom:0}
.section-index{font-size:12px;color:var(--purple-700);letter-spacing:.16em;white-space:nowrap;padding-bottom:8px}
.feature-band{
 display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line);border-radius:var(--radius);
 overflow:hidden;background:var(--white);box-shadow:var(--shadow);margin-bottom:22px;
}
.feature-copy{padding:36px}
.feature-copy p{color:var(--muted);max-width:600px}
.tag{display:inline-block;padding:4px 9px;border-radius:5px;background:var(--sage);color:var(--purple-800);font-size:12px;line-height:1.4}
.feature-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--muted)}
.feature-meta span{padding-top:8px;border-top:1px solid var(--line)}
.feature-side{
 background:var(--lilac);padding:32px;position:relative;display:flex;flex-direction:column;justify-content:space-between;
}
.feature-side:before{content:"";position:absolute;right:26px;top:25px;width:74px;height:74px;border:1px solid rgba(81,64,97,.32);border-radius:50% 50% 12% 50%;transform:rotate(-25deg)}
.side-number{font-size:62px;line-height:1;font-weight:700;color:var(--purple-700);letter-spacing:-.06em}
.side-list{list-style:none;padding:0;margin:25px 0 0}
.side-list li{border-top:1px solid rgba(81,64,97,.18);padding:9px 0;font-size:14px;color:var(--purple-800)}
.content-flow{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}
.flow-list{display:grid;gap:16px}
.flow-card{
 display:grid;grid-template-columns:88px 1fr auto;gap:22px;align-items:center;
 border:1px solid var(--line);border-radius:13px;background:var(--white);padding:24px 26px;
 transition:var(--ease);
}
.flow-card:hover{transform:translateY(-3px);border-color:var(--purple-500);box-shadow:var(--shadow)}
.flow-card.sage-card{background:var(--sage)}
.flow-card.dark-card{background:var(--purple-950);border-color:var(--purple-950)}
.flow-card.dark-card h3{color:#fff}
.flow-card.dark-card p,.flow-card.dark-card .flow-code{color:#ddd4df}
.flow-card.dark-card .flow-link{color:#f1d57d}
.flow-code{font-size:13px;line-height:1.45;color:var(--purple-700);font-weight:700;letter-spacing:.08em}
.flow-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.flow-link{font-size:14px;font-weight:700;color:var(--purple-700);white-space:nowrap}
.flow-link:after{content:" →";transition:var(--ease)}
.flow-link:hover:after{padding-left:5px}
.summary-panel{
 position:sticky;top:104px;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--white);box-shadow:var(--shadow);padding:25px;
}
.summary-panel h3{font-size:18px;margin-bottom:18px}
.summary-list{list-style:none;margin:0;padding:0}
.summary-list li{padding:13px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.summary-list b{display:block;color:var(--purple-800);font-size:13px;margin-bottom:3px}
.summary-note{margin:20px 0 0;padding:15px;background:var(--mist);border-left:3px solid var(--yellow);font-size:13px;color:var(--muted);line-height:1.7}
.path-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch}
.path-intro{
 border:1px solid var(--line);border-radius:var(--radius);padding:33px;background:var(--purple-800);color:#fff;
 position:relative;overflow:hidden;
}
.path-intro:after{content:"";width:205px;height:205px;border:1px solid rgba(255,255,255,.14);position:absolute;right:-75px;bottom:-80px;border-radius:50%}
.path-intro h2{color:#fff;position:relative}
.path-intro p{color:#e1d9e4;position:relative}
.path-intro .tag{background:rgba(255,255,255,.14);color:#fff}
.path-steps{border-left:1px solid var(--line);padding-left:29px}
.path-step{position:relative;padding:0 0 25px 25px}
.path-step:last-child{padding-bottom:0}
.path-step:before{content:"";position:absolute;width:11px;height:11px;border:2px solid var(--purple-700);background:var(--cream);border-radius:50%;left:-36px;top:8px}
.path-step:nth-child(2):before{border-color:var(--yellow)}
.path-step:nth-child(3):before{border-color:#8aa38d}
.path-step b{font-size:13px;color:var(--purple-700);letter-spacing:.08em}
.path-step h3{margin:4px 0 5px}
.path-step p{color:var(--muted);font-size:14px;margin:0}
.faq-wrap{max-width:920px;margin:auto}
.accordion{margin:0;background:transparent}
.accordion-item{margin-bottom:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--white)}
.accordion-title{border:0!important;color:var(--purple-800)!important;font-size:16px;font-weight:650;padding:18px 50px 18px 21px!important;line-height:1.55}
.accordion-title:before{color:var(--purple-700)!important;font-size:20px;right:20px!important}
.accordion-title:hover,.accordion-title:focus{background:var(--lilac);color:var(--purple-950)!important}
.accordion-content{border:0!important;background:var(--mist);color:var(--muted);padding:0 21px 20px!important;font-size:15px}
.next-bar{
 display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);padding:28px 0;
}
.next-bar p{color:var(--muted);margin:0}
.next-link{display:inline-flex;align-items:center;gap:10px;color:var(--purple-700);font-weight:700;white-space:nowrap}
.next-link:after{content:"→";font-size:20px;transition:var(--ease)}
.next-link:hover:after{transform:translateX(5px)}
.footer{background:var(--purple-950);color:#ddd4df;padding:54px 0 22px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:50px}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:#c9bdce}
.footer .brand-mark{border-color:#d6c5d9;color:#fff}
.footer .brand-mark:after{background:var(--yellow)}
.footer p{color:#c9bdce;font-size:14px}
.footer-title{font-size:13px;color:#fff;letter-spacing:.1em;margin-bottom:12px;font-weight:700}
.footer-links{display:grid;gap:8px;color:#c9bdce;font-size:14px}
.footer-links a:hover{color:#fff;padding-left:3px}
.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:36px;padding-top:18px;font-size:12px;color:#b9adbe}
@media (max-width:1024px){
 .container{padding:0 24px}
 .content-flow{grid-template-columns:1fr 275px}
 .flow-card{grid-template-columns:72px 1fr}
 .flow-link{grid-column:2}
}
@media (max-width:767px){
 .container{padding:0 20px}
 .site-header{position:relative}
 .nav-row{min-height:70px;flex-wrap:wrap;gap:10px}
 .brand{min-width:0}
 .menu-toggle{display:block;margin-left:auto}
 .nav-links{display:none;width:100%;order:3;padding:7px 0 13px;flex-direction:column;align-items:stretch;gap:0}
 .nav-links.is-open{display:flex}
 .nav-links a{padding:10px 4px}
 .nav-links a:after{left:4px;right:auto;width:34px}
 .nav-action{display:none}
 .hero{padding:54px 0 42px}
 .hero:after{display:none}
 .hero-panel{margin-top:28px;min-height:auto}
 .section{padding:56px 0}
 .section-head{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:24px}
 .feature-band,.path-grid{grid-template-columns:1fr}
 .feature-copy,.feature-side{padding:27px}
 .content-flow{grid-template-columns:1fr}
 .summary-panel{position:static}
 .flow-card{grid-template-columns:1fr;gap:10px;padding:22px}
 .flow-link{grid-column:auto;margin-top:4px}
 .path-steps{margin-left:8px}
 .footer-grid{grid-template-columns:1fr;gap:29px}
}
@media (max-width:520px){
 body{font-size:15px}
 h1{font-size:35px}
 h2{font-size:27px}
 .brand-name{font-size:15px}
 .brand-sub{font-size:10px}
 .hero-actions .button{width:100%;text-align:center}
 .hero-note{gap:9px 15px}
 .panel-number{font-size:55px}
 .section-index{padding:0}
 .feature-meta{gap:10px}
 .next-bar{align-items:flex-start;flex-direction:column}
 .accordion-title{font-size:15px;padding-left:17px!important}
}