/* roulang page: index */
:root{
  --coral:#f36f5f;
  --coral-dark:#d9584c;
  --berry:#642d46;
  --ink:#211d1d;
  --muted:#766c68;
  --cream:#fffaf3;
  --paper:#f7efe7;
  --peach:#ffe5d8;
  --line:#e7d9d0;
  --white:#fff;
  --shadow:0 18px 45px rgba(76,48,39,.09);
  --radius:16px;
  --max:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,250,243,.94);border-bottom:1px solid rgba(231,217,208,.9);backdrop-filter:blur(12px)}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:21px;position:relative;box-shadow:5px 5px 0 #f8c2ae}
.brand-mark:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;right:6px;top:6px}
.nav-links{display:flex;align-items:center;gap:27px;margin-left:auto}
.nav-links a{font-size:14px;color:#655b57;position:relative;padding:26px 0;transition:.25s}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--coral);transform:scaleX(0);transition:.25s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:700;transition:.25s}
.nav-cta{background:var(--ink);color:#fff;font-size:13px}
.nav-cta:hover,.btn-dark:hover{background:var(--berry);transform:translateY(-2px)}
.menu-toggle{display:none;background:none;font-size:26px;color:var(--ink)}
.hero{min-height:650px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--paper)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,243,.98) 0%,rgba(255,250,243,.88) 42%,rgba(255,250,243,.18) 100%);z-index:1}
.hero-photo{position:absolute;right:0;top:0;width:57%;height:100%;object-fit:cover}
.hero-content{position:relative;z-index:2;padding:92px 0 85px;max-width:700px}
.eyebrow,.section-kicker{display:flex;align-items:center;gap:10px;color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.eyebrow:before,.section-kicker:before{content:"";width:30px;height:2px;background:var(--coral)}
.hero h1{font-size:clamp(42px,6vw,78px);line-height:1.13;letter-spacing:-3px;margin:20px 0 23px;max-width:650px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero-lead{font-size:17px;line-height:2;color:#5d504a;max-width:670px}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{font-size:14px;padding:13px 23px}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 9px 20px rgba(243,111,95,.2)}
.btn-primary:hover{background:var(--coral-dark);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.hero-notes{display:flex;gap:10px;flex-wrap:wrap;margin-top:37px}
.hero-notes span,.tag,.badge{display:inline-flex;align-items:center;border-radius:999px;font-size:12px;font-weight:700}
.hero-notes span{background:#fff;padding:7px 13px;color:#66544e;border:1px solid var(--line)}
section{padding:100px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}
.section-head h2{font-size:clamp(28px,4vw,43px);line-height:1.25;letter-spacing:-1.5px;margin-top:10px}
.section-head p{max-width:520px;color:var(--muted);font-size:15px}
.soft{background:var(--paper)}
.service-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr 1.1fr;gap:14px}
.service-card{min-height:225px;padding:27px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);position:relative;overflow:hidden;transition:.25s}
.service-card:first-child{background:var(--berry);color:#fff;grid-row:span 2;min-height:465px}
.service-card:nth-child(4){background:var(--peach)}
.service-card:hover,.content-card:hover,.case-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-no{font-size:13px;color:var(--coral);font-weight:800}
.service-card:first-child .service-no{color:#ffb2a4}
.service-card h3{font-size:21px;margin:42px 0 12px;line-height:1.35}
.service-card p{color:var(--muted);font-size:14px}
.service-card:first-child p{color:#ead8d4}
.service-foot{position:absolute;bottom:24px;left:27px;right:27px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.service-card:first-child .service-foot{color:#f3c8c0}
.stats-band{background:var(--ink);color:#fff;padding:35px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:10px 30px;border-right:1px solid rgba(255,255,255,.16)}
.stat:first-child{padding-left:0}
.stat:last-child{border:0}
.stat strong{font-size:40px;line-height:1;color:var(--coral);display:block;margin-bottom:7px}
.stat span{font-size:13px;color:#d9cbc5}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:28px 22px 15px 0;border-right:1px solid var(--line);position:relative}
.step:not(:first-child){padding-left:22px}
.step:last-child{border:0}
.step-num{color:var(--coral);font-size:14px;font-weight:800}
.step h3{font-size:18px;margin:18px 0 8px}
.step p{font-size:13px;color:var(--muted)}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s}
.card-image{height:170px;position:relative}
.card-image img{height:100%}
.card-body{padding:17px 18px 19px}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px;color:#987d72;font-size:11px}
.badge{background:#ffe2d9;color:var(--coral-dark);padding:4px 9px}
.badge.dark{background:#efdce4;color:var(--berry)}
.content-card h3{font-size:16px;line-height:1.5}
.card-foot{display:flex;justify-content:space-between;color:#958781;font-size:12px;margin-top:15px}
.center-action{text-align:center;margin-top:34px}
.feature-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-template-rows:220px 220px;gap:15px}
.feature-card{position:relative;overflow:hidden;border-radius:16px;min-height:200px;background:#ddd}
.feature-card:first-child{grid-row:span 2}
.feature-card img{height:100%;transition:.4s}
.feature-card:hover img{transform:scale(1.04)}
.feature-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(20,14,14,.75))}
.feature-text{position:absolute;z-index:2;bottom:22px;left:23px;right:20px;color:#fff}
.feature-text small{color:#ffc3b4;font-weight:700}
.feature-text h3{font-size:22px;margin-top:5px;line-height:1.35}
.feature-card:not(:first-child) .feature-text h3{font-size:16px}
.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.channel{padding:26px;background:#fff;border:1px solid var(--line);border-radius:15px;display:flex;justify-content:space-between;gap:18px;min-height:150px;transition:.25s}
.channel:nth-child(2){background:#ffe8dd}.channel:nth-child(4){background:#f0e5ec}
.channel:hover{border-color:var(--coral);transform:translateY(-3px)}
.channel h3{font-size:19px;margin-bottom:8px}.channel p{font-size:13px;color:var(--muted)}
.arrow{font-size:24px;color:var(--coral)}
.ranking-wrap{display:grid;grid-template-columns:1fr .72fr;gap:35px;align-items:start}
.rank-list{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.rank-item{display:grid;grid-template-columns:52px 1fr 82px 55px;gap:14px;align-items:center;padding:15px 20px;border-bottom:1px solid #f0e5df}
.rank-item:last-child{border-bottom:0}.rank-item strong{font-size:20px;color:#b6a8a2}.rank-item:nth-child(-n+3) strong{color:var(--coral)}
.rank-title{font-weight:700;font-size:14px}.rank-title small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.rank-hot{font-size:12px;color:var(--coral-dark)}.rank-score{font-weight:800;color:var(--berry);font-size:13px}
.rank-aside{background:var(--berry);color:#fff;border-radius:16px;padding:30px;min-height:320px}.rank-aside h3{font-size:26px;line-height:1.3;margin:18px 0}.rank-aside p{color:#e5ced0;font-size:14px}
.case-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr;grid-template-rows:235px 235px;gap:15px}
.case-card{position:relative;overflow:hidden;border-radius:15px;background:#ddd;transition:.25s}
.case-card:first-child{grid-row:span 2}
.case-card img{height:100%}.case-card:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(20,15,15,.8))}
.case-info{position:absolute;z-index:2;left:23px;bottom:21px;color:#fff}.case-info h3{font-size:20px}.case-info p{font-size:12px;color:#ffd5ca;margin-top:4px}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.news-item{display:grid;grid-template-columns:130px 1fr;gap:17px;padding:15px;background:#fff;border:1px solid var(--line);border-radius:13px;transition:.25s}
.news-item:hover{border-color:var(--coral);transform:translateY(-2px)}
.news-item img{height:100px;border-radius:9px}.news-item h3{font-size:15px;line-height:1.5;margin:8px 0 5px}.news-item p{font-size:12px;color:var(--muted)}
.partner-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.partner{padding:13px 20px;border:1px solid var(--line);border-radius:10px;color:#695c56;background:#fff;font-weight:700;font-size:13px}
.faq-list{max-width:900px;margin:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;padding:21px 0;background:none;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:700;color:var(--ink);font-size:16px}
.faq-question span{color:var(--coral);font-size:24px;transition:.25s}.faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 45px 20px 0}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-question span{transform:rotate(45deg)}
.assurance{background:var(--berry);color:#fff;padding:24px 0}
.assurance-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);align-items:center;gap:20px}.assurance h2{font-size:22px}.assurance p{font-size:12px;color:#e8ccd0}.assurance-item{border-left:1px solid rgba(255,255,255,.2);padding-left:20px;color:#f6dfda;font-size:13px}.assurance-item b{display:block;color:#ff9b8d;font-size:20px;margin-bottom:4px}
.contact{background:var(--peach)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:start}.contact h2{font-size:42px;line-height:1.25;margin:14px 0}.contact-copy{color:var(--muted);max-width:420px}.contact-note{margin-top:28px;color:var(--berry);font-weight:700;font-size:14px}
.form-box{background:#fff;border:1px solid #efd5c9;border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{margin-bottom:15px}.field label{font-size:12px;font-weight:700;display:block;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:#fffaf8;outline:none}.field textarea{height:105px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(243,111,95,.12)}.form-submit{width:100%;background:var(--coral);color:#fff;padding:13px;border-radius:9px;font-weight:700}.privacy{font-size:11px;color:#9a8880;margin-top:10px;text-align:center}
footer{background:var(--ink);color:#fff;padding:65px 0 24px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}footer .brand{color:#fff;margin-bottom:17px}footer .brand-mark{box-shadow:none}footer p,footer li,footer a{color:#cbbdb8;font-size:13px}footer p{max-width:260px}footer h3{font-size:14px;margin-bottom:17px;color:#fff}footer ul{list-style:none;display:grid;gap:9px}footer a:hover{color:#ff9a8b}.copyright{padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#a99892;font-size:12px}
@media(max-width:1100px){.nav-links{gap:16px}.nav-cta{padding:10px 14px}.service-grid{grid-template-columns:1fr 1fr}.service-card:first-child{grid-row:auto;min-height:260px}.content-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.container{width:min(var(--max),calc(100% - 34px))}.navbar{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--cream);padding:14px 22px 24px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 25px rgba(60,40,30,.08)}.nav-links.show{display:flex}.nav-links a{padding:12px 0}.nav-links a:after{bottom:5px}.nav-cta{display:none}.hero{min-height:680px}.hero-photo{width:100%;opacity:.42}.hero:before{background:linear-gradient(90deg,rgba(255,250,243,.98),rgba(255,250,243,.73))}.hero-content{padding:75px 0}.section-head{display:block}.section-head p{margin-top:15px}.stats{grid-template-columns:repeat(2,1fr);gap:20px}.stat,.stat:first-child{padding:10px 15px;border-right:0}.process{grid-template-columns:1fr 1fr;border-top:0;gap:0}.step,.step:not(:first-child){padding:22px 15px;border-top:1px solid var(--line);border-right:1px solid var(--line)}.step:nth-child(even){border-right:0}.content-grid{grid-template-columns:repeat(2,1fr)}.feature-grid,.case-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px}.feature-card:first-child,.case-card:first-child{grid-row:auto;grid-column:span 2}.ranking-wrap,.contact-grid{grid-template-columns:1fr;gap:30px}.channel-grid{grid-template-columns:1fr 1fr}.news-grid{grid-template-columns:1fr}.assurance-grid{grid-template-columns:1fr 1fr}.assurance-grid h2{grid-column:span 2}.assurance-item{padding:10px 0;border-left:0}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){section{padding:70px 0}.hero h1{font-size:43px;letter-spacing:-2px}.hero-lead{font-size:15px}.service-grid,.content-grid,.channel-grid{grid-template-columns:1fr}.service-card:first-child{min-height:225px}.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:31px}.feature-grid,.case-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto}.feature-card:first-child,.case-card:first-child{grid-column:auto;min-height:270px}.feature-card:not(:first-child),.case-card:not(:first-child){min-height:190px}.rank-item{grid-template-columns:33px 1fr 55px 40px;padding:13px 10px;gap:7px}.rank-title{font-size:13px}.rank-hot{font-size:11px}.news-item{grid-template-columns:95px 1fr;gap:12px}.news-item img{height:86px}.form-row{grid-template-columns:1fr}.contact h2{font-size:34px}.assurance-grid{grid-template-columns:1fr 1fr}.assurance-grid h2{grid-column:span 2}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:8px}}

/* roulang page: category1 */
:root{--coral:#f36f5f;--coral-dark:#d9584c;--berry:#642d46;--ink:#211d1d;--muted:#766c68;--cream:#fffaf3;--paper:#f7efe7;--peach:#ffe5d8;--line:#e7d9d0;--white:#fff;--shadow:0 18px 45px rgba(76,48,39,.09);--radius:16px;--max:1220px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,250,243,.95);border-bottom:1px solid rgba(231,217,208,.9);backdrop-filter:blur(12px)}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:21px;position:relative;box-shadow:5px 5px 0 #f8c2ae}
.brand-mark:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;right:6px;top:6px}
.nav-links{display:flex;align-items:center;gap:27px;margin-left:auto}
.nav-links a{font-size:14px;color:#655b57;position:relative;padding:26px 0;transition:.25s}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--coral);transform:scaleX(0);transition:.25s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:700;transition:.25s}
.nav-cta{background:var(--ink);color:#fff;font-size:13px}.nav-cta:hover{background:var(--berry);transform:translateY(-2px)}
.menu-toggle{display:none;background:none;font-size:26px;color:var(--ink)}
.page-head{padding:78px 0 62px;background:var(--paper);border-bottom:1px solid var(--line)}
.page-head-inner{display:flex;align-items:end;justify-content:space-between;gap:40px}
.kicker,.section-kicker{display:flex;align-items:center;gap:10px;color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:2px}
.kicker:before,.section-kicker:before{content:"";width:30px;height:2px;background:var(--coral)}
.page-head h1{font-size:clamp(38px,6vw,68px);line-height:1.15;letter-spacing:-2px;margin:18px 0 15px}
.page-head h1 em{font-style:normal;color:var(--coral)}
.page-head p{max-width:650px;color:var(--muted);font-size:16px}
.head-meta{min-width:220px;border-left:2px solid var(--coral);padding-left:20px;color:var(--muted)}
.head-meta strong{display:block;font-size:34px;line-height:1.2;color:var(--ink)}
section{padding:88px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
.section-head h2{font-size:clamp(27px,4vw,42px);line-height:1.25;letter-spacing:-1px;margin-top:9px}
.section-head p{max-width:510px;color:var(--muted)}
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px}
.filter-bar span{color:var(--muted);font-size:13px;margin-right:5px}.filter{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--cream);font-size:13px;color:#655b57}
.filter.active,.filter:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.editor-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.editor-item{display:grid;grid-template-columns:190px 1fr;min-height:188px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.editor-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.editor-item img{height:100%;min-height:188px}
.editor-copy{padding:21px}.meta{display:flex;justify-content:space-between;gap:8px;color:#987d72;font-size:11px;margin-bottom:10px}
.badge,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;background:#ffe2d9;color:var(--coral-dark)}
.badge.dark{background:#efdce4;color:var(--berry)}
.editor-copy h3{font-size:19px;line-height:1.45;margin-bottom:8px}.editor-copy p{font-size:13px;color:var(--muted);line-height:1.75}
.editor-foot{display:flex;justify-content:space-between;margin-top:14px;color:#9a8880;font-size:12px}
.feature-strip{display:grid;grid-template-columns:1.45fr .75fr;gap:16px}
.feature-main,.feature-side{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;background:#ddd}
.feature-main img,.feature-side img{height:100%;transition:.4s}.feature-main:hover img,.feature-side:hover img{transform:scale(1.04)}
.feature-main:after,.feature-side:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(20,14,14,.78))}
.feature-copy{position:absolute;z-index:2;left:26px;right:25px;bottom:24px;color:#fff}.feature-copy small{color:#ffc3b4;font-weight:700}
.feature-copy h3{font-size:27px;line-height:1.35;margin-top:6px}.feature-side .feature-copy h3{font-size:19px}
.scope{background:var(--peach)}.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}
.scope p{color:#685851;max-width:620px}.scope-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scope-point{background:#fff;border:1px solid rgba(231,217,208,.8);border-radius:12px;padding:17px}.scope-point strong{display:block;font-size:16px;margin-bottom:4px}.scope-point span{font-size:13px;color:var(--muted)}
.mini-rank{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}.mini-rank li{list-style:none;display:grid;grid-template-columns:38px 1fr 70px;gap:12px;align-items:center;padding:15px 20px;border-bottom:1px solid #f0e5df}.mini-rank li:last-child{border-bottom:0}.mini-rank b{font-size:20px;color:var(--coral)}.mini-rank li:nth-child(n+4) b{color:#aa9b94}.mini-rank span{font-size:14px}.mini-rank small{color:var(--muted);text-align:right}
.faq-wrap{max-width:820px}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;padding:20px 3px;font-weight:700;color:var(--ink)}.faq-q span:last-child{font-size:23px;color:var(--coral);transition:.25s}.faq-a{display:none;color:var(--muted);font-size:14px;padding:0 38px 20px 3px}.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
.cta{padding:64px 0;background:var(--berry);color:#fff}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:clamp(28px,4vw,44px);line-height:1.25;margin:10px 0}.cta p{color:#ead8d4}.btn-primary{background:var(--coral);color:#fff;box-shadow:0 9px 20px rgba(243,111,95,.2)}.btn-primary:hover{background:var(--coral-dark);transform:translateY(-2px)}.btn-outline{border:1px solid var(--ink);color:var(--ink)}.btn-outline:hover{background:var(--ink);color:#fff}.cta .btn-outline{border-color:#fff;color:#fff}.cta .btn-outline:hover{background:#fff;color:var(--berry)}
footer{background:var(--ink);color:#fff;padding:60px 0 24px}footer .brand{color:#fff}footer .brand-mark{box-shadow:5px 5px 0 #8a4159}footer p{color:#c7b9b4;margin-top:16px;max-width:250px;font-size:13px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}.footer-grid h3{font-size:14px;color:#ffc3b4;margin-bottom:16px}.footer-grid ul{list-style:none}.footer-grid li{margin:8px 0;color:#c7b9b4;font-size:13px}.footer-grid a:hover{color:#fff}.copyright{display:flex;justify-content:space-between;border-top:1px solid #493a3a;margin-top:45px;padding-top:18px;color:#958783;font-size:12px}
@media(max-width:992px){.nav-links{gap:15px}.nav-links a{font-size:13px}.nav-cta{display:none}.page-head-inner{display:block}.head-meta{margin-top:28px;border-left:0;border-top:2px solid var(--coral);padding:14px 0 0}.editor-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.navbar{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--cream);padding:15px 22px 22px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.nav-links.show{display:flex}.nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}.nav-links a:after{bottom:0}.page-head{padding:58px 0 48px}section{padding:65px 0}.section-head{display:block}.section-head p{margin-top:12px}.editor-item{grid-template-columns:145px 1fr}.feature-strip,.scope-grid{grid-template-columns:1fr}.feature-main{min-height:280px}.feature-side{min-height:220px}.cta-inner{display:block}.cta .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.page-head h1{font-size:39px}.editor-item{display:block}.editor-item img{height:180px}.editor-copy{padding:17px}.scope-points{grid-template-columns:1fr}.mini-rank li{grid-template-columns:32px 1fr 60px;padding:13px 15px}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:5px}}

/* roulang page: category2 */
:root {
      --coral: #f36f5f;
      --coral-dark: #d9584c;
      --berry: #642d46;
      --ink: #211d1d;
      --muted: #766c68;
      --cream: #fffaf3;
      --paper: #f7efe7;
      --peach: #ffe5d8;
      --line: #e7d9d0;
      --white: #fff;
      --shadow: 0 18px 45px rgba(76, 48, 39, .09);
      --shadow-soft: 0 8px 24px rgba(76, 48, 39, .07);
      --radius: 16px;
      --max: 1220px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 94px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--cream);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; object-fit: cover; }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 3px solid rgba(243, 111, 95, .45);
      outline-offset: 4px;
    }
    ::selection { color: var(--ink); background: #ffd5c8; }

    .container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 250, 243, .96);
      border-bottom: 1px solid rgba(231, 217, 208, .9);
      backdrop-filter: blur(12px);
    }
    .navbar { min-height: 78px; display: flex; align-items: center; gap: 26px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-size: 18px; font-weight: 800; white-space: nowrap; }
    .brand-mark {
      position: relative;
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 12px;
      color: var(--white);
      background: var(--coral);
      box-shadow: 5px 5px 0 #f8c2ae;
      font-size: 21px;
    }
    .brand-mark::after {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--white);
      content: "";
    }
    .nav-links { display: flex; align-items: center; gap: 27px; margin-left: auto; }
    .nav-links a {
      position: relative;
      padding: 27px 0 25px;
      color: #655b57;
      font-size: 14px;
      transition: color .2s ease;
    }
    .nav-links a::after {
      position: absolute;
      right: 0;
      bottom: 17px;
      left: 0;
      height: 2px;
      background: var(--coral);
      content: "";
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--ink); }
    .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
    .nav-cta, .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      border-radius: 999px;
      font-weight: 700;
      transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .nav-cta { flex: 0 0 auto; padding: 11px 17px; color: var(--white); background: var(--ink); font-size: 13px; }
    .nav-cta:hover, .btn-dark:hover { background: var(--berry); transform: translateY(-2px); }
    .menu-toggle {
      display: none;
      width: 40px;
      height: 40px;
      padding: 9px;
      color: var(--ink);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 11px;
    }
    .menu-toggle svg { display: block; width: 20px; height: 20px; }

    main { overflow: hidden; }
    section { padding: 88px 0; }
    .section-kicker, .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--coral-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.4px;
    }
    .section-kicker::before, .eyebrow::before { width: 27px; height: 2px; background: var(--coral); content: ""; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
    .section-head h2 { margin: 9px 0 0; font-size: clamp(27px, 3.4vw, 39px); line-height: 1.28; }
    .section-head p { max-width: 510px; margin: 0; color: var(--muted); }
    .btn { min-height: 46px; padding: 12px 21px; font-size: 14px; }
    .btn-primary { color: var(--white); background: var(--coral); box-shadow: 0 9px 20px rgba(243, 111, 95, .2); }
    .btn-primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
    .btn-outline { color: var(--ink); background: transparent; border: 1px solid var(--ink); }
    .btn-outline:hover { color: var(--white); background: var(--ink); }
    .btn-outline:hover { transform: translateY(-2px); }

    .category-head {
      position: relative;
      padding: 70px 0 62px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .category-head::after {
      position: absolute;
      right: -100px;
      bottom: -150px;
      width: 430px;
      height: 430px;
      border: 1px solid rgba(243,111,95,.24);
      border-radius: 50%;
      box-shadow: 0 0 0 30px rgba(243,111,95,.06), 0 0 0 60px rgba(243,111,95,.035);
      content: "";
    }
    .category-head .container { position: relative; z-index: 1; }
    .crumbs { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; }
    .crumbs a:hover { color: var(--coral-dark); }
    .category-head h1 {
      max-width: 760px;
      margin: 21px 0 15px;
      font-size: clamp(35px, 5vw, 62px);
      line-height: 1.18;
      letter-spacing: -2px;
    }
    .category-head h1 em { color: var(--coral); font-style: normal; }
    .category-intro { max-width: 700px; margin: 0; color: #665852; font-size: 17px; }
    .head-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
    .head-meta span, .tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--berry);
      background: rgba(255,255,255,.68);
      font-size: 12px;
      font-weight: 700;
    }
    .head-meta span { padding: 7px 13px; }
    .filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 22px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow-soft);
    }
    .filter-label { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
    .filter-items { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-items button {
      padding: 7px 13px;
      color: #665b56;
      background: var(--cream);
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 13px;
      transition: .2s ease;
    }
    .filter-items button:hover, .filter-items button.active {
      color: var(--white);
      background: var(--coral);
      border-color: var(--coral);
    }

    .article-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .article-card {
      display: grid;
      grid-template-columns: 200px 1fr;
      min-height: 214px;
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
    .article-card .article-image { min-height: 214px; overflow: hidden; }
    .article-card .article-image img { height: 100%; transition: transform .35s ease; }
    .article-card:hover .article-image img { transform: scale(1.05); }
    .article-content { display: flex; flex-direction: column; padding: 20px 20px 17px; }
    .article-meta { display: flex; justify-content: space-between; gap: 8px; color: #a08378; font-size: 11px; }
    .badge {
      display: inline-flex;
      width: fit-content;
      padding: 4px 9px;
      color: var(--coral-dark);
      background: #ffe2d9;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
    }
    .badge.dark { color: var(--berry); background: #efdce4; }
    .article-content h3 { margin: 13px 0 8px; font-size: 18px; line-height: 1.4; }
    .article-content p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .article-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 17px; color: var(--coral-dark); font-size: 12px; font-weight: 700; }
    .more-link { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-dark); }
    .more-link:hover { color: var(--berry); }
    .more-link span { font-size: 19px; line-height: 1; transition: transform .2s ease; }
    .more-link:hover span { transform: translateX(4px); }
    .more-wrap { margin-top: 28px; text-align: center; }

    .feature-strip { padding-top: 18px; background: var(--paper); }
    .feature-main {
      display: grid;
      grid-template-columns: 1.18fr .82fr;
      min-height: 330px;
      overflow: hidden;
      background: var(--berry);
      border-radius: 18px;
    }
    .feature-main .feature-photo { min-height: 330px; }
    .feature-main .feature-photo img { height: 100%; }
    .feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 35px 42px; color: var(--white); }
    .feature-copy .eyebrow { color: #ffc2b4; }
    .feature-copy h2 { margin: 17px 0 13px; font-size: clamp(25px, 3vw, 38px); line-height: 1.3; }
    .feature-copy p { margin: 0; color: #ead8d4; font-size: 14px; }
    .feature-copy .more-link { margin-top: 24px; color: #ffc2b4; }

    .scope-section { background: var(--cream); }
    .scope-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 50px; align-items: start; }
    .scope-layout h2 { max-width: 410px; margin: 12px 0 16px; font-size: 35px; line-height: 1.3; }
    .scope-layout > div > p { max-width: 430px; margin: 0; color: var(--muted); }
    .scope-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .scope-point { padding: 21px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
    .scope-point strong { display: block; margin-bottom: 6px; color: var(--berry); font-size: 16px; }
    .scope-point p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
    .scope-point b { display: block; margin-bottom: 9px; color: var(--coral); font-size: 23px; line-height: 1; }

    .recommend-section { background: var(--paper); }
    .recommend-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .recommend-list { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 15px; }
    .recommend-item {
      display: grid;
      grid-template-columns: 39px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 16px 20px;
      border-bottom: 1px solid #f0e5df;
    }
    .recommend-item:last-child { border-bottom: 0; }
    .recommend-number { color: var(--coral); font-size: 17px; font-weight: 800; }
    .recommend-item h3 { margin: 0; font-size: 15px; line-height: 1.4; }
    .recommend-item p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
    .recommend-score { color: var(--berry); font-size: 12px; font-weight: 800; white-space: nowrap; }

    .faq-section { background: var(--cream); }
    .faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; align-items: start; }
    .faq-grid h2 { margin: 12px 0 14px; font-size: 36px; line-height: 1.3; }
    .faq-grid > div > p { max-width: 360px; margin: 0; color: var(--muted); }
    .faq-list { border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
      list-style: none;
      cursor: pointer;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { color: var(--coral); content: "+"; font-size: 24px; font-weight: 400; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 700px; margin: -5px 35px 20px 0; color: var(--muted); font-size: 14px; }

    .cta-section { padding: 76px 0; background: var(--ink); }
    .cta-box { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
    .cta-box h2 { margin: 10px 0 9px; color: var(--white); font-size: clamp(27px, 4vw, 43px); line-height: 1.25; }
    .cta-box p { max-width: 590px; margin: 0; color: #c9b9b3; }
    .cta-box .section-kicker { color: #ffae9e; }
    .cta-box .btn { flex: 0 0 auto; }

    footer { padding: 62px 0 25px; color: #e9dcd6; background: var(--berry); }
    .footer-grid { display: grid; grid-template-columns: 1.35fr .75fr .85fr .9fr; gap: 35px; }
    footer .brand { color: var(--white); }
    footer .brand-mark { box-shadow: 5px 5px 0 rgba(243,111,95,.28); }
    footer p { max-width: 260px; margin: 19px 0 0; color: #cdbab3; font-size: 13px; }
    footer h3 { margin: 4px 0 16px; color: #ffc2b4; font-size: 14px; }
    footer ul { padding: 0; margin: 0; list-style: none; }
    footer li { margin: 8px 0; color: #d7c6c0; font-size: 13px; }
    footer li a:hover { color: #ffc2b4; }
    .copyright { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 20px; color: #bca7a0; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; }

    @media (max-width: 1100px) {
      .nav-links { gap: 17px; }
      .nav-cta { display: none; }
      .article-card { grid-template-columns: 165px 1fr; }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
    }
    @media (max-width: 820px) {
      .container { width: min(var(--max), calc(100% - 34px)); }
      .menu-toggle { display: grid; place-items: center; margin-left: auto; }
      .nav-links {
        position: absolute;
        top: 78px;
        right: 17px;
        left: 17px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 10px 18px 15px;
        background: var(--cream);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; }
      .nav-links a::after { bottom: 5px; right: auto; width: 28px; }
      section { padding: 68px 0; }
      .section-head { display: block; }
      .section-head p { margin-top: 12px; }
      .article-list, .recommend-layout { grid-template-columns: 1fr; }
      .scope-layout, .faq-grid { grid-template-columns: 1fr; gap: 30px; }
      .feature-main { grid-template-columns: 1fr; }
      .feature-main .feature-photo { min-height: 250px; }
      .feature-copy { padding: 30px; }
      .cta-box { display: block; }
      .cta-box .btn { margin-top: 25px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .container { width: min(var(--max), calc(100% - 28px)); }
      .navbar { min-height: 68px; }
      .nav-links { top: 68px; right: 14px; left: 14px; }
      .category-head { padding: 48px 0 45px; }
      .category-head h1 { font-size: 37px; letter-spacing: -1px; }
      .category-intro { font-size: 15px; }
      .filter-bar { display: block; padding: 16px; }
      .filter-label { display: block; margin-bottom: 10px; }
      .filter-items { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
      .filter-items button { flex: 0 0 auto; }
      .article-card { display: block; }
      .article-card .article-image { height: 190px; min-height: 0; }
      .article-content { min-height: 200px; }
      .scope-points { grid-template-columns: 1fr; }
      .recommend-item { grid-template-columns: 30px 1fr; gap: 10px; padding: 14px; }
      .recommend-score { grid-column: 2; }
      .feature-main .feature-photo { min-height: 200px; }
      .feature-copy { padding: 25px 22px; }
      .faq-grid h2, .scope-layout h2 { font-size: 29px; }
      .copyright { display: block; }
      .copyright span { display: block; margin-top: 7px; }
      .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    }