/* roulang page: index */
:root{
      --ink:#171316;--coal:#211c20;--panel:#2b2429;--panel-2:#352a31;
      --wine:#762c48;--berry:#a84b68;--cream:#f4ede4;--muted:#b9a9a6;
      --copper:#b58b73;--line:rgba(244,237,228,.13);--soft:rgba(244,237,228,.07);
      --radius:16px;--shadow:0 18px 50px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--ink);color:var(--cream);font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.7}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--copper);outline-offset:3px}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .topbar{position:sticky;top:0;z-index:30;background:rgba(23,19,22,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
    .nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:34px;height:34px;border:1px solid var(--berry);display:grid;place-items:center;color:var(--berry);font-size:13px;letter-spacing:-2px}
    .brand-name{font-size:15px;line-height:1.25;font-weight:800;letter-spacing:.04em}
    .nav-links{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:14px}
    .nav-link{position:relative;padding:25px 0;transition:.25s;color:var(--muted)}
    .nav-link:hover,.nav-link.active{color:var(--cream)}
    .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--berry)}
    .location{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:9px 13px;border-radius:999px;color:var(--muted);font-size:13px;transition:.25s}
    .location:hover{border-color:var(--berry);color:var(--cream);background:var(--soft)}
    .mobile-toggle{display:none;background:none;border:1px solid var(--line);color:var(--cream);padding:8px 12px;border-radius:8px}
    .hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:
      linear-gradient(90deg,rgba(23,19,22,.98) 10%,rgba(23,19,22,.78) 48%,rgba(23,19,22,.25)),linear-gradient(135deg,#321f2a,#171316 62%)}
    .hero:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,black,transparent 80%)}
    .hero-inner{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:auto}
    .eyebrow,.section-kicker{color:var(--copper);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
    h1,h2,h3,p{margin-top:0}
    h1{max-width:680px;font-size:clamp(42px,7vw,86px);line-height:1.05;letter-spacing:-.055em;margin:18px 0 24px;font-weight:900}
    .hero-copy{max-width:620px;color:#d2c5bd;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;padding:12px 20px;border:1px solid transparent;font-weight:700;font-size:14px;transition:.25s}
    .btn-primary{background:var(--wine);color:#fff}
    .btn-primary:hover{background:var(--berry);transform:translateY(-2px);box-shadow:0 10px 24px rgba(168,75,104,.22)}
    .btn-secondary{border-color:var(--line);color:var(--cream);background:rgba(255,255,255,.03)}
    .btn-secondary:hover{border-color:var(--copper);background:var(--soft);transform:translateY(-2px)}
    .hero-stats{display:flex;gap:28px;margin-top:48px;color:var(--muted);font-size:13px}
    .hero-stats strong{display:block;color:var(--cream);font-size:22px;line-height:1.2}
    .hero-art{position:absolute;right:7%;bottom:0;width:410px;height:500px;transform:rotate(7deg);opacity:.85}
    .cover{position:absolute;border:1px solid rgba(244,237,228,.2);background:linear-gradient(145deg,#633c4e,#292127 65%);box-shadow:var(--shadow);overflow:hidden}
    .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,transparent 30%,rgba(0,0,0,.65));}
    .cover span{position:absolute;z-index:2;bottom:18px;left:18px;font-size:12px;color:#eadbd1;letter-spacing:.12em}
    .cover-a{width:245px;height:350px;right:15px;top:28px}
    .cover-b{width:180px;height:260px;left:5px;bottom:18px;background:linear-gradient(145deg,#8a5d55,#33252c)}
    .cover-c{width:135px;height:190px;right:5px;bottom:0;background:linear-gradient(145deg,#493958,#211a22)}
    .section{padding:110px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
    .section-head h2{font-size:clamp(30px,4vw,52px);line-height:1.1;letter-spacing:-.04em;margin:10px 0 0}
    .section-head p{max-width:470px;color:var(--muted);margin:0}
    .feature-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:16px}
    .feature-card,.scene-card,.case-card,.price-card,.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:.28s}
    .feature-card{min-height:275px;padding:28px;position:relative;overflow:hidden}
    .feature-card:first-child{background:linear-gradient(135deg,#3a242f,var(--panel) 60%)}
    .feature-card:hover,.scene-card:hover,.case-card:hover,.price-card:hover{border-color:rgba(181,139,115,.65);transform:translateY(-4px)}
    .number{color:var(--berry);font-size:13px;letter-spacing:.15em}
    .feature-card h3{font-size:24px;margin:48px 0 10px}
    .feature-card p,.scene-card p,.case-card p,.price-card li{color:var(--muted);font-size:14px}
    .arrow{position:absolute;right:24px;bottom:22px;color:var(--copper);font-size:22px}
    .tag{display:inline-flex;padding:5px 9px;border:1px solid rgba(181,139,115,.35);border-radius:999px;color:var(--copper);font-size:12px}
    .scene-layout{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:stretch}
    .scene-card{padding:30px;min-height:340px}
    .scene-visual{position:relative;min-height:340px;background:linear-gradient(145deg,#533242,#241d22);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
    .scene-visual:before{content:"";position:absolute;width:240px;height:340px;right:13%;top:-24px;border:1px solid rgba(244,237,228,.2);transform:rotate(16deg);background:linear-gradient(135deg,rgba(168,75,104,.7),rgba(31,24,29,.9))}
    .scene-visual:after{content:"合规浏览";position:absolute;left:28px;bottom:26px;color:#f4ede4;font-size:28px;font-weight:800;letter-spacing:.08em}
    .steps{margin-top:28px;border-top:1px solid var(--line)}
    .step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
    .step b{color:var(--berry);font-size:13px;min-width:28px}
    .step span{font-size:14px;color:#d4c7c0}
    .case-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
    .case-card{padding:28px;min-height:205px}
    .case-card.main-case{background:linear-gradient(135deg,#432b35,#292127)}
    .metric{font-size:54px;font-weight:900;line-height:1;color:var(--cream);margin:18px 0 10px}
    .price-grid{display:grid;grid-template-columns:.8fr 1.2fr .8fr;gap:16px;align-items:stretch}
    .price-card{padding:28px}
    .price-card.featured{border-color:var(--berry);background:linear-gradient(145deg,#422635,var(--panel))}
    .price-card h3{font-size:22px;margin:14px 0 8px}
    .price{font-size:34px;font-weight:900;margin:22px 0}
    .price small{font-size:13px;color:var(--muted);font-weight:400}
    .price-card ul{padding:0;margin:0 0 25px;list-style:none}
    .price-card li{padding:8px 0;border-bottom:1px solid var(--line)}
    .price-card li:before{content:"✓";color:var(--copper);margin-right:8px}
    .faq-list{max-width:850px;margin:auto}
    .faq-item{margin-bottom:10px;overflow:hidden}
    .faq-question{width:100%;display:flex;justify-content:space-between;text-align:left;background:none;border:0;color:var(--cream);padding:20px 22px;font-weight:700}
    .faq-answer{display:none;padding:0 22px 20px;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span{transform:rotate(45deg)}
    .faq-question span{transition:.2s;color:var(--copper);font-size:22px}
    .cta{padding:70px 0;background:var(--wine);border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
    .cta h2{font-size:clamp(28px,4vw,46px);line-height:1.15;margin:0 0 12px}
    .cta p{color:#ead7d2;margin:0;max-width:580px}
    .footer{background:#121012;padding:56px 0 24px;color:var(--muted)}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
    .footer h3{color:var(--cream);font-size:14px;margin-bottom:16px}
    .footer a{display:block;font-size:13px;padding:4px 0;transition:.2s}
    .footer a:hover{color:var(--cream)}
    .copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px}
    .age-note{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:12px;color:var(--muted)}
    .age-modal{position:fixed;inset:0;z-index:50;background:rgba(10,8,10,.85);display:grid;place-items:center;padding:20px}
    .age-box{width:min(480px,100%);background:var(--panel);border:1px solid var(--berry);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
    .age-box h2{font-size:28px;margin:0 0 14px}.age-box p{color:var(--muted);font-size:14px}
    @media(max-width:900px){.hero-art{right:-90px;opacity:.42}.feature-grid,.price-grid{grid-template-columns:1fr 1fr}.feature-card:first-child{grid-column:span 2}.scene-layout,.case-layout{grid-template-columns:1fr}.nav-links{gap:16px}}
    @media(max-width:680px){.container,.hero-inner{width:min(100% - 28px,1180px)}.nav-shell{min-height:68px}.brand{min-width:0}.brand-name{font-size:12px}.brand-mark{width:30px;height:30px}.nav-links{display:none}.location{margin-left:auto}.mobile-toggle{display:block}.hero{min-height:650px}.hero-art{right:-135px;bottom:30px}.hero-copy{font-size:15px}.hero-stats{gap:18px;margin-top:34px}.hero-stats strong{font-size:18px}.section{padding:74px 0}.section-head{display:block;margin-bottom:28px}.section-head p{margin-top:16px}.feature-grid,.price-grid{grid-template-columns:1fr}.feature-card:first-child{grid-column:auto}.feature-card{min-height:220px}.feature-card h3{margin-top:34px}.cta-inner{display:block}.cta .btn{margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:span 2}.copyright{display:block}.copyright span{display:block;margin-top:8px}}

/* roulang page: category1 */
:root{
      --ink:#171316;--coal:#211c20;--panel:#2b2429;--panel-2:#352a31;
      --wine:#762c48;--berry:#a84b68;--cream:#f4ede4;--muted:#b9a9a6;
      --copper:#b58b73;--line:rgba(244,237,228,.13);--soft:rgba(244,237,228,.07);
      --radius:16px;--shadow:0 18px 50px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--ink);color:var(--cream);font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.7}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:2px solid var(--copper);outline-offset:4px}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .topbar{position:sticky;top:0;z-index:30;background:rgba(23,19,22,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
    .nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:34px;height:34px;border:1px solid var(--berry);display:grid;place-items:center;color:var(--berry);font-size:13px;letter-spacing:-2px}
    .brand-name{font-size:15px;line-height:1.25;font-weight:800;letter-spacing:.04em}
    .nav-links{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:14px}
    .nav-link{position:relative;padding:25px 0;transition:.25s;color:var(--muted)}
    .nav-link:hover,.nav-link.active{color:var(--cream)}
    .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--berry)}
    .location-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;border:1px solid var(--line);padding:8px 12px;border-radius:9px;background:var(--soft)}
    .location-control:hover{color:var(--cream);border-color:var(--copper)}
    .mobile-toggle{display:none;background:none;border:1px solid var(--line);color:var(--cream);padding:8px 12px;border-radius:8px}
    .category-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(110deg,#24191f,#171316 65%)}
    .category-hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(to right,black,transparent)}
    .hero-inner{position:relative;z-index:1;padding:92px 0 84px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
    .eyebrow,.section-kicker{color:var(--copper);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
    .hero-title{font-size:clamp(42px,6vw,78px);line-height:1.08;letter-spacing:-.06em;margin:18px 0 22px;max-width:700px}
    .hero-copy{max-width:620px;color:#d2c5bd;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;padding:12px 20px;border:1px solid transparent;font-weight:700;font-size:14px;transition:.25s}
    .btn-primary{background:var(--wine);color:#fff}
    .btn-primary:hover{background:var(--berry);transform:translateY(-2px);box-shadow:0 10px 24px rgba(168,75,104,.22)}
    .btn-secondary{border-color:var(--line);color:var(--cream);background:rgba(255,255,255,.03)}
    .btn-secondary:hover{border-color:var(--copper);background:var(--soft);transform:translateY(-2px)}
    .hero-panel{min-height:330px;position:relative;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#49303a,#292127 65%);padding:26px;overflow:hidden;box-shadow:var(--shadow)}
    .hero-panel:after{content:"";position:absolute;width:240px;height:360px;right:28px;bottom:-130px;background:linear-gradient(145deg,rgba(168,75,104,.8),rgba(59,31,45,.2));transform:rotate(19deg);border:1px solid rgba(244,237,228,.2)}
    .panel-index{position:absolute;right:25px;top:23px;color:var(--copper);font-size:13px}
    .panel-title{position:absolute;left:26px;bottom:30px;z-index:2;font-size:28px;font-weight:800;max-width:230px;line-height:1.3}
    .hero-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:13px}
    .tag{display:inline-flex;padding:5px 9px;border:1px solid rgba(181,139,115,.35);border-radius:999px;color:var(--copper);font-size:12px}
    .section{padding:96px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
    .section-head h2{font-size:clamp(30px,4vw,52px);line-height:1.1;letter-spacing:-.04em;margin:10px 0 0}
    .section-head p{max-width:470px;color:var(--muted);margin:0}
    .filter-wrap{background:var(--coal);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
    .filter-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:12px}
    .filter-btn,.search-input{min-height:48px;border:1px solid var(--line);background:var(--soft);color:var(--cream);border-radius:9px;padding:0 15px;text-align:left}
    .filter-btn:hover{border-color:var(--copper);background:var(--panel-2)}
    .search-input::placeholder{color:#8f8180}
    .filter-note{margin:15px 0 0;color:var(--muted);font-size:13px}
    .content-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:16px}
    .content-card{min-height:275px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:.28s}
    .content-card:hover{border-color:rgba(181,139,115,.7);transform:translateY(-4px);box-shadow:var(--shadow)}
    .content-card.large{grid-row:span 2;min-height:566px}
    .cover{height:190px;background:linear-gradient(135deg,#633348,#282027 72%);position:relative}
    .large .cover{height:410px;background:linear-gradient(135deg,#803c57,#30212a 60%,#191619)}
    .cover:before{content:"";position:absolute;inset:22px;border:1px solid rgba(244,237,228,.22);transform:rotate(-7deg)}
    .cover:after{content:"";position:absolute;right:24px;top:24px;width:44%;height:70%;background:linear-gradient(145deg,rgba(181,139,115,.5),rgba(118,44,72,.15));transform:skewY(-10deg)}
    .play-mark{position:absolute;left:22px;bottom:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--wine);z-index:2}
    .card-body{padding:20px}
    .card-body h3{font-size:21px;line-height:1.35;margin:12px 0 8px}
    .card-body p{color:var(--muted);font-size:14px;margin:0}
    .card-foot{display:flex;justify-content:space-between;gap:10px;margin-top:18px;color:var(--muted);font-size:12px}
    .scene-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:stretch}
    .scene-index{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
    .scene-index a{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted)}
    .scene-index a:hover,.scene-index a.active{color:var(--cream)}
    .scene-index a.active{border-color:var(--berry)}
    .scene-main{padding:35px;border-radius:var(--radius);background:linear-gradient(135deg,#422735,#2b2429);border:1px solid var(--line);min-height:330px}
    .scene-main h3{font-size:32px;line-height:1.25;margin:42px 0 12px}
    .scene-main p{color:var(--muted);max-width:480px}
    .standards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .standard{padding:27px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}
    .standard strong{display:block;font-size:25px;color:var(--copper);margin-bottom:12px}
    .standard p{color:var(--muted);font-size:14px;margin:0}
    .faq-list{max-width:850px;margin:auto}
    .faq-item{margin-bottom:10px;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
    .faq-question{width:100%;display:flex;justify-content:space-between;text-align:left;background:none;border:0;color:var(--cream);padding:20px 22px;font-weight:700}
    .faq-answer{display:none;padding:0 22px 20px;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span{transform:rotate(45deg)}
    .faq-question span{transition:.2s;color:var(--copper);font-size:22px}
    .cta{padding:68px 0;background:var(--wine);border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
    .cta h2{font-size:clamp(28px,4vw,46px);line-height:1.15;margin:0 0 12px}
    .cta p{color:#ead7d2;margin:0;max-width:580px}
    .footer{background:#121012;padding:56px 0 24px;color:var(--muted)}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
    .footer h3{color:var(--cream);font-size:14px;margin-bottom:16px}
    .footer a{display:block;font-size:13px;padding:4px 0;transition:.2s}
    .footer a:hover{color:var(--cream)}
    .age-note{display:inline-flex;border:1px solid rgba(181,139,115,.4);padding:4px 9px;border-radius:999px;color:var(--copper);font-size:12px}
    .copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px}
    @media(max-width:900px){
      .hero-inner,.scene-layout{grid-template-columns:1fr}
      .hero-panel{min-height:270px}
      .content-grid{grid-template-columns:1fr 1fr}
      .content-card.large{grid-row:auto;min-height:275px}
      .large .cover{height:250px}
      .filter-grid{grid-template-columns:1fr 1fr}
      .standards{grid-template-columns:1fr}
    }
    @media(max-width:680px){
      .container{width:min(100% - 28px,560px)}
      .nav-shell{min-height:68px}
      .brand{min-width:0}
      .brand-name{font-size:13px}
      .nav-links{display:none;position:absolute;left:14px;right:14px;top:68px;padding:16px;background:var(--coal);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:stretch;gap:0}
      .nav-links.show{display:flex}
      .nav-link{padding:12px 8px}
      .nav-link.active:after{bottom:7px}
      .location-control{margin-left:auto}
      .mobile-toggle{display:block}
      .hero-inner{padding:68px 0 62px;gap:30px}
      .hero-title{font-size:clamp(39px,12vw,62px)}
      .hero-copy{font-size:15px}
      .hero-actions .btn{flex:1}
      .section{padding:70px 0}
      .section-head{display:block;margin-bottom:28px}
      .section-head p{margin-top:18px}
      .filter-grid,.content-grid{grid-template-columns:1fr}
      .content-card.large{min-height:0}
      .large .cover{height:250px}
      .scene-main{min-height:280px;padding:25px}
      .cta-inner,.copyright{display:block}
      .cta .btn{margin-top:22px}
      .copyright span{display:block;margin-top:8px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-grid>div:first-child{grid-column:span 2}
    }