/* ============================================================
   index.css - 站5 首页专属布局（cyan 主题，居中光晕 Hero 签名）
   ============================================================ */

/* ===== Hero ===== */
.hm-hero { position:relative; overflow:hidden; padding:84px 0 64px; }
.hm-glow {
  position:absolute; top:-260px; left:50%; transform:translateX(-50%);
  width:880px; height:880px; pointer-events:none;
  background:radial-gradient(circle, rgba(6,182,212,.28) 0%, rgba(6,182,212,.06) 42%, transparent 70%);
}
.hm-hero-inner { position:relative; text-align:center; max-width:820px; }
.hm-title { font-size:46px; font-weight:800; line-height:1.24; margin:14px 0 18px; }
.hm-grad {
  background:linear-gradient(90deg,var(--cy-500),var(--cy-700));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hm-lead { font-size:16px; color:var(--sl-600); line-height:1.85; max-width:660px; margin:0 auto; }
.hm-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:30px 0 26px; }
.hm-trust { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hm-trust li {
  font-size:13px; font-weight:600; color:var(--cy-800);
  background:var(--cy-50); border:1px solid var(--cy-200);
  padding:6px 16px; border-radius:var(--kr-pill);
}

/* ===== 数据条（横向，带分隔）===== */
.hm-metrics {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border:var(--kline); border-radius:var(--kr-lg);
  box-shadow:var(--ksh-sm); margin-bottom:8px;
}
.hm-metric { text-align:center; padding:26px 12px; position:relative; }
.hm-metric:not(:last-child)::after {
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:42px; background:var(--sl-200);
}
.hm-metric b { display:block; font-size:30px; font-weight:800; color:var(--cy-700); line-height:1.1; }
.hm-metric span { font-size:13px; color:var(--sl-500); margin-top:5px; display:block; }

/* ===== 游戏卡片（横向 flex 签名）===== */
.hm-games { gap:18px; }
.hm-game {
  display:flex; align-items:flex-start; gap:14px; position:relative;
  background:#fff; border:var(--kline); border-radius:var(--kr);
  padding:20px; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.hm-game:hover { transform:translateY(-4px); box-shadow:var(--ksh); border-color:var(--cy-300); }
.hm-game-ico {
  width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:25px; background:var(--cy-50); border:1px solid var(--cy-200); border-radius:var(--kr);
}
.hm-game-body { min-width:0; flex:1; }
.hm-game-body h3 { font-size:16px; margin-bottom:4px; }
.hm-game-body p { font-size:12.5px; color:var(--sl-500); margin-bottom:8px; }
.hm-game-price { font-size:13px; font-weight:800; color:var(--cy-700); }
.hm-game-arrow {
  position:absolute; top:18px; right:16px; font-size:18px; color:var(--sl-400);
  transition:transform .18s, color .18s;
}
.hm-game:hover .hm-game-arrow { color:var(--cy-600); transform:translateX(4px); }

/* ===== 交替区块 ===== */
.hm-alt { background:#fff; border-top:var(--kline); border-bottom:var(--kline); }

/* ===== 三档价格 ===== */
.hm-tiers { gap:20px; align-items:stretch; }
.hm-tier {
  position:relative; background:#fff; border:var(--kline); border-radius:var(--kr-lg);
  padding:30px 24px; display:flex; flex-direction:column;
}
.hm-tier-hot {
  border-color:var(--cy-500); box-shadow:0 16px 40px rgba(8,145,178,.18);
  transform:translateY(-8px);
}
.hm-tier .ktag { position:absolute; top:18px; right:18px; }
.hm-tier-name { font-size:16px; font-weight:700; color:var(--sl-700); }
.hm-tier-price { font-size:34px; font-weight:800; color:var(--cy-700); margin:12px 0 18px; }
.hm-tier-price small { font-size:13px; font-weight:600; color:var(--sl-400); }
.hm-tier ul { margin-bottom:24px; flex:1; }
.hm-tier li {
  font-size:13.5px; color:var(--sl-600); padding:7px 0;
  border-bottom:1px dashed var(--sl-200); position:relative; padding-left:18px;
}
.hm-tier li::before { content:'✓'; position:absolute; left:0; color:var(--cy-600); font-weight:800; }
.hm-tier .kbtn { width:100%; }

/* ===== FAQ 宽度 ===== */
.hm-faq { max-width:840px; margin:0 auto; }

/* ===== 响应式 ===== */
@media (max-width:1024px) {
  .hm-title { font-size:38px; }
  .hm-tier-hot { transform:none; }
}
@media (max-width:900px) {
  .hm-metrics { grid-template-columns:repeat(2,1fr); }
  .hm-metric:nth-child(2)::after { display:none; }
}
@media (max-width:560px) {
  .hm-hero { padding:56px 0 44px; }
  .hm-title { font-size:30px; }
  .hm-metrics { grid-template-columns:1fr; }
  .hm-metric::after { display:none !important; }
  .hm-metric:not(:last-child) { border-bottom:1px solid var(--sl-200); }
}