diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index 653460f..2abe636 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -349,6 +349,24 @@ export const constantRoutes = [
       name: "computeMarketCreateInstance",
       hidden: true,
       meta: { title: "创建实例", onCache: true },
+    }, {
+      path: "trainPlatform",
+      component: () => import("@/views/homePage/trainPlatform"),
+      name: "trainPlatform",
+      hidden: true,
+      meta: { title: "训推平台", onCache: true },
+    }, {
+      path: "agentStore",
+      component: () => import("@/views/homePage/agentStore"),
+      name: "agentStore",
+      hidden: true,
+      meta: { title: "智能体商店", onCache: true },
+    }, {
+      path: "agentStore/decisionCase",
+      component: () => import("@/views/homePage/agentStore/decisionCase.vue"),
+      name: "agentStoreDecisionCase",
+      hidden: true,
+      meta: { title: "投策智能体案例", onCache: true },
     }, {
       path: "detail",
       component: () => import("@/views/homePage/detail/index.vue"),
diff --git a/f/web-kboss/src/views/homePage/agentStore/agent.css b/f/web-kboss/src/views/homePage/agentStore/agent.css
new file mode 100644
index 0000000..c22774c
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/agentStore/agent.css
@@ -0,0 +1,477 @@
+.agent-store-page {
+  color: #111827;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+.agent-store-page *,
+.agent-store-page *::before,
+.agent-store-page *::after {
+  box-sizing: border-box;
+}
+
+.grid-bg {
+  width: 100vw;
+  min-height: 100vh;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  overflow: hidden;
+  background:
+    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
+    linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ede9fe 100%);
+  background-size: 50px 50px, 50px 50px, auto;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.page-shell {
+  position: relative;
+  min-height: 100vh;
+  max-width: none;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.relative {
+  position: relative;
+}
+
+.decor-circle {
+  position: absolute;
+  z-index: 0;
+  border-radius: 50%;
+  filter: blur(80px);
+  pointer-events: none;
+}
+
+.decor-circle--blue {
+  top: 5%;
+  left: -10%;
+  width: 800px;
+  height: 800px;
+  background: rgba(59, 130, 246, 0.16);
+}
+
+.decor-circle--purple {
+  top: 40%;
+  right: -8%;
+  width: 700px;
+  height: 700px;
+  background: rgba(139, 92, 246, 0.16);
+}
+
+.decor-circle--green {
+  bottom: 10%;
+  left: 20%;
+  width: 600px;
+  height: 600px;
+  background: rgba(16, 185, 129, 0.12);
+}
+
+.hero-section {
+  position: relative;
+  z-index: 1;
+  padding: 80px 24px;
+  overflow: hidden;
+  text-align: center;
+}
+
+.hero-section--compact {
+  padding: 80px 24px;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  width: min(100%, 920px);
+  margin: 0 auto;
+}
+
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  margin-bottom: 24px;
+  color: #1d4ed8;
+  font-size: 14px;
+  font-weight: 650;
+  background: #dbeafe;
+  border-radius: 9999px;
+}
+
+.icon-svg--xs {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-svg--sm {
+  width: 24px;
+  height: 24px;
+}
+
+.icon-svg {
+  width: 32px;
+  height: 32px;
+  color: #fff;
+}
+
+.hero-title {
+  margin: 0 0 24px;
+  font-size: clamp(44px, 5vw, 68px);
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.hero-description {
+  max-width: 760px;
+  margin: 0 auto 36px;
+  color: #4b5563;
+  font-size: 18px;
+  line-height: 1.85;
+}
+
+.hero-blur {
+  position: absolute;
+  z-index: 1;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.hero-blur--blue {
+  top: -80px;
+  right: -60px;
+  width: 300px;
+  height: 300px;
+  background: rgba(59, 130, 246, 0.3);
+}
+
+.hero-blur--indigo {
+  bottom: -60px;
+  left: -40px;
+  width: 250px;
+  height: 250px;
+  background: rgba(99, 102, 241, 0.25);
+}
+
+.floating {
+  animation: float 6s ease-in-out infinite;
+}
+
+.page-section {
+  position: relative;
+  z-index: 2;
+  padding: 64px 24px;
+}
+
+.page-section--apps {
+  padding: 48px 24px;
+}
+
+.section-inner {
+  width: min(100%, 1280px);
+  margin: 0 auto;
+}
+
+.tabs-primary,
+.tabs-secondary {
+  display: flex;
+  justify-content: center;
+}
+
+.tabs-primary {
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.tabs-secondary {
+  gap: 10px;
+  margin-bottom: 40px;
+}
+
+.tab-button {
+  min-height: 40px;
+  padding: 10px 24px;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  background: none;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tabs-primary .tab-button:not(.is-main-active):hover,
+.tabs-secondary .tab-button:not(.is-sub-active):hover {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.tabs-secondary .tab-button:not(.is-sub-active) {
+  color: #4b5563;
+}
+
+.tab-button.is-main-active,
+.tab-button.is-sub-active {
+  color: #fff;
+  background: #2563eb;
+}
+
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px;
+}
+
+.app-card {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  padding: 32px;
+  background: #fff;
+  border-radius: 24px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.app-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
+}
+
+.app-card__decor {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 160px;
+  height: 160px;
+  pointer-events: none;
+  border-radius: 999px;
+  opacity: 0.6;
+  transform: translate(25%, -50%);
+}
+
+.app-card__body {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.app-card__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.app-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  color: #fff;
+  border-radius: 16px;
+}
+
+.app-card__header h3 {
+  margin: 0;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.app-card__body p {
+  margin: 0 0 24px;
+  color: #4b5563;
+  font-size: 16px;
+  line-height: 1.625;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.feature-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  color: #1d4ed8;
+  font-size: 14px;
+  background: rgba(37, 99, 235, 0.1);
+  border: 1px solid rgba(37, 99, 235, 0.2);
+  border-radius: 9999px;
+}
+
+.use-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #fff;
+  font-weight: 600;
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
+  transition: all 0.3s;
+}
+
+.use-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
+}
+
+.use-btn--sm {
+  margin-left: auto;
+  padding: 8px 24px;
+  font-size: 14px;
+  border-radius: 12px;
+}
+
+.btn-primary {
+  min-height: 46px;
+  padding: 12px 32px;
+  font-size: 18px;
+  border-radius: 12px;
+}
+
+.cta-panel {
+  padding: 40px 32px;
+  text-align: center;
+  background: #fff;
+  border-radius: 24px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.cta-panel__title {
+  margin: 0 0 16px;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.cta-panel__desc {
+  margin: 0 0 24px;
+  color: #4b5563;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.decor-gradient-blue {
+  background: linear-gradient(to bottom right, #dbeafe, #eff6ff);
+}
+
+.icon-gradient-blue {
+  background: linear-gradient(to bottom right, #3b82f6, #2563eb);
+}
+
+.decor-gradient-green {
+  background: linear-gradient(to bottom right, #dcfce7, #f0fdf4);
+}
+
+.icon-gradient-green {
+  background: linear-gradient(to bottom right, #22c55e, #16a34a);
+}
+
+.decor-gradient-indigo {
+  background: linear-gradient(to bottom right, #e0e7ff, #eef2ff);
+}
+
+.icon-gradient-indigo {
+  background: linear-gradient(to bottom right, #6366f1, #4f46e5);
+}
+
+.decor-gradient-amber {
+  background: linear-gradient(to bottom right, #fef3c7, #fffbeb);
+}
+
+.icon-gradient-amber {
+  background: linear-gradient(to bottom right, #f59e0b, #d97706);
+}
+
+.decor-gradient-purple {
+  background: linear-gradient(to bottom right, #f3e8ff, #faf5ff);
+}
+
+.icon-gradient-purple {
+  background: linear-gradient(to bottom right, #a855f7, #9333ea);
+}
+
+@keyframes floating {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.floating {
+  animation: floating 3s ease-in-out infinite;
+}
+
+@media (max-width: 1100px) {
+  .app-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .hero-section,
+  .hero-section--compact {
+    padding: 48px 18px;
+  }
+
+  .hero-title {
+    font-size: 38px;
+  }
+
+  .hero-description {
+    font-size: 15px;
+    line-height: 1.75;
+  }
+
+  .page-section {
+    padding: 52px 18px;
+  }
+
+  .app-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .app-card {
+    min-height: auto;
+    padding: 24px;
+    border-radius: 24px;
+  }
+
+  .app-card__header {
+    align-items: flex-start;
+  }
+
+  .cta-panel {
+    padding: 34px 22px;
+  }
+}
diff --git a/f/web-kboss/src/views/homePage/agentStore/decisionCase.vue b/f/web-kboss/src/views/homePage/agentStore/decisionCase.vue
new file mode 100644
index 0000000..725b133
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/agentStore/decisionCase.vue
@@ -0,0 +1,760 @@
+<template>
+  <div class="decision-case-page" :class="{ 'has-fixed-tabs': isTabsFixed }">
+    <div class="decor decor--blue"></div>
+    <div class="decor decor--purple"></div>
+    <div class="decor decor--deep-blue"></div>
+    <div class="decor decor--deep-purple"></div>
+
+    <section class="case-hero">
+      <img class="case-hero__bg" :src="bannerImg" alt="">
+      <div class="case-container">
+        <div class="case-hero__content">
+          <h1>投策智能体</h1>
+          <p>
+            面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告。帮助企业快速梳理核心信息，预判市场走向，辅助降低决策偏差，提升投资方案的科学性与可行性。
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section ref="caseTabs" class="case-tabs" :class="{ 'is-fixed': isTabsFixed }">
+      <div class="case-container">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          type="button"
+          class="tab-item"
+          :class="{ 'tab-active': activeTab === tab.id }"
+          @click="scrollToSection(tab.id)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </section>
+
+    <main class="case-main">
+      <section id="scenarios" class="case-section">
+        <div class="case-container">
+          <div class="section-heading">
+            <h2>应用场景</h2>
+            <p>覆盖企业投资决策全链路</p>
+          </div>
+          <div class="scenario-grid">
+            <article v-for="item in scenarios" :key="item.title" class="feature-card">
+              <div class="feature-card__head">
+                <div class="icon-gradient">
+                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
+                  </svg>
+                </div>
+                <h3>{{ item.title }}</h3>
+              </div>
+              <p>{{ item.desc }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section id="solution" class="case-section">
+        <div class="case-container">
+          <div class="section-heading">
+            <h2>企业决策的困境与解决方案</h2>
+            <p>聚焦数据收集、研报撰写、知识管理、智能应用四大维度</p>
+          </div>
+          <div class="solution-grid">
+            <article class="problem-card">
+              <h3>
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                困境：数据丰富，洞察贫乏
+              </h3>
+              <div class="list-block">
+                <div v-for="item in problems" :key="item.title" class="list-item list-item--danger">
+                  <div class="list-icon">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h4>{{ item.title }}</h4>
+                    <p>{{ item.desc }}</p>
+                  </div>
+                </div>
+              </div>
+            </article>
+
+            <article class="solution-card">
+              <h3>
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                解决方案：E决策平台核心能力
+              </h3>
+              <p class="solution-card__intro">
+                聚焦“数据收集、研报撰写、知识管理、智能应用”四大维度，帮助企业构建专属知识体系，赋能科学决策。
+              </p>
+              <div class="ability-list">
+                <div v-for="item in abilities" :key="item.title" class="ability-item">
+                  <div class="ability-icon icon-gradient">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h4>{{ item.title }}</h4>
+                    <p>{{ item.desc }}</p>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section id="highlights" class="case-section">
+        <div class="case-container">
+          <div class="section-heading">
+            <h2>项目亮点</h2>
+            <p>一次研究，双格式交付</p>
+          </div>
+          <div class="highlight-grid">
+            <article v-for="item in highlights" :key="item.title" class="feature-card">
+              <div class="feature-card__head">
+                <div class="icon-gradient">
+                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
+                  </svg>
+                </div>
+                <h3>{{ item.title }}</h3>
+              </div>
+              <p>{{ item.desc }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <section class="case-cta">
+      <div class="case-container case-cta__inner">
+        <h2>开始使用投策智能体</h2>
+        <p>让AI赋能您的投资决策，一次研究，双格式交付</p>
+        <button type="button" @click="handleContact">联系销售</button>
+      </div>
+    </section>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DecisionCase',
+  data() {
+    return {
+      activeTab: 'scenarios',
+      isTabsFixed: false,
+      tabsOriginTop: 0,
+      tabs: [
+        { id: 'scenarios', label: '应用场景' },
+        { id: 'solution', label: '解决方案' },
+        { id: 'highlights', label: '项目亮点' }
+      ],
+      scenarios: [
+        {
+          title: '投资可行性研究',
+          desc: '自动收集行业数据、市场趋势、政策信息，生成专业的投资可行性分析报告，辅助决策者快速评估项目价值与风险。',
+          icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
+        },
+        {
+          title: '市场调研分析',
+          desc: '整合多维度市场数据，自动分析市场规模、竞争格局、发展趋势，生成详实的市场调研报告，支撑业务决策。',
+          icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
+        },
+        {
+          title: '竞品分析',
+          desc: '自动收集竞品信息，分析产品特性、市场策略、用户反馈，生成竞品对比分析报告，帮助企业制定差异化竞争策略。',
+          icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
+        }
+      ],
+      problems: [
+        {
+          title: '数据孤岛严重',
+          desc: '数据分散在不同业务系统中、或者网站信源中，难以打通整合，阻碍全面分析与决策。',
+          icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
+        },
+        {
+          title: '知识沉淀难',
+          desc: '关键业务知识与专家经验主要存在于个人头脑中，随人员流动而流失。',
+          icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
+        },
+        {
+          title: '报告撰写耗时费力',
+          desc: '手工整理数据、制作高质量决策报告过程繁琐，效率低下，难以快速响应需求。',
+          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
+        }
+      ],
+      abilities: [
+        {
+          title: '数据收集与整合',
+          desc: '自动抓取内外部数据源，打破壁垒，统一数据口径',
+          icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
+        },
+        {
+          title: '知识管理与沉淀',
+          desc: '将非结构化文档转化为结构化知识图谱，沉淀企业核心资产',
+          icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'
+        },
+        {
+          title: '智能应用与问答',
+          desc: '支持自然语言提问，快速检索与回答，即问即得关键洞察',
+          icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
+        },
+        {
+          title: 'AI辅助研报撰写',
+          desc: '输入主题自动生成内容，支持一键导出PDF/PPT',
+          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
+        }
+      ],
+      highlights: [
+        {
+          title: '一键生成PDF研究报告',
+          desc: '在AI辅助生成研报内容后，系统支持一键导出为格式规范、内容详实的PDF研究报告，满足归档与深度阅读需求。',
+          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
+        },
+        {
+          title: '一键生成PPT演示文稿',
+          desc: '除了PDF，系统还支持一键导出为PPT演示文稿，并自动完成逻辑梳理、智能分页和专业排版，即导即用。',
+          icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
+        }
+      ],
+      bannerImg: require('./img.jpg')
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const scroller = this.getScrollContainer()
+      this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
+      scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
+      this.handlePageScroll()
+    })
+  },
+  beforeDestroy() {
+    this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
+  },
+  methods: {
+    getScrollContainer() {
+      return document.getElementById('homeOut') || window
+    },
+    getScrollOffset() {
+      const tabs = this.$el.querySelector('.case-tabs')
+      const tabsHeight = tabs ? tabs.offsetHeight : 0
+      return tabsHeight + 12
+    },
+    getElementTopInScroller(element, scroller) {
+      if (scroller === window) {
+        return element.getBoundingClientRect().top + window.pageYOffset
+      }
+      return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
+    },
+    getScrollerTop(scroller) {
+      return scroller === window ? window.pageYOffset : scroller.scrollTop
+    },
+    scrollToSection(sectionName) {
+      this.activeTab = sectionName
+      const element = this.$el.querySelector(`#${sectionName}`)
+      if (element) {
+        const scroller = this.getScrollContainer()
+        const offset = this.getScrollOffset()
+        const top = this.getElementTopInScroller(element, scroller) - offset
+        scroller.scrollTo({ top, behavior: 'smooth' })
+      }
+    },
+    handlePageScroll() {
+      const scroller = this.getScrollContainer()
+      const scrollerTop = this.getScrollerTop(scroller)
+      this.isTabsFixed = scrollerTop >= this.tabsOriginTop
+      const offsetTop = scrollerTop + this.getScrollOffset() + 24
+      const currentTab = this.tabs
+        .map(tab => {
+          const element = this.$el.querySelector(`#${tab.id}`)
+          return element ? { id: tab.id, top: this.getElementTopInScroller(element, scroller) } : null
+        })
+        .filter(Boolean)
+        .reverse()
+        .find(tab => offsetTop >= tab.top)
+
+      if (currentTab) {
+        this.activeTab = currentTab.id
+      }
+    },
+    handleContact() {
+      this.$message.info('感谢您的关注，我们将尽快与您联系')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.decision-case-page {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  overflow: visible;
+  color: #111827;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.decision-case-page *,
+.decision-case-page *::before,
+.decision-case-page *::after {
+  box-sizing: border-box;
+}
+
+.case-container {
+  width: min(100%, 1280px);
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.decor {
+  position: absolute;
+  border-radius: 999px;
+  filter: blur(64px);
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.decor--blue {
+  top: 80px;
+  left: 40px;
+  width: 256px;
+  height: 256px;
+  background: linear-gradient(135deg, #60a5fa, #a855f7);
+}
+
+.decor--purple {
+  top: 384px;
+  right: 80px;
+  width: 320px;
+  height: 320px;
+  background: linear-gradient(135deg, #c084fc, #3b82f6);
+}
+
+.decor--deep-blue {
+  top: 1200px;
+  left: 25%;
+  width: 288px;
+  height: 288px;
+  background: linear-gradient(135deg, #3b82f6, #9333ea);
+}
+
+.decor--deep-purple {
+  top: 2000px;
+  right: 33%;
+  width: 384px;
+  height: 384px;
+  background: linear-gradient(135deg, #a855f7, #2563eb);
+}
+
+.case-hero {
+  position: relative;
+  height: min(446px, calc(100vw * 446 / 1551));
+  min-height: 260px;
+  padding: 0;
+  overflow: hidden;
+  background: #f8fafc;
+}
+
+.case-hero__bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
+
+.case-hero__content {
+  position: relative;
+  z-index: 1;
+  max-width: 672px;
+  padding-top: clamp(46px, 5.2vw, 82px);
+}
+
+.case-hero h1 {
+  margin: 0 0 24px;
+  color: #111827;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.case-hero p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 20px;
+  line-height: 1.625;
+}
+
+.case-tabs {
+  position: sticky;
+  top: 0;
+  z-index: 80;
+  background: #fff;
+  height: 60px;
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+}
+
+.case-tabs.is-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+.decision-case-page.has-fixed-tabs .case-main {
+  padding-top: 60px;
+}
+
+.case-tabs .case-container {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  height: 100%;
+}
+
+.tab-item {
+  height: 100%;
+  padding: 12px 16px;
+  color: #374151;
+  font-weight: 500;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tab-item:hover,
+.tab-active {
+  color: #3b82f6;
+  background: #eff6ff;
+}
+
+.case-main {
+  padding-bottom: 80px;
+}
+
+.case-section {
+  position: relative;
+  padding: 64px 0;
+}
+
+.section-heading {
+  margin-bottom: 48px;
+  text-align: center;
+}
+
+.section-heading h2 {
+  margin: 0 0 16px;
+  color: #111827;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.section-heading p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 20px;
+}
+
+.scenario-grid,
+.solution-grid,
+.highlight-grid {
+  display: grid;
+  gap: 32px;
+}
+
+.scenario-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.solution-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.highlight-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.feature-card,
+.problem-card,
+.solution-card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card {
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card__head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.feature-card h3 {
+  margin: 0;
+  color: #111827;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.highlight-grid .feature-card h3 {
+  font-size: 24px;
+}
+
+.feature-card p {
+  margin: 0;
+  color: #4b5563;
+  line-height: 1.625;
+}
+
+.icon-gradient {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  color: #fff;
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  border-radius: 12px;
+}
+
+.icon-gradient svg {
+  width: 20px;
+  height: 20px;
+}
+
+.problem-card,
+.solution-card {
+  padding: 32px;
+  border-left: 4px solid;
+}
+
+.problem-card {
+  border-left-color: #ef4444;
+}
+
+.solution-card {
+  border-left-color: #3b82f6;
+}
+
+.problem-card h3,
+.solution-card h3 {
+  display: flex;
+  align-items: center;
+  margin: 0 0 24px;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.problem-card h3 {
+  color: #dc2626;
+}
+
+.solution-card h3 {
+  color: #2563eb;
+}
+
+.problem-card h3 svg,
+.solution-card h3 svg {
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+}
+
+.list-block {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.list-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.list-icon,
+.ability-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  border-radius: 8px;
+}
+
+.list-icon {
+  width: 48px;
+  height: 48px;
+  color: #dc2626;
+  background: #fee2e2;
+}
+
+.list-icon svg,
+.ability-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.list-item h4,
+.ability-item h4 {
+  margin: 0 0 8px;
+  color: #111827;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.list-item p,
+.ability-item p,
+.solution-card__intro {
+  margin: 0;
+  color: #4b5563;
+  line-height: 1.6;
+}
+
+.solution-card__intro {
+  margin-bottom: 24px;
+}
+
+.ability-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ability-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #eff6ff;
+  border-radius: 8px;
+}
+
+.ability-icon {
+  width: 40px;
+  height: 40px;
+}
+
+.ability-item p {
+  font-size: 14px;
+}
+
+.case-cta {
+  padding: 80px 0;
+  color: #fff;
+  background  : linear-gradient(90deg, #334155, #1e293b);
+  /* background: #fff; */
+}
+
+.case-cta__inner {
+  max-width: 896px;
+  text-align: center;
+}
+
+.case-cta h2 {
+  margin: 0 0 24px;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.case-cta p {
+  margin: 0 0 32px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 20px;
+}
+
+.case-cta button {
+  padding: 16px 32px;
+  color: #2563eb;
+  font-size: 18px;
+  font-weight: 700;
+  background: #fff;
+  border: 0;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.case-cta button:hover {
+  background: #eff6ff;
+}
+
+@media (max-width: 1024px) {
+  .solution-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .case-hero {
+    min-height: auto;
+    padding: 64px 0;
+  }
+
+  .case-hero__content {
+    padding-top: 24px;
+  }
+
+  .case-hero h1 {
+    font-size: 36px;
+  }
+
+  .case-hero p,
+  .section-heading p,
+  .case-cta p {
+    font-size: 16px;
+  }
+
+  .case-tabs {
+    top: 0;
+    overflow-x: auto;
+  }
+
+  .case-tabs .case-container {
+    gap: 12px;
+    min-width: max-content;
+  }
+
+  .section-heading h2,
+  .case-cta h2 {
+    font-size: 30px;
+  }
+
+  .scenario-grid,
+  .highlight-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .feature-card,
+  .problem-card,
+  .solution-card {
+    padding: 24px;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/agentStore/img.jpg b/f/web-kboss/src/views/homePage/agentStore/img.jpg
new file mode 100644
index 0000000..a7732d3
Binary files /dev/null and b/f/web-kboss/src/views/homePage/agentStore/img.jpg differ
diff --git a/f/web-kboss/src/views/homePage/agentStore/index.vue b/f/web-kboss/src/views/homePage/agentStore/index.vue
new file mode 100644
index 0000000..e2f79c9
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/agentStore/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="agent-store-page">
+    <div class="grid-bg min-h-screen">
+      <main>
+        <div class="page-shell relative">
+          <div class="decor-circle decor-circle--blue"></div>
+          <div class="decor-circle decor-circle--purple"></div>
+          <div class="decor-circle decor-circle--green"></div>
+
+          <section class="hero-section hero-section--compact">
+            <div class="hero-content">
+              <div class="hero-eyebrow">
+                <svg class="icon-svg--xs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                即开即用
+              </div>
+              <h1 class="hero-title">
+                <span class="gradient-text">智能体商店</span>
+              </h1>
+              <p class="hero-description">
+                覆盖招投标、合同审查、能源监控、工业质检等多行业场景，即开即用的AI智能体服务
+              </p>
+            </div>
+            <div class="hero-blur hero-blur--blue floating"></div>
+            <div class="hero-blur hero-blur--indigo hero-blur--indigo-delay floating"></div>
+          </section>
+
+          <section class="page-section page-section--apps">
+            <div class="section-inner">
+              <div class="tabs-primary">
+                <button type="button" class="tab-button" :class="{ 'is-main-active': activeMainTab === 'general' }" @click="setMainTab('general')">
+                  通用应用
+                </button>
+                <button type="button" class="tab-button" :class="{ 'is-main-active': activeMainTab === 'industry' }" @click="setMainTab('industry')">
+                  行业应用
+                </button>
+              </div>
+
+              <div class="tabs-secondary">
+                <button
+                  v-for="tab in visibleSubTabs"
+                  :key="tab.id"
+                  type="button"
+                  class="tab-button"
+                  :class="{ 'is-sub-active': activeSubTab === tab.id }"
+                  @click="activeSubTab = tab.id"
+                >
+                  {{ tab.label }}
+                </button>
+              </div>
+
+              <div class="app-grid">
+                <div v-for="app in filteredApps" :key="app.id" class="app-card card-hover">
+                  <div class="app-card__decor" :class="app.decorClass"></div>
+                  <div class="app-card__body">
+                    <div class="app-card__header">
+                      <div class="app-icon" :class="app.iconClass">
+                        <svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="app.iconPath" />
+                        </svg>
+                      </div>
+                      <h3>{{ app.name }}</h3>
+                    </div>
+                    <p>{{ app.description }}</p>
+                    <div class="tag-list">
+                      <span v-for="tag in app.tags" :key="tag" class="feature-tag">{{ tag }}</span>
+                      <button type="button" class="use-btn use-btn--sm" @click="handleUse(app)">
+                        {{ app.casePath ? '查看案例' : '立即使用' }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="page-section">
+            <div class="section-inner">
+              <div class="cta-panel">
+                <h2 class="cta-panel__title">需要定制智能体？</h2>
+                <p class="cta-panel__desc">告诉我们您的业务场景，我们将为您打造专属的AI智能体解决方案</p>
+                <button type="button" class="use-btn btn-primary" @click="handleContact">
+                  联系我们
+                  <svg class="icon-svg--sm" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentStore',
+  data() {
+    return { 
+      activeMainTab: 'general',
+      activeSubTab: 'all',
+      generalSubTabs: [
+        { id: 'all', label: '全部' },
+        { id: 'bidding', label: '招投标' },
+        { id: 'office', label: '办公' }
+      ],
+      industrySubTabs: [
+        { id: 'all', label: '全部' },
+        { id: 'energy', label: '能源' },
+        { id: 'quality', label: '质检' }
+      ],
+      apps: [
+        { id: 1, name: 'E招标', description: '全流程电子化招标交易核心工具，支持多品类招标业务线上开展，实现招投标全过程无纸化运行。搭载多CA互认、在线清标、电子保函等实用功能，保障招标合规高效。', tags: ['多CA互认', '在线清标', '电子保函'], category: 'general', subCategory: 'bidding', iconPath: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
+        { id: 2, name: 'E投标', description: '适配全品类电子招投标场景的线上投标工具，支持在线完成信息注册、标书获取、文件编制、加密提交全流程操作。实时同步招标变更与澄清信息，保障投标过程安全可追溯。', tags: ['在线签章', '加密提交', '变更同步'], category: 'general', subCategory: 'bidding', iconPath: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green' },
+        { id: 3, name: 'E评标', description: '智能化线上评审系统，覆盖专家签到、清标比对、符合性评审、打分汇总、报告生成全流程。支持标书交叉比对、废标在线操作与澄清收发，提升评标效率与规范性。', tags: ['专家云签', '交叉比对', '智能打分'], category: 'general', subCategory: 'bidding', iconPath: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', decorClass: 'decor-gradient-indigo', iconClass: 'icon-gradient-indigo' },
+        { id: 4, name: '合同智能审查', description: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。', tags: ['风险识别', '批量审查', '审查报告'], category: 'general', subCategory: 'office', iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', decorClass: 'decor-gradient-amber', iconClass: 'icon-gradient-amber' },
+        { id: 5, name: '投策智能体', description: '面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告，提升投资方案科学性。', tags: ['场景模拟', '可视化报告', '风险预判'], category: 'general', subCategory: 'office', iconPath: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', decorClass: 'decor-gradient-purple', iconClass: 'icon-gradient-purple', casePath: '/homePage/agentStore/decisionCase' },
+        { id: 6, name: '能源监控智能体', description: '面向工业能源管理场景，实时采集能耗数据，AI分析异常用能并给出优化建议，助力企业节能降耗。', tags: ['能耗分析', '异常预警', '优化建议'], category: 'industry', subCategory: 'energy', iconPath: 'M13 10V3L4 14h7v7l9-11h-7z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
+        { id: 7, name: '质检视觉检测', description: '基于深度学习的工业视觉质检方案，可快速识别产品表面缺陷、尺寸偏差，实时输出检测报告，提升产线良率。', tags: ['缺陷检测', '实时报告', '深度学习'], category: 'industry', subCategory: 'quality', iconPath: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green' }
+      ]
+    }
+  },
+  computed: {
+    visibleSubTabs() {
+      return this.activeMainTab === 'general' ? this.generalSubTabs : this.industrySubTabs
+    },
+    filteredApps() {
+      let result = this.apps
+      result = result.filter(app => app.category === this.activeMainTab)
+      if (this.activeSubTab !== 'all') {
+        result = result.filter(app => app.subCategory === this.activeSubTab)
+      }
+      return result
+    }
+  },
+  methods: {
+    setMainTab(tab) {
+      this.activeMainTab = tab
+      this.activeSubTab = 'all'
+    },
+    handleUse(app) {
+      if (app.casePath) {
+        this.$router.push(app.casePath)
+        return
+      }
+      this.$message.info(`即将使用智能体：${app.name}`)
+    },
+    handleContact() {
+      this.$message.info('感谢您的关注，我们将尽快与您联系')
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import './agent.css';
+</style>
diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue
index b034e7d..208aefb 100644
--- a/f/web-kboss/src/views/homePage/components/topBox/index.vue
+++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue
@@ -26,9 +26,9 @@
             <p class="nav-hover" :class="{ active: $route.path.includes('/computeMarket') }" @click="$router.push('/homePage/computeMarket')">算力市场</p>
             <p class="nav-hover" :class="{ active: isActiveTokenMarket }" @click="handleModelSquareClick">token市集</p>
             <!-- 训推平台 -->
-            <p class="nav-hover" @click="goTrainPlatform">训推平台</p>
+            <p class="nav-hover" :class="{ active: $route.path.includes('/trainPlatform') }" @click="goTrainPlatform">训推平台</p>
             <!-- 智能体商店 -->
-            <p class="nav-hover" @click="goAgentStore">智能体商店</p>
+            <p class="nav-hover" :class="{ active: $route.path.includes('/agentStore') }" @click="goAgentStore">智能体商店</p>
             <p class="nav-hover" @click="goYuanjing">元境</p>
             <!-- 供需广场 -->
             <p :class="{ active: $route.path.includes('/supply') }">
@@ -419,12 +419,12 @@ export default Vue.extend({
 
     // 跳转训推平台
     goTrainPlatform() {
-      window.open('http://101.200.145.167:8923/', '_blank')
+      this.$router.push('/homePage/trainPlatform')
     },
 
     // 跳转智能体商店
     goAgentStore() {
-      window.open('http://101.200.145.167:8923/compute-apps', '_blank')
+      this.$router.push('/homePage/agentStore')
     },
 
     // 跳转元境
diff --git a/f/web-kboss/src/views/homePage/trainPlatform/index.vue b/f/web-kboss/src/views/homePage/trainPlatform/index.vue
new file mode 100644
index 0000000..b2650eb
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/trainPlatform/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="train-page">
+    <div class="grid-bg min-h-screen">
+      <main>
+        <div class="page-shell">
+          <section class="hero-section">
+            <div class="hero-content">
+              <div class="hero-eyebrow animate-fade-in-up">
+                <svg class="icon-svg--xs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                </svg>
+                全新 AI 开发体验
+              </div>
+              <h1 class="hero-title animate-fade-in-up animate-delay-100">
+                <span class="gradient-text">训推平台</span><br>
+                <span class="hero-title__sub">AI模型全流程开发</span>
+              </h1>
+              <p class="hero-description animate-fade-in-up animate-delay-200">
+                一站式云端AI开发平台，通过对话即可快速构建智能体、工作流、网页与移动应用，依托强大的云端基础设施实现开箱即用的环境和一键部署服务
+              </p>
+              <div class="hero-actions animate-fade-in-up animate-delay-300">
+                <button type="button" class="use-btn btn-primary" @click="handleStart">开始使用</button>
+                <button type="button" class="btn-secondary" @click="handleVisit">访问平台</button>
+              </div>
+            </div>
+            <div class="hero-blur hero-blur--blue floating"></div>
+            <div class="hero-blur hero-blur--indigo hero-blur--indigo-delay floating"></div>
+          </section>
+
+          <section id="features" class="page-section page-section--soft">
+            <div class="section-inner section-inner--wide">
+              <div class="section-heading">
+                <h2>全链路AI开发能力</h2>
+                <p>覆盖从数据处理到模型部署的全流程，一站式解决AI开发需求</p>
+              </div>
+              <div class="feature-grid">
+                <div v-for="feature in features" :key="feature.title" class="feature-card card-hover">
+                  <div class="feature-card__decor" :class="feature.decorClass"></div>
+                  <div class="feature-card__body">
+                    <div class="feature-icon" :class="feature.iconClass">
+                      <svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="feature.iconPath" />
+                      </svg>
+                    </div>
+                    <h3>{{ feature.title }}</h3>
+                    <p>{{ feature.desc }}</p>
+                    <div class="tag-list">
+                      <span v-for="tag in feature.tags" :key="tag" class="feature-tag">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="page-section">
+            <div class="section-inner">
+              <div class="section-heading">
+                <h2>一站式开发流程</h2>
+                <p>从想法到产品上线，全流程无缝衔接</p>
+              </div>
+              <div class="workflow-list">
+                <div v-for="(step, index) in workflowSteps" :key="step.title" class="workflow-step" :class="{ 'step-line': index < workflowSteps.length - 1 }">
+                  <div class="step-num" :class="step.done ? 'step-num--done' : step.iconClass">
+                    <svg v-if="step.done" class="icon-svg--sm" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                    <span v-else>{{ index + 1 }}</span>
+                  </div>
+                  <div class="workflow-step__card" :class="{ 'workflow-step__card--final': step.done }">
+                    <h3 class="workflow-step__title">{{ step.title }}</h3>
+                    <p class="workflow-step__desc">{{ step.desc }}</p>
+                    <div v-if="!step.done" class="workflow-step__meta">
+                      <span class="workflow-step__meta-label">预计时间：</span>
+                      <span class="workflow-step__meta-value">{{ step.time }}</span>
+                    </div>
+                    <div v-else class="workflow-step__status">
+                      <svg class="icon-svg--xs" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                      </svg>
+                      已上线运营
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="page-section page-section--soft">
+            <div class="section-inner section-inner--wide">
+              <div class="stats-grid">
+                <div v-for="stat in stats" :key="stat.label" class="stat-card card-hover">
+                  <div class="stat-card__value gradient-text">{{ stat.value }}</div>
+                  <div class="stat-card__label">{{ stat.label }}</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="page-section">
+            <div class="section-inner cta-panel">
+              <h2 class="cta-panel__title cta-panel__title--lg">告别部署烦恼</h2>
+              <p class="cta-panel__desc cta-panel__desc--lg">
+                无论你是零基础小白还是资深开发者，训推平台都能帮你实现从想法到产品上线的丝滑体验
+              </p>
+              <div class="hero-actions">
+                <button type="button" class="use-btn btn-primary" @click="handleLearnMore">了解更多</button>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TrainPlatform',
+  data() {
+    return {
+      features: [
+        { title: '数据处理', desc: '支持数据清洗、标注、增强、数据集格式转换，提供海量数据集预处理能力，让数据准备更高效', tags: ['数据清洗', '智能标注', '数据增强'], iconClass: 'icon-gradient-blue', decorClass: 'decor-gradient-blue', iconPath: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4' },
+        { title: '预训练', desc: '支持7B-200B参数规模的Dense/MoE模型分布式预训练、支持断点续训、支持训练可观测性。', tags: ['DeepSpeed', '多卡训练', '分布式'], iconClass: 'icon-gradient-indigo', decorClass: 'decor-gradient-indigo', iconPath: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
+        { title: '后训练', desc: '支持模型微调、强化学习等后训练操作，低成本高效适配业务场景。', tags: ['LoRA', 'QLoRA', 'Prefix Tuning'], iconClass: 'icon-gradient-purple', decorClass: 'decor-gradient-purple', iconPath: 'M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' },
+        { title: '量化压缩', desc: '支持FP8、INT8、FP4量化压缩技术，高效推理服务。', tags: ['INT4', 'INT8', 'GPTQ'], iconClass: 'icon-gradient-cyan', decorClass: 'decor-gradient-cyan', iconPath: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' },
+        { title: '推理部署', desc: '一键部署高性能分布式推理服务、支持PD分离、推测解码、KV缓存等先进推理优化技术', tags: ['vLLM', 'TGI', 'SGLang'], iconClass: 'icon-gradient-green', decorClass: 'decor-gradient-green', iconPath: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
+        { title: '智能体开发', desc: '可视化工作流编排、多智能体交互、丰富的工具集成、深度匹配业务应用', tags: ['工作流', '工具集成', '记忆能力'], iconClass: 'icon-gradient-amber', decorClass: 'decor-gradient-amber', iconPath: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' }
+      ],
+      workflowSteps: [
+        { title: '数据准备', desc: '上传原始数据，使用平台提供的清洗、标注、增强工具进行处理', time: '10-30分钟', iconClass: 'icon-gradient-blue' },
+        { title: '模型训练/微调', desc: '选择基础模型和训练策略，一键启动训练任务，实时监控进度', time: '1-24小时', iconClass: 'icon-gradient-indigo' },
+        { title: '量化优化', desc: '对训练好的模型进行量化压缩，降低部署成本，提升推理速度', time: '30分钟-2小时', iconClass: 'icon-gradient-purple' },
+        { title: '一键部署', desc: '选择推理引擎和配置参数，自动完成服务部署，获取API接口', time: '5-15分钟', iconClass: 'icon-gradient-cyan' },
+        { title: '服务上线', desc: '服务自动弹性扩缩容，实时监控指标，一站式运维管理', done: true }
+      ],
+      stats: [
+        { value: '1.2TB', label: '日处理数据量' },
+        { value: '99.8%', label: '服务可用性' },
+        { value: '2.3x', label: '推理加速' },
+        { value: '75%', label: '存储节省' }
+      ]
+    }
+  },
+  methods: {
+    handleStart() {
+      this.$message.info('开始使用训推平台')
+    },
+    handleVisit() {
+      this.$message.info('访问平台')
+    },
+    handleLearnMore() {
+      this.$message.info('了解更多')
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import './train.css';
+</style>
diff --git a/f/web-kboss/src/views/homePage/trainPlatform/train.css b/f/web-kboss/src/views/homePage/trainPlatform/train.css
new file mode 100644
index 0000000..8fa9b37
--- /dev/null
+++ b/f/web-kboss/src/views/homePage/trainPlatform/train.css
@@ -0,0 +1,622 @@
+.train-page {
+  color: #111827;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  line-height: 1.5;
+}
+
+.train-page *,
+.train-page *::before,
+.train-page *::after {
+  box-sizing: border-box;
+}
+
+.grid-bg {
+  width: 100vw;
+  min-height: 100vh;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  overflow: hidden;
+  background:
+    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
+    linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ede9fe 100%);
+  background-size: 50px 50px, 50px 50px, auto;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.page-shell {
+  min-height: 100vh;
+  max-width: none;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.hero-section {
+  position: relative;
+  padding: 80px 24px;
+  overflow: hidden;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  width: min(100%, 920px);
+  margin: 0 auto;
+  text-align: center;
+}
+
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  margin-bottom: 24px;
+  color: #1d4ed8;
+  font-size: 14px;
+  font-weight: 650;
+  background: #dbeafe;
+  border-radius: 9999px;
+}
+
+.icon-svg--xs {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-svg--sm {
+  width: 24px;
+  height: 24px;
+}
+
+.icon-svg {
+  width: 32px;
+  height: 32px;
+  color: #fff;
+}
+
+.hero-title {
+  margin: 0 0 24px;
+  font-size: clamp(44px, 5vw, 68px);
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.hero-title__sub {
+  display: inline-block;
+  margin-top: 12px;
+  color: #374151;
+  font-size: clamp(30px, 3.6vw, 50px);
+  background: none;
+  -webkit-text-fill-color: currentColor;
+}
+
+.hero-description {
+  max-width: 760px;
+  margin: 0 auto 36px;
+  color: #4b5563;
+  font-size: 18px;
+  line-height: 1.85;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+}
+
+.btn-primary,
+.btn-secondary,
+.use-btn {
+  cursor: pointer;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.btn-primary {
+  color: #fff;
+  min-height: 46px;
+  padding: 12px 32px;
+  font-size: 18px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
+}
+
+.btn-secondary {
+  min-height: 46px;
+  padding: 12px 32px;
+  color: #2563eb;
+  font-size: 18px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.68);
+  border: 1px solid #bfdbfe;
+  border-radius: 12px;
+}
+
+.btn-secondary:hover {
+  background: #eff6ff;
+}
+
+.hero-blur {
+  position: absolute;
+  z-index: 0;
+  border-radius: 50%;
+  filter: blur(64px);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.hero-blur--blue {
+  top: 80px;
+  left: 40px;
+  width: 80px;
+  height: 80px;
+  background: #bfdbfe;
+}
+
+.hero-blur--indigo {
+  right: 80px;
+  bottom: 40px;
+  width: 128px;
+  height: 128px;
+  background: #c7d2fe;
+}
+
+.hero-blur--indigo-delay {
+  animation-delay: 1s;
+}
+
+.floating {
+  animation: floating 3s ease-in-out infinite;
+}
+
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fadeInUp 0.6s ease forwards;
+}
+
+.animate-delay-100 {
+  animation-delay: 0.1s;
+}
+
+.animate-delay-200 {
+  animation-delay: 0.2s;
+}
+
+.animate-delay-300 {
+  animation-delay: 0.3s;
+}
+
+.page-section {
+  position: relative;
+  z-index: 1;
+  padding: 64px 24px;
+}
+
+.page-section--soft {
+  padding: 64px 24px;
+  background: transparent;
+}
+
+.section-inner {
+  width: min(100%, 1280px);
+  margin: 0 auto;
+}
+
+.section-inner--wide {
+  width: min(100%, 1400px);
+}
+
+.section-heading {
+  max-width: 720px;
+  margin: 0 auto 64px;
+  text-align: center;
+}
+
+.section-heading h2 {
+  margin: 0 0 14px;
+  color: #111827;
+  font-size: clamp(30px, 3vw, 42px);
+  font-weight: 800;
+  line-height: 1.18;
+  letter-spacing: -0.03em;
+}
+
+.section-heading p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px;
+}
+
+.feature-card {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  padding: 32px;
+  background: #fff;
+  border-radius: 24px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.card-hover:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
+}
+
+.feature-card__decor {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 160px;
+  height: 160px;
+  pointer-events: none;
+  border-radius: 999px;
+  opacity: 0.6;
+  transform: translate(25%, -50%);
+}
+
+.feature-card__body {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.feature-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin-bottom: 24px;
+  color: #fff;
+  border-radius: 16px;
+}
+
+.feature-card__body h3 {
+  margin: 0 0 12px;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.feature-card__body p {
+  margin: 0 0 24px;
+  color: #4b5563;
+  font-size: 16px;
+  line-height: 1.625;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.feature-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  color: #1d4ed8;
+  font-size: 14px;
+  background: rgba(37, 99, 235, 0.1);
+  border: 1px solid rgba(37, 99, 235, 0.2);
+  border-radius: 9999px;
+}
+
+.workflow-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  max-width: 768px;
+  margin: 0 auto;
+}
+
+.workflow-step {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+.step-line {
+  position: relative;
+}
+
+.step-line::after {
+  position: absolute;
+  top: 48px;
+  left: 24px;
+  width: 2px;
+  height: calc(100% - 48px);
+  background: linear-gradient(#3b82f6, #93c5fd);
+  content: '';
+}
+
+.step-num {
+  z-index: 1;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  border-radius: 50%;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.workflow-step__card {
+  flex: 1;
+  padding: 24px;
+  background: #fff;
+  border: 1px solid #f3f4f6;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.workflow-step__card--final {
+  border-color: #dcfce7;
+}
+
+.workflow-step__title {
+  margin: 0 0 8px;
+  color: #111827;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.workflow-step__desc {
+  margin: 0 0 16px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.workflow-step__meta,
+.workflow-step__status {
+  font-size: 14px;
+}
+
+.workflow-step__meta {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.workflow-step__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #16a34a;
+  font-weight: 600;
+}
+
+.workflow-step__meta-label {
+  color: #9ca3af;
+}
+
+.workflow-step__meta-value {
+  color: #374151;
+  font-weight: 500;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px;
+  text-align: center;
+}
+
+.stat-card {
+  padding: 32px 24px;
+  background: #fff;
+  border: 1px solid #f3f4f6;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card__value {
+  margin-bottom: 8px;
+  font-size: clamp(34px, 4vw, 52px);
+  font-weight: 850;
+  line-height: 1;
+}
+
+.stat-card__label {
+  color: #6b7280;
+  font-size: 15px;
+}
+
+.cta-panel {
+  padding: 40px 32px;
+  text-align: center;
+  background: #fff;
+  border-radius: 24px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.cta-panel__title {
+  margin: 0 0 16px;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.cta-panel__desc {
+  margin: 0 0 24px;
+  color: #4b5563;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.cta-panel__title--lg {
+  margin-bottom: 24px;
+  font-size: clamp(30px, 3vw, 36px);
+}
+
+.cta-panel__desc--lg {
+  max-width: 672px;
+  margin: 0 auto 40px;
+  font-size: 18px;
+}
+
+.decor-gradient-blue,
+.decor-gradient-blue {
+  background: linear-gradient(to bottom right, #dbeafe, #eff6ff);
+}
+
+.icon-gradient-blue {
+  background: linear-gradient(to bottom right, #3b82f6, #2563eb);
+}
+
+.decor-gradient-indigo,
+.decor-gradient-indigo {
+  background: linear-gradient(to bottom right, #e0e7ff, #eef2ff);
+}
+
+.icon-gradient-indigo {
+  background: linear-gradient(to bottom right, #6366f1, #4f46e5);
+}
+
+.decor-gradient-purple,
+.decor-gradient-purple {
+  background: linear-gradient(to bottom right, #f3e8ff, #faf5ff);
+}
+
+.icon-gradient-purple {
+  background: linear-gradient(to bottom right, #a855f7, #9333ea);
+}
+
+.decor-gradient-cyan,
+.decor-gradient-cyan {
+  background: linear-gradient(to bottom right, #cffafe, #ecfeff);
+}
+
+.icon-gradient-cyan {
+  background: linear-gradient(to bottom right, #06b6d4, #0891b2);
+}
+
+.decor-gradient-green,
+.decor-gradient-green {
+  background: linear-gradient(to bottom right, #dcfce7, #f0fdf4);
+}
+
+.icon-gradient-green {
+  background: linear-gradient(to bottom right, #22c55e, #16a34a);
+}
+
+.step-num--done {
+  background: #22c55e;
+  box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3);
+}
+
+.decor-gradient-amber,
+.decor-gradient-amber {
+  background: linear-gradient(to bottom right, #fef3c7, #fffbeb);
+}
+
+.icon-gradient-amber {
+  background: linear-gradient(to bottom right, #f59e0b, #d97706);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes floating {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@media (max-width: 1100px) {
+  .feature-grid,
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .hero-section {
+    padding: 48px 18px;
+  }
+
+  .hero-title {
+    font-size: 38px;
+  }
+
+  .hero-title__sub {
+    font-size: 27px;
+  }
+
+  .hero-description {
+    font-size: 15px;
+    line-height: 1.75;
+  }
+
+  .page-section,
+  .page-section--soft {
+    padding: 52px 18px;
+  }
+
+  .feature-grid,
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .feature-card {
+    min-height: auto;
+    padding: 24px;
+    border-radius: 24px;
+  }
+
+  .cta-panel {
+    padding: 34px 22px;
+  }
+}