:root {
  --ink: #eef7fa;
  --ink-dim: rgba(226, 240, 246, .68);
  --ink-faint: rgba(226, 240, 246, .5);
  --line: rgba(150, 220, 235, .32);
  --accent: #5fd6ea;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #04101c;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== 全屏壁纸底图 ===== */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('../assets/bg.jpg') center center / cover no-repeat;
}

/* 顶/底轻微压暗，保证文字对比 */
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(3, 12, 24, .30) 0%,
      rgba(3, 12, 24, 0) 32%,
      rgba(3, 12, 24, 0) 52%,
      rgba(3, 12, 24, .60) 100%);
}

/* ===== 中部主标识 ===== */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  animation: rise 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

.domain {
  font-size: clamp(22px, 3.6vw, 40px);
  font-weight: 300;
  letter-spacing: .16em;
  color: #f4fafc;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .5);
}

.rule {
  width: 56px;
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: rule 1.3s ease .35s both;
}

/* ===== 底部备案信息 ===== */
footer {
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
}

.record {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 整体水平居中 */
  align-items: center;
  column-gap: 20px;
  row-gap: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-dim);
  letter-spacing: .02em;
}

.record a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color .2s ease;
}

.record a:hover {
  color: #ffffff
}

.sep {
  width: 1px;
  height: 12px;
  background: var(--line);
}

/* ===== 移动端：备案信息竖排居中 ===== */
@media (max-width:680px) {
  .record {
    flex-direction: column;
    row-gap: 6px
  }

  .sep {
    display: none
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes rule {
  from {
    opacity: 0;
    transform: scaleX(0)
  }

  to {
    opacity: 1;
    transform: scaleX(1)
  }
}

@media (prefers-reduced-motion:reduce) {

  main,
  .rule {
    animation: none
  }
}

/* ===== 主标识下方联系方式 ===== */
.contact {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
}

.contact-link {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .18em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: #ffffff;
  border-bottom-color: var(--accent);
  outline: none;
}

/* ===== 微信二维码弹层 ===== */
.qr-wrap {
  position: relative;
  display: inline-flex;
}

.qr-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  width: 216px;
  padding: 12px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 20;
}

.qr-pop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* 弹层底部小三角 */
.qr-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #ffffff;
}

.qr-pop img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;  /* 二维码图片圆角 */
}

.qr-tip {
  font-size: 12px;
  letter-spacing: .12em;
  color: #33475b;
}

@media (prefers-reduced-motion:reduce) {
  .qr-pop {
    transition: none;
  }
}