/* 首页 V2 · 深色宇宙风落地页（按 Figma「首页-调整后」还原）
   注：3D 渲染类素材（宇宙 Hero、3D 币堆、U卡、闪兑币球）暂用 CSS 光效占位，
   待正式 PNG 出图后替换对应 .hv-visual 内的背景即可。 */

.hv {
  /* ==== Figma tokens ==== */
  --hv-bg: #0B0B0F;
  --hv-bg-panel: #111014;       /* 圆角大板块 */
  --hv-bg-card: #111014;
  --hv-bg-card-alt: #1E1D20;    /* 中间卡片（略亮） */
  --hv-bg-footer: #15151D;
  --hv-purple: #7944E4;         /* 主按钮 */
  --hv-purple-2: #7C4AE4;       /* Sign Up / 徽标 */
  --hv-purple-light: #A98BFF;   /* logo / 高亮 */
  --hv-purple-check: #AA80FF;   /* 勾选图标 */
  --hv-border: #29263A;
  --hv-border-soft: rgba(255, 255, 255, 0.1);
  --hv-chip: rgba(255, 255, 255, 0.1);
  --hv-login-bg: #29263A;

  --hv-text: #FFFFFF;
  --hv-text-2: #DEDCDF;
  --hv-text-muted: #98939F;
  --hv-text-dim: #9591A1;

  /* 与全站内容宽度保持一致（顶部导航 .container / 页脚 / 其他页面均为 1440） */
  --hv-max: var(--container-max);
  --hv-font: "Lexend", "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;

  background: var(--hv-bg);
  color: var(--hv-text);
  font-family: var(--hv-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 通用重置（box-sizing / margin / padding / a / ul / img / button）已由
   css/global.css 的基础规则提供；此处原 .hv * 重置会以更高特异性覆盖
   统一头尾（.site-header/.site-footer）的组件内边距与配色，故移除。 */
.hv img { max-width: 100%; display: block; }

.hv-container { width: 100%; max-width: var(--hv-max); margin: 0 auto; padding: 0 24px; }

/* 通用按钮 */
.hv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 44px;
  font-size: 20px; font-weight: 500; line-height: 1.3;
  color: #fff; background: var(--hv-purple); border-radius: 99px;
  transition: filter .18s, transform .15s, box-shadow .2s;
}
.hv-btn:hover { filter: brightness(1.08); box-shadow: 0 12px 36px rgba(121, 68, 228, 0.4); }
.hv-btn:active { transform: scale(0.98); }
.hv-btn--sm { height: 32px; padding: 0 16px; font-size: 14px; font-weight: 400; }
.hv-btn--soon {
  background: rgba(255, 255, 255, 0.06); color: var(--hv-text-muted);
  border: 1px solid var(--hv-border); cursor: default;
}
.hv-btn--soon:hover { filter: none; box-shadow: none; }

/* ========================= Header ========================= */
.hv-header {
  position: absolute; top: 0; left: 0; z-index: 30;
  width: 100%; height: 68px;
  display: flex; align-items: center;
}
.hv-header__inner {
  width: 100%; max-width: 1872px; margin: 0 auto;
  display: flex; align-items: center; gap: 48px;
  padding: 0 24px;
}
.hv-logo { display: inline-flex; align-items: center; gap: 8px; }
.hv-logo__mark {
  display: inline-block; width: auto; height: 34px; object-fit: contain;
}
.hv-logo__text { font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.hv-nav { display: flex; align-items: center; gap: 8px; }
.hv-nav__link {
  padding: 8px 12px; font-size: 16px; font-weight: 400; color: #fff; border-radius: 8px;
  transition: background .18s, color .18s;
}
.hv-nav__link:hover { background: rgba(255, 255, 255, 0.06); }
.hv-header__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hv-header__howto {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: #fff; opacity: .9; transition: opacity .18s;
}
.hv-header__howto:hover { opacity: 1; }
.hv-header__lang {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: .9;
}
/* 语言下拉（深色） */
.hv-lang { position: relative; display: inline-flex; }
.hv-lang__trigger {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: .9; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 16px; transition: opacity .18s;
}
.hv-lang__trigger:hover, .hv-lang.is-open .hv-lang__trigger { opacity: 1; }
.hv-lang__dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 148px; padding: 6px;
  background: rgba(23, 16, 42, 0.96); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 2px; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hv-lang.is-open .hv-lang__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.hv-lang__option {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.82);
  background: none; border: 0; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.hv-lang__option:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.hv-lang__option.is-active { color: var(--hv-purple-2); }
.hv-header__auth { display: flex; align-items: center; gap: 16px; }
.hv-login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; font-size: 14px; color: #fff;
  background: var(--hv-login-bg); border-radius: 99px; transition: filter .18s;
}
.hv-login:hover { filter: brightness(1.2); }
.hv-signup {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; font-size: 14px; color: #fff;
  background: var(--hv-purple-2); border-radius: 99px; transition: filter .18s;
}
.hv-signup:hover { filter: brightness(1.1); }

/* ========================= Hero ========================= */
.hv-hero {
  position: relative; height: 900px; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
}
/* 宇宙背景（CSS 占位：星空 + 顶部弧光） */
.hv-hero__bg { position: absolute; inset: 0; z-index: 0; }
.hv-hero__bg::before {           /* 星空底 + 地平线光晕 */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(121, 68, 228, 0.55) 0%, rgba(121, 68, 228, 0.12) 32%, transparent 55%),
    radial-gradient(60% 40% at 50% 8%, rgba(169, 139, 255, 0.22), transparent 60%),
    #05050a;
}
.hv-hero__bg::after {            /* 顶部拱形光带 */
  content: ""; position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
  width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 78%, rgba(169, 139, 255, 0.55) 82%, rgba(121, 68, 228, 0.15) 88%, transparent 92%);
  filter: blur(2px); opacity: .9;
}
.hv-hero__stars {                /* 细碎星点 */
  position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 50%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 85% 45%, #fff, transparent),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 60% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent),
    radial-gradient(1px 1px at 33% 12%, #fff, transparent);
  background-repeat: no-repeat;
}
.hv-hero__fade {                 /* 底部渐隐到页面底色 */
  position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1;
  background: linear-gradient(0deg, var(--hv-bg) 8%, transparent 100%);
}
.hv-hero__text {
  position: relative; z-index: 2; width: 1000px; max-width: 100%;
  margin-top: 296px; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
.hv-hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 24px; font-size: 16px; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 99px;
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px);
}
.hv-hero__badge i { color: var(--hv-purple-light); }
.hv-hero__title { font-size: 72px; font-weight: 600; line-height: 90px; color: #fff; }
.hv-hero__title .g {
  background: linear-gradient(92deg, #C79DF8 10%, #A98BFF 50%, #7944E4 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hv-hero__sub { font-size: 24px; font-weight: 400; line-height: 30px; color: var(--hv-text-muted); max-width: 1000px; }

/* ========================= 通用 section 标题 ========================= */
.hv-section { position: relative; padding: 96px 0; }
.hv-head { text-align: center; margin: 0 auto; max-width: 1000px; }
.hv-head__title { font-size: 48px; font-weight: 600; line-height: 1.25; color: #fff; }
.hv-head__sub { margin-top: 24px; font-size: 24px; font-weight: 400; line-height: 30px; color: var(--hv-text-muted); }

/* ========================= 星座区 ========================= */
.hv-zodiac { padding: 120px 0 96px; }
.hv-zodiac__cards {
  margin-top: 64px; display: flex; align-items: center; justify-content: center; gap: 24px;
  perspective: 1200px;
}
.hv-zcard {
  position: relative; flex: none;
  width: 200px; height: 260px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 24px 20px; text-align: center;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(121, 68, 228, 0.25), transparent 70%),
    #14121c;
  border: 1px solid var(--hv-border);
  transition: transform .25s, border-color .25s, box-shadow .25s, opacity .25s;
  opacity: .55; transform: scale(.9);
}
.hv-zcard__sign { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 64px; color: var(--hv-purple-light); opacity: .7; }
.hv-zcard__name { font-size: 20px; font-weight: 500; color: #fff; }
.hv-zcard__desc { margin-top: 6px; font-size: 12px; color: var(--hv-text-muted); line-height: 1.5; opacity: 0; height: 0; transition: opacity .25s; }
.hv-zcard--active {
  width: 240px; height: 320px; opacity: 1; transform: scale(1);
  border-color: rgba(169, 139, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(169,139,255,.3), 0 30px 80px rgba(121, 68, 228, 0.45);
  background:
    radial-gradient(80% 60% at 50% 26%, rgba(121, 68, 228, 0.5), transparent 70%),
    #17132a;
}
.hv-zcard--active .hv-zcard__sign { font-size: 84px; opacity: 1; top: 48px; text-shadow: 0 0 40px rgba(169,139,255,.7); }
.hv-zcard--active .hv-zcard__desc { opacity: 1; height: auto; }

/* ========================= 事件预测区（圆角大板块） ========================= */
.hv-panel {
  background: var(--hv-bg-panel);
  border-radius: 80px 80px 0 0;
  padding: 96px 0 120px;
  margin-top: -1px;
}
.hv-events { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hv-ecard {
  position: relative; display: flex; flex-direction: column;
  background: var(--hv-bg-card); border: 1px solid var(--hv-border);
  border-radius: 16px; padding: 24px; overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.hv-ecard:nth-child(2) { background: var(--hv-bg-card-alt); }
.hv-ecard:hover { transform: translateY(-4px); border-color: rgba(169,139,255,.4); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.hv-ecard__thumb {
  position: relative; height: 196px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #2a2140, #14121c 70%);
}
.hv-ecard__thumb--crypto { background: radial-gradient(120% 120% at 30% 20%, #3a2f18, #14121c 70%); }
.hv-ecard__thumb--tech   { background: radial-gradient(120% 120% at 30% 20%, #182a3a, #14121c 70%); }
.hv-ecard__thumb--sports { background: radial-gradient(120% 120% at 30% 20%, #3a1826, #14121c 70%); }
.hv-ecard__thumb i {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  font-size: 72px; color: rgba(255,255,255,.14);
}
.hv-ecard__tag {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; padding: 6px 12px;
  font-size: 14px; color: #fff; background: var(--hv-chip); border-radius: 99px;
  backdrop-filter: blur(6px);
}
.hv-ecard__body { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.hv-ecard__inner { display: flex; flex-direction: column; gap: 12px; }
.hv-ecard__title { font-size: 24px; font-weight: 500; line-height: 1.5; color: #fff; }
.hv-ecard__desc {
  font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--hv-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hv-ecard__meta { display: flex; align-items: center; gap: 36px; }
.hv-ecard__meta span { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--hv-text-muted); }
.hv-ecard__meta i { font-size: 14px; }
.hv-events__more { margin-top: 64px; display: flex; justify-content: center; }

/* ========================= 功能特性区（左右图文） ========================= */
.hv-feature { padding: 96px 0; }
.hv-feature__head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.hv-feature__head .hv-head__title { font-size: 48px; line-height: 1.25; }
.hv-feature__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hv-feature--reverse .hv-feature__visual { order: -1; }
.hv-feature__lead { font-size: 24px; font-weight: 400; line-height: 1.5; color: var(--hv-text-2); margin-bottom: 40px; }
.hv-checklist { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.hv-checkitem { display: flex; align-items: center; gap: 8px; }
.hv-checkitem i { flex: none; font-size: 18px; color: var(--hv-purple-check); }
.hv-checkitem__t { font-size: 16px; font-weight: 400; color: #fff; }
.hv-checkitem__d { font-size: 14px; font-weight: 400; color: var(--hv-text-muted); }

/* 特性视觉（玻璃拟态占位，待 3D 素材替换） */
.hv-visual {
  position: relative; height: 400px; border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(80% 80% at 50% 30%, rgba(121,68,228,.18), transparent 70%), #0f0d16;
  border: 1px solid var(--hv-border);
}
.hv-visual__glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(60px); background: rgba(121,68,228,.35); }
.hv-visual__badge { position: relative; z-index: 1; font-size: 96px; color: rgba(255,255,255,.16); }

/* 方向预测：迷你走势图 */
.hv-chart { position: relative; z-index: 1; width: 78%; }
.hv-chart__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.hv-chart__pair { font-size: 14px; color: var(--hv-text-muted); }
.hv-chart__price { font-size: 24px; font-weight: 700; color: #fff; }
.hv-chart__bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.hv-chart__bars i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(169,139,255,.35); }
.hv-chart__bars i.up { background: linear-gradient(180deg, #A98BFF, #7944E4); }
.hv-chart__tags { display: flex; gap: 12px; margin-top: 16px; }
.hv-chart__tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 99px; }
.hv-chart__tags .up { color: #34d399; background: rgba(52,211,153,.12); }
.hv-chart__tags .down { color: #f87171; background: rgba(248,113,113,.12); }

/* 币种小图标环（闪兑/理财视觉） */
.hv-coins { position: relative; z-index: 1; display: flex; gap: 14px; }
.hv-coins img { width: 56px; height: 56px; filter: drop-shadow(0 8px 24px rgba(121,68,228,.5)); }

/* U 卡视觉 */
.hv-ucard {
  position: relative; z-index: 1; width: 300px; height: 190px; border-radius: 16px;
  background: linear-gradient(135deg, #26233a, #15131f);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 22px; display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-6deg);
}
.hv-ucard__chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #d4c07a, #a5883f); }
.hv-ucard__brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: #fff; }
.hv-ucard__brand .m { width: auto; height: 24px; object-fit: contain; display: inline-block; }
.hv-ucard__num { font-size: 14px; letter-spacing: 3px; color: rgba(255,255,255,.7); }

/* ========================= 最终 CTA ========================= */
.hv-cta { padding: 120px 0; }
.hv-cta__box {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #7944E4, #5a2fc0);
  border-radius: 24px; padding: 120px 24px; text-align: center;
}
.hv-cta__box::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(50% 100% at 0% 100%, rgba(0,0,0,.2), transparent 60%);
}
.hv-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.hv-cta__title { font-size: 48px; font-weight: 600; line-height: 1.3; color: #fff; max-width: 1000px; }
.hv-cta__sub { font-size: 24px; font-weight: 400; color: #fff; opacity: .92; }
.hv-cta .hv-btn { background: #fff; color: #7944E4; font-weight: 600; }
.hv-cta .hv-btn:hover { filter: brightness(.96); box-shadow: 0 12px 36px rgba(0,0,0,.3); }

/* ========================= Footer ========================= */
.hv-footer { background: var(--hv-bg-footer); }
.hv-footer__inner { max-width: 1200px; margin: 0 auto; padding: 120px 24px 0; display: flex; justify-content: space-between; gap: 120px; flex-wrap: wrap; }
.hv-footer__brand { display: flex; flex-direction: column; gap: 40px; }
.hv-footer__logo { display: flex; flex-direction: column; gap: 12px; }
.hv-footer__logo-row { display: flex; align-items: center; gap: 8px; }
.hv-footer__tagline { font-size: 16px; color: var(--hv-text-muted); }
.hv-footer__social { display: flex; align-items: center; gap: 24px; }
.hv-footer__social a { color: var(--hv-text-muted); font-size: 22px; transition: color .18s; }
.hv-footer__social a:hover { color: #fff; }
.hv-footer__cols { display: flex; gap: 120px; }
.hv-footer__col h4 { font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 20px; }
.hv-footer__col a { display: block; font-size: 12px; color: var(--hv-text-muted); margin-bottom: 16px; transition: color .18s; }
.hv-footer__col a:hover { color: #fff; }
.hv-footer__divider { max-width: 1920px; height: 1px; background: rgba(255,255,255,.1); margin: 80px 0 0; }
.hv-footer__copy { text-align: center; padding: 16px; font-size: 12px; color: var(--hv-text-dim); }

/* ========================= 响应式 ========================= */
@media (max-width: 1100px) {
  .hv-events { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .hv-feature__row { grid-template-columns: 1fr; gap: 40px; }
  .hv-feature--reverse .hv-feature__visual { order: 0; }
}
@media (max-width: 860px) {
  .hv-header__inner { gap: 20px; }
  .hv-nav { display: none; }
  .hv-hero__title { font-size: 48px; line-height: 1.15; }
  .hv-hero__sub { font-size: 18px; line-height: 1.5; }
  .hv-hero__text { margin-top: 200px; }
  .hv-head__title, .hv-feature__head .hv-head__title, .hv-cta__title { font-size: 32px; }
  .hv-head__sub, .hv-feature__lead, .hv-cta__sub { font-size: 18px; }
  .hv-zodiac__cards { gap: 8px; }
  .hv-zcard:not(.hv-zcard--active) { display: none; }
  .hv-panel { border-radius: 40px 40px 0 0; padding: 64px 0 80px; }
  .hv-footer__inner { flex-direction: column; gap: 48px; padding-top: 64px; }
  .hv-footer__cols { gap: 60px; }
  .hv-cta__box { padding: 64px 20px; }
}