/* roulang page: index */
:root{
  --bg-1:#050F1A;
  --bg-2:#0A1B2C;
  --bg-3:#0E2437;
  --glass:rgba(18,44,70,0.55);
  --glass-solid:rgba(14,36,55,0.92);
  --stroke:rgba(96,182,255,0.18);
  --stroke-strong:rgba(96,182,255,0.45);
  --cyan:#25C2F5;
  --cyan-deep:#1B8FE0;
  --amber:#F0A63C;
  --pos:#35D6A4;
  --risk:#F0574A;
  --text:#EAF2FB;
  --text-2:#A9BCD0;
  --text-3:#7E93A8;
  --line:rgba(255,255,255,0.08);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 42px rgba(0,0,0,0.45);
  --glow:0 0 0 1px rgba(37,194,245,0.5),0 10px 26px rgba(37,194,245,0.28);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  padding:0;
  font-family:"PingFang SC","HarmonyOS Sans","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--bg-1);
  color:var(--text);
  font-size:16px;
  line-height:1.85;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.55;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(720px 460px at 10% 4%,rgba(37,194,245,0.12),transparent 70%),
    radial-gradient(620px 420px at 92% 26%,rgba(240,166,60,0.09),transparent 72%);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--cyan);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:#7CDCFB;}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--text);letter-spacing:-.2px;}
p{margin:0 0 14px;color:var(--text-2);max-width:72ch;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.num{font-variant-numeric:tabular-nums;}

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(5,15,26,0.76);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(5,15,26,0.95);
  box-shadow:0 12px 30px rgba(0,0,0,0.42);
}
.site-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:1;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  height:72px;
  min-width:0;
}
.brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:0 0 auto;
  color:var(--text);
}
.brand:hover{color:var(--text);}
.brand-name{
  font-size:19px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:.2px;
}
.brand-name em{font-style:normal;color:var(--cyan);}
.brand-tag{
  font-size:11px;
  color:var(--text-3);
  letter-spacing:1.2px;
  line-height:1.4;
  margin-top:3px;
  white-space:nowrap;
}
.header-right{display:flex;align-items:center;gap:16px;min-width:0;}
.main-nav{display:flex;align-items:center;gap:4px;min-width:0;}
.main-nav a{
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  font-size:15px;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.main-nav a:hover{color:var(--text);background:rgba(37,194,245,0.10);}
.main-nav a.active{color:var(--text);background:rgba(37,194,245,0.14);}
.lang-switch{
  display:inline-flex;
  align-items:center;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  flex:0 0 auto;
}
.lang-switch span,.lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12.5px;
  line-height:1;
  color:var(--text-3);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lang-switch .is-active{background:var(--cyan);color:#04222f;font-weight:700;}
.lang-switch a:hover{color:var(--text);background:rgba(37,194,245,0.12);}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  color:var(--text);
  cursor:pointer;
  text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),filter .22s var(--ease);
}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;}
.btn-primary{
  background:linear-gradient(135deg,#25C2F5,#1B8FE0);
  color:#04222F;
  box-shadow:var(--glow);
}
.btn-primary:hover{
  color:#04222F;
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(37,194,245,0.6),0 14px 34px rgba(37,194,245,0.40);
}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{
  background:var(--glass);
  border-color:var(--stroke);
  color:var(--text);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:var(--amber);color:#fff;transform:translateY(-1px);}
.btn-ghost:active{transform:scale(.98);}
.btn-amber{
  background:linear-gradient(135deg,#F0A63C,#D8842A);
  color:#2A1704;
  box-shadow:0 0 0 1px rgba(240,166,60,0.45),0 10px 24px rgba(240,166,60,0.22);
}
.btn-amber:hover{color:#2A1704;filter:brightness(1.06);transform:translateY(-1px);}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.header-cta{min-height:40px;padding:0 18px;font-size:14px;}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-size:17px;
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--stroke-strong);}

.drawer{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
}
.drawer.is-open{display:block;}
.drawer-mask{
  position:absolute;
  inset:0;
  background:rgba(3,10,18,0.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.drawer-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(340px,86vw);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  background:var(--glass-solid);
  border-left:1px solid var(--stroke);
  box-shadow:-20px 0 50px rgba(0,0,0,0.5);
  overflow-y:auto;
  animation:drawerIn .26s var(--ease);
}
@keyframes drawerIn{from{transform:translateX(24px);opacity:.4;}to{transform:translateX(0);opacity:1;}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.drawer-close{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--stroke);background:rgba(255,255,255,0.05);
  color:var(--text);font-size:18px;cursor:pointer;
}
.drawer-nav{display:flex;flex-direction:column;gap:4px;}
.drawer-nav a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 14px;
  border-radius:12px;
  color:var(--text-2);
  font-size:16px;
  border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.drawer-nav a:hover,.drawer-nav a.active{color:var(--text);background:rgba(37,194,245,0.12);border-color:var(--stroke);}
.drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--line);}
.drawer-lang{display:flex;justify-content:flex-end;margin-bottom:4px;}

.section{padding:96px 0;position:relative;}
.section--alt{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--deep{background:var(--bg-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:760px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center p{margin-left:auto;margin-right:auto;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 12px;
  border-radius:6px;
  border:1px solid var(--stroke);
  background:rgba(37,194,245,0.08);
  color:var(--cyan);
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:16px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
.section-title{font-size:clamp(23px,2.6vw,34px);line-height:1.35;margin-bottom:14px;}
.section-sub{color:var(--text-2);font-size:16px;line-height:1.85;}

.hero{padding:72px 0 0;position:relative;overflow:hidden;}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:48px;
  align-items:center;
}
.hero-copy{min-width:0;}
.hero-title{
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.2;
  letter-spacing:-.5px;
  margin:18px 0 20px;
}
.hero-title em{
  font-style:normal;
  color:var(--cyan);
  text-shadow:0 0 26px rgba(37,194,245,0.45);
}
.hero-sub{font-size:16.5px;line-height:1.9;color:var(--text-2);max-width:56ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.hero-points li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--text-3);
  min-width:0;
}
.hero-points i{color:var(--cyan);font-size:13px;}

.hero-visual{position:relative;min-width:0;padding:12px 0 34px;}
.panel{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,0.06);
  padding:22px;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(37,194,245,0.22),transparent 70%);
  pointer-events:none;
}
.panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--text);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.panel-head .dot{width:8px;height:8px;border-radius:50%;background:var(--pos);box-shadow:0 0 10px rgba(53,214,164,0.8);}
.panel-badge{
  margin-left:auto;
  font-size:11px;
  padding:2px 9px;
  border-radius:6px;
  border:1px solid rgba(240,166,60,0.4);
  color:var(--amber);
  background:rgba(240,166,60,0.1);
  white-space:nowrap;
}
.panel-list{display:flex;flex-direction:column;gap:10px;}
.panel-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.06);
  font-size:13.5px;
  min-width:0;
}
.panel-list li span:first-child{color:var(--text);white-space:nowrap;}
.panel-list li span:last-child{color:var(--text-3);font-size:12.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.panel-bars{display:flex;align-items:flex-end;gap:8px;height:56px;margin-top:18px;}
.panel-bars i{
  flex:1 1 0;
  min-width:0;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,rgba(37,194,245,0.85),rgba(37,194,245,0.12));
  display:block;
}
.panel-bars i:nth-child(2n){background:linear-gradient(180deg,rgba(240,166,60,0.75),rgba(240,166,60,0.1));}
.float-card{
  position:absolute;
  padding:10px 16px;
  border-radius:12px;
  font-size:12.5px;
  color:var(--text);
  background:rgba(10,27,44,0.9);
  border:1px solid var(--stroke);
  box-shadow:0 12px 28px rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  white-space:nowrap;
}
.float-card--a{bottom:6px;left:-8px;border-color:rgba(37,194,245,0.45);}
.float-card--b{bottom:44px;right:-6px;border-color:rgba(240,166,60,0.45);color:var(--amber);}

.quick-download{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:56px;
  padding:22px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(18,44,70,0.6),rgba(10,27,44,0.35));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.quick-download .qd-label{
  grid-column:1/-1;
  font-size:13px;
  color:var(--text-3);
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.quick-download .qd-label i{color:var(--cyan);}
.qd-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  border-radius:999px;
  border:1px solid var(--stroke-strong);
  background:rgba(37,194,245,0.07);
  color:var(--text);
  font-size:15px;
  font-weight:600;
  box-shadow:0 0 0 1px rgba(37,194,245,0.14),0 8px 22px rgba(37,194,245,0.16);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
  min-width:0;
}
.qd-btn i{color:var(--cyan);font-size:16px;}
.qd-btn:hover{
  color:#fff;
  transform:translateY(-2px);
  border-color:var(--cyan);
  background:rgba(37,194,245,0.14);
  box-shadow:0 0 0 1px rgba(37,194,245,0.5),0 12px 30px rgba(37,194,245,0.32);
}
.qd-btn:active{transform:scale(.985);}

.risk-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(14,36,55,0.55);
}
.risk-strip-inner{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding-top:10px;
  padding-bottom:10px;
  flex-wrap:wrap;
}
.risk-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--risk);
  box-shadow:0 0 12px rgba(240,87,74,0.75);
  flex:0 0 auto;
}
.risk-strip p{
  margin:0;
  font-size:13.5px;
  color:var(--text-3);
  max-width:100%;
}
.risk-strip a{color:var(--amber);font-size:13.5px;white-space:nowrap;}
.risk-strip a:hover{color:#FFC978;text-decoration:underline;}

.card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  padding:26px;
  min-width:0;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--stroke-strong);
  box-shadow:0 22px 46px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.09);
}
.card h3{font-size:19px;margin-bottom:10px;line-height:1.45;}
.card p{font-size:14.5px;color:var(--text-2);line-height:1.85;}
.card-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--cyan);
  background:rgba(37,194,245,0.1);
  border:1px solid rgba(37,194,245,0.28);
  margin-bottom:16px;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.feature-group{display:flex;flex-direction:column;gap:16px;min-width:0;}
.feature-group-title{
  font-size:13px;
  letter-spacing:1px;
  color:var(--text-3);
  display:flex;align-items:center;gap:8px;
}
.feature-group-title::after{content:"";flex:1 1 auto;height:1px;background:var(--line);}
.feature-wide{grid-column:1/-1;}
.feature-list{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.feature-list li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  color:var(--text-3);
  line-height:1.75;
}
.feature-list li::before{
  content:"";
  position:absolute;
  left:0;top:10px;
  width:3px;height:12px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(37,194,245,0.2));
}

.scene-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
.scene-card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  overflow:hidden;
  min-width:0;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.scene-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);box-shadow:0 20px 40px rgba(0,0,0,0.45);}
.scene-visual{
  aspect-ratio:16/9;
  width:100%;
  position:relative;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(37,194,245,0.28),transparent 60%),
    linear-gradient(140deg,#0E2437,#0A1B2C);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:rgba(37,194,245,0.85);
  font-size:26px;
}
.scene-visual::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:24px 24px;
  opacity:.6;
}
.scene-body{padding:18px 18px 22px;}
.scene-body h3{font-size:16.5px;line-height:1.5;margin-bottom:8px;}
.scene-body p{font-size:13.5px;color:var(--text-3);line-height:1.75;}

.demo-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.demo-tabs{display:flex;flex-direction:column;gap:10px;min-width:0;}
.demo-tab{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  color:var(--text-2);
  font-size:14.5px;
  text-align:left;
  cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  min-width:0;
}
.demo-tab .idx{
  font-size:12px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.demo-tab:hover{color:var(--text);border-color:var(--stroke-strong);}
.demo-tab.is-active{
  color:var(--text);
  background:rgba(37,194,245,0.12);
  border-color:rgba(37,194,245,0.45);
}
.demo-tab.is-active .idx{color:var(--cyan);}
.demo-stage{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  padding:24px;
  min-width:0;
  min-height:340px;
}
.demo-panel{display:none;}
.demo-panel.is-active{display:block;animation:fadeUp .3s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.demo-screen{
  aspect-ratio:16/9;
  width:100%;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(100% 120% at 100% 0%,rgba(240,166,60,0.16),transparent 60%),
    linear-gradient(150deg,#0E2437,#08161F 70%);
  position:relative;
  overflow:hidden;
  margin-bottom:18px;
}
.demo-screen .bar{
  position:absolute;
  left:20px;right:20px;
  height:10px;
  border-radius:6px;
  background:rgba(255,255,255,0.07);
}
.demo-screen .bar:nth-child(1){top:22px;width:38%;background:rgba(37,194,245,0.35);}
.demo-screen .bar:nth-child(2){top:52px;width:66%;}
.demo-screen .bar:nth-child(3){top:76px;width:52%;}
.demo-screen .bar:nth-child(4){top:100px;width:72%;}
.demo-screen .bar:nth-child(5){top:124px;width:44%;}
.demo-panel h3{font-size:17px;margin-bottom:8px;}
.demo-panel p{font-size:14px;color:var(--text-2);}

.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  position:relative;
}
.step{
  position:relative;
  padding:24px 20px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  min-width:0;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.step:hover{border-color:var(--stroke-strong);transform:translateY(-3px);}
.step-no{
  font-size:26px;
  font-weight:700;
  color:rgba(37,194,245,0.55);
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin-bottom:14px;
}
.step h3{font-size:16px;margin-bottom:8px;}
.step p{font-size:13.5px;color:var(--text-3);line-height:1.8;}
.step::after{
  content:"";
  position:absolute;
  right:-11px;
  top:44px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(37,194,245,0.9);
  display:none;
}

.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.case-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  overflow:hidden;
  min-width:0;
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.case-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);}
.case-visual{
  aspect-ratio:16/9;
  background:linear-gradient(140deg,rgba(37,194,245,0.18),rgba(14,36,55,0.9));
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:rgba(234,242,251,0.5);
  font-size:13px;
  letter-spacing:2px;
}
.case-body{padding:20px;min-width:0;}
.case-body h3{font-size:16.5px;line-height:1.5;margin-bottom:10px;}
.case-body p{font-size:13.5px;color:var(--text-3);line-height:1.8;}

.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;}
.plan-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:28px 24px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  min-width:0;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.plan-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);box-shadow:0 22px 46px rgba(0,0,0,0.45);}
.plan-card.is-featured{
  border-color:rgba(240,166,60,0.55);
  box-shadow:0 0 0 1px rgba(240,166,60,0.25),0 22px 50px rgba(0,0,0,0.45);
  background:linear-gradient(180deg,rgba(240,166,60,0.08),rgba(18,44,70,0.55));
}
.plan-flag{
  align-self:flex-start;
  font-size:11.5px;
  padding:2px 10px;
  border-radius:6px;
  border:1px solid rgba(240,166,60,0.45);
  color:var(--amber);
  background:rgba(240,166,60,0.12);
}
.plan-card h3{font-size:19px;}
.plan-amount{
  font-size:15px;
  color:var(--text);
  font-weight:600;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
}
.plan-amount small{display:block;font-size:12px;color:var(--text-3);font-weight:400;margin-top:2px;letter-spacing:.3px;}
.plan-rows{display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
.plan-rows li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(255,255,255,0.07);
  min-width:0;
}
.plan-rows li:last-child{border-bottom:0;padding-bottom:0;}
.plan-rows b{color:var(--text-2);font-weight:600;flex:0 0 auto;}
.plan-rows span{color:var(--text-3);min-width:0;}
.plan-card .btn{width:100%;margin-top:auto;}

.quote-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.quote-card{
  position:relative;
  padding:26px 22px 22px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  min-width:0;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.quote-card:hover{border-color:var(--stroke-strong);transform:translateY(-3px);}
.quote-card:nth-child(2){margin-top:22px;}
.quote-card:nth-child(5){margin-top:22px;}
.quote-card::before{
  content:"“";
  position:absolute;
  top:6px;
  left:16px;
  font-size:44px;
  line-height:1;
  color:rgba(37,194,245,0.28);
  font-family:Georgia,serif;
}
.quote-card p{font-size:14.5px;color:var(--text-2);position:relative;padding-top:14px;}
.quote-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--text-3);
}
.quote-meta i{color:var(--cyan);}

.board-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:24px;align-items:start;}
.board-list{display:flex;flex-direction:column;gap:14px;}
.board-item{
  display:flex;
  gap:14px;
  padding:18px 20px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  min-width:0;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.board-item:hover{background:rgba(37,194,245,0.06);border-color:var(--stroke-strong);}
.board-item .no{
  flex:0 0 auto;
  font-size:13px;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
  padding-top:3px;
}
.board-item h3{font-size:15.5px;margin-bottom:6px;}
.board-item p{font-size:13.5px;color:var(--text-3);line-height:1.8;}
.board-stats{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px;}
.stat-card{
  padding:20px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:linear-gradient(140deg,rgba(37,194,245,0.1),rgba(18,44,70,0.5));
  min-width:0;
}
.stat-card .stat-label{font-size:12.5px;color:var(--text-3);letter-spacing:.6px;margin-bottom:6px;}
.stat-card .stat-value{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(37,194,245,0.4);
  line-height:1.4;
}
.stat-card .stat-note{font-size:12.5px;color:var(--text-3);margin-top:6px;line-height:1.7;}

.cms-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:start;}
.cms-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
.cms-item{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  min-width:0;
  color:inherit;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.cms-item:hover{transform:translateY(-3px);border-color:var(--stroke-strong);box-shadow:0 18px 40px rgba(0,0,0,0.42);color:inherit;}
.cms-thumb{
  aspect-ratio:16/9;
  border-radius:10px;
  border:1px solid var(--line);
  background:
    radial-gradient(110% 100% at 0% 0%,rgba(37,194,245,0.3),transparent 62%),
    linear-gradient(140deg,#0E2437,#08161F);
  position:relative;
  overflow:hidden;
  min-width:0;
}
.cms-thumb::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.55;
}
.cms-body{min-width:0;display:flex;flex-direction:column;gap:8px;}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  font-size:12px;
  padding:2px 10px;
  border-radius:6px;
  border:1px solid var(--stroke);
  background:rgba(37,194,245,0.1);
  color:var(--cyan);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cms-body h3{
  font-size:16.5px;
  line-height:1.55;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cms-body p{
  font-size:13.5px;
  color:var(--text-3);
  line-height:1.75;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cms-meta{font-size:12.5px;color:var(--text-3);display:flex;gap:12px;flex-wrap:wrap;}
.cms-side{display:flex;flex-direction:column;gap:18px;min-width:0;position:sticky;top:92px;}
.side-card{
  padding:22px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  min-width:0;
}
.side-card h3{font-size:15.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.side-card h3 i{color:var(--cyan);font-size:13px;}
.side-list{display:flex;flex-direction:column;gap:12px;}
.side-list a{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13.5px;
  color:var(--text-2);
  line-height:1.7;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(255,255,255,0.07);
  min-width:0;
  transition:color .2s var(--ease);
}
.side-list a:last-child{border-bottom:0;padding-bottom:0;}
.side-list a:hover{color:var(--cyan);}
.side-list .n{
  flex:0 0 auto;
  color:rgba(37,194,245,0.6);
  font-variant-numeric:tabular-nums;
  font-size:12.5px;
  padding-top:2px;
}
.side-list .t{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.cms-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:56px 20px;
  border-radius:var(--radius);
  border:1px dashed var(--stroke);
  background:rgba(255,255,255,0.02);
  color:var(--text-3);
  text-align:center;
  font-size:14px;
}
.cms-empty i{font-size:26px;color:rgba(37,194,245,0.55);}

.download-block{
  padding:32px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(37,194,245,0.14),transparent 65%),
    rgba(14,36,55,0.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px;}
.dl-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 22px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.035);
  min-width:0;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.dl-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);box-shadow:0 20px 44px rgba(0,0,0,0.45);}
.dl-head{display:flex;align-items:center;gap:12px;min-width:0;}
.dl-icon{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  background:rgba(37,194,245,0.12);
  border:1px solid rgba(37,194,245,0.3);
  color:var(--cyan);
}
.dl-head h3{font-size:16.5px;}
.dl-card p{font-size:13.5px;color:var(--text-3);line-height:1.75;}
.dl-card .btn{width:100%;margin-top:auto;}
.dl-note{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.8;
}
.dl-note b{color:var(--amber);font-weight:600;}

.faq-list{display:flex;flex-direction:column;gap:12px;max-width:920px;}
.faq-item{
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  overflow:hidden;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.faq-item:hover{border-color:var(--stroke-strong);}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  min-height:56px;
  line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"\002B";
  flex:0 0 auto;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--stroke);
  color:var(--cyan);
  font-size:15px;
  line-height:1;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.faq-item[open]{border-color:rgba(37,194,245,0.42);background:rgba(37,194,245,0.06);}
.faq-item[open] summary::after{transform:rotate(45deg);background:rgba(37,194,245,0.16);}
.faq-answer{
  padding:0 22px 20px;
  border-left:3px solid var(--cyan);
  margin-left:22px;
  padding-left:18px;
}
.faq-answer p{font-size:14.5px;color:var(--text-2);line-height:1.9;}

.rules-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;}
.rule-list{display:flex;flex-direction:column;gap:12px;}
.rule-list li{
  display:flex;
  gap:14px;
  padding:16px 18px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.025);
  min-width:0;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.rule-list li:hover{background:rgba(37,194,245,0.06);border-color:var(--stroke);}
.rule-list .n{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  color:var(--cyan);
  border:1px solid rgba(37,194,245,0.32);
  background:rgba(37,194,245,0.1);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.rule-list .txt{min-width:0;font-size:14px;color:var(--text-2);line-height:1.8;}
.rule-list .txt strong{color:var(--text);font-weight:600;display:block;margin-bottom:4px;font-size:14.5px;}
.risk-card{
  padding:26px;
  border-radius:var(--radius);
  border:1px solid rgba(240,87,74,0.42);
  background:linear-gradient(180deg,rgba(240,87,74,0.1),rgba(14,36,55,0.6));
  min-width:0;
}
.risk-card h3{
  font-size:17px;
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.risk-card h3 i{color:var(--risk);font-size:15px;}
.risk-card ul{display:flex;flex-direction:column;gap:10px;}
.risk-card li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  color:var(--text-2);
  line-height:1.85;
}
.risk-card li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(240,87,74,0.85);
}

.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.topic-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 24px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  min-width:0;
  color:inherit;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.topic-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);box-shadow:0 20px 44px rgba(0,0,0,0.45);color:inherit;}
.topic-card .topic-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--cyan);
  background:rgba(37,194,245,0.1);
  border:1px solid rgba(37,194,245,0.28);
}
.topic-card h3{font-size:17px;line-height:1.5;}
.topic-card p{font-size:13.5px;color:var(--text-3);line-height:1.8;}
.topic-card .topic-more{font-size:13px;color:var(--cyan);display:inline-flex;align-items:center;gap:6px;margin-top:auto;}
.topic-card:hover .topic-more{color:#7CDCFB;}

.cta-band{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(120deg,rgba(14,36,55,0.95),rgba(5,15,26,0.95));
  padding:46px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.cta-band::before{
  content:"";
  position:absolute;
  inset:-60% -20% auto 30%;
  width:640px;height:520px;
  background:radial-gradient(circle,rgba(37,194,245,0.20),transparent 65%);
  pointer-events:none;
}
.cta-band > *{position:relative;}
.cta-band h2{font-size:clamp(21px,2.4vw,30px);margin-bottom:10px;line-height:1.4;}
.cta-band p{font-size:14px;color:var(--text-3);max-width:52ch;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;flex:0 0 auto;}
.cta-foot{
  margin-top:18px;
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.8;
}

.site-footer{
  margin-top:0;
  border-top:1px solid var(--line);
  background:rgba(5,15,26,0.96);
  padding:64px 0 26px;
  position:relative;
  z-index:1;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,0.8fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:36px;
}
.footer-brand .brand-name{font-size:18px;}
.footer-brand p{font-size:13px;color:var(--text-3);line-height:1.85;margin-top:14px;max-width:38ch;}
.footer-col h4{
  font-size:13px;
  color:var(--text-3);
  letter-spacing:1.2px;
  font-weight:600;
  margin-bottom:16px;
}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{
  font-size:13.5px;
  color:var(--text-2);
  transition:color .2s var(--ease);
  word-break:break-word;
}
.footer-links a:hover{color:var(--cyan);}
.footer-dl{display:flex;flex-direction:column;gap:10px;}
.footer-dl a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:var(--text-2);
  transition:color .2s var(--ease);
}
.footer-dl a:hover{color:var(--cyan);}
.footer-dl i{color:var(--cyan);font-size:13px;width:16px;text-align:center;}
.footer-risk{font-size:12.5px;color:var(--text-3);line-height:1.9;}
.footer-risk b{color:var(--risk);font-weight:600;}
.friend-links{
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.friend-links h4{
  font-size:12.5px;
  color:var(--text-3);
  letter-spacing:1.2px;
  font-weight:600;
  margin-bottom:12px;
}
.friend-links ul{display:flex;flex-wrap:wrap;gap:10px;}
.friend-links li{min-width:0;}
.friend-links a{
  display:inline-flex;
  align-items:center;
  padding:5px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  font-size:12.5px;
  color:var(--text-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.friend-links a:hover{color:var(--cyan);border-color:var(--stroke);background:rgba(37,194,245,0.08);}
.footer-bottom{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--text-3);
}
.footer-bottom p{margin:0;max-width:100%;font-size:12.5px;color:var(--text-3);}

@media (max-width:1199px){
  .main-nav a{padding:0 11px;font-size:14.5px;}
  .header-right{gap:12px;}
}
@media (max-width:1023px){
  .section{padding:72px 0;}
  .hero{padding-top:52px;}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .hero-visual{padding-bottom:28px;}
  .main-nav{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quote-card:nth-child(2),.quote-card:nth-child(5){margin-top:0;}
  .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cms-layout{grid-template-columns:minmax(0,1fr);}
  .cms-side{position:static;}
  .board-layout{grid-template-columns:minmax(0,1fr);}
  .rules-layout{grid-template-columns:minmax(0,1fr);}
  .demo-layout{grid-template-columns:minmax(0,1fr);}
  .demo-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:10px;}
  .demo-tab{flex:0 0 auto;white-space:nowrap;min-height:48px;}
  .cta-band{flex-direction:column;align-items:flex-start;padding:36px 28px;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;}
}
@media (max-width:767px){
  .section{padding:52px 0;}
  .hero{padding-top:40px;}
  .brand-name{font-size:16.5px;}
  .brand-tag{font-size:10px;letter-spacing:.8px;}
  .header-inner{height:60px;}
  .quick-download{grid-template-columns:minmax(0,1fr);padding:18px;gap:12px;margin-top:36px;}
  .hero-actions{gap:10px;}
  .hero-actions .btn{flex:1 1 100%;}
  .float-card--a{left:0;bottom:0;}
  .float-card--b{right:0;bottom:38px;}
  .cms-item{grid-template-columns:minmax(0,1fr);gap:14px;}
  .cms-thumb{aspect-ratio:16/9;}
  .card{padding:22px 18px;}
  .download-block{padding:22px 18px;}
  .dl-grid{grid-template-columns:minmax(0,1fr);}
  .scene-grid{grid-template-columns:minmax(0,1fr);}
  .steps{grid-template-columns:minmax(0,1fr);}
  .case-grid{grid-template-columns:minmax(0,1fr);}
  .plan-grid{grid-template-columns:minmax(0,1fr);}
  .quote-grid{grid-template-columns:minmax(0,1fr);}
  .topic-grid{grid-template-columns:minmax(0,1fr);}
  .feature-grid{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:26px;}
  .cta-band{padding:28px 20px;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1 1 100%;}
  .faq-item summary{font-size:15px;padding:16px 18px;}
  .faq-answer{padding-left:14px;margin-left:18px;padding-right:18px;}
  .panel{padding:18px;}
  .panel-list li{flex-wrap:wrap;gap:4px;}
  .panel-list li span:last-child{text-align:left;}
  .btn{min-height:44px;}
  .btn-sm{min-height:40px;}
  .site-header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .card,.scene-card,.plan-card,.dl-card,.side-card,.demo-stage{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,36,55,0.9);}
  .quick-download{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,36,55,0.9);}
  .download-block{backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@media (max-width:520px){
  .site-container{padding:0 16px;}
  .hero-title{font-size:26px;}
  .section-title{font-size:21px;}
  .step-no{font-size:22px;}
  .float-card{font-size:11.5px;padding:8px 12px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* roulang page: article */
:root{
  --bg-1:#050F1A;
  --bg-2:#0A1B2C;
  --bg-3:#0E2437;
  --glass:rgba(18,44,70,0.55);
  --glass-solid:rgba(14,36,55,0.92);
  --stroke:rgba(96,182,255,0.18);
  --stroke-strong:rgba(96,182,255,0.45);
  --cyan:#25C2F5;
  --cyan-deep:#1B8FE0;
  --amber:#F0A63C;
  --pos:#35D6A4;
  --risk:#F0574A;
  --text:#EAF2FB;
  --text-2:#A9BCD0;
  --text-3:#7E93A8;
  --line:rgba(255,255,255,0.08);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 42px rgba(0,0,0,0.45);
  --glow:0 0 0 1px rgba(37,194,245,0.5),0 10px 26px rgba(37,194,245,0.28);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  padding:0;
  font-family:"PingFang SC","HarmonyOS Sans","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--bg-1);
  color:var(--text);
  font-size:16px;
  line-height:1.85;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.55;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(720px 460px at 10% 4%,rgba(37,194,245,0.12),transparent 70%),
    radial-gradient(620px 420px at 92% 26%,rgba(240,166,60,0.09),transparent 72%);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--cyan);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:#7CDCFB;}
button{font-family:inherit;}
p{margin:0 0 16px;}
ul,ol{margin:0 0 16px;padding-left:1.25em;}
h1,h2,h3,h4,h5,h6{margin:0 0 12px;line-height:1.3;font-weight:700;color:var(--text);}
.site-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:1;
}
/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(5,15,26,0.76);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(5,15,26,0.95);
  box-shadow:0 12px 30px rgba(0,0,0,0.42);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  height:72px;
  min-width:0;
}
.brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:0 0 auto;
  color:var(--text);
}
.brand:hover{color:var(--text);}
.brand-name{
  font-size:19px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:.2px;
}
.brand-name em{font-style:normal;color:var(--cyan);}
.brand-tag{
  font-size:11px;
  color:var(--text-3);
  letter-spacing:1.2px;
  line-height:1.4;
  margin-top:3px;
  white-space:nowrap;
}
.header-right{display:flex;align-items:center;gap:16px;min-width:0;}
.main-nav{display:flex;align-items:center;gap:4px;min-width:0;}
.main-nav a{
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  font-size:15px;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.main-nav a:hover{color:var(--text);background:rgba(37,194,245,0.10);}
.main-nav a.active{color:var(--text);background:rgba(37,194,245,0.14);}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  flex:0 0 auto;
}
.lang-switch span,.lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12.5px;
  line-height:1;
  color:var(--text-3);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lang-switch .is-active{background:var(--cyan);color:#04222F;font-weight:600;}
.lang-switch a:hover{color:var(--text);background:rgba(37,194,245,0.12);}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  color:var(--text);
  cursor:pointer;
  text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),filter .22s var(--ease);
}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;}
.btn-primary{
  background:linear-gradient(135deg,#25C2F5,#1B8FE0);
  color:#04222F;
  box-shadow:var(--glow);
}
.btn-primary:hover{
  color:#04222F;
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(37,194,245,0.6),0 14px 34px rgba(37,194,245,0.40);
}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{
  background:var(--glass);
  border-color:var(--stroke);
  color:var(--text);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:var(--amber);color:#fff;transform:translateY(-1px);}
.btn-ghost:active{transform:scale(.98);}
.btn-amber{
  background:linear-gradient(135deg,#F0A63C,#D8842A);
  color:#2A1704;
  box-shadow:0 0 0 1px rgba(240,166,60,0.45),0 10px 24px rgba(240,166,60,0.22);
}
.btn-amber:hover{color:#2A1704;filter:brightness(1.06);transform:translateY(-1px);}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.header-cta{min-height:40px;padding:0 18px;font-size:14px;}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-size:17px;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-toggle:hover{border-color:var(--stroke-strong);}
/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:120;display:none;}
.drawer.is-open{display:block;}
.drawer-mask{
  position:absolute;inset:0;
  background:rgba(3,10,18,0.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.drawer-panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(340px,86vw);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  background:var(--glass-solid);
  border-left:1px solid var(--stroke);
  box-shadow:-20px 0 50px rgba(0,0,0,0.5);
  overflow-y:auto;
  animation:drawerIn .26s var(--ease);
}
@keyframes drawerIn{from{transform:translateX(24px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.drawer-close{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.05);
  color:var(--text);font-size:18px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.drawer-close:hover{border-color:var(--stroke-strong);}
.lang-switch--drawer{align-self:flex-end;}
.drawer-nav{display:flex;flex-direction:column;margin-top:6px;}
.drawer-nav a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 12px;
  border-radius:10px;
  color:var(--text-2);
  font-size:15px;
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.drawer-nav a:hover{background:rgba(37,194,245,0.10);color:var(--text);}
.drawer-panel .btn{margin-top:auto;}
/* ---------- article head ---------- */
.site-main{position:relative;z-index:1;}
.article-hero{
  padding:34px 0 30px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,27,44,0.85),rgba(5,15,26,0));
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-3);
  margin:0 0 16px;
}
.breadcrumb a{color:var(--text-3);}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb i{font-size:10px;opacity:.65;}
.article-head h1{
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700;
  letter-spacing:-.4px;
  line-height:1.28;
  margin:0 0 16px;
  max-width:26em;
}
.article-lead{
  max-width:72ch;
  color:var(--text-2);
  font-size:15.5px;
  line-height:1.9;
  margin:0;
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-size:13px;
  color:var(--text-3);
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:6px;
  background:rgba(37,194,245,0.10);
  border:1px solid var(--stroke);
  color:var(--text-2);
  font-size:12px;
  line-height:1.5;
}
.meta-chip i{color:var(--cyan);font-size:11px;}
/* ---------- layout ---------- */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:32px;
  align-items:start;
  padding:44px 0 56px;
}
.article-main{min-width:0;}
.article-aside{
  position:sticky;
  top:92px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
/* ---------- content typography ---------- */
.article-content{
  font-size:16px;
  line-height:1.9;
  color:var(--text-2);
  min-width:0;
}
.article-content h2{
  position:relative;
  font-size:24px;
  color:var(--text);
  margin:38px 0 16px;
  padding-left:14px;
  scroll-margin-top:96px;
}
.article-content h2::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:6px;
  width:3px;
  border-radius:2px;
  background:var(--cyan);
}
.article-content h3{
  font-size:19px;
  color:var(--text);
  margin:26px 0 12px;
  scroll-margin-top:96px;
}
.article-content h4{font-size:17px;color:var(--text);margin:20px 0 10px;}
.article-content p{max-width:72ch;margin:0 0 18px;}
.article-content ul,.article-content ol{padding-left:1.35em;margin:0 0 18px;max-width:72ch;}
.article-content li{margin-bottom:8px;}
.article-content li::marker{color:var(--cyan);}
.article-content blockquote{
  margin:24px 0;
  padding:16px 20px;
  background:var(--glass);
  border-left:3px solid var(--amber);
  border-radius:12px;
  color:var(--text-2);
  max-width:72ch;
}
.article-content blockquote p:last-child{margin-bottom:0;}
.article-content img{border-radius:12px;margin:22px 0;max-width:100%;height:auto;}
.article-content figure{margin:24px 0;}
.article-content figcaption{font-size:12.5px;color:var(--text-3);margin-top:8px;line-height:1.7;}
.article-content a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;}
.article-content table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  font-size:14.5px;
  font-variant-numeric:tabular-nums;
}
.article-content thead th{
  background:rgba(37,194,245,0.10);
  color:var(--cyan);
  font-weight:600;
  font-size:13px;
  text-align:left;
  padding:12px 14px;
  border:0;
}
.article-content td{
  padding:12px 14px;
  border:0;
  border-top:1px solid var(--line);
  color:var(--text-2);
  vertical-align:top;
}
.article-content tbody tr:nth-child(even){background:rgba(255,255,255,0.03);}
.article-content hr{border:0;border-top:1px solid var(--line);margin:30px 0;}
/* ---------- aside cards ---------- */
.aside-card{
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  min-width:0;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.aside-card:hover{border-color:var(--stroke-strong);}
.aside-card h3{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  color:var(--text);
  margin:0 0 14px;
}
.aside-card h3 i{color:var(--cyan);font-size:13px;}
.toc-list{list-style:none;margin:0;padding:0;font-size:14px;max-height:340px;overflow-y:auto;}
.toc-list li{margin-bottom:2px;}
.toc-list a{
  display:block;
  padding:7px 10px;
  border-radius:8px;
  border-left:2px solid transparent;
  color:var(--text-2);
  line-height:1.55;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.toc-list a:hover{background:rgba(37,194,245,0.08);color:var(--text);}
.toc-list a.is-active{
  color:var(--cyan);
  border-left-color:var(--cyan);
  background:rgba(37,194,245,0.10);
}
.toc-empty{color:var(--text-3);font-size:13px;padding:6px 2px;}
.dl-mini{display:flex;flex-direction:column;gap:10px;}
.dl-mini a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  color:var(--text-2);
  font-size:13.5px;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.dl-mini a:hover{
  border-color:var(--stroke-strong);
  color:var(--text);
  background:rgba(37,194,245,0.10);
  transform:translateY(-1px);
}
.dl-mini a i{color:var(--cyan);font-size:15px;width:18px;text-align:center;}
.aside-note{font-size:12px;color:var(--text-3);line-height:1.75;margin:12px 0 0;}
/* ---------- risk / empty ---------- */
.risk-box{
  margin:34px 0 0;
  padding:18px 20px;
  background:rgba(240,87,74,0.07);
  border:1px solid rgba(240,87,74,0.28);
  border-left:3px solid var(--risk);
  border-radius:12px;
  max-width:72ch;
}
.risk-box strong{color:#FFB4AC;display:block;font-size:14px;margin-bottom:6px;}
.risk-box p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.85;}
.article-empty{
  padding:48px 28px;
  text-align:center;
  background:var(--glass);
  border:1px dashed var(--stroke);
  border-radius:var(--radius);
}
.article-empty i{font-size:30px;color:var(--text-3);margin-bottom:14px;display:block;}
.article-empty h2{font-size:20px;margin-bottom:10px;}
.article-empty p{color:var(--text-3);font-size:14px;margin-bottom:20px;}
/* ---------- bottom nav row ---------- */
.post-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.post-nav .back-list{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text-2);
}
.post-nav .back-list:hover{color:var(--cyan);}
.post-nav .back-list i{transition:transform .22s var(--ease);}
.post-nav .back-list:hover i{transform:translateX(-3px);}
.post-links{display:flex;flex-wrap:wrap;gap:10px;}
.post-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--glass);
  font-size:13.5px;
  color:var(--text-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.post-links a:hover{border-color:var(--amber);color:#fff;transform:translateY(-1px);}
/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:52px 0;
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(520px 260px at 50% 0%,rgba(37,194,245,0.16),transparent 72%);
}
.cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:1;
}
.cta-text h2{font-size:clamp(21px,2.4vw,28px);margin:0 0 8px;}
.cta-text p{margin:0;color:var(--text-3);font-size:13.5px;max-width:58ch;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;}
/* ---------- footer ---------- */
.site-footer{
  position:relative;
  z-index:1;
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:58px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:32px;
}
.footer-brand .brand-name{display:block;font-size:18px;margin-bottom:12px;}
.footer-brand p{font-size:13.5px;color:var(--text-3);line-height:1.85;max-width:34ch;margin:0;}
.footer-col h4{font-size:14px;color:var(--text);margin:0 0 14px;font-weight:600;}
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:13.5px;color:var(--text-3);}
.footer-links a:hover{color:var(--cyan);}
.footer-dl{display:flex;flex-direction:column;gap:9px;}
.footer-dl a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--text-2);
}
.footer-dl a:hover{color:var(--cyan);}
.footer-dl a i{width:16px;text-align:center;color:var(--text-3);}
.footer-dl a:hover i{color:var(--cyan);}
.footer-risk{font-size:12.5px;color:var(--text-3);line-height:1.9;margin:0;}
.footer-risk b{color:#FFB4AC;}
.friend-links{
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.friend-links h4{font-size:14px;color:var(--text);margin:0 0 12px;font-weight:600;}
.friend-links ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
}
.friend-links li a{font-size:13px;color:var(--text-3);}
.friend-links li a:hover{color:var(--cyan);}
.footer-bottom{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
}
.footer-bottom p{margin:0;font-size:12.5px;color:var(--text-3);}
/* ---------- responsive ---------- */
@media screen and (max-width:1023px){
  .main-nav{display:none;}
  .lang-switch{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .article-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding:36px 0 48px;}
  .article-aside{position:static;top:auto;flex-direction:row;flex-wrap:wrap;}
  .article-aside .aside-card{flex:1 1 280px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
@media screen and (max-width:767px){
  .header-inner{height:60px;}
  .brand-name{font-size:16.5px;}
  .brand-tag{font-size:10px;letter-spacing:.8px;}
  .article-hero{padding:24px 0 22px;}
  .article-content h2{font-size:21px;margin-top:30px;}
  .article-content h3{font-size:17.5px;}
  .article-aside{flex-direction:column;}
  .article-aside .aside-card{flex:1 1 auto;}
  .cta-band{padding:40px 0;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .site-footer{padding:44px 0 22px;}
}
@media screen and (max-width:520px){
  .site-container{padding:0 16px;}
  .brand-tag{display:none;}
  .article-content{font-size:15.5px;}
  .article-content p,.article-content li{max-width:none;}
  .footer-grid{grid-template-columns:1fr;gap:24px;}
  .footer-bottom{flex-direction:column;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1 1 100%;}
  .post-nav{flex-direction:column;align-items:flex-start;}
}

/* roulang page: category1 */
:root{
  --bg-1:#050F1A;
  --bg-2:#0A1B2C;
  --bg-3:#0E2437;
  --glass:rgba(18,44,70,0.55);
  --glass-solid:rgba(14,36,55,0.92);
  --stroke:rgba(96,182,255,0.18);
  --stroke-strong:rgba(96,182,255,0.45);
  --cyan:#25C2F5;
  --cyan-deep:#1B8FE0;
  --amber:#F0A63C;
  --pos:#35D6A4;
  --risk:#F0574A;
  --text:#EAF2FB;
  --text-2:#A9BCD0;
  --text-3:#7E93A8;
  --line:rgba(255,255,255,0.08);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 42px rgba(0,0,0,0.45);
  --glow:0 0 0 1px rgba(37,194,245,0.5),0 10px 26px rgba(37,194,245,0.28);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  padding:0;
  font-family:"PingFang SC","HarmonyOS Sans","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--bg-1);
  color:var(--text);
  font-size:16px;
  line-height:1.85;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.55;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(720px 460px at 10% 4%,rgba(37,194,245,0.12),transparent 70%),
    radial-gradient(620px 420px at 92% 26%,rgba(240,166,60,0.09),transparent 72%);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--cyan);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:#7CDCFB;}
button{font-family:inherit;}
h1,h2,h3,h4,h5,h6{color:var(--text);font-weight:700;margin:0;}
p{margin:0;}
ul,ol{margin:0;padding:0;}
.site-main{position:relative;z-index:1;}
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(5,15,26,0.76);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(5,15,26,0.95);
  box-shadow:0 12px 30px rgba(0,0,0,0.42);
}
.site-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:1;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  height:72px;
  min-width:0;
}
.brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:0 0 auto;
  color:var(--text);
}
.brand:hover{color:var(--text);}
.brand-name{
  font-size:19px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:.2px;
  color:var(--text);
}
.brand-name em{font-style:normal;color:var(--cyan);}
.brand-tag{
  font-size:11px;
  color:var(--text-3);
  letter-spacing:1.2px;
  line-height:1.4;
  margin-top:3px;
  white-space:nowrap;
}
.header-right{display:flex;align-items:center;gap:14px;min-width:0;}
.main-nav{display:flex;align-items:center;gap:4px;min-width:0;}
.main-nav a{
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  font-size:15px;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.main-nav a:hover{color:var(--text);background:rgba(37,194,245,0.10);}
.main-nav a.active{color:var(--text);background:rgba(37,194,245,0.14);}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  flex:0 0 auto;
}
.lang-switch span,.lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12.5px;
  line-height:1;
  color:var(--text-3);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lang-switch a:hover{color:var(--text);background:rgba(37,194,245,0.12);}
.lang-switch .is-current{
  background:linear-gradient(135deg,#25C2F5,#1B8FE0);
  color:#04222F;
  font-weight:600;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  color:var(--text);
  cursor:pointer;
  text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),filter .22s var(--ease);
}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;}
.btn-primary{
  background:linear-gradient(135deg,#25C2F5,#1B8FE0);
  color:#04222F;
  box-shadow:var(--glow);
}
.btn-primary:hover{
  color:#04222F;
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(37,194,245,0.6),0 14px 34px rgba(37,194,245,0.40);
}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{
  background:var(--glass);
  border-color:var(--stroke);
  color:var(--text);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:var(--amber);color:#fff;transform:translateY(-1px);}
.btn-ghost:active{transform:scale(.98);}
.btn-amber{
  background:linear-gradient(135deg,#F0A63C,#D8842A);
  color:#2A1704;
  box-shadow:0 0 0 1px rgba(240,166,60,0.45),0 10px 24px rgba(240,166,60,0.22);
}
.btn-amber:hover{color:#2A1704;filter:brightness(1.06);transform:translateY(-1px);}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.header-cta{min-height:40px;padding:0 18px;font-size:14px;flex:0 0 auto;}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-size:17px;
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--stroke-strong);}
.drawer{position:fixed;inset:0;z-index:120;display:none;}
.drawer.is-open{display:block;}
.drawer-mask{
  position:absolute;inset:0;
  background:rgba(3,10,18,0.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(340px,86vw);
  display:flex;flex-direction:column;gap:12px;
  padding:20px;
  background:var(--glass-solid);
  border-left:1px solid var(--stroke);
  box-shadow:-20px 0 50px rgba(0,0,0,0.5);
  overflow-y:auto;
  animation:drawerIn .26s var(--ease);
}
@keyframes drawerIn{from{transform:translateX(24px);opacity:.4;}to{transform:translateX(0);opacity:1;}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.drawer-close{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--stroke);background:rgba(255,255,255,0.05);
  color:var(--text);font-size:18px;cursor:pointer;
}
.drawer-close:hover{border-color:var(--stroke-strong);}
.drawer-lang{align-self:flex-start;}
.drawer-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.drawer-nav a{
  display:flex;align-items:center;min-height:46px;padding:0 14px;
  border-radius:12px;color:var(--text-2);font-size:15px;
  border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.drawer-nav a:hover{background:rgba(37,194,245,0.10);color:var(--text);}
.drawer-nav a.active{background:rgba(37,194,245,0.14);color:var(--text);border-color:var(--stroke);}
.drawer-cta{margin-top:12px;width:100%;}
.no-scroll{overflow:hidden;}

/* 分类页头 */
.cat-head{
  position:relative;
  padding:34px 0 30px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,36,55,0.78),rgba(5,15,26,0));
}
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--text-3);margin-bottom:14px;
}
.breadcrumb a{color:var(--text-3);}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb i{font-size:10px;color:var(--text-3);opacity:.7;}
.cat-head-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:end;
}
.cat-title{
  font-size:clamp(25px,3.4vw,38px);
  line-height:1.28;
  letter-spacing:-.4px;
  margin-bottom:14px;
}
.cat-title span{color:var(--cyan);}
.cat-desc{max-width:72ch;color:var(--text-2);font-size:15.5px;line-height:1.85;}
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.cat-tab{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border-radius:999px;font-size:13px;color:var(--text-2);
  border:1px solid var(--stroke);background:rgba(255,255,255,0.03);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
  white-space:nowrap;
}
.cat-tab:hover{color:var(--text);border-color:var(--stroke-strong);background:rgba(37,194,245,0.10);}

/* 风险条 */
.risk-strip{
  border-bottom:1px solid rgba(240,87,74,0.26);
  background:rgba(240,87,74,0.06);
  position:relative;z-index:1;
}
.risk-strip .site-container{
  display:flex;align-items:center;gap:12px;
  min-height:54px;padding-top:10px;padding-bottom:10px;
  font-size:13.5px;color:var(--text-2);
}
.dot-risk{
  width:8px;height:8px;border-radius:50%;background:var(--risk);
  flex:0 0 auto;box-shadow:0 0 0 4px rgba(240,87,74,0.18);
}
.risk-strip b{color:#FFB7B0;font-weight:600;}

/* 通用板块 */
.section{padding:76px 0;position:relative;}
.section--alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:760px;margin-bottom:34px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:1.4px;color:var(--cyan);
  margin-bottom:12px;text-transform:uppercase;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan);display:block;}
.section-title{font-size:clamp(22px,2.5vw,32px);line-height:1.32;letter-spacing:-.3px;margin-bottom:12px;}
.section-lead{color:var(--text-2);font-size:15.5px;line-height:1.85;}

/* 规则要点导读 */
.rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.rule-card{
  min-width:0;
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:24px 22px;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
  display:flex;flex-direction:column;gap:10px;
}
.rule-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);box-shadow:var(--shadow);}
.rule-ico{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(37,194,245,0.12);
  border:1px solid var(--stroke);
  color:var(--cyan);font-size:17px;
}
.rule-card h3{font-size:18px;line-height:1.45;font-weight:600;}
.rule-card p{color:var(--text-2);font-size:14.5px;line-height:1.8;}
.rule-points{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.rule-points li{
  position:relative;padding-left:14px;
  font-size:13.5px;color:var(--text-3);line-height:1.75;
}
.rule-points li::before{
  content:"";position:absolute;left:0;top:9px;
  width:4px;height:4px;border-radius:50%;background:var(--amber);
}

/* 概念速查 */
.term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.term-card{
  min-width:0;
  display:flex;flex-direction:column;gap:6px;
  padding:20px 22px;
  border-radius:var(--radius-sm);
  border:1px solid var(--stroke);
  background:rgba(18,44,70,0.42);
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.term-card:hover{transform:translateY(-3px);border-color:var(--stroke-strong);background:rgba(18,44,70,0.66);}
.term-card h3{font-size:16.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.term-card h3::before{content:"#";color:var(--cyan);font-size:14px;font-weight:700;}
.term-card p{font-size:14px;color:var(--text-2);line-height:1.78;}

/* 流程 */
.flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.flow-step{
  min-width:0;position:relative;
  padding:22px 20px 20px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(18,44,70,0.62),rgba(10,27,44,0.62));
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.flow-step:hover{transform:translateY(-4px);border-color:var(--stroke-strong);}
.flow-num{
  font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:700;line-height:1;
  color:var(--cyan);
  letter-spacing:1px;
  margin-bottom:12px;
  text-shadow:0 0 18px rgba(37,194,245,0.45);
}
.flow-step h3{font-size:16.5px;font-weight:600;margin-bottom:8px;line-height:1.5;}
.flow-step p{font-size:13.8px;color:var(--text-2);line-height:1.8;}
.flow-step::after{
  content:"";position:absolute;right:-11px;top:38px;
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);opacity:.55;
}
.flow-step:last-child::after{display:none;}

/* 场景 */
.scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.scene-card{
  min-width:0;
  padding:22px 20px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.scene-card:hover{transform:translateY(-4px);border-color:rgba(240,166,60,0.45);box-shadow:var(--shadow);}
.scene-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:6px;font-size:12px;color:var(--amber);
  background:rgba(240,166,60,0.10);
  border:1px solid rgba(240,166,60,0.30);
  margin-bottom:12px;
}
.scene-card h3{font-size:16.5px;font-weight:600;line-height:1.5;margin-bottom:8px;}
.scene-card p{font-size:13.8px;color:var(--text-2);line-height:1.8;}

/* 下载 */
.dl-band{
  border-radius:22px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(560px 300px at 12% 0%,rgba(37,194,245,0.14),transparent 70%),
    linear-gradient(180deg,rgba(18,44,70,0.72),rgba(10,27,44,0.86));
  padding:36px 30px;
  box-shadow:var(--shadow);
}
.dl-band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;}
.dl-band-head h2{font-size:clamp(21px,2.4vw,29px);line-height:1.35;letter-spacing:-.3px;}
.dl-band-head .dl-note{font-size:13px;color:var(--text-3);max-width:520px;line-height:1.75;}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.dl-card{
  min-width:0;
  display:flex;flex-direction:column;gap:12px;
  padding:22px 20px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:rgba(5,15,26,0.55);
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.dl-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);}
.dl-icon{
  width:46px;height:46px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--cyan);
  background:rgba(37,194,245,0.12);
  border:1px solid var(--stroke);
}
.dl-card h3{font-size:17px;font-weight:600;}
.dl-card p{font-size:13.6px;color:var(--text-2);line-height:1.78;flex:1 1 auto;}
.dl-card .btn{width:100%;}
.dl-warn{margin-top:18px;font-size:12.5px;color:var(--text-3);line-height:1.8;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px;}
.faq-item{
  border-radius:var(--radius-sm);
  border:1px solid var(--stroke);
  background:rgba(18,44,70,0.42);
  overflow:hidden;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.faq-item[open]{border-color:var(--stroke-strong);background:rgba(18,44,70,0.66);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;
  font-size:15.5px;font-weight:600;color:var(--text);
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:12px;color:var(--text-3);
  transition:transform .22s var(--ease),color .22s var(--ease);
  flex:0 0 auto;
}
.faq-item[open] summary::after{transform:rotate(180deg);color:var(--cyan);}
.faq-item summary:hover{color:#9FE6FF;}
.faq-body{
  padding:0 20px 20px;
  border-left:3px solid var(--cyan);
  margin-left:20px;
  padding-left:16px;
}
.faq-body p{font-size:14.5px;color:var(--text-2);line-height:1.85;}

/* 收束 */
.closing-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 30px;
  border-radius:20px;
  border:1px solid var(--stroke);
  background:linear-gradient(120deg,rgba(14,36,55,0.92),rgba(10,27,44,0.92));
  position:relative;overflow:hidden;
}
.closing-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 220px at 50% 0%,rgba(37,194,245,0.16),transparent 70%);
  pointer-events:none;
}
.closing-left{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.closing-left h2{font-size:19px;font-weight:600;line-height:1.5;}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--text-3);
}
.back-link:hover{color:var(--cyan);}
.closing-right{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;}

/* 页脚 */
.site-footer{
  position:relative;z-index:1;
  margin-top:0;
  padding:64px 0 26px;
  background:rgba(5,15,26,0.92);
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line);
}
.footer-brand .brand-name{font-size:18px;}
.footer-brand p{margin-top:12px;font-size:13.5px;color:var(--text-3);line-height:1.85;max-width:38ch;}
.footer-col h4{font-size:14px;font-weight:600;color:var(--text);margin-bottom:14px;letter-spacing:.4px;}
.footer-links,.footer-dl{display:flex;flex-direction:column;gap:10px;}
.footer-links a,.footer-dl a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--text-3);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.footer-links a:hover,.footer-dl a:hover{color:var(--cyan);transform:translateX(2px);}
.footer-dl a i{font-size:14px;color:var(--cyan);}
.footer-risk{font-size:12.8px;color:var(--text-3);line-height:1.85;}
.footer-risk b{color:#FFB7B0;font-weight:600;}
.friend-links{padding:24px 0;border-bottom:1px solid var(--line);}
.friend-links h4{font-size:13.5px;font-weight:600;color:var(--text-2);margin-bottom:12px;letter-spacing:.4px;}
.friend-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px;}
.friend-links ul a{font-size:13px;color:var(--text-3);}
.friend-links ul a:hover{color:var(--cyan);}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-top:22px;
  font-size:12.5px;color:var(--text-3);
}
.footer-bottom p{line-height:1.8;}

/* 响应式 */
@media (max-width:1099px){
  .main-nav a{padding:0 10px;font-size:14px;}
  .header-cta{padding:0 14px;font-size:13px;}
  .header-right{gap:10px;}
  .cat-head-inner{grid-template-columns:minmax(0,1fr);gap:20px;}
  .cat-tabs{justify-content:flex-start;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:26px;}
  .footer-col:last-child{grid-column:1 / -1;}
}
@media (max-width:991px){
  .main-nav{display:none;}
  .header-cta{display:none;}
  .lang-switch{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-inner{height:64px;}
  .section{padding:58px 0;}
  .rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .flow-step::after{display:none;}
  .scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dl-band{padding:28px 22px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:767px){
  body{font-size:15.5px;}
  .site-container{padding:0 16px;}
  .header-inner{height:60px;gap:12px;}
  .brand-name{font-size:17px;}
  .brand-tag{font-size:10px;letter-spacing:.8px;}
  .cat-head{padding:26px 0 24px;}
  .cat-desc{font-size:14.8px;}
  .section{padding:48px 0;}
  .term-grid{grid-template-columns:minmax(0,1fr);}
  .closing-band{padding:22px 20px;}
  .closing-right{width:100%;}
  .closing-right .btn{flex:1 1 auto;}
  .site-footer{padding:48px 0 22px;}
}
@media (max-width:520px){
  .rule-grid{grid-template-columns:minmax(0,1fr);}
  .flow-grid{grid-template-columns:minmax(0,1fr);}
  .scene-grid{grid-template-columns:minmax(0,1fr);}
  .dl-grid{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr);}
  .cat-title{font-size:23px;}
  .section-title{font-size:21px;}
  .btn{width:100%;}
  .cat-tab{width:auto;}
  .closing-right .btn{width:100%;}
}