html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root{
  --bg:#05070b;
  --fg:#e9eef7;
  --muted:rgba(233,238,247,.68);
  --pill:rgba(255,255,255,.08);
  --pillBorder:rgba(255,255,255,.16);
  --pillHover:rgba(255,255,255,.12);
  --shadow:rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
  overflow:hidden; /* 禁止页面滚动，避免“自动往下滚动” */
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{
  position:relative;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* 星空：纯黑 + 星点 + 轻微雾化层，不要紫色 */
.starfield{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 60% 50%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 20% 70%, rgba(255,255,255,.05), rgba(0,0,0,0) 62%),
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.7), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.55), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 55% 35%, rgba(255,255,255,.5), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 75% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 82% 70%, rgba(255,255,255,.5), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 92% 50%, rgba(255,255,255,.4), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 18% 55%, rgba(255,255,255,.45), rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 42% 15%, rgba(255,255,255,.55), rgba(255,255,255,0) 2px);
  filter:saturate(.9);
}
.starfield::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(1px 1px at 12% 14%, rgba(255,255,255,.55), transparent 2px),
    radial-gradient(1px 1px at 22% 64%, rgba(255,255,255,.35), transparent 2px),
    radial-gradient(1px 1px at 38% 28%, rgba(255,255,255,.42), transparent 2px),
    radial-gradient(1px 1px at 46% 76%, rgba(255,255,255,.36), transparent 2px),
    radial-gradient(1px 1px at 63% 58%, rgba(255,255,255,.40), transparent 2px),
    radial-gradient(1px 1px at 71% 18%, rgba(255,255,255,.34), transparent 2px),
    radial-gradient(1px 1px at 85% 33%, rgba(255,255,255,.38), transparent 2px),
    radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,.32), transparent 2px);
  opacity:.8;
  transform:rotate(2deg);
}
.noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.09;
  pointer-events:none;
}

.header{
  position:absolute;
  left:0; right:0; top:0;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:10;
}
.brand{
  display:flex; align-items:center; gap:12px;
  flex:1 1 auto;
}
.brand img{
  width:28px;height:28px; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.brand .name{
  font-weight:600;
  letter-spacing:.08em;
  opacity:.95;
}
.navGroup{display:flex; gap:10px; align-items:center; flex:0 0 auto}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:var(--pill);      /* 去掉蓝底：只保留按钮胶囊 */
  border:1px solid var(--pillBorder);
  color:rgba(255,255,255,.9);
  font-size:14px;
  line-height:1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.pill:hover{background:var(--pillHover); border-color:rgba(255,255,255,.22)}
.pill:active{transform:translateY(1px)}
.pill.primary{
  background:rgba(255,255,255,.92);
  color:#0b0f18;
  border-color:rgba(255,255,255,.9);
}
.pill.primary:hover{background:#ffffff}

.hero{
  position:relative;
  height:100vh;
  display:grid;
  grid-template-columns: minmax(420px, 1fr) auto;
  gap:48px;
  align-items:center;
  padding:0 56px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  z-index:2;
}
@media (max-width: 1100px){
  body{overflow:auto}
  .wrap{overflow:auto}
  .hero{grid-template-columns:1fr; padding:120px 24px 48px; height:auto}
  .header{position:sticky; background:rgba(0,0,0,.65); backdrop-filter:blur(14px)}
}

/* Mobile-first refinement: same page auto-adapts (no separate /m pages) */


/* 小屏：保证 LOGO 与导航不挤压、不跑位 */


.left .kicker{
  font-size:12px;
  letter-spacing:.12em;
  color:rgba(233,238,247,.58);
  margin-bottom:14px;
}
.left h1{
  margin:0 0 16px 0;
  font-size:56px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.left p{
  margin:0 0 22px 0;
  max-width:560px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
.cta{display:flex; gap:12px; align-items:center; margin-top:10px}
.hint{
  margin-top:14px;
  font-size:12px;
  color:rgba(233,238,247,.5);
}

/* 文字：缓慢从隐到现（无彩色字） */
.fadeUp{
  opacity:0;
  transform:translateY(10px);
  filter:blur(6px);
  animation: fadeUp 1.8s ease forwards;
}
.fadeUp.d2{animation-delay:.35s}
.fadeUp.d3{animation-delay:.65s}
.fadeUp.d4{animation-delay:.95s}
@keyframes fadeUp{
  to{opacity:1; transform:translateY(0); filter:blur(0)}
}

/* 右侧：镜子（替换手机），镜框更小 */
.mirrorWrap{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.mirror{
  position:relative;
  width:440px;
  height:560px;
  border-radius:28px;
  overflow:hidden;
  /* 黑灰镜面：无边框，只要阴影 + 灰釉质感（融入页面背景） */
  background:transparent;
  box-shadow:0 34px 110px rgba(0,0,0,.75);
}
.mirror::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.70));mix-blend-mode:multiply;pointer-events:none;}


/* 镜面底图：铺满 */
.mirror .bg{
  position:absolute; inset:0;
  background:url("./../img/mirror_bg.png") center/cover no-repeat;
  /* 黑灰底：更暗、更灰，避免“发白发亮” */
  filter:contrast(1.08) brightness(.62) saturate(.40) grayscale(.25);
  transform:scale(1.02);
}

/* 人物：在镜子里慢慢显现（不做汇聚动画，不跑到左上角） */
.mirror .person{
  position:absolute; inset:-6% -10% -6% -10%;
  /* 人影：灰底黑影（更像镜中“阴影”而非发光白影） */
  mix-blend-mode: multiply;
  background:url("./../img/ghost_human.png") center/contain no-repeat;
  opacity:0;
  transform:scale(1.02);
  filter: blur(7px) contrast(1.28) brightness(.72) saturate(.55);
  /* 边界融合：羽化遮罩 */
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 92%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 92%);
  animation: personIn 3.2s ease forwards;
  animation-delay: 1.2s;
}
@keyframes personIn{
  0%{opacity:0; filter:blur(18px) contrast(1.12) brightness(.90) saturate(.55); transform:scale(1.05)}
  70%{opacity:.52; filter:blur(7px) contrast(1.26) brightness(.76) saturate(.55); transform:scale(1.02)}
  100%{opacity:.62; filter:blur(6px) contrast(1.30) brightness(.72) saturate(.55); transform:scale(1.0)}
}

/* 镜面反光 */
.mirror .glare{
  position:absolute; inset:-40% -60%;
  background:radial-gradient(closest-side, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
  transform:rotate(18deg);
  opacity:.55;
  mix-blend-mode: multiply;
  pointer-events:none;
}
.mirror .shine{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 35%, rgba(255,255,255,.05));
  opacity:.35;
  pointer-events:none;
}

/* 简单页面内容 */
.page{
  padding:140px 96px 60px;
  max-width:980px;
  position:relative;
  z-index:2;
}
.page h2{margin:0 0 14px 0; font-size:34px}
.page p{margin:0 0 12px 0; color:var(--muted); line-height:1.9}


/* LOOP:brand-footer */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg)}
.brandLogo{width:28px; height:28px; border-radius:999px}
.brandText{font-weight:650; letter-spacing:.08em; opacity:.9}

.nav{display:flex; align-items:center; gap:18px}
.navLink{color:var(--fg); text-decoration:none; opacity:.75; font-size:14px}
.navLink:hover{opacity:1}

.footer{padding:40px 72px 56px; opacity:.85}
.footerInner{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.10); padding-top:18px}
.footerBrand{display:flex; align-items:center; gap:10px}
.footerLogo{width:22px; height:22px; border-radius:999px; opacity:.95}
.footerLinks{display:flex; gap:16px}
.footerLinks a{color:var(--fg); text-decoration:none; opacity:.78; font-size:13px}
.footerLinks a:hover{opacity:1}

.page{padding:140px 72px 80px; max-width:920px}
.page h1{margin:0 0 14px; font-size:44px; letter-spacing:-.02em}
.page p{margin:0 0 12px; color:rgba(233,238,247,.78); line-height:1.75; max-width:760px}
@media (max-width: 1100px){ .footer{padding:28px 24px 44px} .page{padding:120px 24px 60px} }

/* ---- Footer: ICP + Copyright ---- */
.site-footer{
  margin-top: 48px;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  font-size: 12px;
  line-height: 1.6;
}
.site-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-footer__icp{ white-space: nowrap; }
@media (max-width: 640px){
  .site-footer__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}
.site-footer__icp{
  color: rgba(255,255,255,.65);
  text-decoration: none;
}
.site-footer__icp:hover{
  color: rgba(255,255,255,.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Footer final: small / centered / gray ---- */
.site-footer{
  margin-top: 40px !important;
  padding: 18px 0 22px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}
.site-footer__inner{
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.site-footer__copy{ opacity: .9; }
.site-footer__icp{
  color: rgba(255,255,255,.45) !important;
  text-decoration: none !important;
}
.site-footer__icp:hover{
  color: rgba(255,255,255,.70) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ---- Footer final: small / centered / gray (desktop force) ---- */
.site-footer{
  margin-top: 40px !important;
  padding: 18px 0 22px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}
.site-footer__inner{
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.site-footer__icp{
  color: rgba(255,255,255,.45) !important;
  text-decoration: none !important;
}
.site-footer__icp:hover{
  color: rgba(255,255,255,.70) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ===== Footer FIX (PC always visible) ===== */
html, body { height: 100%; }
body { padding-bottom: 56px !important; }

.site-footer{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;

  margin: 0 !important;
  padding: 10px 0 12px !important;

  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border-top: 1px solid rgba(255,255,255,.08) !important;

  text-align: center !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.site-footer__inner{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 16px !important;
}

.site-footer__icp{
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
}
.site-footer__icp:hover{
  color: rgba(255,255,255,.80) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}