/* roulang page: index */
:root{
  --bg-deep:#0A0F1F;
  --bg-deeper:#070B16;
  --bg-2:#0E1628;
  --bg-card:rgba(17,28,47,.78);
  --green:#00E28B;
  --green-dark:#00b874;
  --cyan:#38D9F2;
  --yellow:#F6C85F;
  --text-main:#EDF2F9;
  --text-sub:#8A9AB5;
  --border-glass:rgba(255,255,255,.08);
  --radius-card:16px;
  --radius-btn:10px;
  --shadow-card:0 18px 35px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 30px rgba(0,0,0,.25);
  --shadow-glow:0 0 20px rgba(0,226,139,.28), 0 0 42px rgba(0,226,139,.12);
  --space-section:88px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","HarmonicOS Sans","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  background:var(--bg-deep);
  color:var(--text-main);
  line-height:1.75;
  overflow-x:hidden;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green)}
input,button,textarea{font-family:inherit}
.container{max-width:1280px;padding-left:24px;padding-right:24px}
p{line-height:1.8;color:var(--text-sub);font-size:16px}

/* 玻璃卡片 */
.glass-card{
  background:var(--bg-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.glass-card::before{
  content:"";
  position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.glass-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 45px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) inset,0 0 32px rgba(56,217,242,.10);
  border-color:rgba(56,217,242,.2);
}

/* 按钮 */
.btn-neon,.btn-outline-neon,.btn-ghost-cyan{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-btn);padding:13px 30px;
  font-size:16px;font-weight:700;letter-spacing:.5px;
  transition:all .3s ease;white-space:nowrap;line-height:1.2;
}
.btn-neon{
  background:linear-gradient(135deg,#00E28B,#00c97e);
  color:#071310;border:none;
  box-shadow:0 0 16px rgba(0,226,139,.35),0 6px 20px rgba(0,0,0,.2);
}
.btn-neon:hover{
  background:linear-gradient(135deg,#21f0a0,#00e28b);
  color:#06100c;
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(0,226,139,.5),0 8px 28px rgba(0,0,0,.3);
}
.btn-neon:active{transform:scale(.98)}
.btn-ghost-cyan{
  background:rgba(56,217,242,.06);
  color:var(--cyan);
  border:1px solid rgba(56,217,242,.35);
}
.btn-ghost-cyan:hover{
  background:rgba(56,217,242,.15);
  color:#fff;
  box-shadow:0 0 18px rgba(56,217,242,.25);
  transform:translateY(-2px);
}
.btn-large{padding:17px 44px;font-size:18px;border-radius:12px}

/* section通用 */
.section-block{padding:var(--space-section) 0;position:relative}
.section-block-alt{background:var(--bg-2)}
.sec-header{margin-bottom:52px}
.sec-eyebrow{
  display:inline-block;font-size:14px;letter-spacing:2px;color:var(--cyan);
  background:rgba(56,217,242,.08);border:1px solid rgba(56,217,242,.18);
  padding:6px 14px;border-radius:99px;margin-bottom:16px;font-weight:500;
}
.sec-title{font-size:34px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.sec-sub{font-size:16px;color:var(--text-sub);margin-top:12px;max-width:700px}

/* 顶部信息条 */
.topbar{
  background:rgba(6,10,20,.95);
  border-bottom:1px solid rgba(56,217,242,.35);
  font-size:13px;
  padding:8px 0;
}
.topbar-wrap{display:flex;align-items:center;justify-content:space-between;column-gap:20px}
.topbar-domain{
  color:#8A9AB5;
  font-family:"Courier New",Consolas,monospace;
  font-weight:600;
  letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
}
.topbar-domain i{color:var(--green);font-size:14px}
.topbar-links{display:flex;align-items:center;gap:20px}
.topbar-links span{color:#6c7b98}
.topbar-links a{
  color:#B6C2D9;font-size:13px;transition:all .3s;
  display:inline-flex;align-items:center;gap:5px;
}
.topbar-links a:hover{color:var(--green)}

/* 主导航 */
.site-header{
  background:rgba(10,15,31,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:all .3s ease;
}
.site-header.scrolled{
  background:rgba(6,10,20,.96);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.navbar{position:static}
.logo-area{display:flex;align-items:center}
.logo-mark{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(145deg,rgba(0,226,139,.18),rgba(56,217,242,.08));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,226,139,.3);
  margin-right:12px;flex-shrink:0;
}
.logo-mark svg{width:24px;height:24px;color:var(--green)}
.logo-text{font-size:20px;font-weight:800;letter-spacing:.4px;display:flex;align-items:baseline;gap:4px}
.logo-text .brand-primary{color:#fff}
.logo-text .brand-ext{color:var(--green);font-weight:700}
.site-header .navbar-nav{gap:6px}
.site-header .nav-link{
  color:#B6C2D9;
  font-size:15px;
  font-weight:500;
  padding:9px 16px !important;
  border-radius:8px;
  transition:all .25s;
  border-bottom:2px solid transparent;
}
.site-header .nav-link:hover{
  color:var(--text-main);
  background:rgba(255,255,255,.04);
  border-bottom-color:var(--green);
}
.site-header .nav-link.active{
  color:var(--green);
  border-bottom-color:var(--green);
  background:rgba(0,226,139,.05);
}
.nav-cta{margin-left:18px}
.navbar-toggler{
  border:1px solid rgba(255,255,255,.18);
  padding:8px 10px;
  border-radius:8px;
  background:rgba(0,226,139,.08);
}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%2300E28B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 导航下拉 */
.dropdown-menu{
  background:rgba(10,15,31,.97);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  min-width:220px;
  border-radius:12px;
  backdrop-filter:blur(20px);
  padding:8px;
}
.dropdown-item{
  color:#B6C2D9;font-size:14px;padding:10px 16px;
  border-radius:7px;transition:all .2s;
}
.dropdown-item:hover,.dropdown-item:focus{
  background:rgba(0,226,139,.1);color:var(--green);
}
.dropdown-toggle::after{
  margin-left:6px;
  vertical-align:middle;
  border-top-color:#8A9AB5;
}
.dropdown-item i{margin-right:8px;color:var(--cyan);width:16px;text-align:center}

/* Hero */
.hero-section{
  position:relative;
  min-height:680px;
  display:flex;align-items:center;
  background:linear-gradient(180deg,#0A0F1F 0%,#0C1222 50%,#0E1628 100%);
  padding:80px 0;
  overflow:hidden;
}
.hero-bg-layer{
  position:absolute;inset:0;
  background-image:url('/assets/images/backpic/back-1.webp');
  background-size:cover;background-position:center;
  opacity:.2;
}
.hero-bg-layer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#0A0F1F 12%,rgba(10,15,31,.72) 45%,rgba(10,15,31,.55) 75%,rgba(10,15,31,.85) 100%);
}
.hero-content{position:relative;z-index:2}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,226,139,.1);
  border:1px solid rgba(0,226,139,.25);
  border-radius:99px;
  padding:7px 16px;
  font-size:13px;
  color:var(--green);
  margin-bottom:24px;
  font-weight:500;
}
.hero-badge span{
  width:6px;height:6px;background:var(--green);border-radius:50%;
  box-shadow:0 0 10px var(--green);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.hero-title{
  font-size:48px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.5px;
  color:#fff;
  margin-bottom:20px;
}
.hero-title .text-green{color:var(--green);position:relative}
.hero-title .text-green::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-4px;height:10px;
  background:linear-gradient(90deg,transparent,rgba(0,226,139,.3),transparent);
  clip-path:polygon(0 85%,100% 40%,100% 100%,0 100%);
}
.hero-desc{font-size:18px;color:var(--text-sub);max-width:560px;margin-bottom:30px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:32px}
.hero-tags{display:flex;flex-wrap:wrap;gap:12px}
.hero-tags .tag{
  font-size:13px;color:#7C8AA8;
  display:flex;align-items:center;gap:6px;
}
.hero-tags .tag i{color:var(--cyan);font-size:14px}

.hero-visual{
  position:relative;z-index:2;
  padding-left:10px;
}
.hero-visual .vr-card{
  background:linear-gradient(145deg,rgba(17,28,47,.8),rgba(10,15,31,.72));
  border-radius:20px;
  border:1px solid rgba(56,217,242,.18);
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  padding:28px;
  transform:perspective(850px) rotateY(-6deg) rotateX(3deg);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
}
.hero-visual .vr-card::before{
  content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;
  background:linear-gradient(120deg,transparent 20%,rgba(0,226,139,.2) 45%,rgba(56,217,242,.3) 55%,transparent 80%);
  z-index:-1;filter:blur(20px);
  animation:border-glow 5s linear infinite;
}
@keyframes border-glow{
  0%{opacity:.4}50%{opacity:1}100%{opacity:.4}
}
.vr-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.vr-date{font-size:13px;color:var(--text-sub)}
.live-badge{
  background:rgba(246,200,95,.15);
  border:1px solid rgba(246,200,95,.35);
  color:var(--yellow);
  font-size:12px;
  padding:3px 10px;
  border-radius:99px;
  display:inline-flex;align-items:center;gap:5px;
  font-weight:600;
}
.live-badge .dot{
  width:5px;height:5px;background:var(--yellow);border-radius:50%;
  animation:blink 1s infinite;
}
@keyframes blink{50%{opacity:.3}}
.vr-team-list{display:flex;flex-direction:column;gap:14px}
.vr-team-row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.03);border-radius:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.04)}
.vr-team-name{flex:1;font-weight:600;font-size:15px;color:var(--text-main)}
.vr-score{font-weight:800;font-size:20px;color:var(--green);font-family:"DIN Condensed","Roboto Condensed",sans-serif}
.vr-chip{font-size:12px;color:#6c7b98;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.vr-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.vr-num{font-size:12px;color:#6c7b98}
.vr-num b{color:var(--cyan);font-weight:600}
.vr-btn-link{font-size:14px;color:var(--green);display:inline-flex;align-items:center;gap:4px}
.vr-btn-link:hover{color:var(--cyan)}
.hero-visual::before{
  content:"";position:absolute;top:-100px;right:-80px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(0,226,139,.18),transparent 70%);
  filter:blur(50px);
  z-index:-1;
}
.hero-wave-bottom{
  position:absolute;bottom:0;left:0;right:0;height:90px;
  background:linear-gradient(to bottom,transparent,rgba(14,22,40,.5));
  pointer-events:none;
  z-index:1;
}

/* 运行状态条 */
.status-bar-section{
  background:linear-gradient(90deg,#0B0F1E 0%,#0E1628 50%,#0B0F1E 100%);
  border-top:1px solid rgba(56,217,242,.2);
  border-bottom:1px solid rgba(0,226,139,.15);
  padding:34px 0;
  position:relative;
}
.status-bar-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,217,242,.4),transparent);
}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.status-item{text-align:center;padding:8px 10px;position:relative}
.status-item:not(:last-child)::after{
  content:"";position:absolute;right:-12px;top:16%;bottom:16%;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.12),transparent);
}
.status-num{
  font-size:34px;font-weight:800;
  font-family:"DIN Condensed","Roboto Condensed",sans-serif;
  color:var(--green);
  line-height:1.1;
  letter-spacing:0;
  display:inline-flex;align-items:center;
}
.status-num small{font-size:16px;color:var(--text-sub);font-weight:400;margin-left:2px}
.status-label{font-size:14px;color:var(--text-sub);margin-top:6px}
.status-item i{color:var(--cyan);font-size:18px;margin-right:8px;opacity:.8}

/* 三步上手 */
.steps-section{background:var(--bg-deep);position:relative;overflow:hidden}
.steps-section::before{
  content:"";position:absolute;top:200px;left:-200px;width:550px;height:550px;
  background:radial-gradient(circle,rgba(56,217,242,.05),transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.steps-grid::before{display:none}
.step-card{
  padding:36px 30px;
  position:relative;
  overflow:hidden;
}
.step-card:nth-child(2){margin-top:34px;border:1px solid rgba(0,226,139,.25)}
.step-card:nth-child(3){margin-top:12px}
.step-num{
  font-size:74px;
  font-weight:800;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.1);
  font-family:"Roboto Condensed","DIN Condensed",sans-serif;
  letter-spacing:-1px;
  margin-bottom:16px;
  display:block;
}
.step-card:nth-child(1) .step-num{-webkit-text-stroke-color:rgba(0,226,139,.4);color:rgba(0,226,139,.04)}
.step-card:nth-child(2) .step-num{-webkit-text-stroke-color:rgba(56,217,242,.4);color:rgba(56,217,242,.04)}
.step-card:nth-child(3) .step-num{-webkit-text-stroke-color:rgba(246,200,95,.4);color:rgba(246,200,95,.04)}
.step-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  margin-bottom:18px;
  position:relative;
}
.step-card:nth-child(1) .step-icon{background:rgba(0,226,139,.12);color:var(--green);border:1px solid rgba(0,226,139,.2)}
.step-card:nth-child(2) .step-icon{background:rgba(56,217,242,.12);color:var(--cyan);border:1px solid rgba(56,217,242,.2)}
.step-card:nth-child(3) .step-icon{background:rgba(246,200,95,.12);color:var(--yellow);border:1px solid rgba(246,200,95,.2)}
.step-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:10px}
.step-desc{font-size:15px;color:var(--text-sub);margin-bottom:18px;min-height:56px}
.step-link{a{
  font-size:14px;color:var(--cyan);
  display:inline-flex;align-items:center;gap:6px;
  transition:all .25s;
}
.step-link:hover{color:var(--green);gap:10px}
.step-link i{font-size:14px}

/* 中间过渡分隔 */
.signal-divider{
  height:4px;
  background:linear-gradient(90deg,transparent,rgba(0,226,139,.6),rgba(56,217,242,.5),transparent);
  opacity:.4;
  position:relative;
}
.signal-divider::after{
  content:"◆";font-size:8px;color:var(--cyan);
  position:absolute;left:50%;top:-10px;
  opacity:.6;
}

/* 案例与服务覆盖 */
.cases-section{
  background:#0C1324;
  position:relative;
  overflow:hidden;
}
.cases-section::before{
  content:"";position:absolute;inset:0;
  background-image:url('/assets/images/backpic/back-2.webp');
  background-size:cover;background-position:center;
  opacity:.07;
}
.cases-section .container{position:relative;z-index:2}
.case-main-card{
  border-radius:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  background:rgba(17,28,47,.75);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-card);
  margin-bottom:30px;
}
.case-left{
  position:relative;
  overflow:hidden;
  min-height:280px;
  background:#10192C;
}
.case-left img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform 1s ease}
.case-main-card:hover .case-left img{transform:scale(1.04)}
.case-left-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(17,28,47,.6));
}
.case-left-meta{position:absolute;left:18px;bottom:16px;z-index:2}
.case-left-meta span{
  font-size:13px;color:#fff;background:rgba(10,15,31,.6);
  backdrop-filter:blur(4px);padding:3px 12px;border-radius:6px;
  border-left:3px solid var(--green);
}
.case-right{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.case-right h3{font-size:26px;font-weight:700;color:#fff;margin-bottom:8px}
.case-right p{font-size:15px;margin-bottom:16px}
.case-stats{display:flex;margin-top:10px;gap:28px;flex-wrap:wrap}
.case-stat b{font-size:32px;font-weight:800;color:var(--green);font-family:"Roboto Condensed","DIN Condensed",sans-serif;display:block;line-height:1.1}
.case-stat span{font-size:14px;color:var(--text-sub)}
.case-stats .case-stat:nth-child(2) b{color:var(--cyan)}

.case-verticals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vert-card{
  background:rgba(12,19,36,.6);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:24px 20px;
  text-align:center;
  transition:all .3s;
}
.vert-card:hover{border-color:rgba(0,226,139,.3);transform:translateY(-2px)}
.vert-icon{
  width:52px;height:52px;margin:0 auto 14px;
  border-radius:14px;
  background:rgba(56,217,242,.08);
  border:1px solid rgba(56,217,242,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  color:var(--cyan);
}
.vert-card:nth-child(2) .vert-icon{color:var(--green);background:rgba(0,226,139,.08);border-color:rgba(0,226,139,.15)}
.vert-card:nth-child(3) .vert-icon{color:var(--yellow);background:rgba(246,200,95,.08);border-color:rgba(246,200,95,.15)}
.vert-card:nth-child(4) .vert-icon{color:#c08bff;background:rgba(192,139,255,.08);border-color:rgba(192,139,255,.15)}
.vert-card h4{font-size:16px;font-weight:600;color:#d5e2f5;margin-bottom:4px}
.vert-card p{font-size:13px;color:#6c7b98;margin:0}

/* 资讯动态 */
.news-section{background:var(--bg-deep)}
.news-header-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:36px;
  flex-wrap:wrap;gap:0;
}
.news-header-row .sec-header{margin-bottom:0}
.news-more a{
  color:var(--cyan);font-size:15px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(56,217,242,.08);
  border:1px solid rgba(56,217,242,.2);
  padding:8px 20px;
  border-radius:99px;
  transition:all .3s;
}
.news-more a:hover{background:rgba(56,217,242,.16);color:#fff;gap:10px}
.news-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* CMS最新资讯列表 */
.latest-news-list{grid-column:1 / -1}
.news-list-wrap{display:flex;flex-direction:column;gap:18px}
.cms-news-row{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:22px;
  background:rgba(16,25,44,.72);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;
  padding:18px;
  transition:all .3s ease;
  cursor:pointer;
}
.cms-news-row:hover{
  border-color:rgba(0,226,139,.3);
  background:rgba(17,28,47,.85);
  transform:translateX(4px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.cms-news-thumb{
  border-radius:12px;
  overflow:hidden;
  background:#0E1A2C;
  min-height:120px;
  display:flex;align-items:center;justify-content:center;
  color:#3d4b63;font-size:32px;
}
.news-noimg{color:#3d4e6a;font-size:36px}
.cms-news-body{display:flex;flex-direction:column;justify-content:center}
.cms-news-meta{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.news-tag{
  font-size:12px;
  background:rgba(0,226,139,.1);
  color:var(--green);
  padding:2px 10px;
  border-radius:99px;
  border:1px solid rgba(0,226,139,.2);
  font-weight:500;
}
.news-date{font-size:13px;color:#6c7b98;display:inline-flex;align-items:center;gap:4px}
.news-title-container{margin-bottom:6px}
.news-title{font-size:17px;font-weight:600;color:#E0E9F5;line-height:1.5;transition:color .2s}
.cms-news-row:hover .news-title{color:var(--green)}
.news-excerpt{font-size:14px;color:var(--text-sub);line-height:1.7;margin-bottom:8px}
.news-read{
  font-size:14px;color:var(--cyan);
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;
  margin-top:auto;
  align-self:flex-start;
}
.news-read span{width:8px;height:2px;background:var(--cyan);border-radius:2px}
.cms-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  padding:60px 30px;
  text-align:center;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(16,25,44,.5);
}
.empty-icon{font-size:56px;color:#3d4e6a;margin-bottom:14px;line-height:1}
.cms-empty p{color:var(--text-sub);font-size:15px;margin-bottom:16px}

.news-cat-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px;border-top:1px solid rgba(255,255,255,.06);padding-top:30px}
.cat-tab-link{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  padding:9px 24px;
  border-radius:99px;
  font-size:14px;
  color:#B6C2D9;
  transition:all .3s;
  display:inline-flex;align-items:center;gap:6px;
}
.cat-tab-link:hover{
  background:rgba(0,226,139,.1);
  border-color:rgba(0,226,139,.4);
  color:var(--green);
}
.cat-tab-link i{font-size:14px}

/* FAQ */
.faq-section{background:#0E1628}
.faq-container{max-width:850px}
.faq-item{
  margin-bottom:12px;
  border-radius:14px;
  background:rgba(10,15,31,.6);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.05);
  transition:all .35s;
  overflow:hidden;
}
.faq-item:hover{border-color:rgba(255,255,255,.1)}
.faq-item.active{
  background:rgba(8,15,26,.8);
  border-left:3px solid var(--green);
  box-shadow:0 0 30px rgba(0,226,139,.12);
  padding-left:13px;
}
.faq-q{
  display:flex;align-items:center;
  padding:20px 24px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  color:#D5E0F0;
  line-height:1.5;
}
.faq-q-icon{
  width:26px;height:26px;border-radius:8px;
  background:rgba(0,226,139,.12);
  border:1px solid rgba(0,226,139,.25);
  display:flex;align-items:center;justify-content:center;
  margin-right:14px;
  color:var(--green);
  font-size:13px;
  flex-shrink:0;
}
.faq-arrow{margin-left:auto;transition:all .35s;color:var(--text-sub);font-size:17px;flex-shrink:0}
.faq-item.active .faq-arrow{transform:rotate(180deg);color:var(--green)}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s ease;
}
.faq-a-inner{padding:0 24px 22px 64px;color:var(--text-sub);font-size:15px;line-height:1.9}
.faq-item.active .faq-a{max-height:220px}

/* CTA区 */
.cta-section{
  position:relative;
  padding:110px 0;
  background:linear-gradient(180deg,#0E1628,#0A0F1F);
  overflow:hidden;
}
.cta-bg-pattern{
  position:absolute;inset:0;
  background-image:url('/assets/images/backpic/back-3.webp');
  background-size:cover;background-position:center;
  opacity:.15;
  z-index:1;
}
.cta-bg-pattern::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(56,217,242,.16) 0%,rgba(0,226,139,.08) 35%,rgba(10,15,31,.8) 100%);
  mask-image:linear-gradient(110deg,#000 30%,transparent 90%);
}
.cta-bg-pattern::after{
  content:"";position:absolute;
  top:-40%;left:-10%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(56,217,242,.18),transparent);
  transform:skewX(-8deg);
  pointer-events:none;
}
.cta-content{position:relative;z-index:3;text-align:center}
.cta-badge{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--yellow);
  font-size:14px;
  margin-bottom:20px;
  background:rgba(246,200,95,.06);
  border:1px solid rgba(246,200,95,.2);
  padding:6px 16px;
  border-radius:99px;
}
.cta-title{
  font-size:44px;
  font-weight:800;
  color:#fff;
  letter-spacing:-.3px;
  margin-bottom:18px;
  line-height:1.3;
}
.cta-title span{
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cta-desc{font-size:18px;color:var(--text-sub);max-width:620px;margin:0 auto 34px;line-height:1.8}
.cta-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.cta-badge .bi{font-size:14px}

/* 页脚 */
.site-footer{
  background:linear-gradient(180deg,#070A12,#05070D);
  border-top:1px solid rgba(255,255,255,.06);
  padding:50px 0 0;
  color:#6c7b98;
  font-size:14px;
  position:relative;
}
.site-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(0,226,139,.15),rgba(56,217,242,.2),transparent);
}
.footer-brands{
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.05);
  margin-bottom:32px;
}
.footer-monicker{
  font-size:22px;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.footer-monicker i{color:var(--green)}
.footer-slogan{font-size:14px;color:var(--text-sub);max-width:620px;line-height:1.8;margin-bottom:0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:36px}
.footer-col-title{
  font-size:16px;font-weight:600;color:#C8D6EA;
  margin-bottom:16px;
  position:relative;
  padding-bottom:8px;
}
.footer-col-title::after{
  content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;
  background:var(--green);
  border-radius:2px;
  box-shadow:0 0 8px rgba(0,226,139,.4);
}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{
  color:#6c7b98;
  transition:all .2s;
  display:inline-flex;align-items:center;
  font-size:14px;
}
.footer-links a::before{
  content:"›";
  color:var(--cyan);
  font-weight:600;
  font-size:16px;
  line-height:1;
  opacity:.6;
  transition:all .2s;
}
.footer-links a:hover{color:var(--green);letter-spacing:.2px}
.footer-links a:hover::before{opacity:1;transform:translateX(3px);color:var(--green)}
.footer-info{font-size:13px;line-height:1.9}
.footer-info i{color:var(--cyan);margin-right:8px;width:16px}
.footer-service{padding:22px 0;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:center}
.footer-copyright{
  background:rgba(0,0,0,.5);
  padding:20px 0;
  text-align:center;
  font-size:13px;
  color:#58677F;
  line-height:1.8;
}
.footer-copyright a{
  color:var(--green);
  font-family:"Consolas","Menlo",monospace;
  font-weight:500;
  opacity:.9;
}
.footer-copyright a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* 背景辅助装饰 */
.field-lines{
  background-image:linear-gradient(rgba(56,217,242,.028) 1px,transparent 1px),
  linear-gradient(90deg,rgba(56,217,242,.028) 1px,transparent 1px);
  background-size:50px 50px;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* 文章页相关(当前页为首页) */
.breadcrumb-sec,.article-wrap,.related-section,.article-section{display:none}

/* 图标和按钮状态 */
.btn:focus,.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible{
  outline:2px solid rgba(0,226,139,.6);
  outline-offset:3px;
}
.btn:disabled{opacity:.5;filter:grayscale(80%)}

/* Scrollbar */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:#0E1628}
::-webkit-scrollbar-thumb{background:#1F2C45;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,226,139,.5)}

/* 响应式 */
@media (max-width:1199.98px){
  .hero-title{font-size:42px}
  .hero-actions{column-gap:12px;gap:12px}
  .hero-tags{gap:8px}
  .steps-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .step-card{padding:28px 20px}
}
@media (max-width:991.98px){
  :root{--space-section:66px}
  .navbar-collapse{
    background:rgba(8,12,22,.98);
    border-radius:16px;
    padding:0;
    margin-top:12px;
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    box-shadow:0 20px 50px rgba(0,0,0,.4);
  }
  .navbar-collapse .navbar-nav{padding:12px}
  .navbar-collapse .nav-link{padding:14px 16px !important}
  .nav-cta{margin:14px 0 10px;padding:0}
  .nav-cta .btn-neon{width:100%;}}
  .hero-section{min-height:auto;padding-top:50px}
  .hero-title{font-size:38px}
  .hero-desc{width:90%}
  .hero-visual{margin-top:50px}
  .hero-visual .vr-card{transform:none}
  .case-main-card{grid-template-columns:1fr}
  .case-left{min-height:200px}
  .case-stats{gap:16px}
  .case-stat b{font-size:26px}
  .news-main-grid{grid-template-columns:1fr}
  .cms-news-row{grid-template-columns:1fr}
  .cms-news-body{padding:4px 2px}
  .status-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .status-item:not(:last-child)::after{display:none}
  .case-verticals{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:1fr;gap:14px}
  .step-card{margin-top:0 !important}
  .step-desc{min-height:auto}
}
@media (max-width:575.98px){
  :root{--space-section:50px}
  .container{padding-left:18px;padding-right:18px}
  .sec-title{font-size:27px}
  .topbar-domain span.text{display:none}
  .topbar-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hero-title{font-size:31px;line-height:1.3}
  .hero-desc{font-size:15px;width:100%;margin-bottom:20px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn-neon,.btn-ghost-cyan{width:100%;justify-content:center}
  .btn-large{width:100%}
  .hero-badge{align-self:flex-start}
  .hero-tags{flex-wrap:wrap;margin-top:30px;justify-content:flex-start}
  .status-num{font-size:28px}
  .status-grid{gap:20px 10px}
  .news-header-row{flex-direction:column;align-items:flex-start;gap:18px}
  .news-more a{width:100%;justify-content:center}
  .cms-news-meta{flex-wrap:wrap;flex-direction:column;justify-content:flex-start;gap:10px}
  .case-verticals{grid-template-columns:1fr}
  .case-right{padding:24px 20px}
  .footer-grid{grid-template-columns:1fr}
  .cta-title{font-size:33px;text-align:left}
  .cta-desc{font-size:16px;text-align:left}
  .cta-actions{flex-direction:column}
  .cta-badge{margin-left:auto;margin-right:auto}
  .cta-content{text-align:center}
  .faq-q{padding:16px 14px;font-size:15px;line-height:1.6}
  .faq-q-icon{margin-right:10px}
  .faq-a-inner{padding:0 14px 16px 40px;font-size:14px}
  .logo-text{font-size:19px}
  .footer-brands{padding-bottom:24px}
  .field-lines{background-size:32px 32px}
}

@media (max-width:370px){
  .logo-mark{width:36px;height:36px;margin-right:8px}
  .logo-text{font-size:16px}
  .topbar-domain{margin-right:4px}
  .case-stat b{font-size:24px}
}

/* roulang page: category1 */
:root{
  --bg-deep:#0A0F1F;
  --bg-body:#0C1322;
  --bg-section:#0E1628;
  --bg-soft:#111A2D;
  --primary:#00E28B;
  --primary-glow:rgba(0,226,139,.35);
  --cyan:#38D9F2;
  --cyan-glow:rgba(56,217,242,.22);
  --yellow:#F6C85F;
  --orange:#FF9E7A;
  --text-main:#EDF2F9;
  --text-sub:#8A9AB5;
  --text-dim:#5F7088;
  --border-glass:rgba(255,255,255,.08);
  --glass-bg:rgba(17,28,47,.72);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --font-main:"PingFang SC","Microsoft YaHei","HarmonicOS Sans","Noto Sans CJK SC","Helvetica Neue",sans-serif;
  --font-num:"DIN Alternate","Roboto Condensed","Bahnschrift",sans-serif;
  --shadow-deep:0 24px 60px rgba(0,0,0,.35);
  --section-space:92px;
}
*{box-sizing:border-box}
html{scroll-padding-top:120px;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-main);
  background:var(--bg-deep);
  color:var(--text-main);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-link:focus-visible,.accordion-button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  box-shadow:none;
}
.container{
  max-width:1280px;
}
.text-main{color:var(--text-main)}
.text-sub{color:var(--text-sub)}
.gradient-text{
  background:linear-gradient(120deg,#00E28B,#38D9F2);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--primary);
}

/* ---------- Topbar ---------- */
.topbar{
  font-size:13px;
  color:#8295AF;
  border-bottom:1px solid rgba(56,217,242,.18);
  background:linear-gradient(180deg,rgba(10,15,31,.95),rgba(10,15,31,.72));
  min-height:38px;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:38px;
}
.topbar-domain{
  font-family:var(--font-num);
  letter-spacing:.06em;
  color:#C3D5E9;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.topbar-domain::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 10px var(--primary-glow);
}
.topbar-links{
  display:flex;
  align-items:center;
  gap:18px;
}
.topbar-links a{
  color:#B3C2D8;
  transition:color .3s;
}
.topbar-links a:hover{color:var(--cyan)}
.topbar-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#9AABC4;
}
.topbar-live i{color:var(--primary)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1080;
  width:100%;
  background:rgba(7,11,22,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .35s,box-shadow .35s;
}
.site-header.scrolled{
  background:rgba(6,9,18,.92);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.mainnavbar-wrap .container{padding-top:10px;padding-bottom:10px}
.navbar{
  --bs-navbar-padding-y:0;
  --bs-navbar-color:var(--text-main);
  min-height:62px;
  padding:0;
}
.logo-area{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:0;
  padding:6px 0;
}
.logo-mark{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(0,226,139,.16),rgba(56,217,242,.07));
  border:1px solid rgba(0,226,139,.35);
  color:var(--primary);
  box-shadow:0 0 18px rgba(0,226,139,.16);
}
.logo-text{
  line-height:1.1;
  padding:2px 0;
}
.brand-primary{
  display:block;
  font-size:22px;
  font-weight:800;
  color:#F3F7FC;
  letter-spacing:.02em;
}
.brand-ext{
  display:block;
  font-size:11px;
  letter-spacing:.38em;
  color:#79B8D9;
  text-transform:none;
  margin-top:3px;
}
.navbar-toggler{
  border:1px solid rgba(255,255,255,.14);
  color:var(--text-main);
  padding:8px 10px;
  border-radius:var(--radius-sm);
}
.navbar-toggler:hover{border-color:var(--primary)}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(237,242,249,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav{
  gap:4px;
}
.navbar-nav .nav-link{
  font-size:16px;
  font-weight:600;
  color:#CFDAE9;
  padding:14px 15px;
  border-radius:var(--radius-sm);
  position:relative;
  transition:color .3s,background .3s;
}
.navbar-nav .nav-link i{
  margin-right:4px;
  color:var(--text-dim);
  transition:color .3s;
}
.navbar-nav .nav-link:hover{
  color:var(--primary);
}
.navbar-nav .nav-link:hover i{
  color:var(--primary);
}
.navbar-nav .nav-link.active{
  color:var(--text-main);
}
.navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  background:var(--primary);
  box-shadow:0 0 12px var(--primary-glow);
}
.dropdown-toggle::after{
  border-top-color:#8295AF;
  vertical-align:.12em;
}
.dropdown-menu{
  min-width:230px;
  background:rgba(11,19,34,.98);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-md);
  box-shadow:0 18px 46px rgba(0,0,0,.4);
  padding:10px;
  margin-top:4px;
}
.dropdown-item{
  border-radius:var(--radius-sm);
  padding:11px 14px;
  color:#AABBD2;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:color .25s,background .25s;
}
.dropdown-item i{
  width:20px;
  text-align:center;
  color:var(--text-dim);
}
.dropdown-item:hover,.dropdown-item.active{
  background:rgba(0,226,139,.07);
  color:var(--primary);
}
.dropdown-item:hover i,.dropdown-item.active i{
  color:var(--primary);
}
.nav-cta{
  margin-left:8px;
}

/* ---------- 按钮 ---------- */
.btn-neon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  font-weight:700;
  font-size:16px;
  line-height:1;
  color:#021A12;
  background:linear-gradient(135deg,#12F3A0 0%,#00D67F 55%,#00B86B 100%);
  padding:15px 30px;
  border-radius:12px;
  box-shadow:0 10px 32px rgba(0,226,139,.28);
  transition:transform .35s,box-shadow .35s,filter .35s;
  letter-spacing:.01em;
}
.btn-neon:hover{
  color:#02140D;
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(0,226,139,.38);
}
.btn-neon:active{
  transform:scale(.97);
  filter:brightness(.95);
}
.btn-neon.btn-sm{
  padding:11px 20px;
  font-size:14px;
  border-radius:10px;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(56,217,242,.4);
  background:rgba(56,217,242,.06);
  color:#E2FBFF;
  font-weight:600;
  font-size:16px;
  padding:14px 26px;
  border-radius:12px;
  transition:all .35s;
}
.btn-ghost:hover{
  background:rgba(56,217,242,.14);
  border-color:var(--cyan);
  box-shadow:0 0 22px var(--cyan-glow);
  color:#FFFFFF;
  transform:translateY(-2px);
}
.btn-ghost:active{
  transform:scale(.97);
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(0,226,139,.07);
  border:1px solid rgba(0,226,139,.25);
  color:var(--primary);
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
}
.aux-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-sub);
  font-size:15px;
  font-weight:500;
  transition:color .3s;
}
.aux-link i{
  transition:transform .3s;
}
.aux-link:hover{
  color:var(--cyan);
}
.aux-link:hover i{
  transform:rotate(45deg);
}

/* ---------- Page Sections ---------- */
.page-section{
  padding-top:var(--section-space);
  padding-bottom:var(--section-space);
  position:relative;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:34px;
}
.kicker{
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--primary);
  text-transform:none;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.kicker::before{
  content:"";
  width:26px;
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
  border-radius:2px;
}
.section-title{
  font-size:34px;
  font-weight:800;
  line-height:1.3;
  color:#EEF4FB;
  margin:0;
}
.section-lead{
  color:var(--text-sub);
  font-size:16px;
  max-width:720px;
  line-height:1.8;
}

/* ---------- Hero ---------- */
.category-hero{
  position:relative;
  background-color:#0D1730;
  background-image:
    linear-gradient(100deg,rgba(10,15,31,.96) 4%,rgba(10,15,31,.82) 45%,rgba(12,22,44,.55) 100%),
    url('/assets/images/backpic/back-1.webp');
  background-size:cover;
  background-position:center 35%;
  color:#fff;
  overflow:hidden;
  min-height:560px;
  display:flex;
  align-items:center;
  padding:92px 0 60px;
}
.category-hero::before{
  content:"";
  position:absolute;
  width:640px;
  height:640px;
  right:-160px;
  top:-260px;
  background:radial-gradient(circle,rgba(56,217,242,.15),transparent 62%);
  pointer-events:none;
}
.category-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:76px;
  background:linear-gradient(180deg,transparent,rgba(10,15,31,.42));
  pointer-events:none;
}
.hero-panel{
  position:relative;
  z-index:2;
}
.breadcrumb-plain{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
  color:#8B9CB5;
  margin-bottom:26px;
}
.breadcrumb-plain a{
  color:#A8B9CF;
  transition:color .3s;
}
.breadcrumb-plain a:hover{color:var(--primary)}
.breadcrumb-plain .sep{opacity:.5}
.breadcrumb-plain .current{color:#5BABC0}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:#87CBE1;
  background:rgba(56,217,242,.07);
  border:1px solid rgba(56,217,242,.2);
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:20px;
}
.hero-kicker span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 12px var(--primary-glow);
  animation:pulse-dot 1.8s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 6px var(--primary-glow)}
  50%{box-shadow:0 0 18px var(--primary-glow)}
}
.hero-title{
  font-weight:800;
  font-size:clamp(38px,4.5vw,58px);
  line-height:1.15;
  margin-bottom:22px;
  color:#F3F7FC;
  letter-spacing:-.01em;
}
.hero-accent{
  color:var(--primary);
  text-shadow:0 0 24px rgba(0,226,139,.25);
}
.hero-sub{
  color:#A3B3CC;
  font-size:17px;
  max-width:620px;
  line-height:1.85;
  margin-bottom:28px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-bottom:28px;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-tags .tag-chip{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.09);
  color:#CFDBEA;
  font-size:13px;
  padding:6px 11px;
}
.hero-tags .tag-chip i{color:var(--cyan);font-size:13px}

/* Hero右边卡片 */
.live-stage{
  z-index:2;
  position:relative;
}
.live-panel{
  background:var(--glass-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.12);
  border-left-color:rgba(255,255,255,.09);
  border-radius:20px;
  box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);
  padding:26px;
  overflow:hidden;
}
.live-stage-card{
  background:linear-gradient(135deg,rgba(17,28,47,.83),rgba(13,22,38,.7));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.live-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.live-title{
  font-weight:700;
  font-size:18px;
  color:#F0F5FB;
  display:flex;
  align-items:center;
  gap:10px;
}
.live-title i{
  color:var(--primary);
}
.live-badge{
  background:rgba(0,226,139,.13);
  color:#00E28B;
  border:1px solid rgba(0,226,139,.3);
  font-size:13px;
  border-radius:999px;
  padding:5px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.live-badge small{
  width:6px;height:6px;border-radius:50%;
  background:var(--primary);
  animation:pulse-dot 1.5s infinite;
}
.screen-frame{
  padding:0;
  background:#0E1A2D;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:18px;
  position:relative;
  min-height:178px;
}
.screen-frame img{
  width:100%;
  height:194px;
  object-fit:cover;
  border:none;
}
.screen-shade{
  position:absolute;
  left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(9,15,27,.7));
  padding:14px 16px;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  color:#DCEAF5;
}
.schedule-list{
  list-style:none;
  margin:0;
  padding:0;
}
.schedule-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.schedule-list li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.schedule-meta{
  font-size:13px;
  color:#8B9DB3;
}
.schedule-state{
  color:var(--yellow);
  font-weight:600;
  font-size:14px;
}
.schedule-state.playing{
  color:var(--primary);
}
.schedule-state.gamewait{
  color:var(--cyan);
}

/* ---------- 状态条 ---------- */
.status-band{
  background:#0F1829;
  border-bottom:1px solid rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.04);
  position:relative;
}
.status-band .container{
  padding-top:28px;
  padding-bottom:28px;
}
.status-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.status-cell{
  display:flex;
  align-items:center;
  gap:16px;
  padding:6px 2px;
}
.status-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(56,217,242,.07);
  border:1px solid rgba(56,217,242,.2);
  color:var(--cyan);
  font-size:22px;
  flex-shrink:0;
}
.status-icon.green{
  background:rgba(0,226,139,.07);
  border-color:rgba(0,226,139,.2);
  color:var(--primary);
}
.status-num{
  font-family:var(--font-num);
  font-size:32px;
  font-weight:700;
  color:#FFFFFF;
  line-height:1;
  letter-spacing:.01em;
}
.status-num small{
  font-size:16px;
  font-weight:500;
  color:var(--primary);
  margin-left:3px;
}
.status-text{
  font-size:14px;
  color:var(--text-sub);
  margin-top:4px;
}

/* ---------- 频道选择 ---------- */
.feature-section{
  background:#0B1120;
}
.feature-section::before{
  content:"";
  position:absolute;
  right:-160px;
  top:50px;
  width:480px;
  height:480px;
  background:radial-gradient(circle,rgba(0,226,139,.06),transparent 65%);
  z-index:0;
}
.channel-grid{
  position:relative;
  z-index:1;
}
.channel-card{
  background:rgba(17,28,47,.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:30px 28px;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:transform .4s,box-shadow .4s;
}
.channel-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--cyan),transparent);
  opacity:0;
  transition:opacity .4s;
}
.channel-card:hover::before{opacity:1}
.channel-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 26px rgba(0,226,139,.06);
}
.channel-card:nth-child(2){
  transform:translateY(18px);
}
.channel-card:nth-child(2):hover{
  transform:translateY(12px);
}
.channel-card:nth-child(3){
  transform:translateY(34px);
}
.channel-card:nth-child(3):hover{
  transform:translateY(28px);
}
.channel-card-logo{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:22px;
  color:var(--primary);
  background:rgba(0,226,139,.09);
  border:1px solid rgba(0,226,139,.25);
  box-shadow:0 0 18px rgba(0,226,139,.1);
}
.channel-card.cyan .channel-card-logo{
  color:var(--cyan);
  background:rgba(56,217,242,.08);
  border-color:rgba(56,217,242,.22);
  box-shadow:0 0 18px rgba(56,217,242,.1);
}
.channel-card.yellow .channel-card-logo{
  color:var(--yellow);
  background:rgba(246,200,95,.07);
  border-color:rgba(246,200,95,.2);
  box-shadow:0 0 18px rgba(246,200,95,.08);
}
.channel-tag{
  font-size:13px;
  letter-spacing:.1em;
  color:var(--primary);
  margin-bottom:8px;
  font-weight:600;
}
.channel-card.cyan .channel-tag{color:var(--cyan)}
.channel-card.yellow .channel-tag{color:var(--yellow)}
.channel-card h3{
  font-size:25px;
  font-weight:800;
  line-height:1.3;
  margin-bottom:14px;
  color:#F0F5FA;
}
.channel-card p{
  color:var(--text-sub);
  font-size:15px;
  line-height:1.85;
  margin-bottom:18px;
}
.channel-features{
  list-style:none;
  padding:0;
  margin:0 0 24px;
}
.channel-features li{
  display:flex;
  align-items:center;
  gap:9px;
  color:#B4C4D8;
  font-size:14px;
  padding:5px 0;
}
.channel-features li i{
  color:var(--primary);
  font-size:15px;
}
.channel-card.cyan .channel-features li i{color:var(--cyan)}
.channel-card.yellow .channel-features li i{color:var(--yellow)}
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  color:#DDE9F4;
  transition:gap .3s,color .3s;
}
.link-arrow i{
  transition:transform .3s;
  font-size:16px;
}
.link-arrow:hover{
  color:var(--primary);
}
.link-arrow:hover i{
  transform:translateX(4px);
}

/* ---------- 步骤区 ---------- */
.bridge-section{
  background:#0A101D;
}
.step-shell{
  position:relative;
}
.step-card{
  background:linear-gradient(145deg,rgba(18,30,50,.85),rgba(11,19,33,.7));
  border:1px solid rgba(255,255,255,.07);
  border-top-color:rgba(255,255,255,.1);
  border-radius:20px;
  padding:34px 28px 28px;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:transform .35s,box-shadow .35s;
}
.step-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.3);
}
.step-num{
  font-family:var(--font-num);
  font-size:54px;
  font-weight:800;
  opacity:.24;
  color:#C5D1E1;
  position:absolute;
  top:12px;
  right:22px;
  line-height:1;
  transform:skew(-14deg);
}
.step-icon{
  width:58px;
  height:58px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
  margin-bottom:22px;
  background:rgba(0,226,139,.1);
  border:1px solid rgba(0,226,139,.28);
  color:var(--primary);
  box-shadow:0 0 18px rgba(0,226,139,.09);
}
.step-card.c-dynamic .step-icon{
  background:rgba(56,217,242,.08);
  border-color:rgba(56,217,242,.2);
  color:var(--cyan);
  box-shadow:0 0 18px rgba(56,217,242,.08);
}
.step-card.c-config .step-icon{
  background:rgba(246,200,95,.08);
  border-color:rgba(246,200,95,.2);
  color:var(--yellow);
  box-shadow:0 0 18px rgba(246,200,95,.08);
}
.step-card h3{
  font-size:22px;
  font-weight:800;
  color:#EEF4FA;
  margin-bottom:12px;
}
.step-card p{
  color:var(--text-sub);
  font-size:15px;
  line-height:1.8;
  margin-bottom:18px;
}
.mini-link{
  font-size:14px;
  color:#AFC0D5;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mini-link:hover{color:var(--cyan)}
.mini-link i{font-size:14px}
.trace-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,226,139,.45),rgba(56,217,242,.4),transparent);
  margin:12px 4px 0;
}

/* ---------- 优势证明区 ---------- */
.guarantee-section{
  background:#0C1422;
}
.guarantee-grid{
  align-items:center;
}
.media-panel{
  position:relative;
  background:#101B2E;
  border-radius:20px;
  overflow:hidden;
  min-height:260px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.media-panel img{
  width:100%;
  height:330px;
  object-fit:cover;
}
.media-panel .media-badge{
  position:absolute;
  left:18px;
  top:18px;
  background:rgba(0,226,139,.16);
  border:1px solid rgba(0,226,139,.35);
  backdrop-filter:blur(7px);
  color:var(--primary);
  font-size:14px;
  font-weight:700;
  padding:7px 14px;
  border-radius:999px;
}
.media-tag-row{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.media-tag-row .tag-chip{
  background:rgba(10,15,29,.68);
  border-color:rgba(255,255,255,.12);
  color:#DCE6F0;
  backdrop-filter:blur(7px);
  font-size:12px;
}
.assure-list{
  list-style:none;
  margin:0;
  padding:0;
}
.assure-list li{
  padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;
  align-items:flex-start;
  gap:15px;
}
.assure-list li:last-child{border-bottom:none}
.assure-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(0,226,139,.07);
  color:var(--primary);
  border:1px solid rgba(0,226,139,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  flex-shrink:0;
}
.assure-list .cyan-icon .assure-icon{
  background:rgba(56,217,242,.07);
  border-color:rgba(56,217,242,.16);
  color:var(--cyan);
}
.assure-list b{
  display:block;
  color:#EDF2F9;
  font-size:18px;
  font-weight:700;
  margin-bottom:3px;
}
.assure-list span{
  display:block;
  color:var(--text-sub);
  font-size:14px;
  line-height:1.7;
}

/* ---------- 分类互跳入口 ---------- */
.quicknav-section{
  background:#0B1120;
}
.cat-nav-card{
  border-radius:20px;
  background:rgba(16,25,42,.72);
  border:1px solid rgba(255,255,255,.07);
  padding:28px 24px;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.cat-nav-card:hover{
  transform:translateY(-4px);
  border-color:rgba(56,217,242,.26);
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.cat-nav-card.current{
  border-color:rgba(0,226,139,.3);
  background:linear-gradient(145deg,rgba(17,29,48,.9),rgba(10,16,28,.75));
}
.cat-nav-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:rgba(56,217,242,.07);
  border:1px solid rgba(56,217,242,.18);
  color:var(--cyan);
  margin-bottom:18px;
}
.cat-nav-card.current .cat-nav-icon{
  background:rgba(0,226,139,.09);
  border-color:rgba(0,226,139,.25);
  color:var(--primary);
}
.cat-nav-card h3{
  font-size:20px;
  font-weight:800;
  color:#EFF5FA;
  line-height:1.3;
  margin-bottom:9px;
}
.cat-nav-card p{
  color:var(--text-sub);
  font-size:14px;
  line-height:1.75;
  margin-bottom:20px;
}
.cat-nav-more{
  margin-top:auto;
  font-size:14px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#B9C9DD;
}
.cat-nav-grid a:hover{
  color:var(--primary);
}

/* ---------- CTA ---------- */
.cta-section{
  padding:0;
}
.cta-banner{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background-color:#0B1424;
  background-image:
    linear-gradient(100deg,rgba(6,13,29,.97) 10%,rgba(8,19,35,.86) 55%,rgba(14,22,40,.72)),
    url('/assets/images/backpic/back-2.webp');
  background-size:cover;
  background-position:center;
  padding:72px 20px;
  text-align:center;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}
.cta-banner::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:radial-gradient(circle at center,rgba(0,226,139,.08),transparent 50%);
  pointer-events:none;
}
.cta-content{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto;
}
.cta-title{
  font-size:clamp(28px,3.5vw,42px);
  font-weight:800;
  color:#F2F7FC;
  line-height:1.3;
  margin-bottom:14px;
}
.cta-sub{
  color:#A9B9D0;
  font-size:17px;
  line-height:1.8;
  margin-bottom:30px;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

/* ---------- FAQ ---------- */
.faq-section{
  background:#0C1322;
}
.faq-wrap{
  max-width:820px;
  margin:0 auto;
}
.accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-width:0;
  --bs-accordion-btn-bg:transparent;
}
.accordion-item{
  background:rgba(15,24,41,.6);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px !important;
  margin-bottom:16px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
  transition:border-color .3s;
}
.accordion-item:has(.accordion-button:not(.collapsed)){
  border-color:rgba(0,226,139,.2);
}
.accordion-button{
  background:transparent;
  color:#DDE7F2;
  font-weight:700;
  font-size:16px;
  padding:20px 24px;
  box-shadow:none;
  border-radius:16px !important;
}
.accordion-button:not(.collapsed){
  background:rgba(0,226,139,.05);
  color:var(--primary);
  box-shadow:none;
}
.accordion-button::after{
  filter:brightness(0) saturate(100%) invert(73%) sepia(79%) saturate(482%) hue-rotate(128deg) brightness(92%) contrast(99%);
}
.accordion-button:not(.collapsed)::after{
  filter:brightness(0) saturate(100%) invert(83%) sepia(26%) saturate(1200%) hue-rotate(123deg) brightness(105%) contrast(98%);
}
.accordion-body{
  padding:8px 24px 24px;
  color:var(--text-sub);
  font-size:15px;
  line-height:1.85;
  border-top:1px solid rgba(255,255,255,.03);
}
.accordion-body p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.site-footer{
  background:#07101C;
  border-top:1px solid rgba(56,217,242,.14);
  padding-top:64px;
  color:#A9BAD1;
}
.footer-brands{
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.footer-monicker{
  font-size:24px;
  font-weight:800;
  color:#EAF2FA;
  display:block;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer-monicker i{
  color:var(--primary);
  font-size:22px;
}
.footer-slogan{
  font-size:14px;
  color:#7E91AA;
  margin-top:8px;
  max-width:600px;
}
.footer-brand-badge{
  text-align:left;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1.2fr;
  gap:20px;
  padding:40px 0 26px;
}
.footer-col-title{
  font-size:17px;
  font-weight:700;
  color:#DEE8F3;
  margin-bottom:18px;
  position:relative;
  padding-bottom:12px;
}
.footer-col-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:30px;
  height:2px;
  background:var(--primary);
  border-radius:2px;
  box-shadow:0 0 10px var(--primary-glow);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-links a{
  color:#91A4BC;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .3s,transform .3s;
}
.footer-links a::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--primary);
  opacity:.5;
}
.footer-links a:hover{
  color:var(--primary);
  transform:translateX(3px);
}
.footer-info{
  font-size:14px;
  color:#98A9C0;
}
.footer-info div{
  display:flex;
  align-items:center;
  gap:9px;
}
.footer-info i{
  color:var(--cyan);
}
.footer-copyright{
  border-top:1px solid rgba(255,255,255,.05);
  padding:25px 0 20px;
  font-size:13px;
  color:#70869F;
  text-align:center;
  background:#060E18;
}
.footer-copyright a{
  color:#A3B8CF;
  font-family:var(--font-num);
  transition:color .3s;
}
.footer-copyright a:hover{
  color:var(--primary);
}

/* ---------- Responsive ---------- */
@media (max-width:1199.98px){
  .channel-card:nth-child(2),.channel-card:nth-child(3){
    transform:none;
  }
  .channel-card:nth-child(2):hover,.channel-card:nth-child(3):hover{
    transform:translateY(-4px);
  }
}
@media (max-width:991.98px){
  :root{--section-space:70px}
  .navbar-collapse{
    background:rgba(7,11,22,.94);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:18px;
    margin-top:12px;
    max-height:calc(100vh - 96px);
    overflow:auto;
  }
  .navbar-nav{gap:4px}
  .navbar-nav .nav-link{
    padding:11px 12px;
    font-size:15px;
  }
  .navbar-nav .nav-link.active::after{
    left:12px;
    right:auto;
    width:16px;
  }
  .dropdown-menu{
    background:rgba(15,25,42,.68);
    margin-left:12px;
    max-width:460px;
  }
  .nav-cta{
    margin-left:0;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.05);
  }
  .brand-primary{font-size:19px}
  .brand-ext{font-size:10px;letter-spacing:.24em}
  .hero-right-wrap{
    margin-top:44px;
  }
  .live-panel{
    max-width:560px;
  }
  .status-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .channel-card,.channel-card:hover{
    transform:none;
  }
  .media-panel img{
    height:250px;
  }
  .guarantee-content{
    margin-top:28px;
  }
  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .section-title{font-size:28px}
}
@media (max-width:767px){
  :root{--section-space:52px}
  .topbar-live,.topbar-support{display:none}
  .topbar-links{gap:12px}
  .topbar-links a{font-size:12px}
  .category-hero{
    min-height:auto;
    padding:66px 0 38px;
  }
  .hero-title{
    font-size:36px;
  }
  .hero-sub{
    font-size:16px;
  }
  .hero-actions .btn-neon,.hero-actions .btn-ghost{
    width:100%;
    text-align:center;
  }
  .screen-frame img{
    height:170px;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .step-card{
    padding:26px 20px;
  }
  .footer-grid{
    grid-template-columns:1fr;
  }
  .footer-brand-badge{
    text-align:left;
    margin-top:14px;
  }
  .cta-banner{
    padding:48px 16px;
    border-radius:18px;
  }
  .cta-actions .btn-neon,.cta-actions .btn-ghost{
    width:100%;
  }
  .status-grid{
    grid-template-columns:1fr;
  }
  .status-cell{
    padding:12px 0;
  }
  .status-num{font-size:28px}
}

/* roulang page: article */
:root {
            --bg-dark: #060A12;
            --bg-deep: #0A0F1F;
            --bg-panel: #0E1628;
            --surface: rgba(17, 28, 47, .74);
            --surface-light: rgba(26, 42, 68, .56);
            --border-glow: rgba(56, 217, 242, .14);
            --border-soft: rgba(255, 255, 255, .08);
            --border-mid: rgba(255, 255, 255, .13);
            --green: #00E28B;
            --green-2: #3CE6A6;
            --cyan: #38D9F2;
            --yellow: #F6C85F;
            --text-main: #EDF2F9;
            --text-sub: #8A9AB5;
            --text-dim: #62728E;
            --font-main: PingFang SC, HarmonicOS Sans, Microsoft YaHei, Noto Sans CJK SC, system-ui, -apple-system, sans-serif;
            --shadow-card: 0 24px 50px rgba(0, 0, 0, .30), 0 1px 6px rgba(255, 255, 255, .03) inset;
            --radius-card: 18px;
            --radius-btn: 11px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            background:
                radial-gradient(circle at 12% 6%, rgba(56, 217, 242, .10), transparent 34rem),
                radial-gradient(circle at 88% 18%, rgba(0, 226, 139, .07), transparent 30rem),
                linear-gradient(180deg, #0A0F1F 0%, #080D18 100%);
            color: var(--text-main);
            font-size: 16px;
            line-height: 1.7;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        ::selection {
            background: rgba(0, 226, 139, .28);
            color: #fff;
        }

        a {
            color: var(--text-sub);
            text-decoration: none;
            transition: color .25s, border-color .25s, transform .25s, background .25s;
        }

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

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

        .container {
            max-width: 1280px;
        }

        .btn-neon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 0;
            background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 62%, #28D2A4 100%);
            color: #04120B !important;
            font-weight: 800;
            padding: 12px 28px;
            border-radius: var(--radius-btn);
            box-shadow: 0 0 0 1px rgba(0, 226, 139, .35), 0 6px 24px rgba(0, 226, 139, .20);
            transition: transform .25s, box-shadow .25s, filter .25s;
            letter-spacing: .02em;
        }

        .btn-neon:hover {
            color: #04120B !important;
            transform: translateY(-2px);
            box-shadow: 0 0 0 1px rgba(0, 226, 139, .5), 0 12px 34px rgba(0, 226, 139, .34);
        }

        .btn-neon:active {
            transform: scale(.97);
            filter: brightness(.96);
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--cyan);
            outline-offset: 3px;
        }

        /* ===== Header ===== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1080;
            background: rgba(6, 10, 18, .82);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--border-glow);
            box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
        }

        .navbar {
            min-height: 76px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .logo-area:hover {
            color: var(--text-main);
        }

        .logo-mark {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 11px;
            background: linear-gradient(135deg, rgba(0, 226, 139, .2), rgba(56, 217, 242, .1));
            border: 1px solid rgba(56, 217, 242, .18);
            color: var(--green);
            flex-shrink: 0;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .brand-primary {
            font-size: 21px;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: 1px;
        }

        .brand-ext {
            font-size: 11px;
            color: var(--text-sub);
            letter-spacing: 3px;
            font-weight: 500;
        }

        .navbar-nav {
            gap: 4px;
        }

        .nav-link {
            color: var(--text-sub) !important;
            font-weight: 600;
            padding: 10px 14px !important;
            position: relative;
            border-radius: 9px;
            transition: color .25s, background .25s;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--text-main) !important;
            background: rgba(255, 255, 255, .035);
        }

        .nav-link.active::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 2px;
            height: 2px;
            background: var(--green);
            box-shadow: 0 0 10px rgba(0, 226, 139, .75);
            border-radius: 10px;
        }

        .dropdown-menu {
            background: #0C1527;
            border: 1px solid var(--border-mid);
            border-radius: 14px;
            padding: 10px;
            min-width: 210px;
            box-shadow: 0 24px 46px rgba(0, 0, 0, .42);
        }

        .dropdown-menu .dropdown-item {
            border-radius: 8px;
            color: var(--text-sub);
            padding: 10px 14px;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dropdown-menu .dropdown-item:hover {
            background: rgba(56, 217, 242, .10);
            color: var(--cyan);
        }

        .nav-cta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 10px;
        }

        .btn-neon.btn-sm {
            padding: 9px 17px;
            font-size: 13px;
        }

        .navbar-toggler {
            border-color: rgba(255, 255, 255, .14);
            padding: 6px 8px;
        }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 3px rgba(56, 217, 242, .14);
        }

        .navbar-toggler-icon {
            filter: invert(1);
        }

        /* ===== Article top decorative strip ===== */
        .article-topdeck {
            position: relative;
            padding: 54px 0 52px;
            overflow: hidden;
            background: #070B15;
            border-bottom: 1px solid rgba(56, 217, 242, .10);
        }

        .article-deck-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: .45;
            transform: scale(1.05);
        }

        .article-deck-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(7, 11, 21, .94) 0%, rgba(7, 11, 21, .70) 58%, rgba(7, 11, 21, .46) 100%);
        }

        .article-topdeck-inner {
            position: relative;
            z-index: 2;
        }

        .breadcrumb-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 14px;
            color: var(--text-dim);
            letter-spacing: .02em;
        }

        .breadcrumb-line a {
            color: var(--text-sub);
        }

        .breadcrumb-line a:hover {
            color: var(--cyan);
        }

        .breadcrumb-line .divider {
            color: var(--text-dim);
            opacity: .6;
        }

        .deck-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 18px;
            padding: 8px 16px;
            background: rgba(0, 226, 139, .10);
            border: 1px solid rgba(0, 226, 139, .22);
            border-radius: 40px;
            color: var(--green);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: .04em;
        }

        .deck-badge i {
            color: var(--yellow);
        }

        /* ===== Article reading area ===== */
        .article-reading {
            padding: 34px 0 80px;
            background: transparent;
        }

        .article-col {
            max-width: 824px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        .cms-article {
            background: linear-gradient(180deg, rgba(17, 28, 47, .80), rgba(9, 15, 28, .82));
            border: 1px solid var(--border-mid);
            border-radius: 20px;
            box-shadow: var(--shadow-card);
            backdrop-filter: blur(14px);
            padding: clamp(28px, 5vw, 64px);
            margin-top: -12px;
            position: relative;
            overflow: hidden;
        }

        .cms-article::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 226, 139, .7), rgba(56, 217, 242, .6), transparent);
        }

        .article-head {
            padding: 12px 2px 34px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            margin-bottom: 34px;
        }

        .article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .article-tags .tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(56, 217, 242, .09);
            border: 1px solid rgba(56, 217, 242, .16);
            color: var(--cyan);
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 30px;
            letter-spacing: .05em;
        }

        .article-head h1 {
            font-size: clamp(32px, 3.5vw, 48px);
            line-height: 1.28;
            color: var(--text-main);
            font-weight: 800;
            margin: 0 0 22px;
            letter-spacing: -0.01em;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px 28px;
            align-items: center;
            color: var(--text-sub);
            font-size: 14px;
        }

        .article-meta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .article-meta i {
            color: var(--green);
            font-size: 15px;
        }

        .article-meta .meta-source {
            color: var(--text-dim);
        }

        /* ===== Article content typography ===== */
        .article-body {
            color: #C4D0E0;
            font-size: 16.5px;
        }

        .article-body > *:last-child {
            margin-bottom: 0;
        }

        .article-body p {
            margin: 0 0 26px;
            line-height: 1.85;
            color: #C4D0E0;
        }

        .article-body h2 {
            font-size: 28px;
            color: var(--text-main);
            font-weight: 800;
            line-height: 1.4;
            margin: 52px 0 22px;
            padding-left: 16px;
            border-left: 4px solid var(--green);
            background: linear-gradient(270deg, transparent, rgba(0, 226, 139, .06));
            border-radius: 0 10px 10px 0;
        }

        .article-body h3 {
            font-size: 22px;
            color: var(--text-main);
            font-weight: 750;
            margin: 36px 0 14px;
            line-height: 1.5;
            display: flex;
            align-items: center;
        }

        .article-body h3::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--cyan);
            display: inline-block;
            margin-right: 12px;
            border-radius: 4px;
        }

        .article-body ul,
        .article-body ol {
            padding-left: 24px;
            margin-bottom: 26px;
        }

        .article-body li {
            margin-bottom: 10px;
            line-height: 1.8;
        }

        .article-body a {
            color: var(--cyan);
            border-bottom: 1px solid rgba(56, 217, 242, .34);
            padding-bottom: 1px;
        }

        .article-body a:hover {
            color: var(--green);
            border-color: var(--green);
        }

        .article-body blockquote {
            position: relative;
            margin: 36px 0;
            padding: 22px 28px;
            border-left: 3px solid var(--cyan);
            background: linear-gradient(90deg, rgba(56, 217, 242, .10), rgba(56, 217, 242, .02));
            border-radius: 0 14px 14px 0;
            font-weight: 500;
            color: #D8E3F3;
        }

        .article-body blockquote p {
            color: #D8E3F3;
            margin-bottom: 12px;
        }

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

        .article-body blockquote::before {
            content: "\201C";
            position: absolute;
            top: 2px;
            left: 10px;
            font-size: 46px;
            color: rgba(56, 217, 242, .5);
            font-family: Georgia, serif;
        }

        .article-body figure {
            margin: 34px 0;
        }

        .article-body img {
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .10);
            margin: 8px 0 12px;
        }

        .article-body figcaption {
            color: var(--text-dim);
            font-size: 13px;
            text-align: center;
            margin-top: 6px;
        }

        .article-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            font-size: 15px;
            color: var(--text-sub);
        }

        .article-body table th {
            background: rgba(0, 226, 139, .08);
            color: var(--text-main);
            border-bottom: 1px solid var(--border-mid);
            padding: 12px 14px;
            text-align: left;
            font-weight: 700;
        }

        .article-body table td {
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            padding: 11px 14px;
        }

        .article-body hr {
            border: 0;
            height: 1px;
            margin: 44px 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
        }

        .article-sheet-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding-top: 34px;
            margin-top: 48px;
            border-top: 1px solid rgba(255, 255, 255, .09);
        }

        .sheet-tag-group {
            display: flex;
            gap: 8px;
        }

        .sheet-tag {
            padding: 5px 14px;
            border-radius: 30px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .10);
            color: var(--text-sub);
            font-size: 13px;
        }

        .back-home-btn {
            color: var(--cyan);
            border: 1px solid rgba(56, 217, 242, .32);
            padding: 8px 18px;
            border-radius: 30px;
            font-size: 14px;
            transition: all .25s;
        }

        .back-home-btn:hover {
            background: rgba(56, 217, 242, .12);
            color: var(--cyan);
            border-color: var(--cyan);
        }

        /* ===== Empty state ===== */
        .article-empty {
            padding: 120px 24px 180px;
            text-align: center;
            background: linear-gradient(180deg, rgba(17, 28, 47, .70), rgba(9, 15, 28, .80));
            border: 1px solid var(--border-mid);
            border-radius: 20px;
            margin-top: -12px;
            backdrop-filter: blur(14px);
        }

        .empty-symbol {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 84px;
            height: 84px;
            border-radius: 50%;
            background: rgba(56, 217, 242, .09);
            border: 1px solid rgba(56, 217, 242, .22);
            color: var(--cyan);
            margin-bottom: 24px;
        }

        .article-empty h2 {
            font-size: 28px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 18px;
        }

        .article-empty .btn-neon {
            margin-top: 10px;
        }

        /* ===== Related / guide cards ===== */
        .related-section {
            padding: 60px 0 76px;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .section-title-line {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 34px;
        }

        .section-eyebrow {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--green);
            letter-spacing: .15em;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .section-title-line h2 {
            font-size: clamp(24px, 2.5vw, 32px);
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
        }

        .more-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--cyan);
            background: rgba(56, 217, 242, .07);
            padding: 8px 16px;
            border-radius: 28px;
            border: 1px solid rgba(56, 217, 242, .16);
        }

        .related-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--surface);
            border: 1px solid var(--border-soft);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
            transition: transform .3s, border-color .3s, box-shadow .3s;
        }

        .related-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 226, 139, .4);
            box-shadow: 0 24px 48px rgba(0, 0, 0, .30), 0 0 0 1px rgba(0, 226, 139, .12);
        }

        .related-thumb {
            position: relative;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: #0A101E;
        }

        .related-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s;
        }

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

        .related-thumb::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 60%, rgba(7, 11, 21, .40));
        }

        .related-body {
            padding: 20px 22px 22px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .related-chip {
            display: inline-flex;
            width: fit-content;
            align-items: center;
            gap: 5px;
            background: rgba(0, 226, 139, .10);
            color: var(--green);
            border: 1px solid rgba(0, 226, 139, .18);
            border-radius: 24px;
            font-size: 12px;
            padding: 4px 11px;
            margin-bottom: 12px;
        }

        .related-body h3 {
            font-size: 17px;
            line-height: 1.6;
            color: var(--text-main);
            font-weight: 700;
            margin-bottom: 8px;
        }

        .related-body p {
            color: var(--text-sub);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 14px;
        }

        .related-go {
            margin-top: auto;
            display: flex;
            align-items: center;
            color: var(--cyan);
            font-size: 13px;
            font-weight: 600;
        }

        .related-go i {
            margin-left: 5px;
            transition: transform .25s;
        }

        .related-card:hover .related-go i {
            transform: translateX(5px);
        }

        /* ===== CTA ===== */
        .site-cta {
            position: relative;
            padding: 70px 0 80px;
            overflow: hidden;
            background: #04101A;
        }

        .cta-extra-image {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center 70%;
            opacity: .24;
        }

        .site-cta::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, rgba(6, 10, 18, .98) 10%, rgba(6, 14, 28, .85) 52%, rgba(0, 226, 139, .22) 130%);
        }

        .site-cta .container {
            position: relative;
            z-index: 2;
        }

        .cta-content {
            max-width: 840px;
            margin: 0 auto;
            text-align: center;
        }

        .cta-content h2 {
            font-size: clamp(26px, 4vw, 40px);
            color: var(--text-main);
            font-weight: 800;
            letter-spacing: .01em;
            margin: 0 0 18px;
        }

        .cta-content h2 span {
            color: var(--green);
        }

        .cta-content p {
            color: var(--text-sub);
            font-size: 16px;
            line-height: 1.75;
            max-width: 640px;
            margin: 0 auto 30px;
        }

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

        .btn-glass {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(56, 217, 242, .07);
            border: 1px solid rgba(56, 217, 242, .32);
            color: var(--cyan) !important;
            padding: 12px 24px;
            border-radius: var(--radius-btn);
            transition: all .25s;
        }

        .btn-glass:hover {
            background: rgba(56, 217, 242, .16);
            box-shadow: 0 10px 28px rgba(56, 217, 242, .14);
            transform: translateY(-2px);
            color: var(--cyan) !important;
        }

        /* ===== Footer ===== */
        .site-footer {
            background: #05070D;
            border-top: 1px solid rgba(56, 217, 242, .12);
            padding: 58px 0 0;
        }

        .footer-brands {
            padding-bottom: 34px;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            margin-bottom: 36px;
        }

        .footer-monicker {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: .03em;
        }

        .footer-monicker i {
            color: var(--green);
        }

        .footer-slogan {
            color: var(--text-sub);
            font-size: 14px;
            margin-top: 8px;
            line-height: 1.7;
        }

        .footer-brand-badge {
            text-align: right;
        }

        .footer-brand-badge .status-num {
            display: inline-flex;
            align-items: baseline;
            color: var(--text-main);
            font-size: 32px;
            font-weight: 800;
            gap: 4px;
        }

        .footer-brand-badge .status-num i {
            color: var(--green);
            font-size: 20px;
        }

        .footer-brand-badge .status-num small {
            font-size: 15px;
            color: var(--text-sub);
            font-weight: 400;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 38px;
            padding-bottom: 42px;
        }

        .footer-col-title {
            color: var(--text-main);
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 16px;
            letter-spacing: .08em;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer-links a {
            color: var(--text-sub);
            font-size: 14px;
            transition: color .25s, padding-left .25s;
        }

        .footer-links a:hover {
            color: var(--cyan);
            padding-left: 5px;
        }

        .footer-info {
            color: var(--text-sub);
            font-size: 14px;
        }

        .footer-info i {
            color: var(--cyan);
            margin-right: 6px;
        }

        .footer-copyright {
            border-top: 1px solid rgba(255, 255, 255, .06);
            padding: 22px 0 26px;
            text-align: center;
            color: var(--text-dim);
            font-size: 13px;
        }

        .footer-copyright a {
            color: var(--text-sub);
        }

        .footer-copyright a:hover {
            color: var(--green);
        }

        /* ===== Responsive ===== */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: rgba(8, 13, 24, .97);
                border: 1px solid rgba(255, 255, 255, .09);
                border-radius: 16px;
                margin-top: 10px;
                padding: 12px;
            }

            .navbar-collapse .nav-link.active::after {
                display: none;
            }

            .navbar-collapse .nav-item {
                border-radius: 10px;
            }

            .navbar-collapse .dropdown-menu {
                background: transparent;
                border: 0;
                box-shadow: none;
                padding: 4px 0 2px 12px;
            }

            .nav-cta {
                margin-left: 0;
                margin-top: 12px;
                padding-top: 12px;
                border-top: 1px solid rgba(255, 255, 255, .08);
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 28px;
            }

            .cms-article {
                padding: 28px;
            }
        }

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

            .article-topdeck {
                padding: 40px 0 44px;
            }

            .cms-article {
                padding: 22px 18px;
                border-radius: 16px;
            }

            .article-head {
                padding: 4px 2px 26px;
                margin-bottom: 24px;
            }

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

            .article-meta {
                gap: 10px 18px;
            }

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

            .article-body h2 {
                font-size: 24px;
            }

            .article-body h3 {
                font-size: 19px;
            }

            .section-title-line {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 24px;
            }

            .related-section {
                padding: 42px 0 54px;
            }

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

            .site-cta {
                padding: 50px 0;
            }

            .btn-neon,
            .btn-glass {
                width: 100%;
            }

            .footer-brand-badge {
                text-align: left;
                margin-top: 6px;
            }

            .footer-brand-badge .status-num {
                font-size: 26px;
            }
        }

        @media (max-width: 575.98px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 22px;
            }

            .footer-brands {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 12px;
            }

            .footer-monicker {
                font-size: 19px;
            }

            .article-empty {
                padding: 80px 18px 120px;
            }

            .article-empty h2 {
                font-size: 24px;
            }

            .deck-badge {
                font-size: 12px;
            }
        }

/* roulang page: category2 */
:root{
  --c-green:#00E28B;
  --c-cyan:#38D9F2;
  --c-yellow:#F6C85F;
  --c-bg:#0A0F1F;
  --c-bg2:#0E1628;
  --c-card:rgba(17,28,47,0.75);
  --c-card-strong:rgba(19,34,58,0.92);
  --c-line:rgba(255,255,255,0.09);
  --c-white:#EDF2F9;
  --c-sub:#8A9AB5;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-card:0 20px 42px rgba(0,0,0,0.3), 0 2px 10px rgba(255,255,255,0.025);
  --shadow-green:0 8px 28px rgba(0,226,139,0.24);
  --space-lg:96px;
  --space-md:72px;
  --space-sm:52px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","HarmonicOS Sans","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
  background:var(--c-bg);
  color:var(--c-white);
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 70% 40% at 85% 10%,rgba(47,220,176,0.10),transparent 60%),
    radial-gradient(ellipse 50% 30% at 10% 60%,rgba(56,217,242,0.06),transparent 55%),
    var(--c-bg);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(120deg,rgba(255,255,255,0.018) 0,transparent 20%,transparent 82%,rgba(0,226,139,0.025) 100%);
}
img{max-width:100%;display:block}
a{color:var(--c-cyan);text-decoration:none;transition:all .2s ease}
a:hover{color:var(--c-green)}
.container{max-width:1280px}
.main-padder{padding:calc(var(--space-lg) - 16px) 0 var(--space-lg)}

/* ===== 顶部信息条 ===== */
.site-header{position:relative;width:100%;z-index:1050}
.header-topbar{
  background:rgba(6,11,24,.92);
  border-bottom:1px solid rgba(55,217,242,0.3);
  height:36px;
  font-size:13px;
  color:#B7C3D6;
}
.header-topbar .container{height:100%;display:flex;align-items:center;justify-content:space-between}
.header-topbar .topbar-domain{color:#C7D3E5;font-weight:600}
.header-topbar .topbar-menu{display:flex;gap:18px;align-items:center}
.header-topbar .topbar-menu a{
  color:#AFC0D7;
  font-size:13px;
  margin-left:4px;
  padding:2px 0;
  border-bottom:1px solid transparent;
}
.header-topbar .topbar-menu a:hover{color:var(--c-green);border-bottom-color:var(--c-green)}
.header-topbar .ok-pill{
  color:var(--c-green);
  display:flex;align-items:center;
  gap:5px;
}
.ok-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-green);box-shadow:0 0 8px var(--c-green)}

/* ===== 主导航 ===== */
.header-nav-wrap{
  background:rgba(10,15,31,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .3s,box-shadow .3s;
}
.site-header.is-sticky .header-nav-wrap{
  background:rgba(8,12,27,0.94);
  box-shadow:0 8px 26px rgba(0,0,0,0.45);
}
.navbar{padding:0;min-height:82px}
.logo-area{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--c-white);
  font-weight:700;
}
.logo-area:hover{color:#fff}
.logo-mark{
  width:38px;height:38px;
  flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,226,139,.22),rgba(56,217,242,.12));
  border:1px solid rgba(0,226,139,.35);
  color:var(--c-green);
  border-radius:10px;
  box-shadow:0 0 18px rgba(0,226,139,.12);
}
.logo-text{direction:ltr;display:flex;flex-direction:column;line-height:1.1}
.brand-primary{font-size:19px;font-weight:800;letter-spacing:.02em}
.brand-ext{color:#9FB1CE;font-size:12px;font-weight:500;letter-spacing:.2em;margin-top:2px}

.navbar .navbar-nav{gap:4px}
.navbar-nav .nav-link{
  color:#D4DEEE;
  font-size:16px;
  font-weight:600;
  padding:9px 16px !important;
  border-radius:var(--radius-sm);
  border-bottom:2px solid transparent;
  position:relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{color:#fff}
.navbar-nav .nav-link.active{
  color:#fff;
}
.navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:-1px;
  height:2px;
  border-radius:2px;
  background:var(--c-green);
  box-shadow:0 0 10px rgba(0,226,139,.8);
}
.dropdown-menu{
  --bs-dropdown-bg:rgba(13,22,41,.96);
  --bs-dropdown-link-color:#D3DFF0;
  --bs-dropdown-link-hover-color:#fff;
  --bs-dropdown-link-hover-bg:rgba(0,226,139,.1);
  --bs-dropdown-link-active-color:#fff;
  --bs-dropdown-link-active-bg:rgba(0,226,139,.16);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  min-width:220px;
  padding:8px;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card);
}
.dropdown-item{
  font-size:15px;
  border-radius:8px;
  padding:9px 14px;
  display:flex;align-items:center;gap:9px;
}
.nav-cta{margin-left:8px}
.btn-neon{
  background:linear-gradient(135deg,#00E28B,#23f7a9);
  color:#071018;
  font-weight:700;
  border:0;
  border-radius:11px;
  padding:10px 24px;
  box-shadow:0 0 22px rgba(0,226,139,.2),inset 0 1px rgba(255,255,255,.35);
  transition:transform .2s,box-shadow .3s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;
}
.btn-neon:hover{color:#051017;transform:translateY(-2px);box-shadow:0 8px 34px rgba(0,226,139,.35)}
.btn-neon:active{transform:scale(.98)}
.btn-ghost{
  background:rgba(255,255,255,.04);
  color:#DAE7F6;
  border:1px solid rgba(56,217,242,.4);
  border-radius:11px;
  padding:10px 22px;
  font-weight:600;
  transition:all .25s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;
}
.btn-ghost:hover{background:rgba(56,217,242,.12);color:#BFF7FF;box-shadow:0 0 18px rgba(56,217,242,.15)}

.navbar-toggler{
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  padding:8px 12px;
  background:rgba(255,255,255,.03);
}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(0,226,139,.25)}
.navbar-toggler-icon{
  width:1.1em;height:1.1em;
  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(237,242,249,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== 通用玻璃卡片 ===== */
.glass-card{
  background:var(--c-card);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.14);
  border-left:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  position:relative;
}
.glass-card::before{
  content:"";
  position:absolute;
  width:72px;height:3px;
  top:-1px;left:22px;
  background:linear-gradient(90deg,var(--c-green),transparent);
  border-radius:0 0 8px 8px;
}

.grid-badge{
  display:inline-block;
  background:rgba(0,226,139,.12);
  color:#59FFBA;
  border:1px solid rgba(0,226,139,.35);
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  padding:3px 12px;
  margin:0 8px 8px 0;
  white-space:nowrap;
}

.grid-badge-cyan{
  background:rgba(56,217,242,.12);
  color:#AAECFF;
  border-color:rgba(56,217,242,.35);
}
.grid-badge-yellow{
  background:rgba(246,200,95,.12);
  color:#FFE8B0;
  border-color:rgba(246,200,95,.35);
}

/* ===== Hero / 分类首屏 ===== */
.official-hero{
  position:relative;
  padding:72px 0 68px;
  background-image:
    linear-gradient(100deg,rgba(7,12,24,.98) 0%,rgba(8,14,28,.86) 40%,rgba(10,16,32,.55) 73%,rgba(13,22,39,.75) 100%),
    url('/assets/images/backpic/back-2.webp');
  background-size:cover;
  background-position:center 24%;
  border-bottom:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.official-hero::after{
  content:"";
  position:absolute;
  height:180px;
  bottom:-70px;
  left:-6%;right:-6%;
  background:radial-gradient(ellipse 52% 100% at 30% 50%,rgba(0,226,139,.14),transparent 70%),
    radial-gradient(ellipse 48% 80% at 70% 55%,rgba(56,217,242,.10),transparent 70%);
  filter:blur(22px);
  z-index:0;
}

.breadcrumb-zone{
  margin-bottom:48px;
}
.breadcrumb-links{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  color:#A0B2CC;font-size:14px;
}
.breadcrumb-links a{color:#A8BAD3}
.breadcrumb-links a:hover{color:var(--c-green)}
.breadcrumb-links .current{color:var(--c-green)}
.breadcrumb-links .sep{opacity:.45}

.hero-system{
  display:grid;grid-template-columns:minmax(0,1fr) 410px;
  gap:40px;
  position:relative;z-index:2;
  align-items:center;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(0,226,139,.1);
  border:1px solid rgba(0,226,139,.3);
  border-radius:40px;
  color:#71FFC2;
  padding:5px 16px;
  font-size:14px;
  font-weight:600;
}
.hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-green);box-shadow:0 0 8px var(--c-green)}
.category-h1{
  font-size:46px;
  font-weight:800;
  line-height:1.2;
  margin:18px 0 16px;
  color:#F2F7FF;
}
.category-h1 em{
  font-style:normal;
  color:var(--c-green);
  text-shadow:0 0 28px rgba(0,226,139,.3);
}
.hero-lead{
  font-size:17px;
  color:#C8D5EA;
  max-width:600px;
  margin-bottom:26px;
  line-height:1.8;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px;color:#9DB1CF;font-size:14px}
.hero-trust span{display:flex;align-items:center;gap:6px}
.hero-trust span svg{color:var(--c-green)}

/* 右侧大厅状态卡 */
.hero-console{
  padding:0;
  overflow:hidden;
}
.console-head{
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.02);
}
.console-head h3{font-size:18px;margin:0;font-weight:700}
.live-pulse{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--c-green)}
.live-pulse:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-green);animation:beat 1.5s infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
.console-body{padding:8px 14px 14px}
.console-room{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 8px;
  border-bottom:1px dashed rgba(255,255,255,.06);
  gap:10px;
}
.console-room:last-child{border-bottom:0}
.room-title span{color:var(--c-green);font-size:14px;font-weight:600}
.room-title strong{display:block;font-size:15px;color:#E5EDFB;line-height:1.35}
.room-meta{text-align:right;font-size:12px;color:#94A9C5;display:flex;flex-direction:column;gap:3px}
.room-online{color:#7EE6B7;font-weight:700;font-size:13px}
.room-tag{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:1px 5px}
.console-footer{
  padding:13px 18px;
  background:rgba(0,226,139,.07);
  border-top:1px solid rgba(0,226,139,.3);
  font-size:13px;
  color:#C7DFF0;
  display:flex;align-items:center;justify-content:space-between;
}
.console-footer strong{color:var(--c-yellow)}

/* ===== 数据状态带 ===== */
.state-strip{
  background:linear-gradient(115deg,#091426,#0D1A31);
  border-bottom:1px solid rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.04);
}
.state-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:30px 0;
}
.state-item{
  background:rgba(255,255,255,.02);
  border-left:2px solid rgba(0,226,139,.55);
  border-radius:5px 12px 12px 5px;
  padding:16px 16px 12px;
  position:relative;
}
.state-num{font-size:34px;font-weight:800;letter-spacing:-.5px;font-family:"DIN Alternate","Roboto Condensed",sans-serif;color:#fff;line-height:1}
.state-num small{font-size:16px;color:var(--c-green);margin-left:4px;font-weight:700}
.state-desc{font-size:13px;color:#8BA0BD;margin-top:8px}
.state-live::after{
  content:attr(data-live);
  position:absolute;top:10px;right:12px;
  background:#F6C85F;
  color:#3F2000;
  font-size:11px;font-weight:800;
  border-radius:9px;
  padding:0 7px;
}

/* ===== 区段标题 ===== */
.section-box-title{text-align:left;margin:0 0 38px}
.section-eyebrow{
  color:var(--c-green);
  font-size:14px;font-weight:600;
  letter-spacing:.04em;
  display:flex;align-items:center;gap:10px;
}
.section-eyebrow .line{width:26px;height:1px;background:linear-gradient(90deg,var(--c-green),transparent)}
.h2-style{
  font-size:34px;font-weight:800;
  line-height:1.22;
  margin:8px 0 10px;
  color:#F3F8FF;
}
.section-subtitle{color:var(--c-sub);font-size:15px;max-width:640px}
.lead-col-right{width:fit-content;margin-left:auto}

.section-public{
  position:relative;
  padding:76px 0;
}
.section-public.mid-dark{background:rgba(14,22,40,.6)}
.section-public.rise-up::before{
  content:"";
  position:absolute;
  top:-80px;right:-20px;
  width:390px;height:330px;
  background:radial-gradient(circle,rgba(0,226,139,.09),transparent 68%);
}

/* ===== 双栏内容说明 ===== */
.split-console{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:center;
}
.visual-thumb{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#131E36;
  position:relative;
  min-height:330px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--shadow-card);
}
.visual-thumb img{
  width:100%;height:100%;object-fit:cover;
  border-radius:inherit;
}
.visual-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(210deg,rgba(7,13,25,.3) 10%,transparent 56%,rgba(0,16,34,.8));
  border-radius:inherit;
}
.visual-bottom-note{
  position:absolute;bottom:16px;left:18px;
  z-index:2;
  color:#fff;
}
.visual-bottom-note strong{font-size:20px;display:block;margin-bottom:2px}
.visual-bottom-note span{font-size:13px;color:#BFE8DC;opacity:.85}

.console-text-area h2{font-size:30px;font-weight:800;margin-bottom:14px}
.console-text-area p{color:#B4C3DA;font-size:15px}
.console-feature-list{margin:0;padding:0;list-style:none;display:grid;gap:16px;margin-top:20px}
.console-feature-list li{
  display:flex;gap:14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-left:2px solid rgba(0,226,139,.6);
  border-radius:12px;
  padding:15px 16px;
}
.console-feature-list li .list-ic{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:rgba(56,217,242,.11);color:var(--c-cyan);display:flex;align-items:center;justify-content:center;border:1px solid rgba(56,217,242,.3)}
.console-feature-list b{color:#E7EFF9;display:block;font-weight:700;margin-bottom:3px}
.console-feature-list p{font-size:14px;color:#94A9C5;margin:0;line-height:1.6}

/* ===== 玩法矩阵卡片 ===== */
.mode-card-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
}
.mode-card{
  grid-column:span 6;
  display:grid;
  grid-template-columns:210px 1fr;
  border-radius:var(--radius-lg);
  background:rgba(18,28,48,.86);
  backdrop-filter:blur(8px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.065);
  border-left:3px solid rgba(0,226,139,.75);
}
.mode-card:nth-child(3){
  grid-column:span 7;
}
.mode-card:nth-child(4){
  grid-column:span 5;
  border-left-color:var(--c-cyan);
}
.mode-cover{
  min-height:230px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.mode-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,16,30,.15),rgba(9,15,30,.62) 80%)}
.mode-card:nth-child(2) .mode-cover::after{background:linear-gradient(280deg,rgba(10,16,30,.18),rgba(9,15,30,.65))}
.mode-summary{padding:24px 22px;display:flex;flex-direction:column}
.mode-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mode-tags span{
  font-size:12px;
  color:#AFE6FF;
  border:1px solid rgba(56,217,242,.25);
  background:rgba(56,217,242,.08);
  border-radius:6px;
  padding:1px 8px;
}
.mode-summary h3{font-size:22px;font-weight:800;margin-bottom:8px;color:#F5FAFF}
.mode-summary p{font-size:15px;color:#A9BBD4;margin-bottom:15px;line-height:1.66;flex:1}
.mode-link{
  font-weight:700;font-size:14px;
  color:var(--c-green);
  display:flex;align-items:center;gap:6px;
}
.mode-card:nth-child(4) .mode-link{color:var(--c-cyan)}
.mode-link:hover{color:#C7FFE7}

/* 小型统计对比 */
.data-compare{
  display:grid;
  grid-template-columns:260px 1fr 1fr;
  gap:22px;
  margin-top:34px;
}
.compare-main{
  background:linear-gradient(135deg,rgba(0,226,139,.15),rgba(56,217,242,.08));
  border:1px solid rgba(0,226,139,.3);
  padding:22px 24px;
}
.compare-box{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:22px 24px;
}
.compare-num{
  font-size:32px;font-weight:800;
  color:#fff;line-height:1.2;
}
.compare-num i{color:var(--c-cyan);font-size:18px;font-style:normal}
.compare-title{color:#C0D2E7;font-size:15px;font-weight:600}
.compare-sub{font-size:13px;color:#7F9AB7;margin-top:5px}

/* ===== 三步流程 ===== */
.process-area{
  background:linear-gradient(150deg,rgba(12,21,42,.85),rgba(6,12,22,.92));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.process-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:12px 0 18px;
}
.process-line::before{
  content:"";
  position:absolute;
  left:18%;right:18%;top:46px;
  height:1px;
  background:repeating-linear-gradient(90deg,rgba(0,226,139,.65) 0 7px,transparent 7px 14px);
  transform:rotate(-.8deg);
  opacity:.55;
}
.process-step{
  background:rgba(255,255,255,.025);
  border-radius:18px;
  padding:20px 17px 18px;
  border:1px solid rgba(255,255,255,.07);
  border-top:2px solid rgba(255,255,255,.18);
  position:relative;
  margin-top:12px;
}
.process-step:nth-child(2){
  margin-top:-8px;
  background:linear-gradient(150deg,rgba(0,226,139,.09),rgba(255,255,255,.02));
  border-color:rgba(0,226,139,.38);
}
.process-number{
  font-size:24px;
  font-weight:800;
  color:#fff;
  display:inline-flex;
  align-items:center;
  letter-spacing:-1px;
  background:linear-gradient(130deg,#00E28B,#38D9F2);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  border-bottom:2px solid rgba(0,226,139,.3);
  padding-bottom:3px;
  margin-bottom:12px;
}
.process-step:last-child .process-number{
  background:linear-gradient(130deg,#F6C85F,#FF9C62);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.process-step h3{font-size:20px;font-weight:800}
.process-step p{color:#A0B3CF;font-size:14px;margin:8px 0 10px}
.process-step a{font-size:13px;font-weight:700}
.process-corner-note{
  margin-top:24px;
  text-align:center;
  color:#96ABC6;font-size:14px;
}

/* ===== 相邻栏目 ===== */
.neighbor-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:26px;
}
.neighbor-card{
  position:relative;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:18px;
  overflow:hidden;
  transition:transform .25s,border-color .25s,background .25s;
}
.neighbor-card:hover{
  transform:translateY(-4px);
  background:rgba(17,29,54,.9);
  border-color:rgba(0,226,139,.4);
  box-shadow:var(--shadow-card);
}
.neighbor-card .icon{
  width:36px;height:36px;
  margin-bottom:12px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(56,217,242,.11);
  color:var(--c-cyan);
  border:1px solid rgba(56,217,242,.25);
}
.neighbor-card .icon.alt-green{background:rgba(0,226,139,.12);color:var(--c-green);border-color:rgba(0,226,139,.3)}
.neighbor-card h3{font-size:18px;margin-bottom:7px}
.neighbor-card p{font-size:14px;color:#8FA4BF;line-height:1.5;margin-bottom:10px}
.neighbor-card a.direct{font-size:14px;font-weight:700;color:var(--c-green)}
.neighbor-card a.direct:hover{color:#fff}

/* ===== FAQ 手风琴 ===== */
.faq-wrap{max-width:840px;margin:0 auto}
.faq-safe {
  background:rgba(16,27,47,.72);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  margin-bottom:10px;
  overflow:hidden;
  transition:background .2s,border-color .2s;
}
.faq-safe.expanded{
  background:rgba(22,42,69,.9);
  border-color:rgba(0,226,139,.35);
  box-shadow:0 0 22px rgba(0,226,139,.04);
}
.faq-btn{
  display:flex;align-items:center;
  width:100%;
  background:transparent;
  border:0;
  color:#E3EBF5;
  font-size:16px;
  font-weight:600;
  padding:17px 18px;
  text-align:left;
  gap:13px;
  transition:color .2s;
}
.faq-btn:hover{color:#fff}
.faq-btn .faq-ic{
  width:28px;height:28px;flex:0 0 28px;
  border-radius:8px;
  background:rgba(0,226,139,.12);
  color:var(--c-green);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.faq-safe.expanded .faq-btn .faq-ic{transform:rotate(180deg);background:rgba(0,226,139,.28)}
.faq-body{
  padding:0 18px 18px 59px;
  color:#AFC1DB;
  font-size:15px;
  line-height:1.8;
}
.faq-body p{color:#A9BEDA;margin:0 0 7px}

/* ===== CTA 收束 ===== */
.final-cta{
  position:relative;
  padding:86px 0 92px;
  overflow:hidden;
  background:
    linear-gradient(120deg,rgba(6,13,27,.93) 0%,rgba(8,20,38,.82) 48%,rgba(34,15,42,.85) 100%),
    url('/assets/images/backpic/back-3.webp');
  background-size:cover;
  background-position:center;
  border-top:1px solid rgba(0,226,139,.3);
}
.final-cta::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-6%;
  width:8%;
  background:linear-gradient(18deg,transparent,rgba(56,217,242,.17),rgba(0,226,139,.35));
  filter:blur(16px);
  transform:rotate(10deg);
}
.cta-inner{text-align:center;position:relative;z-index:2}
.cta-title{font-size:38px;color:#F4FAFF;font-weight:800;margin-bottom:12px}
.cta-desc{font-size:16px;color:#C8D7E8;max-width:600px;margin:0 auto 28px}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cta-btns .btn-xl{padding:16px 34px;font-size:17px;border-radius:12px}

/* ===== 页脚 ===== */
.site-footer{
  background:#060A16;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-brands{
  padding:42px 0 22px;
}
.footer-monicker{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:20px;
  font-weight:800;
  color:var(--c-white);
}
.footer-slogan{
  font-size:14px;
  color:#7D93B0;
  margin-top:8px;
  max-width:440px;
}
.footer-brand-badge{
  display:flex;flex-direction:column;align-items:flex-end;
}
.status-num{
  color:#B8FFE2;
  font-size:28px;
  font-weight:800;
  font-family:"DIN Alternate","Roboto Condensed",sans-serif;
  line-height:1;
  display:inline-flex;align-items:baseline;gap:4px;
}
.status-num small{font-size:14px;color:var(--c-green);font-weight:700}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding:16px 0 34px;
}
.footer-col-title{
  color:#CDDAEB;font-size:15px;font-weight:700;
  margin-bottom:12px;
  padding-left:8px;
  border-left:2px solid var(--c-green);
}
.footer-links,
.footer-info{
  display:grid;
  gap:8px;
  color:#87A0BE;
  font-size:14px;
}
.footer-links a{color:#87A0BE;width:fit-content;position:relative;padding-left:10px}
.footer-links a:before{content:"›";position:absolute;left:0;color:#476388;transition:color .2s}
.footer-links a:hover{color:var(--c-green)}
.footer-links a:hover:before{color:var(--c-green)}
.footer-info div{color:#8CA3C0;display:flex;gap:7px;align-items:center}
.footer-info .green-light{width:8px;height:8px;border-radius:50%;background:var(--c-green);box-shadow:0 0 7px var(--c-green)}
.footer-copyright{
  border-top:1px solid rgba(255,255,255,.05);
  padding:20px 0 22px;
  text-align:center;
  color:#62809D;
  font-size:13px;
}
.footer-copyright a{color:#62809D;font-weight:600}
.footer-copyright a:hover{color:var(--c-green)}

/* ===== 响应式 ===== */
@media (max-width:1199px){
  .hero-system{grid-template-columns:minmax(0,1fr) 360px}
  .mode-card-grid{grid-template-columns:repeat(2,1fr)}
  .mode-card,.mode-card:nth-child(3),.mode-card:nth-child(4){grid-column:span 1;grid-template-columns:180px 1fr}
}
@media (max-width:991px){
  :root{--space-lg:68px}
  .navbar-nav .nav-link{padding-left:0 !important}
  .navbar-nav .nav-link.active::after{display:none}
  .nav-link.active{color:var(--c-green)}
  .navbar-collapse{
    background:rgba(8,12,24,.97);
    backdrop-filter:blur(20px);
    border-radius:0 0 16px 16px;
    padding:12px 6px 18px;
    box-shadow:0 22px 38px rgba(0,0,0,.45);
  }
  .navbar-nav .dropdown-menu{
    background:rgba(14,23,40,.92);
    box-shadow:none;
    border-color:rgba(255,255,255,.06);
  }
  .nav-cta{margin-left:0;margin-top:10px}
  .hero-system{grid-template-columns:1fr;gap:32px}
  .category-h1{font-size:40px}
  .split-console{grid-template-columns:1fr}
  .visual-thumb{min-height:300px}
  .mode-card,.mode-card:nth-child(3),.mode-card:nth-child(4){grid-template-columns:160px 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  section-public{padding:54px 0}
  .main-padder{padding:44px 0}
  .header-topbar .topbar-menu .hide-phone{display:none}
  .state-grid{grid-template-columns:repeat(2,1fr)}
  .category-h1{font-size:34px;line-height:1.15}
  .hero-actions{flex-direction:column;align-items:flex-start;width:100%}
  .hero-actions .btn-neon,.hero-actions .btn-ghost{width:100%}
  .mode-card-grid{grid-template-columns:1fr}
  .mode-card,.mode-card:nth-child(3),.mode-card:nth-child(4){grid-template-columns:1fr}
  .mode-cover{min-height:180px}
  .data-compare{grid-template-columns:1fr}
  .process-line{grid-template-columns:1fr;gap:18px}
  .process-line::before{display:none}
  .process-step:nth-child(2){margin-top:0}
  .neighbor-grid{grid-template-columns:1fr 1fr}
  .faq-body{padding-left:24px}
  .final-cta .cta-title{font-size:30px}
}
@media (max-width:520px){
  .header-topbar{height:auto;padding:4px 0}
  .header-topbar .container{flex-wrap:wrap;row-gap:2px}
  .header-topbar .topbar-menu a{font-size:12px;display:inline-flex}
  .brand-primary{font-size:17px}
  .brand-ext{width:100%;font-size:11px}
  .category-h1{font-size:28px}
  .h2-style{font-size:27px}
  .state-num{font-size:28px}
  .neighbor-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand-badge{align-items:flex-start;margin-top:10px}
  .footer-info div{font-size:14px}
  .cta-title{font-size:26px}
  .hero-actions .btn-neon,.hero-actions .btn-ghost{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* roulang page: category3 */
:root{
  --bg-0:#0A0F1F;
  --bg-1:#0E1628;
  --bg-2:#0C1224;
  --bg-3:#070B17;
  --green:#00E28B;
  --cyan:#38D9F2;
  --yellow:#F6C85F;
  --orange:#FF9B4A;
  --text-main:#EDF2F9;
  --text-sub:#8A9AB5;
  --text-dim:#64748F;
  --stroke:rgba(255,255,255,.08);
  --stroke-light:rgba(255,255,255,.14);
  --glass:rgba(17,28,47,.74);
  --glass-bright:rgba(22,40,64,.82);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-card:0 18px 48px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-glow:0 0 0 1px rgba(0,226,139,.22),0 14px 50px rgba(0,226,139,.16);
  --transition:all .3s cubic-bezier(.25,.8,.25,1);
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-main);
  font-family:"PingFang SC","Microsoft YaHei","HarmonyOS Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
}
a{color:inherit;text-decoration:none;transition:var(--transition)}
a:hover{color:var(--cyan);text-decoration:none}
img{max-width:100%;height:auto;display:block;border:0}
button,input,textarea{font:inherit}
.btn:focus,.form-control:focus{box-shadow:none}
i.bi{line-height:1}
.text-green{color:var(--green)}
.text-cyan{color:var(--cyan)}
.text-sub{color:var(--text-sub)}
.bg-tint{background:rgba(255,255,255,.03)}
section{position:relative}
main{overflow:hidden}
.container{max-width:1280px}

.section-space{display:block;padding:88px 0}
.section-space-sm{display:block;padding:56px 0}
.section-subtle{background:var(--bg-1)}

/* 吸顶头部 */
.site-header{position:sticky;top:0;z-index:1080;width:100%}
#siteHeader{backdrop-filter:blur(0)}
#siteHeader.scrolled .navbar,#siteHeader.scrolled .utility-bar{background:rgba(7,11,23,.96)}
.utility-bar{
  height:38px;
  border-bottom:1px solid rgba(56,217,242,.28);
  background:rgba(9,14,28,.92);
  transition:var(--transition);
}
.utility-inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--text-sub);
}
.utility-domain{
  color:#5D6E88;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:6px;
}
.utility-domain i.bi{color:var(--green);font-size:12px}
.utility-links{display:flex;align-items:center;gap:20px}
.utility-links a{display:inline-flex;align-items:center;gap:5px;color:var(--text-sub);transition:.2s;padding:2px 0}
.utility-links a:hover{color:var(--cyan)}
/* 主导航 */
.navbar{
  padding-top:0;padding-bottom:0;
  background:rgba(10,15,31,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:all .4s;
  min-height:74px;
}
.navbar .nav-link,.navbar .dropdown-toggle{
  font-size:15px;
  color:var(--text-main);
  padding:26px 14px;
  margin-right:2px;
  position:relative;
  font-weight:500;
  transition:color .2s;
}
.navbar .nav-link:after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:16px;
  height:2px;
  border-radius:4px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
  filter:drop-shadow(0 0 6px rgba(0,226,139,.8));
}
.navbar .nav-link:hover:after,
.navbar .nav-link.active:after{
  transform:scaleX(1);
}
.navbar .nav-link.active,.navbar .nav-link:hover{color:#fff}
.navbar .dropdown-menu{
  background:rgba(13,20,36,.92);
  border:1px solid var(--stroke);
  border-radius:var(--radius-md);
  min-width:230px;
  padding:8px;
  box-shadow:0 20px 44px rgba(0,0,0,.42),0 0 0 1px rgba(56,217,242,.04);
  backdrop-filter:blur(18px);
}
.navbar .dropdown-item{
  color:var(--text-main);
  font-size:14px;
  padding:10px 16px;
  border-radius:10px;
  display:flex;align-items:center;gap:10px;
  border-left:2px solid transparent;
  transition:all .2s;
}
.navbar .dropdown-item i.bi{color:var(--cyan);font-size:15px}
.navbar .dropdown-item:hover{
  background:rgba(0,226,139,.09);
  color:#fff;
  border-left-color:var(--green);
  transform:translateX(3px);
}
.navbar .dropdown-item.active{
  background:rgba(0,226,139,.13);
  color:#fff;
  border-left-color:var(--green);
}
.logo-area{
  display:flex;align-items:center;gap:10px;
  min-width:0;
  margin-right:20px;
  padding:8px 0;
}
.logo-mark{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(0,226,139,.25),rgba(56,217,242,.1));
  border:1px solid rgba(0,226,139,.45);
  border-radius:12px;
  color:var(--green);
  box-shadow:0 0 18px rgba(0,226,139,.2);
}
.logo-text{
  display:flex;flex-direction:column;line-height:1.18;white-space:nowrap;
}
.brand-primary{font-size:22px;font-weight:800;letter-spacing:.03em;color:#fff}
.brand-ext{font-size:12px;color:var(--cyan);font-weight:600;letter-spacing:.08em}
.nav-cta{margin-left:12px;padding-left:16px;border-left:1px solid var(--stroke)}
/* 按钮系统 */
.btn-neon{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(115deg,#00E28B 0%,#19F5A3 70%,#00b877 100%);
  color:#06121A;
  font-weight:800;
  font-size:15px;
  padding:14px 24px;
  border-radius:12px;
  border:0;
  min-width:136px;
  letter-spacing:.02em;
  box-shadow:0 6px 0 rgba(0,226,139,.08),0 0 26px rgba(0,226,139,.3);
  transition:letter-spacing .2s,transform .2s,box-shadow .2s,background .3s;
}
.btn-neon:hover{
  color:#06121A;
  transform:translateY(-3px);
  box-shadow:0 10px 0 rgba(0,226,139,.08),0 0 40px rgba(0,226,139,.4);
}
.btn-neon:active{transform:scale(.98) translateY(0)}
.btn-neon.btn-sm{padding:11px 18px;min-width:112px;font-size:14px;border-radius:10px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(22,37,58,.45);
  color:var(--cyan);
  font-weight:700;
  font-size:14px;
  padding:13px 22px;
  border-radius:12px;
  border:1px solid rgba(56,217,242,.5);
  min-width:132px;
  transition:var(--transition);
  box-shadow:0 0 0 rgba(56,217,242,.0);
}
.btn-ghost:hover{
  color:var(--cyan);
  background:rgba(56,217,242,.12);
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(56,217,242,.22);
}
.btn-ghost:active{transform:scale(.98)}
/* 分类页首屏 */
.category-hero{
  padding:52px 0 58px;
  background:
    linear-gradient(104deg,rgba(6,10,22,.94) 0%,rgba(8,16,29,.85) 42%,rgba(7,22,32,.58) 100%),
    url('/assets/images/backpic/back-3.webp') center center / cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.category-hero::before{
  content:"";
  position:absolute;
  top:0;left:-10%;width:52%;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  filter:blur(1px);
}
.breadcrumb-list{
  display:flex;flex-wrap:wrap;gap:8px 10px;
  color:var(--text-dim);font-size:13px;padding:0;margin:0 0 20px;
  list-style:none;
}
.breadcrumb-list li::after{content:"/";margin-left:10px;color:var(--text-dim)}
.breadcrumb-list li:last-child::after{display:none}
.breadcrumb-list a{color:var(--text-sub)}
.breadcrumb-list a:hover{color:var(--cyan)}
.hero-title{
  font-size:46px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.01em;
  margin:18px 0 18px;
  color:#fff;
}
.hero-title .accent{
  color:var(--green);
  text-shadow:0 0 28px rgba(0,226,139,.4);
}
.hero-sub{
  color:var(--text-sub);
  max-width:660px;
  font-size:16px;
  line-height:1.9;
  margin-bottom:26px;
}
.hero-btn-group{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.hero-feature-line{
  display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.07);
}
.hero-mini-stat .num{font-size:22px;font-weight:800;color:#fff;display:block;line-height:1.3}
.hero-mini-stat .label{display:block;color:var(--text-dim);font-size:13px;margin-top:2px}
/* 右侧状态面板 */
.hero-console-card{
  background:linear-gradient(160deg,rgba(20,32,55,.92),rgba(11,19,36,.82));
  backdrop-filter:blur(16px);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.2);
  box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.hero-console-card::before{
  content:"";
  position:absolute;right:-30%;top:-28%;
  width:80%;height:80%;
  background:radial-gradient(circle,rgba(56,217,242,.16),transparent 68%);
  pointer-events:none;
}
.console-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;
}
.console-title{font-size:15px;color:var(--text-main);font-weight:700;
  display:flex;align-items:center;gap:8px}
.console-live{
  color:var(--green);font-size:12px;padding:4px 10px;
  border-radius:20px;border:1px solid rgba(0,226,139,.4);
  background:rgba(0,226,139,.1);
  display:inline-flex;align-items:center;gap:6px;
}
.console-live i.bi{font-size:8px}
.console-list{list-style:none;margin:0;padding:0}
.console-list li{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--stroke);
  font-size:14px;
}
.console-list li:last-child{border-bottom:0}
.console-list .val{color:var(--cyan);font-weight:700}
.console-list .muted{color:var(--text-dim)}
.console-widget{
  background:rgba(255,255,255,.035);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:14px 14px;
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.widget-page{font-size:14px;color:#fff}
.widget-domain{
  font-size:12px;color:var(--text-sub);
  background:rgba(56,217,242,.08);
  border:1px solid rgba(56,217,242,.2);
  padding:4px 9px;border-radius:6px;
}
/* 数据条带 */
.trust-band{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,226,139,.22);
  background:linear-gradient(90deg,rgba(10,15,31,1),rgba(13,21,38,.98),rgba(10,15,31,1));
  padding:28px 0;
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-item{
  display:flex;align-items:center;gap:16px;
  padding:8px 14px;
  border-left:1px solid var(--stroke);
  min-height:64px;
}
.trust-icon{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,226,139,.1);
  color:var(--green);
  border:1px solid rgba(0,226,139,.25);
  font-size:20px;
}
.trust-val{font-size:26px;font-weight:800;color:#fff;line-height:1.2}
.trust-label{font-size:13px;color:var(--text-sub)}
/* 标题/文字 */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cyan);font-size:14px;font-weight:700;
  margin-bottom:14px;
  padding:6px 14px;
  border-radius:30px;
  background:rgba(56,217,242,.1);
  border:1px solid rgba(56,217,242,.28);
}
.section-title{font-size:32px;font-weight:800;color:#fff;line-height:1.35;margin:0 0 12px}
.section-lead{color:var(--text-sub);max-width:760px;font-size:16px;line-height:1.85}
/* 图文板块 */
.feature-split{padding:90px 0}
.feature-image-wrap{position:relative;margin-bottom:30px}
.feature-image-wrap img{
  border-radius:22px;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid var(--stroke-light);
  box-shadow:0 28px 60px rgba(0,0,0,.42);
}
.feature-image-wrap::after{
  content:"";
  position:absolute;left:18px;right:18px;bottom:8px;height:40px;
  background:linear-gradient(180deg,transparent,rgba(5,10,20,.55));
  filter:blur(6px);
  border-radius:0 0 22px 22px;
  z-index:-1;
}
.feature-float{
  position:absolute;
  right:-8px;bottom:24px;
  background:rgba(11,22,38,.88);
  backdrop-filter:blur(16px);
  border:1px solid rgba(56,217,242,.35);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 18px 45px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.08);
  display:flex;align-items:center;gap:14px;
}
.feature-float .icon-inline{
  width:40px;height:40px;
  background:rgba(0,226,139,.18);
  border:1px solid rgba(0,226,139,.4);
  color:var(--green);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
}
.feature-float .txt b{font-size:15px;color:#fff;display:block}
.feature-float .txt span{color:var(--text-sub);font-size:12px}
.feature-copy .section-title{margin-bottom:16px}
.feature-list{list-style:none;margin:22px 0 0;padding:0}
.feature-list li{
  display:flex;gap:12px;
  padding:11px 0;
  color:var(--text-sub);
  border-bottom:1px solid rgba(255,255,255,.06);
  align-items:flex-start;
}
.feature-list li:last-child{border-bottom:0}
.feature-list i.bi{
  color:var(--green);
  font-size:17px;
  margin-top:3px;
  filter:drop-shadow(0 0 6px rgba(0,226,139,.5));
}
.feature-actions{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap;align-items:center}
/* 玻璃卡片 */
.glass-card{
  background:var(--glass);
  backdrop-filter:blur(14px);
  border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  border-top-color:rgba(255,255,255,.15);
  border-left-color:rgba(255,255,255,.1);
  box-shadow:var(--shadow-card);
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:var(--transition);
}
.glass-card:hover{border-color:rgba(0,226,139,.4);transform:translateY(-4px)}
.card-accent{position:absolute;left:0;top:36px;bottom:36px;width:3px;border-radius:0 4px 4px 0}
.card-accent.green{background:var(--green);box-shadow:0 0 12px rgba(0,226,139,.8)}
.card-accent.cyan{background:var(--cyan);box-shadow:0 0 12px rgba(56,217,242,.8)}
.card-accent.yellow{background:var(--yellow)}
.serv-ribbon{display:grid;grid-template-columns:repeat(1,1fr);gap:18px}
.serv-card{
  height:100%;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.serv-card.shift-up{transform:translateY(-14px)}
@media (min-width:992px){
  .serv-ribbon{grid-template-columns:repeat(3,1fr)}
}
.serv-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.serv-head .rate{
  margin-left:auto;
  font-size:13px;
  display:inline-flex;align-items:center;gap:5px;
}
.serv-icon{
  width:42px;height:42px;flex:0 0 42px;
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:linear-gradient(135deg,rgba(0,226,139,.2),rgba(56,217,242,.12));
  border:1px solid rgba(0,226,139,.4);
  color:var(--green);
}
.serv-card.cyan .serv-icon{
  background:linear-gradient(135deg,rgba(56,217,242,.2),rgba(0,226,139,.08));
  border-color:rgba(56,217,242,.45);
  color:var(--cyan);
}
.serv-card.yellow .serv-icon{
  background:linear-gradient(135deg,rgba(246,200,95,.2),rgba(255,155,74,.1));
  border-color:rgba(246,200,95,.4);
  color:var(--yellow);
}
.serv-card h3{font-size:19px;font-weight:800;color:#fff;margin:0 0 10px}
.serv-card p{color:var(--text-sub);font-size:14px;line-height:1.8;margin-bottom:22px}
.serv-link{
  font-weight:600;font-size:14px;color:var(--cyan);
  display:inline-flex;align-items:center;gap:7px;
}
.serv-link i.bi{transition:transform .2s}
.serv-link:hover i.bi{transform:rotate(45deg)}
/* 流程 */
.flow-wrap{position:relative}
.flow-header{max-width:760px;margin-bottom:42px}
.flow-steps{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:768px){.flow-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.flow-steps{grid-template-columns:repeat(4,1fr)}}
.flow-step{
  position:relative;
  padding:26px;
  background:rgba(14,26,42,.72);
  backdrop-filter:blur(12px);
  border:1px solid var(--stroke);
  border-radius:18px;
  transition:.35s;
}
.flow-step:hover{border-color:rgba(0,226,139,.35);background:rgba(19,35,58,.8)}
.flow-step .step-index{
  font-size:34px;font-weight:800;
  display:block;
  margin-bottom:12px;
  line-height:1;
  font-family:"DIN Alternate","Roboto Condensed","PingFang SC",sans-serif;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.flow-step:nth-child(2) .step-index{background:-webkit-linear-gradient(90deg,var(--cyan),#9DFFF5);background-clip:text}
.flow-step:nth-child(3) .step-index{background:-webkit-linear-gradient(90deg,var(--yellow),var(--green));background-clip:text}
.flow-step h3{color:#fff;font-size:17px;font-weight:700;margin:0 0 8px}
.flow-step p{color:var(--text-sub);font-size:14px;line-height:1.7;margin:0}
.flow-step::after{
  content:"→";
  position:absolute;
  right:-20px;top:48%;
  transform:translateY(-50%);
  color:var(--green);
  font-size:19px;
  z-index:3;
  text-shadow:0 0 12px rgba(0,226,139,.5);
  display:none;
}
@media(min-width:1024px){
  .flow-step:not(:last-child)::after{display:block}
  .flow-step:nth-child(2){margin-top:16px}
  .flow-step:nth-child(4){margin-top:-16px}
}
/* 目录 / 其它频道 */
.cross-ribbon{padding:90px 0;background:var(--bg-1)}
.cross-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.cross-grid{grid-template-columns:repeat(3,1fr)}}
.cross-card{
  position:relative;
  min-height:182px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--stroke-light);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(150deg,rgba(18,28,48,.94) 14%,rgba(9,15,27,.65) 100%);
  transition:.35s;
}
.cross-card::before,.cross-card::after{
  content:"";
  position:absolute;
}
.cross-card::before{
  right:-35px;top:-40px;
  width:160px;height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,217,242,.2),transparent 70%);
}
.cross-card .card-type{
  position:absolute;left:20px;top:20px;
  font-size:12px;color:var(--cyan);
  padding:4px 10px;
  border:1px solid rgba(56,217,242,.4);
  border-radius:30px;
  background:rgba(56,217,242,.08);
}
.cross-card h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
.cross-card p{font-size:14px;color:var(--text-sub);margin-bottom:10px}
.cross-card .go-text{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--green);font-weight:700}
.cross-card:hover{transform:translateY(-5px);border-color:rgba(0,226,139,.4);box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 0 rgba(0,226,139,.0);}
.cross-card.by-cyan .card-type{color:var(--cyan);border-color:rgba(56,217,242,.4)}
.cross-card.by-yellow .card-type{color:var(--yellow);border-color:rgba(246,200,95,.45)}
.cross-card.by-yellow .go-text{color:var(--yellow)}
/* 常见问题 */
.faq-wrap{padding:90px 0;background:var(--bg-0)}
.faq-header{max-width:760px;margin-bottom:36px}
.faq-centered{max-width:820px;margin:0 auto}
.accordion{
  background:transparent;
  border:0;
}
.accordion-item{
  background:rgba(10,20,34,.66);
  border:1px solid rgba(255,255,255,.07);
  border-bottom:0;
  border-radius:0 !important;
  transition:all .3s;
  color:var(--text-main);
}
.accordion-item:first-child{border-radius:16px 16px 0 0 !important}
.accordion-item:last-child{border-bottom:1px solid rgba(255,255,255,.07);border-radius:0 0 16px 16px !important}
.accordion-item:not(.collapsed){background:rgba(15,29,48,.82);border-left:3px solid var(--green);box-shadow:inset 0 0 40px rgba(0,226,139,.05)}
.accordion-button{
  background:transparent;
  color:#fff;
  font-weight:800;
  font-size:16px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:none;
}
.accordion-button::before{
  content:"";
  width:12px;height:12px;
  flex:0 0 12px;
  border-radius:50%;
  border:3px solid var(--cyan);
  margin-right:4px;
}
.accordion-button:not(.collapsed){color:#fff;background:transparent;box-shadow:none}
.accordion-button:focus{box-shadow:none}
.accordion-button:after{
  background:none;
  content:"+";
  font-family:inherit;
  font-size:23px;
  font-weight:300;
  color:var(--green);
  width:auto;height:auto;
  transition:all .25s;
}
.accordion-button:not(.collapsed)::after{
  background:none;
  transform:rotate(45deg);
  color:var(--cyan);
}
.accordion-body{
  color:var(--text-sub);
  font-size:15px;
  line-height:1.9;
  padding:0 26px 20px 54px;
}
/* 大 CTA */
.final-cta{
  padding:88px 0;
  background:
    linear-gradient(112deg,rgba(4,10,22,.92) 15%,rgba(0,30,40,.72) 60%,rgba(3,15,24,.88)),
    url('/assets/images/backpic/back-1.webp') center center / cover no-repeat;
  border-top:1px solid rgba(56,217,242,.24);
  overflow:hidden;
}
.final-cta-inner{text-align:center;max-width:800px;margin:0 auto}
.final-cta h2{font-size:36px;font-weight:800;color:#fff;margin:0 0 16px}
.final-cta p{color:var(--text-sub);font-size:16px;margin-bottom:24px}
.cta-btn-group{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
.cta-hint{
  margin-top:22px;font-size:14px;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:7px;
}
/* Footer 全站共用 */
.site-footer{
  background:var(--bg-3);
  border-top:1px solid rgba(56,217,242,.18);
  padding-top:66px;
}
.footer-brands{
  padding-bottom:34px;
  border-bottom:1px solid var(--stroke);
  margin-bottom:30px;
}
.footer-monicker{
  display:flex;align-items:center;gap:8px;
  font-size:24px;font-weight:900;color:#fff;letter-spacing:.02em;
  background:linear-gradient(90deg,#fff 55%,var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.footer-slogan{
  font-size:14px;color:var(--text-sub);
  max-width:520px;
  margin:8px 0 0;
}
.footer-brand-badge{
  background:rgba(0,226,139,.1);
  border:1px solid rgba(0,226,139,.25);
  border-radius:16px;
  padding:14px 18px;
  display:inline-block;
}
.status-num{font-size:26px;color:#fff;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.status-num i.bi{color:var(--green)}
.status-num small{font-size:16px;color:var(--green)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-bottom:44px}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-col-title{
  color:#fff;font-size:16px;font-weight:800;
  margin:0 0 18px;
  display:flex;align-items:center;gap:8px;
}
.footer-col-title::before{
  content:"";
  width:4px;height:16px;background:var(--green);
  border-radius:3px;
  box-shadow:0 0 8px rgba(0,226,139,.7);
}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a,.footer-info div{color:var(--text-sub);font-size:14px;line-height:1.5}
.footer-links a{display:inline-flex;align-items:center}
.footer-links a::before{content:"› ";margin-right:4px;color:var(--cyan)}
.footer-links a:hover{color:var(--cyan);transform:translateX(4px)}
.footer-info div i.bi{margin-right:6px;color:var(--cyan)}
.footer-copyright{
  border-top:1px solid var(--stroke);
  background:#050912;
  text-align:center;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.8;
  padding:22px 0;
}
.footer-copyright a{color:var(--text-sub)}
.footer-copyright a:hover{color:var(--green)}
/* 卡片与 border helper */
.position-relative{position:relative}
.ov-hidden{overflow:hidden}
/* placeholder image bg */
.img-bg-fallback{background:#15233C;min-height:100%}
/* 响应式 */
@media(min-width:1250px){
  .hero-title{font-size:50px}
}
@media(max-width:991px){
  .navbar{min-height:64px}
  .logo-mark{width:36px;height:36px}
  .brand-primary{font-size:19px}
  .navbar .nav-link{display:inline-block;width:auto;padding:14px 8px}
  .navbar .nav-link:after{display:none}
  .utility-links a:nth-child(n+2){display:none}
  .nav-cta{margin-left:auto;padding-left:0;border-left:0}
  .navbar-collapse{
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    padding:16px 0;
  }
  .navbar-collapse .navbar-nav{gap:0;width:100%}
  .navbar .dropdown-menu{background:rgba(10,16,30,.6)}
  .serv-card.shift-up{transform:none}
  .hero-title{font-size:36px}
  .section-title{font-size:28px}
  .final-cta h2{font-size:30px}
}
@media(max-width:768px){
  .utility-links{display:none}
  .utility-inner{justify-content:center}
  .utility-domain{color:#9AAEC7}
  .category-hero{padding:38px 0 42px}
  .hero-title{font-size:31px}
  .hero-feature-line{gap:16px}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .trust-item{padding:8px 6px;gap:10px}
  .trust-val{font-size:22px}
  .section-space,.feature-split,.cross-ribbon,.faq-wrap,.final-cta{padding:56px 0}
  .footer-grid{gap:26px}
  .serv-card{margin-bottom:6px}
  .flow-step:nth-child(2){margin-top:0}
  .cross-card{min-height:158px;padding:20px}
}
@media(max-width:520px){
  body{font-size:15px}
  .section-title{font-size:25px}
  .hero-title{font-size:27px}
  .hero-btn-group .btn-neon,.hero-btn-group .btn-ghost{width:100%;min-width:0}
  .feature-actions .btn-neon,.feature-actions .btn-ghost{width:100%}
  .cta-btn-group .btn-neon,.cta-btn-group .btn-ghost{width:100%}
  .feature-float{position:static;margin-top:-4px;margin-bottom:24px}
  .feature-float{border-radius:14px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-label{font-size:12px}
  .footer-monicker{font-size:20px}
  .footer-brands{row-gap:20px}
  .accordion-button{font-size:15px;padding:16px 16px}
  .accordion-body{padding-left:42px}
}
html{scrollbar-color:rgba(0,226,139,.35) rgba(17,26,42,.8)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0A101E}
::-webkit-scrollbar-thumb{background:rgba(0,226,139,.35);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(56,217,242,.5)}

/* roulang page: category4 */
:root {
  --bg-deep: #080C18;
  --bg: #0A0F1F;
  --bg-alt: #0E1628;
  --panel: rgba(17, 28, 47, 0.78);
  --panel-solid: #151F35;
  --line: rgba(255, 255, 255, 0.09);
  --line-bright: rgba(255, 255, 255, 0.16);
  --green: #00E28B;
  --cyan: #38D9F2;
  --yellow: #F6C85F;
  --orange: #FF7A4D;
  --light: #EDF2F9;
  --sub: #8A9AB5;
  --dimmer: #5E6E89;
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --shadow: 0 20px 45px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .16);
  --glow-green: 0 0 24px rgba(0, 226, 139, .32);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 80% -10%, rgba(56, 217, 242, .05), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(0, 226, 139, .04), transparent 50%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 8px);
  color: var(--light);
  font-family: "PingFang SC", "Microsoft YaHei", "HarmonicOS Sans", "Noto Sans CJK SC", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  color: var(--cyan);
  text-decoration: none;
  transition: color .25s ease;
}

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

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

.sec {
  padding: 86px 0;
  position: relative;
}

.sec-tint {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.sec-hasline {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent) 1;
}

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

.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--green);
  margin-bottom: 12px;
  font-weight: 600;
}

.section-head .eyebrow::before {
  display: inline-block;
  width: 28px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--green));
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 12px;
  color: #F7FAFF;
}

.section-head p {
  color: var(--sub);
  font-size: 17px;
  max-width: 720px;
  margin-bottom: 0;
}

.text-sub {
  color: var(--sub);
}

/* Buttons */
.btn-neon {
  border: none;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #052019;
  background: linear-gradient(135deg, #36FBAA, var(--green) 45%, #18C98A);
  box-shadow: 0 8px 28px rgba(0, 226, 139, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
  padding: 13px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  transition: all .28s var(--ease);
  position: relative;
}

.btn-neon:hover {
  color: #02110D;
  background: linear-gradient(135deg, #36FBAA, var(--green) 42%, #18C98A);
  box-shadow: 0 12px 38px rgba(0, 226, 139, .45);
  transform: translateY(-2px);
}

.btn-neon:active {
  transform: scale(.97);
  transition-duration: .1s;
}

.btn-ghost {
  border: 1px solid rgba(56, 217, 242, .38);
  border-radius: 12px;
  background: rgba(56, 217, 242, .04);
  color: #D9FFFF;
  padding: 12px 24px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .28s var(--ease);
}

.btn-ghost:hover {
  color: #05242A;
  border-color: var(--cyan);
  background: rgba(56, 217, 242, .85);
  box-shadow: 0 0 30px rgba(56, 217, 242, .24);
  transform: translateY(-2px);
}

.btn-ghost:active {
  transform: scale(.97);
}

/* top info strip + nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1080;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.topbar {
  background: #071021;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px;
  min-height: 38px;
  color: #AABBCC;
}

.topbar .container {
  min-height: 38px;
  gap: 12px;
}

.topbar-domain {
  color: var(--sub);
  font-weight: 500;
  letter-spacing: .03em;
}

.topbar-domain i {
  font-style: normal;
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 9px;
  box-shadow: 0 0 12px rgba(0, 226, 139, .7);
  vertical-align: middle;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-links span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-links a {
  color: #C7D2E0;
}

.topbar-links a:hover {
  color: var(--green);
}

.topbar-links .dot-green,
.footer-info .dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(0, 226, 139, .8);
  display: inline-block;
}

.topbar-links .sep {
  color: rgba(255, 255, 255, .16);
  margin: 0 8px;
}

.main-nav-row {
  background: rgba(8, 13, 26, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.navbar {
  --bs-navbar-padding-y: 0rem;
  --bs-navbar-nav-link-padding-x: 0rem;
  min-height: 70px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  line-height: 1.1;
}

.logo-area .logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  background: linear-gradient(145deg, rgba(0, 226, 139, .16), rgba(0, 226, 139, .03));
  border: 1px solid rgba(0, 226, 139, .25);
  box-shadow: var(--glow-green);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text .brand-primary {
  font-weight: 800;
  font-size: 20px;
  color: #F4F8FF;
  letter-spacing: .01em;
}

.logo-text .brand-ext {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
}

.navbar-collapse {
  justify-content: center;
}

.navbar-nav .nav-item {
  margin: 0 2px;
}

.navbar-nav .nav-link {
  font-size: 16px;
  color: #C2CEDA;
  padding: 23px 15px !important;
  font-weight: 500;
  position: relative;
  transition: color .25s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--green);
}

.navbar-nav .nav-link.active {
  color: #FFFFFF;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 2px;
  border-radius: 10px;
  background: var(--green);
  box-shadow: 0 0 14px rgba(0, 226, 139, .68);
}

.navbar-nav .dropdown-toggle::after {
  border-top-color: rgba(194, 206, 218, .7);
  margin-left: 6px;
  vertical-align: 2px;
}

.navbar-nav .dropdown-menu {
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-padding-y: 0;
  background: #101A2C;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .4);
  padding: 8px;
  min-width: 230px;
}

.dropdown-item {
  color: #B8C5D8;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 15px;
  transition: all .18s;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: rgba(0, 226, 139, .08);
  color: var(--green);
  padding-left: 19px;
}

.nav-cta {
  padding: 10px 0 10px 14px;
}

.nav-cta .btn-neon {
  font-size: 15px;
  padding: 11px 20px;
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  color: transparent;
  background: rgba(255, 255, 255, .05);
  box-shadow: none !important;
  padding: 8px 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.6em;
  height: 1.6em;
}

/* Hero */
.cat-hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  background-image:
    radial-gradient(1100px 620px at 80% 100%, rgba(56, 217, 242, .09), transparent 60%),
    radial-gradient(720px 420px at -6% 0%, rgba(0, 226, 139, .07), transparent 50%),
    linear-gradient(135deg, rgba(6, 11, 25, .88), rgba(9, 18, 36, .72), transparent 70%),
    url("/assets/images/backpic/back-2.webp");
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
}

.cat-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 226, 139, .6), transparent);
}

.cat-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(10, 15, 31, .95));
  pointer-events: none;
}

.cat-hero .container {
  position: relative;
  z-index: 2;
}

.breadcrumb-nav {
  font-size: 14px;
  color: var(--sub);
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.breadcrumb-nav a {
  color: var(--sub);
}

.breadcrumb-nav a:hover {
  color: var(--green);
}

.breadcrumb-nav .crumb-sep {
  color: rgba(255, 255, 255, .25);
  margin: 0 5px;
}

.breadcrumb-nav strong {
  color: var(--green);
  font-weight: 500;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 80px;
  border: 1px solid rgba(0, 226, 139, .27);
  background: rgba(0, 226, 139, .06);
  color: #9CF5CE;
  font-size: 14px;
  letter-spacing: .1em;
  margin-bottom: 20px;
}

.hero-badge i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--green);
}

.cat-hero h1 {
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 900;
  line-height: 1.18;
  margin: 0 0 18px;
  color: #FFFFFF;
  max-width: 780px;
  letter-spacing: -.02em;
}

.cat-hero h1 span {
  color: var(--green);
  position: relative;
}

.hero-text {
  font-size: 17px;
  color: #BCC6D6;
  max-width: 700px;
  margin-top: 14px;
}

.hero-stat-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 680px;
  gap: 14px;
  margin-top: 34px;
  padding: 20px 8px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat .num {
  font-family: "DIN Alternate", "Roboto Condensed", "Agency FB", sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1.2;
}

.hero-stat .lbl {
  font-size: 13px;
  color: var(--sub);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.hero-alert {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 80px;
  padding: 9px 16px;
  background: rgba(246, 200, 95, .09);
  border: 1px solid rgba(246, 200, 95, .16);
  font-size: 13px;
  color: #EFD59A;
}

/* fast strip */
.status-strip {
  background: #111B2F;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.status-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.status-box {
  flex: 1 1 150px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 15px;
  text-align: center;
}

.status-box:last-child {
  border-right: none;
}

.status-box .status-num {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  font-family: "DIN Alternate", "Roboto Condensed", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #FFF;
}

.status-box .status-num small {
  color: var(--green);
  font-size: 15px;
}

.status-box .status-label {
  color: var(--dimmer);
  font-size: 13px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}

/* guide-intro section */
.guide-intro {
  background:
    radial-gradient(750px 400px at 100% 0%, rgba(0, 226, 139, .04), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.intro-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.intro-media img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.intro-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 11, 24, .7));
}

.intro-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 22, 43, .54);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 7px 12px;
  color: #DCE7F3;
  font-size: 13px;
  backdrop-filter: blur(12px);
}

.intro-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

.intro-content h2 {
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.3;
  font-weight: 800;
  margin-bottom: 16px;
  color: #FFFFFF;
}

.intro-content .lead-desc {
  color: var(--sub);
}

.intro-points {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.intro-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.intro-point .point-ic {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 7px;
  margin-top: 5px;
  border: 1.5px solid var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
}

.intro-point .copy strong {
  display: block;
  color: #EEF3FA;
  font-weight: 600;
  margin-bottom: 2px;
}

.intro-point .copy span {
  color: var(--sub);
  font-size: 15px;
}

.intro-more {
  border-left: 2px solid var(--green);
  padding: 12px 15px;
  margin-top: 24px;
  background: rgba(0, 226, 139, .03);
  border-radius: 0 11px 11px 0;
  color: #AFC4DF;
  font-size: 15px;
}

/* distinct category channel */
.channel-block {
  background: var(--bg-deep);
  background-image: repeating-linear-gradient(110deg, rgba(255, 255, 255, .01) 0, rgba(255, 255, 255, .01) 1px, transparent 1px, transparent 12px);
}

.channel-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 24px;
}

.channel-card {
  border-radius: var(--radius-lg);
  padding: 29px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, .16);
  border-left-color: rgba(255, 255, 255, .08);
  box-shadow: var(--shadow), inset 0 1px 1px rgba(255, 255, 255, .04);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s;
}

.channel-card:hover {
  transform: translateY(-5px);
}

.channel-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -110px;
  right: -75px;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .2;
  background: var(--green);
}

.channel-card .cc-label {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.channel-card .cc-label i {
  width: 20px;
  height: 3px;
  display: inline-block;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--green), transparent);
}

.channel-card h3 {
  color: #FFFFFF;
  font-size: 23px;
  font-weight: 800;
  margin: 0 0 8px;
}

.channel-card p {
  color: var(--sub);
  margin-bottom: 18px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 80px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #BDCBDE;
}

.tag-chip.cyan {
  border-color: rgba(56, 217, 242, .25);
  color: #AFEFFA;
}

.channel-card.ch-card-cyan::after {
  background: var(--cyan);
}

.channel-card .card-link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--cyan);
  transition: gap .2s;
}

.channel-card .card-link:hover {
  gap: 10px;
  color: var(--green);
}

.quick-list {
  display: flex;
  flex-direction: column;
}

.quick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #AFC3D9;
  padding: 17px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: .2s;
}

.quick-row:last-child {
  border-bottom: none;
}

.quick-row:hover {
  color: var(--green);
}

.quick-row .qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 9px;
  background: rgba(0, 226, 139, .1);
  color: var(--green);
  font-family: "DIN Alternate", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.quick-row .qr.qr-cyan {
  background: rgba(56, 217, 242, .1);
  color: var(--cyan);
}

/* steps */
.howto {
  background: var(--bg);
  position: relative;
}

.howto::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
  background-size: 42px 42px;
}

.step-col {
  position: relative;
  z-index: 1;
}

.step-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, .14);
  border-left-color: rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 30px;
  height: 100%;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--ease), box-shadow .35s;
}

.step-card:hover {
  transform: translateY(-5px);
}

.step-card .step-number {
  font-family: "DIN Alternate", "Roboto Condensed", sans-serif;
  font-size: 70px;
  line-height: 1;
  position: absolute;
  right: 14px;
  top: 9px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 226, 139, .35);
  transition: color .3s;
}

.step-card:hover .step-number {
  color: rgba(0, 226, 139, .1);
}

.step-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 18px;
  color: #04110C;
  background: linear-gradient(135deg, #4BFFBD, var(--green));
  box-shadow: 0 8px 20px rgba(0, 226, 139, .18);
}

.step-card.sc2 .step-icon {
  color: #031C22;
  background: linear-gradient(135deg, #77EBFF, var(--cyan));
  box-shadow: 0 8px 20px rgba(56, 217, 242, .15);
}

.step-card.sc3 .step-icon {
  color: #2B2103;
  background: linear-gradient(135deg, #FFE6A3, var(--yellow));
  box-shadow: 0 8px 20px rgba(246, 200, 95, .15);
}

.step-card h3 {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 9px;
}

.step-card p {
  color: var(--sub);
  font-size: 15px;
}

.card-inner-link {
  display: inline-block;
  font-size: 14px;
  color: var(--cyan);
  font-weight: 600;
  margin-top: 12px;
}

.card-inner-link:hover {
  color: var(--green);
}

/* stats-strip */
.mark-stats {
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: #0A1323;
  overflow: hidden;
}

.mark-stats .container {
  position: relative;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 -12px;
}

.stat-cell {
  padding: 35px 12px 25px;
  text-align: center;
}

.stat-cell + .stat-cell {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.stat-cell .stat-strong {
  font-size: clamp(29px, 4vw, 40px);
  font-weight: 900;
  font-family: "DIN Alternate", "Roboto Condensed", sans-serif;
  color: #FFFFFF;
  line-height: 1.1;
}

.stat-cell .stat-strong span {
  color: var(--green);
  font-size: .55em;
  margin-left: 2px;
}

.stat-cell .stat-title {
  color: var(--sub);
  font-size: 14px;
  margin-top: 8px;
}

/* spotlight section */
.play-mode {
  background: var(--bg-alt);
  background-image: radial-gradient(600px 300px at 0% 20%, rgba(56, 217, 242, .04), transparent 60%);
}

.mode-panel {
  background: #111C30;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .3);
}

.mode-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
}

.mode-main {
  padding: 42px 40px 42px 0;
}

.mode-main h3 {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 800;
}

.mode-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 24px;
}

.mode-item {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.mode-item .mode-name {
  color: var(--green);
  font-weight: 700;
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
}

.mode-item .mode-desc {
  color: var(--sub);
  font-size: 14px;
}

/* ticker */
.ticker-band {
  background: rgba(0, 10, 20, .45);
  border-block: 1px solid rgba(255, 255, 255, .08);
  padding: 19px 0;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: marquee 22s linear infinite;
  will-change: transform;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ticker-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .02);
  border-radius: 40px;
  color: #A7B8CD;
  padding: 5px 15px;
  font-size: 13px;
}

.ticker-pill i {
  width: 5px;
  height: 5px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  box-shadow: 0 0 8px var(--orange);
}

.ticker-pill .green-dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* category map */
.static-cat-map {
  background: var(--bg);
}

.cat-entrance {
  display: block;
  position: relative;
  text-decoration: none;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  min-height: 240px;
  transition: all .35s var(--ease);
  color: inherit;
}

.cat-entrance:hover {
  transform: translateY(-6px);
  color: inherit;
  box-shadow: var(--shadow);
}

.cat-entrance img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75) brightness(.6);
  transition: all .4s;
}

.cat-entrance:hover img {
  transform: scale(1.04);
  filter: saturate(.9) brightness(.72);
}

.cat-entrance .cat-content {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 17px;
  background: linear-gradient(transparent, rgba(3, 7, 16, .75));
}

.cat-entrance h3 {
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 3px;
}

.cat-entrance p {
  color: #BAC6DA;
  font-size: 13px;
  margin: 0;
}

.cat-link-more {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(2, 8, 17, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #FFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.subcat-inline {
  margin-top: 14px;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}

/* FAQ */
.faq-sec {
  background:
    radial-gradient(650px 440px at 100% 20%, rgba(0, 226, 139, .04), transparent 50%),
    linear-gradient(180deg, var(--bg-alt), var(--bg));
}

.faq-panel {
  max-width: 830px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(17, 28, 47, .62);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .25s, background .25s, box-shadow .25s;
}

.faq-item:has(.show) {
  border-left-color: var(--green);
  border-left-width: 2px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
}

.faq-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: #EAF1FA;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  padding: 20px 22px;
  border-radius: 14px;
  transition: background .2s;
}

.faq-toggle:hover,
.faq-toggle:focus {
  background: rgba(255, 255, 255, .03);
  color: #FFFFFF;
}

.faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(56, 217, 242, .08);
  border: 1px solid rgba(56, 217, 242, .25);
  color: var(--cyan);
  position: relative;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .3s ease, background .3s;
}

.faq-toggle[aria-expanded="true"] .faq-icon {
  transform: rotate(135deg);
  background: rgba(0, 226, 139, .14);
  border-color: var(--green);
  color: var(--green);
}

.faq-answer {
  padding: 0 22px 6px 67px;
  color: var(--sub);
  font-size: 15px;
}

.faq-answer p {
  padding-bottom: 18px;
  margin: 0;
}

/* cross nav */
.cross-nav {
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.cross-cat-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cross-cat-list li a {
  color: #ADC1D8;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 3px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}

.cross-cat-list li a:hover,
.cross-cat-list li a.active {
  color: var(--green);
  border-color: var(--green);
}

/* CTA */
.cta-full {
  position: relative;
  padding: 78px 0 80px;
  overflow: hidden;
  background-image:
    linear-gradient(115deg, rgba(11, 200, 132, .16) 0%, rgba(0, 0, 0, .25) 40%, transparent 70%),
    linear-gradient(90deg, rgba(8, 13, 26, .9), rgba(9, 20, 36, .8)),
    url("/assets/images/backpic/back-3.webp");
  background-size: cover;
  background-position: center;
}

.cta-full::before {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  left: 6%;
  top: -140px;
  border-radius: 50%;
  background: rgba(0, 226, 139, .17);
  filter: blur(100px);
}

.cta-inner {
  position: relative;
  z-index: 3;
  text-align: center;
}

.cta-inner h2 {
  color: #FFFFFF;
  font-weight: 900;
  font-size: clamp(32px, 4.7vw, 44px);
  line-height: 1.3;
}

.cta-inner p {
  max-width: 600px;
  margin: 16px auto 35px;
  color: #C3D1DF;
  font-size: 17px;
}

.cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.cta-btns .btn-neon {
  min-width: 210px;
  padding: 17px 31px;
  font-size: 18px;
}

.cta-btns .btn-ghost {
  padding: 16px 25px;
  font-size: 16px;
}

/* Footer */
.site-footer {
  background: #060A13;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #8798AE;
  font-size: 14px;
}

.footer-brands {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 28px 0;
}

.footer-monicker {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: .02em;
}

.footer-monicker .mark {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(145deg, var(--green), var(--cyan));
  box-shadow: 0 0 14px rgba(0, 226, 139, .55);
}

.footer-slogan {
  color: #7C8FA8;
  font-size: 14px;
  margin-top: 8px;
}

.footer-brand-badge {
  border-left: 1px solid rgba(255, 255, 255, .1);
  padding-left: 28px;
}

.footer-brand-badge .status-num {
  color: #FFFFFF;
  font-family: "DIN Alternate", sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.footer-brand-badge .status-num small {
  color: var(--green);
  font-size: 14px;
  margin-left: 3px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 50px 0 50px;
}

.footer-col-title {
  color: #F2F6FC;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-col-title::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--green);
}

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

.footer-links a {
  color: #7F91AA;
  transition: .2s;
}

.footer-links a:hover {
  color: var(--green);
  transform: translateX(3px);
}

.footer-info {
  display: flex;
  flex-direction: column;
}

.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #04070D;
  padding: 22px 0 20px;
  text-align: center;
  color: #64758D;
  font-size: 13px;
}

.footer-copyright a {
  color: #97A9C0;
  font-weight: 600;
}

.footer-copyright a:hover {
  color: var(--green);
}

@media (max-width: 1024px) {
  .sec {
    padding: 68px 0;
  }

  .nav-cta {
    padding-left: 8px;
  }

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

  .mode-main {
    padding: 30px 32px;
  }

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

  .stat-cell .stat-title {
    letter-spacing: 0;
  }
}

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

  .sec {
    padding: 55px 0;
  }

  .topbar .container {
    flex-direction: column;
    height: auto;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .topbar-links {
    justify-content: center;
  }

  .topbar-links .top-links-desktop {
    display: none;
  }

  .cat-hero {
    padding: 60px 0 48px;
  }

  .cat-hero .hero-stat-line {
    grid-template-columns: repeat(3, 1fr);
    padding: 15px 0;
  }

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

  .stat-cell:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .stat-cell:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

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

  .mode-list {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 575px) {
  .container {
    padding: 0 18px;
  }

  .logo-text .brand-ext {
    display: none;
  }

  .navbar-nav .nav-link {
    padding: 16px 4px !important;
  }

  .navbar-nav .navbar-collapse {
    padding: 8px 0 16px;
  }

  .cat-hero h1 {
    font-size: 35px;
  }

  .hero-stat-line {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .btn-neon,
  .btn-ghost {
    width: 100%;
  }

  .cta-btns {
    gap: 12px;
  }

  .intro-tag {
    bottom: 13px;
    left: 13px;
  }

  .faq-answer {
    padding-left: 20px;
  }

  .footer-brands {
    gap: 10px;
    padding: 22px 0;
  }

  .footer-brand-badge {
    border-left: none;
    border-top: 1px dashed rgba(255, 255, 255, .1);
    padding-top: 12px;
    padding-left: 0;
  }

  .status-strip .container {
    padding: 0 4px;
  }

  .mode-main .section-head {
    margin-bottom: 20px;
  }
}