:root {
  --bg: #05070d;
  --card-line: rgba(255, 255, 255, 0.09);
  --tx: #e8edf5;
  --tx-2: #9aa6b8;
  --tx-3: #5b6577;
  --acc: #22d3ee;     /* 科技青 */
  --acc-2: #6ea8fe;   /* 科技蓝 */
  --acc-glow: rgba(34, 211, 238, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.6;
  overflow: hidden;            /* 单屏：禁止任何滚动 */
  -webkit-font-smoothing: antialiased;
}

/* 背景：网格 + 光晕 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(700px 500px at 0% 10%, rgba(110, 168, 254, 0.10), transparent 55%),
    var(--bg);
}
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 80%);
}

/* 角落品牌标识 */
.brand {
  position: fixed; top: 22px; left: 26px; z-index: 50;
  font-weight: 700; letter-spacing: 2px; font-size: 15px;
  color: var(--tx);
}
.brand b { color: var(--acc); }

/* 单屏 Hero */
.hero {
  min-height: 100svh;           /* svh 适配移动端动态地址栏 */
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; position: relative;
  padding: 80px 24px;           /* 顶部留出品牌空间，避免重叠 */
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 45%),
    rgba(34, 211, 238, 0.12), transparent 45%);
}
.hero > * { position: relative; z-index: 1; }

/* 错峰入场 */
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero h1 { animation: heroUp .8s .05s both; }
.typer { animation: heroUp .8s .22s both; }
.socials { animation: heroUp .8s .38s both; }
.mail { animation: heroUp .8s .54s both; }

.hero h1 {
  font-size: clamp(56px, 16vw, 150px); line-height: 1; font-weight: 800;
  letter-spacing: 4px; margin-bottom: 20px;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--acc), var(--acc-2), #ffffff, var(--acc-2), var(--acc));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 220% center; } }

.typer {
  font-size: clamp(15px, 4vw, 24px); color: var(--tx-2);
  height: 1.6em; margin-bottom: 40px; letter-spacing: 1px;
}
.typer .cursor { color: var(--acc); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.socials { display: flex; gap: 14px; margin-top: 8px; }
.socials a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--card-line); color: #d8dfea; transition: .2s;
}
.socials a:hover {
  color: var(--acc); border-color: var(--acc);
  box-shadow: 0 0 18px var(--acc-glow); transform: translateY(-3px);
}
.socials svg { width: 19px; height: 19px; fill: currentColor; }

.mail {
  margin-top: 34px; font-size: 14px; letter-spacing: 1px;
  color: var(--tx-3); border-bottom: 1px solid transparent; transition: .2s;
}
.mail:hover { color: var(--acc); border-color: var(--acc-glow); }

/* 响应式 */
@media (max-width: 480px) {
  .brand { top: 16px; left: 18px; font-size: 13px; }
  .hero { padding: 70px 18px; }
  .hero h1 { letter-spacing: 2px; }
  .socials a { width: 42px; height: 42px; }
}