/* roulang page: index */
:root{
  --primary:#C47A1A;
  --primary-hover:#A56510;
  --primary-tint:#F7E8D3;
  --dark:#151515;
  --dark-trans:rgba(21,21,21,.92);
  --cream:#F5F4F0;
  --white:#FFFFFF;
  --secondary:#2F6D62;
  --text-main:#222;
  --text-sub:#5A5A55;
  --text-weak:#8A8A85;
  --border:#E4E1DA;
  --radius:6px;
  --radius-sm:4px;
  --shadow:0 12px 32px rgba(21,21,21,.08);
  --spacing-xl:96px;
  --spacing-lg:72px;
  --spacing-md:56px;
  --fontstack:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fontstack);background:var(--cream);color:var(--text-main);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s ease}
img{max-width:100%;display:block}
button,input{font-family:inherit;font-size:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(max-width:40em){.container{padding:0 16px}}
.section{padding:var(--spacing-xl) 0}
@media(max-width:64em){.section{padding:var(--spacing-lg) 0}}
@media(max-width:40em){.section{padding:var(--spacing-md) 0}}
.section-head{margin-bottom:48px;text-align:left}
.section-head .kicker{display:inline-block;font-size:14px;color:var(--primary);letter-spacing:.04em;font-weight:600;margin-bottom:8px;background:var(--primary-tint);padding:4px 14px;border-radius:20px}
.section-head h2{font-size:34px;font-weight:800;color:var(--dark);line-height:1.25;letter-spacing:.02em}
.section-head p{color:var(--text-sub);font-size:16px;margin-top:12px;max-width:560px}
@media(max-width:40em){.section-head h2{font-size:26px}.section-head{margin-bottom:32px}}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 30px;border-radius:var(--radius);font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:all .25s ease;line-height:1.2;gap:8px}
.btn-primary{background:var(--primary);color:var(--dark)}
.btn-primary:hover{background:var(--primary-hover);color:var(--dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(196,122,26,.3)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn-outline:hover{background:rgba(196,122,26,.12);border-color:var(--primary);color:var(--primary)}
.btn-outline-dark{background:transparent;border-color:rgba(21,21,21,.4);color:var(--dark)}
.btn-outline-dark:hover{background:rgba(196,122,26,.08);border-color:var(--primary);color:var(--primary)}
.btn:focus-visible{outline:2px solid rgba(196,122,26,.5);outline-offset:2px}
.btn-sm{padding:9px 20px;font-size:14px;border-radius:var(--radius-sm)}

.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;background:var(--primary-tint);color:var(--primary)}
.badge-secondary{background:rgba(47,109,98,.1);color:var(--secondary)}

.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:transparent;transition:background .2s ease,box-shadow .2s ease}
.site-header.scrolled{background:var(--dark-trans);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.header-top{transition:max-height .25s ease,opacity .25s ease,visibility .25s ease;overflow:hidden;max-height:72px}
.site-header.scrolled .header-top{max-height:0;opacity:0;visibility:hidden}
.header-bottom{transition:max-height .2s ease}
.header-top-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.header-bottom-inner{display:flex;align-items:center;justify-content:space-between;height:52px}
.logo{font-size:24px;font-weight:900;color:#fff;letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center;gap:10px}
.logo i{color:var(--primary);font-size:22px}
.site-header.scrolled .logo{font-size:20px}
.header-tools{display:flex;align-items:center;gap:16px}
.search-box{display:flex;align-items:center;background:rgba(255,255,255,.1);border-radius:4px;padding:0 12px;height:38px;transition:background .2s ease}
.search-box:focus-within{background:rgba(255,255,255,.95)}
.search-box i{color:rgba(255,255,255,.6);font-size:14px;transition:color .2s ease}
.search-box input{background:transparent;border:none;outline:none;width:0;min-width:0;transition:width .3s ease;font-size:14px;color:#fff;padding:0 8px}
.search-box:focus-within i{color:var(--text-sub)}
.search-box:focus-within input{width:160px;color:var(--text-main)}
.search-box input::placeholder{color:rgba(255,255,255,.4)}
.search-box:focus-within input::placeholder{color:var(--text-weak)}
.hot-words{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.hot-word{font-size:12px;color:rgba(255,255,255,.6);border-bottom:1px dashed rgba(255,255,255,.3);padding-bottom:1px;transition:color .2s ease,border-color .2s ease;white-space:nowrap}
.hot-word:hover{color:var(--primary);border-color:var(--primary)}
.nav-channels{display:flex;align-items:center;gap:30px;list-style:none}
.nav-channels li{position:relative}
.nav-channels a{display:inline-block;font-size:16px;font-weight:600;color:rgba(255,255,255,.85);padding:14px 0 12px;position:relative;transition:color .2s ease}
.nav-channels a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:transparent;transition:background .2s ease}
.nav-channels a:hover{color:#fff}
.nav-channels a:hover::after{background:var(--primary);height:2px}
.nav-channels a.active{color:#fff}
.nav-channels a.active::after{background:var(--primary);height:3px}
.header-cta{display:flex;align-items:center}
.mobile-toggle{display:none;font-size:22px;color:#fff;background:none;border:none;cursor:pointer}
@media(max-width:64em){
  .hot-words{display:none}
  .nav-channels{gap:20px}
  .nav-channels a{font-size:15px}
}
@media(max-width:40em){
  .header-top-inner{height:60px}
  .search-box{display:none}
  .header-cta{display:none}
  .header-bottom-inner{height:48px}
  .nav-channels{display:none}
  .mobile-toggle{display:block}
  .mobile-menu{display:none;position:fixed;top:60px;left:0;width:100%;background:var(--dark);z-index:999;padding:20px 16px;border-top:1px solid rgba(255,255,255,.08)}
  .mobile-menu.open{display:block}
  .mobile-menu .mobile-search{display:flex;align-items:center;background:rgba(255,255,255,.1);border-radius:4px;padding:0 10px;height:38px;margin-bottom:16px}
  .mobile-menu .mobile-search input{background:transparent;border:none;outline:none;flex:1;font-size:14px;color:#fff}
  .mobile-menu .mobile-nav{list-style:none}
  .mobile-menu .mobile-nav a{display:block;padding:12px 0;color:rgba(255,255,255,.85);font-size:16px;border-bottom:1px solid rgba(255,255,255,.06)}
  .mobile-menu .mobile-nav a.active{color:var(--primary)}
  .mobile-menu .mobile-hot{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
}
@media(min-width:40.0625em){.mobile-menu{display:none !important}}

.hero{position:relative;background:var(--dark);padding:180px 0 120px;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/images/backpic/back-2.webp');background-size:cover;background-position:center;opacity:.4}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,21,21,.92) 0%,rgba(21,21,21,.72) 50%,rgba(21,21,21,.4) 100%)}
.hero-grid-lines{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:720px}
.hero .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(196,122,26,.15);border:1px solid rgba(196,122,26,.3);color:var(--primary);font-size:13px;font-weight:600;padding:5px 16px;border-radius:30px;margin-bottom:20px}
.hero h1{font-size:64px;font-weight:900;line-height:1.18;letter-spacing:.02em;margin-bottom:20px}
.hero h1 .accent{color:var(--primary)}
.hero-sub{font-size:18px;color:#c9c9c4;line-height:1.8;max-width:600px;margin-bottom:36px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.5);font-size:12px}
.hero-scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent)}
.hero-scroll-dot{width:5px;height:5px;background:var(--primary);border-radius:50%;animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(16px);opacity:.4}}
@media(max-width:64em){.hero{padding:160px 0 100px}.hero h1{font-size:50px}}
@media(max-width:40em){.hero{padding:130px 0 80px .hero h1{font-size:38px}.hero-sub{font-size:16px}}

.fade-up{opacity:0;transform:translateY(30px);animation:fadeUp .5s ease forwards}
.fade-up:nth-child(2){animation-delay:.15s}
.fade-up:nth-child(3){animation-delay:.3s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.features{background:var(--white)}
.features-list{margin-top:24px}
.feature-row{display:flex;align-items:center;gap:32px;padding:44px 0;border-bottom:1px solid var(--border);transition:background .3s ease;position:relative}
.feature-row:first-child{border-top:1px solid var(--border)}
.feature-row .feature-num{font-size:72px;font-weight:900;color:rgba(196,122,26,.22);min-width:110px;line-height:1;transition:color .3s ease}
.feature-row:nth-child(2){margin-left:40px}
.feature-row:nth-child(3){margin-left:80px}
.feature-row:hover{background:rgba(196,122,26,.03)}
.feature-row:hover .feature-num{color:var(--primary)}
.feature-main{flex:1}
.feature-main h3{font-size:22px;font-weight:700;color:var(--text-main);margin-bottom:8px;letter-spacing:.01em}
.feature-main p{font-size:15px;color:var(--text-sub);max-width:520px;line-height:1.7}
.feature-icon{min-width:48px;height:48px;border-radius:10px;background:var(--primary-tint);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:20px}
@media(max-width:64em){.feature-row:nth-child(2){margin-left:20px}.feature-row:nth-child(3){margin-left:40px}}
@media(max-width:40em){.feature-row{flex-direction:column;align-items:flex-start;gap:12px;padding:32px 0}.feature-row:nth-child(2),.feature-row:nth-child(3){margin-left:0}.feature-num{font-size:52px;min-width:auto}.feature-main h3{font-size:19px}}

.scenarios{background:var(--cream)}
.scenario-block{display:flex;align-items:center;gap:64px;margin-bottom:80px}
.scenario-block:last-child{margin-bottom:0}
.scenario-image{flex:0 0 48%;border-radius:2px;border:1px solid var(--border);overflow:hidden;background:var(--white)}
.scenario-image img{width:100%;height:auto;transition:transform .4s ease}
.scenario-image:hover img{transform:scale(1.02)}
.scenario-content{flex:1}
.scenario-content .mini-badge{display:inline-block;background:var(--primary-tint);color:var(--primary);font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 14px;border-radius:4px;margin-bottom:16px}
.scenario-content h3{font-size:28px;font-weight:800;color:var(--dark);line-height:1.3;margin-bottom:18px}
.scenario-list{list-style:none;margin:0 0 22px}
.scenario-list li{position:relative;padding:8px 0 8px 26px;font-size:15px;color:var(--text-sub);line-height:1.6}
.scenario-list li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;background:var(--primary);border-radius:2px}
.scenario-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--primary)}
.scenario-link:hover{color:var(--primary-hover);gap:12px}
.scenario-block.reverse .scenario-image{order:2}
.scenario-block.reverse .scenario-content{order:1}
@media(max-width:64em){.scenario-block{gap:40px;flex-wrap:wrap}.scenario-image{flex:0 0 100%}.scenario-content{flex:0 0 100%}.scenario-block.reverse .scenario-image{order:1}.scenario-block.reverse .scenario-content{order:2}}
@media(max-width:40em){.scenario-block{margin-bottom:56px}.scenario-content h3{font-size:23px}}

.social-proof{background:var(--dark);color:#fff}
.stats-grid{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:56px}
.stat-item{text-align:center}
.stat-num{font-size:42px;font-weight:900;color:var(--primary);line-height:1.1}
.stat-label{font-size:13px;color:rgba(255,255,255,.5);margin-top:6px;letter-spacing:.03em}
.stat-divider{border-left:1px solid rgba(255,255,255,.08)}
.testimonials-grid{margin-top:56px}
.testimonial-item{padding:10px 0 10px 24px;border-left:3px solid var(--primary);margin-bottom:32px}
.testimonial-item:last-child{margin-bottom:0}
.testimonial-text{font-size:16px;line-height:1.7;color:rgba(255,255,255,.85);font-style:italic}
.testimonial-author{font-size:13px;color:var(--text-weak);margin-top:10px}
@media(max-width:40em){.stat-num{font-size:32px}.testimonial-text{font-size:15px}}

.faq{background:var(--white)}
.faq-list{max-width:860px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 0;background:none;border:none;cursor:pointer;text-align:left;font-size:16px;font-weight:600;color:var(--text-main);transition:color .25s ease}
.faq-question:hover{color:var(--primary)}
.faq-question .icon{transition:transform .25s ease;color:var(--text-weak);min-width:18px;text-align:center}
.faq-item.active .faq-question .icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0}
.faq-answer-inner{padding-bottom:22px;font-size:15px;color:var(--text-sub);line-height:1.8;padding-right:30px}

.news-section{background:var(--cream)}
.news-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.news-view-all{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text-sub)}
.news-view-all:hover{color:var(--primary)}
.news-list{list-style:none;margin:0}
.news-list-item{display:flex;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--border);transition:border-color .25s ease;gap:24px}
.news-list-item:first-child{border-top:1px solid var(--border)}
.news-list-item:hover{border-color:rgba(196,122,26,.4)}
.news-meta{display:flex;align-items:center;gap:10px;min-width:150px;flex-shrink:0;padding-top:2px}
.news-meta time{font-size:13px;color:var(--text-weak);white-space:nowrap}
.news-body{flex:1;min-width:0}
.news-title{font-size:18px;font-weight:700;color:var(--text-main);line-height:1.4;margin-bottom:6px;transition:color .2s ease}
.news-title a:hover{color:var(--primary)}
.news-excerpt{font-size:14px;color:var(--text-sub);line-height:1.6;max-width:none}
.news-read-more{font-size:14px;font-weight:600;color:var(--primary);white-space:nowrap;align-self:center;flex-shrink:0}
.news-read-more:hover{color:var(--primary-hover)}
.empty-state{padding:80px 0;text-align:center;color:var(--text-weak);font-size:15px;border-top:1px solid var(--border)}
@media(max-width:40em){.news-list-item{flex-direction:column;gap:8px}.news-meta{min-width:auto}.news-title{font-size:16px}.news-read-more{display:none}}

.cta-panel{background:var(--dark);position:relative;overflow:hidden}
.cta-panel .cta-bg{position:absolute;inset:0;background-image:url('/assets/images/backpic/back-3.webp');background-size:cover;background-position:center;opacity:.3}
.cta-panel .cta-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,21,21,.95),rgba(21,21,21,.75))}
.cta-inner{position:relative;z-index:2;text-align:center;padding:90px 0;max-width:640px;margin:0 auto}
.cta-inner h2{font-size:36px;font-weight:900;color:#fff;margin-bottom:16px;letter-spacing:.02em}
.cta-inner p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.8;margin-bottom:32px}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@media(max-width:40em){.cta-inner h2{font-size:28px}.cta-inner{padding:70px 0}}

.site-footer{background:var(--dark);color:rgba(255,255,255,.6)}
.footer-top{padding:64px 0 44px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{font-size:22px;font-weight:800;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-brand i{color:var(--primary)}
.footer-desc{font-size:14px;color:rgba(255,255,255,.5);line-height:1.7;max-width:260px;margin-bottom:20px}
.footer-col-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:14px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:14px;color:rgba(255,255,255,.45);transition:color .2s ease}
.footer-links a:hover{color:var(--primary)}
.footer-subscribe{display:flex;gap:0;margin-top:12px}
.footer-subscribe input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:10px 14px;color:#fff;font-size:14px;border-radius:4px 0 0 4px;outline:none;transition:border-color .2s ease;min-width:0}
.footer-subscribe input:focus{border-color:var(--primary)}
.footer-subscribe input::placeholder{color:rgba(255,255,255,.35)}
.footer-subscribe button{background:var(--primary);color:var(--dark);border:none;padding:0 18px;border-radius:0 4px 4px 0;font-weight:700;cursor:pointer;font-size:14px;transition:background .2s ease}
.footer-subscribe button:hover{background:var(--primary-hover)}
.footer-bottom{padding:24px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.35)}
.footer-bottom a{color:rgba(255,255,255,.45)}
.footer-bottom a:hover{color:var(--primary)}

.fixed-bar{position:fixed;bottom:0;left:0;width:100%;background:var(--dark);border-top:1px solid rgba(255,255,255,.1);z-index:900;transform:translateY(105%);transition:transform .3s ease;padding:0}
.fixed-bar.visible{transform:translateY(0)}
.fixed-bar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;padding:0 24px}
.fixed-bar-text{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.fixed-bar .btn{padding:9px 20px;font-size:14px}
.fixed-bar-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:18px;cursor:pointer;transition:color .2s ease;padding:4px}
.fixed-bar-close:hover{color:#fff}
@media(max-width:40em){.fixed-bar-inner{height:56px;padding:0 16px}.fixed-bar-text{font-size:13px}.fixed-bar .btn{display:none}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* roulang page: category1 */
:root {
  --primary: #C47A1A;
  --primary-hover: #A56510;
  --primary-tint: #F7E8D3;
  --dark: #151515;
  --dark-soft: rgba(21,21,21,.92);
  --bg: #F5F4F0;
  --bg-white: #FFFFFF;
  --accent: #2F6D62;
  --text: #222;
  --text-secondary: #5A5A55;
  --text-muted: #8A8A85;
  --border: #E4E1DA;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 12px 32px rgba(21,21,21,.08);
  --header-h: 108px;
  --transition: .25s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); transition: color var(--transition); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* ============ Header ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(21,21,21,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .2s ease, box-shadow .2s ease;
}
.site-header.is-sticky {
  background: rgba(21,21,21,.95);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.header-top {
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: height .2s ease;
}
.header-top-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 52px;
  padding: 8px 0;
}
.brand-logo {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo i { color: var(--primary); font-size: 22px; }
.header-search {
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: background .2s ease;
}
.header-search:focus-within { background: rgba(255,255,255,.95); }
.header-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}
.header-search:focus-within input { color: #151515; }
.header-search input::placeholder { color: rgba(255,255,255,.45); }
.header-search:focus-within input::placeholder { color: rgba(21,21,21,.45); }
.header-search button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.7);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.header-search:focus-within button { color: var(--primary); }
.header-hot { display: flex; align-items: center; gap: 6px; }
.hot-label { font-size: 12px; color: rgba(255,255,255,.35); white-space: nowrap; }
.header-hot a {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.header-hot a:hover { color: var(--primary); border-color: var(--primary); }
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  margin-left: auto;
  padding: 4px 8px;
}
.header-nav { height: 56px; }
.nav-channels {
  display: flex;
  align-items: center;
  height: 56px;
  gap: 0;
}
.nav-channels li { margin: 0; height: 100%; }
.nav-channels a {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 22px;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-channels a:hover { color: #fff; border-bottom-color: var(--primary); background: rgba(255,255,255,.03); }
.nav-channels a.active { color: #fff; border-bottom-color: var(--primary); }

.mobile-search, .mobile-hot { display: none; }

/* ============ Banner ============ */
.page-banner {
  padding: 64px 0 56px;
  background: linear-gradient(135deg, rgba(21,21,21,.9), rgba(21,21,21,.68)), url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  color: #fff;
}
.breadcrumbs {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.breadcrumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .sep { color: rgba(255,255,255,.35); margin: 0 4px; }
.page-banner h1 {
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.page-banner .banner-intro {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  max-width: 740px;
  margin-bottom: 0;
}

/* ============ Hero ============ */
.entry-hero {
  padding: 88px 0;
  background: linear-gradient(rgba(21,21,21,.84), rgba(21,21,21,.88)), url('/assets/images/backpic/back-1.png') center/cover no-repeat;
  color: #fff;
  position: relative;
}
.hero-badge {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  letter-spacing: .04em;
}
.entry-hero h2 {
  font-size: 46px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
  color: #fff;
  letter-spacing: .02em;
}
.entry-hero p {
  font-size: 18px;
  color: rgba(255,255,255,.72);
  max-width: 660px;
  margin-bottom: 28px;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============ Buttons ============ */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .25s ease;
}
.btn-primary { background: var(--primary); color: #151515; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(196,122,26,.28); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-secondary { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.55); }
.btn-secondary:hover { background: rgba(196,122,26,.12); color: var(--primary); border-color: var(--primary); }
.btn-secondary:active { transform: translateY(1px); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid rgba(196,122,26,.5);
  outline-offset: 2px;
}

/* ============ Section Head ============ */
.section-head { margin-bottom: 48px; }
.section-head .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.section-head h2 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; letter-spacing: .02em; }
.section-head p { font-size: 16px; color: var(--text-secondary); max-width: 660px; margin: 0; }

/* ============ Features Strip ============ */
.features-strip { background: var(--bg); padding: 96px 0; }
.feature-row { border-top: 1px solid var(--border); }
.feature-item {
  display: grid;
  grid-template-columns: 120px 1fr 64px;
  gap: 24px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
  transition: background .25s ease;
}
.feature-item:hover { background: rgba(196,122,26,.03); }
.feature-item.indent-1 { margin-left: 40px; }
.feature-item.indent-2 { margin-left: 80px; }
.feature-num { font-size: 72px; font-weight: 900; color: rgba(196,122,26,.22); line-height: 1; transition: color .25s ease; }
.feature-item:hover .feature-num { color: var(--primary); }
.feature-body h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.feature-body p { font-size: 15px; color: var(--text-secondary); max-width: 540px; margin: 0; line-height: 1.7; }
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary);
  background: var(--bg-white);
  transition: border-color .25s ease, background .25s ease;
}
.feature-item:hover .feature-icon { border-color: var(--primary); background: var(--primary-tint); }

/* ============ Scene Blocks ============ */
.scene-block { padding: 96px 0; background: var(--bg); }
.scene-block.alt { background: var(--bg-white); }
.scene-img {
  border: 1px solid var(--border);
  border-radius: 2px;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.scene-content .badge {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.scene-content h2 { font-size: 30px; font-weight: 800; margin-bottom: 14px; line-height: 1.25; }
.scene-content p { font-size: 16px; color: var(--text-secondary); margin-bottom: 16px; }
.scene-list { margin-bottom: 20px; }
.scene-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 15px;
  color: var(--text-secondary);
}
.scene-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 1px;
}
.scene-link { font-size: 15px; font-weight: 600; color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.scene-link:hover { color: var(--primary-hover); border-bottom-color: var(--primary); }

/* ============ Process Block ============ */
.process-block {
  padding: 96px 0;
  background: linear-gradient(rgba(21,21,21,.86), rgba(21,21,21,.9)), url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
  color: #fff;
}
.process-block .section-head h2 { color: #fff; }
.process-block .section-head p { color: rgba(255,255,255,.6); }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.process-step {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 30px 24px;
  background: rgba(255,255,255,.04);
  transition: background .25s ease, border-color .25s ease;
}
.process-step:hover { background: rgba(255,255,255,.07); border-color: rgba(196,122,26,.4); }
.process-step .step-num { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 8px; letter-spacing: .06em; }
.process-step h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.process-step p { font-size: 14px; color: rgba(255,255,255,.6); margin: 0; line-height: 1.7; }

/* ============ Scenarios ============ */
.scenarios { padding: 96px 0; background: var(--bg-white); }
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scenario-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px;
  background: var(--bg-white);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.scenario-card:hover { box-shadow: var(--shadow); border-color: rgba(196,122,26,.4); transform: translateY(-2px); }
.scenario-card .sc-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-tint);
  color: var(--primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}
.scenario-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.scenario-card p { font-size: 15px; color: var(--text-secondary); margin: 0; }

/* ============ FAQ ============ */
.faq-section { padding: 96px 0; background: var(--bg); }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 22px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color .25s ease;
}
.faq-question:hover { color: var(--primary); }
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  background: var(--bg-white);
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.faq-item.active .faq-answer { max-height: 500px; padding: 0 4px 24px; }

/* ============ CTA ============ */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary), #D9983A);
  text-align: center;
}
.cta-section h2 { font-size: 32px; font-weight: 800; color: #151515; margin-bottom: 10px; }
.cta-section p { font-size: 16px; color: rgba(21,21,21,.7); margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-section .btn-primary { background: var(--dark); color: #fff; border-color: var(--dark); }
.cta-section .btn-primary:hover { background: #000; box-shadow: 0 10px 28px rgba(21,21,21,.35); }

/* ============ Footer ============ */
.site-footer { background: var(--dark); color: rgba(255,255,255,.65); padding-top: 64px; }
.footer-top { padding-bottom: 48px; }
.footer-brand { font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.footer-brand i { color: var(--primary); }
.footer-desc { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 340px; }
.footer-col-title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .04em; margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,.5); text-decoration: none; transition: color .25s ease; }
.footer-links a:hover { color: var(--primary); }
.footer-subscribe { display: flex; }
.footer-subscribe input {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.footer-subscribe input::placeholder { color: rgba(255,255,255,.4); }
.footer-subscribe button {
  background: var(--primary);
  border: none;
  color: #151515;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.footer-subscribe button:hover { background: var(--primary-hover); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.4);
}
.footer-bottom p { margin: 0; }

/* ============ Animations ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.entry-hero .hero-badge,
.entry-hero h2,
.entry-hero p,
.hero-actions {
  animation: fadeUp .5s ease-out both;
}
.entry-hero .hero-badge { animation-delay: .08s; }
.entry-hero h2 { animation-delay: .18s; }
.entry-hero p { animation-delay: .3s; }
.hero-actions { animation-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .process-steps { grid-template-columns: 1fr; }
  .scenario-grid { grid-template-columns: 1fr 1fr; }
  .section-head h2 { font-size: 28px; }
  .page-banner h1 { font-size: 36px; }
  .entry-hero h2 { font-size: 38px; }
  .scene-content h2 { font-size: 26px; }
  .feature-item.indent-1 { margin-left: 20px; }
  .feature-item.indent-2 { margin-left: 40px; }
}

@media (max-width: 639.98px) {
  :root { --header-h: 56px; }
  .container { padding: 0 16px; }
  .header-top-inner { height: 56px; }
  .header-search, .header-hot { display: none; }
  .menu-toggle { display: block; }
  .header-nav { display: none; height: auto; }
  .header-nav.open { display: block; }
  .nav-channels {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 0 16px;
  }
  .nav-channels li { width: 100%; height: auto; }
  .nav-channels a {
    height: auto;
    padding: 14px 20px;
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 15px;
  }
  .nav-channels a.active { border-left-color: var(--primary); }
  .mobile-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin: 12px 16px 0;
    color: rgba(255,255,255,.5);
  }
  .mobile-search input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    outline: none;
    font-size: 14px;
    font-family: inherit;
  }
  .mobile-search input::placeholder { color: rgba(255,255,255,.4); }
  .mobile-hot {
    display: flex;
    gap: 12px;
    padding: 12px 16px 8px;
    flex-wrap: wrap;
  }
  .mobile-hot a {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.3);
    padding-bottom: 2px;
  }
  .mobile-hot a:hover { color: var(--primary); }
  .page-banner { padding: 48px 0 40px; }
  .page-banner h1 { font-size: 30px; }
  .entry-hero { padding: 56px 0; }
  .entry-hero h2 { font-size: 32px; }
  .entry-hero p { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; }
  .features-strip { padding: 56px 0; }
  .feature-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .feature-item.indent-1, .feature-item.indent-2 { margin-left: 0; }
  .feature-num { font-size: 44px; }
  .feature-icon { display: none; }
  .scene-block { padding: 56px 0; }
  .scene-content h2 { font-size: 22px; }
  .process-block { padding: 56px 0; }
  .scenarios { padding: 56px 0; }
  .scenario-grid { grid-template-columns: 1fr; }
  .faq-section { padding: 56px 0; }
  .cta-section { padding: 56px 0; }
  .cta-section h2 { font-size: 26px; }
  .footer-top .cell { margin-bottom: 32px; }
}

/* roulang page: article */
:root {
  --primary: #C47A1A;
  --primary-hover: #A56510;
  --primary-tint: #F7E8D3;
  --dark: #151515;
  --dark-soft: rgba(21,21,21,.92);
  --bg: #F5F4F0;
  --white: #FFFFFF;
  --accent: #2F6D62;
  --text: #222222;
  --text-sub: #5A5A55;
  --text-weak: #8A8A85;
  --border: #E4E1DA;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 12px 32px rgba(21,21,21,.08);
  --font: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button,input,textarea,select { font-family:inherit; font-size:inherit; outline:none; }

.container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(21,21,21,.78);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  background: var(--dark-soft);
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.header-top { height:60px; overflow:hidden; transition: height .25s ease, opacity .2s ease; }
.site-header.scrolled .header-top { height:0; opacity:0; }
.header-top-inner { display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px; }
.header-bottom { border-top:1px solid rgba(255,255,255,.05); }
.header-bottom-inner { display:flex; align-items:center; justify-content:space-between; height:52px; transition: height .25s ease; }
.site-header.scrolled .header-bottom-inner { height:56px; }

.brand-logo { display:inline-flex; align-items:center; gap:10px; color:#fff; white-space:nowrap; }
.brand-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; border-radius:var(--radius); font-size:17px; }
.brand-text { font-size:20px; font-weight:800; letter-spacing:.02em; }

.header-tools { display:flex; align-items:center; gap:16px; }
.header-search { position:relative; display:flex; align-items:center; }
.header-search i { position:absolute; left:12px; color:rgba(255,255,255,.45); font-size:13px; pointer-events:none; }
.header-search input {
  width:200px; height:36px; padding:0 14px 0 34px;
  background:rgba(255,255,255,.1); border:1px solid transparent; border-radius:4px;
  color:#fff; font-size:13px; transition:background .2s, border-color .2s;
}
.header-search input::placeholder { color:rgba(255,255,255,.4); }
.header-search input:focus { background:#fff; color:var(--text); border-color:var(--primary); box-shadow:0 0 0 2px rgba(196,122,26,.25); }
.hot-tags { display:flex; align-items:center; gap:12px; }
.hot-tags a { font-size:12px; color:rgba(255,255,255,.55); border-bottom:1px dashed rgba(255,255,255,.25); padding-bottom:1px; transition:color .2s,border-color .2s; }
.hot-tags a:hover { color:var(--primary); border-color:var(--primary); }

.main-nav .nav-channels { display:flex; align-items:center; gap:2px; }
.main-nav .nav-channels a { display:block; padding:14px 16px; font-size:15px; font-weight:600; color:rgba(255,255,255,.72); border-bottom:3px solid transparent; transition:color .2s,border-color .2s; }
.main-nav .nav-channels a:hover { color:#fff; border-bottom-color:var(--primary); }
.main-nav .nav-channels a.active { color:#fff; border-bottom-color:var(--primary); }
.nav-extra span { font-size:12px; color:rgba(255,255,255,.45); display:inline-flex; align-items:center; gap:6px; }
.nav-extra i { font-size:8px; color:var(--accent); }

.mobile-menu-toggle { display:none; width:38px; height:38px; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); color:#fff; cursor:pointer; transition:background .2s; }
.mobile-menu-toggle:hover { background:rgba(255,255,255,.16); }

.mobile-nav { display:none; background:var(--dark); border-bottom:1px solid rgba(255,255,255,.08); padding:8px 24px 20px; }
.mobile-nav.is-open { display:block; }
.mobile-nav-list li a { display:block; padding:12px 12px; color:rgba(255,255,255,.75); font-size:15px; font-weight:500; border-bottom:1px solid rgba(255,255,255,.06); }
.mobile-nav-list li a:hover, .mobile-nav-list li a.active { color:var(--primary); }
.mobile-nav-search { display:flex; gap:8px; margin-top:14px; }
.mobile-nav-search input { flex:1; height:38px; padding:0 12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:4px; color:#fff; }
.mobile-nav-search input::placeholder { color:rgba(255,255,255,.4); }
.mobile-nav-search button { width:42px; border:0; background:var(--primary); color:#fff; border-radius:4px; cursor:pointer; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 28px; border-radius:var(--radius); font-size:15px; font-weight:600; line-height:1; border:1px solid transparent; cursor:pointer; transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid rgba(196,122,26,.55); outline-offset:2px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 8px 20px rgba(196,122,26,.28); }
.btn-secondary { background:transparent; border-color:rgba(21,21,21,.4); color:var(--text); }
.btn-secondary:hover { background:rgba(196,122,26,.1); color:var(--primary); border-color:var(--primary); }
.btn-on-dark { border-color:rgba(255,255,255,.7); color:#fff; }
.btn-on-dark:hover { background:rgba(196,122,26,.12); color:var(--primary); border-color:var(--primary); }

/* ===== Article Head ===== */
.article-head { background:var(--white); border-bottom:1px solid var(--border); padding:44px 0 36px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--text-weak); margin-bottom:20px; }
.breadcrumb a { color:var(--text-sub); transition:color .2s; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .sep { color:#c3bfb6; }
.article-badge { display:inline-block; padding:5px 14px; background:var(--primary-tint); color:var(--primary-hover); font-size:12px; font-weight:600; border-radius:var(--radius-sm); margin-bottom:18px; }
.article-head h1 { max-width:820px; font-size:40px; font-weight:800; line-height:1.22; letter-spacing:.02em; color:var(--text); margin-bottom:22px; }
.article-meta { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--text-weak); }
.article-meta span { display:inline-flex; align-items:center; gap:6px; }
.article-meta i { color:var(--primary); font-size:12px; }

/* ===== Article Main ===== */
.article-main { padding:56px 0 72px; }
.article-block { max-width:820px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:8px; padding:48px 52px; }
.article-feature { margin-bottom:36px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.article-feature img { width:100%; height:auto; }

.article-content { font-size:16px; line-height:1.9; color:var(--text); word-break:break-word; }
.article-content p { margin-bottom:24px; }
.article-content p:last-child { margin-bottom:0; }
.article-content h2 { font-size:26px; font-weight:800; margin:42px 0 16px; line-height:1.3; }
.article-content h3 { font-size:21px; font-weight:700; margin:36px 0 12px; line-height:1.35; }
.article-content h4 { font-size:18px; font-weight:700; margin:28px 0 10px; }
.article-content a { color:var(--primary); border-bottom:1px solid var(--primary); transition:color .2s,border-color .2s; }
.article-content a:hover { color:var(--primary-hover); border-color:var(--primary-hover); }
.article-content ul { margin:20px 0 24px; }
.article-content ul li { position:relative; padding-left:22px; margin-bottom:10px; }
.article-content ul li::before { content:''; position:absolute; left:0; top:.68em; width:6px; height:6px; background:var(--primary); border-radius:1px; }
.article-content ol { list-style:decimal; margin:20px 0 24px; padding-left:24px; }
.article-content ol li { margin-bottom:8px; }
.article-content blockquote { border-left:4px solid var(--primary); background:var(--primary-tint); padding:18px 24px; margin:28px 0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text-sub); }
.article-content blockquote p { margin-bottom:8px; }
.article-content blockquote p:last-child { margin-bottom:0; }
.article-content img { border-radius:var(--radius-sm); border:1px solid var(--border); margin:28px 0; }
.article-content table { width:100%; border-collapse:collapse; margin:24px 0; }
.article-content table th, .article-content table td { border:1px solid var(--border); padding:10px 14px; text-align:left; }
.article-content table th { background:var(--bg); font-weight:700; }
.article-content code { background:#f1f0ec; padding:2px 6px; border-radius:4px; font-size:14px; }

.article-empty { text-align:center; padding:72px 24px; }
.article-empty .empty-icon { width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:50%; color:var(--text-weak); font-size:26px; }
.article-empty p { font-size:16px; color:var(--text-sub); margin-bottom:22px; }
.empty-btn { display:inline-block; padding:11px 30px; background:var(--primary); color:#fff; border-radius:var(--radius); font-size:15px; font-weight:600; transition:background .2s, transform .15s; }
.empty-btn:hover { background:var(--primary-hover); transform:translateY(-1px); }

/* ===== Article CTA ===== */
.article-cta { position:relative; padding:64px 0; background:var(--dark); background-image:url('/assets/images/backpic/back-1.png'); background-size:cover; background-position:center; }
.article-cta::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(21,21,21,.88), rgba(21,21,21,.65)); }
.article-cta .container { position:relative; z-index:1; }
.article-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.article-cta h2 { font-size:26px; font-weight:800; color:#fff; margin-bottom:10px; }
.article-cta p { font-size:14px; color:rgba(255,255,255,.62); margin:0; }
.article-cta-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* ===== Related ===== */
.related-section { padding:72px 0; }
.section-head { margin-bottom:36px; }
.section-head h2 { font-size:30px; font-weight:800; color:var(--text); letter-spacing:.02em; }
.section-head p { font-size:14px; color:var(--text-weak); margin-top:6px; }
.related-grid { margin:0 -10px; }
.related-grid .cell { padding:10px; display:flex; }
.related-card { flex:1; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:8px; padding:26px 26px 22px; transition:border-color .25s, box-shadow .25s, transform .25s; }
.related-card:hover { border-color:rgba(196,122,26,.45); box-shadow:var(--shadow); transform:translateY(-3px); }
.related-cat { align-self:flex-start; font-size:12px; font-weight:600; color:var(--primary-hover); background:var(--primary-tint); padding:3px 12px; border-radius:var(--radius-sm); }
.related-card h3 { font-size:18px; font-weight:700; color:var(--text); margin:14px 0 8px; line-height:1.4; transition:color .2s; }
.related-card:hover h3 { color:var(--primary); }
.related-card p { font-size:14px; color:var(--text-sub); margin-bottom:16px; flex:1; }
.related-date { font-size:12px; color:var(--text-weak); display:inline-flex; align-items:center; gap:6px; }

/* ===== Footer ===== */
.site-footer { background:var(--dark); color:rgba(255,255,255,.7); padding-top:60px; }
.footer-top { padding-bottom:40px; }
.footer-brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; color:#fff; margin-bottom:16px; }
.footer-brand i { color:var(--primary); }
.footer-desc { font-size:14px; line-height:1.8; color:rgba(255,255,255,.45); margin-bottom:24px; }
.footer-col-title { font-size:13px; font-weight:700; color:rgba(255,255,255,.7); margin-bottom:14px; letter-spacing:.04em; }
.footer-links li { margin-bottom:10px; }
.footer-links a { font-size:14px; color:rgba(255,255,255,.5); transition:color .2s; }
.footer-links a:hover { color:var(--primary); }
.footer-subscribe { display:flex; gap:8px; max-width:280px; }
.footer-subscribe input { flex:1; height:38px; padding:0 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:4px; color:#fff; font-size:13px; }
.footer-subscribe input::placeholder { color:rgba(255,255,255,.35); }
.footer-subscribe button { height:38px; padding:0 18px; background:var(--primary); border:0; border-radius:4px; color:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; }
.footer-subscribe button:hover { background:var(--primary-hover); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:18px 0; }
.footer-bottom p { font-size:13px; color:rgba(255,255,255,.38); text-align:center; margin:0; }

/* ===== Responsive ===== */
@media (min-width: 40em) {
  .mobile-nav { display:none !important; }
}

@media (min-width: 40em) and (max-width: 63.99875em) {
  .hot-tags { display:none; }
  .header-search input { width:160px; }
  .main-nav .nav-channels a { padding:14px 10px; font-size:14px; }
  .brand-text { font-size:18px; }
}

@media (max-width: 39.99875em) {
  .container { padding:0 16px; }
  .header-bottom { display:none; }
  .header-tools { display:none; }
  .mobile-menu-toggle { display:inline-flex; }
  .site-header.scrolled .header-top { height:60px; opacity:1; }
  .header-top-inner { height:60px; }
  .brand-text { font-size:16px; }
  .brand-icon { width:34px; height:34px; font-size:15px; }
  .article-head { padding:32px 0 24px; }
  .article-head h1 { font-size:30px; }
  .article-meta { gap:12px; font-size:12px; }
  .article-block { padding:28px 20px; border-radius:6px; }
  .article-content { font-size:15px; line-height:1.85; }
  .article-content p { margin-bottom:20px; }
  .article-content h2 { font-size:22px; margin:36px 0 14px; }
  .article-content h3 { font-size:19px; }
  .article-cta-inner { flex-direction:column; align-items:flex-start; }
  .article-cta h2 { font-size:21px; }
  .article-cta-actions { width:100%; }
  .article-cta-actions .btn { flex:1; min-width:140px; }
  .related-section { padding:56px 0; }
  .section-head h2 { font-size:26px; }
  .related-grid { margin:0; }
  .related-grid .cell { padding:8px 0; }
  .site-footer { padding-top:48px; }
}

/* ===== Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* roulang page: category2 */
/* ========== 设计变量 ========== */
:root{
  --primary:#C47A1A;
  --primary-hover:#A56510;
  --primary-tint:#F7E8D3;
  --ink:#151515;
  --ink-soft:rgba(21,21,21,.92);
  --bg:#F5F4F0;
  --bg-white:#FFFFFF;
  --accent:#2F6D62;
  --text-main:#222;
  --text-sub:#5A5A55;
  --text-weak:#8A8A85;
  --border:#E4E1DA;
  --radius:6px;
  --shadow-hover:0 12px 32px rgba(21,21,21,.08);
  --container:1280px;
  --section-space:96px;
  --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
/* ========== Reset / Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:16px;line-height:1.75;color:var(--text-main);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
ul,ol{list-style:none}
button{background:none;border:none;cursor:pointer;font-family:inherit}
input,textarea{font-family:inherit}
:focus-visible{outline:2px solid rgba(196,122,26,.5);outline-offset:2px;border-radius:4px}
/* ========== 容器 ========== */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:var(--section-space) 0}
.section-alt{background:var(--bg-white)}
/* ========== 页头导航 ========== */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  background:var(--ink-soft);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .2s ease,box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.2)}
.header-top{transition:all .2s ease;max-height:72px;overflow:hidden}
.site-header.scrolled .header-top{max-height:0;opacity:0;pointer-events:none}
.header-top-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;transition:height .2s}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:20px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand i{color:var(--primary);font-size:22px}
.header-search{flex:1;max-width:360px;display:flex;align-items:center;background:rgba(255,255,255,.1);border-radius:4px;border:1px solid rgba(255,255,255,.05);overflow:hidden}
.header-search input{flex:1;background:transparent;border:none;color:#fff;font-size:14px;padding:9px 14px;min-width:0}
.header-search input::placeholder{color:rgba(255,255,255,.4)}
.header-search input:focus{outline:none}
.header-search button{background:transparent;color:rgba(255,255,255,.6);padding:0 14px;font-size:14px;transition:color .2s}
.header-search button:hover{color:var(--primary)}
.header-hot{display:flex;align-items:center;gap:8px;font-size:13px}
.hot-label{color:rgba(255,255,255,.45);white-space:nowrap}
.header-hot a{color:rgba(255,255,255,.7);border-bottom:1px dashed rgba(255,255,255,.3);padding-bottom:2px;white-space:nowrap;transition:color .2s,border-color .2s}
.header-hot a:hover{color:var(--primary);border-color:var(--primary)}
.menu-toggle{display:none;background:transparent;color:#fff;font-size:22px;padding:8px;border-radius:4px}
.header-bottom{transition:max-height .2s ease}
.header-bottom nav{display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-channels{display:flex;align-items:center;gap:4px;height:100%}
.nav-channels li{height:100%;display:flex;align-items:center}
.nav-channels li a{
  display:flex;align-items:center;height:100%;padding:0 22px;
  font-size:16px;font-weight:500;color:rgba(255,255,255,.85);
  border-bottom:3px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap;
}
.nav-channels li a:hover{color:#fff;border-bottom-color:rgba(196,122,26,.5)}
.nav-channels li a.active{color:#fff;border-bottom-color:var(--primary);font-weight:700}
/* ========== 横幅 Banner ========== */
.page-banner{
  position:relative;background:var(--ink);
  background-image:url('/assets/images/backpic/back-1.png');
  background-size:cover;background-position:center;
  padding:96px 0 80px;color:#fff;overflow:hidden;
}
.page-banner::before{
  content:'';position:absolute;inset:0;background:rgba(21,21,21,.72);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px;
}
.page-banner .container{position:relative;z-index:2}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.6);margin-bottom:20px}
.breadcrumb a{color:rgba(255,255,255,.6);transition:color .2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.3)}
.page-banner h1{font-size:48px;font-weight:900;line-height:1.2;letter-spacing:.02em;margin-bottom:18px;max-width:820px}
.page-banner h1 .highlight{color:var(--primary)}
.banner-intro{font-size:18px;line-height:1.8;color:rgba(255,255,255,.8);max-width:700px}
/* ========== 区块标题 ========== */
.section-head{margin-bottom:56px;text-align:center}
.section-head.left{text-align:left}
.section-kicker{display:inline-block;font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;padding:4px 14px;background:var(--primary-tint);border-radius:4px}
.section-head h2{font-size:34px;font-weight:800;line-height:1.2;letter-spacing:.02em;color:var(--text-main);margin-bottom:14px}
.section-head p{font-size:16px;color:var(--text-sub);max-width:620px;margin:0 auto}
.section-head.left p{margin:0}
/* ========== 服务概览信息条 ========== */
.service-overview{background:var(--bg)}
.info-rows{max-width:940px;margin:0 auto}
.info-row{
  display:flex;align-items:center;gap:40px;padding:40px 0;
  border-top:1px solid var(--border);transition:background .2s;
}
.info-row:last-child{border-bottom:1px solid var(--border)}
.info-row:hover{background:rgba(196,122,26,.03)}
.info-row:hover .info-num{color:var(--primary)}
.info-row.is-shift-1{transform:translateX(40px)}
.info-row.is-shift-2{transform:translateX(80px)}
.info-num{font-size:72px;font-weight:900;color:rgba(196,122,26,.25);line-height:1;min-width:100px;transition:color .2s}
.info-content{flex:1}
.info-content h3{font-size:22px;font-weight:700;margin-bottom:10px;color:var(--text-main)}
.info-content p{font-size:15px;color:var(--text-sub);line-height:1.8;max-width:520px}
.info-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--primary-tint);display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:20px;flex-shrink:0;
}
/* ========== 统计区 ========== */
.stats-section{background:var(--ink);padding:64px 0;color:#fff}
.stats-grid{display:flex;flex-wrap:wrap}
.stat-item{text-align:center;padding:20px 0;border-right:1px solid rgba(255,255,255,.08)}
.stat-item:last-child{border-right:none}
.stat-item:first-child{border-left:1px solid rgba(255,255,255,.08)}
.stat-num{font-size:48px;font-weight:900;color:var(--primary);line-height:1.1;margin-bottom:8px}
.stat-num .suffix{font-size:22px;font-weight:700}
.stat-label{font-size:14px;color:rgba(255,255,255,.6)}
/* ========== 场景演示 ========== */
.scenarios{background:var(--bg-white)}
.scenario-block{margin-bottom:80px}
.scenario-block:last-child{margin-bottom:0}
.image-wrap{
  border-radius:2px;border:1px solid var(--border);overflow:hidden;
  background:var(--bg);position:relative;
}
.image-wrap img{width:100%;height:280px;object-fit:cover;transition:transform .4s ease}
.image-wrap:hover img{transform:scale(1.02)}
.image-wrap::after{content:'';position:absolute;inset:0;background:rgba(21,21,21,.04);pointer-events:none}
.mini-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--primary);background:var(--primary-tint);padding:4px 12px;border-radius:4px;margin-bottom:16px}
.scenario-content h3{font-size:28px;font-weight:800;margin-bottom:16px;color:var(--text-main);line-height:1.3}
.scenario-content p{font-size:16px;color:var(--text-sub);line-height:1.8;margin-bottom:20px}
.scenario-content ul{margin-bottom:24px}
.scenario-content ul li{
  position:relative;padding-left:22px;margin-bottom:12px;font-size:15px;color:var(--text-main);
}
.scenario-content ul li::before{
  content:'';position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--primary);border-radius:2px;
}
.scenario-content ul li span{display:block;font-size:14px;color:var(--text-weak);line-height:1.6}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--primary);border-bottom:1px solid transparent;transition:border-color .2s}
.text-link i{transition:transform .2s}
.text-link:hover{border-bottom-color:var(--primary)}
.text-link:hover i{transform:translateX(4px)}
/* ========== 流程区 ========== */
.process-section{background:var(--bg)}
.process-step{text-align:center;padding:0 16px}
.step-num{
  width:72px;height:72px;margin:0 auto 20px;border-radius:50%;
  background:var(--ink);color:var(--primary);font-size:26px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(21,21,21,.12);
}
.process-step h3{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text-main)}
.process-step p{font-size:15px;color:var(--text-sub);line-height:1.7}
.process-arrow{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--primary)}
/* ========== FAQ ========== */
.faq-section{background:var(--bg-white)}
.faq-list{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;cursor:pointer;transition:color .2s;
}
.faq-q:hover{color:var(--primary)}
.faq-q h3{font-size:17px;font-weight:600;line-height:1.5}
.faq-icon{width:32px;height:32px;border-radius:50%;background:var(--primary-tint);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;transition:transform .25s ease;flex-shrink:0}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 4px;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}
.faq-item.active .faq-a{max-height:300px;opacity:1;padding:0 4px 24px}
.faq-a p{font-size:15px;color:var(--text-sub);line-height:1.8}
/* ========== CTA ========== */
.cta-section{padding:80px 0}
.cta-box{
  position:relative;border-radius:2px;overflow:hidden;background:var(--ink);
  background-image:url('/assets/images/backpic/back-2.webp');
  background-size:cover;background-position:center;
  padding:80px 64px;text-align:center;color:#fff;
}
.cta-box::before{content:'';position:absolute;inset:0;background:rgba(21,21,21,.78)}
.cta-box .container{position:relative;z-index:2}
.cta-box h2{font-size:36px;font-weight:900;margin-bottom:16px;color:#fff}
.cta-box p{font-size:18px;color:rgba(255,255,255,.7);margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* ========== 按钮 ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 32px;font-size:16px;font-weight:600;border-radius:var(--radius);
  transition:all .2s ease;cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--primary);color:var(--ink);border:1px solid var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 8px 20px rgba(196,122,26,.25)}
.btn-primary:active{transform:translateY(1px);box-shadow:none}
.btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.btn-outline-light:hover{background:rgba(196,122,26,.15);border-color:var(--primary);color:#fff}
.btn-outline-dark{background:transparent;color:var(--text-main);border:1px solid rgba(21,21,21,.4)}
.btn-outline-dark:hover{background:rgba(196,122,26,.08);border-color:var(--primary);color:var(--primary)}
.btn-sm{padding:10px 20px;font-size:14px;border-radius:5px}
/* ========== 页脚 ========== */
.site-footer{background:var(--ink);color:#fff;margin-top:0}
.footer-top{padding:56px 24px 40px}
.footer-brand{font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand i{color:var(--primary);font-size:20px}
.footer-desc{font-size:14px;line-height:1.8;color:rgba(255,255,255,.5);max-width:340px}
.footer-col-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:18px}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:14px;color:rgba(255,255,255,.5);transition:color .2s}
.footer-links a:hover{color:var(--primary)}
.footer-subscribe{display:flex;gap:8px;max-width:280px}
.footer-subscribe input{
  flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  border-radius:4px;padding:10px 14px;font-size:14px;color:#fff;min-width:0;
}
.footer-subscribe input::placeholder{color:rgba(255,255,255,.4)}
.footer-subscribe button{
  background:var(--primary);color:var(--ink);font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:4px;transition:background .2s;
}
.footer-subscribe button:hover{background:var(--primary-hover)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0}
.footer-bottom p{font-size:14px;color:rgba(255,255,255,.35);margin:0;text-align:center}
/* ========== 动效 ========== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.page-banner .breadcrumb,.page-banner h1,.page-banner .banner-intro{animation:fadeUp .4s ease-out both}
.page-banner .breadcrumb{animation-delay:.05s}
.page-banner h1{animation-delay:.18s}
.page-banner .banner-intro{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
/* ========== 响应式 ========== */
@media (max-width:64em){
  :root{--section-space:72px}
  .info-row.is-shift-1{transform:translateX(20px)}
  .info-row.is-shift-2{transform:translateX(40px)}
  .stat-num{font-size:40px}
  .page-banner h1{font-size:38px}
}
@media (max-width:40em){
  :root{--section-space:56px}
  .container{padding:0 16px}
  .header-top-row{height:62px}
  .brand{font-size:17px}
  .header-search,.header-hot{display:none}
  .menu-toggle{display:block}
  .header-bottom{max-height:0;overflow:hidden;transition:max-height .25s ease}
  .site-header.menu-open .header-bottom{max-height:380px;overflow:visible}
  .header-bottom nav{height:auto;flex-direction:column;padding:16px 0}
  .nav-channels{flex-direction:column;width:100%;height:auto;gap:0}
  .nav-channels li{height:auto;width:100%}
  .nav-channels li a{height:48px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-channels li a.active,.nav-channels li a:hover{border-bottom-color:var(--primary)}
  .site-header.menu-open .header-search{
    display:flex;width:100%;max-width:none;margin-bottom:14px;order:0;
  }
  .site-header.menu-open .header-hot{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;width:100%}
  .header-top-row{flex-wrap:wrap}
  .site-header.menu-open .header-top-row{height:auto;padding:14px 0}
  .site-header.menu-open .header-top{max-height:none;opacity:1;pointer-events:auto}
  .site-header.scrolled .header-top{max-height:none;opacity:1;pointer-events:auto}
  .page-banner{padding:64px 0 56px}
  .page-banner h1{font-size:32px}
  .banner-intro{font-size:16px}
  .section-head h2{font-size:26px}
  .section-head p{font-size:15px}
  .info-row{flex-direction:column;gap:16px;padding:28px 0;align-items:flex-start}
  .info-row.is-shift-1,.info-row.is-shift-2{transform:none}
  .info-num{font-size:52px;min-width:auto}
  .info-icon{position:absolute;right:16px}
  .info-row{position:relative}
  .stat-item{border:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .stat-item:first-child{border-left:none}
  .stat-item:nth-child(2n){border-left:1px solid rgba(255,255,255,.08)}
  .stat-item:nth-child(n+3){border-bottom:none}
  .stat-num{font-size:36px}
  .process-arrow{display:none}
  .process-step{margin-bottom:36px}
  .cta-box{padding:48px 24px}
  .cta-box h2{font-size:26px}
  .cta-box p{font-size:16px}
  .cta-btns{flex-direction:column;align-items:center}
  .btn{width:100%;max-width:320px}
  .footer-top{padding:48px 16px 32px}
  .footer-subscribe{max-width:100%}
}