/* ===========================================================
   诗韵 · 个人主页
   方向：深夜天文台 / 深蓝紫 + 克制霓虹 + 等宽细节
   原则：全场只有一处发光文字；渐变只出现在标题末行与一处卡片描边
   =========================================================== */

/* ---------- 令牌 ---------- */
:root {
  --bg: #07060F;
  --bg-2: #0B0A17;
  --surface: #12101F;
  --surface-2: #17142A;

  --line: rgba(154, 140, 255, .14);
  --line-strong: rgba(154, 140, 255, .28);

  --text: #F3F1FB;
  --text-2: #CFC9E0;
  --muted: #9B95B8;

  --accent: #7C5CFF;
  --accent-hi: #A78BFA;
  --cyan: #4FD8E8;
  --gold: #D9B98C;
  --glow: rgba(124, 92, 255, .35);

  /* Georgia 放最前面：让拉丁字母（AI / IP / PPT）用真正的粗衬线，
     而不是被宋体合成出一根细线；中文继续落到宋体 */
  --serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 320ms;

  --pad: clamp(20px, 5vw, 40px);
  --maxw: 1120px;

  /* 间距节奏：不再每段都等距，靠下面各区块自己微调 */
  --sec-y: clamp(56px, 6.4vw, 84px);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  overflow-x: clip;          /* 任何宽度都不出横向滚动条 */
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 极淡网格，向上渐隐 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(124, 92, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 92, 255, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 0%, transparent 78%);
}

/* 对角紫雾 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 6% -12%, rgba(124, 92, 255, .20), transparent 62%),
    radial-gradient(40rem 30rem at 100% 6%, rgba(79, 216, 232, .09), transparent 60%),
    radial-gradient(64rem 40rem at 50% 112%, rgba(124, 92, 255, .13), transparent 66%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  text-transform: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 99;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 14px;
  transition: top 160ms var(--ease);
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 1;
}

/* ---------- 氛围层：流星 ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.meteor {
  position: absolute;
  top: -30vh;
  width: 1.5px;
  height: clamp(90px, 14vh, 170px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .0), rgba(199, 190, 255, .85) 55%, rgba(124, 92, 255, .5) 82%, transparent 100%);
  transform: rotate(34deg);
  transform-origin: top center;
  opacity: 0;
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(124, 92, 255, .55));
}

.m1 { left: 72%; animation: meteor-fall 17s linear 1.2s infinite; }
.m2 { left: 88%; animation: meteor-fall 23s linear 7.5s infinite; }
.m3 { left: 55%; animation: meteor-fall 29s linear 15s infinite; height: clamp(70px, 10vh, 130px); }

@keyframes meteor-fall {
  0%   { opacity: 0; transform: rotate(34deg) translate3d(0, 0, 0); }
  6%   { opacity: .85; }
  38%  { opacity: .45; }
  46%  { opacity: 0; transform: rotate(34deg) translate3d(-46vw, 132vh, 0); }
  100% { opacity: 0; transform: rotate(34deg) translate3d(-46vw, 132vh, 0); }
}

/* ---------- 顶栏 ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding-inline: var(--pad);
  background: rgba(7, 6, 15, .72);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.mark { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding-block: 10px; }
.mark-name { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.mark-en { font-size: 10px; color: var(--muted); letter-spacing: .22em; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .16em;
  white-space: nowrap;
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 8px var(--glow);
  animation: breathe 3.2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---------- 右侧章节索引（宽屏） ---------- */
.rail { display: none; }

/* ---------- 首屏 ---------- */
.hero {
  position: relative;
  min-height: 92svh;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(40px, 9vh, 96px);
  padding-bottom: 84px;
  overflow: hidden;
}

.hero-inner { width: 100%; }

.kicker {
  margin: 0 0 clamp(18px, 4vw, 32px);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--muted);
}

.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 12vw, 8rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--text);
}

.t-line { display: block; }
.t-line-2 { min-height: 1.1em; white-space: nowrap; }

/* 全页唯一一处发光文字 */
.t-line-3 {
  background: linear-gradient(100deg, #7C5CFF 0%, #A78BFA 46%, #4FD8E8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(124, 92, 255, .45));
  padding-bottom: .08em;
}

.caret {
  display: inline-block;
  width: .42em;
  height: .76em;
  margin-left: .06em;
  translate: 0 .02em;
  background: var(--accent-hi);
  opacity: .8;
  animation: blink 1.1s steps(1, end) infinite;
  transition: opacity 420ms var(--ease);
}

.caret.is-done { animation: none; opacity: 0; }

@keyframes blink {
  0%, 49%   { opacity: .8; }
  50%, 100% { opacity: 0; }
}

.hero-sub {
  margin: clamp(20px, 4vw, 30px) 0 0;
  max-width: 34em;
  font-size: clamp(.98rem, 3.6vw, 1.1rem);
  line-height: 1.8;
  color: var(--text-2);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 5vw, 38px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: transform 180ms var(--ease), background 220ms var(--ease),
              border-color 220ms var(--ease), box-shadow 260ms var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, rgba(124, 92, 255, .34), rgba(124, 92, 255, .14));
  border-color: rgba(167, 139, 250, .62);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .12), 0 8px 26px rgba(124, 92, 255, .18);
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgba(124, 92, 255, .52), rgba(124, 92, 255, .24));
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .3), 0 10px 34px rgba(124, 92, 255, .32);
}

.btn-ghost {
  color: var(--text-2);
  border-color: var(--line-strong);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(167, 139, 250, .5); background: rgba(124, 92, 255, .07); }
.arrow { font-size: 12px; opacity: .7; }

/* ---------- 跑马灯 ---------- */
.marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  height: 100%;
  padding-left: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  color: rgba(155, 149, 184, .8);
  animation: slide 42s linear infinite;
}

.marquee-track b { color: rgba(167, 139, 250, .55); font-weight: 400; }

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 区块通用 ---------- */
.sec { position: relative; padding-block: var(--sec-y); }

/* 章节头：标签 + 一条贯穿到版心右缘的细线 + 编号
   这条线同时把宽屏右侧的空白“接”住，避免每节都飘在空里 */
.sec-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.sec-label {
  margin: 0;
  flex: none;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--accent-hi);
}

.sec-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(154, 140, 255, .34), rgba(154, 140, 255, .06));
}

.sec-no {
  flex: none;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(155, 149, 184, .55);
}

.sec-title {
  margin: 0 0 clamp(24px, 3.6vw, 38px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.sec-note {
  margin: 20px 0 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(217, 185, 140, .8);
}

/* ---------- 数字 ---------- */
.numbers {
  padding-block: clamp(44px, 5.4vw, 72px);
  border-bottom: 1px solid rgba(154, 140, 255, .1);
}

.num-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.num {
  background: linear-gradient(180deg, rgba(18, 16, 31, .96), rgba(11, 10, 23, .96));
  padding: clamp(18px, 4vw, 26px) clamp(14px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.num-v {
  font-size: clamp(1.9rem, 7.4vw, 2.9rem);
  line-height: 1;
  color: var(--text);
  letter-spacing: -.02em;
}

.num-s { color: var(--accent-hi); font-size: .62em; margin-left: 2px; }
.num-n { font-variant-numeric: tabular-nums; }

.num-l {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .16em;
}

.num-note {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.85;
  color: rgba(155, 149, 184, .72);
  letter-spacing: .04em;
}

/* ---------- 能力列表 ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; }

.svc {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 28px);
  padding-block: clamp(20px, 3.4vw, 28px);
  border-top: 1px solid rgba(154, 140, 255, .12);
  transition: border-color 240ms var(--ease);
}
.svc:last-child { border-bottom: 1px solid rgba(154, 140, 255, .12); }
.svc:hover { border-color: var(--line-strong); }

.svc-no {
  font-size: 11px;
  color: var(--accent-hi);
  opacity: .8;
  padding-top: .5em;
  letter-spacing: .1em;
}

.svc-t {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  transition: letter-spacing 320ms var(--ease);
}
.svc:hover .svc-t { letter-spacing: .01em; }

.svc-d {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 40em;
}

/* ---------- 案例 ---------- */
.case-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: clamp(28px, 4.6vw, 44px);
}

.case-col {
  position: relative;
  padding: clamp(18px, 3.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(23, 20, 42, .72), rgba(11, 10, 23, .72));
}

.case-k {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--muted);
}

.case-v {
  margin: 0;
  font-size: clamp(1rem, 3.8vw, 1.15rem);
  line-height: 1.6;
  color: var(--text);
}

.case-arrow {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: 34px; height: 34px;
  place-content: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--accent-hi);
  font-size: 13px;
}

.case-quote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 5.4vw, 2.3rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: clamp(16px, 3.4vw, 24px);
  text-wrap: balance;
}

/* 只在窄屏生效的强制断行，避免“视频”被拆到两行 */
.br-m { display: none; }

.case-do {
  margin: clamp(20px, 3.6vw, 28px) 0 10px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 44em;
}

.case-note {
  margin: 0;
  font-size: 10.5px;
  color: rgba(217, 185, 140, .8);
  letter-spacing: .1em;
}

/* ---------- 关于我 ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(34px, 5.4vw, 56px);
}

.avatar-card {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 460px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(124, 92, 255, .18), transparent 70%),
    linear-gradient(160deg, rgba(23, 20, 42, .9), rgba(11, 10, 23, .9));
}

/* 照片色调统一：压饱和把亮青蓝背景收进深紫体系，
   但不把人也一起压暗——人像要亮，背景才该沉 */
.avatar-card img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.5) contrast(1.05) brightness(1.03);
}

/* 面部一点暖光，抵掉整体压暗带来的灰 */
.avatar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(40% 28% at 50% 32%, rgba(255, 231, 210, .28), transparent 72%);
  mix-blend-mode: soft-light;
}

/* 紫调 + 底部渐隐，接住页面底色 */
.avatar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(178deg, rgba(124, 92, 255, .20), rgba(124, 92, 255, .02) 42%, rgba(7, 6, 15, .58) 100%),
    radial-gradient(92% 74% at 50% 26%, transparent 40%, rgba(7, 6, 15, .42) 100%);
  mix-blend-mode: multiply;
}

.avatar-card.has-img .avatar-ph { opacity: 0; pointer-events: none; }

/* 没有照片时不要盖色调层，否则占位文字会被压暗 */
.avatar-card:not(.has-img)::before,
.avatar-card:not(.has-img)::after { display: none; }

.avatar-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  transition: opacity 200ms var(--ease);
  background:
    repeating-linear-gradient(135deg, rgba(124, 92, 255, .045) 0 10px, transparent 10px 20px);
}

.avatar-ph .mono {
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(217, 185, 140, .95);
}

.avatar-ph-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(155, 149, 184, .45);
}

.about-text p {
  margin: 0 0 1.05em;
  font-size: clamp(.98rem, 3.7vw, 1.05rem);
  line-height: 1.85;
  color: var(--text-2);
}
.about-text p:last-child { margin-bottom: 0; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.tl {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0 14px 20px;
  border-left: 1px solid rgba(154, 140, 255, .18);
}

.tl::before {
  content: "";
  position: absolute;
  left: -3.5px; top: 24px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--accent), 0 0 10px rgba(124, 92, 255, .5);
}

.tl-k {
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--accent-hi);
  opacity: .9;
}

.tl-v {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-2);
}

.tl-note {
  margin: 16px 0 0;
  font-size: 10.5px;
  color: rgba(155, 149, 184, .68);
  letter-spacing: .08em;
}

/* ---------- 项目与经历 ---------- */
.work-list { display: grid; }

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: clamp(10px, 3vw, 22px);
  padding: clamp(18px, 3.4vw, 24px) 0;
  border-top: 1px solid rgba(154, 140, 255, .12);
  overflow: hidden;
  transition: background 260ms var(--ease);
}
.work-row:last-child { border-bottom: 1px solid rgba(154, 140, 255, .12); }

.work-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(124, 92, 255, .14), rgba(124, 92, 255, 0) 72%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease);
  pointer-events: none;
}
.work-row:hover::after,
.work-row:focus-within::after { transform: scaleX(1); }

.work-no {
  position: relative;
  font-size: 10.5px;
  color: rgba(167, 139, 250, .7);
  padding-top: .55em;
  letter-spacing: .08em;
}

.work-main { position: relative; min-width: 0; }

.work-t {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.01em;
  transition: letter-spacing 320ms var(--ease);
}
.work-row:hover .work-t { letter-spacing: .012em; }

.work-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 44em;
}

.work-meta {
  position: relative;
  margin: 10px 0 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(167, 139, 250, .95);
}

/* ---------- 联系 ---------- */
.contact { padding-bottom: clamp(56px, 7vw, 88px); }

.sec-title.big {
  font-size: clamp(1.9rem, 8vw, 3.6rem);
  line-height: 1.15;
  margin-bottom: 18px;
}

.contact-lede {
  margin: 0 0 clamp(26px, 4.2vw, 40px);
  font-size: clamp(.98rem, 3.7vw, 1.05rem);
  color: var(--text-2);
  max-width: 32em;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

/* 二维码卡片：全页唯一一处会转的发光描边，用来把视线收在转化点上 */
.glow-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(23, 20, 42, .88), rgba(11, 10, 23, .88));
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0 62%, rgba(124, 92, 255, .85) 78%, rgba(79, 216, 232, .7) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .8;
  animation: spin 9s linear infinite;
  pointer-events: none;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  to { --angle: 360deg; }
}

.qr-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
}

.qr-box {
  flex: 0 0 140px;
  width: 140px;
  aspect-ratio: 1 / 1;
  padding: 7px;
  border-radius: 12px;
  background: #FBF9FF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 16px 36px -20px rgba(0, 0, 0, .9);
}

.qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

.qr-tip {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--muted);
}

.qr-tip .mono {
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(155, 149, 184, .75);
}

.contact-list { margin: 0; padding: 0; }

.cl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(154, 140, 255, .12);
}
.cl-row:first-child { border-top: 1px solid rgba(154, 140, 255, .12); }

.cl-row dt {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--muted);
  flex: 0 0 58px;
}

.cl-row dd {
  margin: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  font-size: 14.5px;
  color: var(--text);
  word-break: break-all;
  text-align: right;
}

/* 标签与值之间的点线：把这段空白变成有意为之的“菜单引导线” */
.cl-row dd::before {
  content: "";
  flex: 1 1 auto;
  align-self: center;
  min-width: 12px;
  margin: 0 4px;
  border-bottom: 1px dotted rgba(154, 140, 255, .26);
}

.cl-v { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }

.cl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--accent-hi);
  border-bottom: 1px solid rgba(167, 139, 250, .35);
  padding-bottom: 2px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.cl-link:hover { color: var(--text); border-color: rgba(243, 241, 251, .5); }
.cl-link .arrow { font-size: 11px; opacity: .8; }

.copy {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.copy:hover { color: var(--text); border-color: rgba(167, 139, 250, .55); background: rgba(124, 92, 255, .1); }
.copy.is-done { color: var(--accent-hi); border-color: rgba(167, 139, 250, .7); }

/* ---------- 页脚 ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  background: rgba(11, 10, 23, .6);
  position: relative;
  z-index: 1;
}

.foot-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-foot p {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(155, 149, 184, .72);
}

.foot-tags { color: rgba(155, 149, 184, .5); }

/* ---------- 移动端底栏 ---------- */
.mobile-bar { display: none; }

/* ---------- 入场动画 ---------- */
/* 只有 JS 可用时才隐藏，避免脚本失效导致内容不可见 */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

/* 锚点跳转避开吸顶栏 */
section[id], main[id] { scroll-margin-top: 68px; }

/* ---------- 断点：≥ 720px ---------- */
@media (min-width: 720px) {
  .hero { min-height: 88vh; }

  .num-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .svc { grid-template-columns: 64px minmax(0, 1fr); }

  .case-grid { grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
  .case-arrow { display: grid; position: static; translate: none; align-self: center; }

  .about-text { max-width: 40em; }

  .timeline { max-width: 46em; }

  .contact-grid { grid-template-columns: minmax(0, 276px) minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); }

  .qr-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .qr-box { flex: none; width: 100%; }
  .qr-tip { text-align: center; }

  .foot-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- 断点：720–959px 竖排时，照片居中限宽 ---------- */
@media (min-width: 720px) and (max-width: 959px) {
  .avatar-card { width: min(100%, 380px); margin-inline: auto; }
}

/* ---------- 断点：≥ 900px ---------- */
@media (min-width: 900px) {
  /* 项目行右侧的数据标签回到右上角，和编号形成左右两个锚点 */
  .work-main { padding-right: 200px; }
  .work-meta {
    position: absolute;
    right: 0;
    top: .35em;
    margin: 0;
    text-align: right;
  }
  .work-d { max-width: 36em; }
}

/* ---------- 断点：≥ 960px（图文并排，图与正文等高） ---------- */
@media (min-width: 960px) {
  /* 照片固定成 4:5 的竖幅（用列宽控高，不靠拉伸），正文占剩下的一栏；
     两者高度接近，避免一边长一截 */
  .about-grid {
    grid-template-columns: clamp(272px, 23.4vw, 336px) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(32px, 3.6vw, 52px);
  }

  /* 高度跟住正文那一栏，底边永远齐平；宽度固定，所以比例在 0.67–0.9 之间浮动，
     窄屏更竖、宽屏近方，都是人像能接受的裁切 */
  .avatar-card {
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
    min-height: 340px;
  }

  .about-text { max-width: none; }
}

/* ---------- 断点：≥ 1024px ---------- */
@media (min-width: 1024px) {
  .hero-title { font-size: clamp(4.6rem, 8.4vw, 8rem); }
  .sec-title { margin-bottom: 40px; }
  .tl { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding-block: 16px; }
  .tl::before { top: 26px; }
  .tl-k { padding-top: 3px; }
  .about-text p { line-height: 1.9; }
}

/* ---------- 断点：≥ 1360px（右侧章节索引） ---------- */
@media (min-width: 1360px) {
  .rail {
    position: fixed;
    /* 跟着版心右边留一点边距走，而不是贴着屏幕右边——大屏上才不会孤零零地飘到角落 */
    right: max(12px, calc((100vw - 1120px) / 2 - 56px));
    top: 50%;
    translate: 0 -50%;
    z-index: 16;
    display: grid;
    gap: 1px;
    padding: 10px 0;
  }

  .rail-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 0;
    min-height: 34px;
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(155, 149, 184, .55);
    transition: color 260ms var(--ease);
  }

  .rail-item .tick {
    display: block;
    width: 12px;
    height: 1px;
    background: currentColor;
    opacity: .55;
    transition: width 320ms var(--ease), opacity 320ms var(--ease);
  }

  .rail-item:hover { color: var(--text-2); }
  .rail-item:hover .tick { width: 20px; opacity: .9; }

  .rail-item.is-on { color: var(--accent-hi); }
  .rail-item.is-on .tick { width: 28px; opacity: 1; background: var(--accent-hi); }
}

/* ---------- 移动端底栏 ---------- */
@media (max-width: 719px) {
  .mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    gap: 10px;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 6, 15, .9);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }

  .mb-btn {
    flex: 1 1 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 14.5px;
    letter-spacing: .04em;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
  }

  .mb-primary {
    color: #fff;
    border-color: rgba(167, 139, 250, .6);
    background: linear-gradient(180deg, rgba(124, 92, 255, .38), rgba(124, 92, 255, .16));
  }

  body { padding-bottom: 78px; }

  /* 手机上不做满屏，避免跑马灯被底部常驻条压住 */
  .hero {
    min-height: auto;
    padding-top: clamp(44px, 10vh, 96px);
    padding-bottom: 0;
  }

  .marquee {
    position: static;
    margin-top: clamp(34px, 7vw, 52px);
  }

  .br-m { display: inline; }
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .meteor { display: none; }
  .marquee-track { animation: none; }
  .dot { animation: none; opacity: 1; }
  .caret { display: none; }
  .glow-card::before { animation: none; opacity: .4; }
  .js .reveal, .reveal { opacity: 1; transform: none; }
}