/* roulang page: index */
:root{
      --bg:#f6f8f6;
      --bg-soft:#eef3ef;
      --panel:#ffffff;
      --panel-strong:#f9fbf9;
      --text:#10211c;
      --muted:#5f6f68;
      --line:#d7e1dc;
      --line-strong:#bfd0c8;
      --brand:#16614f;
      --brand-strong:#0f4a3d;
      --accent:#d97706;
      --accent-soft:#fff4df;
      --ok:#1f7a55;
      --warn:#b45309;
      --shadow:0 10px 30px rgba(16,33,28,.07);
      --shadow-soft:0 6px 18px rgba(16,33,28,.05);
      --radius:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35)),
        linear-gradient(135deg, rgba(22,97,79,.05), rgba(217,119,6,.03)),
        var(--bg);
      color:var(--text);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.65;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(22,97,79,.18)}
    .site-shell{min-height:100vh}
    .container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
    .topbar{
      position:sticky;
      top:12px;
      z-index:50;
      padding-top:12px;
    }
    .glassnav{
      backdrop-filter: blur(16px);
      background: rgba(255,255,255,.82);
      border:1px solid rgba(215,225,220,.92);
      box-shadow: var(--shadow-soft);
      border-radius:999px;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      letter-spacing:0;
      color:var(--brand-strong);
      white-space:normal;
      line-height:1.1;
    }
    .brand-dot{
      width:12px;
      height:12px;
      border-radius:999px;
      background:linear-gradient(180deg, var(--brand), #1f8a68);
      box-shadow:0 0 0 4px rgba(22,97,79,.12);
      flex:0 0 auto;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.62rem .95rem;
      border-radius:999px;
      color:var(--muted);
      transition:all .18s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .nav-link:hover{
      color:var(--text);
      border-color:var(--line);
      background:rgba(255,255,255,.9);
    }
    .nav-link.active{
      color:var(--brand-strong);
      background:rgba(22,97,79,.08);
      border-color:rgba(22,97,79,.18);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.68rem 1rem;
      border-radius:999px;
      background:var(--brand);
      color:#fff;
      border:1px solid var(--brand);
      box-shadow:0 8px 18px rgba(22,97,79,.14);
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .nav-cta:hover{transform:translateY(-1px);background:var(--brand-strong);border-color:var(--brand-strong)}
    .section-pad{padding:28px 0}
    .hero{
      padding:28px 0 12px;
    }
    .hero-panel{
      background:
        radial-gradient(circle at 92% 10%, rgba(22,97,79,.08), transparent 22%),
        radial-gradient(circle at 10% 0%, rgba(217,119,6,.06), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
      border:1px solid rgba(215,225,220,.95);
      box-shadow:var(--shadow);
      border-radius:calc(var(--radius) + 2px);
      overflow:hidden;
    }
    .hero-title{
      font-size:clamp(2rem, 3vw, 3.45rem);
      line-height:1.08;
      letter-spacing:0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.38rem .7rem;
      border-radius:999px;
      background:rgba(22,97,79,.08);
      color:var(--brand-strong);
      font-size:.9rem;
      font-weight:700;
      border:1px solid rgba(22,97,79,.16);
    }
    .hero-copy{color:#30413a}
    .hero-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--panel);
      box-shadow:var(--shadow-soft);
    }
    .mini-title{
      font-size:1rem;
      font-weight:800;
      color:var(--text);
      letter-spacing:0;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.3rem .6rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .badge-soft{
      background:var(--bg-soft);
      color:var(--brand-strong);
      border-color:rgba(22,97,79,.12);
    }
    .badge-warn{
      background:var(--accent-soft);
      color:var(--warn);
      border-color:rgba(217,119,6,.18);
    }
    .badge-neutral{
      background:#f4f6f5;
      color:var(--muted);
      border-color:var(--line);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding:.88rem 1.1rem;
      border-radius:999px;
      transition:all .18s ease;
      border:1px solid transparent;
      font-weight:700;
      letter-spacing:0;
    }
    .btn-primary{
      background:var(--brand);
      color:#fff;
      border-color:var(--brand);
      box-shadow:0 10px 18px rgba(22,97,79,.14);
    }
    .btn-primary:hover{transform:translateY(-1px);background:var(--brand-strong);border-color:var(--brand-strong)}
    .btn-secondary{
      background:#fff;
      color:var(--brand-strong);
      border-color:rgba(22,97,79,.18);
    }
    .btn-secondary:hover{
      background:rgba(22,97,79,.06);
      border-color:rgba(22,97,79,.28);
      transform:translateY(-1px);
    }
    .btn-ghost{
      background:transparent;
      color:var(--muted);
      border-color:var(--line);
    }
    .btn-ghost:hover{background:#fff;color:var(--text);border-color:var(--line-strong)}
    .section-title{
      font-size:1.45rem;
      line-height:1.2;
      font-weight:800;
      letter-spacing:0;
    }
    .section-desc{color:var(--muted)}
    .grid-card{
      border:1px solid var(--line);
      background:var(--panel);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .grid-card:hover{
      transform:translateY(-2px);
      border-color:rgba(22,97,79,.22);
      box-shadow:var(--shadow);
    }
    .num{
      width:2rem;height:2rem;
      border-radius:6px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(22,97,79,.08);
      color:var(--brand-strong);
      font-weight:800;
      flex:0 0 auto;
    }
    .stat{
      background:linear-gradient(180deg, #fff, #fbfcfb);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:1rem 1rem .95rem;
    }
    .stat-value{
      font-size:1.55rem;
      line-height:1.1;
      font-weight:800;
      letter-spacing:0;
      color:var(--brand-strong);
    }
    .stat-label{color:var(--muted);font-size:.9rem}
    .stat-note{
      color:var(--muted);
      font-size:.88rem;
      border-top:1px dashed var(--line);
      margin-top:.7rem;
      padding-top:.65rem;
    }
    .list-line{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      padding:.8rem 0;
      border-bottom:1px solid var(--line);
    }
    .list-line:last-child{border-bottom:none}
    .dot{
      width:.55rem;height:.55rem;border-radius:999px;background:var(--accent);margin-top:.55rem;flex:0 0 auto;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.48rem .78rem;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--muted);
      transition:all .18s ease;
      white-space:nowrap;
    }
    .filter-chip:hover,
    .filter-chip.active{
      color:var(--brand-strong);
      border-color:rgba(22,97,79,.22);
      background:rgba(22,97,79,.06);
    }
    .topic-item{
      border-bottom:1px solid var(--line);
      padding:1rem 0;
    }
    .topic-item:last-child{border-bottom:none}
    .topic-title{
      font-weight:800;
      line-height:1.28;
      letter-spacing:0;
    }
    .topic-meta{
      color:var(--muted);
      font-size:.86rem;
    }
    .topic-action{
      color:var(--brand-strong);
      font-weight:700;
      font-size:.92rem;
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      white-space:nowrap;
    }
    .topic-action:hover{text-decoration:underline}
    .panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .split-line{border-top:1px solid var(--line)}
    .faq details{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1rem;
      font-weight:800;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq .answer{
      padding:0 1rem 1rem;
      color:var(--muted);
    }
    .chev{
      width:1.1rem;height:1.1rem;flex:0 0 auto;
      transition:transform .18s ease;
      color:var(--muted);
    }
    details[open] .chev{transform:rotate(180deg)}
    .footer{
      color:#4f615a;
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.6);
    }
    .footer a{color:var(--brand-strong)}
    .footer a:hover{text-decoration:underline}
    .form-shell{
      position:relative;
      overflow:hidden;
    }
    .lead-form{
      display:none;
      border-top:1px solid var(--line);
      margin-top:1rem;
      padding-top:1rem;
    }
    .lead-form.open{display:block}
    .field{
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .field label{
      font-size:.9rem;
      font-weight:700;
      color:#31413a;
    }
    .field input,
    .field textarea,
    .field select{
      width:100%;
      border:1px solid var(--line);
      background:#fff;
      border-radius:var(--radius);
      padding:.8rem .9rem;
      color:var(--text);
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .field input:focus,
    .field textarea:focus,
    .field select:focus{
      border-color:rgba(22,97,79,.38);
      box-shadow:0 0 0 4px rgba(22,97,79,.09);
    }
    .helper{
      color:var(--muted);
      font-size:.86rem;
    }
    .float-bar{
      position:sticky;
      bottom:12px;
      z-index:20;
      margin-top:1.25rem;
    }
    .float-bar-inner{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(215,225,220,.94);
      border-radius:999px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    .kicker{
      color:var(--muted);
      font-size:.9rem;
    }
    .tight{
      letter-spacing:0;
    }
    @media (max-width: 1024px){
      .container{width:min(1180px, calc(100% - 24px))}
      .hero-title{font-size:clamp(1.85rem, 4vw, 2.8rem)}
    }
    @media (max-width: 768px){
      .topbar{top:0;padding-top:0}
      .glassnav{border-radius:0 0 20px 20px}
      .hero{padding-top:16px}
      .section-pad{padding:22px 0}
      .nav-cta{padding:.58rem .84rem}
      .hero-title{font-size:2rem}
    }
    @media (max-width: 520px){
      .container{width:min(1180px, calc(100% - 18px))}
      .hero-panel{border-radius:var(--radius)}
      .nav-link{padding:.5rem .7rem;font-size:.92rem}
      .btn{width:100%}
      .mobile-stack{display:grid;grid-template-columns:1fr;gap:.75rem}
      .float-bar-inner{border-radius:18px}
    }

/* roulang page: category1 */
:root {
      --ink: #172725;
      --muted: #667774;
      --soft: #8c9b97;
      --paper: #f4f7f4;
      --panel: #ffffff;
      --line: #dce5e0;
      --green: #176b5c;
      --green-deep: #0d4a40;
      --mint: #dff0e9;
      --orange: #db7142;
      --yellow: #f4c96a;
      --shadow: 0 12px 32px rgba(26, 58, 49, .08);
      --radius: 8px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    .container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
    .topbar { position: absolute; z-index: 20; top: 20px; left: 0; right: 0; }
    .glassnav {
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(220,229,224,.95);
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(31,64,55,.08);
      backdrop-filter: blur(15px);
    }
    .brand-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--green-deep); font-size: 15px; font-weight: 800; white-space: nowrap; }
    .brand-dot { width: 11px; height: 11px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 5px #fce8dd; }
    .nav-link, .nav-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 13px; border-radius: 999px; color: var(--muted); font-size: 13px; transition: .2s ease; }
    .nav-link:hover, .nav-link:focus-visible { color: var(--green-deep); background: var(--mint); outline: none; }
    .nav-link.active { color: var(--green-deep); background: var(--mint); font-weight: 700; }
    .nav-cta { color: #fff; background: var(--green); font-weight: 700; }
    .nav-cta:hover, .nav-cta:focus-visible { background: var(--green-deep); transform: translateY(-1px); outline: none; }
    .hero {
      position: relative; overflow: hidden; padding: 150px 0 82px;
      background: #e5f0ea;
      border-bottom: 1px solid var(--line);
    }
    .hero:after { content:""; position:absolute; right:-80px; top:70px; width:360px; height:360px; border:1px solid rgba(23,107,92,.12); border-radius:50%; }
    .eyebrow, .tag { display:inline-flex; align-items:center; gap:6px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.04em; }
    .eyebrow:before { content:""; width:22px; height:2px; background:var(--orange); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 700px; margin-bottom: 18px; font-size: clamp(36px, 5vw, 62px); line-height: 1.15; letter-spacing: 0; }
    .hero-copy { max-width: 650px; color: var(--muted); font-size: 17px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px; border:1px solid transparent; border-radius:7px; font-size:14px; font-weight:800; transition:.2s ease; }
    .btn-primary { color:#fff; background:var(--green); box-shadow:0 5px 0 #0b5145; }
    .btn-primary:hover { background:var(--green-deep); transform:translateY(1px); box-shadow:0 3px 0 #0b5145; }
    .btn-quiet { color:var(--green-deep); background:#fff; border-color:var(--line); }
    .btn-quiet:hover { border-color:var(--green); background:#f8fffb; }
    .burst { position:absolute; right:9%; top:118px; width:108px; height:108px; display:grid; place-items:center; text-align:center; color:#57351f; background:var(--yellow); clip-path:polygon(50% 0%,61% 13%,77% 5%,81% 22%,98% 25%,88% 41%,100% 54%,84% 63%,91% 81%,72% 79%,63% 98%,49% 86%,35% 100%,29% 81%,9% 84%,17% 65%,0 55%,12% 41%,3% 25%,22% 22%,24% 4%,40% 13%); font-size:12px; font-weight:900; transform:rotate(8deg); }
    .section { padding: 76px 0; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:25px; }
    .section-head h2 { margin-bottom:5px; font-size:30px; line-height:1.25; }
    .section-head p { margin:0; max-width:560px; color:var(--muted); font-size:14px; }
    .filterbar { display:flex; flex-wrap:wrap; gap:10px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
    .filterbar select, .filterbar input { min-height:40px; padding:7px 12px; color:var(--ink); background:#f7faf8; border:1px solid var(--line); border-radius:6px; outline:none; }
    .filterbar select:focus, .filterbar input:focus, textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,92,.12); }
    .filter-chip { padding:8px 13px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:#fff; font-size:13px; transition:.2s; }
    .filter-chip:hover, .filter-chip.active { color:var(--green-deep); border-color:var(--green); background:var(--mint); }
    .content-grid { display:grid; grid-template-columns:minmax(0, 7fr) minmax(280px, 5fr); gap:24px; align-items:start; }
    .topic-list { display:grid; gap:10px; }
    .topic-item { display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:center; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); transition:.2s; }
    .topic-item:hover { border-color:#a7c8bc; box-shadow:var(--shadow); transform:translateY(-2px); }
    .topic-index { color:var(--orange); font-size:21px; font-weight:900; }
    .topic-item h3 { margin:0 0 4px; font-size:17px; }
    .topic-item p { margin:0; color:var(--muted); font-size:13px; }
    .topic-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
    .tag { padding:3px 8px; color:var(--green); background:#edf7f2; border-radius:4px; font-size:11px; letter-spacing:0; }
    .topic-time { color:var(--soft); font-size:12px; white-space:nowrap; }
    .side-stack { display:grid; gap:16px; }
    .side-panel { padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
    .side-panel.dark { color:#e8f4ef; background:var(--green-deep); border-color:var(--green-deep); }
    .side-panel h3 { margin-bottom:14px; font-size:17px; }
    .matrix { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .matrix a { padding:11px 10px; color:var(--muted); background:#f4f8f5; border:1px solid var(--line); border-radius:6px; font-size:13px; }
    .matrix a:hover { color:var(--green-deep); border-color:var(--green); background:var(--mint); }
    .metric-list { display:grid; gap:13px; }
    .metric { display:flex; justify-content:space-between; gap:15px; padding-bottom:10px; border-bottom:1px solid rgba(220,229,224,.8); font-size:13px; }
    .metric:last-child { padding-bottom:0; border-bottom:0; }
    .metric strong { color:var(--green); font-size:18px; }
    .notice { display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:13px; }
    .notice b { color:var(--orange); }
    .data-band { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .metrics-row { display:grid; grid-template-columns:repeat(4,1fr); }
    .metric-box { padding:24px 22px; border-right:1px solid var(--line); }
    .metric-box:last-child { border-right:0; }
    .metric-box strong { display:block; color:var(--green-deep); font-size:30px; line-height:1; }
    .metric-box span { display:block; margin-top:8px; color:var(--muted); font-size:13px; }
    .cta { padding:58px 0; background:#dceee6; }
    .cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
    .cta h2 { margin-bottom:8px; font-size:30px; }
    .cta p { margin:0; color:var(--muted); }
    .privacy { padding:20px 0; color:var(--soft); font-size:12px; }
    footer { padding:28px 0 38px; border-top:1px solid var(--line); background:#f8faf8; }
    .footer-row { display:flex; justify-content:space-between; gap:20px; align-items:center; }
    .footer-note { color:var(--muted); font-size:12px; }
    .modal { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(17,39,34,.45); }
    .modal.open { display:flex; }
    .form-panel { width:min(470px,100%); padding:25px; background:#fff; border-radius:8px; box-shadow:0 24px 70px rgba(14,40,34,.25); }
    .form-head { display:flex; justify-content:space-between; align-items:start; gap:15px; }
    .form-head h2 { margin:0; font-size:23px; }
    .close { width:32px; height:32px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:#fff; }
    .close:hover { color:var(--orange); border-color:var(--orange); }
    .form-panel label { display:block; margin-top:15px; color:var(--muted); font-size:13px; font-weight:700; }
    .form-panel input, .form-panel textarea { width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; outline:none; }
    .form-panel textarea { min-height:84px; resize:vertical; }
    .form-panel .btn { width:100%; margin-top:18px; }
    @media (max-width: 768px) {
      .container { width:min(100% - 28px, 620px); }
      .topbar { top:10px; }
      .glassnav { border-radius:14px; }
      .brand-mark { white-space:normal; line-height:1.3; }
      .hero { padding:145px 0 62px; }
      .burst { right:4%; top:105px; width:82px; height:82px; font-size:10px; }
      .content-grid, .metrics-row { grid-template-columns:1fr; }
      .metric-box { border-right:0; border-bottom:1px solid var(--line); }
      .metric-box:last-child { border-bottom:0; }
      .section-head, .cta-inner, .footer-row { display:block; }
      .section-head p { margin-top:10px; }
      .cta .btn { margin-top:22px; }
    }
    @media (max-width: 520px) {
      h1 { font-size:36px; }
      .hero-copy { font-size:15px; }
      .hero-actions .btn { width:100%; }
      .topic-item { grid-template-columns:30px 1fr; }
      .topic-time { grid-column:2; }
      .filterbar input { width:100%; }
      nav { overflow-x:auto; padding-bottom:2px; }
      .nav-link, .nav-cta { flex:0 0 auto; }
      .footer-note { margin-top:12px; }
    }