/* ═══════════════════════════════════════════════
   牙哥·AI · ALL IN AI
   个人主页样式表
   ═══════════════════════════════════════════════ */

:root{
  --bg:          #05070c;
  --bg-2:        #080b14;
  --panel:       rgba(255,255,255,.032);
  --panel-2:     rgba(255,255,255,.055);
  --line:        rgba(125,195,255,.13);
  --line-2:      rgba(125,195,255,.26);
  --cyan:        #22d3ee;
  --blue:        #38bdf8;
  --violet:      #a78bfa;
  --green:       #34d399;
  --text:        #e8eef8;
  --muted:       #93a1b8;
  --dim:         #5e6c83;
  --grad:        linear-gradient(120deg,var(--cyan),var(--blue) 42%,var(--violet));
  --font: -apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: "SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --wrap: 1180px;
  --nav-h: 64px;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(34,211,238,.28);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── 背景层 ─────────────────────────────── */
.bg-layer{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 700px at 78% -8%,rgba(99,102,241,.16),transparent 62%),
  radial-gradient(900px 600px at 8% 12%,rgba(34,211,238,.11),transparent 60%),
  linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 45%,var(--bg) 100%);
}
.bg-img{
  position:absolute;inset:-6%;
  background:url("hero-bg.webp?v=2") center/cover no-repeat;
  opacity:.42;
  filter:saturate(1.15);
  mix-blend-mode:screen;
  animation:drift 34s ease-in-out infinite alternate;
}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(125,195,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,195,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 78%);
}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 38%,rgba(3,5,10,.86) 100%)}
.bg-scan{
  position:absolute;inset:0;opacity:.28;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
}
@keyframes drift{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  100%{transform:scale(1.12) translate3d(-1.5%,1.5%,0)}
}

/* ── 阅读进度 ───────────────────────────── */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--grad);z-index:200;
  box-shadow:0 0 12px rgba(34,211,238,.6);
  transition:width .08s linear;
}

/* ── 导航 ───────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,4vw,40px);
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,7,12,.76);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.brand-mark{
  width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:linear-gradient(140deg,rgba(34,211,238,.22),rgba(167,139,250,.22));
  border:1px solid var(--line-2);color:var(--cyan);
}
.brand-mark svg{width:17px;height:17px}
.brand-text{font-family:var(--font);font-weight:700;font-size:16.5px;letter-spacing:.02em}
.brand-dot{color:var(--cyan)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;color:var(--muted)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--cyan);transition:width .28s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-links .nav-cta{
  padding:7px 16px;border:1px solid var(--line-2);border-radius:999px;color:var(--text);
  background:rgba(34,211,238,.07);
}
.nav-links .nav-cta::after{display:none}
.nav-links .nav-cta:hover{background:rgba(34,211,238,.16);border-color:var(--cyan)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ── 通用区块 ───────────────────────────── */
.section{position:relative;padding:clamp(80px,11vw,140px) 0}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(36px,5vw,62px)}
.sec-head-center{justify-content:center}
.sec-index{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--cyan);border:1px solid var(--line-2);border-radius:7px;padding:3px 9px;
  background:rgba(34,211,238,.07);
}
.sec-label{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;white-space:nowrap;
}
.sec-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.sec-head-center .sec-line{flex:0 1 190px}

/* ── HERO ──────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 70px;
}
.hero-inner{
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,64px);align-items:center;
}

.pill{
  display:inline-flex;align-items:center;gap:11px;
  padding:7px 16px 7px 13px;border-radius:999px;
  border:1px solid rgba(52,211,153,.3);background:rgba(52,211,153,.08);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;flex:none;
  box-shadow:0 0 0 0 rgba(52,211,153,.65);animation:pulse 2.1s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.pill-text{color:var(--green);font-weight:600}
.pill-sep{width:1px;height:13px;background:rgba(125,195,255,.28)}
.pill-sub{color:var(--muted);letter-spacing:.1em}

.hero-title{margin:22px 0 0;line-height:1}
.title-cn{
  position:relative;display:inline-block;
  font-size:clamp(58px,10.5vw,124px);font-weight:800;letter-spacing:.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.title-cn::before,.title-cn::after{
  content:attr(data-text);position:absolute;inset:0;background:none;
  -webkit-background-clip:border-box;background-clip:border-box;color:transparent;
  pointer-events:none;
}
.title-cn::before{text-shadow:2px 0 rgba(255,46,99,.75);animation:gl1 4.4s infinite steps(1)}
.title-cn::after{text-shadow:-2px 0 rgba(0,229,255,.75);animation:gl2 4.4s infinite steps(1)}
@keyframes gl1{
  0%,92%,100%{clip-path:inset(100% 0 0 0);transform:none}
  93%{clip-path:inset(18% 0 62% 0);transform:translate(-3px,0)}
  95%{clip-path:inset(55% 0 28% 0);transform:translate(3px,0)}
  97%{clip-path:inset(35% 0 45% 0);transform:translate(-2px,0)}
}
@keyframes gl2{
  0%,92%,100%{clip-path:inset(100% 0 0 0);transform:none}
  94%{clip-path:inset(40% 0 38% 0);transform:translate(3px,0)}
  96%{clip-path:inset(12% 0 70% 0);transform:translate(-3px,0)}
  98%{clip-path:inset(62% 0 22% 0);transform:translate(2px,0)}
}
.title-en{
  display:block;margin-top:8px;font-family:var(--mono);
  font-size:clamp(18px,2.3vw,25px);letter-spacing:.1em;color:var(--muted);font-weight:400;
}
.title-en i{font-style:normal;color:var(--cyan)}

.hero-role{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:26px 0 0}
.role-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--cyan);
  border:1px solid var(--line-2);border-radius:6px;padding:3px 10px;background:rgba(34,211,238,.07);
}
.role-text{font-size:15.5px;color:var(--muted);margin-left:4px}
.hero-desc{margin:20px 0 0;max-width:38em;color:var(--muted);font-size:15.5px}
.hero-desc strong{color:var(--text);font-weight:600}

.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:11px;
  font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .28s,background .28s,border-color .28s;
  will-change:transform;
}
.btn svg{width:17px;height:17px}
.btn-primary{
  background:var(--grad);color:#04121c;
  box-shadow:0 8px 30px -10px rgba(56,189,248,.75);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px -10px rgba(56,189,248,.9)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:var(--panel)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--panel-2);border-color:var(--cyan)}
.btn-lg{padding:14px 30px;font-size:15.5px}

/* 终端 */
.console{
  margin-top:34px;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:rgba(3,6,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9);
}
.console-bar{
  display:flex;align-items:center;gap:7px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.03);
}
.dot{width:9px;height:9px;border-radius:50%;display:block}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.console-title{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.05em}
.console-body{
  margin:0;padding:14px 16px;font-family:var(--mono);font-size:13.2px;line-height:1.85;
  color:#9fe8ff;white-space:pre-wrap;word-break:break-word;min-height:62px;
}
.c-prompt{color:var(--green)}
.c-caret{
  display:inline-block;width:8px;height:15px;background:var(--cyan);
  vertical-align:-2px;margin-left:2px;animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ── 人像 ──────────────────────────────── */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.portrait-wrap{position:relative;width:min(100%,420px)}
.portrait-halo{
  position:absolute;inset:-14%;
  background:radial-gradient(circle at 50% 38%,rgba(56,189,248,.3),rgba(167,139,250,.14) 42%,transparent 68%);
  filter:blur(26px);animation:breathe 6.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.portrait{
  position:relative;width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) contrast(1.03) saturate(1.05);
  z-index:2;
}
/* 旋转光环保留原布局尺寸：
   若用 transform:rotate 旋转，包围盒会随角度摆动（矩形→最宽 √2 倍），
   会把文档撑出横向滚动条。改为动画化 conic-gradient 的角度，布局完全不变。 */
@property --ring-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

.portrait-ring{
  --ring-angle:0deg;
  position:absolute;inset:-7%;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--ring-angle),
    transparent 0 46%,
    rgba(34,211,238,.9) 60%,
    rgba(167,139,250,.95) 74%,
    transparent 90%);
  -webkit-mask:radial-gradient(ellipse closest-side at 50% 50%,transparent 72%,#000 73%);
  mask:radial-gradient(ellipse closest-side at 50% 50%,transparent 72%,#000 73%);
  animation:ringSpin 11s linear infinite;
}
.portrait-ring.r2{
  --ring-angle:0deg;inset:-13%;opacity:.42;
  background:conic-gradient(from var(--ring-angle),
    transparent 0 58%,
    rgba(167,139,250,.7) 72%,
    rgba(56,189,248,.5) 84%,
    transparent 95%);
  animation:ringSpin 19s linear infinite reverse;
}
@keyframes ringSpin{to{--ring-angle:360deg}}
.portrait-frame{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid var(--line-2);border-radius:20px;
  mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%);
}
.portrait-scan{
  position:absolute;left:0;right:0;top:0;height:120px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.14),transparent);
  animation:scanline 5.2s ease-in-out infinite;
}
@keyframes scanline{0%{transform:translateY(-120px)}100%{transform:translateY(460px)}}

.chip{
  position:absolute;z-index:4;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  padding:6px 13px;border-radius:8px;color:var(--cyan);
  border:1px solid var(--line-2);background:rgba(5,10,18,.78);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 10px 26px -14px rgba(34,211,238,.8);
}
.chip-1{top:6%;left:-4%;animation:floaty 7s ease-in-out infinite}
.chip-2{top:24%;right:-6%;color:var(--violet);animation:floaty 8.5s ease-in-out infinite .7s}
.chip-3{bottom:30%;left:-9%;color:var(--blue);animation:floaty 9.5s ease-in-out infinite 1.4s}
.chip-4{bottom:13%;right:-2%;animation:floaty 7.8s ease-in-out infinite .4s}
.chip-5{bottom:47%;right:-11%;color:var(--violet);animation:floaty 10.5s ease-in-out infinite 2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

.badge-since{
  position:absolute;z-index:5;left:-2%;bottom:4%;
  display:flex;flex-direction:column;gap:1px;padding:11px 17px;border-radius:13px;
  border:1px solid var(--line-2);background:rgba(5,10,18,.86);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  box-shadow:0 16px 40px -22px rgba(56,189,248,.9);
}
.badge-num{font-family:var(--mono);font-size:23px;font-weight:700;color:var(--cyan);line-height:1.1}
.badge-label{font-size:11.5px;color:var(--muted);letter-spacing:.06em}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.scroll-text{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim)}
.scroll-line{width:1px;height:42px;background:linear-gradient(180deg,var(--cyan),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── 跑马灯 ────────────────────────────── */
.ticker{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.018);padding:15px 0;
}
.ticker-track{
  display:flex;align-items:center;gap:26px;width:max-content;
  animation:marquee 34s linear infinite;
  font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--dim);white-space:nowrap;
}
.ticker-track i{color:var(--cyan);font-style:normal;font-size:9px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 关于 ──────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(34px,5vw,68px);align-items:start}
.about-lead h2{
  margin:0 0 22px;font-size:clamp(26px,3.4vw,40px);line-height:1.34;font-weight:700;letter-spacing:.01em;
}
.about-lead h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-lead p{margin:0 0 16px;color:var(--muted);font-size:15.5px;max-width:40em}
.about-lead strong{color:var(--text);font-weight:600}

.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{
  padding:24px 20px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .3s,transform .3s;
}
.stat:hover{border-color:var(--line-2);transform:translateY(-3px)}
.stat-num{
  display:block;font-family:var(--mono);font-size:clamp(28px,3.6vw,40px);font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;
}
.stat-in{font-size:.52em;letter-spacing:.08em}
.stat-unit{font-size:.5em;margin-left:2px}
.stat-label{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* ── 时间线 ────────────────────────────── */
.timeline{position:relative;padding-left:0}
.tl-track{
  position:absolute;left:112px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--line),rgba(125,195,255,.05));overflow:hidden;
}
.tl-progress{
  position:absolute;inset:0 0 auto;height:0;
  background:linear-gradient(180deg,var(--cyan),var(--violet));
  box-shadow:0 0 12px rgba(34,211,238,.55);transition:height .18s linear;
}
.tl-item{position:relative;display:grid;grid-template-columns:96px 1fr;gap:34px;padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-year{
  font-family:var(--mono);font-size:16px;font-weight:600;color:var(--cyan);
  text-align:right;padding-top:2px;letter-spacing:.04em;
}
.tl-dot{
  position:absolute;left:106px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--cyan);z-index:2;
  box-shadow:0 0 0 4px rgba(5,7,12,1),0 0 16px rgba(34,211,238,.6);
}
.tl-body{
  padding:20px 24px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.tl-body:hover{border-color:var(--line-2);transform:translateX(5px);box-shadow:0 18px 44px -30px rgba(56,189,248,.85)}
.tl-body h3{margin:0 0 8px;font-size:18px;font-weight:650}
.tl-body p{margin:0;color:var(--muted);font-size:14.8px;max-width:44em}
.tl-now .tl-year{color:var(--green)}
.tl-now .tl-dot{border-color:var(--green);box-shadow:0 0 0 4px rgba(5,7,12,1),0 0 18px rgba(52,211,153,.75)}
.tl-flag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--green);
  border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.1);
  border-radius:6px;padding:2px 8px;margin-left:8px;vertical-align:middle;
}

/* ── 能力卡片 ──────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  position:relative;padding:28px 26px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.042),rgba(255,255,255,.008));
  overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px 220px at 50% 0%,rgba(56,189,248,.13),transparent 70%);
}
.card:hover{border-color:var(--line-2);transform:translateY(-5px);box-shadow:0 26px 54px -34px rgba(56,189,248,.95)}
.card:hover::before{opacity:1}
.card-ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  border:1px solid var(--line-2);color:var(--cyan);background:rgba(34,211,238,.07);
  transition:background .3s,color .3s,box-shadow .3s;
}
.card-ico svg{width:23px;height:23px}
.card:hover .card-ico{background:rgba(34,211,238,.15);box-shadow:0 0 22px -6px rgba(34,211,238,.75)}
.card h3{margin:0 0 9px;font-size:17.5px;font-weight:650}
.card p{margin:0;color:var(--muted);font-size:14.6px;line-height:1.75}

/* ── ALL IN AI ─────────────────────────── */
.section-focus{overflow:hidden}
/* AI 核心图只做氛围点缀：
   放在右侧 + screen 混合（暗部透出）+ 径向遮罩淡出，
   避免压住正文，也不留图片自身的方形硬边 */
.focus-core{
  position:absolute;right:-7%;top:54%;width:min(660px,66vw);aspect-ratio:1;
  transform:translateY(-50%);
  background:url("ai-core.webp?v=2") center/contain no-repeat;
  opacity:.5;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 68%);
  pointer-events:none;
}
.focus-title{
  margin:0;text-align:center;line-height:.95;
  font-size:clamp(52px,12vw,168px);font-weight:800;letter-spacing:-.01em;
  display:flex;flex-direction:column;align-items:center;gap:.02em;
}
.focus-kt{
  background:linear-gradient(120deg,rgba(232,238,248,.92),rgba(232,238,248,.42));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.focus-ai{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 44px rgba(56,189,248,.5));
  animation:aiGlow 4.2s ease-in-out infinite;
}
@keyframes aiGlow{0%,100%{filter:drop-shadow(0 0 34px rgba(56,189,248,.4))}50%{filter:drop-shadow(0 0 62px rgba(167,139,250,.6))}}
.focus-sub{text-align:center;margin:26px auto 0;color:var(--muted);font-size:17px;max-width:32em}

.focus-flow{
  display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:6px;
  margin:54px auto 0;max-width:1040px;
}
.flow-node{
  flex:1 1 190px;min-width:170px;text-align:center;padding:22px 14px;border-radius:14px;
  border:1px solid var(--line);background:rgba(6,10,18,.82);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  display:flex;flex-direction:column;gap:5px;
  transition:border-color .3s,transform .3s;
}
.flow-node:hover{border-color:var(--line-2);transform:translateY(-4px)}
.flow-num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim)}
.flow-name{font-size:17px;font-weight:650;color:var(--text)}
.flow-desc{font-size:12.8px;color:var(--muted)}
.flow-node-hot{border-color:rgba(52,211,153,.38);background:rgba(52,211,153,.07)}
.flow-node-hot .flow-num{color:var(--green)}
.flow-node-hot .flow-name{color:var(--green)}
.flow-arrow{display:grid;place-items:center;color:var(--dim);flex:0 0 40px}
.flow-arrow svg{width:38px;height:12px}

.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.focus-card{
  padding:26px 24px;border-radius:15px;border:1px solid var(--line);
  background:rgba(6,10,18,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .3s,background .3s;
}
.focus-card:hover{border-color:var(--line-2);background:rgba(9,14,24,.8)}
.focus-card h3{margin:0 0 9px;font-size:17px;font-weight:650;color:var(--text)}
.focus-card h3::before{content:"— ";color:var(--cyan)}
.focus-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.78}

/* ── 技术栈 ────────────────────────────── */
.stack-lead{margin:0 0 26px;color:var(--muted);font-size:15.5px}
.stack-grid{display:flex;flex-wrap:wrap;gap:11px}
.tag{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted);
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.028);transition:all .26s;
}
.tag:hover{color:var(--text);border-color:var(--line-2);background:rgba(34,211,238,.09);transform:translateY(-2px)}
.tag-key{color:var(--cyan);border-color:rgba(34,211,238,.34);background:rgba(34,211,238,.08);font-weight:600}

/* ── 联系 ──────────────────────────────── */
.section-contact{padding-bottom:clamp(60px,7vw,90px)}
.contact-inner{
  text-align:center;padding:clamp(42px,6vw,74px) clamp(24px,4vw,50px);border-radius:22px;
  border:1px solid var(--line);position:relative;overflow:hidden;
  background:
    radial-gradient(700px 340px at 50% -10%,rgba(56,189,248,.14),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
}
.contact-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.32em;color:var(--cyan)}
.contact-title{margin:14px 0 16px;font-size:clamp(28px,4.4vw,50px);font-weight:750;line-height:1.2}
.contact-desc{margin:0 auto;color:var(--muted);font-size:16px;max-width:36em}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.contact-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:38px;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.06em;
}
.meta-item{display:inline-flex;align-items:center;gap:8px}
.meta-sep{width:1px;height:12px;background:var(--line-2)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 2.1s infinite}

/* ── 页脚 ──────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:26px 0;background:rgba(3,5,10,.6)}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.footer-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-brand{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.02em}
.footer-copy{font-size:12.8px;color:var(--dim)}
.footer-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-sep{width:1px;height:12px;background:var(--line)}
.icp,.icp-link{
  font-size:12.8px;color:var(--muted);transition:color .25s;
  font-family:var(--mono);letter-spacing:.02em;
}
.icp:hover,.icp-link:hover{color:var(--cyan)}
.icp-link{font-family:var(--font);font-size:12.5px}

/* ── 出场动画 ──────────────────────────── */
/* 仅在 JS 可用时才隐藏初始状态：脚本失效时内容依然可见 */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.75,.3,1),transform .75s cubic-bezier(.2,.75,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}
.reveal[data-d="6"]{transition-delay:.42s}

/* ── 响应式 ────────────────────────────── */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:46px;padding-top:26px}
  .hero-visual{order:-1}
  .portrait-wrap{width:min(78%,330px)}
  .chip-3{left:-6%}.chip-5{right:-8%}
  .about-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .focus-grid{grid-template-columns:1fr}
  .tl-track{left:94px}
  .tl-item{grid-template-columns:82px 1fr;gap:26px}
  .tl-dot{left:88px}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,7,12,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);padding:6px 22px 18px;
    transform:translateY(-118%);transition:transform .34s cubic-bezier(.3,.8,.3,1);
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px 0;border-bottom:1px solid rgba(125,195,255,.08);font-size:15px}
  .nav-links .nav-cta{margin-top:14px;text-align:center;padding:11px 16px;border-bottom:1px solid var(--line-2)}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .cards{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .flow-arrow{transform:rotate(90deg);height:22px;flex:0 0 22px;width:100%}
  .focus-flow{flex-direction:column;align-items:stretch}
  .flow-node{min-width:0}
  .tl-track{left:11px}
  .tl-item{grid-template-columns:1fr;gap:6px;padding-left:34px}
  .tl-year{text-align:left;font-size:14px}
  .tl-dot{left:5px;top:3px}
  .hero-desc br{display:none}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-right{gap:10px}
  .bg-img{opacity:.3}
  /* 悬浮标签收进视口内，避免撑出横向滚动 */
  .chip-1{left:0}.chip-2{right:0}.chip-3{left:0}.chip-4{right:0}.chip-5{right:0}
  .badge-since{left:0}
}

/* ── 无障碍 ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}