/* ==========================================================================
   WanXiang — Violet Nebula Design System (紫晶星云)
   万向娱乐平台官方网站 · 全站样式
   体系：深紫罗兰夜色底 + 电光紫 + 霞粉流光 + 玻璃拟态 + 星轨装饰
   ========================================================================== */

:root{
  --void:      #0d0819;               /* 页面主底：深紫黑 */
  --void-2:    #130c26;               /* 次级区块底 */
  --void-3:    #1a1130;               /* 卡片底 */
  --panel:     rgba(30,20,54,.62);    /* 玻璃面板 */
  --panel-2:   rgba(43,29,76,.42);    /* 浅玻璃面板 */

  --nebula:    #a78bfa;               /* 主紫：电光紫 */
  --nebula-2:  #c4b1fd;               /* 亮紫 */
  --nebula-3:  #7c5ce0;               /* 深紫 */
  --nebula-4:  #4c3888;               /* 暗紫 */
  --magenta:   #f472b6;               /* 霞粉点缀 */
  --starcyan:  #67e8f9;               /* 星青微点缀 */

  --ink:       #f2edff;               /* 乳白紫：主文字 */
  --ink-2:     #bcb0dd;               /* 次级文字 */
  --ink-3:     #887ba8;               /* 弱化文字 */

  --line:      rgba(167,139,250,.16);
  --line-2:    rgba(167,139,250,.4);

  --grad-brand: linear-gradient(115deg,#c4b1fd 0%,#a78bfa 45%,#7c5ce0 100%);
  --grad-aurora: linear-gradient(120deg,#a78bfa 0%,#f472b6 100%);
  --grad-line: linear-gradient(90deg,transparent,rgba(167,139,250,.55),transparent);

  --shadow:     0 26px 70px rgba(4,2,12,.66);
  --shadow-glow: 0 16px 48px rgba(139,92,246,.22);
  --r-lg: 22px; --r-md: 16px; --r-sm: 10px;
  --wrap: 1180px;
  --font: "HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--void);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  font-size:16px;
}
/* 星点 + 星云氛围层 */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(196,177,253,.8),transparent 55%),
    radial-gradient(1.2px 1.2px at 68% 9%,rgba(244,114,182,.7),transparent 55%),
    radial-gradient(1.6px 1.6px at 88% 42%,rgba(196,177,253,.75),transparent 55%),
    radial-gradient(1.1px 1.1px at 32% 66%,rgba(103,232,249,.6),transparent 55%),
    radial-gradient(1.4px 1.4px at 54% 88%,rgba(196,177,253,.6),transparent 55%),
    radial-gradient(1.2px 1.2px at 78% 74%,rgba(244,114,182,.55),transparent 55%),
    radial-gradient(1px 1px at 22% 90%,rgba(196,177,253,.5),transparent 55%),
    radial-gradient(1px 1px at 45% 38%,rgba(196,177,253,.45),transparent 55%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(640px 420px at 85% -6%,rgba(124,92,224,.20),transparent 65%),
    radial-gradient(560px 380px at -8% 30%,rgba(244,114,182,.10),transparent 65%),
    radial-gradient(720px 500px at 50% 108%,rgba(124,92,224,.14),transparent 65%);
}
img{ max-width:100%; display:block; }
a{ color:var(--nebula-2); text-decoration:none; transition:color .25s; }
a:hover{ color:var(--magenta); }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(167,139,250,.35); color:#fff; }

.wx-wrap{ width:min(var(--wrap),92%); margin:0 auto; }
.wx-sec{ padding:92px 0; position:relative; }
.wx-sec.alt{ background:linear-gradient(180deg,transparent,rgba(26,17,48,.5) 18%,rgba(26,17,48,.5) 82%,transparent); }

/* ---------- 通用小件 ---------- */
.wx-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:999px;
  border:1px solid var(--line-2);
  background:var(--panel);
  color:var(--nebula-2); font-size:13px; letter-spacing:1px;
}
.wx-chip i{
  width:6px; height:6px; border-radius:50%;
  background:var(--magenta); box-shadow:0 0 10px var(--magenta);
  animation:wxPulse 2.4s ease-in-out infinite;
}
@keyframes wxPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.72)} }

.wx-sec-head{ text-align:center; max-width:760px; margin:0 auto 54px; }
.wx-sec-head h2{
  font-size:clamp(26px,3.4vw,38px); line-height:1.3; letter-spacing:1px;
  font-weight:800; margin:18px 0 14px;
}
.wx-sec-head h2 em{
  font-style:normal;
  background:var(--grad-aurora);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wx-sec-head p{ color:var(--ink-2); font-size:15.5px; }
.wx-hr{ height:1px; background:var(--grad-line); border:0; margin:0 auto; width:min(1180px,92%); }

/* ---------- 按钮 ---------- */
.wx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 34px; border-radius:999px; font-size:15.5px; font-weight:700;
  letter-spacing:1px; border:1px solid transparent; transition:all .3s; white-space:nowrap;
}
.wx-btn.primary{
  background:var(--grad-brand); color:#160c2e;
  box-shadow:0 12px 34px rgba(139,92,246,.4);
}
.wx-btn.primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(139,92,246,.55); color:#160c2e; }
.wx-btn.ghost{
  border-color:var(--line-2); color:var(--nebula-2); background:rgba(30,20,54,.4);
}
.wx-btn.ghost:hover{ background:rgba(167,139,250,.14); transform:translateY(-3px); color:#fff; }
.wx-btn.sm{ padding:10px 22px; font-size:14px; }

/* ---------- 顶部通告条 ---------- */
.wx-topbar{
  font-size:13px; color:var(--ink-2);
  background:linear-gradient(90deg,rgba(124,92,224,.16),rgba(244,114,182,.12),rgba(124,92,224,.16));
  border-bottom:1px solid var(--line);
  position:relative; z-index:60;
}
.wx-topbar .in{
  width:min(var(--wrap),92%); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:38px; padding:4px 0; flex-wrap:wrap;
}
.wx-topbar .st{ display:inline-flex; align-items:center; gap:8px; }
.wx-topbar .st i{
  width:7px; height:7px; border-radius:50%; background:#34d399;
  box-shadow:0 0 10px #34d399; animation:wxPulse 2.4s infinite;
}
.wx-topbar .st b{ color:var(--nebula-2); font-weight:600; }
.wx-topbar .rt{ display:inline-flex; align-items:center; gap:18px; }
.wx-topbar .rt a{ color:var(--ink-2); font-size:13px; }
.wx-topbar .rt a:hover{ color:var(--magenta); }

/* ---------- 主导航 ---------- */
.wx-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,8,25,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.wx-header .in{
  width:min(var(--wrap),92%); margin:0 auto;
  display:flex; align-items:center; gap:28px; min-height:72px;
}
.wx-brand{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); }
.wx-brand:hover{ color:var(--ink); }
.wx-brand .mark{ width:42px; height:42px; flex:0 0 42px; }
.wx-brand .tx b{
  display:block; font-size:19px; letter-spacing:3px; font-weight:800; line-height:1.2;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wx-brand .tx span{ display:block; font-size:10.5px; letter-spacing:2.6px; color:var(--ink-3); text-transform:uppercase; }

.wx-nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.wx-nav a{
  padding:9px 15px; border-radius:9px; font-size:14.5px; color:var(--ink-2);
  letter-spacing:.6px; transition:all .25s; position:relative;
}
.wx-nav a:hover{ color:#fff; background:rgba(167,139,250,.12); }
.wx-nav a.on{ color:#fff; background:rgba(167,139,250,.16); box-shadow:inset 0 0 0 1px var(--line-2); }
.wx-header .cta{ margin-left:10px; }

.wx-burger{
  display:none; width:44px; height:44px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--panel);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.wx-burger i{ display:block; width:19px; height:2px; background:var(--nebula-2); border-radius:2px; transition:all .3s; }
.wx-burger.open i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.wx-burger.open i:nth-child(2){ opacity:0; }
.wx-burger.open i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.wx-hero{
  position:relative; overflow:hidden;
  padding:118px 0 96px;
  background:url(../images/hero-lg.jpg) center/cover no-repeat;
}
.wx-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg,rgba(13,8,25,.96) 0%,rgba(13,8,25,.82) 38%,rgba(13,8,25,.38) 72%,rgba(13,8,25,.55) 100%);
}
.wx-hero .orbit{
  position:absolute; border:1px dashed rgba(167,139,250,.22); border-radius:50%;
  pointer-events:none; animation:wxSpin 46s linear infinite;
}
.wx-hero .orbit.o1{ width:560px; height:560px; right:-140px; top:-120px; }
.wx-hero .orbit.o2{ width:760px; height:760px; right:-240px; top:-220px; animation-duration:70s; animation-direction:reverse; }
.wx-hero .orbit i{
  position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%;
  background:var(--magenta); box-shadow:0 0 14px var(--magenta);
}
@keyframes wxSpin{ to{ transform:rotate(360deg); } }
.wx-hero .in{ position:relative; z-index:2; width:min(var(--wrap),92%); margin:0 auto; max-width:760px; }
.wx-hero h1{
  font-size:clamp(30px,4.6vw,52px); line-height:1.26; letter-spacing:2px;
  font-weight:900; margin:22px 0 20px;
}
.wx-hero h1 em{
  font-style:normal;
  background:var(--grad-aurora);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wx-hero .lead{ color:var(--ink-2); font-size:16.5px; max-width:640px; margin-bottom:34px; }
.wx-hero .btns{ display:flex; gap:16px; flex-wrap:wrap; }
.wx-hero .tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; }
.wx-hero .tags span{
  font-size:12.5px; color:var(--ink-2); padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(19,12,38,.6); letter-spacing:1px;
}

/* ---------- 数据条 ---------- */
.wx-stats{ position:relative; z-index:3; margin-top:-46px; }
.wx-stats .grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden;
  background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.wx-stats .cell{
  background:linear-gradient(180deg,#170f2b,#120b23);
  padding:30px 20px; text-align:center;
}
.wx-stats .cell b{
  display:block; font-size:clamp(26px,3vw,36px); font-weight:900; letter-spacing:.5px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wx-stats .cell span{ font-size:13.5px; color:var(--ink-3); letter-spacing:1.6px; }

/* ---------- 品牌理念（万向诠释） ---------- */
.wx-philo .grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.wx-philo h2{ font-size:clamp(25px,3.2vw,36px); line-height:1.36; font-weight:800; margin:18px 0 18px; letter-spacing:1px; }
.wx-philo h2 em{ font-style:normal; background:var(--grad-aurora); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wx-philo p{ color:var(--ink-2); margin-bottom:14px; font-size:15.5px; }
.wx-philo .words{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.wx-philo .words li{
  border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px;
  background:var(--panel); transition:all .3s;
}
.wx-philo .words li:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.wx-philo .words b{ display:block; color:var(--nebula-2); font-size:16px; margin-bottom:6px; }
.wx-philo .words span{ display:block; font-size:13.5px; color:var(--ink-3); line-height:1.7; }
.wx-philo .visual{ position:relative; }
.wx-philo .visual img{ border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow); }
.wx-philo .visual::after{
  content:""; position:absolute; inset:-22px; z-index:-1; border-radius:30px;
  background:radial-gradient(420px 300px at 70% 20%,rgba(167,139,250,.22),transparent 70%);
}

/* ---------- 游戏卡片 ---------- */
.wx-games .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.wx-game{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--void-3);
  transition:all .35s;
}
.wx-game:hover{ transform:translateY(-7px); border-color:var(--line-2); box-shadow:var(--shadow-glow); }
.wx-game .pic{ aspect-ratio:3/4; overflow:hidden; position:relative; }
.wx-game .pic img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.wx-game:hover .pic img{ transform:scale(1.06); }
.wx-game .pic::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(13,8,25,.92) 96%);
}
.wx-game .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:12px; letter-spacing:1.4px; color:#fff; padding:5px 13px; border-radius:999px;
  background:rgba(124,92,224,.55); border:1px solid rgba(196,177,253,.5);
  backdrop-filter:blur(6px);
}
.wx-game .tx{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 20px 18px; }
.wx-game .tx h3{ font-size:19px; letter-spacing:1.2px; margin-bottom:6px; }
.wx-game .tx p{ font-size:13px; color:var(--ink-3); line-height:1.65; }
.wx-game .meta{ display:flex; align-items:center; gap:14px; margin-top:12px; font-size:12.5px; color:var(--ink-2); }
.wx-game .meta em{ font-style:normal; color:var(--magenta); }

/* ---------- 优势卡片 ---------- */
.wx-feats .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.wx-feat{
  position:relative; padding:32px 28px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:linear-gradient(165deg,rgba(43,29,76,.5),rgba(19,12,38,.72));
  transition:all .35s; overflow:hidden;
}
.wx-feat::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:var(--grad-line);
}
.wx-feat:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-glow); }
.wx-feat .ic{
  width:52px; height:52px; border-radius:14px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,rgba(167,139,250,.3),rgba(244,114,182,.18));
  border:1px solid var(--line-2);
}
.wx-feat .ic svg{ width:26px; height:26px; stroke:var(--nebula-2); }
.wx-feat h3{ font-size:18px; letter-spacing:1px; margin-bottom:10px; }
.wx-feat p{ font-size:14px; color:var(--ink-2); line-height:1.8; }

/* ---------- 开户步骤 ---------- */
.wx-steps .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:wxstep; }
.wx-step{
  position:relative; padding:30px 24px 26px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--panel); transition:all .3s;
}
.wx-step:hover{ border-color:var(--line-2); transform:translateY(-5px); }
.wx-step::before{
  counter-increment:wxstep; content:"0" counter(wxstep);
  display:block; font-size:34px; font-weight:900; letter-spacing:1px; margin-bottom:14px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.92;
}
.wx-step h3{ font-size:16.5px; margin-bottom:8px; letter-spacing:.8px; }
.wx-step p{ font-size:13.5px; color:var(--ink-3); line-height:1.75; }
.wx-step .lamp{
  position:absolute; top:26px; right:22px; width:8px; height:8px; border-radius:50%;
  background:var(--nebula); box-shadow:0 0 12px var(--nebula);
}
.wx-steps .more{ text-align:center; margin-top:44px; }

/* ---------- 资讯卡片 ---------- */
.wx-news .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.wx-ncard{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--void-3); transition:all .35s; display:flex; flex-direction:column;
}
.wx-ncard:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-glow); }
.wx-ncard .pic{ aspect-ratio:16/10; overflow:hidden; }
.wx-ncard .pic img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.wx-ncard:hover .pic img{ transform:scale(1.05); }
.wx-ncard .tx{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.wx-ncard .date{ font-size:12.5px; color:var(--ink-3); letter-spacing:1.2px; margin-bottom:10px; }
.wx-ncard .date em{ font-style:normal; color:var(--nebula-2); }
.wx-ncard h3{ font-size:17px; line-height:1.55; margin-bottom:10px; }
.wx-ncard h3 a{ color:var(--ink); }
.wx-ncard h3 a:hover{ color:var(--magenta); }
.wx-ncard p{ font-size:13.5px; color:var(--ink-3); flex:1; }
.wx-ncard .go{ margin-top:16px; font-size:13.5px; color:var(--nebula-2); letter-spacing:1px; }

/* ---------- FAQ 手风琴 ---------- */
.wx-faq-list{ max-width:860px; margin:0 auto; }
.wx-faq{
  border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:14px;
  background:var(--panel); overflow:hidden; transition:border-color .3s;
}
.wx-faq.open{ border-color:var(--line-2); }
.wx-faq button{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:20px 24px; background:none; border:0; color:var(--ink);
  font-size:16px; font-weight:600; letter-spacing:.6px; line-height:1.55;
}
.wx-faq button .q{
  flex:0 0 26px; height:26px; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#160c2e;
  background:var(--grad-brand);
}
.wx-faq button .ar{
  margin-left:auto; flex:0 0 auto; width:20px; height:20px; position:relative; transition:transform .3s;
}
.wx-faq button .ar::before,.wx-faq button .ar::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--nebula-2); border-radius:2px;
  transform:translate(-50%,-50%);
}
.wx-faq button .ar::before{ width:12px; height:2px; }
.wx-faq button .ar::after{ width:2px; height:12px; transition:opacity .3s; }
.wx-faq.open button .ar::after{ opacity:0; }
.wx-faq .ans{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.wx-faq .ans p{ padding:0 24px 22px 64px; color:var(--ink-2); font-size:14.5px; line-height:1.85; }
.wx-faq .ans a{ color:var(--nebula-2); border-bottom:1px dashed var(--line-2); }

/* ---------- 页脚 ---------- */
.wx-flink-bar{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(19,12,38,.55); padding:20px 0;
}
.wx-flink-bar .in{ width:min(var(--wrap),92%); margin:0 auto; text-align:center; }
.wx-flink-bar b{ display:block; font-size:13px; color:var(--ink-3); letter-spacing:2px; margin-bottom:10px; font-weight:600; }
.wx-flink-bar .ls{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; }
.wx-flink-bar a{ font-size:13.5px; color:var(--ink-2); letter-spacing:.6px; }
.wx-flink-bar a:hover{ color:var(--magenta); }

.wx-footer{ background:linear-gradient(180deg,rgba(19,12,38,.4),rgba(9,5,18,.96)); padding:64px 0 0; }
.wx-footer .cols{
  width:min(var(--wrap),92%); margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:48px;
}
.wx-footer .col .bt{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.wx-footer .col .bt svg{ width:36px; height:36px; }
.wx-footer .col .bt b{
  font-size:17px; letter-spacing:2.4px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wx-footer .col p{ font-size:13.5px; color:var(--ink-3); line-height:1.9; }
.wx-footer .col h4{ font-size:14.5px; color:var(--nebula-2); letter-spacing:1.6px; margin-bottom:16px; font-weight:700; }
.wx-footer .col ul li{ margin-bottom:10px; }
.wx-footer .col ul a{ font-size:13.5px; color:var(--ink-2); }
.wx-footer .col ul a:hover{ color:var(--magenta); }
.wx-footer .col .info li{ font-size:13.5px; color:var(--ink-3); margin-bottom:9px; }
.wx-footer .col .info b{ color:var(--ink-2); font-weight:600; }
.wx-copy{
  border-top:1px solid var(--line); padding:22px 0; text-align:center;
  font-size:12.5px; color:var(--ink-3); line-height:1.9;
}
.wx-copy .in{ width:min(var(--wrap),92%); margin:0 auto; }
.wx-copy a{ color:var(--ink-3); }
.wx-copy a:hover{ color:var(--nebula-2); }

/* ---------- 子页面 Page Hero ---------- */
.wx-phero{
  position:relative; padding:78px 0 62px; overflow:hidden;
  background:
    radial-gradient(640px 320px at 82% 0%,rgba(124,92,224,.24),transparent 70%),
    radial-gradient(420px 260px at 10% 100%,rgba(244,114,182,.12),transparent 70%),
    linear-gradient(180deg,rgba(19,12,38,.6),transparent);
  border-bottom:1px solid var(--line);
}
.wx-phero .orbit{
  position:absolute; border:1px dashed rgba(167,139,250,.2); border-radius:50%;
  width:420px; height:420px; right:-120px; top:-160px; animation:wxSpin 52s linear infinite;
}
.wx-phero .orbit i{
  position:absolute; top:-4px; left:50%; width:9px; height:9px; border-radius:50%;
  background:var(--starcyan); box-shadow:0 0 12px var(--starcyan);
}
.wx-phero .in{ position:relative; z-index:2; width:min(var(--wrap),92%); margin:0 auto; }
.wx-phero h1{ font-size:clamp(25px,3.6vw,40px); font-weight:900; letter-spacing:2px; margin:16px 0 12px; }
.wx-phero h1 em{ font-style:normal; background:var(--grad-aurora); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wx-phero p{ color:var(--ink-2); max-width:720px; font-size:15.5px; }
.wx-crumb{ font-size:13px; color:var(--ink-3); letter-spacing:.6px; margin-bottom:16px; }
.wx-crumb a{ color:var(--ink-3); }
.wx-crumb a:hover{ color:var(--nebula-2); }
.wx-crumb em{ font-style:normal; color:var(--nebula-2); }

/* ---------- 内容排版（文章/详情） ---------- */
.wx-article{ max-width:860px; margin:0 auto; }
.wx-article h2{
  font-size:23px; letter-spacing:1px; margin:44px 0 18px; padding-left:16px;
  border-left:3px solid var(--nebula); line-height:1.5;
}
.wx-article h3{ font-size:18.5px; margin:30px 0 12px; color:var(--nebula-2); }
.wx-article p{ color:var(--ink-2); margin-bottom:16px; font-size:15.5px; line-height:1.95; }
.wx-article ul.dots li{
  color:var(--ink-2); font-size:15px; padding-left:26px; position:relative; margin-bottom:10px; line-height:1.85;
}
.wx-article ul.dots li::before{
  content:""; position:absolute; left:6px; top:12px; width:7px; height:7px; border-radius:50%;
  background:var(--grad-aurora); box-shadow:0 0 8px rgba(244,114,182,.7);
}
.wx-article .note{
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:20px 24px; margin:26px 0;
  background:rgba(124,92,224,.12); font-size:14.5px; color:var(--ink-2); line-height:1.9;
}
.wx-article .note b{ color:var(--nebula-2); }
.wx-article .meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13.5px; color:var(--ink-3);
  border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:8px;
}
.wx-article .meta em{ font-style:normal; color:var(--nebula-2); }

/* 表格（速查表） */
.wx-table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:14.5px; }
.wx-table th,.wx-table td{
  border:1px solid var(--line); padding:13px 18px; text-align:left; color:var(--ink-2); line-height:1.7;
}
.wx-table th{ background:rgba(124,92,224,.18); color:var(--nebula-2); font-weight:700; letter-spacing:.6px; }
.wx-table tr:hover td{ background:rgba(167,139,250,.06); }

/* ---------- 时间线（关于页） ---------- */
.wx-timeline{ position:relative; max-width:780px; margin:0 auto; padding-left:34px; }
.wx-timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--nebula),rgba(244,114,182,.5),transparent);
}
.wx-timeline .tl{ position:relative; padding:0 0 34px 26px; }
.wx-timeline .tl::before{
  content:""; position:absolute; left:-32px; top:8px; width:14px; height:14px; border-radius:50%;
  background:var(--void); border:2.5px solid var(--nebula); box-shadow:0 0 14px rgba(167,139,250,.7);
}
.wx-timeline .tl b{ display:block; color:var(--nebula-2); font-size:17px; letter-spacing:.8px; margin-bottom:6px; }
.wx-timeline .tl time{ font-size:12.5px; color:var(--magenta); letter-spacing:1.6px; }
.wx-timeline .tl p{ color:var(--ink-2); font-size:14.5px; margin-top:8px; }

/* ---------- 值 / 联系信息卡片 ---------- */
.wx-values .grid,.wx-contact .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.wx-contact .grid{ grid-template-columns:repeat(2,1fr); }
.wx-vcard{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px;
  background:var(--panel); transition:all .3s;
}
.wx-vcard:hover{ border-color:var(--line-2); transform:translateY(-5px); box-shadow:var(--shadow-glow); }
.wx-vcard b{ display:block; font-size:17px; color:var(--nebula-2); letter-spacing:1px; margin-bottom:10px; }
.wx-vcard p{ font-size:14px; color:var(--ink-2); line-height:1.85; }
.wx-vcard .big{ font-size:19px; color:var(--ink); font-weight:700; letter-spacing:.6px; margin:6px 0 8px; }

/* ---------- CTA 横幅 ---------- */
.wx-cta{ padding:80px 0; }
.wx-cta .box{
  position:relative; overflow:hidden; border-radius:26px; padding:64px 48px; text-align:center;
  border:1px solid var(--line-2);
  background:
    radial-gradient(560px 320px at 18% 0%,rgba(167,139,250,.26),transparent 70%),
    radial-gradient(480px 300px at 88% 100%,rgba(244,114,182,.2),transparent 70%),
    linear-gradient(160deg,#1d1237,#120b23);
  box-shadow:var(--shadow);
}
.wx-cta .box::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1.4px 1.4px at 14% 30%,rgba(196,177,253,.85),transparent 55%),
    radial-gradient(1.2px 1.2px at 76% 18%,rgba(244,114,182,.7),transparent 55%),
    radial-gradient(1.3px 1.3px at 62% 78%,rgba(196,177,253,.7),transparent 55%),
    radial-gradient(1px 1px at 34% 84%,rgba(103,232,249,.6),transparent 55%);
  pointer-events:none;
}
.wx-cta h2{ position:relative; font-size:clamp(24px,3.2vw,36px); letter-spacing:1.6px; font-weight:900; margin-bottom:14px; }
.wx-cta h2 em{ font-style:normal; background:var(--grad-aurora); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wx-cta p{ position:relative; color:var(--ink-2); max-width:640px; margin:0 auto 30px; font-size:15.5px; }
.wx-cta .btns{ position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- 404 ---------- */
.wx-404{
  min-height:66vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:90px 0; position:relative; overflow:hidden;
}
.wx-404 .orbit{
  position:absolute; border:1px dashed rgba(167,139,250,.22); border-radius:50%;
  width:520px; height:520px; left:50%; top:50%; transform:translate(-50%,-50%);
  animation:wxSpin 60s linear infinite; pointer-events:none;
}
.wx-404 .orbit i{
  position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%;
  background:var(--magenta); box-shadow:0 0 14px var(--magenta);
}
.wx-404 .code{
  font-size:clamp(90px,16vw,150px); font-weight:900; letter-spacing:6px; line-height:1;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.94;
}
.wx-404 h1{ font-size:clamp(20px,3vw,28px); letter-spacing:2px; margin:18px 0 12px; }
.wx-404 p{ color:var(--ink-2); max-width:520px; margin:0 auto 30px; }
.wx-404 .btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- 章节间隔器 ---------- */
.wx-mt-40{ margin-top:40px; }

/* ---------- 响应式 ---------- */
@media (max-width:1040px){
  .wx-nav{ gap:2px; }
  .wx-nav a{ padding:9px 11px; font-size:14px; }
  .wx-games .grid,.wx-feats .grid,.wx-news .grid{ grid-template-columns:repeat(2,1fr); }
  .wx-steps .grid{ grid-template-columns:repeat(2,1fr); }
  .wx-philo .grid{ grid-template-columns:1fr; gap:40px; }
  .wx-footer .cols{ grid-template-columns:1fr 1fr; gap:36px; }
  .wx-values .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .wx-sec{ padding:68px 0; }
  .wx-header .in{ min-height:64px; }
  .wx-burger{ display:flex; margin-left:auto; }
  .wx-nav{
    position:fixed; left:0; right:0; top:0; z-index:49;
    padding:96px 8% 34px;
    flex-direction:column; align-items:stretch; gap:6px;
    background:rgba(13,8,25,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line-2);
    transform:translateY(-104%); transition:transform .42s ease;
    box-shadow:0 30px 60px rgba(4,2,12,.7);
  }
  .wx-nav.show{ transform:translateY(0); }
  .wx-nav a{ padding:14px 18px; font-size:16px; border-radius:12px; }
  .wx-header .cta{ display:none; }
  .wx-hero{ padding:84px 0 76px; background-image:url(../images/hero-sm.jpg); }
  .wx-hero .orbit{ display:none; }
  .wx-stats{ margin-top:-34px; }
  .wx-stats .grid{ grid-template-columns:repeat(2,1fr); }
  .wx-games .grid,.wx-feats .grid,.wx-news .grid{ grid-template-columns:1fr; }
  .wx-contact .grid{ grid-template-columns:1fr; }
  .wx-faq .ans p{ padding-left:24px; }
  .wx-footer .cols{ grid-template-columns:1fr; gap:34px; }
  .wx-cta .box{ padding:48px 26px; }
  .wx-topbar .rt .clock{ display:none; }
}
@media (max-width:560px){
  body{ font-size:15px; }
  .wx-steps .grid{ grid-template-columns:1fr; }
  .wx-values .grid{ grid-template-columns:1fr; }
  .wx-hero .btns .wx-btn{ flex:1 1 auto; }
  .wx-topbar .st span{ font-size:12px; }
  .wx-crumb{ font-size:12px; }
}