/* roulang page: index */
:root{
  --bg-dark:#15161d;
  --bg-deep:#101116;
  --bg-1:#191c24;
  --bg-2:#1f222b;
  --bg-panel:#252a35;
  --bg-panel-2:#2b303d;
  --text-main:#f0f2f4;
  --text-soft:#bec4cd;
  --text-mute:#8e95a1;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --amber:#f6a821;
  --amber-light:#ffc35c;
  --amber-dark:#b9780a;
  --lime:#a7d04b;
  --green:#8fcb8f;
  --red:#e06b6b;
  --radius-lg:20px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow:0 12px 28px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.12);
  --font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",-apple-system,sans-serif;
}
html{background:var(--bg-dark);scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-dark);
  color:var(--text-main);
  font-family:var(--font-family);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit;text-decoration:none;transition:color .2s,-webkit-text-decoration-color .2s}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{line-height:1.3}
::selection{background:rgba(246,168,33,.3);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.row{max-width:none}
.container{width:100%;max-width:1180px;margin:0 auto;padding-left:clamp(22px,4vw,58px);padding-right:clamp(22px,4vw,58px)}

/* 左侧导航 */
.app-rail{
  position:fixed;
  left:0;top:0;bottom:0;
  width:min(78vw,330px);
  z-index:60;
  background:rgba(18,20,26,.98);
  border-right:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  padding:18px 14px 16px;
  transform:translateX(-104%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.app-rail.open{transform:translateX(0)}
.app-backdrop{
  position:fixed;inset:0;z-index:50;
  background:rgba(7,8,10,.65);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.app-backdrop.open{opacity:1;pointer-events:auto}
.brand-lock{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:4px;
  margin:0 2px 16px;
  border-radius:14px;
}
.brand-icon{
  width:42px;height:42px;min-width:42px;
  border-radius:14px;
  background:linear-gradient(145deg,#2a2614,#21120a);
  border:1px solid rgba(246,168,33,.38);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);
  font-size:20px;
  position:relative;
}
.brand-icon:after{
  content:"";
  position:absolute;left:-4px;top:-4px;right:-4px;bottom:-4px;
  border:1px solid rgba(246,168,33,.12);
  border-radius:18px;
}
.brand-text{
  display:block;
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text-main);
}
.rail-title-sec{
  color:var(--text-mute);
  font-size:11px;
  letter-spacing:.2em;
  padding:0 10px;
  margin:18px 0 8px;
}
.rail-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rail-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:12px;
  padding:11px 12px;
  color:var(--text-soft);
  font-size:15px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.rail-nav-item i{width:22px;text-align:center;color:var(--text-mute);font-size:17px;transition:color .2s}
.rail-nav-item:hover{background:var(--bg-2);color:#fff;border-color:var(--line)}
.rail-nav-item.active{background:linear-gradient(90deg,rgba(246,168,33,.18),rgba(246,168,33,.05));color:#fff;border-color:var(--line)}
.rail-nav-item.active i{color:var(--amber)}
.rail-secondary{
  margin-top:10px;
  font-size:13px;
  color:var(--text-mute);
  padding:8px 13px 8px 14px;
}
.rail-secondary:hover{color:var(--amber-light)}
.rail-stretch{flex:1}
.rail-top-btn{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:13px;
  color:var(--text-mute);
  background:transparent;
  cursor:pointer;
  transition:all .2s;
  width:100%;
}
.rail-top-btn:hover{color:#fff;border-color:var(--line-2);background:var(--bg-2)}
.rail-dot{
  width:6px;height:6px;border-radius:99px;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(246,168,33,.12);
}
.rail-dot.pulse{animation:dotPulse 2.4s infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(246,168,33,.4)}62%{box-shadow:0 0 0 8px rgba(246,168,33,0)}100%{box-shadow:0 0 0 0 rgba(246,168,33,0)}}

.page-canvas{
  min-height:100vh;
  margin-left:0;
  display:flex;
  flex-direction:column;
}
.mobile-header{
  position:sticky;
  top:0;
  z-index:45;
  min-height:58px;
  background:rgba(16,17,22,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px;
}
.mobile-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:16px;
  color:var(--text-main);
}
.mobile-logo-ic{
  width:28px;height:28px;border-radius:9px;
  background:var(--amber);color:#201602;
  display:grid;place-items:center;
  font-size:15px;
}
.mobile-menu-btn{
  width:40px;height:40px;border-radius:10px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text-main);
  font-size:18px;
  cursor:pointer;
  transition:all .25s;
}
.mobile-menu-btn:hover{background:var(--bg-2);border-color:var(--line-2)}

/* 通用区块样式 */
.main-shell{flex:1}
.section{padding:clamp(64px,9vw,112px) 0;position:relative}
.section + .section{border-top:1px solid var(--line)}
.sec-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--amber);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  padding-left:12px;
  position:relative;
}
.sec-eyebrow:before{content:"";width:20px;height:2px;background:var(--amber);position:absolute;left:-2px;border-radius:99px}
.sec-title{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:.01em;margin:14px 0 14px}
.sec-lead{font-size:clamp(15px,1.4vw,18px);color:var(--text-soft);max-width:680px;margin-bottom:8px}
.sec-head{margin-bottom:clamp(28px,5vw,56px)}
.sec-sub{margin-top:22px;display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap}

.eyebrow-center{justify-content:center}
.text-center{text-align:center}
.head-center{margin-left:auto;margin-right:auto}

/* 按钮 */
.btn,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:12px;
  padding:12px 22px;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .22s;
  text-transform:none;
}
.btn i{font-size:16px}
.btn-main{
  background:var(--amber);
  color:#2b1e06;
  border-color:var(--amber);
  box-shadow:0 6px 18px rgba(246,168,33,.16);
}
.btn-main:hover,.btn-main:focus{
  background:var(--amber-light);
  border-color:var(--amber-light);
  color:#2b1e06;
  transform:translateY(-2px);
  box-shadow:0 11px 28px rgba(246,168,33,.22);
}
.btn-outline{
  background:transparent;
  border-color:var(--line-2);
  color:var(--text-main);
}
.btn-outline:hover{
  border-color:var(--amber);
  color:var(--amber-light);
  transform:translateY(-2px);
  background:rgba(246,168,33,.05);
}
.btn-dark{
  background:var(--bg-panel-2);
  border-color:var(--line-2);
  color:#fff;
}
.btn-dark:hover{border-color:var(--amber);background:var(--bg-panel-2);color:var(--amber-light);transform:translateY(-1px)}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:14px}
.btn-block{width:100%}

/* Hero */
.hero-section{
  background:
    linear-gradient(94deg,rgba(16,17,22,.92) 0%,rgba(20,21,27,.78) 38%,rgba(28,24,18,.46) 100%),
    url('/assets/images/backpic/back-1.webp');
  background-position:center;
  background-size:cover;
  position:relative;
  overflow:hidden;
  padding:clamp(72px,10vw,132px) 0 64px;
}
.hero-section:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  opacity:.5;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .9fr;gap:clamp(28px,5vw,70px);align-items:center}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--amber-light);
  font-size:13px;
  letter-spacing:.12em;
  background:rgba(246,168,33,.08);
  border:1px solid rgba(246,168,33,.16);
  padding:6px 14px;
  border-radius:99px;
  margin-bottom:22px;
}
.hero-eyebrow i{font-size:14px}
.hero-h1{font-size:clamp(38px,6vw,66px);font-weight:800;line-height:1.18;letter-spacing:-.01em;margin-bottom:12px}
.hero-h1 .split{display:block;color:var(--amber-light);font-weight:800}
.hero-lead{font-size:clamp(16px,1.8vw,19px);color:var(--text-soft);margin:24px 0 30px;max-width:580px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-mini{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  list-style:none;
  padding:0;
  margin:34px 0 0;
}
.hero-mini li{display:flex;align-items:center;gap:8px;color:var(--text-soft);font-size:13px}
.hero-mini li i{color:var(--lime);font-size:14px}
.hero-media{position:relative}
.hero-window{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow);
  background:var(--bg-panel);
  position:relative;
}
.hero-window img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;opacity:.92}
.hero-window:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(16,16,20,0) 55%,rgba(246,168,33,.08));
  pointer-events:none;
}
.hero-cap{
  position:absolute;
  left:14px;bottom:14px;
  display:flex;align-items:center;
  gap:12px;
  background:rgba(13,15,19,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:11px 18px 11px 12px;
  max-width:calc(100% - 28px);
}
.signal-badge{
  width:34px;height:34px;border-radius:10px;
  background:rgba(246,168,33,.2);
  color:var(--amber);
  display:grid;place-items:center;
  border:1px solid rgba(246,168,33,.28);
  font-size:17px;
}
.hero-cap p{margin:0}
.hero-cap strong{display:block;font-size:14px;color:#fff}
.hero-cap small{color:var(--text-soft);font-size:12px}

/* 信任标识条 */
.official-strip{
  background:#1c1f27;
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.strip-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-chip{
  display:flex;align-items:center;gap:12px;
  padding:8px 4px;
  color:var(--text-soft);
}
.trust-chip .chip-ic{
  width:42px;height:42px;border-radius:12px;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--amber);
  font-size:18px;
  min-width:42px;
}
.trust-chip:hover .chip-ic{color:var(--amber-light);border-color:rgba(246,168,33,.28)}
.trust-chip b{display:block;font-size:14px;color:#fff}
.trust-chip small{font-size:12px;color:var(--text-mute);line-height:1.4}

/* 三步 */
.step-panel{background:var(--bg-1);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,3vw,38px);height:100%;position:relative}
.step-num{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:800;font-size:20px;
  background:rgba(246,168,33,.13);
  border:1px solid rgba(246,168,33,.25);
  color:var(--amber);
  margin-bottom:20px;
}
.step-panel h3{font-size:20px;margin-bottom:12px;font-weight:700}
.step-panel p{color:var(--text-soft);font-size:15px;margin-bottom:0}
.step-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--amber-light);font-size:14px;font-weight:600;
  margin-top:18px;
}
.step-link:hover{gap:12px}
.step-link i{font-size:12px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* 场景Bento */
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:stretch}
.bento-main{grid-column:span 7;background:#1d2028;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.bento-main .b-content{padding:30px 28px 28px}
.b-meta{font-size:13px;color:var(--text-mute);letter-spacing:.08em;display:flex;gap:10px;align-items:center;margin-bottom:16px}
.b-meta span{display:inline-flex;align-items:center;gap:6px;background:rgba(167,208,75,.1);color:var(--lime);border-radius:99px;padding:4px 12px;border:1px solid rgba(167,208,75,.18)}
.bento-side{grid-column:span 5;display:grid;grid-template-rows:auto auto;gap:20px}
.bento-small{background:#1d2028;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.bento-small .b-s-top{display:flex;align-items:center;gap:12px}
.b-s-top i{width:42px;height:42px;border-radius:12px;background:rgba(246,168,33,.12);display:grid;place-items:center;color:var(--amber);font-size:18px}
.b-s-top b{color:#fff;font-size:16px}
.bento-small p{margin:0;color:var(--text-soft);font-size:14px}
.mini-note{display:flex;gap:16px;border-top:1px solid var(--line);padding-top:15px;margin-top:18px}
.mini-note div{font-size:14px;color:var(--text-soft)}
.mini-note .num{display:block;color:var(--amber);font-size:24px;font-weight:800;line-height:1}
.bento-pic{border-radius:16px;overflow:hidden;margin-top:16px;position:relative}
.bento-pic img{width:100%;object-fit:cover;aspect-ratio:16/8}
.real-btn{
  align-self:flex-start;
  margin-top:16px;
  display:inline-flex;gap:8px;align-items:center;
  color:var(--amber-light);font-size:15px;font-weight:700;
}
.real-btn i{transition:transform .2s}
.real-btn:hover i{transform:translateX(4px)}

/* 映射卡 */
.map-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.channel-card{border:1px solid var(--line);border-radius:20px;background:var(--bg-1);display:flex;gap:20px;padding:20px;}
.channel-card.cover-card{align-items:flex-start}
.channel-cov{width:102px;min-width:102px;height:102px;border-radius:14px;overflow:hidden;background:var(--bg-2);display:grid;place-items:center}
.channel-cov img{width:100%;height:100%;object-fit:cover}
.channel-body h3{margin-bottom:8px;font-size:18px}
.channel-body p{color:var(--text-soft);font-size:14px;margin-bottom:10px}
.channel-body ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.channel-body li{font-size:13px;color:var(--text-mute)}
.channel-body li i{color:var(--lime);font-size:11px;margin-right:6px}

/* 案例 */
.case-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card{
  background:var(--bg-1);
  border-radius:20px;
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all .3s ease;
}
.case-card:hover{border-color:rgba(246,168,33,.28);transform:translateY(-5px)}
.case-media{position:relative;overflow:hidden}
.case-media img{width:100%;height:200px;object-fit:cover;aspect-ratio:auto}
.case-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(16,17,23,.36));pointer-events:none}
.case-cate{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(13,15,20,.78);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:99px;
  padding:5px 12px;
  font-size:12px;
  color:#fff;
  display:inline-flex;align-items:center;gap:7px;
}
.case-cate i{color:var(--amber)}

.case-body{padding:20px 22px 24px;display:flex;flex-direction:column}
.case-body h3{font-size:18px;margin-bottom:8px}
.case-body p{font-size:14px;color:var(--text-soft);margin-bottom:16px}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tag{font-size:12px;padding:4px 11px;border:1px solid var(--line);color:var(--text-soft);border-radius:99px}
.tag.hot{border-color:rgba(246,168,33,.26);color:var(--amber-light)}

/* FAQ */
.faq-wrap{max-width:920px;margin:0 auto}
.acc-item{border-bottom:1px solid var(--line);background:var(--bg-1);border-radius:0 0 0 0;margin-bottom:0}
.faq-acc{border-bottom:1px solid var(--line);margin-bottom:0}
.faq-title{
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  text-align:left;
  padding:23px 20px 23px 4px;
  color:var(--text-main);
  font-size:18px;
  font-weight:600;
  min-height:70px;
}
.faq-title:hover{color:var(--amber-light)}
.faq-panel{background:var(--bg-1);border:1px solid var(--line);border-radius:16px;margin-bottom:12px}
.acc-head{width:100%}

.faq-icon{
  width:34px;height:34px;min-width:34px;
  border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--line-2);
  transition:all .3s;
  background:var(--bg-panel);
}
.faq-title:hover .faq-icon{border-color:var(--amber);color:var(--amber)}
.acc-item.closed .faq-icon i:before{content:"\f077" !important}
.acc-item.open .faq-icon i:before{content:"\f106" !important}
.faq-desc{padding:0 18px 24px;color:var(--text-soft);font-size:15px;border-top:1px solid transparent}
.faq-desc p{margin:0 0 8px}
.faq-desc ul{margin:8px 0;padding-left:18px;display:grid;gap:6px}
.faq-wrap .acc-item:last-child{border-bottom:0}
/* Foundation accordion 修正 */
.accordion-title{
  background:transparent;
  border:0;
  color:var(--text-main)!important;
  padding:22px 18px 22px 4px;
  font-size:18px!important;
  font-weight:600;
  line-height:1.5;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.accordion-title:hover,.accordion-title:focus{background:transparent;color:var(--amber-light)!important}
.accordion-title:before{
  content:"";
  width:34px;height:34px;
  min-width:34px;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:var(--bg-panel-2);
  position:relative;
  float:none;
  margin-left:auto;
  order:2;
  margin:0;
  font-size:16px;
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:var(--amber);
  display:none;
}
.acc-title-inner{display:flex;align-items:center;gap:14px}
.faq-q-mark{
  width:34px;height:34px;min-width:34px;
  border-radius:10px;
  background:rgba(246,168,33,.12);
  border:1px solid rgba(246,168,33,.2);
  display:grid;place-items:center;
  color:var(--amber);
}
.accordion-content{border-top:0!important;background:transparent}
.accordion-content p{color:var(--text-soft);font-size:15px;margin-bottom:10px}

/* 平台动态 */
.dynamic-sec{background:#16181f;border-top:1px solid var(--line);position:relative}
.dynamic-layout{display:grid;grid-template-columns:.82fr 1.4fr;gap:44px;align-items:start}
.dynamic-aside ul{display:grid;gap:10px;list-style:none;padding:0;margin:24px 0 0}
.dynamic-aside li{display:flex;gap:10px;align-items:center;color:var(--text-soft);font-size:14px}
.dynamic-aside li i{color:var(--lime);font-size:14px;width:18px}
.news-icon{display:inline-flex;width:40px;height:40px;border-radius:12px;background:rgba(246,168,33,.12);color:var(--amber);align-items:center;justify-content:center;font-size:18px}
.dynamic-list{display:grid;gap:14px;margin:0}
.post-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  background:var(--bg-1);
  border-radius:16px;
  padding:19px 20px;
  border:1px solid var(--line);
  transition:all .25s;
}
.post-item:hover{border-color:rgba(246,168,33,.26);transform:translateX(3px)}
.post-title{font-size:16px;margin-bottom:9px;color:#fff;font-weight:700;line-height:1.45}
.post-title a:hover{color:var(--amber-light)}
.post-excerpt{color:var(--text-soft);font-size:14px;line-height:1.65;margin-bottom:12px}
.post-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.post-meta .post-badge{
  font-size:12px;padding:4px 10px;border-radius:99px;
  background:rgba(167,208,75,.1);
  border:1px solid rgba(167,208,75,.18);
  color:var(--lime);
}
.post-meta time{color:var(--text-mute);font-size:12px}
.post-item .filtered-link{align-self:center}
.post-arrow{
  width:38px;height:38px;border-radius:10px;
  background:var(--bg-panel-2);
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  color:var(--text-soft);
  font-size:14px;
  transition:all .2s;
}
.post-arrow:hover{color:var(--amber-light);border-color:var(--amber);background:var(--bg-1)}
.dynamic-empty{
  grid-column:1/-1;
  background:var(--bg-1);
  border:1px dashed var(--line-2);
  border-radius:16px;
  color:var(--text-mute);
  font-size:15px;
  padding:32px;
  text-align:center;
}
.page-note{
  align-self:center;
  font-size:13px;
  color:var(--text-mute);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  padding:9px 14px;
  border-radius:10px;
  background:var(--bg-1);
}

/* CTA */
.cta-box{
  background:#191c24;
  border:1px solid rgba(246,168,33,.16);
  border-radius:24px;
  overflow:hidden;
  padding:clamp(34px,6vw,62px);
  position:relative;
}
.cta-box:before{
  content:"";
  position:absolute;
  width:300px;height:300px;right:-80px;top:-120px;
  background:radial-gradient(circle,rgba(246,168,33,.14),transparent 65%);
  pointer-events:none;
}
.cta-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center}
.cta-grid h2{font-size:clamp(26px,4vw,40px);font-weight:800;margin-bottom:14px}
.cta-grid p{color:var(--text-soft);font-size:16px;margin-bottom:0}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;position:relative;z-index:2}
.cta-note{color:var(--text-mute);font-size:12px;text-align:center;display:flex;align-items:center;gap:8px;justify-content:center}
.cta-note .green-dot{width:7px;height:7px;border-radius:50%;background:var(--lime)}

/* footer */
.site-footer{
  border-top:1px solid rgba(246,168,33,.2);
  background:#111218;
  padding:56px 0 28px;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,6vw,80px)}
.footer-brand .brand-lock{margin-bottom:8px}
.footer-brand-text{font-size:17px;font-weight:800;color:#fff}
.footer-brand p{color:var(--text-mute);font-size:14px;margin:14px 0 0;max-width:380px}
.footer-col h4{font-size:14px;color:var(--text-main);letter-spacing:.08em;margin-bottom:20px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer-col a{color:var(--text-soft);font-size:14px;display:inline-flex;gap:8px;align-items:center}
.footer-col a i{color:var(--amber);font-size:10px}
.footer-col a:hover{color:var(--amber-light)}
.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:42px;
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  color:var(--text-mute);
  font-size:13px;
}
.footer-bottom a{color:var(--text-soft)}
.footer-bottom a:hover{color:var(--amber-light)}
.footer-official-line,.footer-copy{display:inline-flex;align-items:center;gap:8px}


@media (min-width:1024px){
  .app-rail{
    width:98px;
    transform:translateX(0);
    padding:20px 12px 12px;
  }
  .page-canvas{margin-left:98px}
  .desktop-hide{display:none}
  .mobile-header{display:none}
  .brand-lock{flex-direction:column;align-items:flex-start;padding:2px 6px;gap:8px}
  .brand-text{font-size:11px;line-height:1.35;letter-spacing:.01em;width:72px;word-break:normal;display:block}
  .rail-title-sec{font-size:10px;padding:0 6px}
  .rail-nav-item{justify-content:flex-start;align-items:center;flex-direction:column;gap:0;text-align:center;padding:9px 2px 8px}
  .rail-nav-item i{margin-bottom:4px;width:auto;font-size:17px}
  .rail-nav-item .nav-txt{font-size:11px;line-height:1.3}
  .rail-top-btn{flex-direction:column;padding:8px 2px;font-size:10px;gap:0}
  .rail-top-btn i{font-size:13px}
  .rail-secondary{display:none}
}

@media (max-width:1023px) and (min-width:640px){
  .case-cards,.steps-grid,.map-cards{grid-template-columns:repeat(2,1fr)}
  .steps-grid .step-panel:last-child{grid-column:span 2}
  .case-cards .case-card:last-child{grid-column:span 2}
}

@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-section{padding-top:70px}
  .bento-main,.bento-side{grid-column:span 12}
  .dynamic-layout{grid-template-columns:1fr;gap:30px}
  .strip-wrap{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:639px){
  body{font-size:15px}
  .section{padding:54px 0}
  .strip-wrap{grid-template-columns:1fr}
  .hero-h1{font-size:36px}
  .hero-actions .btn{width:100%}
  .steps-grid{grid-template-columns:1fr}
  .case-cards,.map-cards{grid-template-columns:1fr}
  .bento-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;gap:30px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .post-item{grid-template-columns:1fr;gap:12px}
  .post-arrow{width:32px;height:32px}
  .container{padding-left:16px;padding-right:16px}
  .sec-head{padding-left:8px;padding-right:8px}
  .channel-card{flex-direction:column}
  .channel-cov{width:100%;height:auto;max-height:150px}
  .mobile-brand{font-size:14px}
  .faq-title{padding-left:2px}
  .accordion-title{font-size:16px;padding-left:2px}
  .accordion-content{padding-right:0}
}
@media(min-width:640px) and (max-width:1023px){
  .map-cards .channel-card:last-child{grid-column:span 2}
}

/* roulang page: category1 */
:root {
      --bg: #16171d;
      --bg-deep: #101116;
      --surface: #1f222a;
      --surface-2: #262a34;
      --surface-3: #2b2f3a;
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.14);
      --amber: #f5a524;
      --amber-bright: #ffc46b;
      --lime: #9ccb3b;
      --text: #f0f1f3;
      --muted: #b9bfc7;
      --dim: #8f959d;
      --danger: #f2725b;
      --success: #9ccb3b;
      --radius-x: 20px;
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-sm: 8px;
      --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
      --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.8;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    body.drawer-open {
      overflow: hidden;
    }

    ul,
    li,
    p,
    h1,
    h2,
    h3,
    h4,
    figure {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    img {
      max-width: 100%;
      display: block;
      border: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
      font-family: inherit;
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 4px;
      border-radius: 6px;
    }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding-left: clamp(18px, 3.4vw, 42px);
      padding-right: clamp(18px, 3.4vw, 42px);
    }

    .app-main {
      min-width: 0;
      background: var(--bg);
    }

    /* ===== 左侧 App Rail ===== */
    .app-rail {
      display: none;
    }

    @media screen and (min-width: 1024px) {
      .app-rail {
        position: fixed;
        inset: 0 auto 0 0;
        width: 88px;
        z-index: 60;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg-deep);
        border-right: 1px solid var(--line);
        padding: 20px 10px 16px;
      }

      .app-main {
        margin-left: 88px;
        min-height: 100vh;
      }

      .site-footer {
        margin-left: 88px;
      }

      .rail-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: var(--radius-lg);
        padding: 16px 4px 18px;
        border: 1px solid transparent;
        text-align: center;
        transition: border-color 0.25s ease, background 0.25s ease;
      }

      .rail-brand:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--line);
      }

      .rail-brand-glyph {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: linear-gradient(140deg, rgba(245, 165, 36, 0.2), rgba(245, 165, 36, 0.05));
        color: var(--amber);
        font-size: 19px;
        border: 1px solid rgba(245, 165, 36, 0.25);
      }

      .rail-brand-txt {
        font-size: 11px;
        line-height: 1.45;
        font-weight: 700;
        color: #e8eaed;
        letter-spacing: 0.02em;
      }

      .rail-sep {
        height: 1px;
        background: var(--line);
        margin: 18px 8px 12px;
      }

      .rail-nav-title {
        display: block;
        text-align: center;
        font-size: 10px;
        color: var(--dim);
        letter-spacing: 0.3em;
        margin-bottom: 8px;
      }

      .rail-nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .rail-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        padding: 10px 2px;
        border-radius: 14px;
        color: var(--muted);
        font-size: 10.5px;
        line-height: 1.3;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all 0.2s ease;
      }

      .rail-nav-item i {
        font-size: 17px;
        transition: transform 0.2s ease;
      }

      .rail-nav-item:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--line);
      }

      .rail-nav-item:hover i {
        transform: translateY(-1px);
      }

      .rail-nav-item.active {
        color: #ffd896;
        background: linear-gradient(145deg, rgba(245, 165, 36, 0.16), rgba(245, 165, 36, 0.04));
        border-color: rgba(245, 165, 36, 0.26);
      }

      .rail-nav-item.active::before {
        content: "";
        position: absolute;
        left: -11px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 22px;
        border-radius: 0 4px 4px 0;
        background: var(--amber);
        box-shadow: 0 0 14px rgba(245, 165, 36, 0.48);
      }

      .rail-nav-item .nav-txt {
        white-space: nowrap;
        max-width: 66px;
      }

      .rail-foot {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .rail-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 10px;
        color: var(--dim);
        font-weight: 600;
      }

      .rail-status i {
        color: var(--lime);
        font-size: 7px;
        filter: drop-shadow(0 0 5px rgba(156, 203, 59, 0.8));
      }

      .rail-top-link {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid var(--line);
        color: var(--muted);
        font-size: 13px;
        transition: all 0.2s ease;
      }

      .rail-top-link:hover {
        border-color: rgba(245, 165, 36, 0.4);
        color: var(--amber);
      }
    }

    /* ===== 移动端 Header ===== */
    .mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 55;
      height: 62px;
      padding: 0 18px;
      background: rgba(16, 17, 22, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }

    .mobile-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .mobile-brand .brand-mini {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      color: var(--amber);
      background: rgba(245, 165, 36, 0.14);
      border: 1px solid rgba(245, 165, 36, 0.3);
      font-size: 14px;
      flex: 0 0 32px;
    }

    .mobile-brand-text {
      font-weight: 700;
      font-size: 15px;
      color: #fff;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mobile-menu-btn {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line);
      color: var(--text);
      font-size: 18px;
    }

    .mobile-menu-btn:hover {
      border-color: var(--line-strong);
      color: var(--amber);
    }

    .drawer-mask {
      position: fixed;
      inset: 0;
      z-index: 70;
      background: rgba(6, 7, 10, 0.68);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    body.drawer-open .drawer-mask {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-drawer {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 80;
      width: min(78vw, 310px);
      background: #16171d;
      border-right: 1px solid var(--line-strong);
      display: flex;
      flex-direction: column;
      padding: 18px 16px 22px;
      transform: translateX(-105%);
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
      overflow-y: auto;
    }

    body.drawer-open .mobile-drawer {
      transform: translateX(0);
    }

    .drawer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .drawer-top .brand-lock {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 700;
      font-size: 14px;
      min-width: 0;
    }

    .drawer-close {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }

    .mobile-nav-label {
      color: var(--dim);
      font-size: 11px;
      letter-spacing: 0.24em;
      margin: 22px 4px 12px;
    }

    .mobile-drawer .rail-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 12px;
      border-radius: 13px;
      color: var(--muted);
      background: transparent;
      text-align: left;
      font-weight: 600;
      font-size: 14px;
      border: 1px solid transparent;
      transition: all 0.2s ease;
    }

    .mobile-drawer .rail-nav-item i {
      width: 20px;
      text-align: center;
      color: var(--dim);
      font-size: 15px;
    }

    .mobile-drawer .rail-nav-item.active {
      color: #ffd896;
      background: rgba(245, 165, 36, 0.13);
      border-color: rgba(245, 165, 36, 0.25);
    }

    .mobile-drawer .rail-nav-item.active i {
      color: var(--amber);
    }

    .drawer-line {
      height: 1px;
      background: var(--line);
      margin: 18px 4px 10px;
    }

    .drawer-note {
      color: var(--dim);
      font-size: 12px;
      line-height: 1.7;
      margin: 4px 2px;
    }

    .drawer-note i {
      color: var(--lime);
      margin-right: 3px;
    }

    @media screen and (min-width: 1024px) {
      .mobile-header {
        display: none;
      }
    }

    /* ===== Hero ===== */
    .hero-section {
      position: relative;
      overflow: hidden;
      background: var(--bg-deep);
      isolation: isolate;
    }

    .hero-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: url('/assets/images/backpic/back-1.webp');
      background-size: cover;
      background-position: right center;
      opacity: 0.42;
    }

    .hero-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(100deg, rgba(16, 17, 22, 0.96) 10%, rgba(16, 17, 22, 0.88) 48%, rgba(16, 17, 22, 0.66) 78%, rgba(16, 17, 22, 0.42)),
        linear-gradient(180deg, rgba(16, 17, 22, 0.25) 0%, rgba(16, 17, 22, 0.72) 100%);
    }

    .hero-inner {
      padding-top: clamp(70px, 10vw, 148px);
      padding-bottom: clamp(64px, 9vw, 132px);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 52px;
      align-items: center;
    }

    @media screen and (min-width: 860px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
        gap: 60px;
      }
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--line);
      color: var(--amber);
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      margin-bottom: 24px;
    }

    .eyebrow i {
      font-size: 11px;
    }

    .eyebrow--lime i {
      color: var(--lime);
    }

    .hero-title {
      color: #fff;
      font-size: clamp(38px, 6.4vw, 70px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 24px;
      max-width: 780px;
      text-wrap: balance;
    }

    .hero-title .text-amber {
      color: var(--amber);
    }

    .hero-lead {
      color: var(--muted);
      font-size: clamp(16px, 1.4vw, 19px);
      line-height: 1.9;
      max-width: 580px;
      margin-bottom: 34px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 26px;
    }

    .link-arrow,
    .text-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--amber);
      font-weight: 700;
      font-size: 15px;
      padding: 6px 0;
      transition: color 0.2s ease, gap 0.2s ease;
    }

    .link-arrow:hover,
    .text-link:hover {
      color: var(--amber-bright);
      gap: 11px;
    }

    .link-muted {
      color: var(--muted);
      font-weight: 600;
      font-size: 14px;
      padding: 6px 0;
      border-bottom: 1px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .link-muted:hover {
      color: #fff;
      border-color: var(--amber);
    }

    .hero-visual {
      position: relative;
      display: none;
    }

    @media screen and (min-width: 860px) {
      .hero-visual {
        display: block;
      }
    }

    .terminal-card {
      padding: 22px;
      border-radius: var(--radius-x);
      background: rgba(26, 28, 36, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 26px 70px rgba(7, 8, 11, 0.46);
      backdrop-filter: blur(6px);
      transform: rotate(1.6deg);
    }

    .terminal-head {
      display: flex;
      gap: 6px;
      margin-bottom: 17px;
    }

    .terminal-head i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      font-size: 0;
      background: rgba(255, 255, 255, 0.2);
    }

    .terminal-head i:nth-child(1) {
      background: #ff6b5e;
    }

    .terminal-head i:nth-child(2) {
      background: #f6c25a;
    }

    .terminal-head i:nth-child(3) {
      background: #55bf81;
    }

    .terminal-domain {
      background: #111319;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 13px 15px;
      color: #d6dbe2;
      font-size: 13px;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 15px;
    }

    .terminal-domain i {
      color: var(--lime);
      font-size: 11px;
    }

    .terminal-screen {
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--line);
      background: #111318;
    }

    .ter-line {
      height: 6px;
      background: rgba(245, 165, 36, 0.6);
      filter: drop-shadow(0 0 8px rgba(245, 165, 36, 0.7));
      width: 45%;
      margin: 16px 0 8px 16px;
      border-radius: 6px;
    }

    .ter-line.second {
      width: 25%;
      background: var(--lime);
      filter: none;
      opacity: 0.7;
    }

    .ter-line.third {
      width: 68%;
      background: rgba(255, 255, 255, 0.16);
      filter: none;
      margin-bottom: 22px;
    }

    .hero-scan {
      position: absolute;
      right: -8px;
      bottom: -12px;
      background: rgba(245, 165, 36, 0.1);
      border: 1px solid rgba(245, 165, 36, 0.32);
      color: var(--amber);
      border-radius: 14px;
      padding: 9px 14px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 7px;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(8px);
    }

    /* ===== Trust ===== */
    .trust-section {
      border-bottom: 1px solid var(--line);
      background: #1b1d23;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }

    @media screen and (min-width: 640px) {
      .trust-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media screen and (min-width: 1024px) {
      .trust-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .trust-item {
      position: relative;
      padding: 32px 18px 32px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid var(--line);
    }

    @media screen and (min-width: 640px) {
      .trust-item:nth-child(even) {
        border-left: 1px solid var(--line);
      }

      .trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
      }
    }

    @media screen and (min-width: 1024px) {
      .trust-item {
        border-left: 1px solid var(--line);
        border-bottom: 0;
      }

      .trust-item:first-child {
        border-left: 0;
      }
    }

    .trust-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 44px;
      border-radius: 12px;
      color: var(--amber);
      background: rgba(245, 165, 36, 0.1);
      border: 1px solid rgba(245, 165, 36, 0.2);
      font-size: 17px;
    }

    .trust-content strong {
      display: block;
      font-size: 14px;
      color: #ecedef;
      font-weight: 700;
      margin-bottom: 3px;
    }

    .trust-content span {
      color: var(--dim);
      font-size: 12.5px;
      line-height: 1.6;
      display: block;
    }

    /* ===== 区块通用 ===== */
    .section {
      padding-top: clamp(70px, 8vw, 118px);
      padding-bottom: clamp(70px, 8vw, 118px);
    }

    .section--surface {
      background: #191b21;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      position: relative;
      overflow: hidden;
    }

    .section--surface::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(245, 165, 36, 0.32);
      z-index: 1;
    }

    .section-head {
      max-width: 900px;
      margin-bottom: 54px;
    }

    .section-head--center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .section-title {
      color: #fff;
      font-size: clamp(28px, 4.6vw, 44px);
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: -0.01em;
      margin: 18px 0 14px;
    }

    .section-lead {
      color: var(--muted);
      font-size: 16.5px;
      line-height: 1.9;
      max-width: 760px;
    }

    .section-head--center .section-lead {
      margin-left: auto;
      margin-right: auto;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--amber);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .kicker::before {
      content: "";
      width: 20px;
      height: 2px;
      background: var(--amber);
      border-radius: 2px;
    }

    .kicker--center::after {
      content: "";
      width: 20px;
      height: 2px;
      background: var(--amber);
      border-radius: 2px;
    }

    /* ===== Route cards ===== */
    .route-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }

    @media screen and (min-width: 1024px) {
      .route-wrap {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 52px;
        align-items: start;
      }
    }

    .route-stack {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .route-card {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 30px;
      background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
      background-color: #1e2128;
      border: 1px solid var(--line);
      border-radius: var(--radius-x);
      transition: border-color 0.25s ease, transform 0.22s ease, background 0.25s ease;
    }

    .route-card:hover {
      border-color: rgba(245, 165, 36, 0.3);
      background: #22252c;
      transform: translateY(-2px);
    }

    @media screen and (min-width: 640px) {
      .route-card {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 20px;
      }
    }

    .route-icon {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: rgba(245, 165, 36, 0.1);
      border: 1px solid rgba(245, 165, 36, 0.22);
      color: var(--amber);
      font-size: 21px;
    }

    .route-icon.lime {
      background: rgba(156, 203, 59, 0.1);
      border-color: rgba(156, 203, 59, 0.2);
      color: var(--lime);
    }

    .route-icon.line-blue {
      background: rgba(80, 150, 255, 0.08);
      border-color: rgba(80, 150, 255, 0.18);
      color: #7aa7ff;
    }

    .route-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 8px;
    }

    .route-title {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      line-height: 1.4;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(156, 203, 59, 0.12);
      border: 1px solid rgba(156, 203, 59, 0.22);
      color: #b9d969;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      letter-spacing: 0.03em;
    }

    .badge--amber {
      background: rgba(245, 165, 36, 0.1);
      border-color: rgba(245, 165, 36, 0.2);
      color: var(--amber);
    }

    .route-desc {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.85;
      margin-bottom: 18px;
      max-width: 620px;
    }

    .route-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px 18px;
      margin-bottom: 18px;
    }

    @media screen and (min-width: 560px) {
      .route-list {
        grid-template-columns: 1fr 1fr;
      }
    }

    .route-list li {
      display: flex;
      align-items: baseline;
      gap: 9px;
      color: #d4d8de;
      font-size: 14px;
      line-height: 1.7;
    }

    .route-list li::before {
      content: "";
      flex: 0 0 auto;
      width: 5px;
      height: 5px;
      background: var(--amber);
      border-radius: 999px;
      transform: translateY(-3px);
      box-shadow: 0 0 6px rgba(245, 165, 36, 0.5);
    }

    .route-use {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
      color: var(--amber);
      font-weight: 700;
      font-size: 14px;
    }

    .route-use::after {
      content: "→";
      font-size: 15px;
      transition: transform 0.2s ease;
    }

    .route-card:hover .route-use::after {
      transform: translateX(4px);
    }

    .route-note {
      position: sticky;
      top: 90px;
      border: 1px solid var(--line);
      border-radius: var(--radius-x);
      padding: 28px 24px;
      background: #20242d;
      box-shadow: var(--shadow-soft);
      background-image: radial-gradient(circle at 0% 0%, rgba(245, 165, 36, 0.1), transparent 42%);
    }

    .route-note h3 {
      font-size: 17px;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.5;
    }

    .route-note p {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 18px;
      line-height: 1.85;
    }

    .route-note ul {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .route-note li {
      display: flex;
      align-self: flex-start;
      gap: 9px;
      color: #ccd1d8;
      font-size: 13.5px;
      line-height: 1.65;
    }

    .route-note li i {
      color: var(--lime);
      font-size: 11px;
      margin-top: 7px;
      flex: 0 0 auto;
    }

    .route-note-meta {
      margin-top: 20px;
      padding-top: 17px;
      border-top: 1px solid var(--line);
      font-size: 12.5px;
      color: var(--dim);
      line-height: 1.7;
    }

    .route-note-meta i {
      color: var(--amber);
      margin-right: 4px;
    }

    /* ===== Steps ===== */
    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    @media screen and (min-width: 640px) {
      .steps-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .step-card {
      position: relative;
      padding: 30px 26px 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #1e2128;
      overflow: hidden;
      transition: border-color 0.25s ease, transform 0.2s ease;
    }

    @media screen and (min-width: 1024px) {
      .step-card:nth-child(2) {
        transform: translateY(24px);
      }

      .step-card:nth-child(3) {
        transform: translateY(-10px);
      }
    }

    .step-card:hover {
      border-color: rgba(245, 165, 36, 0.35);
      transform: translateY(-2px);
    }

    .step-card:hover:nth-child(2) {
      transform: translateY(19px);
    }

    .step-num {
      font-size: 34px;
      font-weight: 800;
      color: var(--amber);
      line-height: 1;
      display: block;
      margin-bottom: 18px;
      text-shadow: 0 0 18px rgba(245, 165, 36, 0.2);
    }

    .step-card h3 {
      color: #fff;
      font-size: 19px;
      font-weight: 800;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    .step-card p {
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.85;
    }

    .step-card small {
      display: block;
      margin-top: 18px;
      color: var(--dim);
      font-size: 12px;
      line-height: 1.7;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    /* ===== Feature show ===== */
    .feature-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
    }

    @media screen and (min-width: 900px) {
      .feature-wrap {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 52px;
      }
    }

    .feature-media {
      border-radius: var(--radius-x);
      overflow: hidden;
      padding: 0;
      background: #20242d;
      border: 1px solid var(--line);
      position: relative;
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.26);
    }

    .feature-media img {
      object-fit: cover;
      height: 100%;
      min-height: 300px;
    }

    .feature-shot {
      padding: clamp(12px, 2vw, 20px);
      background: linear-gradient(180deg, transparent, rgba(8, 9, 12, 0.86));
    }

    .feature-tag {
      position: absolute;
      left: 16px;
      bottom: 16px;
      background: rgba(16, 17, 22, 0.82);
      border: 1px solid rgba(245, 165, 36, 0.36);
      color: #ffd896;
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 12.5px;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }

    .feature-content .section-head {
      margin-bottom: 34px;
    }

    .feature-points {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px 26px;
    }

    @media screen and (min-width: 640px) {
      .feature-points {
        grid-template-columns: 1fr 1fr;
      }
    }

    .point-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .point-check {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 38px;
      border-radius: 11px;
      background: rgba(156, 203, 59, 0.12);
      border: 1px solid rgba(156, 203, 59, 0.2);
      color: var(--lime);
      font-size: 13px;
    }

    .point-item strong {
      display: block;
      font-size: 15.5px;
      color: #ededef;
      font-weight: 800;
      margin-bottom: 3px;
    }

    .point-item span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
      display: block;
    }

    .feature-more {
      margin-top: 30px;
      display: inline-flex;
      align-items: center;
      color: var(--amber);
      font-size: 14.5px;
      font-weight: 700;
      gap: 6px;
    }

    .feature-more:hover {
      gap: 10px;
      color: var(--amber-bright);
    }

    /* ===== Roles ===== */
    .roles-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
    }

    @media screen and (min-width: 640px) {
      .roles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
    }

    @media screen and (min-width: 1000px) {
      .roles-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
      }
    }

    .role-card {
      border: 1px solid var(--line);
      background: #1d2027;
      border-radius: var(--radius-lg);
      padding: 26px;
      position: relative;
      overflow: hidden;
    }

    .role-card::after {
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      right: -30px;
      top: -30px;
      border-radius: 50%;
      background: rgba(245, 165, 36, 0.08);
      filter: blur(20px);
    }

    .role-card--wide {
      background: linear-gradient(150deg, rgba(245, 165, 36, 0.1), rgba(255, 255, 255, 0.02));
      border-color: rgba(245, 165, 36, 0.2);
    }

    .role-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .role-icon {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      color: var(--amber);
      background: rgba(245, 165, 36, 0.1);
      border: 1px solid rgba(245, 165, 36, 0.2);
      font-size: 18px;
      flex: 0 0 45px;
    }

    .role-icon--lime {
      color: var(--lime);
      background: rgba(156, 203, 59, 0.1);
      border-color: rgba(156, 203, 59, 0.2);
    }

    .role-card h3 {
      font-size: 18px;
      color: #fff;
      font-weight: 800;
    }

    .role-limit {
      color: var(--dim);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.5;
    }

    .role-card ul {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .role-card li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: #ccd1d8;
      font-size: 14px;
      line-height: 1.7;
    }

    .role-card li i {
      color: var(--amber);
      font-size: 12px;
      margin-top: 5px;
      flex: 0 0 auto;
    }

    .role-note-line {
      margin-top: 17px;
      padding-top: 15px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.8;
    }

    .role-note-line i {
      color: var(--lime);
      margin-right: 4px;
    }

    /* ===== FAQ ===== */
    .faq-panel {
      max-width: 900px;
      margin: 0 auto;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #1e2128;
      margin-bottom: 14px;
      overflow: hidden;
      transition: border-color 0.2s ease;
    }

    .faq-item[open] {
      border-color: rgba(245, 165, 36, 0.28);
    }

    .faq-summary {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 24px;
      color: #f0f1f3;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.6;
      list-style: none;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .faq-summary::-webkit-details-marker {
      display: none;
    }

    .faq-summary::after {
      content: "\f067";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 13px;
      color: var(--amber);
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(245, 165, 36, 0.1);
      flex: 0 0 auto;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .faq-item[open] .faq-summary::after {
      content: "\f068";
      background: rgba(245, 165, 36, 0.18);
    }

    .faq-summary:hover {
      background: rgba(255, 255, 255, 0.02);
    }

    .faq-body {
      padding: 0 24px 24px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.95;
      max-width: 860px;
    }

    .faq-body p {
      margin-bottom: 12px;
    }

    .faq-body p:last-child {
      margin-bottom: 0;
    }

    .faq-body strong {
      color: #e7e9ec;
    }

    .faq-link {
      color: var(--amber);
      font-weight: 700;
      border-bottom: 1px solid rgba(245, 165, 36, 0.35);
    }

    .faq-link:hover {
      color: var(--amber-bright);
      border-color: var(--amber-bright);
    }

    /* ===== CTA ===== */
    .cta-section {
      position: relative;
      padding-top: clamp(60px, 7vw, 100px);
      padding-bottom: clamp(70px, 8vw, 110px);
      overflow: hidden;
    }

    .cta-panel {
      position: relative;
      border-radius: 24px;
      background-image: url('/assets/images/backpic/back-2.webp');
      background-position: center;
      background-size: cover;
      padding: clamp(32px, 5vw, 64px);
      overflow: hidden;
      border: 1px solid var(--line-strong);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(16, 17, 22, 0.98) 20%, rgba(16, 17, 22, 0.86) 62%, rgba(16, 17, 22, 0.6));
    }

    .cta-content {
      max-width: 680px;
      position: relative;
      z-index: 2;
    }

    .cta-title {
      font-size: clamp(26px, 3.6vw, 38px);
      color: #fff;
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: -0.01em;
      margin-bottom: 16px;
    }

    .cta-content p {
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.9;
      margin-bottom: 28px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
      padding: 15px 22px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
      border: 1px solid transparent;
      color: var(--amber);
      background: var(--amber);
      color: #17181d;
    }

    .btn:hover {
      background: var(--amber-bright);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(245, 165, 36, 0.25);
    }

    .btn-secondary {
      margin-left: 14px;
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--line-strong);
      color: #e7e9ed;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
    }

    .cta-subline {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 18px;
      color: var(--dim);
      font-size: 13px;
    }

    .cta-subline i {
      color: var(--lime);
      font-size: 11px;
    }

    /* ===== Footer ===== */
    .site-footer {
      position: relative;
      background: #111217;
      border-top: 1px solid rgba(245, 165, 36, 0.4);
      padding: 58px 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 38px;
      margin-bottom: 34px;
    }

    @media screen and (min-width: 640px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media screen and (min-width: 1024px) {
      .footer-grid {
        grid-template-columns: 1.2fr 0.9fr 0.9fr;
        gap: 50px;
      }
    }

    .brand-lock {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .brand-icon {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(245, 165, 36, 0.12);
      border: 1px solid rgba(245, 165, 36, 0.3);
      color: var(--amber);
      font-size: 16px;
    }

    .footer-brand-text {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
    }

    .footer-brand p {
      max-width: 360px;
      margin-top: 14px;
      color: var(--dim);
      font-size: 14px;
      line-height: 1.9;
    }

    .footer-col h4 {
      color: #dfe1e5;
      font-weight: 800;
      font-size: 15px;
      margin-bottom: 16px;
      letter-spacing: 0.03em;
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .footer-col a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      color: var(--muted);
      transition: color 0.2s ease, gap 0.2s ease;
    }

    .footer-col a i {
      color: var(--amber);
      font-size: 11px;
    }

    .footer-col a:hover {
      color: var(--amber-bright);
      gap: 10px;
    }

    .footer-bottom {
      border-top: 1px solid var(--line);
      padding-top: 21px;
      display: flex;
      flex-direction: column;
      gap: 11px;
      font-size: 13px;
      color: var(--dim);
    }

    .footer-official-line i {
      margin-right: 4px;
    }

    .footer-copy {
      font-size: 12.5px;
      color: #747b85;
    }

    @media screen and (min-width: 700px) {
      .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
      }
    }

    @media screen and (max-width: 639px) {
      .hero-inner {
        padding-top: 52px;
        padding-bottom: 58px;
      }
      .trust-item {
        padding: 24px 14px;
        gap: 12px;
      }
      .route-card {
        padding: 22px 18px;
      }
      .terminal-card {
        transform: none;
      }
      .btn-secondary {
        margin-left: 0;
        margin-top: 12px;
      }
    }

/* roulang page: article */
:root {
  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-num: "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
  --bg: #16171D;
  --bg-soft: #1A1C24;
  --panel: #1F222A;
  --panel-deep: #20232B;
  --panel-2: #23262E;
  --rail-bg: #1B1D25;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --amber: #F5A524;
  --amber-bright: #FFC75E;
  --amber-glow: rgba(245, 165, 36, 0.16);
  --lime: #9CCB3B;
  --text: #F0F1F3;
  --muted: #B9BFC7;
  --faint: #7C838F;
  --danger-text: #F3E4C7;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --space-section: clamp(56px, 8vw, 96px);
  --rail-w: 88px;
  --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.18);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-cn);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a:hover {
  color: var(--amber);
}

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
}

li {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #16171D;
}

::-webkit-scrollbar-thumb {
  background: #30343E;
  border-radius: 20px;
  border: 2px solid #16171D;
}

::-webkit-scrollbar-thumb:hover {
  background: #424854;
}

::selection {
  background: rgba(245, 165, 36, 0.3);
  color: #fff;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 8px;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.4vw, 44px);
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 18px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--amber);
  color: #16171D;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  color: #16171D;
}

.mobile-topbar {
  display: none;
}

.rail-overlay {
  display: none;
}

.site-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  padding: 18px 10px 14px;
  transition: transform 0.25s ease;
}

.rail-close {
  display: none;
}

.brand-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.brand-glyph {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(245,165,36,0.2), rgba(245,165,36,0.06));
  border: 1px solid rgba(245, 165, 36, 0.36);
  border-radius: 12px;
  color: var(--amber);
  font-size: 17px;
  box-shadow: inset 0 0 12px rgba(245,165,36,0.08);
}

.brand-glyph i {
  filter: drop-shadow(0 0 6px rgba(245,165,36,0.45));
}

.rail-word {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.rword2 {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.rword3 {
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-top: 1px;
}

.rail-brand {
  padding: 7px 0 16px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  display: flex;
  justify-content: center;
}

.rail-header {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 19px;
}

.rail-label {
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
  font-weight: 400;
}

.rail-label i {
  font-size: 9px;
  color: var(--lime);
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.rail-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 58px;
  padding: 7px 2px 5px;
  border-radius: 13px;
  color: var(--muted);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  text-align: center;
}

.rail-nav-item i {
  font-size: 17px;
  line-height: 1;
  color: var(--faint);
  transition: color 0.2s ease;
}

.nav-txt {
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  max-width: 70px;
  color: var(--muted);
}

.rail-nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--amber);
}

.rail-nav-item:hover i,
.rail-nav-item:hover .nav-txt {
  color: var(--amber-bright);
}

.rail-nav-item.active {
  background: linear-gradient(145deg, rgba(245,165,36,0.18), rgba(245,165,36,0.06));
  color: var(--amber);
}

.rail-nav-item.active i,
.rail-nav-item.active .nav-txt {
  color: var(--amber);
}

.rail-nav-item.active::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--amber);
  box-shadow: 0 0 9px var(--amber);
}

.rail-nav-area-divider {
  width: 38px;
  height: 1px;
  background: var(--line-strong);
  margin: 8px auto 12px;
}

.rail-foot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.top-station-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
  transition: all 0.2s ease;
}

.top-station-btn:hover {
  color: var(--amber);
  border-color: var(--amber);
  transform: translateY(-2px);
}

.rail-copy-sign {
  font-size: 9px;
  color: var(--faint);
  letter-spacing: 0.08em;
  line-height: 1;
}

.site-canvas {
  margin-left: var(--rail-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-wrap {
  flex: 1;
  position: relative;
  background:
    radial-gradient(760px 340px at 92% -6%, rgba(245,165,36,0.05), transparent 60%),
    linear-gradient(180deg, #171920 0%, #16171D 100%);
}

.breadcrumb-zone {
  padding: 28px 0 6px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  padding: 5px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  border-radius: 8px;
}

.breadcrumb a:hover {
  color: var(--amber);
  border-color: var(--line-strong);
}

.crumb-sep {
  color: var(--faint);
  opacity: 0.6;
}

.crumb-current {
  color: var(--amber);
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(245,165,36,0.1);
  border-radius: 8px;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-root {
  padding: 6px 0 44px;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
  margin-top: 20px;
}

.article-panel {
  position: relative;
  background: linear-gradient(180deg, #1E2028, #191B22);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.article-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber) 0%, rgba(245,165,36,0.25) 50%, transparent 100%);
}

.article-inner {
  max-width: 840px;
  padding: clamp(82px, 8vw, 112px) clamp(20px, 5.5vw, 60px) 42px;
}

.article-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(245,165,36,0.1);
  border: 1px solid rgba(245,165,36,0.18);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.article-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--amber);
}

.article-h1 {
  font-size: clamp(29px, 4.2vw, 44px);
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  max-width: 900px;
  color: var(--text);
  text-wrap: balance;
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 13.5px;
  padding-bottom: 23px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.meta-unit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.meta-unit i {
  color: var(--faint);
  font-size: 12px;
}

.article-kicker-link {
  color: var(--amber);
  font-weight: 600;
}

.article-kicker-link:hover {
  color: var(--amber-bright);
}

.article-content {
  font-size: 16.5px;
  color: #E1E4E8;
  line-height: 1.9;
  overflow-wrap: break-word;
}

.article-content p {
  margin: 0 0 1.35em;
  line-height: 1.9;
}

.article-content h2 {
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 680;
  color: var(--text);
  margin: 1.8em 0 0.6em;
  padding-left: 14px;
  border-left: 3px solid var(--amber);
  line-height: 1.4;
}

.article-content h3 {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 620;
  color: var(--text);
  margin: 1.7em 0 0.5em;
  line-height: 1.45;
}

.article-content strong {
  color: #fff;
  font-weight: 650;
}

.article-content a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(245,165,36,0.35);
  text-underline-offset: 4px;
}

.article-content a:hover {
  color: var(--amber-bright);
  text-decoration-color: var(--amber);
}

.article-content ul,
.article-content ol {
  margin: 0 0 1.4em;
  padding-left: 8px;
}

.article-content ul li,
.article-content ol li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  line-height: 1.8;
}

.article-content ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.9em;
  width: 7px;
  height: 7px;
  background: var(--amber);
  border-radius: 2px;
  transform: rotate(45deg);
}

.article-content ol {
  counter-reset: articleNum;
}

.article-content ol li {
  counter-increment: articleNum;
}

.article-content ol li::before {
  content: counter(articleNum) ".";
  font-family: var(--font-num);
  left: 0;
  position: absolute;
  color: var(--amber);
  font-weight: 700;
  top: 0;
}

.article-content img {
  border-radius: 16px;
  margin: 24px 0;
  border: 1px solid var(--line);
  box-shadow: 0 18px 42px rgba(0,0,0,0.24);
}

.article-content figure {
  margin: 28px 0;
}

.article-content figure img {
  margin: 0 auto;
}

.article-content figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--faint);
  margin-top: 10px;
}

.article-content blockquote {
  margin: 24px 0 30px;
  padding: 22px 24px;
  background: rgba(155, 203, 59, 0.05);
  border-left: 3px solid var(--lime);
  border-radius: 0 14px 14px 0;
  color: var(--text);
  font-style: normal;
}

.article-content blockquote p {
  margin: 0;
}

.article-content pre {
  background: #101117;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  overflow-x: auto;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.7;
}

.article-content code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.92em;
}

.article-content pre code {
  background: transparent;
  padding: 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.article-content th {
  background: rgba(245,165,36,0.1);
  color: var(--amber-bright);
  text-align: left;
  font-weight: 600;
}

.article-content th,
.article-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.article-content tr:last-child td {
  border-bottom: 0;
}

.article-end-note {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
  line-height: 1.7;
}

.article-aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aside-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.aside-card:hover {
  border-color: rgba(245,165,36,0.35);
  transform: translateY(-2px);
}

.aside-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.aside-card-head i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,165,36,0.12);
  color: var(--amber);
  font-size: 13px;
}

.aside-card-head h3 {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: 0.02em;
}

.aside-card p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 14px;
}

.aside-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
}

.aside-arrow i {
  transition: transform 0.2s ease;
}

.aside-arrow:hover {
  color: var(--amber-bright);
}

.aside-arrow:hover i {
  transform: translateX(3px);
}

.aside-security {
  background: linear-gradient(145deg, rgba(156,203,59,0.05), rgba(156,203,59,0.01));
  border-color: rgba(156,203,59,0.22);
}

.aside-security .aside-card-head i {
  background: rgba(156,203,59,0.14);
  color: var(--lime);
}

.article-notfound {
  padding: 78px 12% 88px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nf-badge {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: rgba(245,165,36,0.1);
  border: 1px solid rgba(245,165,36,0.28);
  color: var(--amber);
  font-size: 24px;
  margin-bottom: 26px;
}

.nf-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  margin-bottom: 16px;
}

.nf-desc {
  color: var(--muted);
  line-height: 1.85;
  max-width: 560px;
  margin-bottom: 26px;
}

.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 21px;
  border-radius: 13px;
  font-weight: 620;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all 0.22s ease;
  color: var(--text);
}

.btn-amber {
  background: var(--amber);
  color: #1A1503;
  box-shadow: 0 8px 24px rgba(245,165,36,0.12);
}

.btn-amber:hover {
  background: var(--amber-bright);
  color: #1A1503;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(245,165,36,0.18);
}

.btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
}

.after-article {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 17px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.after-note {
  color: var(--muted);
  font-size: 13.5px;
}

.after-note i {
  color: var(--lime);
  margin-right: 8px;
}

.after-actions {
  display: flex;
  gap: 10px;
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 17px;
  background: rgba(245,165,36,0.09);
  color: var(--amber);
  border: 1px solid rgba(245,165,36,0.22);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mini-btn:hover {
  background: var(--amber);
  color: #1A1503;
  transform: translateY(-1px);
}

.recommend-section {
  margin-top: 6px;
  padding: 38px 0;
}

.section-head {
  margin-bottom: 24px;
}

.section-head h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 680;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 8px;
}

.section-head p {
  color: var(--muted);
  font-size: 14px;
}

.recommend-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.recommend-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.recommend-card:hover {
  border-color: rgba(245,165,36,0.4);
  transform: translateY(-4px);
  background: var(--panel-2);
}

.rec-thumb {
  position: relative;
  height: 154px;
  overflow: hidden;
  background: #20232C;
}

.rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
  border: 0;
  border-radius: 0;
}

.recommend-card:hover .rec-thumb img {
  transform: scale(1.05);
}

.rec-body {
  padding: 19px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}

.rec-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  color: var(--amber);
  font-size: 12px;
  background: rgba(245,165,36,0.1);
  border-radius: 999px;
  padding: 4px 11px;
}

.rec-body h3 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text);
}

.rec-body h3 a {
  color: inherit;
}

.rec-body h3 a:hover {
  color: var(--amber);
}

.rec-body p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
}

.rec-link {
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rec-link i {
  transition: transform 0.2s ease;
}

.rec-link:hover {
  color: var(--amber-bright);
}

.rec-link:hover i {
  transform: translateX(4px);
}

.cta-strip {
  position: relative;
  margin-top: 4px;
  margin-bottom: 24px;
  border-radius: 24px;
  overflow: hidden;
  padding: 44px clamp(25px, 5vw, 64px);
  background:
    linear-gradient(120deg, rgba(18,19,25,0.96), rgba(22,23,29,0.88)),
    url("/assets/images/backpic/back-2.webp") center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.cta-copy h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 720;
  color: var(--text);
  margin-bottom: 11px;
  line-height: 1.35;
}

.cta-copy p {
  color: var(--muted);
  font-size: 15px;
  max-width: 620px;
}

.cta-actions {
  flex-shrink: 0;
}

.site-footer {
  border-top: 1px solid rgba(245,165,36,0.55);
  background: #131419;
  color: var(--muted);
  padding: 63px 0 34px;
  margin-top: 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 34px 54px;
}

.footer-brand .brand-lock {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

.footer-brand-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.footer-brand p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  margin-top: 15px;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 15px;
  color: var(--text);
  font-weight: 650;
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-col h4::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent);
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col a {
  color: var(--muted);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col a:hover {
  color: var(--amber);
  transform: translateX(4px);
}

.footer-col a i {
  font-size: 10px;
  color: var(--faint);
}

.footer-col a:hover i {
  color: var(--amber);
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--faint);
}

.footer-official-line {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.footer-official-line i {
  color: var(--amber);
}

.footer-copy {
  font-family: var(--font-num);
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1023.98px) {
  .site-rail {
    transform: translateX(-110%);
    width: min(78vw, 290px);
    padding: 18px 18px 16px;
    align-items: stretch;
    box-shadow: 0 0 60px rgba(0,0,0,0.28);
  }

  .site-rail.is-open {
    transform: translateX(0);
  }

  .rail-brand {
    border-bottom: 1px solid var(--line);
    padding: 4px 0 16px;
  }

  .brand-lock {
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
  }

  .rail-brand .brand-lock {
    text-align: left;
  }

  .rail-word {
    font-size: 13px;
  }

  .rword1, .rword2, .rword3 {
    display: inline;
  }

  .rword2, .rword3 {
    font-size: 11px;
  }

  .rword3::before {
    content: " ";
    white-space: pre;
  }

  .rail-label {
    justify-content: flex-start;
    padding-left: 4px;
    letter-spacing: 0.12em;
  }

  .rail-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .rail-nav-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    padding: 9px 14px;
    gap: 12px;
    border-radius: 13px;
  }

  .rail-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 17px;
  }

  .nav-txt {
    font-size: 14px;
    max-width: 200px;
  }

  .rail-nav-item.active::before {
    left: -1px;
    width: 3px;
    height: 20px;
  }

  .rail-nav-area-divider {
    width: 100%;
    margin: 7px 0 10px;
  }

  .rail-close {
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: all 0.2s ease;
    order: -1;
  }

  .rail-close:hover {
    color: var(--amber);
    border-color: var(--amber);
  }

  .rail-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
  }

  .rail-foot {
    align-items: center;
    justify-content: center;
    gap: 9px;
  }

  .top-station-btn {
    width: 40px;
    height: 40px;
  }

  .rail-copy-sign {
    font-size: 10px;
  }

  .rail-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(8, 9, 12, 0.64);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(3px);
  }

  .rail-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .site-canvas {
    margin-left: 0;
  }

  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 48;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background: rgba(22, 23, 29, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }

  .mobile-brand .brand-glyph {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-radius: 8px;
  }

  .rail-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-size: 18px;
  }

  .rail-burger:hover {
    color: var(--amber);
    border-color: var(--amber);
  }

  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
  }

  .aside-card p {
    font-size: 14px;
  }

  .recommend-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768.98px) {
  .breadcrumb-current-wrap {
    max-width: 300px;
  }

  .crumb-current {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
  }

  .article-inner {
    padding-top: 82px;
  }

  .article-content {
    font-size: 15.5px;
  }

  .article-content p, .article-content li {
    line-height: 1.85;
  }

  .recommend-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 639.98px) {
  .article-breadcrumb {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-bottom: 4px;
    scrollbar-width: none;
  }

  .article-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .crumb-current {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .article-panel {
    border-radius: 20px;
  }

  .article-inner {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 66px;
  }

  .article-h1 {
    font-size: 27px;
    line-height: 1.35;
  }

  .article-meta {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }

  .article-content ul,
  .article-content ol {
    padding-left: 0;
  }

  .article-notfound {
    padding: 60px 24px 66px;
  }

  .after-article {
    align-items: flex-start;
    flex-direction: column;
  }

  .after-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .after-actions .mini-btn {
    flex: 1;
  }

  .cta-strip {
    padding: 34px 22px;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 2px;
    margin-right: 2px;
  }

  .cta-actions {
    width: 100%;
  }

  .cta-actions .btn-base {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-copy {
    font-size: 12px;
  }

  .container {
    padding: 0 18px;
  }
}

/* roulang page: category2 */
:root {
  --bg: #16171d;
  --bg-deep: #121319;
  --surface: #1d2028;
  --surface-2: #23262E;
  --surface-3: #2a2e38;
  --border-soft: rgba(245, 165, 36, .16);
  --border-line: rgba(255, 255, 255, .07);
  --text: #f0f1f3;
  --muted: #b9bfc7;
  --amber: #f5a524;
  --amber-bright: #ffc05c;
  --lime: #9ccb3b;
  --danger: #e56767;
  --ok: #9ccb3b;
  --r-lg: 18px;
  --r-md: 12px;
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, .24);
  --font-stack: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "DIN Alternate", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1, h2, h3, h4 {
  line-height: 1.28;
  margin: 0 0 .75em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
  line-height: 1.82;
}

ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(245, 165, 36, .25);
  color: #fff;
}

.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.section-head {
  max-width: 760px;
  margin-bottom: 40px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(245, 165, 36, .08);
  color: var(--amber-bright);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
}

.kicker + h2, .kicker + h1 {
  margin-top: 14px;
}

/* App Shell */
.app-shell {
  min-height: 100vh;
}

.rail-shell {
  position: fixed;
  inset: 0 auto 0 0;
  width: 96px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  border-right: 1px solid var(--border-line);
  padding: 18px 8px;
}

.brand-lock {
  flex-shrink: 0;
}

.brand-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(245, 165, 36, .22), rgba(245, 165, 36, .06));
  border: 1px solid rgba(245, 165, 36, .35);
  color: var(--amber);
  font-size: 19px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.brand-lock-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.brand-tag {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .08em;
  white-space: nowrap;
}

.brand-tag strong {
  color: var(--amber-bright);
  font-weight: 700;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.rail-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 13px 4px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #8f969f;
  font-size: 11px;
  letter-spacing: .02em;
  text-align: center;
  transition: color .25s, background .25s, border-color .25s, transform .2s;
}

.rail-nav-item i {
  font-size: 18px;
  line-height: 1;
}

.rail-nav-item .nav-txt {
  display: block;
  line-height: 1.3;
  max-width: 68px;
}

.rail-nav-item:hover,
.rail-nav-item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .07);
}

.rail-nav-item.active {
  background: linear-gradient(145deg, rgba(245, 165, 36, .16), rgba(245, 165, 36, .04));
  border-color: rgba(245, 165, 36, .36);
  color: var(--amber-bright);
}

.rail-nav-item.active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 3px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--amber);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(245, 165, 36, .72);
}

.rail-nav-item.active::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 165, 36, .14);
}

.rail-nav-group-name {
  padding: 8px 6px 0;
  color: #5f6570;
  font-size: 10px;
  letter-spacing: .14em;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin-top: 6px;
}

.rail-foot {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

.rail-up {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--muted);
  transition: .2s;
}

.rail-up:hover {
  color: var(--amber-bright);
  border-color: rgba(245, 165, 36, .45);
  transform: translateY(-2px);
}

.main-shell {
  width: calc(100% - 96px);
  margin-left: 96px;
  display: flex;
  flex-direction: column;
}

/* Mobile top */
.mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 70;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 14px 0 18px;
  background: rgba(22, 23, 29, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-line);
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(14px, 4vw, 17px);
  white-space: nowrap;
}

.mobile-brand .brand-icon {
  width: 34px;
  height: 34px;
  font-size: 15px;
  border-radius: 11px;
}

.menu-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: #e6e8ec;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

.menu-btn:hover {
  border-color: rgba(245, 165, 36, .45);
  color: var(--amber-bright);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 6, 9, .64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78vw, 330px);
  z-index: 81;
  background: var(--bg-deep);
  border-right: 1px solid rgba(255, 255, 255, .1);
  transform: translateX(-105%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px;
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open .drawer {
  transform: translateX(0);
}

body.drawer-open .drawer-overlay {
  opacity: 1;
  visibility: visible;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 12px;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}

.drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
}

.drawer-close:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-nav .rail-nav-item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 12px;
  font-size: 14px;
  border-radius: 12px;
  color: var(--text);
}

.drawer-nav .rail-nav-item i {
  font-size: 17px;
  width: 20px;
  text-align: center;
}

.drawer-nav .rail-nav-item .nav-txt {
  max-width: none;
  font-size: 14px;
}

.drawer-nav .rail-nav-item.active::before,
.drawer-nav .rail-nav-item.active::after {
  display: none;
}

.drawer-nav .rail-nav-item.active {
  background: rgba(245, 165, 36, .14);
  color: var(--amber-bright);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(245, 165, 36, .11), transparent 32%),
    linear-gradient(180deg, rgba(18, 19, 25, .8), rgba(22, 23, 29, .96)),
    url("/assets/images/backpic/back-2.webp") center center / cover no-repeat;
  padding: clamp(74px, 10vw, 128px) 0 clamp(56px, 7vw, 90px);
  border-bottom: 1px solid rgba(245, 165, 36, .18);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}

.hero::before {
  top: 0;
  background: linear-gradient(90deg, transparent 8%, rgba(245, 165, 36, .55), transparent 92%);
}

.hero::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent 12%, rgba(156, 203, 59, .28), transparent 88%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-headline {
  font-size: clamp(35px, 5.5vw, 58px);
  font-weight: 760;
  letter-spacing: .01em;
  line-height: 1.2;
  margin: 18px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 6px;
}

.hero-headline .kw-main {
  color: #fff;
}

.hero-headline .kw-sub {
  color: var(--amber-bright);
  position: relative;
  display: inline-block;
}

.hero-headline .kw-sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--amber), rgba(156, 203, 59, .6));
  opacity: .7;
}

.hero-lead {
  max-width: 720px;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.85;
  color: #cfd4dc;
  margin-bottom: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 13px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 650;
  border: 1px solid transparent;
  transition: transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.btn-primary {
  background: linear-gradient(140deg, var(--amber), #e89416);
  color: #17171a;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 30px rgba(245, 165, 36, .16);
}

.btn-primary:hover {
  background: linear-gradient(140deg, var(--amber-bright), var(--amber));
  color: #101111;
  box-shadow: 0 16px 38px rgba(245, 165, 36, .25);
}

.btn-ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(245, 165, 36, .5);
  color: var(--amber-bright);
}

.btn i {
  font-size: 13px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
}

.hero-mini span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13.5px;
}

.hero-mini i {
  color: var(--amber);
}

/* quick chips */
.scene-cue {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
}

.cue-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
  color: #d5d9df;
  font-size: 14px;
  transition: .2s ease;
}

.cue-chip:hover {
  border-color: rgba(245, 165, 36, .45);
  color: var(--amber-bright);
  transform: translateY(-1px);
}

.cue-chip i {
  color: var(--lime);
  font-size: 12px;
}

/* Section Basics */
.section {
  padding: 92px 0;
}

.section-alt {
  background: var(--surface);
  border-top: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.section-title {
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 720;
  color: #fff;
}

.section-desc {
  font-size: 17px;
  color: var(--muted);
}

.mid-eyebrow {
  color: var(--amber-bright);
  font-size: 14px;
  letter-spacing: .04em;
}

/* Scene blocks */
.scene-block {
  padding: 82px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.scene-copy {
  padding-right: 8px;
}

.scene-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: .15em;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.scene-num::before {
  content: "";
  height: 1px;
  width: 28px;
  background: rgba(156, 203, 59, .4);
}

.scene-block h2,
.scene-main-title {
  font-size: clamp(25px, 3.4vw, 35px);
  color: #fff;
  margin-bottom: 12px;
  font-weight: 720;
}

.scene-media {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: var(--shadow-soft);
  position: relative;
  min-height: 240px;
}

.scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 250px;
  transition: transform .7s ease;
}

.scene-block:hover .scene-media img {
  transform: scale(1.025);
}

.scene-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  pointer-events: none;
}

.unit-list {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.unit-list li {
  position: relative;
  padding-left: 24px;
  color: #ccd1d8;
  font-size: 15px;
  line-height: 1.72;
}

.unit-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--lime);
  font-size: 13px;
}

.note-panel {
  margin-top: 24px;
  background: var(--surface-2);
  border: 1px solid rgba(245, 165, 36, .13);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  padding: 16px 20px;
  color: #c3c9d2;
  font-size: 14.5px;
}

.note-panel i {
  color: var(--amber);
  margin-right: 6px;
}

.scene-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--amber-bright);
  font-weight: 650;
  border-bottom: 1px solid rgba(245, 165, 36, .35);
  padding-bottom: 3px;
}

.scene-more:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

/* Quick ops */
.ops-panel {
  border-radius: var(--r-lg);
  padding: clamp(28px, 6vw, 60px);
  background:
    radial-gradient(circle at 8% 10%, rgba(156, 203, 59, .08), transparent 24%),
    linear-gradient(135deg, var(--surface-2), #1b1e25);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: var(--shadow-soft);
}

.two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.ops-med {
  padding-top: 10px;
}

.ops-med h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

.ops-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.ops-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .08);
  color: #bfc5cd;
  font-size: 14.5px;
}

.ops-list li i {
  color: var(--amber);
  padding-top: 5px;
  font-size: 13px;
}

.ops-list li strong {
  color: #eef0f3;
  font-weight: 650;
}

/* FAQ */
.faq-wrap {
  display: grid;
  gap: 14px;
}

.faq-item {
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  font-size: 16px;
  font-weight: 620;
  color: #eef0f3;
  transition: .2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: rgba(245, 165, 36, .05);
  color: var(--amber-bright);
}

.faq-item summary .faq-state {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  transition: transform .25s, background .25s, color .25s;
}

.faq-item[open] summary .faq-state {
  transform: rotate(135deg);
  background: rgba(245, 165, 36, .18);
  color: var(--amber);
}

.faq-body {
  padding: 0 22px 20px;
}

.faq-body p:last-child {
  margin-bottom: 0;
}

/* CTA */
.cta-band {
  padding: 44px 0 0;
}

.cta-card {
  text-align: center;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 56px);
  border-radius: 22px;
  background:
    url("/assets/images/backpic/back-1.webp") center center / cover no-repeat,
    linear-gradient(145deg, rgba(245, 165, 36, .16), rgba(22, 23, 29, .93));
  border: 1px solid rgba(245, 165, 36, .25);
  position: relative;
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(18, 19, 25, .55), rgba(18, 19, 25, .88));
}

.cta-card .cta-content {
  position: relative;
  z-index: 2;
}

.cta-card h2 {
  font-size: clamp(28px, 4.6vw, 46px);
  color: #fff;
  font-weight: 760;
}

.cta-card p {
  max-width: 660px;
  margin: 0 auto 28px;
  color: #d5d9de;
  font-size: 17px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: #111217;
  padding-top: 64px;
  padding-bottom: 28px;
  margin-top: 90px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 1fr;
  gap: 42px;
  padding-bottom: 34px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.brand-lock-lg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 760;
  color: #fff;
  letter-spacing: .01em;
}

.footer-brand-text {
  font-weight: 720;
}

.footer-brand p {
  font-size: 14.5px;
  color: #aab1bc;
  max-width: 420px;
  line-height: 1.8;
  margin-bottom: 0;
}

.footer-col h4 {
  font-size: 15px;
  color: #fff;
  font-weight: 650;
  letter-spacing: .05em;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-col ul {
  display: grid;
  gap: 11px;
}

.footer-col ul a {
  color: #b7bec8;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: .2s;
}

.footer-col ul a i {
  color: var(--amber);
  font-size: 12px;
}

.footer-col ul a:hover {
  color: var(--amber-bright);
  transform: translateX(2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: #89919d;
}

.footer-official-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-copy {
  color: #6f7784;
}

/* Foundation Overrides */
.grid-margin-x {
  margin-left: -16px;
  margin-right: -16px;
}

.grid-margin-x > .cell {
  margin-right: 16px;
  margin-left: 16px;
}

.cell {
  box-sizing: border-box;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .rail-shell {
    display: none;
  }

  .main-shell {
    width: 100%;
    margin-left: 0;
  }

  .mobile-topbar {
    display: flex;
  }

  .section {
    padding: 66px 0;
  }

  .scene-block {
    padding: 64px 0;
  }

  .two-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 15px;
  }

  .container {
    width: min(100% - 36px, 1200px);
  }

  .hero {
    padding: 62px 0 54px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-mini {
    gap: 8px 10px;
  }

  .hero-headline {
    row-gap: 12px;
  }

  .scene-copy {
    padding-right: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom span {
    display: block;
  }

  .scene-media img {
    min-height: 190px;
  }

  .cta-card {
    padding: 36px 18px;
  }

  .cta-actions .btn {
    width: 100%;
  }
}

@media screen and (max-width: 430px) {
  .mobile-topbar {
    padding: 0 10px 0 14px;
  }

  .mobile-brand {
    font-size: 13px;
  }

  .mobile-brand .brand-icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .menu-btn {
    width: 38px;
    height: 38px;
  }

  .drawer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-headline {
    font-size: 33px;
  }

  .cue-chip {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* roulang page: category3 */
:root{
  --bg:#16171D;
  --bg-1:#1B1E25;
  --bg-2:#23262E;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --amber:#F5A524;
  --amber-bright:#FFBE4D;
  --lime:#9CCB3B;
  --text:#F0F1F3;
  --muted:#B9BFC7;
  --dim:#858B94;
  --radius-xl:20px;
  --radius-lg:15px;
  --radius-md:10px;
  --radius-sm:8px;
  --shadow-1:0 10px 24px rgba(0,0,0,.25);
  --shadow-2:0 20px 44px rgba(0,0,0,.35);
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.75;font-size:16px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4,p{line-height:1.25;margin:0}
.webpage-subtitle{
  background:rgba(245,165,36,.08);
  border:1px solid rgba(245,165,36,.22);
  border-radius:var(--radius-md);
  color:var(--amber-bright);
  font-size:14px;
  padding:10px 14px;
  line-height:1.6;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4.6vw,56px)}
.container{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3.4vw,48px)}
.content-col{margin-left:84px;min-width:0;background:var(--bg)}

/* side rail */
.side-rail{
  position:fixed; left:0; top:0; z-index:100;
  width:84px; height:100vh; background:#20232B;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding:18px 0 14px;
}
.rail-brand{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:13px; letter-spacing:.5px; color:var(--text);
}
.rail-mark{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(145deg,rgba(245,165,36,.3),rgba(245,165,36,.06));
  border:1px solid rgba(245,165,36,.4);
  display:grid;place-items:center; color:var(--amber);
  font-size:20px; box-shadow:0 0 22px rgba(245,165,36,.12);
}
.rail-brand-name{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px}
.rail-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 6px;width:100px;display:flex;flex-direction:column;gap:6px}
.rail-scroll::-webkit-scrollbar{width:0}
.rail-label{color:#6C727A;font-size:10px;text-align:center;margin:12px 0 4px;letter-spacing:2px}
.rail-nav{padding:0 8px;display:flex;flex-direction:column;gap:8px}
.rail-nav-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:10px 4px 9px;border-radius:14px;
  color:var(--muted);background:transparent;transition:all .22s ease;
}
.rail-nav-item i{font-size:20px;line-height:1}
.rail-nav-item .nav-txt{font-size:11px;line-height:1.25;text-align:center}
.rail-nav-item:hover{color:var(--text);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.rail-nav-item.active{
  color:var(--amber);background:rgba(245,165,36,.13);
  border:1px solid rgba(245,165,36,.18);box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.rail-nav-item.active::before{
  content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:6px;height:18px;border-radius:0 8px 8px 0;background:var(--amber);
  box-shadow:0 0 14px var(--amber);
}
.rail-top{
  width:40px;height:40px;margin-top:8px;border-radius:50%;
  color:var(--dim);display:grid;place-items:center;
  border:1px solid var(--line);background:var(--bg-1);transition:.2s;
}
.rail-top:hover{color:var(--amber);border-color:rgba(245,165,36,.35)}

/* mobile bar + drawer */
.mobile-bar{
  display:none;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:160;
  height:62px;padding:0 18px;
  background:rgba(27,29,36,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.mobile-brand{display:flex;align-items:center;gap:10px;font-weight:800}
.mobile-brand .mb-icon{width:32px;height:32px;border-radius:10px;background:rgba(245,165,36,.18);color:var(--amber);display:grid;place-items:center;border:1px solid rgba(245,165,36,.35)}
.mobile-brand .mb-text{font-size:15px}
.mobile-bar button i{font-size:20px;color:var(--muted)}
.drawer-backdrop{position:fixed;inset:0;z-index:170;background:rgba(8,9,11,.58);opacity:0;pointer-events:none;transition:opacity .28s}
body.mobile-menu-open .drawer-backdrop{opacity:1;pointer-events:auto}
.mobile-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:180;
  width:min(78vw,288px);background:#1B1E25;border-right:1px solid var(--line);
  padding:18px 12px;transform:translateX(-110%);transition:transform .3s cubic-bezier(.22,.8,.3,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
body.mobile-menu-open .mobile-drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:4px 6px 14px;border-bottom:1px solid var(--line)}
.drawer-head .drawer-title{font-size:15px;font-weight:800;display:flex;gap:9px;align-items:center}
.drawer-head .drawer-title i{color:var(--amber)}
.drawer-close{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.06)}
.drawer-nav .mobile-label{font-size:12px;color:var(--dim);padding:14px 10px 8px;letter-spacing:2px}
.drawer-nav a{
  display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:12px;
  color:var(--muted);margin-bottom:4px;transition:.2s;
}
.drawer-nav a i{width:22px;font-size:18px;color:var(--dim)}
.drawer-nav a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.drawer-nav a.active{background:rgba(245,165,36,.12);color:var(--amber)}
.drawer-nav a.active i{color:var(--amber)}

@media(max-width:1023px){
  .side-rail{display:none}
  .content-col{margin-left:0}
  .mobile-bar{display:flex}
}

/* hero */
.faq-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 84% 12%,rgba(245,165,36,.16),transparent 26%),
    linear-gradient(180deg,rgba(12,14,17,.92),rgba(15,16,20,.94)),
    url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  border-bottom:1px solid var(--line);
  padding:clamp(56px,8vw,104px) 0 clamp(50px,6vw,88px);
}
.faq-hero::after{
  content:"";pointer-events:none;position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(245,165,36,.9),rgba(255,255,255,.2));
  opacity:.75;
}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;margin-bottom:clamp(28px,5vw,50px)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--amber-bright)}
.crumbs span{color:var(--muted)}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;color:var(--amber-bright);
  font-size:14px;letter-spacing:.7px;background:rgba(245,165,36,.1);
  border:1px solid rgba(245,165,36,.22);border-radius:999px;
  padding:5px 14px 5px 10px;margin-bottom:18px;
}
.hero-kicker i{color:var(--amber)}
.faq-hero h1{
  font-size:clamp(34px,5.5vw,60px);line-height:1.16;letter-spacing:.4px;
  color:var(--text);font-weight:800;max-width:760px;margin-bottom:20px;
}
.faq-hero h1 .pale{color:var(--amber)}
.hero-lead{
  font-size:clamp(16px,1.3vw,20px);color:#C6CDD6;
  line-height:1.8;max-width:620px;margin-bottom:28px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.btn-main,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;
  transition:all .22s ease;border:1px solid transparent;margin:0;
}
.btn-main{background:var(--amber);color:#1D1710;border-color:var(--amber);box-shadow:0 10px 22px rgba(245,165,36,.18)}
.btn-main i{font-size:15px}
.btn-main:hover{background:var(--amber-bright);transform:translateY(-2px);box-shadow:0 14px 24px rgba(245,165,36,.26)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-strong)}
.btn-ghost i{color:var(--amber)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-bright);transform:translateY(-2px)}
.hero-list-row{display:flex;flex-wrap:wrap;gap:12px;padding-left:0;margin-top:6px}
.hero-list-row li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.hero-list-row li i{color:var(--lime);font-size:13px}
.witness-card{
  background:linear-gradient(180deg,rgba(247,248,249,.08),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius-xl);
  position:relative;overflow:hidden;box-shadow:var(--shadow-1);
}
.witness-card::before{
  content:"";position:absolute;left:22px;right:22px;height:1px;top:0;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
}
.witness-media{padding:10px}
.witness-media img{border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
.witness-body{padding:4px 20px 20px}
.witness-body strong{display:inline-flex;align-items:center;gap:7px;color:var(--amber);font-size:14px}
.witness-body strong i{font-size:16px}
.witness-steps{margin-top:12px}
.witness-steps li{
  color:var(--muted);font-size:14px;padding:8px 0 8px 28px;position:relative;line-height:1.55;
}
.witness-steps li + li{border-top:1px solid rgba(255,255,255,.05)}
.witness-steps li::before{
  content:"";position:absolute;left:6px;top:17px;width:7px;height:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 12px var(--amber);
}

/* trust strip */
.trust-zone{background:var(--bg-1);border-bottom:1px solid var(--line);padding:36px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.trust-cell{
  display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;
}
.trust-cell i{color:var(--amber);font-size:19px;margin-top:4px}
.trust-cell strong{display:block;font-size:14px;color:var(--text)}
.trust-cell small{color:var(--dim);font-size:12px;line-height:1.5}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}}

/* section baseline */
.section{padding:clamp(52px,8vw,92px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.section-head .eyebrow{color:var(--amber);letter-spacing:2px;font-size:13px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.section-head h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;color:var(--text);line-height:1.3}
.section-head p{color:var(--dim);max-width:360px;font-size:15px;line-height:1.7}
.line-split{margin:0;border:none;height:1px;background:linear-gradient(90deg,var(--amber),transparent 68%)}

/* direction cards */
.direction-section{background:var(--bg)}
.direction-grid{display:grid;grid-template-columns:1.1fr .85fr 1.05fr;gap:22px}
.direction-card{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:26px 24px;position:relative;overflow:hidden;transition:border-color .28s ease,transform .28s ease;
}
.direction-card:hover{border-color:rgba(245,165,36,.35);transform:translateY(-3px)}
.direction-card::after{
  content:"";position:absolute;right:-40px;top:-50px;width:130px;height:130px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,165,36,.08),transparent 68%);
  pointer-events:none;
}
.dir-num{font-size:13px;font-family:"DIN Alternate",sans-serif;color:var(--dim);letter-spacing:2px;display:block;margin-bottom:4px}
.direction-card h3{font-size:21px;color:#FFF;margin-bottom:10px;line-height:1.4;display:flex;gap:9px;align-items:flex-start}
.direction-card h3 i{color:var(--amber);font-size:20px;margin-top:5px}
.direction-card p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:18px}
.q-mini-list{margin-top:2px}
.q-mini-list li{display:flex;gap:10px;align-items:flex-start;color:#C7CBD1;font-size:14px;line-height:1.6;padding:6px 0}
.q-mini-list li i{color:var(--lime);font-size:12px;margin-top:7px}
.direction-more{display:inline-flex;align-items:center;gap:7px;color:var(--amber);font-size:14px;margin-top:8px;transition:gap .2s}
.direction-more:hover{gap:11px}
@media(max-width:1023px){.direction-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.direction-grid{grid-template-columns:1fr}}

/* faq section */
.faq-panel{background:#141619;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-layout{display:grid;grid-template-columns:minmax(0,780px) minmax(280px,340px);justify-content:space-between;gap:40px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.faq-item{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:border-color .25s;
}
.faq-item.active{border-color:rgba(245,165,36,.42);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.faq-q-btn{
  width:100%;display:grid;grid-template-columns:44px 1fr 26px;align-items:center;gap:10px;
  text-align:left;padding:18px 18px 16px;color:var(--text);
  font-size:16px;font-weight:650;background:transparent;line-height:1.5;
}
.faq-q-btn .faq-count{color:var(--amber);font-family:"DIN Alternate",sans-serif;font-size:14px;font-weight:700;display:grid;place-items:center;width:30px;height:30px;background:rgba(245,165,36,.09);border-radius:10px}
.faq-q-btn .fa-chevron-down{transition:transform .28s;color:var(--dim);font-size:14px;justify-self:end}
.faq-item.active .faq-q-btn .fa-chevron-down{transform:rotate(180deg);color:var(--amber)}
.faq-q-btn:hover{background:rgba(255,255,255,.02)}
.faq-a{max-height:0;visibility:hidden;opacity:0;transition:max-height .36s ease,opacity .3s ease,visibility .3s}
.faq-item.active .faq-a{max-height:1000px;visibility:visible;opacity:1}
.faq-a-inner{padding:0 22px 20px 72px;color:#C7CDD6;font-size:15px;line-height:1.85;border-top:1px solid rgba(255,255,255,.05)}
.faq-a-inner p + p{margin-top:10px}
.faq-a-inner strong{color:var(--text)}
.faq-side{position:sticky;top:28px;display:flex;flex-direction:column;gap:22px;padding-top:34px}
.side-note{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:24px;color:var(--muted);
}
.side-note .side-icon{
  width:42px;height:42px;border-radius:13px;border:1px solid rgba(245,165,36,.28);
  color:var(--amber);background:rgba(245,165,36,.13);display:grid;place-items:center;font-size:20px;margin-bottom:14px;
}
.side-note h3{color:#FFF;font-size:18px;margin-bottom:10px;line-height:1.5}
.side-note p{font-size:14px;line-height:1.75}
.side-note a{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--amber);
  font-size:14px;font-weight:600;
}
.side-note img{border-radius:12px;border:1px solid var(--line);margin-top:18px;aspect-ratio:5/3;object-fit:cover;width:100%}
.side-taglist{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px}
.side-taglist strong{display:block;color:var(--text);font-size:14px;margin-bottom:10px}
.side-taglist ul{display:flex;flex-wrap:wrap;gap:8px}
.side-taglist li{background:rgba(255,255,255,.05);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:12.5px}
@media(max-width:1240px){.faq-layout{grid-template-columns:minmax(0,760px) 300px;gap:30px}}
@media(max-width:980px){.faq-layout{grid-template-columns:1fr}.faq-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px}.faq-status{grid-column:1/-1}}
@media(max-width:640px){.faq-side{grid-template-columns:1fr}.faq-a-inner{padding-left:24px}}

/* callout */
.callout-section{background:var(--bg);padding:clamp(44px,7vw,78px) 0}
.callout-grid{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:linear-gradient(130deg,rgba(245,165,36,.09),rgba(255,255,255,.02));
  border:1px solid rgba(245,165,36,.22);border-radius:var(--radius-xl);
  padding:clamp(24px,4.4vw,44px);
}
.callout-grid h2{font-size:clamp(20px,3vw,31px);line-height:1.45;color:#FFF}
.callout-grid p{color:var(--muted);max-width:620px;margin-top:10px;line-height:1.8;font-size:14.5px}
.callout-actions{display:flex;flex-direction:column;gap:12px;min-width:190px}
.callout-actions .btn-main{width:100%}
.callout-actions .btn-ghost{width:100%}
@media(max-width:880px){.callout-grid{grid-template-columns:1fr}.callout-actions{min-width:0}}

/* final cta */
.cta-section{padding:clamp(18px,3vw,36px) 0 clamp(60px,8vw,90px)}
.cta-ribbon{
  background:#1F222A;border:1px solid rgba(245,165,36,.26);
  border-radius:var(--radius-xl);padding:clamp(28px,5vw,48px);
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  box-shadow:var(--shadow-2);position:relative;overflow:hidden;
}
.cta-ribbon::after{content:"";position:absolute;right:0;top:0;height:100%;width:140px;background:radial-gradient(circle,rgba(245,165,36,.16),transparent 80%)}
.cta-emblem{width:62px;height:62px;border-radius:18px;background:rgba(245,165,36,.14);border:1px solid rgba(245,165,36,.32);color:var(--amber);display:grid;place-items:center;font-size:25px;transform:rotate(0);box-shadow:0 10px 24px rgba(245,165,36,.1)}
.cta-ribbon h2{font-size:clamp(19px,2.6vw,28px);color:#FFF;line-height:1.5;margin-bottom:5px}
.cta-ribbon p{color:var(--dim);font-size:14px}
.cta-ribbon .btn-main{position:relative;z-index:2}
@media(max-width:860px){.cta-ribbon{grid-template-columns:1fr;text-align:left}.cta-emblem{margin-right:auto}}

/* footer */
.site-footer{background:#1A1D24;border-top:1px solid var(--line);position:relative}
.site-footer::before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--amber),rgba(245,165,36,.08),var(--amber));margin:0;border:none}
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:34px;padding:46px 0 36px}
.footer-brand-text{font-size:19px;font-weight:800;letter-spacing:.5px}
.brand-lock{display:flex;align-items:center;gap:10px;color:var(--text);transition:filter .2s}
.brand-lock:hover{filter:brightness(1.1)}
.brand-icon{width:38px;height:38px;border-radius:12px;background:rgba(245,165,36,.15);box-shadow:inset 0 0 0 1px rgba(245,165,36,.25);color:var(--amber);display:grid;place-items:center;font-size:18px}
.footer-brand p{color:var(--dim);font-size:14px;line-height:1.8;max-width:360px;margin-top:14px}
.footer-col h4{color:#F1F2F4;font-size:14px;letter-spacing:1px;margin-bottom:15px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.footer-col ul li{margin-bottom:7px}
.footer-col a{color:var(--dim);font-size:14px;display:flex;align-items:center;gap:7px;transition:all .2s}
.footer-col a i{color:var(--amber);font-size:13px;opacity:.8}
.footer-col a:hover{color:var(--amber);padding-left:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding:18px 0 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--dim);font-size:13px}
.footer-official-line{display:flex;align-items:center;gap:8px;font-size:13px;max-width:640px}
.footer-official-line i{color:var(--amber)}
@media(max-width:840px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}

@media(max-width:640px){
  body{font-size:15px}
  .online-status{font-size:13px!important}
  .faq-hero h1{font-size:33px}
  .section-head p{margin-top:6px}
}