diff --git a/.gitignore b/.gitignore
index 0dd185c..94d6ef6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ assets/docs/AI-Revolution/稿子.txt
 projects0.html  
 .claude/
 projects/ytmsg/
-docs/
\ No newline at end of file
+docs/
+.DS_Store
diff --git a/assets/css/style.css b/assets/css/style.css
index 77178c8..606ce2b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,41 +1,1241 @@
-/* 引入 Google Fonts 在 HTML Head 中完成，这里处理自定义样式 */
+/* UESTC IA shared design system */
+:root {
+  --ia-bg: #f6f4ef;
+  --ia-bg-wash: #e7ece9;
+  --ia-surface: rgba(255, 255, 255, 0.58);
+  --ia-surface-strong: rgba(255, 255, 255, 0.78);
+  --ia-ink: #27313a;
+  --ia-muted: #68757b;
+  --ia-soft: #8da0a0;
+  --ia-line: rgba(109, 125, 128, 0.22);
+  --ia-primary: #6f8f92;
+  --ia-primary-deep: #4d6f73;
+  --ia-accent: #b8a783;
+  --ia-rose-wash: #d8c7c4;
+  --ia-shadow: 0 24px 80px rgba(52, 68, 72, 0.14);
+  --ia-shadow-soft: 0 14px 42px rgba(52, 68, 72, 0.1);
+  --ia-radius: 8px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--ia-bg);
+}
 
-/* 全局背景：极其微妙的神经网络连接图 */
 body {
-    background-color: #F8FAFC; /* Slate-50 */
-    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394a3b8' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-    font-family: 'Inter', 'Noto Sans SC', sans-serif;
-    color: #1E293B; /* Slate-800 */
+  min-height: 100vh;
+  background:
+    linear-gradient(118deg, rgba(216, 199, 196, 0.34), transparent 38%),
+    linear-gradient(214deg, rgba(111, 143, 146, 0.16), transparent 42%),
+    linear-gradient(135deg, var(--ia-bg), var(--ia-bg-wash));
+  color: var(--ia-ink);
+  font-family: "Inter", "Noto Sans SC", sans-serif;
+}
+
+body::before {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  content: "";
+  background-image:
+    linear-gradient(rgba(77, 111, 115, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(77, 111, 115, 0.045) 1px, transparent 1px);
+  background-size: 72px 72px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
+}
+
+::selection {
+  color: #fff;
+  background: var(--ia-primary-deep);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(246, 244, 239, 0.9);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(109, 125, 128, 0.38);
+  border-radius: 4px;
 }
 
-/* 极简滚动条 */
-::-webkit-scrollbar { width: 8px; }
-::-webkit-scrollbar-track { background: #f1f1f1; }
-::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(77, 111, 115, 0.58);
+}
+
+a {
+  color: inherit;
+}
+
+img {
+  max-width: 100%;
+}
 
-/* 玻璃拟态效果 (用于导航栏) */
-.glass-effect {
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
+.glass-effect,
+.ia-glass {
+  background: var(--ia-surface);
+  border: 1px solid rgba(255, 255, 255, 0.62);
+  box-shadow: var(--ia-shadow-soft);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.ia-navbar {
+  background: rgba(246, 244, 239, 0.72);
+  border-bottom: 1px solid var(--ia-line);
+  box-shadow: 0 12px 40px rgba(52, 68, 72, 0.08);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.ia-brand-mark {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--ia-radius);
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  box-shadow: 0 12px 30px rgba(77, 111, 115, 0.18);
+  object-fit: cover;
 }
 
-/* 链接悬停下划线动画 */
 .nav-link {
-    position: relative;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  color: var(--ia-muted);
+  transition: color 180ms ease, transform 180ms ease;
 }
+
 .nav-link::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background-color: #0891B2; /* Cyan-600 */
-    transition: width 0.3s ease;
-}
-.nav-link:hover::after {
-    width: 100%;
+  position: absolute;
+  right: 0;
+  bottom: 4px;
+  left: 0;
+  height: 2px;
+  content: "";
+  background: linear-gradient(90deg, var(--ia-primary), var(--ia-accent));
+  border-radius: 999px;
+  opacity: 0;
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.nav-link:hover,
+.nav-link.is-active {
+  color: var(--ia-primary-deep);
+}
+
+.nav-link:hover::after,
+.nav-link.is-active::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.ia-mobile-link {
+  display: block;
+  padding: 0.88rem 1rem;
+  color: var(--ia-muted);
+  border-radius: var(--ia-radius);
+  transition: background 180ms ease, color 180ms ease;
+}
+
+.ia-mobile-link:hover,
+.ia-mobile-link.is-active {
+  color: var(--ia-primary-deep);
+  background: rgba(111, 143, 146, 0.12);
+}
+
+.ia-page {
+  width: min(1120px, calc(100% - 2rem));
+  min-height: calc(100vh - 13rem);
+  margin: 0 auto;
+}
+
+.ia-narrow {
+  width: min(920px, calc(100% - 2rem));
+  margin: 0 auto;
+}
+
+.ia-section {
+  margin-bottom: 5rem;
+}
+
+.ia-page-header {
+  max-width: 760px;
+  margin: 0 auto 3.5rem;
+  text-align: center;
+}
+
+.ia-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 1rem;
+  color: var(--ia-primary-deep);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ia-text-ink {
+  color: var(--ia-ink);
+}
+
+.ia-text-muted {
+  color: var(--ia-muted);
+}
+
+.ia-text-primary {
+  color: var(--ia-primary-deep);
+}
+
+.ia-text-accent {
+  color: var(--ia-accent);
+}
+
+.ia-page-title {
+  color: var(--ia-ink);
+  font-size: 2.75rem;
+  font-weight: 700;
+  line-height: 1.12;
+}
+
+.ia-page-subtitle {
+  margin-top: 1rem;
+  color: var(--ia-muted);
+  font-size: 1.05rem;
+  line-height: 1.8;
+}
+
+.ia-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: 1.5rem;
+  color: var(--ia-ink);
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.ia-section-title::before {
+  width: 0.35rem;
+  height: 1.65rem;
+  content: "";
+  background: linear-gradient(180deg, var(--ia-primary), var(--ia-accent));
+  border-radius: 999px;
+}
+
+.ia-card,
+.ia-link-card,
+.ia-timeline-card {
+  position: relative;
+  border: 1px solid var(--ia-line);
+  border-radius: var(--ia-radius);
+  background: var(--ia-surface-strong);
+  box-shadow: var(--ia-shadow-soft);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.ia-card:hover,
+.ia-link-card:hover,
+.ia-timeline-card:hover {
+  border-color: rgba(111, 143, 146, 0.34);
+  box-shadow: var(--ia-shadow);
+  transform: translateY(-3px);
+}
+
+.ia-card::before,
+.ia-link-card::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.48), transparent 68%);
+  border-radius: inherit;
+  opacity: 0;
+  transform: translateX(-30%);
+  transition: opacity 180ms ease, transform 600ms ease;
+}
+
+.ia-card:hover::before,
+.ia-link-card:hover::before {
+  opacity: 1;
+  transform: translateX(30%);
+}
+
+.ia-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0.78rem 1.05rem;
+  overflow: hidden;
+  color: var(--ia-primary-deep);
+  font-size: 0.92rem;
+  font-weight: 700;
+  text-decoration: none;
+  border: 1px solid var(--ia-line);
+  border-radius: var(--ia-radius);
+  background: rgba(255, 255, 255, 0.56);
+  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
+}
+
+.ia-btn:hover {
+  color: var(--ia-ink);
+  border-color: rgba(111, 143, 146, 0.42);
+  background: rgba(255, 255, 255, 0.82);
+  transform: translateY(-2px);
+}
+
+.ia-btn-primary {
+  color: #fff;
+  border-color: var(--ia-primary-deep);
+  background: linear-gradient(135deg, var(--ia-primary-deep), var(--ia-primary));
+  box-shadow: 0 16px 36px rgba(77, 111, 115, 0.22);
+}
+
+.ia-btn-primary:hover {
+  color: #fff;
+  background: linear-gradient(135deg, #45666a, #688b8e);
+}
+
+.ia-btn-ghost {
+  background: rgba(255, 255, 255, 0.38);
+}
+
+.ia-ripple {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  pointer-events: none;
+  background: rgba(255, 255, 255, 0.55);
+  border-radius: 999px;
+  transform: translate(-50%, -50%) scale(0);
+  animation: ia-ripple 620ms ease-out forwards;
+}
+
+@keyframes ia-ripple {
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(18);
+  }
+}
+
+.ia-tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0.28rem 0.55rem;
+  color: var(--ia-primary-deep);
+  font-size: 0.75rem;
+  font-weight: 700;
+  border: 1px solid rgba(111, 143, 146, 0.22);
+  border-radius: var(--ia-radius);
+  background: rgba(111, 143, 146, 0.1);
+}
+
+.ia-tag-warm {
+  color: #776748;
+  border-color: rgba(184, 167, 131, 0.26);
+  background: rgba(184, 167, 131, 0.14);
+}
+
+.ia-footer {
+  margin-top: 6rem;
+  color: rgba(39, 49, 58, 0.68);
+  border-top: 1px solid var(--ia-line);
+  background: rgba(246, 244, 239, 0.7);
+}
+
+.ia-footer a {
+  transition: color 180ms ease;
+}
+
+.ia-footer a:hover {
+  color: var(--ia-primary-deep);
+}
+
+.home-immersive {
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+.home-hero {
+  position: relative;
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 7rem 1.25rem 3rem;
+  overflow: hidden;
+}
+
+.home-hero::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(90deg, rgba(246, 244, 239, 0.35), rgba(246, 244, 239, 0.05), rgba(246, 244, 239, 0.35)),
+    linear-gradient(180deg, rgba(246, 244, 239, 0.05), rgba(246, 244, 239, 0.30));
+}
+
+.breathing-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.breathing-bg canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.breathing-bg.is-static::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background:
+    linear-gradient(90deg, transparent, rgba(77, 111, 115, 0.11), transparent),
+    repeating-linear-gradient(90deg, transparent 0 28px, rgba(77, 111, 115, 0.045) 29px 30px);
+  opacity: 0.8;
+}
+
+.home-copy {
+  position: relative;
+  z-index: 2;
+  width: min(920px, 100%);
+  text-align: center;
+}
+
+.home-title {
+  color: var(--ia-ink);
+  font-size: 4rem;
+  font-weight: 700;
+  line-height: 1.05;
+  text-wrap: balance;
+  text-shadow: 0 18px 60px rgba(246, 244, 239, 0.88);
+}
+
+.home-subtitle {
+  margin-top: 1.35rem;
+  color: var(--ia-primary-deep);
+  font-size: 1.28rem;
+  font-weight: 600;
+  line-height: 1.45;
+  text-wrap: balance;
+}
+
+.ia-timeline {
+  position: relative;
+  display: grid;
+  gap: 1.35rem;
+  padding-left: 1.5rem;
+}
+
+.ia-timeline::before {
+  position: absolute;
+  top: 0.35rem;
+  bottom: 0.35rem;
+  left: 0.28rem;
+  width: 2px;
+  content: "";
+  background: linear-gradient(180deg, var(--ia-primary), rgba(111, 143, 146, 0.18));
+}
+
+.ia-timeline-item {
+  position: relative;
+}
+
+.ia-timeline-item::before {
+  position: absolute;
+  top: 1.25rem;
+  left: -1.42rem;
+  width: 12px;
+  height: 12px;
+  content: "";
+  background: var(--ia-primary);
+  border: 3px solid var(--ia-bg);
+  border-radius: 999px;
+  box-shadow: 0 0 0 3px rgba(111, 143, 146, 0.16);
+}
+
+.ia-timeline-card {
+  padding: 1.35rem;
+}
+
+.ia-date {
+  color: var(--ia-primary-deep);
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.ia-logo-tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 118px;
+  padding: 1.2rem;
+}
+
+.ia-logo-tile img {
+  width: 100%;
+  max-width: 170px;
+  max-height: 68px;
+  object-fit: contain;
+}
+
+.ia-avatar {
+  width: 72px;
+  height: 72px;
+  flex: 0 0 72px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.74);
+  border-radius: var(--ia-radius);
+  background: linear-gradient(135deg, rgba(111, 143, 146, 0.16), rgba(184, 167, 131, 0.14));
+}
+
+.ia-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ia-avatar-round {
+  border-radius: 50%;
+}
+
+/* ── Home contact: borderless style ── */
+
+.home-contact-borderless {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.65rem;
+  margin: 2rem auto 0;
+}
+
+.home-contact-label {
+  color: var(--ia-ink);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  opacity: 0.5;
+}
+
+.home-contact-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.15rem 0;
+}
+
+.home-contact-text,
+.home-contact-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.7rem;
+  font-size: 0.92rem;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
+}
+
+.home-contact-copy {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.7rem;
+  color: var(--ia-muted);
+  font-family: inherit;
+  font-size: 0.92rem;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
+}
+
+.home-contact-copy-chat {
+  flex-shrink: 0;
+  opacity: 0.55;
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.home-contact-copy-label {
+  position: relative;
+}
+
+.home-contact-copy-label::after {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  left: 0;
+  height: 1.5px;
+  content: "";
+  background: linear-gradient(90deg, var(--ia-primary), var(--ia-accent));
+  border-radius: 999px;
+  opacity: 0;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: opacity 260ms ease, transform 340ms ease;
+}
+
+.home-contact-copy-icon {
+  flex-shrink: 0;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.home-contact-copy:hover {
+  color: var(--ia-ink);
+  background: rgba(111, 143, 146, 0.08);
+  transform: translateY(-1px);
+}
+
+.home-contact-copy:hover .home-contact-copy-chat {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.home-contact-copy:hover .home-contact-copy-label::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.home-contact-copy:hover .home-contact-copy-icon {
+  opacity: 0.6;
+  transform: translateX(0);
+}
+
+.home-contact-copy:active {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Copy toast animation */
+.home-contact-copy-toast {
+  position: absolute;
+  top: -2rem;
+  left: 50%;
+  padding: 0.3rem 0.7rem;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  pointer-events: none;
+  border-radius: 5px;
+  background: var(--ia-primary-deep);
+  box-shadow: 0 8px 24px rgba(77, 111, 115, 0.28);
+  opacity: 0;
+  transform: translateX(-50%) translateY(6px) scale(0.85);
+  transition: none;
+}
+
+.home-contact-copy-toast.is-visible {
+  animation: copy-toast-pop 1.6s ease forwards;
+}
+
+@keyframes copy-toast-pop {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px) scale(0.85);
+  }
+  12% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  70% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.9);
+  }
+}
+
+.home-contact-link {
+  position: relative;
+  color: var(--ia-primary-deep);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.home-contact-link svg {
+  flex-shrink: 0;
+  opacity: 0.7;
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.home-contact-link::after {
+  position: absolute;
+  right: 0.7rem;
+  bottom: 0.3rem;
+  left: 0.7rem;
+  height: 1.5px;
+  content: "";
+  background: linear-gradient(90deg, var(--ia-primary), var(--ia-accent));
+  border-radius: 999px;
+  opacity: 0;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: opacity 260ms ease, transform 340ms ease;
+}
+
+.home-contact-link:hover {
+  color: var(--ia-ink);
+  background: rgba(111, 143, 146, 0.08);
+  transform: translateY(-1px);
+}
+
+.home-contact-link:hover svg {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.home-contact-link:hover::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.home-contact-dot {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  margin: 0 0.15rem;
+  background: var(--ia-soft);
+  border-radius: 50%;
+  opacity: 0.5;
+}
+
+.product-board {
+  display: grid;
+  max-width: 920px;
+  margin: 0 auto;
+  grid-template-columns: 1fr;
+  gap: 1.15rem;
+  align-items: stretch;
+}
+
+.product-card {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  isolation: isolate;
+  padding: clamp(1.3rem, 3vw, 2rem);
+  overflow: hidden;
+  border: 1px solid var(--ia-line);
+  border-radius: var(--ia-radius);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.5)),
+    linear-gradient(160deg, rgba(111, 143, 146, 0.12), transparent 54%);
+  box-shadow: var(--ia-shadow-soft);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.product-card:hover {
+  border-color: rgba(111, 143, 146, 0.34);
+  box-shadow: var(--ia-shadow);
+  transform: translateY(-3px);
+}
+
+.product-card-featured {
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.56)),
+    linear-gradient(150deg, rgba(111, 143, 146, 0.18), transparent 46%),
+    linear-gradient(330deg, rgba(184, 167, 131, 0.18), transparent 50%);
+}
+
+.product-card-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--ia-primary-deep);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.product-card h2 {
+  position: relative;
+  margin-top: 1.35rem;
+  color: var(--ia-ink);
+  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
+  font-weight: 800;
+  line-height: 1.18;
+}
+
+.product-card p {
+  position: relative;
+  max-width: 68ch;
+  margin-top: 1rem;
+  color: var(--ia-muted);
+  font-size: 0.96rem;
+  line-height: 1.8;
+}
+
+.product-tags {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-top: 1.15rem;
+}
+
+.product-actions {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: 1.35rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid rgba(109, 125, 128, 0.14);
+}
+
+.event-detail-page {
+  background:
+    linear-gradient(118deg, rgba(143, 161, 154, 0.28), transparent 36%),
+    linear-gradient(238deg, rgba(201, 195, 181, 0.18), transparent 44%),
+    linear-gradient(180deg, #f7f4ee, #e9efec) !important;
+  color: var(--ia-ink);
+}
+
+.event-detail-page>nav:not(.ia-navbar),
+.event-detail-page>footer:not(.ia-footer) {
+  display: none !important;
+}
+
+.event-detail-page main,
+.event-workshop-page>.max-w-5xl {
+  width: min(1120px, calc(100% - 2rem));
+}
+
+.event-detail-page main {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.event-workshop-page>.max-w-5xl {
+  margin: 0.5rem auto 1.25rem;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.event-workshop-page>.max-w-5xl a {
+  min-height: 44px;
+  color: #fff !important;
+  border: 1px solid rgba(77, 111, 115, 0.28);
+  border-radius: var(--ia-radius) !important;
+  background: linear-gradient(135deg, var(--ia-primary-deep), var(--ia-primary)) !important;
+  box-shadow: 0 16px 34px rgba(77, 111, 115, 0.18) !important;
+}
+
+.event-detail-page .pulse {
+  animation: none;
+}
+
+.event-detail-page .animate-up {
+  opacity: 1 !important;
+  transform: none !important;
+  animation: none !important;
+}
+
+.event-detail-page .rounded-3xl,
+.event-detail-page .rounded-2xl,
+.event-detail-page .rounded-xl,
+.event-detail-page .rounded-lg {
+  border-radius: var(--ia-radius) !important;
+}
+
+.event-detail-page .shadow-2xl,
+.event-detail-page .shadow-xl,
+.event-detail-page .shadow-lg,
+.event-detail-page .shadow-md,
+.event-detail-page .shadow-sm {
+  box-shadow: var(--ia-shadow-soft) !important;
+}
+
+.event-detail-page .border-slate-100,
+.event-detail-page .border-slate-200,
+.event-detail-page .border-blue-200,
+.event-detail-page .border-cyan-100,
+.event-detail-page .border-brand-100,
+.event-detail-page .border-white\/10,
+.event-detail-page .border-white\/20 {
+  border-color: var(--ia-line) !important;
+}
+
+.event-detail-page .text-slate-900,
+.event-detail-page .text-slate-800,
+.event-detail-page .text-slate-700 {
+  color: var(--ia-ink) !important;
+}
+
+.event-detail-page .text-slate-600,
+.event-detail-page .text-slate-500,
+.event-detail-page .text-slate-400,
+.event-detail-page .text-blue-800,
+.event-detail-page .text-blue-50,
+.event-detail-page .text-slate-300 {
+  color: var(--ia-muted) !important;
+}
+
+.event-detail-page .text-brand-700,
+.event-detail-page .text-brand-600,
+.event-detail-page .text-brand-500,
+.event-detail-page .text-brand-300,
+.event-detail-page .text-brand-200,
+.event-detail-page .text-cyan-700,
+.event-detail-page .text-cyan-600,
+.event-detail-page .text-cyan-500,
+.event-detail-page .text-blue-600,
+.event-detail-page .text-indigo-600,
+.event-detail-page .text-purple-600,
+.event-detail-page .text-accent-600 {
+  color: var(--ia-primary-deep) !important;
+}
+
+.event-detail-page .bg-white,
+.event-detail-page .bg-slate-50,
+.event-detail-page .bg-blue-50,
+.event-detail-page .bg-cyan-50,
+.event-detail-page .bg-brand-50,
+.event-detail-page .bg-blue-100,
+.event-detail-page .bg-indigo-100,
+.event-detail-page .bg-purple-100,
+.event-detail-page .bg-slate-100 {
+  background-color: rgba(255, 255, 255, 0.56) !important;
+}
+
+.event-detail-page article.bg-white,
+.event-detail-page section.bg-white,
+.event-detail-page .group.bg-white,
+.event-detail-page .bg-white.rounded-2xl,
+.event-detail-page .bg-white.rounded-xl {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--ia-line) !important;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52)),
+    linear-gradient(160deg, rgba(111, 143, 146, 0.12), transparent 58%) !important;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.event-detail-page article.bg-white::before,
+.event-detail-page section.bg-white::before,
+.event-detail-page .group.bg-white::before,
+.event-detail-page .bg-white.rounded-2xl::before,
+.event-detail-page .bg-white.rounded-xl::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, 0.46), transparent 72%);
+  opacity: 0.72;
+}
+
+.event-detail-page article.bg-white>*,
+.event-detail-page section.bg-white>*,
+.event-detail-page .group.bg-white>*,
+.event-detail-page .bg-white.rounded-2xl>*,
+.event-detail-page .bg-white.rounded-xl>* {
+  position: relative;
+}
+
+.event-detail-page figure img {
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  border-radius: var(--ia-radius) !important;
+  box-shadow: var(--ia-shadow-soft) !important;
+}
+
+.event-detail-page blockquote {
+  color: var(--ia-muted) !important;
+  border-color: var(--ia-primary) !important;
+  border-radius: var(--ia-radius);
+  background: rgba(111, 143, 146, 0.08);
+}
+
+.event-workshop-page header.relative {
+  width: min(1120px, calc(100% - 2rem));
+  margin: 0 auto;
+  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem) !important;
+  border: 1px solid var(--ia-line);
+  border-radius: var(--ia-radius);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)),
+    linear-gradient(145deg, rgba(111, 143, 146, 0.24), transparent 52%),
+    linear-gradient(320deg, rgba(184, 167, 131, 0.16), transparent 54%);
+  box-shadow: var(--ia-shadow);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.event-workshop-page header.relative>.absolute.inset-0 {
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(232, 238, 235, 0.42)),
+    linear-gradient(90deg, rgba(77, 111, 115, 0.12), transparent 58%) !important;
+}
+
+.event-workshop-page header.relative .blur-3xl {
+  display: none;
+}
+
+.event-workshop-page header.relative h1,
+.event-workshop-page header.relative p,
+.event-workshop-page header.relative .text-white,
+.event-workshop-page header.relative .text-blue-50,
+.event-workshop-page header.relative .text-white\/80 {
+  color: var(--ia-ink) !important;
+  text-shadow: none !important;
+}
+
+.event-workshop-page header.relative .inline-flex,
+.event-workshop-page header.relative [class*="bg-white/10"] {
+  color: var(--ia-ink) !important;
+  border-color: rgba(109, 125, 128, 0.2) !important;
+  background: rgba(255, 255, 255, 0.48) !important;
+  box-shadow: none !important;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.event-workshop-page header.relative .bg-green-400 {
+  background-color: var(--ia-primary) !important;
+}
+
+.event-workshop-page .from-slate-900,
+.event-workshop-page .from-slate-800,
+.event-workshop-page .to-slate-800,
+.event-workshop-page .to-cyan-900 {
+  --tw-gradient-from: rgba(255, 255, 255, 0.78) var(--tw-gradient-from-position) !important;
+  --tw-gradient-to: rgba(232, 238, 235, 0.62) var(--tw-gradient-to-position) !important;
+}
+
+.event-workshop-page section.relative.rounded-3xl {
+  border: 1px solid var(--ia-line);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.5)),
+    linear-gradient(150deg, rgba(111, 143, 146, 0.16), transparent 54%) !important;
+  box-shadow: var(--ia-shadow) !important;
+}
+
+.event-workshop-page section.relative.rounded-3xl .text-white,
+.event-workshop-page section.relative.rounded-3xl .text-slate-300,
+.event-workshop-page section.relative.rounded-3xl .text-slate-200,
+.event-workshop-page section.relative.rounded-3xl .text-yellow-400 {
+  color: var(--ia-ink) !important;
+}
+
+.event-workshop-page .bg-brand-600,
+.event-workshop-page .hover\:bg-brand-700:hover {
+  color: #fff !important;
+  background-color: var(--ia-primary-deep) !important;
+}
+
+.event-news-page article.bg-white {
+  padding: clamp(1.4rem, 4vw, 3rem) !important;
+}
+
+.event-news-page .lead {
+  padding: 1rem 1.1rem;
+  border-left: 4px solid var(--ia-primary);
+  border-radius: var(--ia-radius);
+  background: rgba(111, 143, 146, 0.08);
+}
+
+@media (max-width: 768px) {
+  .ia-page {
+    width: min(100% - 1.25rem, 1120px);
+  }
+
+  .ia-page-title {
+    font-size: 2.15rem;
+  }
+
+  .ia-page-subtitle {
+    font-size: 1rem;
+  }
+
+  .home-title {
+    font-size: 2.7rem;
+  }
+
+  .home-subtitle {
+    font-size: 1.02rem;
+  }
+
+  .ia-timeline {
+    padding-left: 1.1rem;
+  }
+
+  .ia-timeline-item::before {
+    left: -1.02rem;
+  }
+
+  .home-contact-links {
+    gap: 0.1rem 0;
+  }
+
+  .home-contact-copy,
+  .home-contact-link {
+    font-size: 0.82rem;
+    padding: 0.38rem 0.5rem;
+  }
+
+  .product-board {
+    grid-template-columns: 1fr;
+  }
+
+  .product-card {
+    min-height: 0;
+  }
+}
+
+@media (max-width: 420px) {
+  .home-title {
+    font-size: 2.18rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+
+  .ia-card:hover,
+  .ia-link-card:hover,
+  .ia-timeline-card:hover,
+  .ia-btn:hover {
+    transform: none;
+  }
+}
+
+/* ── Members: borderless chip layout ── */
+
+.members-group {
+  margin-bottom: 3.5rem;
+}
+
+.members-group-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+  color: var(--ia-ink);
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.members-group-title::before {
+  width: 3px;
+  height: 1.4rem;
+  content: "";
+  background: linear-gradient(180deg, var(--ia-primary), var(--ia-accent));
+  border-radius: 999px;
+}
+
+.members-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem 1rem;
+}
+
+.member-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.55rem 0.85rem;
+  color: var(--ia-ink);
+  font-size: 1.02rem;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
+}
+
+.member-chip.has-link {
+  cursor: pointer;
+  color: var(--ia-primary-deep);
+}
+
+.member-chip.has-link:hover {
+  color: var(--ia-ink);
+  background: rgba(111, 143, 146, 0.1);
+  transform: translateY(-1px);
+}
+
+.member-chip.has-link:hover .member-arrow {
+  opacity: 1;
+  transform: translateX(2px);
+}
+
+.member-name {
+  position: relative;
+}
+
+.member-chip.has-link .member-name::after {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  left: 0;
+  height: 1px;
+  content: "";
+  background: linear-gradient(90deg, var(--ia-primary), var(--ia-accent));
+  opacity: 0;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: opacity 200ms ease, transform 300ms ease;
+}
+
+.member-chip.has-link:hover .member-name::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.member-arrow {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  opacity: 0.45;
+  transition: opacity 200ms ease, transform 200ms ease;
 }
\ No newline at end of file
diff --git a/assets/images/project/zeta/githave-icon.png b/assets/images/project/zeta/githave-icon.png
new file mode 100644
index 0000000..3c35236
Binary files /dev/null and b/assets/images/project/zeta/githave-icon.png differ
diff --git a/assets/images/project/zeta/githave.png b/assets/images/project/zeta/githave.png
new file mode 100644
index 0000000..b9dbaea
Binary files /dev/null and b/assets/images/project/zeta/githave.png differ
diff --git a/assets/images/project/zeta/zetahub.png b/assets/images/project/zeta/zetahub.png
new file mode 100644
index 0000000..8349f08
Binary files /dev/null and b/assets/images/project/zeta/zetahub.png differ
diff --git a/assets/js/breathing-background.js b/assets/js/breathing-background.js
new file mode 100644
index 0000000..9d4b7c3
--- /dev/null
+++ b/assets/js/breathing-background.js
@@ -0,0 +1,88 @@
+(function () {
+  const container = document.getElementById("breathing-bg");
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  if (!container || typeof window.p5 === "undefined") {
+    if (container) container.classList.add("is-static");
+    return;
+  }
+
+  new window.p5((p) => {
+    let resizeObserver;
+
+    function size() {
+      const rect = container.getBoundingClientRect();
+      return {
+        width: Math.max(320, Math.floor(rect.width || window.innerWidth)),
+        height: Math.max(420, Math.floor(rect.height || window.innerHeight)),
+      };
+    }
+
+    function drawPattern(time) {
+      const mobile = p.width < 720;
+      const numLines = mobile ? 40 : 72;
+      const numPoints = mobile ? 112 : 180;
+      const verticalSpan = p.height / (mobile ? 2.15 : 2.35);
+
+      p.clear();
+      p.translate(p.width / 2, p.height / 2);
+      p.noFill();
+
+      for (let i = 0; i < numLines; i += 1) {
+        const linePhase = (i / numLines) * p.TWO_PI;
+        const primaryAlpha = mobile ? 60 : 55;
+        const accentAlpha = mobile ? 40 : 35;
+        p.stroke(i % 5 === 0 ? p.color(184, 167, 131, accentAlpha) : p.color(77, 111, 115, primaryAlpha));
+        p.strokeWeight(i % 7 === 0 ? 1.8 : 1.1);
+
+        [-1, 1].forEach((side) => {
+          p.beginShape();
+          for (let j = 0; j <= numPoints; j += 1) {
+            const pointPhase = j / numPoints;
+            const y = p.map(pointPhase, 0, 1, -verticalSpan, verticalSpan);
+            const envelope = p.sin(pointPhase * p.PI);
+            const wave1 = p.sin(time + linePhase) * (mobile ? 42 : 68);
+            const wave2 = p.sin(pointPhase * 8 + time * 2) * (mobile ? 30 : 48);
+            const centerComplexity = p.pow(p.cos(pointPhase * p.PI - p.HALF_PI), 2) * (mobile ? 64 : 110);
+            const wave3 = p.cos(linePhase * 4 - time) * centerComplexity;
+            const x = envelope * (wave1 + wave2 + wave3 + (mobile ? 46 : 70));
+            p.vertex(side * x, y);
+          }
+          p.endShape();
+        });
+      }
+    }
+
+    p.setup = () => {
+      const nextSize = size();
+      p.pixelDensity(Math.min(window.devicePixelRatio || 1, 1.5));
+      p.createCanvas(nextSize.width, nextSize.height);
+
+      if (reduceMotion) {
+        drawPattern(1.4);
+        p.noLoop();
+        return;
+      }
+
+      resizeObserver = new ResizeObserver(() => {
+        const updated = size();
+        p.resizeCanvas(updated.width, updated.height);
+      });
+      resizeObserver.observe(container);
+    };
+
+    p.draw = () => {
+      drawPattern(p.frameCount * 0.008);
+    };
+
+    p.windowResized = () => {
+      const updated = size();
+      p.resizeCanvas(updated.width, updated.height);
+      if (reduceMotion) drawPattern(1.4);
+    };
+
+    window.addEventListener("beforeunload", () => {
+      if (resizeObserver) resizeObserver.disconnect();
+    });
+  }, container);
+})();
diff --git a/assets/js/data.js b/assets/js/data.js
index e69de29..3e744c8 100644
--- a/assets/js/data.js
+++ b/assets/js/data.js
@@ -0,0 +1,250 @@
+window.IA_DATA = {
+  activities: [
+    {
+      date: "2026.04.23",
+      title: "导师看了不皱眉的科研绘图教程（第二期）",
+      type: "科研绘图",
+      status: "Past",
+      description: "以顶会录用案例，拆解落地实操细节，帮你做出严谨、精准、高质量科研绘图",
+      links: [
+        {
+          label: "观看视频",
+          url: "https://www.bilibili.com/video/BV1bNoYB7Ehv/?share_source=copy_web",
+          external: true,
+        },
+      ],
+    },
+    {
+      date: "2026.04.09",
+      title: "导师看了不皱眉的科研绘图教程（第一期）",
+      type: "科研绘图",
+      status: "Past",
+      description: "以顶会录用案例，拆解科研绘图的底层逻辑、格式规范、细节设计和质感提升技巧",
+      links: [
+        {
+          label: "观看视频",
+          url: "https://www.bilibili.com/video/BV16ZDWBbExg/?share_source=copy_web",
+          external: true,
+        },
+      ],
+    },
+    {
+      date: "2025.12.17",
+      title: "基础与前沿研究院2026年“大学生创新创业训练计划”项目",
+      type: "项目分享",
+      status: "Past",
+      description: "欢迎大二、大三的同学查看项目详情，了解选题情况。如有感兴趣的项目及时与老师联系。",
+      links: [
+        {
+          label: "项目详情",
+          url: "https://docs.qq.com/sheet/DYUlXVGZvUllmTnd5?tab=10g383",
+          external: true,
+        },
+      ],
+    },
+    {
+      date: "2025.12.14",
+      title: "【IA x 深势科技】Uni-Lab线下WorkShop（宜宾场）",
+      type: "技术工坊",
+      status: "Past",
+      description: "本期 WorkShop 聚焦实验室表征设备智能化改造，邀你亲手解锁自动化实验新技能",
+      links: [
+        {
+          label: "查看原文",
+          url: "https://mp.weixin.qq.com/s/VFUJ2crP0j9vVowiBJBWTQ",
+          external: true,
+        },
+      ],
+    },
+    {
+      date: "2025.11",
+      title: "【竞赛全攻略】对话四位国赛得主：大学竞赛避坑指南",
+      type: "竞赛分享",
+      status: "Past",
+      description: "大学竞赛避坑指南：从选择到夺奖，一次讲透",
+      links: [
+        {
+          label: "观看视频",
+          url: "https://www.bilibili.com/video/BV1cFzpBFEJn/?share_source=copy_web",
+          external: true,
+        },
+      ],
+    },
+    {
+      date: "2025.11.14",
+      title: "成电青年说·成电首档大型青年互动演说分享节目",
+      type: "青年分享",
+      status: "Past",
+      description: "成电学子的成长故事，主讲人：张晰元、黄璇（协会骨干）",
+      links: [
+        {
+          label: "查看推文",
+          url: "https://mp.weixin.qq.com/s/5gfmuq_ne5AENQWdhK1bTQ",
+          external: true,
+        },
+      ],
+    },
+    {
+      date: "2025.10",
+      title: "神经科学社更名为交叉学科协会",
+      type: "协会动态",
+      status: "Past",
+      description: "协会面向 AI Methods、Science、Health、Engineering、Finance 等方向展开跨学科协作。",
+      links: [],
+    },
+    {
+      date: "2025.02",
+      title: "电子科技大学神经科学社成立",
+      type: "协会动态",
+      status: "Past",
+      description: "社团成立，开始搭建跨学科交流与实践社区。",
+      links: [],
+    },
+  ],
+
+  products: [
+    {
+      name: "十万个为什么 skills",
+      stage: "Agent Skill",
+      intro: "面向 Claude Code、Codex 等 Agent 的追问式思考技能，帮助用户把问题拆清楚。",
+      tags: ["Claude Code", "Codex", "Agent Skill"],
+      links: [
+        { label: "GitHub", url: "https://github.com/maxkura/Ask_Why", external: true, primary: true },
+        { label: "介绍视频", url: "https://www.bilibili.com/video/BV1QdorBLESn/?share_source=copy_web", external: true },
+      ],
+    },
+    {
+      name: "GitHave & FlashMemory",
+      stage: "Knowledge Tools",
+      intro: "围绕代码项目与知识卡片的轻量工具组合，用于沉淀仓库线索、学习记录和高频复盘内容。",
+      tags: ["GitHub", "Knowledge Base", "Memory"],
+      links: [
+        { label: "立即体验", url: "https://githave.com/home", external: true, primary: true },
+        { label: "开源社区", url: "https://zzh.app", external: true },
+      ],
+    },
+    {
+      name: "研途信使",
+      stage: "Research Journey",
+      intro: "面向升学、科研训练与竞赛信息的整理入口，帮助成员集中追踪关键节点和资源线索。",
+      tags: ["Research", "Planning", "Information"],
+      links: [
+        { label: "了解详情", url: "https://mp.weixin.qq.com/s/wvYkFtUadSR2yQqbWdywgQ", external: true, primary: true },
+      ],
+    },
+  ],
+
+  advisors: [
+    {
+      name: "尧德中 教授",
+      title: "杰出科学家",
+      description: "电子科技大学生命科学与技术学院创院院长",
+      image: "assets/images/partners/members/DezhongYao.png",
+      url: "http://faculty.uestc.edu.cn/yaodezhong/zh_CN/index.htm",
+    },
+    {
+      name: "裴德乐 教授",
+      title: "古巴科学院院士",
+      description: "神经信息学权威专家",
+      image: "assets/images/partners/members/pedro.png",
+      url: "https://www.life.uestc.edu.cn/sznr2.jsp?urltype=news.NewsContentUrl&wbtreeid=1219&wbnewsid=3398",
+    },
+    {
+      name: "张帆 教授",
+      title: "国家青年人才",
+      description: "脑神经影像计算，弥散磁共振，医学图像分析",
+      image: "assets/images/partners/members/fanzhang.png",
+      url: "https://faculty.uestc.edu.cn/fanzhang/zh_CN/index/479541/list/index.htm",
+    },
+    {
+      name: "郑丁 教授",
+      title: "海外优青",
+      description: "半导体器件的人机交互柔性可穿戴技术",
+      image: "assets/images/partners/members/dingzheng.png",
+      url: "https://sose.uestc.edu.cn/info/1184/7923.htm",
+    },
+    {
+      name: "文明健 教授",
+      title: "NSF 项目主持人",
+      description: "数据驱动建模，不确定性量化，能源材料与器件",
+      image: "assets/images/partners/members/mingwenjian.png",
+      url: "https://www.iffs.uestc.edu.cn/info/1116/5944.htm",
+    },
+  ],
+
+  organizations: [
+    {
+      name: "生命科学与技术学院",
+      image: "assets/images/partners/orgs/uestc-life.png",
+      url: "https://www.life.uestc.edu.cn/",
+      type: "战略支撑单位",
+    },
+    {
+      name: "深势科技 DP Technology",
+      image: "assets/images/partners/orgs/DPTech.png",
+      url: "https://www.dp.tech",
+      type: "战略支撑单位",
+    },
+    {
+      name: "蓝耘科技 LANYUN",
+      image: "assets/images/partners/orgs/lanyun.png",
+      url: "https://www.lanyun.net/",
+      type: "战略支撑单位",
+    },
+    {
+      name: "亚信科技",
+      image: "assets/images/partners/orgs/Asiainfo.jpg",
+      url: "",
+      type: "战略支撑单位",
+    },
+    {
+      name: "中国移动咪咕",
+      image: "assets/images/partners/orgs/migu.png",
+      url: "",
+      type: "战略支撑单位",
+    },
+  ],
+
+  partners: [
+    {
+      name: "辰境绘卷",
+      image: "assets/images/partners/orgs/changing-view.png",
+      url: "partners/changing-view.html",
+      type: "视觉制作 / AIGC",
+    },
+    {
+      name: "未央支教队",
+      image: "assets/images/partners/orgs/weiyang.png",
+      url: "",
+      type: "公益实践",
+    },
+    {
+      name: "尘摄影工作室",
+      image: "assets/images/partners/orgs/Asher.jpg",
+      url: "https://mp.weixin.qq.com/s/oeJ3EkE4_VP3RJDYAC3HYA",
+      type: "影像合作",
+    },
+  ],
+
+  memberGroups: [
+    {
+      name: "主席团",
+      members: [
+        { name: "郭凯文" },
+        { name: "张晰元", url: "https://zhangxiyuan2004.github.io" },
+        { name: "罗悦嘉" },
+      ],
+    },
+    {
+      name: "副会长",
+      members: [
+        { name: "段之续", url: "https://zxuuuustupid.github.io" },
+        { name: "刘锐洁" },
+        { name: "张耀" },
+        { name: "张煦", url: "https://xuzhang-x-z.github.io" },
+        { name: "郭博成" },
+        { name: "张博涵" },
+      ],
+    },
+  ],
+};
diff --git a/assets/js/main.js b/assets/js/main.js
index 3e1a6d2..682af34 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,93 +1,182 @@
-document.addEventListener("DOMContentLoaded", function () {
-  console.log("Main.js loaded: Initializing Navbar...");
-
-  // 1. 注入导航栏 (Navbar)
-  // 注意：移动端按钮现在使用 SVG，不再依赖 FontAwesome
-  const navbarHTML = `
-    <nav class="fixed w-full z-50 top-0 transition-all duration-300 glass-effect border-b border-slate-200/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16 items-center">
-                <a href="index.html" class="flex-shrink-0 flex items-center gap-3 group">
-                    <img src="assets/images/logo.png" class="w-8 h-8 rounded-full object-cover shadow-lg shadow-cyan-600/20 group-hover:scale-110 transition-transform" alt="UESTC IA Logo" onerror="this.style.display='none'">
-                    <span class="font-bold text-lg tracking-tight text-slate-800">UESTC <span class="text-cyan-600">IA</span></span>
-                </a>
-
-                <div class="hidden md:flex space-x-8 items-center">
-                    <a href="index.html" class="text-sm font-medium text-slate-600 hover:text-cyan-600 transition nav-link">首页</a>
-                    <a href="partners.html" class="text-sm font-medium text-slate-600 hover:text-cyan-600 transition nav-link">团队与合作</a>
-                    <a href="research.html" class="text-sm font-medium text-slate-600 hover:text-cyan-600 transition nav-link">核心方向</a>
-                    <a href="events.html" class="text-sm font-medium text-slate-600 hover:text-cyan-600 transition nav-link">活动</a>
-                    <a href="projects.html" class="text-sm font-medium text-slate-600 hover:text-cyan-600 transition nav-link">成果</a>
-                    <a href="join.html" class="bg-slate-800 text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-cyan-600 transition shadow-md hover:shadow-lg transform hover:-translate-y-0.5">加入我们</a>
-                </div>
-
-                <div class="md:hidden flex items-center">
-                    <button id="mobile-menu-btn" class="text-slate-600 hover:text-cyan-600 focus:outline-none p-2 rounded-md hover:bg-slate-100 transition">
-                        <svg id="icon-menu" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                        <svg id="icon-close" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
+(function () {
+  const scriptEl = document.currentScript;
+  const src = scriptEl ? scriptEl.getAttribute("src") || "" : "";
+  const marker = "assets/js/main.js";
+  const basePath = document.body?.dataset.basePath || (src.includes(marker) ? src.slice(0, src.indexOf(marker)) : "");
+
+  const navItems = [
+    { label: "首页", href: "index.html" },
+    { label: "社团活动", href: "events.html" },
+    { label: "产品宣传", href: "projects.html" },
+    { label: "合作与导师", href: "partners.html" },
+    { label: "核心成员", href: "members.html" },
+  ];
+
+  function href(path) {
+    return `${basePath}${path}`;
+  }
+
+  function currentFile() {
+    const path = window.location.pathname;
+    const file = path.endsWith("/") ? "index.html" : path.split("/").pop();
+    return file || "index.html";
+  }
+
+  function isActive(item) {
+    const path = window.location.pathname;
+    if (item.href === "events.html" && path.includes("/events/")) return true;
+    if (item.href === "partners.html" && path.includes("/partners/")) return true;
+    return currentFile() === item.href;
+  }
+
+  function renderNavLinks(kind) {
+    return navItems
+      .map((item) => {
+        const activeClass = isActive(item) ? " is-active" : "";
+        const aria = isActive(item) ? ' aria-current="page"' : "";
+        if (kind === "mobile") {
+          return `<a href="${href(item.href)}" class="ia-mobile-link${activeClass}"${aria}>${item.label}</a>`;
+        }
+        return `<a href="${href(item.href)}" class="nav-link text-sm font-semibold${activeClass}"${aria}>${item.label}</a>`;
+      })
+      .join("");
+  }
+
+  function insertNavbar() {
+    const navbarHTML = `
+      <nav class="ia-navbar fixed top-0 z-50 w-full">
+        <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+          <a href="${href("index.html")}" class="flex items-center gap-3" aria-label="UESTC IA 首页">
+            <img src="${href("assets/images/logo.png")}" class="ia-brand-mark" alt="UESTC IA Logo" onerror="this.style.display='none'">
+            <span class="ia-text-ink text-lg font-bold">UESTC IA</span>
+          </a>
+
+          <div class="hidden items-center gap-7 md:flex">
+            ${renderNavLinks("desktop")}
+          </div>
+
+          <button id="mobile-menu-btn" class="ia-btn ia-btn-ghost h-10 w-10 p-0 md:hidden" type="button" aria-label="打开导航菜单" aria-controls="mobile-menu" aria-expanded="false">
+            <svg id="icon-menu" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16" />
+            </svg>
+            <svg id="icon-close" xmlns="http://www.w3.org/2000/svg" class="hidden h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
         </div>
 
-        <div id="mobile-menu" class="hidden md:hidden bg-white/95 backdrop-blur-md border-t border-slate-100 shadow-xl absolute w-full left-0 top-16 z-40">
-            <div class="px-4 pt-4 pb-6 space-y-2 flex flex-col">
-                <a href="index.html" class="block px-4 py-3 rounded-lg text-base font-medium text-slate-700 hover:text-cyan-600 hover:bg-cyan-50 transition">首页</a>
-                <a href="partners.html" class="block px-4 py-3 rounded-lg text-base font-medium text-slate-700 hover:text-cyan-600 hover:bg-cyan-50 transition">团队与合作</a>
-                <a href="research.html" class="block px-4 py-3 rounded-lg text-base font-medium text-slate-700 hover:text-cyan-600 hover:bg-cyan-50 transition">核心方向</a>
-                <a href="events.html" class="block px-4 py-3 rounded-lg text-base font-medium text-slate-700 hover:text-cyan-600 hover:bg-cyan-50 transition">活动</a>
-                <a href="projects.html" class="block px-4 py-3 rounded-lg text-base font-medium text-slate-700 hover:text-cyan-600 hover:bg-cyan-50 transition">成果</a>
-                <a href="join.html" class="block px-4 py-3 mt-4 text-center rounded-lg text-base font-medium bg-slate-800 text-white hover:bg-cyan-600 shadow-md transition">加入我们</a>
-            </div>
+        <div id="mobile-menu" class="ia-navbar hidden border-t md:hidden">
+          <div class="flex flex-col gap-1 px-4 py-4">
+            ${renderNavLinks("mobile")}
+          </div>
         </div>
-    </nav>
+      </nav>
     `;
-  document.body.insertAdjacentHTML("afterbegin", navbarHTML);
 
-  // 2. 绑定交互事件
-  const btn = document.getElementById("mobile-menu-btn");
-  const menu = document.getElementById("mobile-menu");
-  const iconMenu = document.getElementById("icon-menu");
-  const iconClose = document.getElementById("icon-close");
+    document.body.insertAdjacentHTML("afterbegin", navbarHTML);
+  }
+
+  function bindNavbar() {
+    const btn = document.getElementById("mobile-menu-btn");
+    const menu = document.getElementById("mobile-menu");
+    const iconMenu = document.getElementById("icon-menu");
+    const iconClose = document.getElementById("icon-close");
+
+    if (!btn || !menu || !iconMenu || !iconClose) return;
+
+    const setOpen = (open) => {
+      menu.classList.toggle("hidden", !open);
+      iconMenu.classList.toggle("hidden", open);
+      iconClose.classList.toggle("hidden", !open);
+      btn.setAttribute("aria-expanded", String(open));
+      btn.setAttribute("aria-label", open ? "关闭导航菜单" : "打开导航菜单");
+    };
 
-  if (btn && menu) {
-    console.log("Mobile menu elements found, attaching listener.");
     btn.addEventListener("click", () => {
-      // 切换菜单显示
-      menu.classList.toggle("hidden");
+      setOpen(menu.classList.contains("hidden"));
+    });
 
-      // 切换图标显示
-      if (menu.classList.contains("hidden")) {
-        iconMenu.classList.remove("hidden");
-        iconClose.classList.add("hidden");
-      } else {
-        iconMenu.classList.add("hidden");
-        iconClose.classList.remove("hidden");
-      }
+    menu.addEventListener("click", (event) => {
+      if (event.target.closest("a")) setOpen(false);
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") setOpen(false);
     });
-  } else {
-    console.error("Error: Mobile menu button not found via JS.");
   }
 
-  // 3. 注入页脚 (Footer) - 保持不变
-  const footerHTML = `
-    <footer class="bg-slate-900 text-slate-500 py-12 mt-20 border-t border-slate-800">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
-            <div class="mb-4 md:mb-0">
-                <span class="text-slate-300 font-bold tracking-wider">UESTC IA</span>
-                <span class="mx-2 text-slate-700">|</span>
-                <span class="text-xs">电子科技大学交叉学科协会 © 2025 Website Built by Zhixu</span>
-            </div>
-            <div class="flex space-x-6 text-sm">
-                <a href="#" class="hover:text-cyan-400 transition">关于我们</a>
-                <a href="#" class="hover:text-cyan-400 transition">联系方式</a>
-            </div>
+  function bindRipple() {
+    document.addEventListener("click", (event) => {
+      const button = event.target.closest(".ia-btn");
+      if (!button) return;
+
+      const rect = button.getBoundingClientRect();
+      const ripple = document.createElement("span");
+      ripple.className = "ia-ripple";
+      ripple.style.left = `${event.clientX - rect.left}px`;
+      ripple.style.top = `${event.clientY - rect.top}px`;
+      button.appendChild(ripple);
+      ripple.addEventListener("animationend", () => ripple.remove(), { once: true });
+    });
+  }
+
+  function insertFooter() {
+    if (document.body.dataset.noFooter === "true") return;
+
+    const footerHTML = `
+      <footer class="ia-footer">
+        <div class="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-10 sm:px-6 lg:px-8">
+          <div>
+            <div class="ia-text-ink font-bold">UESTC Interdisciplinary Association</div>
+            <div class="mt-1 text-xs">电子科技大学交叉学科协会 © 2026</div>
+          </div>
         </div>
-    </footer>
+      </footer>
     `;
-  document.body.insertAdjacentHTML("beforeend", footerHTML);
-});
+    document.body.insertAdjacentHTML("beforeend", footerHTML);
+  }
+
+  function bindCopyButtons() {
+    document.addEventListener("click", (event) => {
+      const btn = event.target.closest("[data-copy]");
+      if (!btn) return;
+
+      const text = btn.dataset.copy;
+      const toast = btn.querySelector(".home-contact-copy-toast");
+
+      // Copy to clipboard
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text);
+      } else {
+        // Fallback for older browsers
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        ta.remove();
+      }
+
+      // Show toast animation
+      if (toast) {
+        toast.classList.remove("is-visible");
+        // Force reflow to restart animation
+        void toast.offsetWidth;
+        toast.classList.add("is-visible");
+        toast.addEventListener("animationend", () => {
+          toast.classList.remove("is-visible");
+        }, { once: true });
+      }
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    insertNavbar();
+    bindNavbar();
+    bindRipple();
+    bindCopyButtons();
+    insertFooter();
+  });
+})();
diff --git a/assets/js/render-events.js b/assets/js/render-events.js
new file mode 100644
index 0000000..6a34f3b
--- /dev/null
+++ b/assets/js/render-events.js
@@ -0,0 +1,56 @@
+(function () {
+  const root = document.getElementById("eventsTimeline");
+  if (!root || !window.IA_DATA) return;
+
+  const escapeHTML = (value) =>
+    String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+
+  const isExternal = (url) => /^https?:\/\//i.test(url);
+  let currentYear = "";
+
+  function linkHTML(link) {
+    const external = link.external || isExternal(link.url);
+    const attrs = external ? ' target="_blank" rel="noopener noreferrer"' : "";
+    return `<a class="ia-btn ia-btn-ghost" href="${escapeHTML(link.url)}"${attrs}>${escapeHTML(link.label)}</a>`;
+  }
+
+  root.innerHTML = window.IA_DATA.activities
+    .map((activity) => {
+      const year = activity.date.slice(0, 4);
+      const yearLabel =
+        year !== currentYear
+          ? `<div class="ia-text-primary mb-2 mt-2 text-sm font-bold">${escapeHTML(year)}</div>`
+          : "";
+      currentYear = year;
+
+      const links = activity.links.length
+        ? `<div class="mt-5 flex flex-wrap gap-3">${activity.links.map(linkHTML).join("")}</div>`
+        : "";
+
+      return `
+        ${yearLabel}
+        <article class="ia-timeline-item">
+          <div class="ia-timeline-card">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div>
+                <div class="ia-date">${escapeHTML(activity.date)}</div>
+                <h2 class="ia-text-ink mt-2 text-xl font-bold leading-snug">${escapeHTML(activity.title)}</h2>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <span class="ia-tag">${escapeHTML(activity.type)}</span>
+                <span class="ia-tag ia-tag-warm">${escapeHTML(activity.status)}</span>
+              </div>
+            </div>
+            <p class="ia-text-muted mt-4 text-sm leading-7">${escapeHTML(activity.description)}</p>
+            ${links}
+          </div>
+        </article>
+      `;
+    })
+    .join("");
+})();
diff --git a/assets/js/render-members.js b/assets/js/render-members.js
new file mode 100644
index 0000000..ae1387f
--- /dev/null
+++ b/assets/js/render-members.js
@@ -0,0 +1,36 @@
+(function () {
+  const root = document.getElementById("membersRoot");
+  if (!root || !window.IA_DATA) return;
+
+  const escapeHTML = (value) =>
+    String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+
+  function memberChip(member) {
+    const name = escapeHTML(member.name);
+    if (member.url) {
+      return `<a class="member-chip has-link" href="${escapeHTML(member.url)}" target="_blank" rel="noopener noreferrer">
+        <span class="member-name">${name}</span>
+        <svg class="member-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l5 5-5 5"/></svg>
+      </a>`;
+    }
+    return `<span class="member-chip"><span class="member-name">${name}</span></span>`;
+  }
+
+  root.innerHTML = window.IA_DATA.memberGroups
+    .map(
+      (group) => `
+        <section class="ia-section">
+          <h2 class="ia-section-title">${escapeHTML(group.name)}</h2>
+          <div class="members-row">
+            ${group.members.map(memberChip).join("")}
+          </div>
+        </section>
+      `,
+    )
+    .join("");
+})();
diff --git a/assets/js/render-partners.js b/assets/js/render-partners.js
new file mode 100644
index 0000000..dcb1244
--- /dev/null
+++ b/assets/js/render-partners.js
@@ -0,0 +1,76 @@
+(function () {
+  const advisorsRoot = document.getElementById("advisorsGrid");
+  const orgsRoot = document.getElementById("organizationsGrid");
+  const partnersRoot = document.getElementById("partnersGrid");
+  if (!window.IA_DATA) return;
+
+  const escapeHTML = (value) =>
+    String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+
+  const isExternal = (url) => /^https?:\/\//i.test(url);
+  const linkAttrs = (url) => (isExternal(url) ? ' target="_blank" rel="noopener noreferrer"' : "");
+
+  if (advisorsRoot) {
+    advisorsRoot.innerHTML = window.IA_DATA.advisors
+      .map(
+        (advisor) => `
+          <article class="ia-card p-5">
+            <div class="flex gap-4">
+              <div class="ia-avatar ia-avatar-round">
+                <img src="${escapeHTML(advisor.image)}" alt="${escapeHTML(advisor.name)}" onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden')">
+                <span class="ia-text-primary hidden flex h-full w-full items-center justify-center text-xs font-bold">${escapeHTML(advisor.name.slice(0, 2))}</span>
+              </div>
+              <div class="min-w-0">
+                <a class="ia-text-ink text-lg font-bold transition hover:opacity-80" href="${escapeHTML(advisor.url)}" target="_blank" rel="noopener noreferrer">${escapeHTML(advisor.name)}</a>
+                <div class="ia-text-accent mt-1 text-xs font-bold uppercase">${escapeHTML(advisor.title)}</div>
+              </div>
+            </div>
+            <p class="ia-text-muted mt-4 text-sm leading-7">${escapeHTML(advisor.description)}</p>
+          </article>
+        `,
+      )
+      .join("");
+  }
+
+  function logoTile(item) {
+    const content = item.image
+      ? `
+        <img src="${escapeHTML(item.image)}" alt="${escapeHTML(item.name)}" onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden')">
+        <span class="ia-text-primary hidden text-center text-sm font-bold">${escapeHTML(item.name)}</span>
+      `
+      : `<span class="ia-text-primary text-center text-sm font-bold">${escapeHTML(item.name)}</span>`;
+
+    if (!item.url) {
+      return `
+        <div class="ia-link-card ia-logo-tile">
+          <div class="w-full">
+            <div class="flex min-h-[68px] items-center justify-center">${content}</div>
+            <div class="ia-text-muted mt-3 text-center text-xs font-semibold">${escapeHTML(item.type)}</div>
+          </div>
+        </div>
+      `;
+    }
+
+    return `
+      <a class="ia-link-card ia-logo-tile" href="${escapeHTML(item.url)}"${linkAttrs(item.url)} aria-label="${escapeHTML(item.name)}">
+        <div class="w-full">
+          <div class="flex min-h-[68px] items-center justify-center">${content}</div>
+          <div class="ia-text-muted mt-3 text-center text-xs font-semibold">${escapeHTML(item.type)}</div>
+        </div>
+      </a>
+    `;
+  }
+
+  if (orgsRoot) {
+    orgsRoot.innerHTML = window.IA_DATA.organizations.map(logoTile).join("");
+  }
+
+  if (partnersRoot) {
+    partnersRoot.innerHTML = window.IA_DATA.partners.map(logoTile).join("");
+  }
+})();
diff --git a/assets/js/render-products.js b/assets/js/render-products.js
new file mode 100644
index 0000000..d80f088
--- /dev/null
+++ b/assets/js/render-products.js
@@ -0,0 +1,48 @@
+(function () {
+  const root = document.getElementById("productsRoot");
+  if (!root || !window.IA_DATA) return;
+
+  const escapeHTML = (value) =>
+    String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+
+  const isExternal = (url) => /^https?:\/\//i.test(url);
+
+  function linkHTML(link) {
+    const attrs = link.external || isExternal(link.url) ? ' target="_blank" rel="noopener noreferrer"' : "";
+    const variant = link.primary ? "ia-btn ia-btn-primary" : "ia-btn ia-btn-ghost";
+    return `<a class="${variant}" href="${escapeHTML(link.url)}"${attrs}>${escapeHTML(link.label)}</a>`;
+  }
+
+  function productCard(product, index) {
+    const links = product.links?.length
+      ? `<div class="product-actions">${product.links.map(linkHTML).join("")}</div>`
+      : "";
+    const tags = product.tags?.length
+      ? `<div class="product-tags">${product.tags.map((tag) => `<span class="ia-tag">${escapeHTML(tag)}</span>`).join("")}</div>`
+      : "";
+
+    return `
+      <article class="product-card ${index === 0 ? "product-card-featured" : ""}">
+        <div class="product-card-topline">
+          <span>${escapeHTML(product.stage)}</span>
+          <span>${String(index + 1).padStart(2, "0")}</span>
+        </div>
+        <h2>${escapeHTML(product.name)}</h2>
+        <p>${escapeHTML(product.intro)}</p>
+        ${tags}
+        ${links}
+      </article>
+    `;
+  }
+
+  root.innerHTML = `
+    <section class="product-board" aria-label="产品宣传列表">
+      ${window.IA_DATA.products.map(productCard).join("")}
+    </section>
+  `;
+})();
diff --git a/events.html b/events.html
index 18d2643..dc8eb82 100644
--- a/events.html
+++ b/events.html
@@ -1,180 +1,27 @@
 <!DOCTYPE html>
 <html lang="zh-CN" class="scroll-smooth">
 <head>
-    
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="assets/images/logo.ico">
-    <title>活动日历 | UESTC IA</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="assets/css/style.css">
-    <script src="assets/js/main.js" defer></script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>社团活动 | UESTC IA</title>
+  <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="apple-touch-icon" href="assets/images/logo.ico" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="assets/css/style.css" />
+  <script src="assets/js/main.js" defer></script>
+  <script src="assets/js/data.js" defer></script>
+  <script src="assets/js/render-events.js" defer></script>
 </head>
-
-<body class="pt-24 bg-slate-50">
-
-    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-20">
-        
-        <div class="text-center mb-12">
-            <h1 class="text-3xl font-bold text-slate-800 mb-2">Events Calendar</h1>
-            <p class="text-slate-500">从前沿讲座到实战工坊，连接学术与产业的脉搏。</p>
-        </div>
-
-        <!-- 1. 旗舰赛事聚焦 (Spotlight) -->
-        <!-- <div class="relative w-full bg-slate-800 rounded-2xl overflow-hidden shadow-xl mb-16 group">
-            <div class="absolute top-0 right-0 w-64 h-64 bg-cyan-600 opacity-20 rounded-full blur-3xl group-hover:opacity-30 transition duration-500"></div>
-            
-            <div class="relative z-10 p-8 md:p-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
-                <div>
-                    <div class="inline-block px-3 py-1 rounded bg-cyan-600/20 text-cyan-400 text-xs font-bold uppercase tracking-wider mb-3">Flagship Event</div>
-                    <h2 class="text-2xl md:text-3xl font-bold text-white mb-2">【IA x 深势科技】Uni-Lab线下WorkShop（宜宾场）报名开启</h2>
-                    <p class="text-slate-300 text-sm md:text-base max-w-xl">
-                        让实验更智能，让科研更高效。 本期 WorkShop 聚焦实验室表征设备智能化改造，邀你亲手解锁自动化实验新技能，共赴一场用技术赋能科研的进阶之旅！
-                    </p>
-                </div>
-                <a href="events/uni-lab.html" class="flex-shrink-0 bg-cyan-600 hover:bg-cyan-500 text-white px-6 py-3 rounded-lg font-semibold transition shadow-lg shadow-cyan-600/30">
-                    立即报名 <i class="fas fa-arrow-right ml-2"></i>
-                </a>
-            </div>
-        </div> -->
-
-        <!-- 2. 交互式时间轴 (Timeline) -->
-        
-        
-        
-        <div class="relative border-l-2 border-slate-200 ml-4 md:ml-6 space-y-12 pb-12">
-            
-                        <div class="relative pl-8 md:pl-12">
-                <!-- 时间节点点缀 -->
-                
-                <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-cyan-600 border-4 border-slate-50"></div>
-                
-                <span class="text-sm font-bold text-cyan-600 block mb-1">2025.01.20（周二）</span>
-                <div class="bg-white p-6 rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-bold px-2 py-1 rounded bg-green-50 text-green-600">经验分享</span>
-                        <span class="text-xs text-slate-400"><i class="far fa-clock mr-1"></i> 1.20</span>
-                    </div>
-                    <h3 class="text-xl font-bold text-slate-800 mb-2">【学科竞赛分享会】对话四位国赛得主：李旭阳 张煦 黄璇 张博涵</h3>
-                    <p class="text-slate-600 text-sm mb-4">大学竞赛避坑指南：从选择到夺奖，一次讲透</p>
-                    
-                    <!-- 修改部分：将 button 改为 a 标签，并添加 href -->
-                    <div class="flex gap-3">
-                        <a href="https://b23.tv/nCrY7ha" target="_blank" class="underline text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                            活动回顾（链接至B站）
-                        </a>
-                        <!-- <a href="events/uni-lab-news.html" target="_blank" class="underline text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                         活动新闻
-                        </a> -->
-                    </div>
-                </div>
-            </div>
-            
-            
-            <div class="relative pl-8 md:pl-12">
-                <!-- 时间节点点缀 -->
-                
-                <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-cyan-600 border-4 border-slate-50"></div>
-                
-                <span class="text-sm font-bold text-cyan-600 block mb-1">2025.12.14（周日）</span>
-                <div class="bg-white p-6 rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-bold px-2 py-1 rounded bg-blue-50 text-blue-600">项目分享</span>
-                        <span class="text-xs text-slate-400"><i class="far fa-clock mr-1"></i> 12.14</span>
-                    </div>
-                    <h3 class="text-xl font-bold text-slate-800 mb-2">【IA x 深势科技】Uni-Lab线下WorkShop（宜宾场）</h3>
-                    <p class="text-slate-600 text-sm mb-4">让实验更智能，让科研更高效。 本期 WorkShop 聚焦实验室表征设备智能化改造，邀你亲手解锁自动化实验新技能，共赴一场用技术赋能科研的进阶之旅！</p>
-                    
-                    <!-- 修改部分：将 button 改为 a 标签，并添加 href -->
-                    <div class="flex gap-3">
-                        <a href="events/uni-lab.html" target="_blank" class="underline text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                            活动详情
-                        </a>
-                        <a href="events/uni-lab-news.html" target="_blank" class="underline text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                         活动新闻
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-
-            <div class="relative pl-8 md:pl-12 pt-8">
-                <span class="absolute -left-[36px] top-10 text-xs font-bold text-slate-300 -rotate-90">PAST</span>
-                <div class="absolute -left-[7px] top-10 w-3 h-3 rounded-full bg-slate-300"></div>
-                
-                <span class="text-sm font-bold text-slate-400 block mb-1">2025.11.14 (周四)</span>
-                <div class="bg-slate-100 p-5 rounded-xl border border-transparent opacity-70 hover:opacity-100 transition">
-                    <h3 class="text-lg font-bold text-slate-600">基础与前沿研究院2026年“大学生创新创业训练计划”项目 </h3>
-                    <h3 class="text-lg font-bold text-slate-600"></h3>欢迎大二、大三的同学查看项目详情，了解选题情况。如有感兴趣的项目及时与老师联系</h3>
-                    <p class="text-slate-500 text-xs mt-1">已结束</p>
-                                    <a href="https://docs.qq.com/sheet/DYUlXVGZvUllmTnd5?tab=10g383" target="_blank" class="underline text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                        查看详情
-                    </a>
-                </div>
-                
-            </div>
-
-
-<!--          Upcoming Event 2
-            <div class="relative pl-8 md:pl-12">
-                <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-cyan-600 border-4 border-slate-50"></div>
-                
-                <span class="text-sm font-bold text-cyan-600 block mb-1">2025.12.05 (周一)</span>
-                <div class="bg-white p-6 rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-bold px-2 py-1 rounded bg-emerald-50 text-emerald-600">技术工坊</span>
-                        <span class="text-xs text-slate-400"><i class="far fa-clock mr-1"></i> 19:00 - 21:00</span>
-                    </div>
-                    <h3 class="text-xl font-bold text-slate-800 mb-2">Hands-on Workshop: LLM 微调实战</h3>
-                    <p class="text-slate-600 text-sm">需自带笔记本电脑。我们将使用 Google Colab 进行 LLaMA 模型的微调演示。</p>
-                </div>
-            </div> -->
-
-            <div class="relative pl-8 md:pl-12 pt-8">
-                <span class="absolute -left-[36px] top-10 text-xs font-bold text-slate-300 -rotate-90">PAST</span>
-                <div class="absolute -left-[7px] top-10 w-3 h-3 rounded-full bg-slate-300"></div>
-                
-                <span class="text-sm font-bold text-slate-400 block mb-1">2025.11.14 (周四)</span>
-                <div class="bg-slate-100 p-5 rounded-xl border border-transparent opacity-70 hover:opacity-100 transition">
-                    <h3 class="text-lg font-bold text-slate-600">成电青年说·成电首档大型青年互动演说分享节目 </h3>
-                    <h3 class="text-lg font-bold text-slate-600"></h3>主讲人：信通学院张晰元、黄璇同学（协会骨干）</h3>
-                    <p class="text-slate-500 text-xs mt-1">已结束</p>
-                                    <a href="https://mp.weixin.qq.com/s/5gfmuq_ne5AENQWdhK1bTQ" target="_blank" class="underline text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                        查看详情/推文链接
-                    </a>
-                </div>
-                
-            </div>
-
-            <div class="relative pl-8 md:pl-12 pt-8">
-                <span class="absolute -left-[36px] top-10 text-xs font-bold text-slate-300 -rotate-90">PAST</span>
-                <div class="absolute -left-[7px] top-10 w-3 h-3 rounded-full bg-slate-300"></div>
-                
-                <span class="text-sm font-bold text-slate-400 block mb-1">2025.10</span>
-                <div class="bg-slate-100 p-5 rounded-xl border border-transparent opacity-70 hover:opacity-100 transition">
-                    <h3 class="text-lg font-bold text-slate-600">神经科学社更名为交叉学科协会</h3>
-                    <p class="text-slate-500 text-xs mt-1">已结束</p>
-                </div>
-            </div>
-
-            <!-- Past Event (Divider) -->
-            <div class="relative pl-8 md:pl-12 pt-8">
-                <span class="absolute -left-[36px] top-10 text-xs font-bold text-slate-300 -rotate-90">PAST</span>
-                <div class="absolute -left-[7px] top-10 w-3 h-3 rounded-full bg-slate-300"></div>
-                
-                <span class="text-sm font-bold text-slate-400 block mb-1">2025.2</span>
-                <div class="bg-slate-100 p-5 rounded-xl border border-transparent opacity-70 hover:opacity-100 transition">
-                    <h3 class="text-lg font-bold text-slate-600">电子科技大学神经科学社成立</h3>
-                    <p class="text-slate-500 text-xs mt-1">已结束</p>
-                </div>
-            </div>
-
-        </div>
-
-    </main>
+<body class="pt-24">
+  <main class="ia-narrow min-h-screen pb-12">
+    <header class="ia-page-header">
+      <div class="ia-kicker">Club Activities</div>
+      <h1 class="ia-page-title">社团活动</h1>
+    </header>
+
+    <section class="ia-timeline" id="eventsTimeline" aria-live="polite"></section>
+  </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 8618ede..25153bf 100644
--- a/index.html
+++ b/index.html
@@ -5,237 +5,52 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>首页 | UESTC Interdisciplinary Association</title>
-
-  <!-- 网站图标 Favicon -->
   <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
   <script src="https://cdn.tailwindcss.com"></script>
   <link
     href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
     rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
   <link rel="stylesheet" href="assets/css/style.css" />
   <script src="assets/js/main.js" defer></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-  <style>
-    /* 
-           修改重点：
-           不再需要 .carousel-container 的固定高度。
-           使用 Grid 布局让图片重叠。
-        */
-    .carousel-stack {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-    }
-
-    .carousel-slide {
-      grid-area: 1 / 1 / 2 / 2;
-      /* 所有图片都在第一行第一列 */
-      width: 100%;
-      height: auto;
-      opacity: 0;
-      transition: opacity 0.7s ease-in-out;
-      z-index: 0;
-    }
-
-    .carousel-slide.active {
-      opacity: 1;
-      z-index: 1;
-    }
-
-    /* 导航按钮样式保持不变 */
-    .carousel-nav-btn {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.85);
-      backdrop-filter: blur(8px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #0f172a;
-      font-size: 1.25rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      z-index: 20;
-      /* 提高层级 */
-      border: 1px solid rgba(255, 255, 255, 0.3);
-    }
-
-    .carousel-nav-btn:hover {
-      background: rgba(255, 255, 255, 0.95);
-      transform: translateY(-50%) scale(1.05);
-    }
-
-    .carousel-nav-btn.left {
-      left: 20px;
-    }
-
-    .carousel-nav-btn.right {
-      right: 20px;
-    }
-
-    @media (max-width: 768px) {
-      .carousel-nav-btn {
-        width: 36px;
-        height: 36px;
-        font-size: 0.9rem;
-      }
-
-      .carousel-nav-btn.left {
-        left: 10px;
-      }
-
-      .carousel-nav-btn.right {
-        right: 10px;
-      }
-    }
-  </style>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" defer></script>
+  <script src="assets/js/breathing-background.js" defer></script>
 </head>
 
-<body class="pt-24">
-  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen">
-    <!-- 1. Hero Carousel (自适应高度版) -->
-    <!-- 移除了 h-700px 和固定高度，改由内部图片撑开 -->
-    <section class="relative w-full rounded-2xl overflow-hidden shadow-inner mb-12" x-data="{
-            activeSlide: 2,
-            totalSlides: 4,
-            autoplayInterval: null,
-            startAutoplay() {
-              this.autoplayInterval = setInterval(() => {
-                this.nextSlide();
-              }, 5000);
-            },
-            stopAutoplay() {
-              if (this.autoplayInterval) {
-                clearInterval(this.autoplayInterval);
-                this.autoplayInterval = null;
-              }
-            },
-            nextSlide() {
-              this.activeSlide = this.activeSlide === this.totalSlides ? 1 : this.activeSlide + 1;
-              this.resetAutoplay();
-            },
-            prevSlide() {
-              this.activeSlide = this.activeSlide === 1 ? this.totalSlides : this.activeSlide - 1;
-              this.resetAutoplay();
-            },
-            resetAutoplay() {
-              this.stopAutoplay();
-              this.startAutoplay();
-            }
-          }" x-init="startAutoplay()" @mouseenter="stopAutoplay()" @mouseleave="startAutoplay()">
-      <!-- 使用 Grid 堆叠图片 -->
-      <div class="carousel-stack w-full">
-        <!-- Slide 1 -->
-        <!-- 注意：这里使用 img 标签而不是 background-image -->
-        <div class="carousel-slide" :class="{ 'active': activeSlide === 1 }">
-          <img src="assets/images/carousel/core_members.jpg" alt="Core Members"
-            class="w-full h-auto block object-contain rounded-2xl" />
-        </div>
-
-        <!-- Slide 2 -->
-        <div class="carousel-slide" :class="{ 'active': activeSlide === 2 }">
-          <img src="assets/images/carousel/research.jpg" alt="Research"
-            class="w-full h-auto block object-contain rounded-2xl" />
-        </div>
-
-        <!-- Slide 3 (新增) -->
-        <div class="carousel-slide" :class="{ 'active': activeSlide === 3 }">
-          <img src="assets/images/carousel/DPTech.jpg" alt="DPTech Journal"
-            class="w-full h-auto block object-contain rounded-2xl" />
-        </div>
-
-        <div class="carousel-slide" :class="{ 'active': activeSlide === 4 }">
-          <img src="assets/images/carousel/chengjie.jpg" alt="New Event"
-            class="w-full h-auto block object-contain rounded-2xl" />
-        </div>
-
-      </div>
-
-      <div class="carousel-stack w-full">
-
-
-        <!-- 左滑按钮 -->
-        <button @click="prevSlide()" class="carousel-nav-btn left">
-          <i class="fas fa-chevron-left"></i>
-        </button>
-
-        <!-- 右滑按钮 -->
-        <button @click="nextSlide()" class="carousel-nav-btn right">
-          <i class="fas fa-chevron-right"></i>
-        </button>
-
-        <!-- 轮播指示器 -->
-        <div class="absolute bottom-6 left-0 right-0 flex justify-center space-x-3 z-20">
-          <button @click="activeSlide = 1; resetAutoplay()"
-            :class="activeSlide === 1 ? 'bg-cyan-600 w-8' : 'bg-slate-300 w-2'"
-            class="h-2 rounded-full transition-all shadow-sm"></button>
-          <button @click="activeSlide = 2; resetAutoplay()"
-            :class="activeSlide === 2 ? 'bg-cyan-600 w-8' : 'bg-slate-300 w-2'"
-            class="h-2 rounded-full transition-all shadow-sm"></button>
-          <!-- 第三个指示器按钮 (新增) -->
-          <button @click="activeSlide = 3; resetAutoplay()"
-            :class="activeSlide === 3 ? 'bg-cyan-600 w-8' : 'bg-slate-300 w-2'"
-            class="h-2 rounded-full transition-all shadow-sm"></button>
-
-          <button @click="activeSlide = 4; resetAutoplay()"
-            :class="activeSlide === 4 ? 'bg-cyan-600 w-8' : 'bg-slate-300 w-2'"
-            class="h-2 rounded-full transition-all shadow-sm"></button>
-
-
-      </div>
-    </section>
-
-    <!-- 2. 数据看板 (保持不变) -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
-      <!-- Data Dashboard -->
-      <div class="lg:col-span-2 bg-white rounded-xl p-8 shadow-sm border border-slate-100">
-        <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-6">
-          Platform Stats
-        </h3>
-        <div class="grid grid-cols-3 gap-4 text-center divide-x divide-slate-100">
-          <div>
-            <div class="text-4xl font-bold text-slate-800 mb-1">5</div>
-            <div class="text-xs text-slate-500">Research Tracks</div>
-          </div>
-          <div>
-            <div class="text-4xl font-bold text-slate-800 mb-1">5</div>
-            <div class="text-xs text-slate-500">Professors</div>
-          </div>
-          <div>
-            <div class="text-4xl font-bold text-slate-800 mb-1">TOP</div>
-            <div class="text-xs text-slate-500">Partners</div>
+<body class="home-immersive" data-no-footer="true">
+  <main>
+    <section class="home-hero" aria-label="UESTC Interdisciplinary Association">
+      <div id="breathing-bg" class="breathing-bg" aria-hidden="true"></div>
+      <div class="home-copy">
+        <h1 class="home-title">UESTC Interdisciplinary Association</h1>
+        <p class="home-subtitle">AI Methods · Science · Health · Engineering · Finance</p>
+        <div class="home-contact-borderless" aria-label="了解我们">
+          <span class="home-contact-label">了解我们</span>
+          <div class="home-contact-links">
+            <button class="home-contact-copy" type="button" data-copy="1033782608" aria-label="复制QQ群号 1033782608">
+              <svg class="home-contact-copy-chat" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
+              <span class="home-contact-copy-label">QQ群：1033782608</span>
+              <svg class="home-contact-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+              <span class="home-contact-copy-toast" aria-live="polite">已复制 ✓</span>
+            </button>
+            <span class="home-contact-dot" aria-hidden="true"></span>
+            <a class="home-contact-link" href="https://space.bilibili.com/627492887" target="_blank" rel="noopener noreferrer">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/></svg>
+              bilibili
+            </a>
+            <span class="home-contact-dot" aria-hidden="true"></span>
+            <a class="home-contact-link" href="https://www.xiaohongshu.com/user/profile/660d61f5000000000600fcdc" target="_blank" rel="noopener noreferrer">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.8 14.4H8.2c-.77 0-1.4-.63-1.4-1.4V9c0-.77.63-1.4 1.4-1.4h7.6c.77 0 1.4.63 1.4 1.4v6c0 .77-.63 1.4-1.4 1.4zm-5.3-7.9v3.1h1.5v-3.1h1.5v3.1H15v-3.1h1v4.6H8V8.5h2.5z"/></svg>
+              小红书
+            </a>
+            <span class="home-contact-dot" aria-hidden="true"></span>
+            <a class="home-contact-link" href="https://www.douyin.com/user/MS4wLjABAAAAnvG1Vw82Zareta_IZQyJIRwFGX2Y7MhekSde7Wa-_T_GOH5b9F9SRw03mhwAuThd?from_tab_name=main&amp;relation=0&amp;vid=7632235084963845049" target="_blank" rel="noopener noreferrer">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.6 5.82s.51.49 0 0A4.278 4.278 0 0 1 15.54 3h-3.09v12.4a2.592 2.592 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6 0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64 0 3.33 2.76 5.7 5.69 5.7 3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48z"/></svg>
+              抖音
+            </a>
           </div>
         </div>
       </div>
-
-      <!-- Event Card -->
-      <a href="events.html"
-        class="block bg-slate-800 text-white rounded-xl p-8 shadow-lg relative overflow-hidden group hover:-translate-y-1 transition-transform">
-        <div
-          class="absolute top-0 right-0 w-32 h-32 bg-cyan-500 opacity-20 rounded-full blur-3xl group-hover:opacity-30 transition">
-        </div>
-        <div class="relative z-10">
-          <div class="flex items-center gap-2 mb-4 text-cyan-400">
-            <span class="relative flex h-2 w-2">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
-            </span>
-            <span class="text-xs font-bold uppercase">FLAGSHIP EVENT</span>
-          </div>
-          <h3 class="text-xl font-bold mb-2">
-            【IA x
-            深势科技】Uni-Lab线下WorkShop（宜宾场）报名开启！让实验更智能，让科研更高效
-          </h3>
-          <p class="text-slate-400 text-sm">点击查看活动详情 &rarr;</p>
-        </div>
-      </a>
-    </div>
+    </section>
   </main>
 </body>
 
diff --git a/join.html b/join.html
index 6684418..a029e59 100644
--- a/join.html
+++ b/join.html
@@ -1,133 +1,123 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="assets/images/logo.ico">
+<!doctype html>
+<html lang="zh-CN" class="scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
     <title>加入我们 | UESTC IA</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="assets/css/style.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <link rel="stylesheet" href="assets/css/style.css" />
     <script src="assets/js/main.js" defer></script>
-</head>
-<body class="pt-24 bg-slate-50">
+  </head>
+  <body class="pt-24">
+    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-16">
+      <div class="title-block mb-10">
+        <div class="title-en">Join UESTC IA</div>
+        <h1 class="text-4xl font-bold">加入交叉学科协会</h1>
+        <p>欢迎对跨学科研究、产业实践和项目协作感兴趣的同学加入我们。</p>
+      </div>
 
-    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-20">
+      <section class="grid md:grid-cols-3 gap-4 mb-10">
+        <article class="card-core p-6 text-center">
+          <i class="fas fa-rocket text-2xl text-cyan-600 mb-3"></i>
+          <h3 class="text-xl font-bold mb-2">前沿训练</h3>
+          <p class="text-sm">覆盖大模型、科研方法与工程实践。</p>
+        </article>
+        <article class="card-core p-6 text-center">
+          <i class="fas fa-network-wired text-2xl text-cyan-600 mb-3"></i>
+          <h3 class="text-xl font-bold mb-2">资源连接</h3>
+          <p class="text-sm">连接导师、企业与校友网络。</p>
+        </article>
+        <article class="card-core p-6 text-center">
+          <i class="fas fa-user-graduate text-2xl text-cyan-600 mb-3"></i>
+          <h3 class="text-xl font-bold mb-2">成长路径</h3>
+          <p class="text-sm">通过真实项目积累作品和经验。</p>
+        </article>
+      </section>
 
-        <!-- Header -->
-        <div class="text-center mb-16 animate-fade-in">
-            <h1 class="text-4xl font-bold text-slate-800 mb-4">Ready to Define the Future?</h1>
-            <p class="text-lg text-slate-600 max-w-2xl mx-auto">
-                这里没有传统的课堂，只有真实的挑战。加入我们，构建你的“第二课堂”。
-            </p>
+      <section class="card-core p-6 md:p-10 mb-8">
+        <div class="text-center mb-8">
+          <span class="badge mb-3">Join Us</span>
+          <h2 class="text-3xl font-bold mb-3">如何加入</h2>
+          <p class="max-w-xl mx-auto">扫描下方二维码加入 QQ 群，了解协会最新动态与活动信息。</p>
         </div>
 
-        <!-- 1. Why Join (Value Proposition) -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
-            <div class="text-center p-6 bg-white rounded-xl border border-slate-100 shadow-sm hover:-translate-y-1 transition duration-300">
-                <div class="w-12 h-12 bg-cyan-100 text-cyan-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i class="fas fa-rocket text-xl"></i>
-                </div>
-                <h3 class="font-bold text-slate-800 mb-2">前沿技术栈</h3>
-                <p class="text-sm text-slate-500">接触 Deep Learning, Brain Science 等跨学科前沿，填补传统教育空白。</p>
+        <div class="grid md:grid-cols-2 gap-8 items-center">
+          <div>
+            <div class="surface-2 p-6 rounded-xl">
+              <img
+                src="assets/images/join/QQgroup.jpg"
+                alt="QQ群"
+                class="w-full max-w-[280px] mx-auto rounded-lg shadow-md"
+              />
             </div>
-            <div class="text-center p-6 bg-white rounded-xl border border-slate-100 shadow-sm hover:-translate-y-1 transition duration-300">
-                <div class="w-12 h-12 bg-cyan-100 text-cyan-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i class="fas fa-network-wired text-xl"></i>
-                </div>
-                <h3 class="font-bold text-slate-800 mb-2">产学研资源</h3>
-                <p class="text-sm text-slate-500">直接对接顶尖实验室导师与头部企业（深势科技等）实习机会。</p>
+          </div>
+          <div class="space-y-6">
+            <div class="flex items-start gap-4">
+              <div class="w-10 h-10 rounded-full bg-cyan-100 flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-comments text-cyan-600"></i>
+              </div>
+              <div>
+                <h3 class="font-bold text-lg mb-1">QQ 群</h3>
+                <p class="text-sm">获取最新活动通知、项目动态与行业资讯。</p>
+              </div>
             </div>
-            <div class="text-center p-6 bg-white rounded-xl border border-slate-100 shadow-sm hover:-translate-y-1 transition duration-300">
-                <div class="w-12 h-12 bg-cyan-100 text-cyan-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i class="fas fa-user-graduate text-xl"></i>
-                </div>
-                <h3 class="font-bold text-slate-800 mb-2">精英社区</h3>
-                <p class="text-sm text-slate-500">与来自信通、计算机、生医、经管的顶尖同学组队，拓展视野。</p>
+            <div class="flex items-start gap-4">
+              <div class="w-10 h-10 rounded-full bg-cyan-100 flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-calendar-alt text-cyan-600"></i>
+              </div>
+              <div>
+                <h3 class="font-bold text-lg mb-1">活动参与</h3>
+                <p class="text-sm">优先报名参与协会组织的讲座、工作坊与黑客松。</p>
+              </div>
             </div>
+            <div class="flex items-start gap-4">
+              <div class="w-10 h-10 rounded-full bg-cyan-100 flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-users text-cyan-600"></i>
+              </div>
+              <div>
+                <h3 class="font-bold text-lg mb-1">社区互动</h3>
+                <p class="text-sm">与志同道合的同学交流学习，构建人脉网络。</p>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <!-- 2. How to Join (CTA Section) - 重构二维码设计 -->
-        <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 md:p-8 shadow-2xl relative overflow-hidden">
-            <!-- 装饰背景 -->
-            <div class="absolute -top-20 -right-20 w-64 h-64 bg-cyan-600 rounded-full blur-[80px] opacity-30"></div>
-            <div class="absolute -bottom-20 -left-20 w-48 h-48 bg-blue-500 rounded-full blur-[60px] opacity-20"></div>
-
-            <div class="relative z-10">
-                <h2 class="text-2xl font-bold text-white mb-8 text-center md:text-left">入会流程</h2>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                    <!-- Left: Steps -->
-                    <div class="space-y-6">
-                        <div class="flex items-start gap-4">
-                            <div class="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-cyan-600 flex items-center justify-center font-bold text-sm text-white">1</div>
-                            <div class="flex-1">
-                                <h4 class="font-bold text-lg text-white">加入咨询群 / 关注频道</h4>
-                                <p class="text-slate-300 text-sm mt-1">扫描右侧二维码，获取最新招募简章和活动通知。</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start gap-4">
-                            <div class="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center font-bold text-sm text-white">2</div>
-                            <div class="flex-1">
-                                <h4 class="font-bold text-lg text-white">提交申请表</h4>
-                                <p class="text-slate-300 text-sm mt-1">每年 3月 / 9月 开启纳新。填写并提交个人简历与意向方向。</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start gap-4">
-                            <div class="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center font-bold text-sm text-white">3</div>
-                            <div class="flex-1">
-                                <h4 class="font-bold text-lg text-white">面试与定组</h4>
-                                <p class="text-slate-300 text-sm mt-1">通过核心骨干/导师面试，确定加入的项目组。</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Right: QR Codes - 重构设计 -->
-                    <div class="bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10">
-                        <div class="text-center mb-6">
-                            <h3 class="text-white font-bold text-lg mb-1">扫码加入我们</h3>
-                            <p class="text-slate-400 text-xs">选择适合你的加入方式</p>
-                        </div>
-                        
-                        <div class="grid grid-cols-1 gap-6">
-                            <!-- TechPulse Channel QR Code -->
-                            <div class="bg-slate-900 rounded-xl p-4 border border-cyan-900/50 hover:border-cyan-500 transition-all duration-300">
-                                <div class="flex flex-col items-center">
-                                    <div class="w-full max-w-[200px] h-48 bg-black/30 rounded-lg flex items-center justify-center overflow-hidden mx-auto mb-3">
-                                        <img src="assets/images/join/TechPulse.png" alt="TechPulse 官方频道" class="max-w-full max-h-full object-contain p-2">
-                                    </div>
-                                    <div class="text-center">
-                                        <span class="block text-cyan-400 font-bold text-sm mb-0.5">TechPulse 频道</span>
-                                        <span class="text-slate-400 text-xs">获取最新技术动态</span>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <!-- QQ Group QR Code -->
-                            <div class="bg-slate-900 rounded-xl p-4 border border-blue-900/50 hover:border-blue-400 transition-all duration-300">
-                                <div class="flex flex-col items-center">
-                                    <div class="w-full max-w-[200px] h-48 bg-black/30 rounded-lg flex items-center justify-center overflow-hidden mx-auto mb-3">
-                                        <img src="assets/images/join/QQgroup.jpg" alt="QQ 招募咨询群" class="max-w-full max-h-full object-contain p-2">
-                                    </div>
-                                    <div class="text-center">
-                                        <span class="block text-blue-300 font-bold text-sm mb-0.5">招募咨询群</span>
-                                        <span class="text-slate-400 text-xs">直接咨询招新事宜</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="mt-4 text-center">
-                            <p class="text-[10px] text-slate-500">* 请认准官方账号，谨防假冒</p>
-                        </div>
-                    </div>
-                </div>
+        <div class="mt-10 pt-8 border-t border-gray-200">
+          <div class="grid md:grid-cols-2 gap-6 text-center max-w-md mx-auto">
+            <div>
+              <div class="text-3xl font-bold text-cyan-600 mb-1">100+</div>
+              <p class="text-sm text-muted">社群成员</p>
             </div>
+            <div>
+              <div class="text-3xl font-bold text-cyan-600 mb-1">10+</div>
+              <p class="text-sm text-muted">合作企业/导师</p>
+            </div>
+          </div>
         </div>
+      </section>
 
+      <section class="card-core p-6 md:p-8">
+        <h2 class="text-2xl font-bold mb-6">常见问题</h2>
+        <div class="space-y-4">
+          <div class="border-b border-gray-100 pb-4">
+            <h3 class="font-semibold mb-2">Q: 加入协会需要什么条件？</h3>
+            <p class="text-sm text-muted">对跨学科研究感兴趣即可加入，无需特定技术背景。</p>
+          </div>
+          <div class="border-b border-gray-100 pb-4">
+            <h3 class="font-semibold mb-2">Q: 协会有哪些活动形式？</h3>
+            <p class="text-sm text-muted">包括技术讲座、项目实战、黑客松、企业参访等多种形式。</p>
+          </div>
+          <div>
+            <h3 class="font-semibold mb-2">Q: 如何参与协会项目？</h3>
+            <p class="text-sm text-muted">通过 QQ 群获取项目招募信息，可随时报名参与。</p>
+          </div>
+        </div>
+      </section>
     </main>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/members.html b/members.html
new file mode 100644
index 0000000..0ebe2fb
--- /dev/null
+++ b/members.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-CN" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>核心成员 | UESTC IA</title>
+  <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="apple-touch-icon" href="assets/images/logo.ico" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="assets/css/style.css" />
+  <script src="assets/js/main.js" defer></script>
+  <script src="assets/js/data.js" defer></script>
+  <script src="assets/js/render-members.js" defer></script>
+</head>
+<body class="pt-24">
+  <main class="ia-page pb-12">
+    <header class="ia-page-header">
+      <div class="ia-kicker">Core Members</div>
+      <h1 class="ia-page-title">核心成员</h1>
+    </header>
+
+    <div id="membersRoot" aria-live="polite"></div>
+  </main>
+</body>
+</html>
diff --git a/partners.html b/partners.html
index df4ae1b..e46d143 100644
--- a/partners.html
+++ b/partners.html
@@ -1,337 +1,40 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
-    <link
-      rel="shortcut icon"
-      href="assets/images/logo.ico"
-      type="image/x-icon"
-    />
-    <link rel="apple-touch-icon" href="assets/images/logo.ico" />
-    <title>团队与合作 | UESTC IA</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="assets/css/style.css" />
-    <script src="assets/js/main.js" defer></script>
-  </head>
-  <body class="pt-24">
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
-      <div class="text-center max-w-3xl mx-auto mb-16">
-        <h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
-          Partners & Advisors
-        </h1>
-        <p class="text-slate-500 text-lg">汇聚顶尖学术大脑与产业先锋。</p>
-      </div>
-
-      <!-- 1. 导师列表 (Grid Layout) -->
-      <div class="mb-20">
-        <h2
-          class="text-xl font-bold text-slate-800 border-l-4 border-cyan-600 pl-4 mb-8"
-        >
-          学术指导委员会
-        </h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <!-- 导师卡片 1 -->
-          <div
-            class="group bg-white rounded-lg p-6 border border-slate-100 hover:shadow-xl hover:border-cyan-100 transition-all duration-300"
-          >
-            <div class="flex items-center gap-4">
-              <div
-                class="w-16 h-16 rounded-full bg-slate-200 overflow-hidden group-hover:grayscale-0 transition duration-500"
-              >
-                <!-- 占位图 -->
-                <img
-                  src="assets/images/partners/members/DezhongYao.png"
-                  alt="Professor"
-                  class="w-full h-full object-cover"
-                />
-              </div>
-              <div>
-                <h3
-                  class="font-bold text-slate-800 text-lg group-hover:text-cyan-600 transition"
-                >
-                  <a
-                    href="http://faculty.uestc.edu.cn/yaodezhong/zh_CN/index.htm"
-                    target="_blank"
-                    class="hover:text-cyan-600 transition"
-                    >尧德中 教授</a
-                  >
-                </h3>
-                <p class="text-xs text-slate-400 uppercase">杰出科学家</p>
-              </div>
-            </div>
-            <p class="mt-4 text-sm text-slate-500 line-clamp-2">
-              电子科技大学生命科学与技术学院创院院长
-            </p>
-          </div>
-
-          <!-- 导师卡片 2 -->
-          <div
-            class="group bg-white rounded-lg p-6 border border-slate-100 hover:shadow-xl hover:border-cyan-100 transition-all duration-300"
-          >
-            <div class="flex items-center gap-4">
-              <div
-                class="w-16 h-16 rounded-full bg-slate-200 overflow-hidden group-hover:grayscale-0 transition duration-500"
-              >
-                <img
-                  src="assets/images/partners/members/pedro.png"
-                  alt="Professor"
-                  class="w-full h-full object-cover"
-                />
-              </div>
-              <div>
-                <h3
-                  class="font-bold text-slate-800 text-lg group-hover:text-cyan-600 transition"
-                >
-                  <a
-                    href="https://www.life.uestc.edu.cn/sznr2.jsp?urltype=news.NewsContentUrl&wbtreeid=1219&wbnewsid=3398"
-                    target="_blank"
-                    class="hover:text-cyan-600 transition"
-                    >裴德乐 教授</a
-                  >
-                </h3>
-                <p class="text-xs text-slate-400 uppercase">古巴科学院院士</p>
-              </div>
-            </div>
-            <p class="mt-4 text-sm text-slate-500 line-clamp-2">
-              神经信息学权威专家
-            </p>
-          </div>
-
-          <!-- 导师卡片 3 -->
-          <div
-            class="group bg-white rounded-lg p-6 border border-slate-100 hover:shadow-xl hover:border-cyan-100 transition-all duration-300"
-          >
-            <div class="flex items-center gap-4">
-              <div
-                class="w-16 h-16 rounded-full bg-slate-200 overflow-hidden group-hover:grayscale-0 transition duration-500"
-              >
-                <img
-                  src="assets/images/partners/members/fanzhang.png"
-                  alt="Professor"
-                  class="w-full h-full object-cover"
-                />
-              </div>
-              <div>
-                <h3
-                  class="font-bold text-slate-800 text-lg group-hover:text-cyan-600 transition"
-                >
-                  <a
-                    href="https://faculty.uestc.edu.cn/fanzhang/zh_CN/index/479541/list/index.htm"
-                    target="_blank"
-                    class="hover:text-cyan-600 transition"
-                    >张帆 教授</a
-                  >
-                </h3>
-                <p class="text-xs text-slate-400 uppercase">国家青年人才</p>
-              </div>
-            </div>
-            <p class="mt-4 text-sm text-slate-500 line-clamp-2">
-              脑神经影像计算，弥散磁共振，医学图像分析
-            </p>
-          </div>
-
-          <!-- 导师卡片 4 -->
-          <div
-            class="group bg-white rounded-lg p-6 border border-slate-100 hover:shadow-xl hover:border-cyan-100 transition-all duration-300"
-          >
-            <div class="flex items-center gap-4">
-              <div
-                class="w-16 h-16 rounded-full bg-slate-200 overflow-hidden group-hover:grayscale-0 transition duration-500"
-              >
-                <img
-                  src="assets/images/partners/members/dingzheng.png"
-                  alt="Professor"
-                  class="w-full h-full object-cover"
-                />
-              </div>
-              <div>
-                <h3
-                  class="font-bold text-slate-800 text-lg group-hover:text-cyan-600 transition"
-                >
-                  <a
-                    href="https://sose.uestc.edu.cn/info/1184/7923.htm"
-                    target="_blank"
-                    class="hover:text-cyan-600 transition"
-                    >郑丁 教授</a
-                  >
-                </h3>
-                <p class="text-xs text-slate-400 uppercase">海外优青</p>
-              </div>
-            </div>
-            <p class="mt-4 text-sm text-slate-500 line-clamp-2">
-              半导体器件的人机交互柔性可穿戴技术
-            </p>
-          </div>
-
-          <!-- 导师卡片 5 -->
-          <div
-            class="group bg-white rounded-lg p-6 border border-slate-100 hover:shadow-xl hover:border-cyan-100 transition-all duration-300"
-          >
-            <div class="flex items-center gap-4">
-              <div
-                class="w-16 h-16 rounded-full bg-slate-200 overflow-hidden group-hover:grayscale-0 transition duration-500"
-              >
-                <img
-                  src="assets/images/partners/members/mingwenjian.png"
-                  alt="Professor"
-                  class="w-full h-full object-cover"
-                />
-              </div>
-              <div>
-                <h3
-                  class="font-bold text-slate-800 text-lg group-hover:text-cyan-600 transition"
-                >
-                  <a
-                    href="https://www.iffs.uestc.edu.cn/info/1116/5944.htm"
-                    target="_blank"
-                    class="hover:text-cyan-600 transition"
-                    >文明健 教授</a
-                  >
-                </h3>
-                <p class="text-xs text-slate-400 uppercase">
-                  主持美国自然科学基金（NSF）项目
-                </p>
-              </div>
-            </div>
-            <p class="mt-4 text-sm text-slate-500 line-clamp-2">
-              数据驱动建模，不确定性量化，能源材料与器件
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- 2. 合作伙伴 Logo 墙 -->
-      <div>
-        <h2
-          class="text-xl font-bold text-slate-800 border-l-4 border-cyan-600 pl-4 mb-8"
-        >
-          战略支撑单位
-        </h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-          <!-- Logo Item 1: 电子科技大学生命科学与技术学院 -->
-          <a
-            href="https://www.life.uestc.edu.cn/"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/uestc-life.png"
-              alt="生命科学与技术学院"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-
-          <!-- Logo Item 2: 深势科技 DP Technology -->
-          <a
-            href="https://www.dp.tech"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/DPTech.png"
-              alt="深势科技 DP Technology"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-
-                    <!-- Logo Item 2: 深势科技 DP Technology -->
-          <a
-            href="https://www.asiainfo.com/"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/Asiainfo.jpg"
-              alt="Asiainfo"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-
-          <a
-            href="https://www.migu.cn/"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/migu.png"
-              alt="咪咕"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-
-
-
-          <!-- Logo Item 2: 蓝耘科技 -->
-          <a
-            href="https://www.lanyun.net/"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/lanyun.png"
-              alt="蓝耘科技 LANYUN"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-        </div>
-      </div>
-
-      <div>
-        <h2
-          class="text-xl font-bold text-slate-800 border-l-4 border-cyan-600 pl-4 mb-8"
-        >
-          合作伙伴
-        </h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-          <a
-            href="partners/changing-view.html"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/changing-view.png"
-              alt="辰境绘卷"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-
-          <a
-            href=""
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/weiyang.png"
-              alt="未央支教队"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-          <a
-            href="https://mp.weixin.qq.com/s/oeJ3EkE4_VP3RJDYAC3HYA"
-            target="_blank"
-            class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md cursor-pointer"
-          >
-            <img
-              src="assets/images/partners/orgs/Asher.jpg"
-              alt="尘摄影工作室"
-              class="max-h-16 max-w-full object-contain"
-            />
-          </a>
-          <!-- 更多 Logo... -->
-          <!-- <div class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md">
-                    <img src="" alt="合作伙伴名称" class="max-h-16 max-w-full object-contain" />
-                </div>
-                <div class="h-24 flex items-center justify-center bg-white border border-slate-100 rounded-lg p-4 hover:grayscale-0 opacity-70 hover:opacity-100 transition-all hover:shadow-md">
-                    <img src="" alt="合作伙伴名称" class="max-h-16 max-w-full object-contain" />
-                </div> -->
-        </div>
-      </div>
-    </main>
-  </body>
+<html lang="zh-CN" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>合作与导师 | UESTC IA</title>
+  <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="apple-touch-icon" href="assets/images/logo.ico" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="assets/css/style.css" />
+  <script src="assets/js/main.js" defer></script>
+  <script src="assets/js/data.js" defer></script>
+  <script src="assets/js/render-partners.js" defer></script>
+</head>
+<body class="pt-24">
+  <main class="ia-page pb-12">
+    <header class="ia-page-header">
+      <div class="ia-kicker">Partners & Advisors</div>
+      <h1 class="ia-page-title">合作与导师</h1>
+    </header>
+
+    <section class="ia-section">
+      <h2 class="ia-section-title">学术指导委员会</h2>
+      <div id="advisorsGrid" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3" aria-live="polite"></div>
+    </section>
+
+    <section class="ia-section">
+      <h2 class="ia-section-title">战略支撑单位</h2>
+      <div id="organizationsGrid" class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3" aria-live="polite"></div>
+    </section>
+
+    <section class="ia-section">
+      <h2 class="ia-section-title">合作伙伴</h2>
+      <div id="partnersGrid" class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3" aria-live="polite"></div>
+    </section>
+  </main>
+</body>
 </html>
diff --git a/partners/changing-view.html b/partners/changing-view.html
index d630699..a3fa172 100644
--- a/partners/changing-view.html
+++ b/partners/changing-view.html
@@ -408,7 +408,7 @@
       <!-- 顶部导航 -->
       <div class="header-actions">
         <a href="../partners.html" class="back-button">
-          <i class="fas fa-arrow-left" style="font-size: 12px;"></i> 返回合作伙伴列表
+          <i class="fas fa-arrow-left" style="font-size: 12px;"></i> 返回合作与导师
         </a>
       </div>
       
@@ -510,7 +510,7 @@ <h2>代表作品</h2>
                   </div>
                 </div>
                 
-                <a href="https://www.kzjn80.cn/20250831/583f8b18ee2b4c94aa23e9d7e45cdce3/c.html" target="_blank" class="btn-primary">
+                <a href="https://www.kzjn80.cn/20250831/583f8b18ee2b4c94aa23e9d7e45cdce3/c.html" target="_blank" rel="noopener noreferrer" class="btn-primary">
                   <i class="fas fa-play" style="margin-right: 8px; font-size: 10px;"></i> 点击观看作品
                 </a>
               </div>
@@ -547,4 +547,4 @@ <h4>官方邮箱</h4>
       </div>
     </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/projects.html b/projects.html
index 368431a..de05954 100644
--- a/projects.html
+++ b/projects.html
@@ -1,78 +1,27 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" class="scroll-smooth">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="assets/images/logo.ico">
-    <title>项目与成果 | UESTC IA</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="assets/css/style.css">
-    <script src="assets/js/main.js" defer></script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>产品宣传 | UESTC IA</title>
+  <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon" />
+  <link rel="apple-touch-icon" href="assets/images/logo.ico" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="assets/css/style.css" />
+  <script src="assets/js/main.js" defer></script>
+  <script src="assets/js/data.js" defer></script>
+  <script src="assets/js/render-products.js" defer></script>
 </head>
-<body class="pt-24 bg-slate-50">
+<body class="pt-24">
+  <main class="ia-page pb-12">
+    <header class="ia-page-header">
+      <div class="ia-kicker">Product Promotion</div>
+      <h1 class="ia-page-title">产品宣传</h1>
+    </header>
 
-    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-20">
-
-        <!-- 页面标题 -->
-        <div class="text-center mb-12">
-            <h1 class="text-3xl font-bold text-slate-800 mb-2">Projects</h1>
-            <p class="text-slate-500">从AI工具到创新应用，这里是我们的研究成果与实践项目。</p>
-        </div>
-
-        <!-- 项目卡片 -->
-        <div class="space-y-6 mb-16">
-
-            <!-- 研途信使 -->
-            <a href="projects/ytmsg.html" class="block bg-white rounded-xl shadow-md border border-slate-200 overflow-hidden hover:shadow-xl hover:border-cyan-300 transition group">
-                <div class="flex flex-col md:flex-row">
-                    <!-- 左侧封面 -->
-                    <div class="md:w-56 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center p-8 relative overflow-hidden">
-                        <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
-                        <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
-                        <img src="assets/images/project/ytmsg/logo.png" alt="研途信使" class="w-24 h-24 rounded-2xl object-cover shadow-lg relative z-10">
-                    </div>
-                    <!-- 右侧内容 -->
-                    <div class="flex-1 p-6">
-                        <div class="flex items-start justify-between mb-3">
-                            <div>
-                                <div class="flex items-center gap-2 mb-1">
-                                    <h2 class="text-xl font-bold text-slate-800 group-hover:text-cyan-600 transition">研途信使</h2>
-                                    <span class="px-2.5 py-1 bg-green-100 text-green-600 text-xs font-medium rounded-full">已上线</span>
-                                </div>
-                                <p class="text-slate-500 font-medium">微信小程序 · 保研套瓷好助手</p>
-                            </div>
-                            <i class="fas fa-chevron-right text-slate-300 group-hover:text-cyan-500 transition"></i>
-                        </div>
-                        <p class="text-slate-600 leading-relaxed mb-4">
-                            基于大语言模型的升学辅助与自动套磁邮件管理平台，帮助同学们高效完成保研申请中的信息检索、文书撰写与导师联系。
-                        </p>
-                        <div class="flex flex-wrap gap-2">
-                            <span class="px-3 py-1.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-md">AI套磁</span>
-                            <span class="px-3 py-1.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-md">邮件批量发送</span>
-                            <span class="px-3 py-1.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-md">收件箱管理</span>
-                        </div>
-                    </div>
-                </div>
-            </a>
-
-            <!-- 更多项目 -->
-            <div class="bg-slate-100 rounded-xl border-2 border-dashed border-slate-300 p-10 text-center">
-                <div class="w-14 h-14 bg-slate-200 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i class="fas fa-plus text-slate-400 text-xl"></i>
-                </div>
-                <h3 class="text-lg font-semibold text-slate-600 mb-2">更多项目筹备中</h3>
-                <p class="text-slate-400 mb-5">精彩项目即将呈现</p>
-                <a href="join.html" class="inline-flex items-center text-sm font-medium text-cyan-600 hover:text-cyan-700 transition">
-                    <i class="fas fa-lightbulb mr-2"></i>提出你的项目想法
-                </a>
-            </div>
-
-        </div>
-
-    </main>
+    <div id="productsRoot" aria-live="polite"></div>
+  </main>
 </body>
 </html>
diff --git a/projects/ytmsg.html b/projects/ytmsg.html
index 1e7b15f..e5dcf82 100644
--- a/projects/ytmsg.html
+++ b/projects/ytmsg.html
@@ -20,7 +20,7 @@
         <!-- 返回 -->
         <div class="mb-6">
             <a href="../projects.html" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-cyan-600 transition">
-                <i class="fas fa-arrow-left mr-2"></i>返回项目列表
+                <i class="fas fa-arrow-left mr-2"></i>返回产品列表
             </a>
         </div>
 
diff --git a/projects/zeta.html b/projects/zeta.html
new file mode 100644
index 0000000..960e44c
--- /dev/null
+++ b/projects/zeta.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/images/logo.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="../assets/images/logo.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" href="../assets/images/logo.ico">
+    <title>GitHave & FlashMemory - AI编程产品 | UESTC IA</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="../assets/css/style.css">
+    <script src="../assets/js/main.js" defer></script>
+</head>
+<body class="pt-24 bg-slate-900">
+
+    <!-- Hero Section -->
+    <section class="relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-br from-cyan-900 via-cyan-900 to-slate-900"></div>
+        <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-cyan-500/20 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-cyan-500/20 rounded-full blur-3xl"></div>
+
+        <main class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+            <!-- 返回 -->
+            <div class="mb-8">
+                <a href="../projects.html" class="inline-flex items-center text-sm font-medium text-slate-300 hover:text-white transition">
+                    <i class="fas fa-arrow-left mr-2"></i>返回项目列表
+                </a>
+            </div>
+
+            <!-- Hero 内容 -->
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur rounded-full text-cyan-300 text-sm font-medium mb-4">
+                        <span class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
+                        灰度测试中
+                    </div>
+                    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
+                        GitHave <span class="text-cyan-400">&</span> FlashMemory
+                    </h1>
+                    <p class="text-xl text-slate-300 mb-6">
+                        全场景 AI 编程生态，兴趣使然打磨的开源产品
+                    </p>
+                    <p class="text-slate-400 mb-8 leading-relaxed">
+                        面向开发者的 AI 工具链，通过 Web 门户、轻量级客户端或多端插件，享受开箱即用的 AI 辅助编码、一键生成 AI 代码报告、以及项目脉络梳理。
+                    </p>
+                    <div class="flex flex-wrap gap-4">
+                        <a href="https://githave.com/home" target="_blank" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-cyan-600 to-cyan-600 text-white font-semibold rounded-xl hover:from-cyan-500 hover:to-cyan-500 transition shadow-lg shadow-cyan-600/25">
+                            <i class="fas fa-rocket mr-2"></i>立即体验
+                        </a>
+                        <a href="https://githave.com/release" target="_blank" class="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur text-white font-semibold rounded-xl hover:bg-white/20 transition border border-white/20">
+                            <i class="fas fa-download mr-2"></i>下载客户端
+                        </a>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="absolute -inset-4 bg-gradient-to-r from-cyan-500 to-cyan-600 rounded-2xl blur-2xl opacity-30"></div>
+                    <img src="../assets/images/project/zeta/githave.png" alt="GitHave" class="relative rounded-2xl shadow-2xl border border-white/10">
+                </div>
+            </div>
+        </main>
+    </section>
+
+    <!-- 产品传送门 -->
+    <section class="py-12 bg-slate-800">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-4 gap-4">
+                <a href="https://githave.com/home" target="_blank" class="group p-5 bg-slate-700/50 rounded-xl border border-slate-600/50 hover:border-cyan-500/50 hover:bg-slate-700 transition">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-globe text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-white">线上体验</h3>
+                            <p class="text-slate-400 text-xs">GitHave AI 门户</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-500 text-sm group-hover:text-slate-300 transition">访问 →</p>
+                </a>
+                <a href="https://githave.com/release" target="_blank" class="group p-5 bg-slate-700/50 rounded-xl border border-slate-600/50 hover:border-cyan-500/50 hover:bg-slate-700 transition">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-desktop text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-white">客户端下载</h3>
+                            <p class="text-slate-400 text-xs">GitHave App</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-500 text-sm group-hover:text-slate-300 transition">下载 →</p>
+                </a>
+                <a href="https://zzh.app" target="_blank" class="group p-5 bg-slate-700/50 rounded-xl border border-slate-600/50 hover:border-cyan-500/50 hover:bg-slate-700 transition">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-users text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-white">ZetaZeroHub</h3>
+                            <p class="text-slate-400 text-xs">开源社区</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-500 text-sm group-hover:text-slate-300 transition">加入 →</p>
+                </a>
+                <a href="https://github.com/kinglegendzzh/GitHave" target="_blank" class="group p-5 bg-slate-700/50 rounded-xl border border-slate-600/50 hover:border-cyan-500/50 hover:bg-slate-700 transition">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="w-10 h-10 bg-gradient-to-br from-slate-600 to-slate-700 rounded-lg flex items-center justify-center">
+                            <i class="fab fa-github text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-white">GitHub</h3>
+                            <p class="text-slate-400 text-xs">项目仓库</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-500 text-sm group-hover:text-slate-300 transition">查看 →</p>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- 核心产品 -->
+    <section class="py-16 bg-slate-900">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-white mb-3">核心产品</h2>
+                <p class="text-slate-400">打造全场景 AI 编程生态</p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="group p-8 bg-gradient-to-br from-slate-800 to-slate-800/50 rounded-2xl border border-slate-700/50 hover:border-cyan-500/50 transition">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-14 h-14 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center">
+                            <i class="fas fa-code text-white text-xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-2xl font-bold text-white">GitHave</h3>
+                            <p class="text-cyan-400 text-sm">AI 编程助手</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-300 leading-relaxed mb-4">
+                        面向开发者的 AI 工具链，通过 Web 门户、轻量级客户端或多端插件，享受开箱即用的 AI 辅助编码、一键生成 AI 代码报告、以及项目脉络梳理。
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="px-2 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded">AI 辅助编码</span>
+                        <span class="px-2 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded">代码报告生成</span>
+                        <span class="px-2 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded">项目脉络梳理</span>
+                        <span class="px-2 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded">多端插件</span>
+                    </div>
+                </div>
+                <div class="group p-8 bg-gradient-to-br from-slate-800 to-slate-800/50 rounded-2xl border border-slate-700/50 hover:border-amber-500/50 transition">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center">
+                            <i class="fas fa-bolt text-white text-xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-2xl font-bold text-white">FlashMemory</h3>
+                            <p class="text-amber-400 text-sm">分布式 AI 索引引擎</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-300 leading-relaxed mb-4">
+                        去中心化分布式 AI 索引引擎，不仅能看懂你的代码，未来还能深度解析你本地的 PDF、图片、PPT 并作为知识库。
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="px-2 py-1 bg-amber-500/20 text-amber-300 text-xs rounded">代码理解</span>
+                        <span class="px-2 py-1 bg-amber-500/20 text-amber-300 text-xs rounded">知识库构建</span>
+                        <span class="px-2 py-1 bg-amber-500/20 text-amber-300 text-xs rounded">多格式解析</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 产品定位 -->
+    <section class="py-16 bg-slate-800">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-white mb-3">产品定位</h2>
+                <p class="text-slate-400">对标国际主流 AI 编程产品</p>
+            </div>
+            <div class="flex flex-wrap justify-center gap-3 mb-8">
+                <span class="px-4 py-2 bg-slate-700/50 text-slate-300 rounded-lg border border-slate-600/50">Google CodeWiki</span>
+                <span class="px-4 py-2 bg-slate-700/50 text-slate-300 rounded-lg border border-slate-600/50">DeepWiki-Open</span>
+                <span class="px-4 py-2 bg-slate-700/50 text-slate-300 rounded-lg border border-slate-600/50">Context7</span>
+                <span class="px-4 py-2 bg-slate-700/50 text-slate-300 rounded-lg border border-slate-600/50">Zread.ai</span>
+                <span class="px-4 py-2 bg-slate-700/50 text-slate-300 rounded-lg border border-slate-600/50">Open Code</span>
+            </div>
+            <div class="grid md:grid-cols-3 gap-4">
+                <div class="p-5 bg-slate-700/30 rounded-xl border border-slate-600/30">
+                    <i class="fas fa-magic text-cyan-400 text-2xl mb-3"></i>
+                    <h3 class="font-bold text-white mb-2">开箱即用</h3>
+                    <p class="text-slate-400 text-sm">无需复杂配置，立即享受 AI 辅助编码体验</p>
+                </div>
+                <div class="p-5 bg-slate-700/30 rounded-xl border border-slate-600/30">
+                    <i class="fas fa-chart-line text-cyan-400 text-2xl mb-3"></i>
+                    <h3 class="font-bold text-white mb-2">代码报告</h3>
+                    <p class="text-slate-400 text-sm">一键生成完整的 AI 代码分析报告</p>
+                </div>
+                <div class="p-5 bg-slate-700/30 rounded-xl border border-slate-600/30">
+                    <i class="fas fa-project-diagram text-cyan-400 text-2xl mb-3"></i>
+                    <h3 class="font-bold text-white mb-2">脉络梳理</h3>
+                    <p class="text-slate-400 text-sm">智能解析项目结构，理清代码逻辑</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ZetaZeroHub 社区（作为补充） -->
+    <section class="py-16 bg-gradient-to-br from-slate-900 via-cyan-950 to-slate-900">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="inline-flex items-center gap-2 px-4 py-2 bg-amber-500/20 border border-amber-500/30 rounded-full text-amber-400 text-sm font-medium mb-6">
+                <i class="fas fa-heart"></i> 社区支持
+            </div>
+            <h2 class="text-3xl font-bold text-white mb-4">加入 ZetaZeroHub 开源社区</h2>
+            <div class="mb-8">
+                <img src="../assets/images/project/zeta/zetahub.png" alt="ZetaZeroHub" class="mx-auto rounded-xl shadow-2xl border border-white/10 max-w-md w-full">
+            </div>
+            <p class="text-slate-300 mb-8 max-w-2xl mx-auto">
+                遇到使用 Bug 或想对产品吐槽，欢迎联系我们。等后面各方面成熟好玩了，拉感兴趣的小伙伴加入开源社区交流群。
+            </p>
+            <div class="flex flex-wrap justify-center gap-4 mb-8">
+                <a href="https://zzh.app" target="_blank" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white font-semibold rounded-xl hover:from-amber-400 hover:to-orange-400 transition shadow-lg shadow-amber-500/25">
+                    <i class="fas fa-users mr-2"></i>加入社区
+                </a>
+                <a href="https://zzh.app/githave" target="_blank" class="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur text-white font-semibold rounded-xl hover:bg-white/20 transition border border-white/20">
+                    <i class="fas fa-book mr-2"></i>项目介绍
+                </a>
+            </div>
+            <div class="grid md:grid-cols-3 gap-4 text-left">
+                <a href="https://zzh.app/githave" target="_blank" class="p-4 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition">
+                    <i class="fas fa-link text-cyan-400 mb-2"></i>
+                    <h3 class="font-medium text-white text-sm">GitHave 介绍</h3>
+                </a>
+                <a href="https://zzh.app/flash-memory" target="_blank" class="p-4 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition">
+                    <i class="fas fa-link text-amber-400 mb-2"></i>
+                    <h3 class="font-medium text-white text-sm">FlashMemory 介绍</h3>
+                </a>
+                <a href="https://zzh.app/tech-report" target="_blank" class="p-4 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition">
+                    <i class="fas fa-file-alt text-slate-400 mb-2"></i>
+                    <h3 class="font-medium text-white text-sm">技术报告</h3>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="py-8 bg-slate-950 border-t border-slate-800">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p class="text-slate-500 text-sm">
+                © 2024 GitHave & FlashMemory · 兴趣使然，打磨产品
+            </p>
+        </div>
+    </footer>
+
+</body>
+</html>
diff --git a/projects0.html b/projects0.html
index 341013a..72297bf 100644
--- a/projects0.html
+++ b/projects0.html
@@ -1,120 +1,26 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="assets/images/logo.ico">
-    <title>项目与成果 | UESTC IA</title>
+<html lang="zh-CN" class="scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
+    <title>椤圭洰妗ｆ | UESTC IA</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link rel="stylesheet" href="assets/css/style.css" />
     <script src="assets/js/main.js" defer></script>
-</head>
-<body class="pt-24 bg-slate-50">
-
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-20">
-
-        <div class="text-center mb-16">
-            <h1 class="text-3xl font-bold text-slate-800 mb-2">Projects & Achievements</h1>
-            <p class="text-slate-500">打破壁垒，协同共创，见证解决真实世界问题的创新力量。</p>
-        </div>
-
-        <!-- 1. 创新实验室 (Innovation Labs - 在研项目) -->
-        <section class="mb-20">
-            <div class="flex items-center justify-between mb-8">
-                <h2 class="text-xl font-bold text-slate-800 flex items-center">
-                    <i class="fas fa-flask text-cyan-600 mr-3"></i> 创新实验室 (In Progress)
-                </h2>
-                <span class="text-xs text-slate-400">显示部分精选项目</span>
-            </div>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Project Card 1 (Recruiting) -->
-                <div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-lg hover:border-cyan-200 transition duration-300 group relative overflow-hidden">
-                    <div class="absolute top-0 right-0 bg-cyan-600 text-white text-[10px] font-bold px-2 py-1 rounded-bl-lg">
-                        招募中
-                    </div>
-                    <div class="text-xs font-bold text-slate-400 uppercase mb-2">Health Track</div>
-                    <h3 class="text-lg font-bold text-slate-800 mb-3 group-hover:text-cyan-600 transition">基于 EEG 的情绪识别系统</h3>
-                    <p class="text-sm text-slate-600 mb-4 line-clamp-3">
-                        利用深度学习分析脑电信号，构建实时的情绪监测系统。目前需要熟悉 PyTorch 的同学加入模型优化组。
-                    </p>
-                    <div class="border-t border-slate-100 pt-4 flex items-center justify-between">
-                        <span class="text-xs text-slate-500"><i class="fas fa-user-tie mr-1"></i> 指导: 尧德中 教授</span>
-                        <a href="#" class="text-xs font-bold text-cyan-600 hover:underline">详情 &rarr;</a>
-                    </div>
-                </div>
-
-                <!-- Project Card 2 (Ongoing) -->
-                <div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-lg transition duration-300 group">
-                    <div class="text-xs font-bold text-slate-400 uppercase mb-2">Engineering Track</div>
-                    <h3 class="text-lg font-bold text-slate-800 mb-3">具身智能机器人抓取算法</h3>
-                    <p class="text-sm text-slate-600 mb-4 line-clamp-3">
-                        结合计算机视觉与强化学习，提升机械臂在非结构化环境下的抓取成功率。
-                    </p>
-                    <div class="border-t border-slate-100 pt-4 flex items-center justify-between">
-                        <span class="text-xs text-slate-500"><i class="fas fa-users mr-1"></i> 团队: 5人 (满员)</span>
-                        <a href="#" class="text-xs font-bold text-slate-400 hover:text-slate-600">查看进度</a>
-                    </div>
-                </div>
-                
-                <!-- More cards... -->
-            </div>
-        </section>
-
-        <!-- 2. 成果荣誉榜 (Achievement Hall) -->
-        <section>
-            <h2 class="text-xl font-bold text-slate-800 flex items-center mb-8">
-                <i class="fas fa-medal text-cyan-600 mr-3"></i> 荣誉榜单
-            </h2>
-
-            <div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
-                <div class="divide-y divide-slate-100">
-                    <!-- Item -->
-                    <div class="p-5 flex flex-col md:flex-row md:items-center gap-4 hover:bg-slate-50 transition">
-                        <div class="flex-shrink-0 w-12 h-12 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center">
-                            <i class="fas fa-file-contract text-lg"></i>
-                        </div>
-                        <div class="flex-grow">
-                            <h4 class="text-base font-bold text-slate-800">发表高水平学术论文 (IEEE TBME)</h4>
-                            <p class="text-sm text-slate-500 mt-1">Paper: "Cross-subject EEG Emotion Recognition based on..."</p>
-                        </div>
-                        <div class="text-xs font-bold text-slate-400 whitespace-nowrap">2024.10</div>
-                    </div>
-
-                    <!-- Item -->
-                    <div class="p-5 flex flex-col md:flex-row md:items-center gap-4 hover:bg-slate-50 transition">
-                        <div class="flex-shrink-0 w-12 h-12 bg-yellow-50 text-yellow-600 rounded-full flex items-center justify-center">
-                            <i class="fas fa-trophy text-lg"></i>
-                        </div>
-                        <div class="flex-grow">
-                            <h4 class="text-base font-bold text-slate-800">全国大学生集成电路创新创业大赛 一等奖</h4>
-                            <p class="text-sm text-slate-500 mt-1">Engineering 方向 - 芯片设计专项小组</p>
-                        </div>
-                        <div class="text-xs font-bold text-slate-400 whitespace-nowrap">2024.08</div>
-                    </div>
-
-                     <!-- Item -->
-                     <div class="p-5 flex flex-col md:flex-row md:items-center gap-4 hover:bg-slate-50 transition">
-                        <div class="flex-shrink-0 w-12 h-12 bg-purple-50 text-purple-600 rounded-full flex items-center justify-center">
-                            <i class="fas fa-code text-lg"></i>
-                        </div>
-                        <div class="flex-grow">
-                            <h4 class="text-base font-bold text-slate-800">软件著作权 2 项</h4>
-                            <p class="text-sm text-slate-500 mt-1">智慧医疗辅助诊断系统 V1.0</p>
-                        </div>
-                        <div class="text-xs font-bold text-slate-400 whitespace-nowrap">2024.06</div>
-                    </div>
-                </div>
-                <div class="bg-slate-50 p-3 text-center border-t border-slate-100">
-                    <a href="#" class="text-xs font-bold text-cyan-600 hover:text-cyan-700">查看年度完整报告 &rarr;</a>
-                </div>
-            </div>
-        </section>
-
+  </head>
+  <body class="pt-24">
+    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-16">
+      <header class="surface-2 elev-1 p-7 md:p-10 mb-8">
+        <div class="title-block"><div class="title-en">Project Archive</div><h1 class="text-4xl font-bold">椤圭洰妗ｆ</h1><p>璁板綍鍗忎細鍘嗗彶椤圭洰涓庨樁娈垫垚鏋滐紝鐢ㄤ簬澶嶇洏涓庣粡楠屽鐢ㄣ€?/p></div>
+      </header>
+      <section class="card-core p-6 md:p-8 mb-6">
+        <p class="title-en text-sm mb-2">Archive Item</p>
+        <h2 class="text-3xl font-bold mb-2">鐮旈€斾俊浣匡紙棣栧彂鐗堬級</h2>
+        <p class="mb-4">棣栦釜闈㈠悜鐮旂┒鐢熷満鏅殑淇℃伅鍔╂墜椤圭洰锛屽畬鎴愪粠闇€姹傝皟鐮斿埌 MVP 鍙戝竷銆?/p>
+        <a href="projects/ytmsg.html" class="btn btn-secondary">鏌ョ湅褰掓。璇︽儏</a>
+      </section>
     </main>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/research.html b/research.html
index 6df0e0c..168f3cc 100644
--- a/research.html
+++ b/research.html
@@ -1,224 +1,26 @@
 <!DOCTYPE html>
 <html lang="zh-CN" class="scroll-smooth">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="assets/images/logo.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" href="assets/images/logo.ico">
-    <title>核心方向 | UESTC IA</title>
-    <!-- 引用相同的 Head 资源 -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="assets/images/logo.ico" type="image/x-icon" />
+    <title>研究方向 | UESTC IA</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link rel="stylesheet" href="assets/css/style.css" />
     <script src="assets/js/main.js" defer></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-</head>
-<body class="pt-24">
-
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen" x-data="{ activeTab: 'ai' }">
-        
-        <!-- Header -->
-        <div class="text-center mb-16">
-            <h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">Research Tracks</h1>
-            <p class="text-slate-500 max-w-2xl mx-auto">五大核心引擎，以人工智能为驱动，打破学科壁垒。</p>
-        </div>
-
-        <div class="flex flex-col md:flex-row gap-8 items-start">
-            <!-- 侧边导航 (Tabs) -->
-            <div class="md:w-1/4 flex flex-col space-y-2 sticky top-24">
-                <!-- 特殊强调: AI Methods -->
-                <button @click="activeTab = 'ai'" 
-                    :class="activeTab === 'ai' ? 'bg-slate-800 text-white shadow-lg' : 'bg-white text-slate-600 hover:bg-slate-50'"
-                    class="text-left px-6 py-4 rounded-xl font-semibold transition-all duration-200 flex items-center justify-between border border-transparent">
-                    <span>AI Methods</span>
-                    <i class="fas fa-microchip" :class="activeTab === 'ai' ? 'text-cyan-400' : 'text-slate-400'"></i>
-                </button>
-
-                <!-- 其他方向 -->
-                <button @click="activeTab = 'science'" 
-                    :class="activeTab === 'science' ? 'border-cyan-600 bg-white shadow-sm' : 'border-transparent hover:bg-white/50'"
-                    class="text-left px-6 py-4 rounded-r-xl border-l-4 font-medium text-slate-600 transition-all">
-                    Science 方向
-                </button>
-                <button @click="activeTab = 'health'" 
-                    :class="activeTab === 'health' ? 'border-cyan-600 bg-white shadow-sm' : 'border-transparent hover:bg-white/50'"
-                    class="text-left px-6 py-4 rounded-r-xl border-l-4 font-medium text-slate-600 transition-all">
-                    Health 方向
-                </button>
-                <button @click="activeTab = 'engineering'" 
-                    :class="activeTab === 'engineering' ? 'border-cyan-600 bg-white shadow-sm' : 'border-transparent hover:bg-white/50'"
-                    class="text-left px-6 py-4 rounded-r-xl border-l-4 font-medium text-slate-600 transition-all">
-                    Engineering 方向
-                </button>
-                <button @click="activeTab = 'finance'" 
-                    :class="activeTab === 'finance' ? 'border-cyan-600 bg-white shadow-sm' : 'border-transparent hover:bg-white/50'"
-                    class="text-left px-6 py-4 rounded-r-xl border-l-4 font-medium text-slate-600 transition-all">
-                    Finance 方向
-                </button>
-            </div>
-
-            <!-- 内容区域 -->
-            <div class="md:w-3/4 bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-slate-100 min-h-[500px]">
-                
-                <!-- Tab 1: AI Methods -->
-                <div x-show="activeTab === 'ai'" x-transition.opacity.duration.300ms>
-                    <div class="flex items-center gap-3 mb-6 pb-6 border-b border-slate-100">
-                        <span class="bg-slate-100 text-slate-600 px-3 py-1 rounded text-xs font-bold uppercase">Base Layer</span>
-                        <h2 class="text-2xl font-bold text-slate-800">AI Methods | 技术底座</h2>
-                    </div>
-                    <p class="text-slate-600 leading-relaxed mb-8 text-lg">
-                        作为整个社团的技术核心，AI Methods 部负责组织人工智能核心技术的培训与工作坊。该部门致力于为其他各方向的活动与项目提供关键的方法论和技术支持，是推动AI创新实践的基石。
-                    </p>
-                    
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                        <div class="p-6 bg-slate-50 rounded-xl border border-slate-100">
-                            <h3 class="font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-bullseye text-cyan-600 mr-2"></i> 核心职能</h3>
-                            <ul class="space-y-2 text-sm text-slate-600">
-                                <li>• 提供人工智能核心技术培训与工作坊</li>
-                                <li>• 为各跨学科项目提供方法论与技术支持</li>
-                                <li>• 推动AI驱动的创新实践落地</li>
-                            </ul>
-                        </div>
-                        <div class="p-6 bg-slate-50 rounded-xl border border-slate-100">
-                            <h3 class="font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-tools text-cyan-600 mr-2"></i> 技术栈</h3>
-                            <div class="flex flex-wrap gap-2">
-                                <span class="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-500">PyTorch</span>
-                                <span class="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-500">LLM Fine-tuning</span>
-                                <span class="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-500">CUDA</span>
-                                <span class="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-500">XAI</span>
-                                <span class="px-2 py-1 bg-white border border-slate-200 rounded text-xs text-slate-500">Multi-modal AI</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Tab 2: Science -->
-                <div x-show="activeTab === 'science'" style="display:none" x-transition.opacity.duration.300ms>
-                    <div class="flex items-center gap-3 mb-6 pb-6 border-b border-slate-100">
-                        <span class="bg-cyan-100 text-cyan-700 px-3 py-1 rounded text-xs font-bold uppercase">Application</span>
-                        <h2 class="text-2xl font-bold text-slate-800">Science | 计算科学与基础研究</h2>
-                    </div>
-                    <p class="text-slate-600 leading-relaxed mb-8 text-lg">
-                        Science 部聚焦于计算科学在基础研究领域的深层应用。部门通过策划专业的讲座、工作坊以及项目实践活动，组织成员探索科学前沿课题。
-                    </p>
-                    
-                    <div class="bg-slate-50 rounded-xl p-6 border border-slate-100 mb-8">
-                        <h3 class="font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-atom text-cyan-600 mr-2"></i> 核心课题</h3>
-                        <ul class="space-y-2 text-sm text-slate-600">
-                            <li>• 探索蛋白质结构预测</li>
-                            <li>• 开展新材料发现研究</li>
-                            <li>• 组织计算科学基础研究领域的学术活动与实践</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-book text-blue-500 mr-2"></i> 学术活动</h4>
-                            <p class="text-sm text-slate-600">定期举办计算科学前沿讲座，邀请校内外专家学者分享最新研究成果。</p>
-                        </div>
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-project-diagram text-green-500 mr-2"></i> 实践项目</h4>
-                            <p class="text-sm text-slate-600">组织跨学科研究小组，参与国家重大科研项目，培养科研能力。</p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Tab 3: Health -->
-                <div x-show="activeTab === 'health'" style="display:none" x-transition.opacity.duration.300ms>
-                    <div class="flex items-center gap-3 mb-6 pb-6 border-b border-slate-100">
-                        <span class="bg-cyan-100 text-cyan-700 px-3 py-1 rounded text-xs font-bold uppercase">Application</span>
-                        <h2 class="text-2xl font-bold text-slate-800">Health | 智慧医疗与生命健康</h2>
-                    </div>
-                    <p class="text-slate-600 leading-relaxed mb-8 text-lg">
-                        Health 部致力于推动智慧医疗创新，重点关注智能技术在医疗健康领域的应用。部门通过组织高水平的学术交流与实践项目，促进医学与AI的深度融合。
-                    </p>
-                    
-                    <div class="bg-slate-50 rounded-xl p-6 border border-slate-100 mb-8">
-                        <h3 class="font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-heartbeat text-cyan-600 mr-2"></i> 核心方向</h3>
-                        <ul class="space-y-2 text-sm text-slate-600">
-                            <li>• 推动智慧医疗创新实践</li>
-                            <li>• 进行医学影像分析研究</li>
-                            <li>• 探索智能医疗与可穿戴设备应用</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-hospital text-rose-500 mr-2"></i> 医疗合作</h4>
-                            <p class="text-sm text-slate-600">与附属医院合作，开展真实医疗场景下的AI应用研究与验证。</p>
-                        </div>
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-microscope text-purple-500 mr-2"></i> 技术研发</h4>
-                            <p class="text-sm text-slate-600">开发医学影像分析算法，提升疾病早期诊断的准确性和效率。</p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Tab 4: Engineering -->
-                <div x-show="activeTab === 'engineering'" style="display:none" x-transition.opacity.duration.300ms>
-                    <div class="flex items-center gap-3 mb-6 pb-6 border-b border-slate-100">
-                        <span class="bg-cyan-100 text-cyan-700 px-3 py-1 rounded text-xs font-bold uppercase">Application</span>
-                        <h2 class="text-2xl font-bold text-slate-800">Engineering | 工程应用与硬科技</h2>
-                    </div>
-                    <p class="text-slate-600 leading-relaxed mb-8 text-lg">
-                        Engineering 部面向具体的工程应用领域，旨在联合校内优势力量解决实际工程难题。部门通过组织前沿分享会与科创项目，推动工程技术突破。
-                    </p>
-                    
-                    <div class="bg-slate-50 rounded-xl p-6 border border-slate-100 mb-8">
-                        <h3 class="font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-cogs text-cyan-600 mr-2"></i> 核心领域</h3>
-                        <ul class="space-y-2 text-sm text-slate-600">
-                            <li>• 联合攻关解决工程难题</li>
-                            <li>• 探索具身智能前沿技术</li>
-                            <li>• 开展芯片设计与通信系统研究</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-robot text-cyan-500 mr-2"></i> 具身智能</h4>
-                            <p class="text-sm text-slate-600">研发智能机器人系统，实现环境感知、决策规划与精准执行的完整技术链。</p>
-                        </div>
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-microchip text-indigo-500 mr-2"></i> 芯片技术</h4>
-                            <p class="text-sm text-slate-600">参与芯片设计项目，从架构设计到验证测试，培养全栈芯片研发能力。</p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Tab 5: Finance -->
-                <div x-show="activeTab === 'finance'" style="display:none" x-transition.opacity.duration.300ms>
-                    <div class="flex items-center gap-3 mb-6 pb-6 border-b border-slate-100">
-                        <span class="bg-cyan-100 text-cyan-700 px-3 py-1 rounded text-xs font-bold uppercase">Application</span>
-                        <h2 class="text-2xl font-bold text-slate-800">Finance | 金融科技与计算金融</h2>
-                    </div>
-                    <p class="text-slate-600 leading-relaxed mb-8 text-lg">
-                        Finance 部专注于现代计算方法在金融管理中的应用。部门通过组织专业的讲座与深入的案例分析，致力于培养成员的金融科技素养。
-                    </p>
-                    
-                    <div class="bg-slate-50 rounded-xl p-6 border border-slate-100 mb-8">
-                        <h3 class="font-bold text-slate-800 mb-3 flex items-center"><i class="fas fa-chart-line text-cyan-600 mr-2"></i> 核心职能</h3>
-                        <ul class="space-y-2 text-sm text-slate-600">
-                            <li>• 培养复合型金融科技素养</li>
-                            <li>• 研究现代计算方法在金融管理中的应用</li>
-                            <li>• 进行金融科技案例分析与研讨</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-calculator text-emerald-500 mr-2"></i> 量化分析</h4>
-                            <p class="text-sm text-slate-600">运用机器学习算法进行金融市场预测、风险评估和投资组合优化。</p>
-                        </div>
-                        <div class="p-5 bg-white border border-slate-200 rounded-lg">
-                            <h4 class="font-bold text-slate-800 mb-2 flex items-center"><i class="fas fa-shield-alt text-yellow-500 mr-2"></i> 风险管理</h4>
-                            <p class="text-sm text-slate-600">开发智能风控系统，实时监测金融风险，提升金融机构的风险管理能力。</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  </head>
+  <body class="pt-24">
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen mb-16">
+      <div class="title-block mb-10"><div class="title-en">Research Tracks</div><h1 class="text-4xl font-bold">研究方向</h1><p>围绕 AI for Science 的跨学科问题，形成方法、工程与应用三层协同。</p></div>
+
+      <section class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-10">
+        <article class="card-core p-6"><p class="title-en text-sm mb-2">AI Methods</p><h2 class="text-2xl font-bold mb-2">AI 方法论</h2><p class="mb-4">聚焦多模态建模、参数高效微调、可解释学习与稳健评估。</p><div class="flex flex-wrap gap-2 text-xs"><span class="badge">PyTorch</span><span class="badge">LLM</span><span class="badge">XAI</span></div></article>
+        <article class="card-core p-6"><p class="title-en text-sm mb-2">Science</p><h2 class="text-2xl font-bold mb-2">科学智能</h2><p class="mb-4">将机器学习方法用于生物、材料和复杂系统中的数据驱动发现。</p><div class="flex flex-wrap gap-2 text-xs"><span class="badge">Data Mining</span><span class="badge">Simulation</span><span class="badge">Discovery</span></div></article>
+        <article class="card-core p-6"><p class="title-en text-sm mb-2">Health</p><h2 class="text-2xl font-bold mb-2">健康与医学</h2><p class="mb-4">在神经信号分析、医学影像与健康监测中推进算法落地。</p><div class="flex flex-wrap gap-2 text-xs"><span class="badge">EEG</span><span class="badge">Medical AI</span><span class="badge">Monitoring</span></div></article>
+        <article class="card-core p-6"><p class="title-en text-sm mb-2">Engineering</p><h2 class="text-2xl font-bold mb-2">工程系统</h2><p class="mb-4">强调端到端工程化能力，包括数据管线、部署、评测与迭代。</p><div class="flex flex-wrap gap-2 text-xs"><span class="badge">MLOps</span><span class="badge">Deployment</span><span class="badge">Hardware</span></div></article>
+        <article class="card-core p-6"><p class="title-en text-sm mb-2">Finance</p><h2 class="text-2xl font-bold mb-2">金融智能</h2><p class="mb-4">研究风险识别、时序建模与知识增强决策支持。</p><div class="flex flex-wrap gap-2 text-xs"><span class="badge">Time Series</span><span class="badge">Risk</span><span class="badge">Decision</span></div></article>
+      </section>
     </main>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>