/* ============ 基础重置 ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f0f9f4;
  --bg2:#e3f2ea;
  --card:#ffffff;
  --card2:#d4ede0;
  --primary:#00a865;
  --primary2:#00d68f;
  --accent:#0098f0;
  --accent2:#ff6b9d;
  --gold:#f0a030;
  --green:#00b894;
  --text:#1a3a2a;
  --text2:#5a7a6a;
  --radius:16px;
  --shadow:0 8px 32px rgba(0,168,101,.12);
}
html{scroll-behavior:smooth}
body{
  font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  padding-top:56px;
  padding-bottom:56px; /* 为底部轮播控件留空间 */
}

/* ============ 导航栏 ============ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--card2);
}
.navbar-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 20px;
  gap:12px;
}
.navbar-brand{
  font-size:16px;font-weight:900;color:var(--primary);
  text-decoration:none;white-space:nowrap;
}
.navbar-items{display:flex;gap:4px;flex-wrap:wrap;align-items:center;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.navbar-items::-webkit-scrollbar{display:none}
.nav-item{
  padding:6px 14px;border-radius:20px;
  font-size:13px;font-weight:600;color:var(--text2);
  cursor:pointer;transition:all .25s;
  border:none;background:none;font-family:inherit;
  white-space:nowrap;
}
.nav-item:hover{background:var(--bg2);color:var(--primary)}
.nav-item.active{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;box-shadow:0 2px 12px rgba(0,168,101,.3);
}
.lang-toggle{
  padding:6px 14px;border-radius:20px;
  font-size:13px;font-weight:700;
  background:linear-gradient(135deg,var(--accent),#74b9ff);
  color:#fff;border:none;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
  flex-shrink:0;
}
.lang-toggle:hover{transform:scale(1.05);box-shadow:0 2px 12px rgba(0,152,240,.3)}
.nav-progress{
  position:fixed;top:56px;left:0;right:0;height:3px;
  background:var(--bg2);z-index:99;overflow:hidden;
}
.nav-progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
}

/* ============ 背景动效 ============ */
.bg-particles{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.bg-glow{
  position:fixed;top:-200px;left:-200px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,101,.1) 0%,transparent 70%);
  z-index:0;pointer-events:none;
  animation:floatGlow 8s ease-in-out infinite alternate;
}
.bg-glow2{
  position:fixed;bottom:-200px;right:-200px;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,214,143,.08) 0%,transparent 70%);
  z-index:0;pointer-events:none;
  animation:floatGlow 10s ease-in-out infinite alternate-reverse;
}
@keyframes floatGlow{
  0%{transform:translate(0,0)}
  100%{transform:translate(80px,60px)}
}

/* ============ 通用容器 ============ */
.container{max-width:900px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.section-title{
  font-size:28px;font-weight:800;text-align:center;margin-bottom:40px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-title .icon{font-size:28px;margin-right:8px;-webkit-text-fill-color:initial}

/* ============ 轮播板块 ============ */
.slide-section{display:none}
.slide-section.active{
  display:block;
  animation:slideIn .5s ease;
}
@keyframes slideIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.section.slide-section.active{
  min-height:calc(100vh - 56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* 内容不超过一屏时居中；超过时从顶部开始可滚动 */
.section.slide-section.active > .container{
  margin-top:auto;margin-bottom:auto;
}

/* ============ Hero ============ */
.hero{
  min-height:calc(100vh - 56px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:40px 20px;position:relative;z-index:1;
}
.hero.slide-section:not(.active){display:none}
.hero.slide-section.active{display:flex}
.hero-avatar{
  width:140px;height:140px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:900;color:#fff;
  margin-bottom:24px;box-shadow:0 0 40px rgba(0,168,101,.35);
  animation:avatarPulse 3s ease-in-out infinite;
  border:4px solid rgba(0,168,101,.15);
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 40px rgba(0,168,101,.35)}
  50%{box-shadow:0 0 60px rgba(0,214,143,.4)}
}
.hero-name{
  font-size:48px;font-weight:900;margin-bottom:8px;
  background:linear-gradient(135deg,var(--primary) 30%,var(--primary2) 70%,var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-tagline{
  font-size:18px;color:var(--text2);margin-bottom:16px;
}
.hero-typing{
  font-size:16px;color:var(--primary);
  font-family:'Courier New',monospace;
  min-height:28px;margin-bottom:32px;
}
.hero-typing::after{
  content:'▊';animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-stats{
  display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-bottom:32px;
}
.hero-stat{
  background:var(--card);border:1px solid var(--card2);
  padding:16px 24px;border-radius:var(--radius);
  text-align:center;min-width:100px;
  transition:transform .3s,box-shadow .3s;
  box-shadow:var(--shadow);
}
.hero-stat:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,168,101,.18)}
.hero-stat .num{
  font-size:28px;font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-stat .label{font-size:12px;color:var(--text2);margin-top:4px}

/* ============ 个人信息卡片 ============ */
.info-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:32px;
  box-shadow:var(--shadow);
}
.info-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;
}
.info-item{
  display:flex;align-items:center;gap:12px;
}
.info-item .ico{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
}
.info-item .ico.cake{background:linear-gradient(135deg,var(--accent2),#fdcb6e)}
.info-item .ico.school{background:linear-gradient(135deg,var(--green),#55efc4)}
.info-item .ico.loc{background:linear-gradient(135deg,var(--accent),#74b9ff)}
.info-item .ico.code{background:linear-gradient(135deg,var(--gold),#fdcb6e)}
.info-item .val{font-size:15px;font-weight:600;color:var(--text)}
.info-item .key{font-size:12px;color:var(--text2)}

/* ============ 时间线 ============ */
.timeline{position:relative;padding-left:40px}
.timeline::before{
  content:'';position:absolute;left:12px;top:0;bottom:0;
  width:3px;background:linear-gradient(to bottom,var(--primary),var(--primary2),var(--accent));
  border-radius:2px;
}
.tl-item{
  position:relative;margin-bottom:32px;
  opacity:0;transform:translateX(-20px);
  transition:opacity .6s,transform .6s;
}
.tl-item.visible{opacity:1;transform:translateX(0)}
.tl-dot{
  position:absolute;left:-34px;top:4px;
  width:22px;height:22px;border-radius:50%;
  background:var(--bg);border:3px solid var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;z-index:2;
}
.tl-dot.accent{border-color:var(--accent)}
.tl-dot.gold{border-color:var(--gold)}
.tl-dot.green{border-color:var(--green)}
.tl-dot.pink{border-color:var(--accent2)}
.tl-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:20px 24px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  box-shadow:var(--shadow);
}
.tl-card:hover{
  transform:translateX(6px);
  border-color:var(--primary);
  box-shadow:0 12px 36px rgba(0,168,101,.18);
}
.tl-date{
  display:inline-block;font-size:12px;font-weight:700;
  padding:3px 12px;border-radius:20px;margin-bottom:8px;
  background:rgba(0,168,101,.12);color:var(--primary);
}
.tl-date.accent{background:rgba(0,152,240,.12);color:var(--accent)}
.tl-date.gold{background:rgba(240,160,48,.12);color:var(--gold)}
.tl-date.green{background:rgba(0,184,148,.12);color:var(--green)}
.tl-date.pink{background:rgba(255,107,157,.12);color:var(--accent2)}
.tl-title{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--text)}
.tl-org{font-size:14px;color:var(--accent);margin-bottom:8px;font-weight:600}
.tl-desc{font-size:14px;color:var(--text2);line-height:1.6}
.tl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tl-tag{
  font-size:12px;padding:2px 10px;border-radius:12px;
  background:var(--bg2);color:var(--text2);
}
.tl-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:20px;
  background:linear-gradient(135deg,var(--green),#55efc4);
  color:#fff;margin-left:8px;
}
.tl-badge.ongoing{
  background:linear-gradient(135deg,var(--accent2),#fdcb6e);
}

/* ============ 技能展示 ============ */
.skills-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;
}
.skill-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:24px 16px;text-align:center;
  transition:transform .3s,box-shadow .3s;
  box-shadow:var(--shadow);
}
.skill-card:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,168,101,.18)}
.skill-icon{font-size:36px;margin-bottom:12px}
.skill-name{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--text)}
.skill-bar{
  width:100%;height:8px;background:var(--bg2);border-radius:4px;
  overflow:hidden;margin-bottom:6px;
}
.skill-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  transition:width 1.5s ease;
}
.skill-fill.gold{background:linear-gradient(90deg,var(--gold),var(--accent2))}
.skill-fill.green{background:linear-gradient(90deg,var(--green),#55efc4)}
.skill-level{font-size:12px;color:var(--text2)}

/* ============ 编程语言标签 ============ */
.lang-cloud{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.lang-tag{
  padding:8px 18px;border-radius:30px;font-size:14px;font-weight:600;
  border:1px solid var(--card2);background:var(--card);
  transition:all .3s;cursor:default;
  box-shadow:var(--shadow);
}
.lang-tag:hover{transform:scale(1.1);border-color:var(--primary)}
.lang-tag.c{border-color:var(--accent);color:var(--accent)}
.lang-tag.py{border-color:var(--gold);color:var(--gold)}
.lang-tag.robot{border-color:var(--green);color:var(--green)}
.lang-tag.mc{border-color:var(--accent2);color:var(--accent2)}

/* ============ 作品展示 ============ */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
}
.portfolio-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow);
}
.portfolio-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(0,168,101,.2);
  border-color:var(--primary);
}
.portfolio-banner{
  height:100px;display:flex;align-items:center;justify-content:center;
  font-size:48px;position:relative;overflow:hidden;
}
.portfolio-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.2) 0%,transparent 60%);
}
.portfolio-banner.b1{background:linear-gradient(135deg,#0077b6,#00b4d8)}
.portfolio-banner.b2{background:linear-gradient(135deg,#c0a030,#ffd32a)}
.portfolio-banner.b3{background:linear-gradient(135deg,#00a865,#00d68f)}
.portfolio-banner .emoji{position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.portfolio-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.portfolio-name{
  font-size:18px;font-weight:800;margin-bottom:6px;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.portfolio-name .badge{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;
  background:linear-gradient(135deg,var(--green),#55efc4);color:#fff;
}
.portfolio-url{
  font-size:13px;color:var(--accent);margin-bottom:10px;
  font-family:'Courier New',monospace;
  display:flex;align-items:center;gap:6px;
}
.portfolio-desc{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:14px;flex:1}
.portfolio-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;
  padding:10px 20px;border-radius:30px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;text-decoration:none;
  transition:transform .25s,box-shadow .25s;
  align-self:flex-start;
}
.portfolio-link:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(0,168,101,.3)}

/* ============ 未来愿景 ============ */
.dream-section{
  background:linear-gradient(180deg,transparent 0%,rgba(0,168,101,.06) 50%,transparent 100%);
}
.dream-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
}
.dream-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:32px 28px;
  position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;
  box-shadow:var(--shadow);
}
.dream-card:hover{
  transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,168,101,.2);border-color:var(--primary);
}
.dream-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
}
.dream-card.gold-top::before{background:linear-gradient(90deg,var(--gold),var(--accent2))}
.dream-icon{
  font-size:44px;margin-bottom:16px;
  display:inline-block;
}
.dream-label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  color:var(--primary);margin-bottom:8px;
}
.dream-card.gold-top .dream-label{color:var(--gold)}
.dream-title{font-size:22px;font-weight:900;margin-bottom:12px;color:var(--text)}
.dream-desc{font-size:14px;color:var(--text2);line-height:1.8}
.dream-quote{
  font-size:13px;color:var(--primary);font-style:italic;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--card2);
  display:flex;align-items:flex-start;gap:8px;
}
.dream-quote .qmark{font-size:24px;line-height:1;color:var(--primary2);flex-shrink:0}

/* 马斯克故事分享 */
.dream-story{
  margin-top:32px;
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:36px 32px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.dream-story:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,168,101,.2);
  border-color:var(--primary);
}
.dream-story::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--accent2),var(--primary2));
}
.dream-story-header{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.dream-story-icon{font-size:36px;flex-shrink:0}
.dream-story-sub{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  color:var(--gold);margin-bottom:4px;
}
.dream-story-title{font-size:22px;font-weight:900;color:var(--text)}
.dream-story-body{font-size:14.5px;color:var(--text2);line-height:2.05}
.dream-story-body p{margin-bottom:14px}
.dream-story-body p:last-child{margin-bottom:0}
.dream-story-body .greeting{font-weight:700;color:var(--text);font-size:15.5px}
.dream-story-body strong{color:var(--primary);font-weight:700}

/* ============ AI前沿 ============ */
.ai-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;
}
.ai-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:24px;
  position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;
  box-shadow:var(--shadow);
}
.ai-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,168,101,.2);
  border-color:var(--primary);
}
.ai-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.ai-card.c-anthropic::before{background:linear-gradient(90deg,#d97757,#e89b6e)}
.ai-card.c-openai::before{background:linear-gradient(90deg,#10a37f,#1a7f64)}
.ai-card.c-glm::before{background:linear-gradient(90deg,#3b5998,#4a6cb3)}
.ai-card.c-minimax::before{background:linear-gradient(90deg,#6c5ce7,#a29bfe)}
.ai-card.c-qwen::before{background:linear-gradient(90deg,#e17055,#fdcb6e)}
.ai-header{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.ai-logo{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:#fff;flex-shrink:0;
}
.ai-card.c-anthropic .ai-logo{background:linear-gradient(135deg,#d97757,#e89b6e)}
.ai-card.c-openai .ai-logo{background:linear-gradient(135deg,#10a37f,#1a7f64)}
.ai-card.c-glm .ai-logo{background:linear-gradient(135deg,#3b5998,#4a6cb3)}
.ai-card.c-minimax .ai-logo{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}
.ai-card.c-qwen .ai-logo{background:linear-gradient(135deg,#e17055,#fdcb6e)}
.ai-company{font-size:13px;color:var(--text2);font-weight:600}
.ai-model{font-size:18px;font-weight:800;color:var(--text)}
.ai-badge{
  display:inline-block;font-size:11px;font-weight:700;
  padding:2px 10px;border-radius:10px;margin-bottom:12px;
  background:rgba(0,168,101,.12);color:var(--primary);
}
.ai-desc{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:12px}
.ai-features{display:flex;flex-wrap:wrap;gap:6px}
.ai-feature{
  font-size:12px;padding:3px 10px;border-radius:10px;
  background:var(--bg2);color:var(--text2);
}

/* ============ 创新项目 ============ */
.innov-section{
  background:linear-gradient(180deg,transparent 0%,rgba(0,168,101,.04) 50%,transparent 100%);
}
.innov-hero{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:32px 28px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:24px;
}
.innov-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary2));
}
.innov-hero-top{display:flex;align-items:flex-start;gap:20px;margin-bottom:18px}
.innov-emoji{font-size:48px;flex-shrink:0;line-height:1}
.innov-hero-title{font-size:22px;font-weight:900;color:var(--text);margin-bottom:6px}
.innov-hero-sub{font-size:13px;color:var(--text2);font-weight:600}
.innov-hero-desc{font-size:14px;color:var(--text2);line-height:1.8}
.innov-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.innov-tag{
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:12px;
  background:rgba(0,168,101,.1);color:var(--primary);
}
.innov-tag.warn{background:rgba(240,160,48,.12);color:var(--gold)}
.innov-tag.blue{background:rgba(0,152,240,.1);color:var(--accent)}
.innov-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
}
.innov-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:24px;
  position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;
  box-shadow:var(--shadow);
}
.innov-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(0,168,101,.16);
  border-color:var(--primary);
}
.innov-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.innov-card-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.innov-card-icon.red{background:rgba(255,107,107,.12);color:#e74c3c}
.innov-card-icon.yellow{background:rgba(240,160,48,.12);color:var(--gold)}
.innov-card-icon.blue{background:rgba(0,152,240,.12);color:var(--accent)}
.innov-card-icon.green{background:rgba(0,184,148,.12);color:var(--green)}
.innov-card-icon.purple{background:rgba(108,92,231,.12);color:#6c5ce7}
.innov-card-icon.pink{background:rgba(255,107,157,.12);color:var(--accent2)}
.innov-card-icon.teal{background:rgba(0,168,101,.12);color:var(--primary)}
.innov-card-icon.orange{background:rgba(230,126,34,.12);color:#e67e22}
.innov-card-icon.cyan{background:rgba(0,206,209,.12);color:#00ced1}
.innov-card-title{font-size:15px;font-weight:800;color:var(--text)}
.innov-card-body{font-size:13px;color:var(--text2);line-height:1.75}
.innov-card-body strong{color:var(--text);font-weight:700}
.innov-quote{
  font-size:14px;color:var(--primary);font-style:italic;
  margin-top:16px;padding:16px 20px;
  background:rgba(0,168,101,.06);border-radius:var(--radius);
  border-left:3px solid var(--primary);
}

/* ============ 运动项目 ============ */
.sport-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
}
.sport-card{
  background:var(--card);border:1px solid var(--card2);
  border-radius:var(--radius);padding:32px 28px;
  position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;
  box-shadow:var(--shadow);
}
.sport-card:hover{
  transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,168,101,.2);border-color:var(--primary);
}
.sport-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.sport-card.c-swim::before{background:linear-gradient(90deg,#0098f0,#00d2ff)}
.sport-card.c-run::before{background:linear-gradient(90deg,#f0a030,#fdcb6e)}
.sport-card.c-climb::before{background:linear-gradient(90deg,#e17055,#fd79a8)}
.sport-icon{
  font-size:52px;margin-bottom:14px;display:inline-block;
}
.sport-name{font-size:20px;font-weight:900;color:var(--text);margin-bottom:8px}
.sport-en{font-size:12px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:14px}
.sport-desc{font-size:14px;color:var(--text2);line-height:1.8}
.sport-stats{display:flex;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--card2)}
.sport-stat{text-align:center;flex:1}
.sport-stat .num{font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--primary2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sport-stat .label{font-size:11px;color:var(--text2);margin-top:2px}
.sport-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sport-tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px;background:rgba(0,168,101,.1);color:var(--primary)}

/* ============ 页脚 ============ */
.footer{
  text-align:center;padding:30px 20px;
  border-top:1px solid var(--card2);
  color:var(--text2);font-size:13px;position:relative;z-index:1;
  background:var(--card);
}
.footer-heart{color:var(--accent2)}

/* ============ 动画入场 ============ */
.fade-in{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s,transform .8s;
}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ============ 轮播控件 ============ */
.carousel-controls{
  position:fixed;bottom:0;left:0;right:0;z-index:98;
  display:flex;align-items:center;justify-content:center;
  gap:10px;padding:10px 16px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--card2);
}
.carousel-arrow{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;color:var(--text2);
  border:1px solid var(--card2);background:var(--card);
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.carousel-arrow:hover{
  background:var(--primary);color:#fff;border-color:var(--primary);
  transform:scale(1.08);
}
.carousel-dots{
  display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  justify-content:center;max-width:600px;
}
.carousel-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--card2);border:none;cursor:pointer;
  transition:all .3s;padding:0;flex-shrink:0;
}
.carousel-dot:hover{background:var(--primary2)}
.carousel-dot.active{
  width:24px;border-radius:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
}
.carousel-counter{
  font-size:12px;font-weight:700;color:var(--text2);
  white-space:nowrap;flex-shrink:0;
  min-width:44px;text-align:center;
}
.carousel-counter .cur{color:var(--primary);font-size:14px}
.carousel-pause{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--text2);
  border:1px solid var(--card2);background:var(--card);
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.carousel-pause:hover{color:var(--primary);border-color:var(--primary)}
.carousel-pause.paused{
  background:var(--gold);color:#fff;border-color:var(--gold);
}

/* ============ 图片图标样式 ============ */
.brand-emoji{
  width:24px;height:24px;border-radius:6px;object-fit:cover;
  vertical-align:middle;margin-right:4px;flex-shrink:0;
}
.nav-icon-img{
  width:22px;height:22px;border-radius:6px;object-fit:cover;
  vertical-align:middle;margin-right:8px;flex-shrink:0;
}
.ico-img{
  width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0;
}
.tl-dot-img{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
  position:absolute;left:-34px;top:4px;z-index:2;
  border:3px solid var(--primary);background:var(--bg);
}
.skill-icon-img{
  width:36px;height:36px;border-radius:10px;object-fit:cover;margin-bottom:10px;
}
.portfolio-emoji{
  width:56px;height:56px;border-radius:14px;object-fit:cover;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.dream-icon-img{
  width:48px;height:48px;border-radius:12px;object-fit:cover;margin-bottom:16px;
}
.card-icon-img{
  width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;
}
.sport-icon-img{
  width:52px;height:52px;border-radius:14px;object-fit:cover;margin-bottom:14px;
}

/* ============ 响应式 ============ */
@media(max-width:768px){
  .navbar-items{
    -webkit-overflow-scrolling:touch;
  }
  .navbar-brand{display:none}
  .nav-item{padding:6px 10px;font-size:12px}
  .carousel-dots{max-width:280px}
  .carousel-dot{width:6px;height:6px}
  .carousel-dot.active{width:18px}
  .carousel-counter{font-size:11px;min-width:36px}
}
@media(max-width:600px){
  .hero-name{font-size:36px}
  .hero-stats{gap:12px}
  .hero-stat{padding:12px 16px;min-width:80px}
  .hero-stat .num{font-size:22px}
  .section-title{font-size:22px}
  .timeline{padding-left:32px}
  .tl-dot{left:-28px}
  .tl-dot-img{left:-28px}
}