/* 官网首页：只有一屏。整屏是花田（auth.js 画在 canvas 上，从中间一圈圈往外长），正中留一块白，放站名和登录 / 注册。只用白+蓝 */
.hm {
  --ink: #14233d;
  --text: #3d4b63;
  --muted: #6b778c;
  --line: #dfe7f3;
  --blue: #3a83f7;
  --blue-d: #256be0;
  --navy: #1b3a73;
  --navy-d: #142c58;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #f4f8ff;
}

.hm-field {
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, #e4eeff 0%, #eef4ff 45%, #f7faff 100%);
}
.hm-field canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 52% 46% at 50% 50%, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .28) 55%, #000 100%);
  mask-image: radial-gradient(ellipse 52% 46% at 50% 50%, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .28) 55%, #000 100%);
}
/* 中间那块白：让字压在干净的底上 */
.hm-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 30% at 50% 50%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .8) 45%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.hm-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 48px 24px 72px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
.hm-main > * { pointer-events: auto; }

.hm .hm-name {
  margin: 0;
  color: var(--ink);
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.hm-lead {
  max-width: 30em;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}

.hm-acts { display: flex; gap: 14px; margin-top: 40px; }
.hm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  min-height: 56px;
  padding: 0 28px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 30px -20px rgba(27, 58, 115, .45);
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.hm-btn:hover { border-color: #b9d1f7; box-shadow: 0 18px 34px -20px rgba(27, 58, 115, .55); transform: translateY(-2px); }
.hm-btn:active { transform: translateY(0) scale(.98); }
.hm-btn-main { border-color: var(--navy); background: var(--navy); color: #ffffff; box-shadow: 0 18px 34px -18px rgba(27, 58, 115, .8); }
.hm-btn-main:hover { border-color: var(--navy-d); background: var(--navy-d); }
.hm-btn-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s ease;
}
.hm-btn-main:hover::before { transform: translateX(100%); }
.hm .hm-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.hm-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 14px;
}
.hm-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hm-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

.hm-foot { position: absolute; z-index: 1; left: 0; right: 0; bottom: 18px; text-align: center; pointer-events: none; }
.hm-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; color: #8391a7; font-size: 12.5px; }

/* 打开时：花田先从中间往外长，字随后浮上来，只这一次 */
.hm-main > * { animation: hm-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.hm-main > :nth-child(1) { animation-delay: .15s; }
.hm-main > :nth-child(2) { animation-delay: .25s; }
.hm-main > :nth-child(3) { animation-delay: .35s; }
.hm-main > :nth-child(4) { animation-delay: .45s; }
.hm-main > :nth-child(5) { animation-delay: .55s; }
@keyframes hm-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .hm-field canvas {
    -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 50%, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .25) 55%, #000 100%);
    mask-image: radial-gradient(ellipse 80% 40% at 50% 50%, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .25) 55%, #000 100%);
  }
  .hm-field::after { background: radial-gradient(ellipse 70% 32% at 50% 50%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 50%, rgba(255, 255, 255, 0) 100%); }
  .hm-lead { max-width: 18em; }
  .hm-acts { margin-top: 32px; gap: 12px; }
  .hm-btn { min-width: 128px; min-height: 52px; font-size: 16px; }
  .hm-facts { gap: 6px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after { animation: none !important; transition: none !important; }
}