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

html, body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

/* ========== 背景光晕 ========== */
.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(720px 480px at 78% 30%, rgba(99, 102, 241, 0.16), transparent 60%),
    radial-gradient(620px 420px at 90% 70%, rgba(56, 189, 248, 0.12), transparent 60%),
    radial-gradient(560px 420px at 12% 78%, rgba(147, 197, 253, 0.14), transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%);
}

.page { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 56px; }

/* ========== 顶部导航 ========== */
.nav {
  display: flex;
  align-items: center;
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.logo-mark {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  gap: 44px;
  margin: 0 auto;
  font-size: 15px;
  color: var(--color-text-strong);
}
.nav-links span { cursor: pointer; transition: color .2s; }
.nav-links span:hover,
.nav-links span:focus-visible {
  color: var(--color-primary);
  outline: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
}
.nav-login { cursor: pointer; color: var(--color-text-strong); }
.nav-login:hover { color: var(--color-primary); }

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  border-radius: 10px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-hover); }
[data-download-link]:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.4);
  outline-offset: 3px;
}

.fixed-qrcode {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  width: 136px;
  padding: 12px;
  border: 1px solid rgba(219, 226, 242, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(47, 91, 255, 0.16), 0 6px 18px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  text-align: center;
}
.fixed-qrcode img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
}
.fixed-qrcode span {
  display: block;
  margin-top: 8px;
  color: var(--color-text-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

/* ========== 主体区域 ========== */
.hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 48px 0 24px;
  min-height: calc(100vh - 216px); /* 第一屏撑满视口，滚动到顶时不露出下一屏 */
}

/* ---- 左侧文案 ---- */
.hero-left { flex: 0 0 38%; max-width: 38%; transform: translateY(-18px); }

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg,
    rgba(59, 107, 255, 0.10) 0%,
    rgba(120, 160, 255, 0.20) 50%,
    rgba(59, 107, 255, 0.10) 100%);
  margin-bottom: 28px;
}
/* 背后的柔光层，让胶囊呈现朦胧的光晕 */
.badge::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center,
    rgba(120, 160, 255, 0.35) 0%,
    rgba(120, 160, 255, 0) 70%);
  filter: blur(8px);
  z-index: -1;
}
.badge i { display: none; }

.hero-title {
  font-size: 56px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.hero-title .accent { color: var(--color-primary); }

.hero-desc {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin-bottom: 36px;
  max-width: 460px;
}

.hero-cta { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; }
.btn-primary.big { padding: 15px 30px; font-size: 16px; border-radius: 12px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 22px;
  border-radius: 12px;
  border: 1px solid #d7deee;
  background: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  color: var(--color-text-strong);
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  user-select: none;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.12);
}
.download-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.38);
  display: inline-flex; align-items: center; justify-content: center;
}
.download-circle svg { display: block; }

.hero-feats { display: flex; gap: 30px; font-size: 13.5px; color: var(--color-text-muted); }
.hero-feats .feat { display: flex; align-items: center; gap: 8px; }
.feat-check {
  display: inline-flex; align-items: center; justify-content: center;
}
.feat-check svg { width: 17px; height: 17px; }

/* ---- 右侧 3D 图片区 ---- */
.hero-right { flex: 1; position: relative; height: 640px; }

/* 透视只设在最外层：内部所有图片共享同一个消失点 */
.stage {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 42%;
}

/* 3D 世界：整体只做一次旋转，5 张图片都处在同一空间里 */
.world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-16deg) rotateX(6deg) rotateZ(1.2deg);
}

/* 主面板图：最大的一张，位于 z=0 平面 */
.dash-img {
  position: absolute;
  left: 0;
  top: 16px;
  width: 750px;
  display: block;
  border-radius: 18px;
  box-shadow: 0 50px 100px rgba(15, 23, 42, 0.45);
  transform: translateZ(2px);
  z-index: 6;
}

/* 漂浮的小图：贴近主面板边缘，像独立视频缩略图一样悬在 3D 空间里 */
.float-card {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  background: #0b1020;
  box-shadow:
    0 30px 52px rgba(15, 23, 42, 0.32),
    0 10px 18px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform-style: preserve-3d;
  transform-origin: center;
  backface-visibility: hidden;
  z-index: 4;
  cursor: pointer;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.float-card:hover,
.float-card:focus-visible {
  transform: var(--card-transform) scale(1.055);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 34px 62px rgba(15, 23, 42, 0.38),
    0 14px 26px rgba(var(--color-primary-rgb), 0.16);
  outline: none;
}
.float-card::before,
.float-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.float-card::before {
  z-index: 1;
  background:
    radial-gradient(circle at 52% 45%, rgba(255, 255, 255, 0.22), transparent 14%),
    linear-gradient(90deg, rgba(2, 6, 23, 0.5), transparent 38%, rgba(2, 6, 23, 0.34)),
    linear-gradient(180deg, transparent 48%, rgba(2, 6, 23, 0.55));
}
.float-card::after {
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 78%, rgba(2, 6, 23, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -20px 28px rgba(2, 6, 23, 0.28);
}
.float-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.03);
}
.fc-1 {
  width: 104px;
  height: 68px;
  left: -110px;
  top: 214px;
  transform-origin: right center;
  --card-transform: perspective(900px) rotateY(48deg) rotateX(7deg) rotateZ(-5deg);
  transform: var(--card-transform);
}
.fc-2 {
  width: 126px;
  height: 82px;
  left: -136px;
  top: 382px;
  transform-origin: right center;
  --card-transform: perspective(900px) rotateY(50deg) rotateX(-5deg) rotateZ(-4deg);
  transform: var(--card-transform);
}
.fc-3 {
  width: 132px;
  height: 86px;
  left: 758px;
  top: 216px;
  transform-origin: left center;
  --card-transform: perspective(900px) rotateY(-30deg) rotateX(6deg) rotateZ(1deg);
  transform: var(--card-transform);
}
.fc-4 {
  width: 136px;
  height: 88px;
  left: 756px;
  top: 420px;
  transform-origin: left center;
  --card-transform: perspective(900px) rotateY(-32deg) rotateX(-6deg) rotateZ(3deg);
  transform: var(--card-transform);
}
.fc-3::after,
.fc-4::after {
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.42), transparent 22%, transparent 82%, rgba(255, 255, 255, 0.12));
}
.fc-1::before {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(226, 232, 240, 0.24), transparent 18%),
    linear-gradient(90deg, transparent 0 34%, rgba(148, 163, 184, 0.17) 35% 38%, transparent 39% 58%, rgba(96, 165, 250, 0.13) 59% 62%, transparent 63%),
    linear-gradient(180deg, transparent 0 52%, rgba(2, 6, 23, 0.58) 100%);
}
.fc-2::before {
  background:
    radial-gradient(ellipse at 42% 40%, rgba(219, 234, 254, 0.22), transparent 19%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.2), transparent 42%, rgba(20, 184, 166, 0.15)),
    linear-gradient(180deg, transparent 46%, rgba(2, 6, 23, 0.62));
}
.fc-3::before {
  background:
    radial-gradient(ellipse at 42% 36%, rgba(203, 213, 225, 0.22), transparent 18%),
    linear-gradient(90deg, transparent 0 46%, rgba(15, 23, 42, 0.46) 47% 54%, transparent 55%),
    linear-gradient(180deg, transparent 44%, rgba(2, 6, 23, 0.58));
}
.fc-4::before {
  background:
    radial-gradient(ellipse at 58% 48%, rgba(191, 219, 254, 0.2), transparent 18%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.18), transparent 36%, rgba(49, 46, 129, 0.2)),
    linear-gradient(180deg, transparent 48%, rgba(2, 6, 23, 0.6));
}
.float-card .thumb-play { width: 22px; height: 22px; z-index: 4; }
.float-card .thumb-play svg { width: 9px; height: 9px; }

.thumb-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.thumb-play svg { width: 11px; height: 11px; margin-left: 1px; }

/* ========== 底部入口 ========== */
.footer-strip { text-align: center; padding: 26px 0 56px; }
.strip-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text-faint);
  font-size: 13px;
  margin-bottom: 18px;
}
.strip-hint::before, .strip-hint::after {
  content: "";
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c3cde4);
}
.strip-hint::after { background: linear-gradient(90deg, #c3cde4, transparent); }

.strip-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-strong);
}
.strip-items .item { cursor: pointer; transition: color .2s; }
.strip-items .item:hover { color: var(--color-primary); }
.strip-items .dot { width: 4px; height: 4px; border-radius: 50%; background: #b6c2da; }

/* ========== 视频预览弹窗 ========== */
body.modal-open { overflow: hidden; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 42px;
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 28, 0.74);
  backdrop-filter: blur(12px);
}
.video-modal__panel {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 18px;
  background: #080d1d;
  box-shadow: 0 34px 96px rgba(2, 6, 23, 0.62);
}
.video-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 18px 0 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: #e5edff;
  font-size: 15px;
  font-weight: 600;
}
.video-modal__close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #aebbd8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: background .2s, color .2s;
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
  color: #fff;
  background: rgba(148, 163, 184, 0.16);
  outline: none;
}
.video-modal video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020617;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.contact-modal.is-open { display: flex; }
.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 16, 36, 0.58);
  backdrop-filter: blur(10px);
}
.contact-modal.is-open .contact-modal__backdrop {
  animation: contactBackdropIn .24s ease-out both;
}
.contact-modal__panel {
  position: relative;
  z-index: 1;
  width: min(360px, calc(100vw - 36px));
  padding: 30px 28px 28px;
  border: 1px solid rgba(219, 226, 242, 0.9);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 30px 88px rgba(15, 23, 42, 0.22), 0 16px 42px rgba(47, 91, 255, 0.16);
  text-align: center;
  transform-origin: center;
}
.contact-modal.is-open .contact-modal__panel {
  animation: contactPanelIn .34s cubic-bezier(.16, 1, .3, 1) both;
}
.contact-modal__close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.contact-modal__close:hover,
.contact-modal__close:focus-visible {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
  outline: none;
}
.contact-modal__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
}
.contact-modal__icon img,
.contact-modal__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-modal h3 {
  color: #0f172a;
  font-size: 24px;
  line-height: 1.25;
}
.contact-modal p {
  margin-top: 10px;
  color: #516079;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.contact-modal__qr {
  width: 190px;
  height: 190px;
  margin: 22px auto 12px;
  padding: 10px;
  border: 1px solid rgba(219, 226, 242, 0.95);
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(47, 91, 255, 0.08);
}
.contact-modal.is-open .contact-modal__qr {
  animation: contactQrIn .38s cubic-bezier(.16, 1, .3, 1) .06s both;
}
.contact-modal__hint {
  color: #7b88a3;
  font-size: 13px;
  font-weight: 600;
}

@keyframes contactBackdropIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

@keyframes contactPanelIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes contactQrIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1100px) {
  .hero { flex-direction: column; min-height: auto; }
  .hero-left { max-width: 100%; flex: none; transform: none; }
  .hero-right { width: 100%; height: auto; }
  .stage { position: relative; perspective: none; }
  .world { position: relative; transform: none; }
  .dash-img { position: relative; left: 0; top: 0; width: 100%; }
  .float-card { display: none; }
}

@media (max-width: 700px) {
  .nav-links { display: none; }
  .page { padding: 0 20px; }
  .nav-actions { margin-left: auto; }
  .nav .btn-primary { padding: 11px 18px; }
  .fixed-qrcode {
    right: 14px;
    bottom: 14px;
    width: 104px;
    padding: 9px;
    border-radius: 12px;
  }
  .fixed-qrcode span { font-size: 12px; }
  .contact-modal__panel { padding: 28px 22px 24px; }
  .contact-modal__qr {
    width: 168px;
    height: 168px;
  }
}