/* roulang page: index */
:root{
      --bg:#f3f1ea;--paper:#fbfaf5;--ink:#151918;--muted:#68746e;--forest:#31584e;
      --forest-dark:#1d2522;--lime:#c7f36a;--line:#d9ddd3;--soft:#e8e9e2;
      --radius:14px;--shadow:0 16px 40px rgba(21,25,24,.08);--ease:220ms ease;
      --sidebar:214px;--container:1380px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.85;overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .site-shell{min-height:100vh}
    .side-nav{position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--sidebar);background:var(--forest-dark);color:#e8eee9;padding:28px 22px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08)}
    .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.06em}
    .brand-mark{width:35px;height:35px;background:var(--lime);color:var(--ink);display:grid;place-items:center;border-radius:8px;font-size:15px;font-weight:900}
    .brand small{display:block;color:#96a69d;font-size:10px;letter-spacing:.16em;font-weight:500;margin-top:-3px}
    .nav-label{font-size:11px;color:#81948a;letter-spacing:.18em;margin:42px 0 12px}
    .nav-list{display:flex;flex-direction:column;gap:5px}
    .nav-link{position:relative;display:flex;align-items:center;gap:10px;color:#afbeb5;padding:10px 9px;border-radius:7px;font-size:13px;transition:var(--ease)}
    .nav-link span:first-child{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .nav-link.active span:first-child{color:var(--ink)}
    .nav-link.disabled{opacity:.45;cursor:not-allowed}
    .nav-bottom{margin-top:auto;color:#86978f;font-size:12px;line-height:1.7}
    .nav-cta{display:block;background:#e8eee9;color:var(--forest-dark);padding:10px 12px;text-align:center;border-radius:6px;margin-bottom:18px;font-size:13px;font-weight:800;transition:var(--ease)}
    .nav-cta:hover{background:var(--lime);transform:translateY(-2px)}
    .main-content{margin-left:var(--sidebar)}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    section{padding:108px 0}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--forest);font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{letter-spacing:-.055em;line-height:1.14}
    h1{font-size:clamp(48px,6.7vw,92px);max-width:860px;margin:24px 0 26px;font-weight:950}
    h2{font-size:clamp(34px,4vw,58px);margin:17px 0 20px;font-weight:900}
    h3{font-size:22px;margin-bottom:10px;font-weight:850}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:730px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;padding:0 19px;border:1px solid var(--ink);border-radius:5px;font-weight:850;font-size:14px;transition:var(--ease)}
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent;color:var(--ink)}
    .hero{min-height:760px;padding-top:74px;padding-bottom:70px;background:var(--paper);position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;right:-110px;top:-180px;width:500px;height:500px;border:1px solid #dfe4d7;border-radius:50%;box-shadow:0 0 0 28px rgba(199,243,106,.08),0 0 0 57px rgba(49,88,78,.05)}
    .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:58px;align-items:end;min-height:600px;position:relative;z-index:1}
    .hero-copy{padding-bottom:26px}
    .hero-copy p{max-width:680px}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
    .hero-note{display:flex;gap:18px;align-items:center;margin-top:54px;color:var(--muted);font-size:13px}
    .pulse{width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 7px rgba(199,243,106,.2)}
    .hero-board{background:var(--forest-dark);color:#edf3ed;padding:25px;border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
    .hero-board:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
    .board-head,.board-row,.board-foot{position:relative;z-index:1}
    .board-head{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:18px;margin-bottom:18px}
    .board-kicker{font-size:11px;color:#a9bcb0;letter-spacing:.14em}
    .live{color:var(--lime);font-size:11px;font-weight:800}
    .board-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .board-stat{background:rgba(255,255,255,.07);padding:18px;border-left:3px solid var(--lime)}
    .board-stat strong{display:block;color:var(--lime);font:800 43px/1 Arial,sans-serif;letter-spacing:-.07em}
    .board-stat span{display:block;color:#b7c3bc;font-size:12px;margin-top:11px}
    .progress-wrap{margin-top:25px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
    .progress-line{height:8px;background:#43544b;border-radius:10px;overflow:hidden;margin:12px 0 8px}
    .progress-line i{display:block;height:100%;width:72%;background:var(--lime)}
    .board-foot{display:flex;justify-content:space-between;color:#a9bcb0;font-size:12px}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}
    .section-head>p{max-width:510px;color:var(--muted);margin:0}
    .metrics{background:var(--forest);color:#fff;padding:72px 0}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}
    .metric{padding:27px 25px;border-right:1px solid rgba(255,255,255,.18)}
    .metric:last-child{border-right:0}
    .metric strong{font:900 clamp(42px,5vw,70px)/1 Arial,sans-serif;color:var(--lime);letter-spacing:-.08em}
    .metric span{display:block;color:#c4d3ca;font-size:13px;margin-top:13px}
    .matrix{background:var(--bg)}
    .matrix-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
    .feature-block{background:var(--forest-dark);color:#fff;min-height:410px;padding:38px;position:relative;overflow:hidden;border-radius:16px}
    .feature-block img{position:absolute;inset:0;opacity:.42;z-index:0}
    .feature-block:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,37,34,.94),rgba(29,37,34,.28))}
    .feature-content{position:relative;z-index:1;max-width:470px;height:100%;display:flex;flex-direction:column;justify-content:end}
    .feature-content p{color:#d3ded5}
    .matrix-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .matrix-item{background:var(--paper);border:1px solid var(--line);padding:26px;min-height:198px;transition:var(--ease)}
    .matrix-item:hover{border-color:var(--forest);transform:translateY(-4px);box-shadow:var(--shadow)}
    .index{font:700 12px Arial,sans-serif;color:var(--forest);letter-spacing:.1em}
    .matrix-item p{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:12px}
    .arrow{font-weight:900;color:var(--forest)}
    .topics{background:var(--paper)}
    .topic-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:54px;align-items:start}
    .topic-intro{position:sticky;top:30px}
    .topic-intro p{color:var(--muted)}
    .topic-list{border-top:1px solid var(--line)}
    .topic-entry{display:grid;grid-template-columns:72px 1fr 120px;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:var(--ease)}
    .topic-entry:hover{padding-left:9px;background:#f3f4ed}
    .topic-entry .num{font:800 34px/1 Arial;color:#b6c2b9}
    .topic-entry p{font-size:14px;color:var(--muted);margin:5px 0 0}
    .topic-entry a{justify-self:end;font-size:13px;font-weight:800}
    .topic-entry a:hover{color:var(--forest)}
    .comparison{background:var(--forest-dark);color:#fff}
    .comparison .eyebrow{color:var(--lime)}
    .comparison .section-head>p{color:#b7c7bc}
    .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-card{padding:34px;border:1px solid rgba(255,255,255,.18);background:#26322e;border-radius:12px}
    .compare-card.recommended{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:translateY(-16px)}
    .compare-card p{color:#b7c7bc;font-size:14px}
    .recommended p{color:#3d4a42}
    .compare-list{list-style:none;padding:0;margin:28px 0 0}
    .compare-list li{border-top:1px solid rgba(255,255,255,.16);padding:13px 0;font-size:14px;display:flex;justify-content:space-between;gap:20px}
    .recommended .compare-list li{border-color:rgba(21,25,24,.18)}
    .check{color:var(--lime);font-weight:900}.recommended .check{color:var(--forest)}
    .brand-story{background:var(--bg)}
    .story-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center}
    .story-image{height:530px;position:relative;border-radius:15px;overflow:hidden}
    .story-image:after{content:"MK体育 / FIELD NOTE";position:absolute;left:24px;bottom:20px;color:var(--lime);font:700 12px Arial;letter-spacing:.16em}
    .story-copy p{color:#52605a;line-height:2}
    .story-quote{font-size:26px;line-height:1.45;font-weight:850;border-left:4px solid var(--lime);padding-left:20px;margin:30px 0}
    .campaign{background:var(--paper)}
    .campaign-box{display:grid;grid-template-columns:1.05fr .95fr;background:var(--lime);min-height:360px;overflow:hidden;border-radius:16px}
    .campaign-copy{padding:45px}
    .campaign-copy p{max-width:520px;color:#3f4d43}
    .campaign-art{position:relative;background:var(--forest-dark);min-height:320px;overflow:hidden}
    .campaign-art img{opacity:.62}
    .campaign-art:after{content:"72%";position:absolute;right:25px;bottom:18px;color:var(--lime);font:900 100px/1 Arial;letter-spacing:-.1em}
    .reviews{background:var(--soft)}
    .review-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}
    .rating{font:900 92px/1 Arial;color:var(--forest);letter-spacing:-.1em}
    .stars{color:#73933f;font-size:20px;letter-spacing:5px}
    .review-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .review{background:var(--paper);padding:25px;border:1px solid var(--line)}
    .review p{font-size:15px;color:#4d5b54;line-height:1.85}
    .review cite{font-style:normal;font-size:12px;color:var(--muted)}
    .preview{background:var(--paper)}
    .timeline{position:relative;border-left:2px solid var(--forest);margin-left:14px;padding-left:36px}
    .time-item{position:relative;padding:0 0 35px}
    .time-item:before{content:"";position:absolute;left:-46px;top:7px;width:18px;height:18px;background:var(--lime);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--forest);border-radius:50%}
    .time-item time{font:700 12px Arial;color:var(--forest);letter-spacing:.1em}
    .time-item p{color:var(--muted);max-width:680px;margin-bottom:0}
    .news{background:var(--bg)}
    .news-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:55px}
    .news-list{border-top:1px solid var(--line)}
    .news-item{display:grid;grid-template-columns:100px 1fr 90px;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
    .news-date{font:700 12px Arial;color:var(--forest);padding-top:4px}
    .news-item h3{font-size:20px;margin:0 0 7px}
    .news-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
    .news-item a{font-size:13px;font-weight:850;text-align:right;padding-top:4px}
    .news-item a:hover{color:var(--forest)}
    .news-aside{background:var(--forest-dark);color:#fff;padding:31px;border-radius:13px}
    .news-aside img{height:175px;margin:-31px -31px 25px;width:calc(100% + 62px)}
    .news-aside p{color:#c0cec5;font-size:14px}
    .guide{background:var(--paper)}
    .guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .guide-item{padding:31px 24px;border-right:1px solid var(--line)}
    .guide-item:last-child{border-right:0}
    .guide-item strong{font:900 44px/1 Arial;color:var(--lime);-webkit-text-stroke:1px var(--forest)}
    .guide-item h3{margin-top:22px;font-size:19px}
    .guide-item p{font-size:14px;color:var(--muted);line-height:1.8}
    .data-note{background:var(--forest);color:#fff}
    .data-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
    .data-layout p{color:#c3d0c7}
    .trend-list{display:flex;flex-direction:column;gap:19px}
    .trend-line{display:grid;grid-template-columns:110px 1fr 54px;align-items:center;gap:13px;font-size:13px}
    .trend-line b{height:9px;background:#536f63;border-radius:8px;overflow:hidden}
    .trend-line i{display:block;height:100%;background:var(--lime)}
    .trend-line em{font-style:normal;color:var(--lime);font-family:Arial;font-weight:800}
    .faq{background:var(--bg)}
    .faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}
    .faq-intro p{color:var(--muted)}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;min-height:68px;background:none;border:0;padding:17px 0;display:flex;justify-content:space-between;text-align:left;font-weight:850;font-size:16px;color:var(--ink)}
    .faq-question span:last-child{font:300 27px/1 Arial;transition:var(--ease)}
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;line-height:1.9;transition:max-height 350ms ease}
    .faq-answer p{padding:0 40px 22px 0;margin:0}
    .faq-item.open .faq-answer{max-height:190px}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .form-section{background:var(--forest-dark);color:#fff}
    .form-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
    .form-intro p{color:#b8c8be}
    .contact-line{border-top:1px solid rgba(255,255,255,.18);padding-top:20px;margin-top:35px;color:#cbd8cf;font-size:14px}
    .contact-line strong{display:block;color:var(--lime);font-size:24px;margin-bottom:4px}
    .contact-form{background:#f4f5ee;color:var(--ink);padding:31px;border-radius:13px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
    label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}
    input,select,textarea{width:100%;border:1px solid #ccd2c8;background:#fff;padding:12px 13px;border-radius:5px;color:var(--ink);transition:var(--ease)}
    textarea{resize:vertical;min-height:120px}
    input:hover,select:hover,textarea:hover{border-color:var(--forest)}
    input:focus,select:focus,textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(49,88,78,.13)}
    .field-full{grid-column:1/-1}
    .form-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);margin:17px 0}
    .form-check input{width:16px;height:16px;margin-top:4px}
    .form-status{font-size:13px;color:var(--forest);display:none;margin-top:12px}
    footer{background:#111715;color:#aab9b0;padding:55px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:35px;padding-bottom:45px;border-bottom:1px solid rgba(255,255,255,.14)}
    footer .brand{color:#fff;margin-bottom:17px}
    footer h3{font-size:14px;color:#fff;letter-spacing:0;margin-bottom:15px}
    footer p,footer a{font-size:13px;line-height:2;color:#9eada5}
    footer a:hover{color:var(--lime)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:12px;color:#84958c}
    .footer-bottom a{font-size:12px}
    .mobile-bar{display:none}
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
    .reveal.visible{opacity:1;transform:none}
    @media(max-width:1100px){
      :root{--sidebar:178px}
      .hero-grid,.story-grid,.data-layout,.form-layout{gap:35px}
      h1{font-size:clamp(47px,6vw,74px)}
      .topic-layout,.review-grid,.faq-layout{gap:35px}
    }
    @media(max-width:800px){
      .side-nav{display:none}.main-content{margin-left:0}
      .mobile-bar{height:68px;background:var(--forest-dark);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:40}
      .mobile-bar .brand{font-size:19px}.mobile-bar .brand-mark{width:30px;height:30px}
      .menu-btn{border:1px solid rgba(255,255,255,.28);background:none;color:#fff;padding:7px 12px;border-radius:4px;font-size:12px}
      .mobile-menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--forest-dark);padding:15px 20px;border-top:1px solid rgba(255,255,255,.15)}
      .mobile-menu.show{display:grid;grid-template-columns:1fr 1fr}
      .mobile-menu a{padding:11px 6px;color:#d9e6dc;font-size:13px}
      section{padding:75px 0}.hero{padding-top:55px;min-height:0}
      .hero-grid,.matrix-layout,.topic-layout,.compare-grid,.story-grid,.campaign-box,.review-grid,.news-layout,.data-layout,.faq-layout,.form-layout{grid-template-columns:1fr}
      .hero-board{max-width:600px}.topic-intro{position:static}
      .metric-grid{grid-template-columns:1fr 1fr}.metric{border-bottom:1px solid rgba(255,255,255,.18)}.metric:nth-child(2){border-right:0}
      .compare-card.recommended{transform:none}.review-list{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr 1fr}
      .guide-item:nth-child(2){border-right:0}.guide-item{border-bottom:1px solid var(--line)}
      .campaign-art{min-height:230px}.footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:520px){
      .container{padding-left:20px;padding-right:20px}h1{font-size:43px}h2{font-size:35px}.lead{font-size:16px}
      .hero-actions .btn{width:100%}.hero-note{margin-top:35px}.board-row{grid-template-columns:1fr 1fr}
      .matrix-items{grid-template-columns:1fr}.topic-entry{grid-template-columns:45px 1fr}.topic-entry a{grid-column:2;justify-self:start}
      .news-item{grid-template-columns:75px 1fr}.news-item a{grid-column:2;text-align:left}
      .guide-grid,.metric-grid,.form-grid{grid-template-columns:1fr}.metric{border-right:0}
      .footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:10px}
      .story-image{height:330px}.campaign-copy{padding:30px}.contact-form{padding:21px}
    }
    @media(prefers-reduced-motion:reduce){*,html{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* roulang page: category2 */
:root{
      --bg:#f3f1ea;
      --paper:#fbfaf5;
      --ink:#151918;
      --muted:#68746e;
      --forest:#31584e;
      --forest-dark:#1d2522;
      --lime:#c7f36a;
      --line:#d9ddd3;
      --soft:#e8e9e2;
      --radius:14px;
      --shadow:0 16px 40px rgba(21,25,24,.08);
      --ease:220ms ease;
      --sidebar:178px;
      --container:1380px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      font-size:16px;
      line-height:1.85;
      overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .mobile-bar{display:block}
    .side-nav{
      position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--sidebar);
      background:var(--forest-dark);color:#e8eee9;padding:28px 22px;
      display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08)
    }
    .side-nav-logo,.brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.06em}
    .brand-mark{
      width:35px;height:35px;background:var(--lime);color:var(--ink);
      display:grid;place-items:center;border-radius:8px;font-size:15px;font-weight:900
    }
    .logo-main{display:block;font-size:22px;line-height:1.15}
    .logo-sub{display:block;color:#96a69d;font-size:9px;letter-spacing:.08em;font-weight:500;margin-top:2px}
    .side-nav-logo{display:block}
    .side-nav-links{list-style:none;padding:0;margin:46px 0 0;display:flex;flex-direction:column;gap:5px}
    .side-nav-link{
      position:relative;display:flex;align-items:center;gap:10px;color:#afbeb5;
      padding:10px 9px;border-radius:7px;font-size:13px;transition:var(--ease)
    }
    .nav-icon{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .side-nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .side-nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .side-nav-link.active .nav-icon{color:var(--ink)}
    .side-nav-footer{margin-top:auto;color:#86978f;font-size:11px;word-break:break-all}
    .mobile-menu,.menu-btn{display:none}
    .main-content{margin-left:var(--sidebar)}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    section{padding:96px 0}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--forest);font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:730px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(44px,6vw,80px);line-height:1.08;letter-spacing:-.07em;margin:20px 0 24px;font-weight:950}
    h2{font-size:clamp(32px,4vw,52px);line-height:1.15;letter-spacing:-.055em;margin:0 0 18px;font-weight:900}
    h3{font-size:22px;line-height:1.35;margin:0 0 10px;font-weight:900}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;
      padding:0 19px;border:1px solid var(--ink);border-radius:5px;font-weight:850;
      font-size:14px;transition:var(--ease)
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent;color:var(--ink)}
    .hero{
      min-height:680px;padding:70px 0 60px;background:var(--paper);
      position:relative;overflow:hidden
    }
    .hero:before{
      content:"";position:absolute;right:-120px;top:-180px;width:560px;height:560px;
      border:1px solid #dfe4d7;border-radius:50%;
      box-shadow:0 0 0 28px rgba(199,243,106,.08),0 0 0 57px rgba(49,88,78,.05)
    }
    .hero-grid{
      display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:stretch;
      position:relative;z-index:1
    }
    .hero-copy{padding:30px 0 20px}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
    .crumb{color:var(--muted);font-size:13px;margin-bottom:14px}
    .bento{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:1fr 1fr;gap:13px}
    .bento-main{
      grid-row:span 2;min-height:400px;border-radius:16px;overflow:hidden;
      position:relative;background:var(--forest-dark)
    }
    .bento-main img{opacity:.52}
    .bento-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(29,37,34,.94),rgba(29,37,34,.12))}
    .bento-copy{position:absolute;z-index:1;bottom:26px;left:26px;right:26px;color:#fff}
    .bento-copy p{color:#d5dfd6;font-size:14px}
    .mini-panel{padding:23px;border:1px solid var(--line);background:var(--soft);border-radius:12px;display:flex;flex-direction:column;justify-content:space-between}
    .mini-panel.dark{background:var(--forest);color:#fff;border-color:var(--forest)}
    .mini-number{font-size:46px;line-height:1;font-weight:950;letter-spacing:-.08em}
    .mini-panel p{font-size:13px;margin:10px 0 0;color:var(--muted)}
    .mini-panel.dark p{color:#d0ddd4}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
    .section-head>p{max-width:530px;color:var(--muted);margin:0}
    .filter-shell{background:var(--forest-dark);color:#fff;padding:28px;border-radius:14px}
    .filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
    .filter-btn{
      border:1px solid rgba(255,255,255,.2);background:transparent;color:#d6e0d8;
      padding:9px 15px;border-radius:4px;font-size:13px;transition:var(--ease)
    }
    .filter-btn:hover,.filter-btn.active{background:var(--lime);border-color:var(--lime);color:var(--ink)}
    .schedule-list{border-top:1px solid var(--line)}
    .schedule-item{
      display:grid;grid-template-columns:155px 120px 1fr 130px 110px;gap:20px;
      align-items:center;padding:23px 0;border-bottom:1px solid var(--line);
      transition:var(--ease)
    }
    .schedule-item:hover{padding-left:10px;background:rgba(232,233,226,.55)}
    .date-box strong{display:block;font-size:22px;line-height:1.2}
    .date-box span,.meta{font-size:12px;color:var(--muted)}
    .tag{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;background:var(--soft);color:var(--forest);border-radius:3px;font-size:12px;font-weight:800}
    .status{font-size:12px;color:var(--forest);font-weight:800}
    .status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:7px}
    .item-title{font-weight:900;font-size:17px}
    .item-desc{display:block;color:var(--muted);font-size:13px;margin-top:3px}
    .read-link{font-size:13px;font-weight:900;color:var(--forest);text-align:right}
    .read-link:hover{color:var(--ink)}
    .feature-strip{background:var(--paper)}
    .feature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
    .feature-image{min-height:390px;border-radius:15px;overflow:hidden;position:relative}
    .feature-image img{transition:500ms ease}
    .feature-image:hover img{transform:scale(1.04)}
    .feature-caption{position:absolute;left:25px;right:25px;bottom:22px;color:#fff;z-index:1}
    .feature-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,25,24,.8),transparent 65%)}
    .feature-copy{background:var(--lime);border-radius:15px;padding:35px;display:flex;flex-direction:column;justify-content:end}
    .feature-copy p{color:#354132}
    .timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .timeline-step{padding:25px 22px 29px;border-right:1px solid var(--line)}
    .timeline-step:last-child{border-right:0}
    .timeline-step b{display:block;color:var(--forest);font-size:12px;letter-spacing:.12em;margin-bottom:25px}
    .timeline-step p{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:0}
    .guide-note{background:var(--forest);color:#fff;border-radius:15px;padding:38px;display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;align-items:center}
    .guide-note p{color:#d1ddd4;margin:0}
    .faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;background:none;border:0;text-align:left;padding:20px 0;font-weight:850;display:flex;justify-content:space-between;gap:20px}
    .faq-question span:last-child{font-size:24px;line-height:1;transition:var(--ease)}
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;transition:max-height 300ms ease}
    .faq-answer p{padding:0 35px 20px 0;margin:0}
    .faq-item.open .faq-answer{max-height:160px}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .cta{
      background:var(--lime);padding:64px 0;
      border-top:1px solid rgba(21,25,24,.1);border-bottom:1px solid rgba(21,25,24,.1)
    }
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta p{max-width:620px;color:#354132;margin:0}
    footer{background:var(--forest-dark);color:#e8eee9;padding:66px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:35px}
    footer .brand{color:#fff}
    footer p{color:#aebdb3;font-size:13px;line-height:2}
    footer h3{font-size:14px;color:#fff;margin-bottom:15px}
    footer a{transition:var(--ease)}
    footer a:hover{color:var(--lime)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;margin-top:48px;color:#8fa198;font-size:11px}
    @media(max-width:1024px){
      :root{--sidebar:158px}
      .side-nav{padding:24px 16px}
      .side-nav-link{font-size:12px}
      .hero-grid,.feature-grid{grid-template-columns:1fr}
      .bento{max-width:700px}
      .schedule-item{grid-template-columns:125px 100px 1fr 95px}
      .read-link{display:none}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:768px){
      :root{--sidebar:0px}
      .side-nav{display:none}
      .mobile-bar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--forest-dark);color:#fff;position:relative;z-index:40}
      .mobile-bar>.brand{font-size:20px}
      .menu-btn{display:block;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:4px;padding:7px 11px;font-size:12px}
      .mobile-menu{display:none;position:absolute;top:66px;left:0;right:0;background:var(--forest-dark);padding:10px 20px 18px;border-top:1px solid rgba(255,255,255,.15);z-index:39}
      .mobile-menu.open{display:grid;grid-template-columns:1fr 1fr;gap:3px}
      .mobile-menu a{color:#d5e0d7;padding:10px 5px;font-size:13px}
      .mobile-menu a:hover,.mobile-menu a.active{color:var(--lime)}
      .main-content{margin-left:0}
      section{padding:70px 0}
      .hero{padding:40px 0 50px;min-height:auto}
      h1{font-size:clamp(42px,12vw,62px)}
      .hero-copy{padding-top:0}
      .hero-grid{gap:28px}
      .bento{grid-template-columns:1fr 1fr}
      .bento-main{grid-column:span 2;grid-row:auto;min-height:310px}
      .mini-number{font-size:36px}
      .section-head,.cta-inner{display:block}
      .section-head>p{margin-top:15px}
      .schedule-item{grid-template-columns:1fr 1fr;gap:8px 16px;padding:20px 0}
      .schedule-item .item-title{grid-column:span 2}
      .status{text-align:right}
      .guide-note,.faq-wrap{grid-template-columns:1fr;gap:22px}
      .timeline{grid-template-columns:1fr 1fr}
      .timeline-step:nth-child(2){border-right:0}
      .timeline-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .timeline-step:nth-child(3){border-right:1px solid var(--line)}
      .cta .btn{margin-top:24px}
    }
    @media(max-width:520px){
      .container{padding-left:20px;padding-right:20px}
      .bento{grid-template-columns:1fr}
      .bento-main{grid-column:auto}
      .mini-panel{min-height:130px}
      .timeline{grid-template-columns:1fr}
      .timeline-step,.timeline-step:nth-child(3){border-right:0;border-bottom:1px solid var(--line)}
      .timeline-step:last-child{border-bottom:0}
      .feature-copy{padding:26px}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{display:block;line-height:2}
      .footer-bottom span{display:block;margin-bottom:8px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }

/* roulang page: category3 */
:root{
      --bg:#f3f1ea;
      --paper:#fbfaf5;
      --ink:#151918;
      --muted:#68746e;
      --forest:#31584e;
      --forest-dark:#1d2522;
      --lime:#c7f36a;
      --line:#d9ddd3;
      --soft:#e8e9e2;
      --white:#fffef9;
      --danger:#b85b4e;
      --radius:14px;
      --shadow:0 16px 40px rgba(21,25,24,.08);
      --ease:220ms ease;
      --sidebar:214px;
      --container:1380px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      font-size:16px;
      line-height:1.85;
      overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .mobile-bar{display:block}
    .side-nav{
      position:fixed;
      z-index:30;
      left:0;
      top:0;
      bottom:0;
      width:var(--sidebar);
      background:var(--forest-dark);
      color:#e8eee9;
      padding:28px 22px;
      display:flex;
      flex-direction:column;
      border-right:1px solid rgba(255,255,255,.08)
    }
    .side-nav-logo{display:block}
    .logo-main{display:block;color:#fff;font-weight:900;font-size:23px;letter-spacing:-.07em}
    .logo-sub{display:block;color:#91a29a;font-size:10px;letter-spacing:.08em;margin-top:1px}
    .side-nav-links{list-style:none;padding:0;margin:45px 0 0;display:flex;flex-direction:column;gap:5px}
    .side-nav-link{
      position:relative;
      display:flex;
      align-items:center;
      gap:10px;
      color:#afbeb5;
      padding:10px 9px;
      border-radius:7px;
      font-size:13px;
      transition:var(--ease)
    }
    .nav-icon{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .side-nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .side-nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .side-nav-link.active .nav-icon{color:var(--ink)}
    .side-nav-footer{margin-top:auto;color:#86978f;font-size:11px;letter-spacing:.06em}
    .mobile-menu,.menu-btn{display:none}
    .main-content{margin-left:var(--sidebar)}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    section{padding:100px 0}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--forest);font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{letter-spacing:-.055em;line-height:1.15}
    h1{font-size:clamp(44px,6.2vw,82px);margin:22px 0 26px;max-width:780px}
    h2{font-size:clamp(34px,4vw,54px);margin:15px 0 20px}
    h3{font-size:22px;margin-bottom:10px}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:730px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:13px;
      min-height:48px;
      padding:0 19px;
      border:1px solid var(--ink);
      border-radius:5px;
      font-weight:850;
      font-size:14px;
      transition:var(--ease)
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent;color:var(--ink)}
    .hero{
      min-height:720px;
      padding-top:82px;
      padding-bottom:78px;
      background:var(--paper);
      position:relative;
      overflow:hidden
    }
    .hero:after{
      content:"";
      position:absolute;
      right:-130px;
      top:-190px;
      width:530px;
      height:530px;
      border:1px solid #dfe4d7;
      border-radius:50%;
      box-shadow:0 0 0 28px rgba(199,243,106,.08),0 0 0 58px rgba(49,88,78,.05)
    }
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}
    .breadcrumb{display:flex;gap:10px;color:var(--muted);font-size:13px;margin-bottom:45px}
    .breadcrumb a:hover{color:var(--forest)}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:34px}
    .hero-visual{position:relative;min-height:520px}
    .hero-photo{height:390px;position:absolute;inset:35px 0 auto 80px;border-radius:15px;overflow:hidden;background:var(--forest)}
    .hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(29,37,34,.1),rgba(29,37,34,.72))}
    .hero-photo img{opacity:.86}
    .visual-tag{position:absolute;left:0;top:0;background:var(--lime);padding:9px 13px;border-radius:4px;font-size:12px;font-weight:900;z-index:2}
    .match-panel{
      position:absolute;
      left:18px;
      bottom:0;
      width:330px;
      background:var(--forest-dark);
      color:#eff5ef;
      padding:24px;
      border-radius:10px;
      box-shadow:var(--shadow);
      z-index:3
    }
    .panel-top{display:flex;justify-content:space-between;color:#a7b8ad;font-size:12px}
    .team-line{display:flex;align-items:center;justify-content:space-between;margin:22px 0 18px;font-size:21px;font-weight:900}
    .team-line span:nth-child(2){color:var(--lime);font-family:Arial,sans-serif;font-size:13px}
    .progress{height:7px;background:#43534b;margin:8px 0 16px;overflow:hidden}
    .progress i{display:block;height:100%;background:var(--lime)}
    .panel-note{color:#aab9b0;font-size:12px}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
    .section-head>p{max-width:520px;color:var(--muted);margin:0}
    .section-index{font-family:Arial,sans-serif;color:var(--forest);font-size:13px;letter-spacing:.12em}
    .route-section{background:var(--bg)}
    .route-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
    .route-main{
      min-height:370px;
      padding:38px;
      color:#fff;
      background:var(--forest-dark);
      border-radius:15px;
      position:relative;
      overflow:hidden
    }
    .route-main:before{content:"A / B";position:absolute;right:28px;top:16px;font:900 88px/1 Arial;color:rgba(255,255,255,.06)}
    .route-main p{color:#c4d1c8;max-width:650px}
    .route-main .mini-line{border-top:1px solid rgba(255,255,255,.2);padding-top:18px;margin-top:55px;display:flex;justify-content:space-between;gap:20px;color:#dce7df;font-size:13px}
    .route-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .route-item{border:1px solid var(--line);background:var(--paper);padding:24px;transition:var(--ease)}
    .route-item:hover{border-color:var(--forest);transform:translateY(-4px);box-shadow:var(--shadow)}
    .route-item strong{font-family:Arial,sans-serif;color:var(--forest);font-size:13px}
    .route-item p{font-size:14px;color:var(--muted);line-height:1.75;margin:12px 0 0}
    .contrast-section{background:var(--forest-dark);color:#fff}
    .contrast-section .eyebrow{color:var(--lime)}
    .contrast-section .section-head>p{color:#b7c7bc}
    .contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
    .contrast-card{padding:34px;border:1px solid rgba(255,255,255,.18);background:#26322e;border-radius:12px}
    .contrast-card.featured{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:translateY(18px)}
    .contrast-card p{color:#b7c7bc;font-size:14px}
    .featured p{color:#36443c}
    .contrast-label{font-size:12px;letter-spacing:.14em;font-weight:900;color:#a9bbb0}
    .featured .contrast-label{color:#486049}
    .contrast-card h3{font-size:29px;margin:16px 0}
    .compare-list{list-style:none;padding:0;margin:25px 0 0}
    .compare-list li{border-top:1px solid rgba(255,255,255,.16);padding:13px 0;font-size:14px;display:flex;justify-content:space-between;gap:20px}
    .featured .compare-list li{border-color:rgba(21,25,24,.18)}
    .compare-list b{font-weight:800}
    .dimension-section{background:var(--paper)}
    .dimension-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
    .dimension-copy p{color:var(--muted);line-height:2}
    .dimension-list{border-top:1px solid var(--line)}
    .dimension-row{display:grid;grid-template-columns:80px 1fr 150px;gap:25px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
    .dimension-row .num{font-family:Arial,sans-serif;color:var(--forest);font-weight:900}
    .dimension-row p{font-size:14px;color:var(--muted);margin:5px 0 0}
    .scale{height:6px;background:var(--soft);position:relative}
    .scale i{display:block;height:100%;background:var(--forest)}
    .scale em{display:block;text-align:right;font:700 11px Arial;color:var(--muted);margin-top:7px;font-style:normal}
    .visual-section{padding-top:80px;background:var(--bg)}
    .visual-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:stretch}
    .visual-image{height:520px;border-radius:16px;overflow:hidden;position:relative;background:var(--forest)}
    .visual-image img{transition:transform .5s ease}
    .visual-image:hover img{transform:scale(1.035)}
    .image-caption{position:absolute;bottom:0;left:0;right:0;padding:52px 30px 26px;color:#fff;background:linear-gradient(transparent,rgba(21,25,24,.85));font-size:13px}
    .story-box{padding:34px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
    .story-box p{color:var(--muted);line-height:2}
    .quote{border-left:4px solid var(--lime);padding:15px 0 15px 20px;font-size:20px;font-weight:800;line-height:1.55;margin:28px 0}
    .scenario-section{background:var(--paper)}
    .scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .scenario-card{padding:27px;border-top:4px solid var(--forest);background:var(--bg);min-height:230px}
    .scenario-card:nth-child(2){border-color:var(--lime)}
    .scenario-card:nth-child(3){border-color:#829a8d}
    .scenario-card p{color:var(--muted);font-size:14px;line-height:1.85}
    .scenario-card a{font-size:13px;font-weight:900;color:var(--forest)}
    .notes-section{background:#e2e5dc}
    .notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
    .note-panel{background:var(--paper);padding:32px;border:1px solid var(--line)}
    .note-panel.dark{background:var(--forest);color:#fff;border-color:var(--forest)}
    .note-panel.dark p{color:#d0ded4}
    .note-list{list-style:none;margin:20px 0 0;padding:0}
    .note-list li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:14px}
    .note-panel.dark .note-list li{border-color:rgba(255,255,255,.18)}
    .note-list span{color:var(--forest);font-family:Arial;font-weight:900}
    .note-panel.dark .note-list span{color:var(--lime)}
    .faq-section{background:var(--bg)}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}
    .faq-intro p{color:var(--muted);line-height:2}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;min-height:68px;border:0;background:transparent;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:850;color:var(--ink);padding:16px 0}
    .faq-icon{font-size:25px;color:var(--forest);transition:var(--ease)}
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;line-height:1.9;transition:max-height .35s ease}
    .faq-answer p{padding:0 45px 20px 0;margin:0}
    .faq-item.open .faq-icon{transform:rotate(45deg);color:var(--forest)}
    .faq-item.open .faq-answer{max-height:180px}
    .cta-section{padding:88px 0;background:var(--lime)}
    .cta-box{display:flex;justify-content:space-between;align-items:end;gap:45px}
    .cta-box p{max-width:600px;color:#3f5146;margin:0}
    .cta-actions{display:flex;gap:10px;flex-wrap:wrap}
    footer{background:var(--forest-dark);color:#e7eee8;padding:65px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;gap:45px;padding-bottom:55px}
    footer .brand{color:#fff}
    footer .brand p,footer p{color:#9eafa5;font-size:13px;line-height:1.9}
    footer h3{font-size:14px;color:#fff;letter-spacing:.04em;margin-bottom:13px}
    footer a{color:#b4c2ba;transition:var(--ease)}
    footer a:hover{color:var(--lime)}
    .footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;color:#8fa097;font-size:12px}
    .footer-bottom a{color:#c8d5cc}
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
    .reveal.show{opacity:1;transform:none}
    @media (max-width:1100px){
      :root{--sidebar:178px}
      .hero-grid,.dimension-layout,.faq-layout{gap:38px}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .side-nav{display:none}
      .main-content{margin-left:0}
      .mobile-bar{height:68px;position:relative;z-index:40;background:var(--forest-dark);display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#fff}
      .mobile-bar>.brand{font-size:20px}
      .menu-btn{display:block;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:5px;padding:7px 11px;font-size:12px}
      .mobile-menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--forest-dark);padding:10px 20px 18px;border-top:1px solid rgba(255,255,255,.15)}
      .mobile-menu.open{display:block}
      .mobile-menu a{display:block;color:#c4d0c8;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
      .mobile-menu a:hover,.mobile-menu a.active{color:var(--lime)}
      section{padding:75px 0}
      .hero{min-height:auto;padding:55px 0 65px}
      .hero-grid,.route-grid,.visual-grid,.dimension-layout,.faq-layout{grid-template-columns:1fr}
      .hero-visual{min-height:460px;margin-top:20px}
      .hero-photo{left:40px;height:330px}
      .match-panel{width:290px}
      .section-head,.cta-box{display:block}
      .section-head>p{margin-top:18px}
      .contrast-grid,.notes-grid{grid-template-columns:1fr}
      .contrast-card.featured{transform:none}
      .scenario-grid{grid-template-columns:1fr}
      .dimension-row{grid-template-columns:55px 1fr}
      .dimension-row .scale{grid-column:2}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-bottom:10px}
    }
    @media (max-width:520px){
      h1{font-size:42px}
      h2{font-size:35px}
      .lead{font-size:16px}
      .hero-actions,.cta-actions{display:grid;grid-template-columns:1fr}
      .btn{width:100%}
      .hero-visual{min-height:390px}
      .hero-photo{left:0;inset-top:30px;height:275px}
      .match-panel{left:12px;width:calc(100% - 24px);padding:18px}
      .route-side{grid-template-columns:1fr}
      .route-main{padding:27px;min-height:330px}
      .visual-image{height:350px}
      .footer-grid{grid-template-columns:1fr;gap:25px}
    }
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
      .reveal{opacity:1;transform:none}
    }

/* roulang page: category4 */
:root{
      --bg:#f3f1ea;
      --paper:#fbfaf5;
      --ink:#151918;
      --muted:#68746e;
      --forest:#31584e;
      --forest-dark:#1d2522;
      --lime:#c7f36a;
      --line:#d9ddd3;
      --soft:#e8e9e2;
      --white:#ffffff;
      --radius:14px;
      --shadow:0 16px 40px rgba(21,25,24,.08);
      --shadow-soft:0 8px 24px rgba(21,25,24,.06);
      --ease:220ms ease;
      --sidebar:178px;
      --container:1380px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      font-size:16px;
      line-height:1.85;
      overflow-x:hidden;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:4px}
    .mobile-bar{display:none}
    .side-nav{
      position:fixed;
      z-index:30;
      left:0;
      top:0;
      bottom:0;
      width:var(--sidebar);
      background:var(--forest-dark);
      color:#e8eee9;
      padding:28px 22px;
      display:flex;
      flex-direction:column;
      border-right:1px solid rgba(255,255,255,.08)
    }
    .side-nav-logo,.brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.06em}
    .brand-mark{
      width:35px;
      height:35px;
      background:var(--lime);
      color:var(--ink);
      display:grid;
      place-items:center;
      border-radius:8px;
      font-size:15px;
      font-weight:900;
      flex:0 0 auto
    }
    .logo-main{display:block;font-size:21px;line-height:1.2;letter-spacing:-.08em}
    .logo-sub{
      display:block;
      color:#96a69d;
      font-size:9px;
      letter-spacing:.08em;
      font-weight:500;
      margin-top:3px;
      word-break:break-all
    }
    .nav-label{
      font-size:11px;
      color:#81948a;
      letter-spacing:.18em;
      margin:42px 0 12px
    }
    .side-nav-links{display:flex;flex-direction:column;gap:5px;list-style:none;padding:0;margin:0}
    .side-nav-link{
      position:relative;
      display:flex;
      align-items:center;
      gap:10px;
      color:#afbeb5;
      padding:10px 9px;
      border-radius:7px;
      font-size:13px;
      transition:var(--ease)
    }
    .nav-icon{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .side-nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .side-nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .side-nav-link.active .nav-icon{color:var(--ink)}
    .side-nav-footer{margin-top:auto;color:#86978f;font-size:11px;line-height:1.7;word-break:break-all}
    .main-content{margin-left:var(--sidebar)}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    section{padding:104px 0}
    .eyebrow{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--forest);
      font-size:12px;
      letter-spacing:.16em;
      font-weight:900;
      text-transform:uppercase
    }
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:730px}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{letter-spacing:-.055em}
    h1{font-size:clamp(45px,6.3vw,86px);line-height:1.06;margin-bottom:27px;font-weight:950}
    h2{font-size:clamp(34px,4vw,58px);line-height:1.15;margin-bottom:22px;font-weight:930}
    h3{font-size:clamp(20px,2vw,28px);line-height:1.35;margin-bottom:12px;font-weight:900}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:13px;
      min-height:48px;
      padding:0 19px;
      border:1px solid var(--ink);
      border-radius:5px;
      font-weight:850;
      font-size:14px;
      transition:var(--ease)
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent;color:var(--ink)}
    .hero{
      min-height:720px;
      padding-top:70px;
      padding-bottom:68px;
      background:var(--paper);
      position:relative;
      overflow:hidden
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.38;
      background-image:linear-gradient(rgba(49,88,78,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(49,88,78,.08) 1px,transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(90deg,#000 0%,transparent 85%)
    }
    .hero:after{
      content:"";
      position:absolute;
      right:-150px;
      top:-170px;
      width:570px;
      height:570px;
      border:1px solid #dfe4d7;
      border-radius:50%;
      box-shadow:0 0 0 28px rgba(199,243,106,.08),0 0 0 57px rgba(49,88,78,.05)
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1fr .88fr;
      gap:65px;
      align-items:center;
      position:relative;
      z-index:1
    }
    .crumb{font-size:12px;color:var(--muted);margin-bottom:42px}
    .crumb span{color:var(--forest);font-weight:800}
    .hero-copy{max-width:760px}
    .hero-copy .lead{max-width:680px}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
    .trust-line{display:flex;flex-wrap:wrap;gap:24px;margin-top:45px;color:var(--muted);font-size:13px}
    .trust-line strong{color:var(--ink);font-size:20px;display:block;line-height:1.2}
    .hero-visual{position:relative;min-height:520px}
    .hero-photo{
      position:absolute;
      top:0;
      right:0;
      width:79%;
      height:420px;
      border-radius:17px;
      overflow:hidden;
      background:var(--soft);
      box-shadow:var(--shadow)
    }
    .hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 35%,rgba(29,37,34,.55))}
    .hero-photo img{filter:saturate(.8)}
    .visual-note{
      position:absolute;
      left:0;
      bottom:25px;
      width:245px;
      padding:24px;
      background:var(--forest-dark);
      color:#eff4ee;
      border-left:5px solid var(--lime);
      z-index:2;
      box-shadow:var(--shadow)
    }
    .visual-note .number{font-size:55px;line-height:1;font-weight:950;color:var(--lime);letter-spacing:-.08em}
    .visual-note small{display:block;color:#aebeb4;font-size:12px;margin-top:8px}
    .visual-stamp{
      position:absolute;
      right:-18px;
      bottom:0;
      width:110px;
      height:110px;
      border:1px solid var(--forest);
      border-radius:50%;
      display:grid;
      place-items:center;
      color:var(--forest);
      font-size:11px;
      font-weight:900;
      letter-spacing:.12em;
      transform:rotate(12deg);
      background:rgba(243,241,234,.86)
    }
    .anchor-section{padding:24px 0;background:var(--forest-dark);color:#eef4ed}
    .anchor-row{display:flex;align-items:center;gap:26px;overflow-x:auto;white-space:nowrap}
    .anchor-row span{font-size:12px;color:#9fb0a6;letter-spacing:.1em}
    .anchor-row a{font-size:14px;border-bottom:1px solid transparent;padding:8px 0;transition:var(--ease)}
    .anchor-row a:hover{color:var(--lime);border-color:var(--lime)}
    .intro-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:start}
    .intro-copy{max-width:780px;font-size:17px;color:#4f5c55;line-height:2}
    .intro-copy p{margin-bottom:22px}
    .side-index{border-top:1px solid var(--line)}
    .side-index div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
    .side-index b{font-family:Arial,sans-serif;color:var(--forest)}
    .dark-feature{background:var(--forest-dark);color:#fff}
    .dark-feature .eyebrow{color:var(--lime)}
    .dark-feature .lead{color:#bdcbc1}
    .feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:stretch}
    .feature-image{min-height:570px;border-radius:17px;overflow:hidden;position:relative;background:#26332e}
    .feature-image img{filter:saturate(.74);transition:transform .6s ease}
    .feature-image:hover img{transform:scale(1.04)}
    .image-caption{position:absolute;left:24px;right:24px;bottom:24px;background:rgba(29,37,34,.86);padding:18px 20px;color:#fff;font-size:13px}
    .feature-text{display:flex;flex-direction:column;justify-content:center}
    .feature-text p{color:#bdcbc1;line-height:2;margin-bottom:22px}
    .chapter-list{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid rgba(255,255,255,.2)}
    .chapter-list li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:14px}
    .chapter-list b{color:var(--lime);font-family:Arial,sans-serif}
    .chapter-list span{color:#dce7de}
    .chapter-grid{display:grid;grid-template-columns:80px 1fr 1fr;gap:35px;align-items:start}
    .chapter-no{font-family:Arial,sans-serif;font-size:74px;font-weight:900;line-height:1;color:var(--forest);letter-spacing:-.1em}
    .chapter-copy{font-size:17px;line-height:2;color:#4f5c55}
    .chapter-copy p{margin-bottom:20px}
    .quote-box{padding:32px;border-left:5px solid var(--lime);background:var(--paper);box-shadow:var(--shadow-soft);font-size:22px;line-height:1.6;font-weight:800}
    .quote-box small{display:block;font-size:12px;line-height:1.7;color:var(--muted);font-weight:500;margin-top:18px}
    .split-section{background:var(--soft)}
    .split-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}
    .split-photo{height:530px;overflow:hidden;border-radius:16px;background:#d3d9cf}
    .split-photo img{transition:transform .6s ease}
    .split-photo:hover img{transform:scale(1.035)}
    .bullet-list{list-style:none;padding:0;margin:28px 0 0}
    .bullet-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:15px 0;border-top:1px solid var(--line);font-size:15px;color:#4f5c55}
    .bullet-list b{color:var(--forest);font-family:Arial,sans-serif}
    .wide-story{padding-top:92px;padding-bottom:92px}
    .wide-story-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end}
    .wide-story h2{max-width:740px}
    .wide-story p{font-size:18px;line-height:2;color:#4f5c55;max-width:800px}
    .story-aside{border-top:3px solid var(--forest);padding-top:20px;color:var(--muted);font-size:14px}
    .story-aside strong{display:block;color:var(--ink);font-size:32px;line-height:1.15;margin-bottom:8px}
    .related{background:var(--paper)}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
    .section-head>p{max-width:520px;color:var(--muted);margin:0}
    .related-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px}
    .related-card{border:1px solid var(--line);background:var(--bg);transition:var(--ease);overflow:hidden}
    .related-card:hover{transform:translateY(-4px);border-color:var(--forest);box-shadow:var(--shadow-soft)}
    .related-card.large{grid-row:span 2}
    .related-image{height:220px;background:var(--soft);overflow:hidden}
    .related-card.large .related-image{height:335px}
    .related-card:hover img{transform:scale(1.04)}
    .related-image img{transition:transform .5s ease}
    .related-body{padding:22px}
    .tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:900;letter-spacing:.05em;border-radius:3px}
    .related-body h3{font-size:21px;margin:13px 0 8px}
    .related-body p{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:14px}
    .read-link{font-size:13px;font-weight:900;color:var(--forest)}
    .read-link:hover{color:var(--ink)}
    .timeline-section{background:var(--bg)}
    .timeline{max-width:950px;margin:0 auto;border-left:1px solid #aab9ad;padding-left:34px}
    .timeline-item{position:relative;padding:0 0 38px}
    .timeline-item:last-child{padding-bottom:0}
    .timeline-item:before{content:"";position:absolute;left:-40px;top:8px;width:11px;height:11px;background:var(--lime);border:3px solid var(--forest-dark);border-radius:50%}
    .timeline-meta{font-size:12px;color:var(--forest);font-weight:900;letter-spacing:.1em;margin-bottom:7px}
    .timeline-item h3{font-size:23px;margin-bottom:7px}
    .timeline-item p{color:var(--muted);font-size:15px;max-width:760px}
    .faq-section{background:var(--paper)}
    .faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;min-height:68px;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--ink);font-weight:850;padding:18px 0;gap:20px}
    .faq-icon{width:25px;height:25px;position:relative;flex:0 0 auto}
    .faq-icon:before,.faq-icon:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--forest);transform:translate(-50%,-50%);transition:var(--ease)}
    .faq-icon:after{transform:translate(-50%,-50%) rotate(90deg)}
    .faq-item.open .faq-icon:after{transform:translate(-50%,-50%) rotate(0);opacity:0}
    .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
    .faq-answer>div{overflow:hidden;color:var(--muted);font-size:14px;line-height:1.9}
    .faq-item.open .faq-answer{grid-template-rows:1fr}
    .faq-item.open .faq-answer>div{padding:0 40px 20px 0}
    .cta-section{padding:80px 0;background:var(--lime)}
    .cta-grid{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:end}
    .cta-section .lead{color:#3e4a40}
    .consult-form{background:var(--paper);padding:28px;border:1px solid rgba(21,25,24,.18);border-radius:12px;box-shadow:var(--shadow-soft)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .field{display:flex;flex-direction:column;gap:6px}
    .field.full{grid-column:1/-1}
    .field label{font-size:12px;font-weight:900;color:var(--forest)}
    .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;padding:11px 12px;border-radius:5px;color:var(--ink);transition:var(--ease)}
    .field textarea{min-height:100px;resize:vertical}
    .field input:hover,.field select:hover,.field textarea:hover{border-color:#9aaca0}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest);outline:3px solid rgba(199,243,106,.55)}
    .form-check{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);margin:15px 0}
    .form-check input{margin-top:5px;accent-color:var(--forest)}
    .form-status{font-size:13px;color:var(--forest);margin-top:11px;min-height:24px}
    footer{background:var(--forest-dark);color:#dce7de;padding:68px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr 1fr;gap:45px;padding-bottom:54px}
    footer .brand{color:#fff}
    footer p{color:#aebeb4;font-size:13px;line-height:2;margin-top:17px}
    footer h3{font-size:14px;color:#fff;letter-spacing:.04em;margin-bottom:14px}
    footer a{transition:var(--ease)}
    footer a:hover{color:var(--lime)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#92a39a;font-size:11px;line-height:1.8}
    .mobile-menu{display:none}
    @media(max-width:1100px){
      :root{--sidebar:166px}
      .hero-grid,.feature-grid,.split-grid,.cta-grid{gap:35px}
      .intro-grid,.faq-grid{gap:45px}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:800px){
      :root{--sidebar:0px}
      .side-nav{display:none}
      .mobile-bar{
        display:flex;
        position:fixed;
        z-index:50;
        top:0;
        left:0;
        right:0;
        height:68px;
        padding:12px 18px;
        align-items:center;
        justify-content:space-between;
        background:rgba(29,37,34,.97);
        color:#fff;
        border-bottom:1px solid rgba(255,255,255,.12)
      }
      .mobile-bar .brand{font-size:19px}
      .mobile-bar .brand-mark{width:32px;height:32px}
      .menu-btn{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:5px;padding:7px 11px;font-size:12px}
      .mobile-menu{
        position:fixed;
        z-index:45;
        top:68px;
        left:0;
        right:0;
        display:flex;
        flex-direction:column;
        background:var(--forest-dark);
        color:#fff;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
        border-bottom:1px solid rgba(255,255,255,.12)
      }
      .mobile-menu.open{max-height:520px}
      .mobile-menu a{padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.11);font-size:14px;color:#d9e4dc}
      .mobile-menu a:hover,.mobile-menu a.active{background:var(--lime);color:var(--ink)}
      .main-content{margin-left:0}
      .hero{padding-top:125px;min-height:auto}
      .hero-grid,.intro-grid,.feature-grid,.chapter-grid,.split-grid,.wide-story-inner,.faq-grid,.cta-grid{grid-template-columns:1fr}
      .hero-visual{min-height:455px;margin-top:20px}
      .hero-photo{width:88%;height:350px}
      .feature-image{min-height:390px}
      .chapter-no{font-size:54px}
      .related-grid{grid-template-columns:1fr 1fr}
      .related-card.large{grid-row:auto;grid-column:1/-1}
      .related-card.large .related-image{height:280px}
      .footer-bottom{flex-direction:column}
    }
    @media(max-width:520px){
      section{padding:72px 0}
      .container{padding-left:20px;padding-right:20px}
      h1{font-size:43px}
      h2{font-size:35px}
      .lead{font-size:16px}
      .hero-actions .btn{width:100%}
      .trust-line{gap:15px;margin-top:32px}
      .hero-visual{min-height:390px}
      .hero-photo{height:300px;width:92%}
      .visual-note{width:205px;bottom:12px;padding:18px}
      .visual-note .number{font-size:45px}
      .anchor-row{gap:17px}
      .intro-grid,.feature-grid,.split-grid,.wide-story-inner,.faq-grid{gap:32px}
      .chapter-grid{gap:15px}
      .chapter-copy{font-size:15px}
      .quote-box{font-size:19px;padding:23px}
      .related-grid{grid-template-columns:1fr}
      .related-card.large{grid-column:auto}
      .related-card.large .related-image,.related-image{height:220px}
      .form-grid{grid-template-columns:1fr}
      .field.full{grid-column:auto}
      .consult-form{padding:19px}
      .footer-grid{grid-template-columns:1fr;gap:20px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }

/* roulang page: category1 */
:root{
      --bg:#f3f1ea;
      --paper:#fbfaf5;
      --ink:#151918;
      --muted:#68746e;
      --forest:#31584e;
      --forest-dark:#1d2522;
      --lime:#c7f36a;
      --line:#d9ddd3;
      --soft:#e8e9e2;
      --danger:#9b4b3f;
      --radius:14px;
      --shadow:0 16px 40px rgba(21,25,24,.08);
      --shadow-sm:0 8px 22px rgba(21,25,24,.07);
      --ease:220ms ease;
      --sidebar:214px;
      --container:1380px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      font-size:16px;
      line-height:1.85;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    .main-content{margin-left:var(--sidebar)}
    section{padding:104px 0}
    .side-nav{
      position:fixed;
      z-index:30;
      left:0;top:0;bottom:0;
      width:var(--sidebar);
      background:var(--forest-dark);
      color:#e8eee9;
      padding:28px 22px;
      display:flex;
      flex-direction:column;
      border-right:1px solid rgba(255,255,255,.08)
    }
    .side-nav-logo{display:flex;flex-direction:column;gap:10px}
    .logo-main{font-size:23px;font-weight:900;letter-spacing:-.07em;color:#fff}
    .logo-sub{font-size:10px;letter-spacing:.08em;color:#8da197}
    .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.06em}
    .brand-mark{
      width:35px;height:35px;background:var(--lime);color:var(--ink);
      display:grid;place-items:center;border-radius:8px;font-size:15px;font-weight:900
    }
    .nav-label{font-size:11px;color:#81948a;letter-spacing:.18em;margin:42px 0 12px}
    .side-nav-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
    .side-nav-link{
      position:relative;display:flex;align-items:center;gap:10px;
      color:#afbeb5;padding:10px 9px;border-radius:7px;font-size:13px;
      transition:var(--ease)
    }
    .nav-icon{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .side-nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .side-nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .side-nav-link.active .nav-icon{color:var(--ink)}
    .side-nav-footer{margin-top:auto;color:#86978f;font-size:11px;word-break:break-all}
    .mobile-bar{display:none}
    .mobile-menu{display:none}
    .eyebrow{
      display:flex;align-items:center;gap:10px;color:var(--forest);
      font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase
    }
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:730px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(48px,6.2vw,86px);line-height:1.05;letter-spacing:-.075em;margin-bottom:28px}
    h2{font-size:clamp(32px,4vw,54px);line-height:1.12;letter-spacing:-.06em;margin-bottom:18px}
    h3{font-size:22px;line-height:1.35;letter-spacing:-.035em}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:13px;
      min-height:48px;padding:0 19px;border:1px solid var(--ink);border-radius:5px;
      font-weight:850;font-size:14px;transition:var(--ease)
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent;color:var(--ink)}
    .hero{
      min-height:710px;
      padding:75px 0 70px;
      position:relative;
      overflow:hidden;
      background:var(--paper)
    }
    .hero:before{
      content:"";position:absolute;inset:0;
      background:linear-gradient(90deg,rgba(251,250,245,.98) 0%,rgba(251,250,245,.86) 48%,rgba(251,250,245,.35) 100%),url("/assets/images/backpic/back-2.webp") center/cover;
      opacity:.82
    }
    .hero:after{
      content:"";position:absolute;right:-130px;top:-170px;width:510px;height:510px;
      border:1px solid #dfe4d7;border-radius:50%;
      box-shadow:0 0 0 28px rgba(199,243,106,.08),0 0 0 58px rgba(49,88,78,.05)
    }
    .hero-inner{position:relative;z-index:1}
    .breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:82px}
    .breadcrumb span{color:#a6afa9}
    .hero-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:end}
    .hero-copy{max-width:770px}
    .hero-copy .lead{max-width:690px}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
    .trust-line{display:flex;flex-wrap:wrap;gap:20px;margin-top:47px;color:var(--muted);font-size:13px}
    .trust-line strong{color:var(--forest-dark);font-size:18px;margin-right:5px}
    .hero-panel{
      min-height:385px;background:var(--forest-dark);color:#edf3ed;
      padding:27px;border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden
    }
    .hero-panel:before{
      content:"";position:absolute;inset:0;
      background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
      background-size:31px 31px
    }
    .panel-content{position:relative;z-index:1}
    .panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:19px}
    .status{display:inline-flex;align-items:center;gap:7px;color:var(--lime);font-size:12px;font-weight:800}
    .status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
    .panel-image{height:130px;margin:24px 0;border-radius:9px;overflow:hidden;position:relative}
    .panel-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(29,37,34,.6),transparent)}
    .panel-image img{opacity:.76}
    .panel-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px}
    .panel-row span:last-child{color:var(--lime);font-weight:800}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
    .section-head>p{max-width:535px;color:var(--muted);margin:0}
    .dark-section{background:var(--forest-dark);color:#edf3ed}
    .dark-section .eyebrow{color:var(--lime)}
    .dark-section .section-head>p{color:#b7c7bc}
    .metric-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
    .metric{padding:28px 24px;border-right:1px solid rgba(255,255,255,.15)}
    .metric:last-child{border-right:0}
    .metric b{display:block;font-size:47px;line-height:1;color:var(--lime);letter-spacing:-.08em;margin-bottom:9px}
    .metric span{font-size:13px;color:#bccbc0}
    .focus-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:22px;align-items:stretch}
    .feature-block{min-height:430px;background:var(--forest-dark);color:#fff;padding:38px;position:relative;overflow:hidden;border-radius:16px}
    .feature-block img{position:absolute;inset:0;opacity:.46;z-index:0}
    .feature-block:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,37,34,.96),rgba(29,37,34,.26))}
    .feature-content{position:relative;z-index:1;max-width:470px;height:100%;display:flex;flex-direction:column;justify-content:end}
    .feature-content p{color:#d3ded5}
    .focus-list{border-top:1px solid var(--line)}
    .focus-item{display:grid;grid-template-columns:100px 1fr auto;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line);transition:var(--ease)}
    .focus-item:hover{padding-left:9px;background:rgba(199,243,106,.12)}
    .focus-time{font-size:12px;color:var(--muted);font-weight:800}
    .tag{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--line);border-radius:3px;color:var(--forest);font-size:11px;font-weight:800;margin-bottom:6px}
    .focus-item h3{font-size:18px;margin:0 0 4px}
    .focus-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
    .focus-arrow{font-size:21px;color:var(--forest)}
    .insight-section{background:var(--soft)}
    .insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
    .insight-image{height:420px;border-radius:15px;overflow:hidden;position:relative}
    .insight-image:after{content:"焦点记录 / 01";position:absolute;left:22px;bottom:18px;color:#fff;font-weight:800;font-size:12px;letter-spacing:.12em}
    .insight-copy p{color:#536159;line-height:2;margin-bottom:18px}
    .quote{border-left:4px solid var(--lime);padding:8px 0 8px 22px;font-size:23px;line-height:1.55;font-weight:800;letter-spacing:-.04em;margin:28px 0}
    .chapter-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
    .chapter{border-top:1px solid var(--line);padding-top:15px;font-size:14px}
    .chapter b{display:block;font-size:12px;color:var(--forest);margin-bottom:5px}
    .timeline{display:grid;grid-template-columns:145px 1fr;max-width:920px;border-top:1px solid var(--line)}
    .timeline-row{display:contents}
    .timeline-row>div{padding:22px 0;border-bottom:1px solid var(--line)}
    .timeline-date{font-size:12px;color:var(--forest);font-weight:900}
    .timeline-text{padding-left:20px!important}
    .timeline-text strong{display:block;font-size:18px;margin-bottom:4px}
    .timeline-text span{color:var(--muted);font-size:14px}
    .photo-feature{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:stretch}
    .photo-large{height:440px;border-radius:16px;overflow:hidden;position:relative}
    .photo-large .photo-caption{position:absolute;left:28px;right:28px;bottom:26px;color:#fff;z-index:1}
    .photo-large:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(21,25,24,.84))}
    .photo-caption h3{font-size:30px;margin:0 0 5px}
    .photo-caption p{margin:0;font-size:13px;color:#dce5dd}
    .side-note{background:var(--paper);padding:32px;border:1px solid var(--line);border-radius:16px}
    .side-note p{color:var(--muted);font-size:14px;line-height:1.9}
    .side-note ul{padding:0;margin:23px 0 0;list-style:none}
    .side-note li{border-top:1px solid var(--line);padding:12px 0;font-size:14px}
    .side-note li:before{content:"↗";color:var(--forest);font-weight:900;margin-right:10px}
    .faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}
    .faq-intro p{color:var(--muted)}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;min-height:64px;border:0;background:transparent;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:25px;font-weight:850;color:var(--ink);padding:17px 0}
    .faq-icon{font-size:24px;color:var(--forest);transition:var(--ease)}
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;line-height:1.9;transition:max-height 300ms ease}
    .faq-answer p{padding:0 40px 20px 0;margin:0}
    .faq-item.open .faq-answer{max-height:180px}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .cta-band{background:var(--lime);padding:62px 0}
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
    .cta-inner h2{margin-bottom:8px}
    .cta-inner p{margin:0;color:#465449;max-width:600px}
    footer{background:var(--forest-dark);color:#e8eee9;padding:70px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:35px}
    footer .brand{color:#fff;margin-bottom:17px}
    footer p{color:#a9b9ae;font-size:13px;line-height:2}
    footer h3{font-size:14px;color:#fff;margin-bottom:16px}
    footer a{color:#a9b9ae;transition:var(--ease)}
    footer a:hover{color:var(--lime)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:47px;padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#8fa198;font-size:11px}
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
    .reveal.visible{opacity:1;transform:none}
    @media(max-width:1100px){
      :root{--sidebar:184px}
      .hero-layout,.focus-layout,.insight-grid,.photo-feature{grid-template-columns:1fr}
      .hero{min-height:auto}
      .hero-panel{max-width:650px}
      .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:span 3}
    }
    @media(max-width:768px){
      :root{--sidebar:0px}
      .side-nav{display:none}
      .main-content{margin-left:0}
      .mobile-bar{display:flex;position:sticky;top:0;z-index:40;background:var(--forest-dark);color:#fff;min-height:65px;align-items:center;justify-content:space-between;padding:12px 20px}
      .mobile-bar .brand{font-size:20px}
      .menu-btn{border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;border-radius:4px;padding:7px 11px;font-size:12px}
      .mobile-menu{display:none;background:var(--forest-dark);color:#fff;position:fixed;z-index:35;top:65px;left:0;right:0;padding:13px 20px 20px;border-top:1px solid rgba(255,255,255,.12)}
      .mobile-menu.open{display:grid;grid-template-columns:1fr 1fr}
      .mobile-menu a{padding:12px 5px;border-bottom:1px solid rgba(255,255,255,.13);font-size:13px;color:#d5e0d7}
      .mobile-menu a:hover,.mobile-menu a.active{color:var(--lime)}
      section{padding:74px 0}
      .hero{padding:42px 0 60px}
      .breadcrumb{margin-bottom:48px}
      h1{font-size:clamp(43px,12vw,64px)}
      .lead{font-size:16px}
      .section-head,.cta-inner{display:block}
      .section-head>p{margin-top:17px}
      .metric-strip{grid-template-columns:1fr 1fr}
      .metric{border-bottom:1px solid rgba(255,255,255,.15)}
      .metric:nth-child(2){border-right:0}
      .focus-item{grid-template-columns:72px 1fr auto;gap:10px}
      .photo-large{height:340px}
      .faq-grid{grid-template-columns:1fr;gap:35px}
      .cta-inner .btn{margin-top:25px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-grid>div:last-child{grid-column:span 2}
      .footer-bottom{display:block;line-height:2.2}
      .footer-bottom span{display:block;margin-bottom:7px}
    }
    @media(max-width:520px){
      .container{padding-left:20px;padding-right:20px}
      .hero-actions .btn{width:100%}
      .trust-line{gap:12px;display:grid;grid-template-columns:1fr 1fr}
      .metric b{font-size:37px}
      .metric{padding:22px 15px}
      .feature-block{min-height:360px;padding:25px}
      .chapter-list{grid-template-columns:1fr}
      .timeline{grid-template-columns:88px 1fr}
      .timeline-text{padding-left:12px!important}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:last-child{grid-column:auto}
    }
    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
      .reveal{opacity:1;transform:none}
    }

/* roulang page: category5 */
:root{
      --bg:#f3f1ea;
      --paper:#fbfaf5;
      --ink:#151918;
      --muted:#68746e;
      --forest:#31584e;
      --forest-dark:#1d2522;
      --lime:#c7f36a;
      --line:#d9ddd3;
      --soft:#e8e9e2;
      --radius:14px;
      --shadow:0 16px 40px rgba(21,25,24,.08);
      --ease:220ms ease;
      --sidebar:178px;
      --container:1380px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      font-size:16px;
      line-height:1.85;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:4px}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    .main-content{margin-left:var(--sidebar)}
    section{padding:100px 0}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--forest);font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:760px}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{letter-spacing:-.055em}
    h1{font-size:clamp(42px,6.3vw,82px);line-height:1.08;margin-bottom:25px}
    h2{font-size:clamp(34px,4vw,54px);line-height:1.16;margin-bottom:18px}
    h3{font-size:23px;line-height:1.35}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:13px;
      min-height:48px;padding:0 19px;border:1px solid var(--ink);border-radius:5px;
      font-weight:850;font-size:14px;transition:var(--ease)
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent}
    .side-nav{
      position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--sidebar);
      background:var(--forest-dark);color:#e8eee9;padding:28px 22px;display:flex;
      flex-direction:column;border-right:1px solid rgba(255,255,255,.08)
    }
    .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.06em}
    .brand-mark{width:35px;height:35px;background:var(--lime);color:var(--ink);display:grid;place-items:center;border-radius:8px;font-size:15px;font-weight:900}
    .side-nav-logo{display:block;padding-bottom:25px;border-bottom:1px solid rgba(255,255,255,.12)}
    .logo-main{display:block;font-size:22px;font-weight:900;letter-spacing:-.07em}
    .logo-sub{display:block;color:#91a39a;font:10px/1.3 Arial,sans-serif;letter-spacing:.08em;margin-top:4px}
    .side-nav-links{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:5px}
    .side-nav-link{position:relative;display:flex;align-items:center;gap:10px;color:#afbeb5;padding:10px 9px;border-radius:7px;font-size:13px;transition:var(--ease)}
    .nav-icon{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .side-nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .side-nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .side-nav-link.active .nav-icon{color:var(--ink)}
    .side-nav-footer{margin-top:auto;color:#86978f;font:11px/1.6 Arial,sans-serif;letter-spacing:.05em}
    .mobile-bar{display:none}
    .mobile-menu{display:none}
    .page-hero{position:relative;background:var(--paper);padding:58px 0 88px;overflow:hidden}
    .page-hero:before{
      content:"DATA / 05";position:absolute;right:5%;top:50px;color:#dfe4d7;
      font:bold clamp(70px,13vw,180px)/1 Arial,sans-serif;letter-spacing:-.1em;
      pointer-events:none
    }
    .crumbs{position:relative;z-index:1;font-size:13px;color:var(--muted);margin-bottom:55px}
    .crumbs a:hover{color:var(--forest)}
    .hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr .72fr;gap:80px;align-items:end}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
    .portrait-board{
      justify-self:end;width:min(100%,340px);height:510px;background:var(--forest-dark);
      border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow)
    }
    .portrait-board img{opacity:.58}
    .portrait-board:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 22%,rgba(29,37,34,.92) 82%)}
    .portrait-content{position:absolute;z-index:2;inset:0;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
    .vertical-label{writing-mode:vertical-rl;letter-spacing:.18em;font-size:11px;color:#d2dfd5}
    .portrait-number{font:bold 92px/.9 Arial,sans-serif;color:var(--lime);letter-spacing:-.1em}
    .portrait-caption{font-size:14px;color:#d8e3db}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:44px}
    .section-head>p{max-width:560px;color:var(--muted);margin:0}
    .metric-section{background:var(--forest-dark);color:#fff}
    .metric-section .eyebrow{color:var(--lime)}
    .metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
    .metric{padding:30px 24px;border-right:1px solid rgba(255,255,255,.2)}
    .metric:last-child{border-right:0}
    .metric strong{display:block;font:bold clamp(42px,5vw,72px)/1 Arial,sans-serif;color:var(--lime);letter-spacing:-.08em}
    .metric span{display:block;color:#bdccc2;font-size:13px;margin-top:12px}
    .metric small{display:block;color:#80958a;font-size:12px;margin-top:3px}
    .reading-section{background:var(--bg)}
    .reading-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:22px}
    .reading-feature{min-height:410px;background:var(--forest-dark);color:#fff;border-radius:16px;overflow:hidden;position:relative}
    .reading-feature img{position:absolute;inset:0;opacity:.45}
    .reading-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,37,34,.95),rgba(29,37,34,.24))}
    .reading-feature-content{position:relative;z-index:1;height:100%;padding:35px;display:flex;flex-direction:column;justify-content:end}
    .reading-feature-content p{color:#c8d7cd;max-width:430px}
    .reading-list{border-top:1px solid var(--line)}
    .reading-item{display:grid;grid-template-columns:90px 1fr 90px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
    .reading-item time{font:12px Arial,sans-serif;color:var(--muted)}
    .reading-item h3{font-size:20px;margin:0 0 4px}
    .reading-item p{font-size:14px;color:var(--muted);margin:0}
    .reading-item a{font-size:13px;font-weight:800;text-align:right;color:var(--forest)}
    .reading-item a:hover{text-decoration:underline}
    .trend-section{background:var(--paper)}
    .trend-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
    .trend-panel{padding:30px;background:#eef0e8;border:1px solid var(--line);border-radius:14px}
    .trend-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
    .trend-top strong{font-size:18px}
    .trend-top span{font-size:12px;color:var(--muted)}
    .trend-row{display:grid;grid-template-columns:100px 1fr 48px;gap:14px;align-items:center;margin:19px 0;font-size:13px}
    .trend-bar{height:8px;background:#d6dcd1;position:relative;overflow:hidden}
    .trend-bar i{display:block;height:100%;background:var(--forest);width:var(--value);transition:width 1s ease}
    .trend-row b{font:13px Arial,sans-serif;color:var(--forest)}
    .trend-note{border-left:3px solid var(--lime);padding:4px 0 4px 22px;color:#536158}
    .trend-note strong{display:block;color:var(--ink);font-size:20px;margin-bottom:12px}
    .result-section{background:var(--bg)}
    .result-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}
    .result-summary{background:var(--lime);padding:36px;border-radius:14px;min-height:350px}
    .result-summary strong{display:block;font:bold 76px/.9 Arial,sans-serif;letter-spacing:-.1em}
    .result-summary p{margin-top:20px;color:#394637}
    .result-lines{border-top:1px solid var(--line)}
    .result-line{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:23px 0;border-bottom:1px solid var(--line);align-items:center}
    .result-line h3{font-size:18px;margin:0}
    .result-line p{font-size:14px;color:var(--muted);margin:0}
    .result-tag{justify-self:end;padding:5px 10px;background:var(--soft);font-size:12px;color:var(--forest);border-radius:3px}
    .explain-section{background:var(--forest);color:#fff}
    .explain-section .eyebrow{color:var(--lime)}
    .explain-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px}
    .explain-copy p{color:#cbd8cf;max-width:670px}
    .explain-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .explain-point{border:1px solid rgba(255,255,255,.18);padding:22px;border-radius:8px}
    .explain-point strong{display:block;color:var(--lime);font:26px Arial,sans-serif;margin-bottom:10px}
    .explain-point p{font-size:13px;line-height:1.7;color:#d2ded5;margin:0}
    .glossary-section{background:var(--paper)}
    .glossary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .glossary-item{padding:27px;background:#f0f1ea;border:1px solid var(--line);min-height:175px;transition:var(--ease)}
    .glossary-item:hover{border-color:var(--forest);transform:translateY(-3px)}
    .glossary-item em{font:12px Arial,sans-serif;color:var(--forest);font-style:normal;letter-spacing:.08em}
    .glossary-item h3{font-size:19px;margin:12px 0 8px}
    .glossary-item p{font-size:14px;color:var(--muted);margin:0}
    .faq-section{background:var(--bg)}
    .faq-list{max-width:980px;border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;min-height:70px;border:0;background:none;display:flex;align-items:center;justify-content:space-between;text-align:left;font-weight:800;font-size:17px;padding:16px 0;color:var(--ink)}
    .faq-question span:last-child{font-size:26px;font-weight:400;transition:var(--ease);color:var(--forest)}
    .faq-answer{max-height:0;overflow:hidden;transition:max-height 280ms ease;color:var(--muted);font-size:15px}
    .faq-answer p{padding:0 40px 22px 0;margin:0}
    .faq-item.open .faq-answer{max-height:180px}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .cta-section{padding:76px 0;background:var(--lime)}
    .cta-layout{display:flex;justify-content:space-between;gap:40px;align-items:end}
    .cta-layout p{max-width:650px;color:#40503d;margin:0}
    footer{background:var(--forest-dark);color:#e8eee9;padding:72px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.3fr .7fr .8fr 1fr;gap:35px}
    footer .brand{margin-bottom:20px}
    footer .brand p,footer p{color:#aebeb4;font-size:13px}
    footer h3{font-size:14px;letter-spacing:.04em;margin-bottom:15px}
    footer a{color:#b7c6bc;transition:var(--ease)}
    footer a:hover{color:var(--lime)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:50px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#8ea096;font-size:12px}
    .filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
    .filter-btn{border:1px solid var(--line);background:var(--paper);color:var(--muted);padding:8px 14px;border-radius:4px;font-size:13px;transition:var(--ease)}
    .filter-btn:hover,.filter-btn.active{background:var(--forest);color:#fff;border-color:var(--forest)}
    .status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--forest);background:#e9f1dd;padding:4px 9px;border-radius:3px}
    .status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--forest)}
    @media(max-width:1024px){
      :root{--sidebar:156px}
      .hero-layout,.trend-layout,.explain-grid{grid-template-columns:1fr;gap:42px}
      .portrait-board{justify-self:start;width:100%;height:390px}
      .metrics{grid-template-columns:repeat(2,1fr)}
      .metric:nth-child(2){border-right:0}
      .metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2)}
      .reading-grid,.result-layout{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:768px){
      .side-nav{display:none}
      .main-content{margin-left:0}
      .mobile-bar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--forest-dark);color:#fff;position:relative;z-index:50}
      .mobile-bar .brand{font-size:20px}
      .menu-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:4px;padding:7px 12px;font-size:12px}
      .mobile-menu{position:absolute;z-index:45;top:70px;left:0;right:0;background:var(--forest-dark);padding:10px 20px 18px;display:none;box-shadow:0 14px 22px rgba(0,0,0,.18)}
      .mobile-menu.open{display:grid;grid-template-columns:1fr 1fr;gap:4px}
      .mobile-menu a{padding:10px;color:#c9d6cd;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
      .mobile-menu a:hover,.mobile-menu a.active{color:var(--lime)}
      section{padding:74px 0}
      .page-hero{padding-top:34px;padding-bottom:60px}
      .crumbs{margin-bottom:35px}
      .section-head,.cta-layout{display:block}
      .section-head>p{margin-top:18px}
      .section-head{margin-bottom:30px}
      .reading-item{grid-template-columns:70px 1fr}
      .reading-item a{grid-column:2;text-align:left}
      .glossary-grid,.explain-points{grid-template-columns:1fr}
      .result-line{grid-template-columns:1fr 1fr}
      .result-tag{justify-self:start}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-bottom:10px}
    }
    @media(max-width:520px){
      .container{padding-left:20px;padding-right:20px}
      h1{font-size:43px}
      h2{font-size:34px}
      .metrics{grid-template-columns:1fr 1fr}
      .metric{padding:22px 14px}
      .metric strong{font-size:43px}
      .portrait-board{height:350px}
      .reading-feature-content,.result-summary{padding:25px}
      .result-line{display:block}
      .result-line p{margin:8px 0}
      .footer-grid{grid-template-columns:1fr}
      .hero-actions .btn{width:100%}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }

/* roulang page: category6 */
:root{
      --bg:#f3f1ea;
      --paper:#fbfaf5;
      --ink:#151918;
      --muted:#68746e;
      --forest:#31584e;
      --forest-dark:#1d2522;
      --lime:#c7f36a;
      --line:#d9ddd3;
      --soft:#e8e9e2;
      --radius:14px;
      --shadow:0 16px 40px rgba(21,25,24,.08);
      --ease:220ms ease;
      --sidebar:214px;
      --container:1380px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--bg);color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      font-size:16px;line-height:1.85;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .container{max-width:var(--container);margin:auto;padding-left:clamp(24px,4vw,70px);padding-right:clamp(24px,4vw,70px)}
    .main-content{margin-left:var(--sidebar)}
    .side-nav{
      position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--sidebar);
      background:var(--forest-dark);color:#e8eee9;padding:28px 22px;
      display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08)
    }
    .side-nav-logo{display:block}
    .logo-main{display:block;font-weight:900;font-size:23px;letter-spacing:-.06em}
    .logo-sub{display:block;color:#96a69d;font-size:10px;letter-spacing:.08em;margin-top:2px}
    .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.06em}
    .brand-mark{width:35px;height:35px;background:var(--lime);color:var(--ink);display:grid;place-items:center;border-radius:8px;font-size:15px;font-weight:900}
    .nav-label{font-size:11px;color:#81948a;letter-spacing:.18em;margin:42px 0 12px}
    .side-nav-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
    .side-nav-link{
      position:relative;display:flex;align-items:center;gap:10px;color:#afbeb5;
      padding:10px 9px;border-radius:7px;font-size:13px;transition:var(--ease)
    }
    .side-nav-link:hover{background:#293933;color:#fff;transform:translateX(2px)}
    .side-nav-link.active{background:var(--lime);color:var(--ink);font-weight:800}
    .nav-icon{font-family:Arial,sans-serif;color:#71877c;font-size:11px}
    .active .nav-icon{color:var(--ink)}
    .side-nav-footer{margin-top:auto;color:#86978f;font-size:11px;letter-spacing:.06em}
    .mobile-bar{display:block}
    .mobile-menu{display:none}
    .menu-btn{display:none}
    section{padding:100px 0}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--forest);font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--lime);display:inline-block}
    .lead{font-size:18px;line-height:2;color:#4f5c55;max-width:730px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(44px,6vw,78px);line-height:1.08;letter-spacing:-.075em;margin:22px 0 26px;font-weight:950}
    h2{font-size:clamp(32px,4vw,52px);line-height:1.16;letter-spacing:-.06em;margin:12px 0 18px;font-weight:900}
    h3{font-size:21px;line-height:1.35;letter-spacing:-.03em;margin-bottom:10px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;
      padding:0 19px;border:1px solid var(--ink);border-radius:5px;font-weight:850;font-size:14px;
      transition:var(--ease)
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgba(21,25,24,.12)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--lime);border-color:var(--lime)}
    .btn-dark{background:var(--forest-dark);color:#fff;border-color:var(--forest-dark)}
    .btn-light{background:transparent}
    .tag{display:inline-flex;align-items:center;padding:4px 9px;background:var(--soft);color:var(--forest);font-size:11px;font-weight:800;border-radius:3px}
    .hero-consult{
      position:relative;overflow:hidden;min-height:680px;padding:70px 0 80px;
      background:var(--paper);border-bottom:1px solid var(--line)
    }
    .hero-consult:before{
      content:"";position:absolute;right:-120px;top:-180px;width:550px;height:550px;
      border:1px solid #dbe0d6;border-radius:50%;box-shadow:0 0 0 30px rgba(199,243,106,.08),0 0 0 62px rgba(49,88,78,.05)
    }
    .hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:70px;align-items:center;position:relative;z-index:1}
    .crumbs{font-size:12px;color:var(--muted);margin-bottom:30px}
    .crumbs a:hover{color:var(--forest)}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
    .hero-panel{background:var(--forest-dark);color:#f4f7f1;border-radius:17px;padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
    .hero-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px}
    .panel-inner{position:relative;z-index:1}
    .panel-cover{height:220px;border-radius:9px;overflow:hidden;margin-bottom:22px;position:relative}
    .panel-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(29,37,34,.7),transparent 60%)}
    .live-pill{position:absolute;left:14px;top:14px;z-index:2;background:var(--lime);color:var(--ink);font-size:11px;font-weight:900;padding:4px 8px;border-radius:3px}
    .countdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
    .time-box{border:1px solid rgba(255,255,255,.18);padding:10px;text-align:center}
    .time-box strong{display:block;font-size:27px;line-height:1.1;color:var(--lime);font-family:Arial,sans-serif}
    .time-box span{font-size:11px;color:#afbeb5}
    .panel-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:12px;color:#afbeb5}
    .panel-footer button{border:0;background:none;color:var(--lime);font-weight:800;padding:4px}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
    .section-head>p{max-width:550px;color:var(--muted);margin:0}
    .intro-band{background:var(--forest-dark);color:#fff;padding:34px 0}
    .intro-band-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
    .intro-band p{color:#b9c8bd;margin:0}
    .contact-layout{display:grid;grid-template-columns:.76fr 1.24fr;gap:26px;align-items:start}
    .contact-aside{background:var(--forest);color:#f3f6ef;padding:38px;border-radius:15px;min-height:520px}
    .contact-aside p{color:#c5d3c8}
    .contact-aside ul{list-style:none;padding:0;margin:30px 0 0}
    .contact-aside li{border-top:1px solid rgba(255,255,255,.2);padding:15px 0;display:flex;gap:13px;font-size:14px}
    .contact-aside li b{color:var(--lime);font-family:Arial,sans-serif}
    .form-card{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:38px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .field{display:flex;flex-direction:column;gap:7px}
    .field.full{grid-column:1/-1}
    label{font-size:13px;font-weight:850}
    input,select,textarea{
      width:100%;border:1px solid #cdd4cb;background:#fffef9;color:var(--ink);
      border-radius:5px;padding:12px 13px;transition:var(--ease);outline:none
    }
    input:focus,select:focus,textarea:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(199,243,106,.35)}
    textarea{min-height:130px;resize:vertical}
    .hint{font-size:12px;color:var(--muted)}
    .checkline{display:flex;gap:9px;align-items:flex-start;margin:20px 0;color:var(--muted);font-size:12px}
    .checkline input{width:16px;height:16px;margin-top:4px;accent-color:var(--forest)}
    .form-status{display:none;font-size:13px;margin-top:14px;padding:10px 12px;background:#edf5d8;color:#31584e;border-left:3px solid var(--lime)}
    .form-status.show{display:block}
    .path-section{background:var(--soft)}
    .path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
    .path-item{background:var(--bg);padding:27px;min-height:205px}
    .path-number{font:700 14px Arial;color:var(--forest);letter-spacing:.1em}
    .path-item p{color:var(--muted);font-size:14px;line-height:1.75}
    .signal-section{background:var(--paper)}
    .signal-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
    .signal-image{height:390px;border-radius:14px;overflow:hidden;position:relative}
    .signal-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,37,34,.4),transparent)}
    .signal-copy p{color:var(--muted)}
    .signal-list{margin-top:25px;border-top:1px solid var(--line)}
    .signal-list div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:14px 0;font-size:14px}
    .signal-list span:last-child{color:var(--forest);font-weight:850}
    .trust-section{padding-top:84px;padding-bottom:84px}
    .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .trust-card{border-top:3px solid var(--lime);padding:24px;background:var(--paper)}
    .trust-card p{color:var(--muted);font-size:14px;margin:0}
    .faq-section{background:var(--forest-dark);color:#fff}
    .faq-section .eyebrow{color:var(--lime)}
    .faq-wrap{max-width:920px;margin:auto}
    .faq-item{border-top:1px solid rgba(255,255,255,.2)}
    .faq-question{width:100%;border:0;background:none;color:#fff;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:21px 0;font-weight:850;font-size:17px}
    .faq-icon{color:var(--lime);font-size:25px;line-height:1;transition:var(--ease)}
    .faq-answer{max-height:0;overflow:hidden;color:#b9c8bd;font-size:14px;line-height:1.9;transition:max-height 300ms ease}
    .faq-item.open .faq-answer{max-height:180px;padding-bottom:20px}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .cta-section{padding:84px 0}
    .cta-box{background:var(--lime);padding:42px 48px;border-radius:15px;display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta-box p{max-width:650px;margin:0;color:#3b493f}
    footer{background:var(--forest-dark);color:#e8eee9;padding:65px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;gap:35px}
    footer p{color:#9eafa5;font-size:13px;line-height:2;margin:16px 0 0}
    footer h3{font-size:13px;color:#fff;margin-bottom:12px}
    footer a{color:#b7c7bc;transition:var(--ease)}
    footer a:hover{color:var(--lime)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:50px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#81948a;font-size:11px}
    @media(max-width:1024px){
      :root{--sidebar:178px}
      .hero-grid,.signal-grid{gap:38px}
      .path-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .side-nav{display:none}
      .main-content{margin-left:0}
      .mobile-bar{display:block;position:relative}
      .mobile-bar>.brand{position:fixed;z-index:40;top:14px;left:20px;color:var(--ink);font-size:19px}
      .mobile-bar>.brand .brand-mark{width:31px;height:31px}
      .menu-btn{display:block;position:fixed;right:18px;top:14px;z-index:41;background:var(--forest-dark);color:#fff;border:0;border-radius:5px;padding:8px 12px;font-size:12px}
      .mobile-menu{display:flex;position:fixed;z-index:35;inset:0;background:var(--forest-dark);color:#fff;padding:88px 24px 30px;flex-direction:column;gap:4px;transform:translateY(-105%);transition:transform 280ms ease}
      .mobile-menu.open{transform:translateY(0)}
      .mobile-menu a{padding:13px 8px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px;color:#c4d1c8}
      .mobile-menu a:hover,.mobile-menu a.active{color:var(--lime)}
      section{padding:74px 0}
      .hero-consult{padding-top:96px;min-height:auto}
      .hero-grid,.intro-band-grid,.contact-layout,.signal-grid{grid-template-columns:1fr}
      h1{font-size:clamp(42px,12vw,58px)}
      .hero-panel{margin-top:10px}
      .section-head{display:block;margin-bottom:28px}
      .section-head>p{margin-top:16px}
      .form-grid{grid-template-columns:1fr}
      .field.full{grid-column:auto}
      .path-grid,.trust-grid{grid-template-columns:1fr}
      .cta-box{display:block;padding:30px 25px}
      .cta-box .btn{margin-top:24px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:25px}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-bottom:10px}
    }
    @media(max-width:520px){
      .container{padding-left:20px;padding-right:20px}
      .hero-actions .btn{width:100%}
      .panel-cover{height:180px}
      .contact-aside,.form-card{padding:25px}
      .footer-grid{grid-template-columns:1fr}
      .signal-image{height:260px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
    }