/* ============================================================
   index.css - 站24 首页专属样式（vh 前缀 · 左右分栏首屏）
   ============================================================ */

/* ===== HERO（左右分栏）===== */
.vh-hero { position:relative; overflow:hidden; padding:72px 0 64px; background:linear-gradient(160deg,#fff 0%,var(--vx-50) 100%); }
.vh-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }

.vh-title { font-size:46px; font-weight:800; line-height:1.22; color:var(--vn-900); margin:10px 0 20px; }
.vh-grad { background:linear-gradient(120deg,var(--vx-500),var(--vx-700)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vh-lead { font-size:16px; color:var(--vn-600); margin-bottom:28px; }
.vh-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.vh-trust { display:flex; gap:22px; flex-wrap:wrap; }
.vh-trust li { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--vn-700); }
.vh-trust li span {
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  background:var(--vx-100); color:var(--vx-700); border-radius:50%; font-size:12px; font-weight:800;
}

/* ===== 右侧数据面板 ===== */
.vh-panel {
  background:#fff; border:1px solid var(--vn-200); border-radius:var(--vxr-lg);
  box-shadow:var(--vxsh); padding:30px 28px;
}
.vh-panel-title { font-size:15px; font-weight:800; color:var(--vn-800); margin-bottom:18px; }
.vh-panel-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--vn-100); }
.vh-panel-row b { font-size:24px; font-weight:800; color:var(--vx-700); }
.vh-panel-row span { font-size:13px; color:var(--vn-500); }
.vh-panel .vxbtn { width:100%; margin-top:22px; }

/* ===== 游戏横向条卡 ===== */
.vh-games { display:flex; flex-direction:column; gap:12px; }
.vh-game {
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--vn-200);
  border-radius:var(--vxr); padding:16px 20px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.vh-game:hover { transform:translateX(6px); box-shadow:var(--vxsh); border-color:var(--vx-300); }
.vh-game-no {
  font-size:14px; font-weight:800; color:var(--vx-400); width:22px; flex-shrink:0;
}
.vh-game-ico {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:linear-gradient(135deg,var(--vx-50),var(--vx-100));
  border:1px solid var(--vx-200); border-radius:var(--vxr); flex-shrink:0;
}
.vh-game-body { display:flex; flex-direction:column; min-width:0; flex:1; }
.vh-game-name { font-size:16px; font-weight:700; color:var(--vn-800); }
.vh-game-tag { font-size:12.5px; color:var(--vn-500); margin-top:2px; }
.vh-game-foot { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.vh-game-price { font-size:15px; font-weight:800; color:var(--vx-700); white-space:nowrap; }
.vh-game-arrow { font-size:18px; color:var(--vx-300); transition:transform .18s, color .18s; }
.vh-game:hover .vh-game-arrow { transform:translateX(4px); color:var(--vx-600); }

/* ===== 三档服务（横向条）===== */
.vh-alt { background:linear-gradient(180deg,var(--vn-100),var(--vx-50)); }
.vh-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.vh-tier {
  position:relative; background:#fff; border:1px solid var(--vn-200); border-radius:var(--vxr-lg);
  padding:30px 26px; display:flex; flex-direction:column;
}
.vh-tier-hot { border:2px solid var(--vx-500); box-shadow:var(--vxsh); }
.vh-tier .vxtag { position:absolute; top:18px; right:18px; }
.vh-tier-head { margin-bottom:14px; }
.vh-tier-name { font-size:15px; font-weight:700; color:var(--vn-700); }
.vh-tier-price { font-size:36px; font-weight:800; color:var(--vx-700); margin-top:8px; line-height:1; }
.vh-tier-price small { font-size:13px; font-weight:600; color:var(--vn-500); }
.vh-tier-list { margin-bottom:22px; flex:1; }
.vh-tier-list li { position:relative; padding-left:18px; font-size:13px; color:var(--vn-600); padding-top:5px; padding-bottom:5px; }
.vh-tier-list li::before { content:""; position:absolute; left:0; top:12px; width:7px; height:7px; border-radius:50%; background:var(--vx-400); }
.vh-tier .vxbtn { width:100%; }

/* ===== 优势卡片图标着色 ===== */
.vh-adv .vxcard .vxico {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:var(--vx-50); border-radius:var(--vxr); font-size:25px; margin-bottom:15px;
}

/* FAQ 间距 */
.vh-faq { max-width:820px; margin:0 auto; }

/* 深色 CTA 上的线框按钮（替代内联样式）*/
.vh-btn-on-dark { color:#fff; border-color:rgba(255,255,255,.6); }
.vh-btn-on-dark:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.1); }

/* ===== 响应式 ===== */
@media (max-width:1024px) {
  .vh-hero-grid { grid-template-columns:1fr; gap:36px; }
  .vh-title { font-size:40px; }
}
@media (max-width:760px) {
  .vh-hero { padding:48px 0 44px; }
  .vh-title { font-size:31px; }
  .vh-trust { gap:14px; }
  .vh-tiers { grid-template-columns:1fr; }
  .vh-game { flex-wrap:wrap; gap:12px; }
  .vh-game-body { flex-basis:calc(100% - 70px); }
}
@media (max-width:480px) {
  .vh-title { font-size:27px; }
}