diff --git a/agent/application/states/conversation.py b/agent/application/states/conversation.py
index 19fa38f..89f2999 100644
--- a/agent/application/states/conversation.py
+++ b/agent/application/states/conversation.py
@@ -2,7 +2,7 @@
 """
 会话状态
 """
-from datetime import datetime
+from datetime import date as Date, datetime
 from typing import AsyncGenerator
 
 from pydantic_ai import DeferredToolRequests, DeferredToolResults, ToolApproved
@@ -388,10 +388,7 @@ class ConversationState(rx.State):
 
                 # 运行并流式输出事件
                 stream_events = run_stream_events(
-                    deps=Deps(
-                        account_id=conversation.workflow.deps["account_id"],
-                        connection_pool=connection_pool,
-                    ),
+                    user_id=self.user_id,
                     user_prompt=user_prompt,
                     message_history=message_history,
                     usage=usage,
@@ -696,10 +693,17 @@ class ConversationState(rx.State):
         match type:
             # 预定航班
             case WorkflowType.BOOK_FLIGHT:
-                from application.workshop.book_flight import deps
+                from application.workshop.book_flight import Deps
 
                 # 初始化预定航班工作流
-                workflow = Workflow(type=type, deps=deps)
+                workflow = Workflow(
+                    type=type,
+                    deps=Deps(
+                        date=Date(2025, 1, 10),
+                        origin_airport_code="SFO",
+                        destination_airport_code="ANC",
+                    ),
+                )
                 # 设置用户提示词
                 self.set_user_prompt(
                     f"帮我查询并预定在 {workflow.deps.date.strftime('%Y-%m-%d')} 从 {workflow.deps.origin_airport_code} 到 {workflow.deps.destination_airport_code} 的航班"
@@ -707,8 +711,10 @@ class ConversationState(rx.State):
 
             # 银行客户服务
             case WorkflowType.BANK_CUSTOMER_SERVICE:
+                from application.workshop.bank_customer_service import Deps
+
                 # 初始化银行客户服务工作流
-                workflow = Workflow(type=type, deps={"account_id": self.user_id})
+                workflow = Workflow(type=type)
                 # 设置用户提示词
                 self.set_user_prompt(f"帮我查询账户余额")
 
diff --git a/agent/application/workshop/bank_customer_service.py b/agent/application/workshop/bank_customer_service.py
index f055df1..afb7cb1 100644
--- a/agent/application/workshop/bank_customer_service.py
+++ b/agent/application/workshop/bank_customer_service.py
@@ -2,9 +2,8 @@
 """
 银行客户服务
 """
-from typing import Any, AsyncGenerator
+from typing import AsyncGenerator
 
-from asyncpg import Pool
 from pydantic import BaseModel, Field
 from pydantic_ai import (
     Agent,
@@ -18,6 +17,7 @@ from pydantic_ai import (
 from pydantic_ai.messages import AgentStreamEvent
 from pydantic_ai.run import AgentRunResultEvent
 
+from application.workshop.database import connection_pool
 from application.workshop.models import (
     DEEPSEEK_V4_FLASH_CHAT_MODEL,
     DEEPSEEK_V4_FLASH_CHAT_MODEL_SETTINGS,
@@ -29,48 +29,51 @@ class Deps(BaseModel):
     依赖类
     """
 
-    model_config = {"arbitrary_types_allowed": True}  # 允许任意类型
-
-    account_id: str = Field(..., description="账户唯一标识")
-    connection_pool: Pool = Field(..., description="连接池")
+    user_id: str = Field(..., description="用户唯一标识")
 
 
-# 账户上下文能力
-account_context = Capability[Deps](
-    id="account-context",
-    description="提供账户信息，用于客服应答",
-    defer_loading=False,  # 延迟加载置为否，立即加载
+# 用户上下文能力
+user_context = Capability[Deps](
+    id="user-context",
+    description="提供用户信息，用于客服应答",
+    defer_loading=False,  # 延迟加载置为否(立即加载)
 )
 
 
-@account_context.instructions
-async def query_account_name(ctx: RunContext[Deps]) -> str:
+@user_context.instructions
+async def query_user_name(ctx: RunContext[Deps]) -> str:
     """
-    查询账户户名
+    查询用户姓名
     """
-    async with ctx.deps.connection_pool.acquire() as conn:
-        account_name = await conn.fetchval(
-            "SELECT account_name FROM bank_customer_service WHERE account_id = $1",
-            ctx.deps.account_id,
+    if connection_pool is None:
+        return "数据库连接池未初始化"
+
+    async with connection_pool.acquire() as conn:
+        user_name = await conn.fetchval(
+            "SELECT user_name FROM bank_customer_service WHERE user_id = $1",
+            ctx.deps.user_id,
         )
-    if account_name is None:
-        return "该账户不存在"
-    return f"该账户户名是 {account_name!r}"
+    if user_name is None:
+        return "该用户不存在"
+    return f"用户姓名是 {user_name!r}"
 
 
-@account_context.tool(name="查询账户余额")
-async def query_account_balance(ctx: RunContext[Deps]) -> str:
+@user_context.tool(name="查询账户余额")
+async def query_balance(ctx: RunContext[Deps]) -> str:
     """
     查询账户余额
     """
-    async with ctx.deps.connection_pool.acquire() as conn:
+    if connection_pool is None:
+        return "数据库连接池未初始化"
+
+    async with connection_pool.acquire() as conn:
         account_balance = await conn.fetchval(
-            "SELECT account_balance FROM bank_customer_service WHERE account_id = $1",
-            ctx.deps.account_id,
+            "SELECT account_balance FROM bank_customer_service WHERE user_id = $1",
+            ctx.deps.user_id,
         )
     if account_balance is None:
-        return "该账户不存在"
-    return f"该账户余额： {account_balance:.2f}"
+        return "该用户不存在"
+    return f"该用户的账户余额: {account_balance:.2f}"
 
 
 # 智能体
@@ -80,7 +83,7 @@ agent = Agent[Deps, str](
     deps_type=Deps,
     output_type=str,  # 若输出类型为 str，则智能体输出结果时不进行输出类型校验。若定义输出类型，需考虑处理相应事件
     instructions="你是我方银行的客服智能体，为客户提供客服应答。",  # 优先使用 instructions
-    capabilities=[account_context],
+    capabilities=[user_context],
 )
 
 """
@@ -131,7 +134,7 @@ PartEndEvent(index=0, part=TextPart(content='您好，刘弼仁先生。您账
 
 
 async def run_stream_events(
-    deps: Any,
+    user_id: str,
     user_prompt: str | None,
     message_history: list[ModelMessage],
     usage: RunUsage,
@@ -141,17 +144,13 @@ async def run_stream_events(
     """
     运行并流式输出事件
     """
-    if not isinstance(deps, Deps):
-        deps = Deps.model_validate(deps)
-
     async with agent.run_stream_events(
         user_prompt=user_prompt,
-        deps=deps,
+        deps=Deps(user_id=user_id),
         message_history=message_history,
         usage=usage,
         usage_limits=usage_limits,
         deferred_tool_results=deferred_tool_results,
     ) as events:
         async for event in events:
-            print(event)
             yield event
diff --git a/agent/application/workshop/book_flight.py b/agent/application/workshop/book_flight.py
index 4b97939..5aa7eda 100644
--- a/agent/application/workshop/book_flight.py
+++ b/agent/application/workshop/book_flight.py
@@ -2,7 +2,7 @@
 """
 预定航班工作流（范式）
 """
-import datetime
+from datetime import date as Date
 from typing import Any, AsyncGenerator, cast
 
 from pydantic import BaseModel, Field, field_validator
@@ -39,7 +39,7 @@ class Flight(BaseModel):
     """
 
     number: str = Field(..., description="航班号")
-    date: datetime.date = Field(..., description="日期")
+    date: Date = Field(..., description="日期")
     origin_airport_code: str = Field(..., description="出发机场代码")
     destination_airport_code: str = Field(..., description="到达机场代码")
     airfare: int = Field(..., description="机票价格")
@@ -62,7 +62,7 @@ class Deps(BaseModel):
     依赖类
     """
 
-    date: datetime.date = Field(..., description="日期")
+    date: Date = Field(..., description="日期")
     origin_airport_code: str = Field(..., description="出发机场代码")
     destination_airport_code: str = Field(..., description="到达机场代码")
     searched_flights: list[Flight] | None = Field(
@@ -277,13 +277,6 @@ async def validate_output(
     return output
 
 
-deps = Deps(
-    date=datetime.date(2025, 1, 10),
-    origin_airport_code="SFO",
-    destination_airport_code="ANC",
-)
-
-
 async def run_stream_events(
     deps: Any,
     user_prompt: str | None,
diff --git a/agent/application/workshop/research.py b/agent/application/workshop/research.py
index aa486b8..d6db4ae 100644
--- a/agent/application/workshop/research.py
+++ b/agent/application/workshop/research.py
@@ -3,15 +3,27 @@
 研究
 """
 from typing import AsyncGenerator
-
+from asyncpg import Pool
 import httpx
-from pydantic import BaseModel, Field
-from pydantic_ai import Agent, ModelMessage, RunContext, RunUsage
+from pydantic import BaseModel, Field, cast
+from pydantic_ai import Agent, ModelMessage, RunContext
+from pydantic_ai.usage import RunUsage
 from pydantic_ai.messages import AgentStreamEvent
 from pydantic_ai.run import AgentRunResultEvent
 from pydantic_ai.toolsets import FunctionToolset
+from sqlmodel import REAL
 
 from application.workshop.models import DEEPSEEK_V4_FLASH_RESPONSE_MODEL
+from application.workshop.database import connection_pool
+
+
+class Deps(BaseModel):
+    """
+    依赖类
+    """
+
+    model_config = {"arbitrary_types_allowed": True}  # 允许任意类型
+    connection_pool: Pool = Field(..., description="连接池")
 
 
 class Args(BaseModel):
@@ -22,11 +34,11 @@ class Args(BaseModel):
 bocha_web_search = FunctionToolset()
 
 
-@bocha_web_search.tool_plain()  # 普通工具：不使用运行上下文
-async def web_search(args: Args) -> str:
+@bocha_web_search.tool(name="联网搜索")  # type: ignore
+async def web_search(ctx: RunContext[Deps], args: Args) -> str:
     """
     联网搜索工具：
-    用于查询互联网实时信息、新闻、政策、行业报告、企业公告、最新数据。
+    用于查询互联网实时信息、新闻、政策法规、行业报告、企业公告、最新数据。
     适合查询模型静态知识库不存在的外部网页信息。
     回答时必须标注引用来源URL，禁止编造链接。
     不要用于简单常识、数学计算、代码编写等无需联网的任务。
@@ -89,17 +101,66 @@ async def web_search(args: Args) -> str:
 
 instruction = """
 你是研究助手，可调用联网搜索工具。
-1. 事实、时效、外部资料类问题必须搜索；静态常识可直接回答，支持多次检索、改写query。
-2. 优先采用一手资料、官方权威信源，慎用自媒体与转载内容。
-3. 所有事实描述必须标注来源链接，引用格式：`[参考{序号}] {URL}`，序号匹配搜索结果编号。
-4. 严格区分：【事实】来自网页原文；【推论】基于事实推导；资料不足时标注【推测】，不可当作事实。
-5. 严禁编造链接和事实；证据不足直接说明，不要强行下结论。
-6. 组织回答：先陈列证据，再总结结论，结论不能超出资料支撑范围。
+
+## 一、联网判断
+需要联网：时效类信息、新闻、声明公告、政策法规、最新数据，以及模型静态知识库无法可靠回答的问题。
+无需联网：基础常识、数学计算、代码编写与解释、用户已提供完整材料的分析任务、无时间依赖的静态问题。
+
+【搜索硬约束】
+1. 最多**2轮联网搜索**，严禁发起第3轮；优先在第一轮构造高信息密度的Query尝试获取完整答案，非必要不执行第二轮搜索。
+2. 发起新一轮搜索前，必须评估已获取的搜索摘要，现有信息足以回答问题则立即停止调用工具。
+3. 禁止仅改写同义词、做语义几乎等价的重复搜索；若存在局部信息缺失，优先从已有结果中提取可用内容，不要直接发起新搜索。
+
+## 二、时间与Query规则
+时效判断严格以运行时传入的当前日期、年份、时区为准，禁止依靠模型内置记忆猜测时间。
+- 用户未指定年份：**禁止自行向搜索Query中追加年份**。
+- 用户明确给出年份：搜索Query必须完整保留用户指定的年份。
+
+## 三、搜索效率
+默认只执行1次真实联网搜索；拿到搜索结果后评估证据，满足以下任意条件，必须停止搜索：
+- 现有信息足以作答；官方一手资料已给出答案；多个可靠来源结论一致；继续搜索仅起到重复确认的作用。
+
+❌禁止以“再次确认、查找更多来源、补充更多资料”等理由发起额外搜索。
+
+✅仅在以下4种场景，才允许执行第2轮搜索：
+①第一轮无有效搜索结果；②回答问题必需的关键事实完全缺失；③权威信源之间事实存在明显冲突；④第一轮搜索结果严重偏题。
+
+第二轮搜索必须瞄准明确的信息缺口，禁止全盘复刻上一轮查询；**不允许单次回合同时生成多条搜索请求**。
+严格执行流程：执行搜索 → 阅读解析结果 → 判断信息缺口 → 再决定是否发起二次搜索。
+
+## 四、信源优先级
+1级（最高）：官网、官方文档、官方公告、一手原始资料
+2级：权威媒体、专业机构、科研机构
+3级：其他可信赖网页
+
+官方资料已经可以完整回答问题时，无需再搜索其他来源做重复验证。
+自媒体、论坛、转载内容，不可作为重大事实的唯一证据。
+
+## 五、最新内容校验
+查询“最新”类问题，不可仅凭网页排序判断时效性；必须核对资料的**发布时间、版本时间，结合运行时提供的当前日期综合判断**。
+当存在多份结果时，优先选用发布时间更近、信源等级更高的资料。
+
+## 六、事实规范
+- 【事实】：搜索返回资料原文直接支持的内容
+- 【推论】：基于已确认事实做合理推导
+- 【推测】：证据不足前提下的主观判断
+
+严禁编造URL、日期、新闻事件、数据、官方声明等任何信息；证据不足时直接如实说明，不得强行得出结论。
+
+## 七、引用规范
+引用编号区分搜索轮次：S1‑1、S1‑2 代表第1轮搜索结果；S2‑1、S2‑2 代表第2轮搜索结果。
+只引用回答中实际用到的资料。
+引用格式：`[参考 S1‑1] https://xxx`，链接必须来源于 **web_search** 工具返回结果，禁止编造链接。
+
+## 八、输出规则
+简单事实类问题：优先给出结论，附带关键证据与来源，回答简洁，避免冗余。
+复杂研究类问题，按「关键证据 → 分析 → 结论 → 参考来源」结构组织内容；先陈列证据再输出总结，结论不能超出现有资料可支撑的范围。
 """
 
 # 智能体
-agent = Agent(
+agent = Agent[Deps, str](
     model=DEEPSEEK_V4_FLASH_RESPONSE_MODEL,
+    deps_type=Deps,
     output_type=str,  # 若输出类型为 str，则智能体输出结果时不进行输出类型校验。若定义输出类型，需考虑处理相应事件
     instructions=instruction,
     toolsets=[bocha_web_search],
@@ -118,7 +179,11 @@ async def run_stream_events(
     :param usage: 使用量
     :return: AsyncGenerator
     """
+    if connection_pool is None:
+        return
+
     async with agent.run_stream_events(
+        deps=Deps(connection_pool=connection_pool),
         user_prompt=user_prompt,
         message_history=message_history,
         usage=usage,
diff --git a/agent/database.db b/agent/database.db
index 1a212cc..46c6af0 100644
Binary files a/agent/database.db and b/agent/database.db differ
diff --git a/玄潮官网/assets/about-bg.png b/玄潮官网/assets/about-bg.png
new file mode 100644
index 0000000..fbda654
Binary files /dev/null and b/玄潮官网/assets/about-bg.png differ
diff --git a/玄潮官网/assets/hero-bg2.png b/玄潮官网/assets/hero-bg2.png
new file mode 100644
index 0000000..5aa6707
Binary files /dev/null and b/玄潮官网/assets/hero-bg2.png differ
diff --git a/玄潮官网/assets/xuanchao-logo.png b/玄潮官网/assets/xuanchao-logo.png
new file mode 100644
index 0000000..594f4d3
Binary files /dev/null and b/玄潮官网/assets/xuanchao-logo.png differ
diff --git a/玄潮官网/css/style.css b/玄潮官网/css/style.css
new file mode 100644
index 0000000..aee0a78
--- /dev/null
+++ b/玄潮官网/css/style.css
@@ -0,0 +1,235 @@
+/* ==================== 玄潮科技 - Custom Styles ==================== */
+
+/* ----- Base ----- */
+* {
+    scroll-behavior: smooth;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+}
+
+/* ----- Hero Background Pattern ----- */
+.hero-pattern {
+    background-image:
+        linear-gradient(rgba(154, 25, 30, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(154, 25, 30, 0.03) 1px, transparent 1px);
+    background-size: 50px 50px;
+    background-position: center center;
+}
+
+.hero-pattern::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(154, 25, 30, 0.08) 1px, transparent 1px);
+    background-size: 30px 30px;
+}
+
+/* ----- Floating Animations ----- */
+@keyframes float-slow {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(30px, -30px) scale(1.05); }
+}
+
+@keyframes float-delayed {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-20px, 20px) scale(0.95); }
+}
+
+.animate-float-slow {
+    animation: float-slow 8s ease-in-out infinite;
+}
+
+.animate-float-delayed {
+    animation: float-delayed 10s ease-in-out infinite;
+    animation-delay: 2s;
+}
+
+/* ----- Scroll Indicator Bounce ----- */
+@keyframes bounce-slow {
+    0%, 100% { transform: translateY(0); opacity: 0.5; }
+    50% { transform: translateY(10px); opacity: 0.8; }
+}
+
+.animate-bounce-slow {
+    animation: bounce-slow 2s ease-in-out infinite;
+}
+
+/* ----- Reveal Animations (Scroll-triggered) ----- */
+.reveal-up,
+.reveal-left,
+.reveal-right {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.reveal-left {
+    transform: translateX(-40px);
+}
+
+.reveal-right {
+    transform: translateX(40px);
+}
+
+.reveal-up.revealed,
+.reveal-left.revealed,
+.reveal-right.revealed {
+    opacity: 1;
+    transform: translate(0, 0);
+}
+
+/* Apply reveal animation to elements that have inline animation-delay */
+.reveal-up {
+    animation: none;
+}
+
+.reveal-up[style*="animation-delay"] {
+    transition-delay: var(--reveal-delay, 0s);
+}
+
+/* ----- Nav Link Active State ----- */
+.nav-link.active {
+    color: #9a191e;
+    background-color: #fdf0ee;
+}
+
+.nav-link.active::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 2px;
+    background: #9a191e;
+    margin: 2px auto 0;
+    border-radius: 2px;
+}
+
+/* ----- Header Scroll Effect ----- */
+#header.scrolled {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* ----- Service Card Hover ----- */
+.service-card:hover {
+    transform: translateY(-4px);
+}
+
+/* ----- Advantage Card Hover ----- */
+.advantage-card:hover {
+    transform: translateY(-4px);
+}
+
+/* ----- Industry Card Hover ----- */
+.industry-card:hover {
+    transform: translateY(-3px);
+}
+
+/* ----- Stat Card Hover ----- */
+.stat-card:hover {
+    transform: translateY(-4px);
+}
+
+/* ----- Form Input Styles ----- */
+.form-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(154, 25, 30, 0.15);
+    border-color: #9a191e;
+}
+
+.form-input.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* ----- Back to Top Button ----- */
+#back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* ----- Custom Scrollbar ----- */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #94a3b8;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
+}
+
+/* ----- Selection ----- */
+::selection {
+    background: rgba(154, 25, 30, 0.2);
+    color: #171717;
+}
+
+/* ----- Mobile Menu Transition ----- */
+#mobile-menu {
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    overflow: hidden;
+}
+
+#mobile-menu.show {
+    display: block;
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ----- Gradient Text ----- */
+.text-gradient {
+    background: linear-gradient(135deg, #e53935, #9a191e);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* ----- Responsive Adjustments ----- */
+@media (max-width: 768px) {
+    .service-card,
+    .advantage-card,
+    .stat-card,
+    .industry-card {
+        transform: none;
+    }
+
+    .reveal-left,
+    .reveal-right {
+        transform: translateY(30px);
+    }
+
+    .reveal-left.revealed,
+    .reveal-right.revealed {
+        transform: translate(0, 0);
+    }
+}
+
+/* ----- Print Styles ----- */
+@media print {
+    header,
+    #back-to-top,
+    .animate-float-slow,
+    .animate-float-delayed {
+        display: none !important;
+    }
+}
diff --git a/玄潮官网/index.html b/玄潮官网/index.html
new file mode 100644
index 0000000..2830c02
--- /dev/null
+++ b/玄潮官网/index.html
@@ -0,0 +1,1257 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>玄潮科技 - 全域数据营销服务，赋能产业数智增长</title>
+    <meta
+      name="description"
+      content="玄潮科技是一家聚焦数据营销场景、数据服务、产业智能分析的数智科技企业，深耕商业数据与产业营销领域多年，为多垂直行业客户提供标准化、定制化的产业数据服务与营销增长解决方案。"
+    />
+    <meta
+      name="keywords"
+      content="玄潮科技,数据营销,产业智能分析,数智化服务,用户智能评级,精准拓新,全域营销,营销风控"
+    />
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              "xuan-dark": "#171717",
+              "xuan-darker": "#0a0a0a",
+              "xuan-primary": "#1f1f1f",
+              "xuan-accent": "#9a191e",
+              "xuan-accent-light": "#e53935",
+              "xuan-accent-dark": "#7a0f14",
+            },
+            fontFamily: {
+              sans: [
+                '"Noto Sans SC"',
+                "system-ui",
+                "-apple-system",
+                "sans-serif",
+              ],
+            },
+          },
+        },
+      };
+    </script>
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body class="font-sans bg-white text-gray-800">
+    <!-- ==================== Header / Navigation ==================== -->
+    <header
+      id="header"
+      class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md shadow-sm transition-all duration-300"
+    >
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16">
+          <!-- Logo -->
+          <a href="#home" class="flex items-center space-x-2.5 flex-shrink-0">
+            <img
+              src="assets/xuanchao-logo.png"
+              alt="玄潮科技"
+              class="w-10 h-10 object-contain"
+            />
+            <span class="text-2xl font-bold text-xuan-dark">玄潮科技</span>
+          </a>
+
+          <!-- Desktop Nav -->
+          <nav class="hidden md:flex items-center space-x-2">
+            <a
+              href="#home"
+              class="nav-link active text-xuan-dark px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
+              >首页</a
+            >
+            <a
+              href="#about"
+              class="nav-link text-gray-800 hover:text-xuan-accent px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
+              >关于我们</a
+            >
+            <a
+              href="#products"
+              class="nav-link text-gray-800 hover:text-xuan-accent px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
+              >产品服务</a
+            >
+            <a
+              href="#contact"
+              class="nav-link text-gray-800 hover:text-xuan-accent px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
+              >联系我们</a
+            >
+          </nav>
+
+          <!-- CTA Button -->
+          <a
+            href="#contact"
+            class="hidden md:inline-flex items-center bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white text-sm font-medium px-5 py-2.5 rounded-lg hover:shadow-lg hover:scale-105 transition-all duration-300"
+          >
+            立即咨询
+          </a>
+
+          <!-- Mobile Menu Button -->
+          <button
+            id="mobile-menu-btn"
+            class="md:hidden p-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors"
+            aria-label="菜单"
+          >
+            <i class="fas fa-bars text-xl"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Mobile Menu -->
+      <div
+        id="mobile-menu"
+        class="md:hidden hidden bg-white border-t border-gray-100"
+      >
+        <nav class="px-4 py-3 space-y-1">
+          <a
+            href="#home"
+            class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
+            >首页</a
+          >
+          <a
+            href="#about"
+            class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
+            >关于我们</a
+          >
+          <a
+            href="#products"
+            class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
+            >产品服务</a
+          >
+          <a
+            href="#contact"
+            class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
+            >联系我们</a
+          >
+          <a
+            href="#contact"
+            class="mobile-nav-link block py-3 px-4 bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white rounded-lg font-medium text-center"
+            >立即咨询</a
+          >
+        </nav>
+      </div>
+    </header>
+
+    <main class="flex-1 pt-16">
+      <!-- ==================== Hero / Banner ==================== -->
+      <section
+        id="home"
+        class="relative min-h-[560px] md:min-h-[640px] flex items-center justify-center overflow-hidden bg-xuan-dark py-20"
+      >
+        <!-- Background Image -->
+        <div
+          class="absolute inset-0 bg-cover bg-center"
+          style="background-image: url(&quot;assets/hero-bg2.png&quot;)"
+        ></div>
+        <!-- Dark Overlay for readability -->
+        <div
+          class="absolute inset-0 bg-gradient-to-b from-xuan-darker/70 via-xuan-dark/40 to-xuan-darker/80"
+        ></div>
+        <!-- Subtle Red Glow Orbs (keep for ambient depth) -->
+        <div
+          class="absolute top-1/4 left-1/4 w-72 h-72 bg-xuan-accent/8 rounded-full blur-3xl animate-float-slow"
+        ></div>
+        <div
+          class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-xuan-accent-dark/8 rounded-full blur-3xl animate-float-delayed"
+        ></div>
+
+        <!-- Content -->
+        <div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
+          <div
+            class="inline-flex items-center bg-white/10 backdrop-blur-sm border border-white/20 text-xuan-accent-light text-sm font-medium px-4 py-2 rounded-full mb-6 reveal-up"
+          >
+            <i class="fas fa-sparkles mr-2"></i>
+            数智营销 · 合规驱动 · 全域增长
+          </div>
+          <h1
+            class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-5 tracking-tight leading-tight reveal-up"
+            style="animation-delay: 0.1s"
+          >
+            全域数据营销服务<br />
+            <span
+              class="bg-gradient-to-r from-xuan-accent-light to-xuan-accent bg-clip-text text-transparent"
+              >赋能产业数智增长</span
+            >
+          </h1>
+          <p
+            class="text-lg md:text-xl text-gray-300 font-light mb-8 reveal-up"
+            style="animation-delay: 0.2s"
+          >
+            合规产业洞察 ｜ 智能用户分析 ｜ 全场景营销增长解决方案
+          </p>
+          <div
+            class="flex flex-col sm:flex-row items-center justify-center gap-4 reveal-up"
+            style="animation-delay: 0.3s"
+          >
+            <a
+              href="#products"
+              class="w-full sm:w-auto inline-flex items-center justify-center bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white font-medium px-8 py-3.5 rounded-lg hover:shadow-2xl hover:shadow-xuan-accent/30 hover:scale-105 transition-all duration-300"
+            >
+              了解产品服务
+              <i class="fas fa-arrow-right ml-2 text-sm"></i>
+            </a>
+            <a
+              href="#contact"
+              class="w-full sm:w-auto inline-flex items-center justify-center bg-white/10 backdrop-blur-sm border border-white/30 text-white font-medium px-8 py-3.5 rounded-lg hover:bg-white/20 transition-all duration-300"
+            >
+              <i class="fas fa-headset mr-2 text-sm"></i>
+              联系我们
+            </a>
+          </div>
+        </div>
+
+        <!-- Scroll Indicator -->
+        <a
+          href="#about"
+          class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/50 hover:text-white transition-colors animate-bounce-slow"
+        >
+          <i class="fas fa-chevron-down text-2xl"></i>
+        </a>
+      </section>
+
+      <!-- ==================== About Us ==================== -->
+      <section id="about" class="py-20 md:py-28 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <!-- Company Intro -->
+          <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
+            <div class="reveal-left">
+              <div class="relative">
+                <div
+                  class="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl border border-gray-200 bg-white relative"
+                >
+                  <!-- 已去掉背景图 -->
+                  <!-- 已去掉顶部红色方块 -->
+
+                  <div
+                    class="relative w-full h-full flex items-center justify-center p-4"
+                  >
+                    <div class="w-full h-full grid grid-cols-2 gap-4">
+                      <div
+                        class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
+                      >
+                        <i
+                          class="fas fa-database text-xuan-accent text-3xl mb-3"
+                        ></i>
+                        <div class="text-gray-800 text-sm font-semibold">
+                          数据治理
+                        </div>
+                      </div>
+
+                      <div
+                        class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
+                      >
+                        <i
+                          class="fas fa-brain text-xuan-accent text-3xl mb-3"
+                        ></i>
+                        <div class="text-gray-800 text-sm font-semibold">
+                          智能分析
+                        </div>
+                      </div>
+
+                      <div
+                        class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
+                      >
+                        <i
+                          class="fas fa-bullhorn text-xuan-accent text-3xl mb-3"
+                        ></i>
+                        <div class="text-gray-800 text-sm font-semibold">
+                          营销增长
+                        </div>
+                      </div>
+
+                      <div
+                        class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
+                      >
+                        <i
+                          class="fas fa-shield-halved text-xuan-accent text-3xl mb-3"
+                        ></i>
+                        <div class="text-gray-800 text-sm font-semibold">
+                          合规体系
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="reveal-right">
+              <span
+                class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
+                >关于玄潮</span
+              >
+              <h2
+                class="text-3xl md:text-4xl font-bold text-xuan-dark mb-6 leading-tight"
+              >
+                数智科技企业<br />深耕产业数据营销
+              </h2>
+              <p class="text-gray-600 leading-relaxed mb-5">
+                玄潮是一家聚焦<strong class="text-xuan-dark"
+                  >数据营销场景、数据服务、产业智能分析</strong
+                >的数智科技企业，深耕商业数据与产业营销领域多年，汇聚资深技术研发与产业运营团队，具备成熟的数智化服务落地能力。
+              </p>
+              <p class="text-gray-600 leading-relaxed mb-8">
+                公司立足合规数据体系，依托自主研发的算法模型与智能分析能力，为多垂直行业客户提供标准化、定制化的产业数据服务与营销增长解决方案，聚焦解决企业营销粗放、用户价值挖掘不足、运营效率偏低等核心痛点，助力企业实现精细化运营、降本增效与可持续增长，已落地多行业标杆服务项目。
+              </p>
+              <div class="flex flex-wrap gap-3">
+                <span
+                  class="inline-flex items-center bg-red-50 text-xuan-accent text-sm font-medium px-4 py-2 rounded-full"
+                >
+                  <i class="fas fa-check mr-2 text-xs"></i>精细化运营
+                </span>
+                <span
+                  class="inline-flex items-center bg-red-50 text-xuan-accent text-sm font-medium px-4 py-2 rounded-full"
+                >
+                  <i class="fas fa-check mr-2 text-xs"></i>降本增效
+                </span>
+                <span
+                  class="inline-flex items-center bg-red-50 text-xuan-accent text-sm font-medium px-4 py-2 rounded-full"
+                >
+                  <i class="fas fa-check mr-2 text-xs"></i>可持续增长
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Stats -->
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
+            <div
+              class="stat-card group bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-red-50 mb-4 group-hover:bg-xuan-accent group-hover:scale-110 transition-all duration-300"
+              >
+                <i
+                  class="fas fa-layer-group text-xuan-accent text-xl group-hover:text-white transition-colors"
+                ></i>
+              </div>
+              <div class="text-4xl font-bold text-xuan-dark mb-1">
+                <span class="counter" data-target="10">0</span
+                ><span class="text-xuan-accent">+</span>
+              </div>
+              <div class="text-gray-500 text-sm">覆盖垂直行业</div>
+            </div>
+            <div
+              class="stat-card group bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-red-50 mb-4 group-hover:bg-xuan-accent group-hover:scale-110 transition-all duration-300"
+              >
+                <i
+                  class="fas fa-thumbs-up text-xuan-accent text-xl group-hover:text-white transition-colors"
+                ></i>
+              </div>
+              <div class="text-4xl font-bold text-xuan-dark mb-1">
+                <span class="counter" data-target="95">0</span
+                ><span class="text-xuan-accent">%+</span>
+              </div>
+              <div class="text-gray-500 text-sm">客户满意度</div>
+            </div>
+            <div
+              class="stat-card group bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-red-50 mb-4 group-hover:bg-xuan-accent group-hover:scale-110 transition-all duration-300"
+              >
+                <i
+                  class="fas fa-arrow-trend-up text-xuan-accent text-xl group-hover:text-white transition-colors"
+                ></i>
+              </div>
+              <div class="text-4xl font-bold text-xuan-dark mb-1">
+                <span class="counter" data-target="30">0</span
+                ><span class="text-xuan-accent">%+</span>
+              </div>
+              <div class="text-gray-500 text-sm">企业营销投入效益提效</div>
+            </div>
+          </div>
+
+          <!-- Core Advantages -->
+          <div class="text-center mb-12">
+            <span
+              class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
+              >Our Strengths</span
+            >
+            <h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
+              核心优势
+            </h2>
+            <div
+              class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full"
+            ></div>
+          </div>
+          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
+            <div
+              class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
+              >
+                <i class="fas fa-magnifying-glass-chart text-white text-lg"></i>
+              </div>
+              <h3 class="text-lg font-bold text-xuan-dark mb-3">
+                行业深度洞察
+              </h3>
+              <p class="text-gray-500 text-sm leading-relaxed">
+                深耕多领域产业营销场景，深度拆解各行业运营特征与增长痛点，结合产业发展趋势与客户业务场景，输出适配性极强的数智化运营与增长策略。
+              </p>
+            </div>
+            <div
+              class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
+              >
+                <i class="fas fa-shield-halved text-white text-lg"></i>
+              </div>
+              <h3 class="text-lg font-bold text-xuan-dark mb-3">
+                合规数据体系
+              </h3>
+              <p class="text-gray-500 text-sm leading-relaxed">
+                严格恪守国家数据安全、个人隐私保护相关法律法规，建立全流程合规数据治理机制，标准化数据采集、分析、应用流程，保障所有服务合规可控、风险可控。
+              </p>
+            </div>
+            <div
+              class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
+              >
+                <i class="fas fa-arrows-rotate text-white text-lg"></i>
+              </div>
+              <h3 class="text-lg font-bold text-xuan-dark mb-3">
+                全域闭环赋能
+              </h3>
+              <p class="text-gray-500 text-sm leading-relaxed">
+                打通公私域产业运营链路，构建「用户分析-策略匹配-流量运营-效果复盘」全闭环服务体系，实现方案可落地、运营可追踪、增长可量化。
+              </p>
+            </div>
+            <div
+              class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
+            >
+              <div
+                class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
+              >
+                <i class="fas fa-people-group text-white text-lg"></i>
+              </div>
+              <h3 class="text-lg font-bold text-xuan-dark mb-3">
+                专业落地服务
+              </h3>
+              <p class="text-gray-500 text-sm leading-relaxed">
+                配备专属技术与运营服务团队，基于不同行业属性定制差异化服务方案，全程跟进项目落地、优化迭代，保障服务实效与客户价值落地。
+              </p>
+            </div>
+          </div>
+
+          <!-- Team Background & Mission -->
+          <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
+            <div class="reveal-left order-2 md:order-1">
+              <span
+                class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
+                >Our Team</span
+              >
+              <h2
+                class="text-3xl md:text-4xl font-bold text-xuan-dark mb-6 leading-tight"
+              >
+                团队背景
+              </h2>
+              <p class="text-gray-600 leading-relaxed mb-8">
+                团队核心成员深耕产业数据、智能算法、数字营销、产业运营领域多年，具备丰富的技术研发与项目落地实战经验。团队立足产业真实需求，持续迭代智能分析模型与服务体系，快速响应各行业客户的定制化需求，已成功落地多个跨区域、跨行业数智服务项目，持续为客户输出稳定、高效、合规的产业增长服务能力。
+              </p>
+              <div class="grid grid-cols-2 gap-4">
+                <div class="flex items-center space-x-3">
+                  <div
+                    class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="fas fa-code text-xuan-accent"></i>
+                  </div>
+                  <span class="text-sm text-gray-700 font-medium"
+                    >技术研发</span
+                  >
+                </div>
+                <div class="flex items-center space-x-3">
+                  <div
+                    class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="fas fa-chart-bar text-xuan-accent"></i>
+                  </div>
+                  <span class="text-sm text-gray-700 font-medium"
+                    >产业运营</span
+                  >
+                </div>
+                <div class="flex items-center space-x-3">
+                  <div
+                    class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="fas fa-microchip text-xuan-accent"></i>
+                  </div>
+                  <span class="text-sm text-gray-700 font-medium"
+                    >智能算法</span
+                  >
+                </div>
+                <div class="flex items-center space-x-3">
+                  <div
+                    class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="fas fa-bullhorn text-xuan-accent"></i>
+                  </div>
+                  <span class="text-sm text-gray-700 font-medium"
+                    >数字营销</span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="reveal-right order-1 md:order-2">
+              <!-- Mission Box -->
+              <div
+                class="relative rounded-2xl overflow-hidden bg-gradient-to-br from-xuan-dark to-xuan-darker p-8 md:p-12 shadow-2xl"
+              >
+                <div class="absolute inset-0 opacity-10">
+                  <div
+                    class="absolute top-0 left-0 w-full h-full"
+                    style="
+                      background-image: radial-gradient(
+                        circle,
+                        rgba(154, 25, 30, 0.3) 1px,
+                        transparent 1px
+                      );
+                      background-size: 25px 25px;
+                    "
+                  ></div>
+                </div>
+                <div
+                  class="absolute -top-10 -right-10 w-40 h-40 bg-xuan-accent/20 rounded-full blur-3xl"
+                ></div>
+                <div class="relative z-10">
+                  <div
+                    class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-6"
+                  >
+                    <i class="fas fa-bullseye text-white text-xl"></i>
+                  </div>
+                  <span
+                    class="block text-xuan-accent-light text-sm font-bold uppercase tracking-wider mb-4"
+                    >企业使命</span
+                  >
+                  <p
+                    class="text-white text-xl md:text-2xl font-medium leading-relaxed"
+                  >
+                    以合规化产业数据服务与智能分析能力，赋能企业精细化营销运营，让每一次产业投入都收获<span
+                      class="text-xuan-accent-light"
+                      >可量化的真实增长价值</span
+                    >。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Covered Industries -->
+          <div class="text-center mb-12">
+            <span
+              class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
+              >Industries</span
+            >
+            <h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
+              覆盖行业
+            </h2>
+            <p class="text-gray-500 max-w-2xl mx-auto">
+              深耕多领域产业营销场景，已服务多个垂直行业标杆项目
+            </p>
+            <div
+              class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full mt-4"
+            ></div>
+          </div>
+          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-car text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">汽车</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-credit-card text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">信贷</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-baby text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">母婴</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-stethoscope text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">医美</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-spray-can-sparkles text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">美妆</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-seedling text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">植发</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-bag-shopping text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">快消</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-plane text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">文旅</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-gamepad text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">游戏</div>
+            </div>
+            <div
+              class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
+            >
+              <i
+                class="fas fa-video text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
+              ></i>
+              <div class="text-sm font-medium text-gray-700">品牌MCN</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ==================== Products & Services ==================== -->
+      <section id="products" class="py-20 md:py-28 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <!-- Section Header -->
+          <div class="text-center mb-12">
+            <span
+              class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
+              >Our Services</span
+            >
+            <h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
+              产品服务
+            </h2>
+            <p class="text-gray-500 max-w-2xl mx-auto">
+              全链路数智化营销服务体系，赋能企业精细化运营与可持续增长
+            </p>
+            <div
+              class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full mt-4"
+            ></div>
+          </div>
+
+          <!-- Service Cards (1-4) -->
+          <div class="grid md:grid-cols-2 gap-6 lg:gap-8 mb-12">
+            <!-- Service 1 -->
+            <div
+              class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
+            >
+              <div class="flex items-start justify-between mb-6">
+                <div
+                  class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
+                >
+                  <i class="fas fa-users-gear text-white text-xl"></i>
+                </div>
+                <span
+                  class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
+                  >01</span
+                >
+              </div>
+              <h3 class="text-xl font-bold text-xuan-dark mb-4">
+                产业用户智能评级服务
+              </h3>
+              <p class="text-gray-600 text-sm leading-relaxed mb-3">
+                依托多维产业数据与自研算法模型，构建标准化用户价值评估体系，基于用户行为特征、产业需求、消费偏好等多维度信号，完成用户分层分级与价值研判。
+              </p>
+              <p class="text-gray-600 text-sm leading-relaxed">
+                通过智能化标签体系区分用户潜力层级，为企业运营决策、用户跟进、资源配置提供数据参考，结合不同行业属性完成模型迭代调优，有效提升产业用户匹配精准度与运营转化效率。
+              </p>
+            </div>
+
+            <!-- Service 2 -->
+            <div
+              class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
+            >
+              <div class="flex items-start justify-between mb-6">
+                <div
+                  class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
+                >
+                  <i class="fas fa-bullseye text-white text-xl"></i>
+                </div>
+                <span
+                  class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
+                  >02</span
+                >
+              </div>
+              <h3 class="text-xl font-bold text-xuan-dark mb-4">
+                精准产业拓新服务
+              </h3>
+              <p class="text-gray-600 text-sm leading-relaxed mb-3">
+                基于行业产业特征与目标用户画像，搭建精细化人群研判体系，精准挖掘具备真实产业需求与消费潜力的目标客群。
+              </p>
+              <p class="text-gray-600 text-sm leading-relaxed">
+                适配多类型用户承接与运营场景，结合行业特性定制差异化拓新与运营策略，精准过滤无效流量与非目标客群，帮助企业高效完成优质用户扩容，实现低成本精准拓新。
+              </p>
+            </div>
+
+            <!-- Service 3 -->
+            <div
+              class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
+            >
+              <div class="flex items-start justify-between mb-6">
+                <div
+                  class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
+                >
+                  <i class="fas fa-diagram-project text-white text-xl"></i>
+                </div>
+                <span
+                  class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
+                  >03</span
+                >
+              </div>
+              <h3 class="text-xl font-bold text-xuan-dark mb-4">
+                全域智能营销赋能服务
+              </h3>
+              <p class="text-gray-600 text-sm leading-relaxed mb-3">
+                整合全域公私域运营渠道，搭建「智能人群分析、策略适配、全渠道赋能、数据复盘优化」的全链路营销服务体系。
+              </p>
+              <p class="text-gray-600 text-sm leading-relaxed">
+                依托产业数据沉淀与智能分析能力，完成精细化人群划分、竞品客群挖掘、自有用户数据联动分析，配套标准化运营工具与落地策略支撑。通过全维度数据复盘，梳理运营链路核心痛点，助力客户持续优化营销资源配置，提升整体运营收益。
+              </p>
+            </div>
+
+            <!-- Service 4 -->
+            <div
+              class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
+            >
+              <div class="flex items-start justify-between mb-6">
+                <div
+                  class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
+                >
+                  <i class="fas fa-shield-halved text-white text-xl"></i>
+                </div>
+                <span
+                  class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
+                  >04</span
+                >
+              </div>
+              <h3 class="text-xl font-bold text-xuan-dark mb-4">
+                营销智能风控服务
+              </h3>
+              <p class="text-gray-600 text-sm leading-relaxed mb-3">
+                针对各类产业营销运营场景，搭建智能化风险识别与防护体系，依托算法能力精准识别异常流量、批量作弊、恶意薅羊毛等各类营销风险行为。
+              </p>
+              <p class="text-gray-600 text-sm leading-relaxed">
+                实现异常账号、异常访问行为的智能监测与拦截，全方位守护企业营销预算与运营秩序，适配线上活动运营、全域拓新、广告投放等多类商业场景，保障营销运营公平高效。
+              </p>
+            </div>
+          </div>
+
+          <!-- Service 5: Vertical Industry Solutions -->
+          <div
+            class="rounded-3xl bg-gradient-to-br from-xuan-dark to-xuan-darker p-8 md:p-12 shadow-2xl overflow-hidden relative"
+          >
+            <div class="absolute inset-0 opacity-10">
+              <div
+                class="absolute top-0 left-0 w-full h-full"
+                style="
+                  background-image: radial-gradient(
+                    circle,
+                    rgba(154, 25, 30, 0.3) 1px,
+                    transparent 1px
+                  );
+                  background-size: 30px 30px;
+                "
+              ></div>
+            </div>
+            <div
+              class="absolute -top-20 -right-20 w-72 h-72 bg-xuan-accent/10 rounded-full blur-3xl"
+            ></div>
+
+            <div class="relative z-10">
+              <div
+                class="flex flex-col md:flex-row items-start md:items-center justify-between mb-10 gap-4"
+              >
+                <div>
+                  <div class="flex items-center space-x-3 mb-4">
+                    <div
+                      class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent"
+                    >
+                      <i class="fas fa-layer-group text-white text-lg"></i>
+                    </div>
+                    <span class="text-5xl font-bold text-white/10">05</span>
+                  </div>
+                  <h3 class="text-2xl md:text-3xl font-bold text-white mb-3">
+                    垂直行业数智解决方案
+                  </h3>
+                  <p class="text-gray-400 max-w-2xl text-sm leading-relaxed">
+                    聚焦多类主流垂直行业，基于行业产业特征与增长痛点，定制专属数智化营销与数据服务方案，以产业智能分析、精细化用户运营、全域增长赋能为核心，助力各行业企业实现数字化转型与业务增长。
+                  </p>
+                </div>
+              </div>
+
+              <!-- Industry Solutions Grid -->
+              <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div
+                  class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
+                >
+                  <div class="flex items-center space-x-3 mb-3">
+                    <i class="fas fa-car text-xuan-accent-light text-lg"></i>
+                    <h4 class="text-white font-bold">汽车行业</h4>
+                  </div>
+                  <p class="text-gray-400 text-xs leading-relaxed">
+                    依托用户购车需求研判、用户价值分层能力，赋能车企及渠道精细化运营与销售转化提升。
+                  </p>
+                </div>
+                <div
+                  class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
+                >
+                  <div class="flex items-center space-x-3 mb-3">
+                    <i
+                      class="fas fa-money-check-dollar text-xuan-accent-light text-lg"
+                    ></i>
+                    <h4 class="text-white font-bold">金融信贷行业</h4>
+                  </div>
+                  <p class="text-gray-400 text-xs leading-relaxed">
+                    挖掘用户金融服务需求与潜力，构建高价值客群体系，助力金融机构精准运营、合规拓客。
+                  </p>
+                </div>
+                <div
+                  class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
+                >
+                  <div class="flex items-center space-x-3 mb-3">
+                    <i class="fas fa-baby text-xuan-accent-light text-lg"></i>
+                    <h4 class="text-white font-bold">母婴消费行业</h4>
+                  </div>
+                  <p class="text-gray-400 text-xs leading-relaxed">
+                    精准识别备孕、孕期、育儿全周期人群，匹配精细化运营与拓新方案，赋能消费品牌用户增长。
+                  </p>
+                </div>
+                <div
+                  class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
+                >
+                  <div class="flex items-center space-x-3 mb-3">
+                    <i
+                      class="fas fa-heart-pulse text-xuan-accent-light text-lg"
+                    ></i>
+                    <h4 class="text-white font-bold">医美行业</h4>
+                  </div>
+                  <p class="text-gray-400 text-xs leading-relaxed">
+                    挖掘医美消费意向与潜力客群，为线下医美机构提供精准用户运营与增长赋能。
+                  </p>
+                </div>
+                <div
+                  class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
+                >
+                  <div class="flex items-center space-x-3 mb-3">
+                    <i
+                      class="fas fa-spray-can-sparkles text-xuan-accent-light text-lg"
+                    ></i>
+                    <h4 class="text-white font-bold">美妆快消行业</h4>
+                  </div>
+                  <p class="text-gray-400 text-xs leading-relaxed">
+                    覆盖竞品客群挖掘、大促节点拓新、存量用户唤醒、精细化会员运营等全场景增长服务。
+                  </p>
+                </div>
+                <div
+                  class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
+                >
+                  <div class="flex items-center space-x-3 mb-3">
+                    <i
+                      class="fas fa-gamepad text-xuan-accent-light text-lg"
+                    ></i>
+                    <h4 class="text-white font-bold">游戏与品牌MCN行业</h4>
+                  </div>
+                  <p class="text-gray-400 text-xs leading-relaxed">
+                    精准挖掘潜力用户、智能防控运营风险、复盘优化投放效果，助力内容品牌长效增长。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ==================== Contact Us ==================== -->
+      <section id="contact" class="py-20 md:py-28 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <!-- Section Header -->
+          <div class="text-center mb-12">
+            <span
+              class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
+              >Contact Us</span
+            >
+            <h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
+              联系我们
+            </h2>
+            <p class="text-gray-500 max-w-2xl mx-auto">
+              商务合作咨询：欢迎各行业品牌企业、广告机构、渠道服务商洽谈深度合作，共创产业数智增长新价值。
+            </p>
+            <div
+              class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full mt-4"
+            ></div>
+          </div>
+
+          <div class="grid md:grid-cols-2 gap-8 lg:gap-12">
+            <!-- Contact Info -->
+            <div class="space-y-6">
+              <div
+                class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
+              >
+                <h3 class="text-lg font-bold text-xuan-dark mb-6">联系方式</h3>
+                <div class="space-y-5">
+                  <div class="flex items-start space-x-4">
+                    <div
+                      class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center flex-shrink-0"
+                    >
+                      <i class="fas fa-location-dot text-xuan-accent"></i>
+                    </div>
+                    <div>
+                      <div class="text-sm font-semibold text-xuan-dark mb-1">
+                        公司地址
+                      </div>
+                      <p class="text-gray-500 text-sm">
+                        浙江省杭州市西湖区古荡街道西溪路525号C楼5686室
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-start space-x-4">
+                    <div
+                      class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center flex-shrink-0"
+                    >
+                      <i class="fas fa-phone text-xuan-accent"></i>
+                    </div>
+                    <div>
+                      <div class="text-sm font-semibold text-xuan-dark mb-1">
+                        联系电话
+                      </div>
+                      <p class="text-gray-500 text-sm">
+                        <a
+                          href="tel:19521568866"
+                          class="hover:text-xuan-accent transition-colors"
+                          >19521568866</a
+                        >
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-start space-x-4">
+                    <div
+                      class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center flex-shrink-0"
+                    >
+                      <i class="fas fa-envelope text-xuan-accent"></i>
+                    </div>
+                    <div>
+                      <div class="text-sm font-semibold text-xuan-dark mb-1">
+                        电子邮箱
+                      </div>
+                      <p class="text-gray-500 text-sm">
+                        <a
+                          href="mailto:q@pangjukeji.com"
+                          class="hover:text-xuan-accent transition-colors"
+                          >q@pangjukeji.com</a
+                        >
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Business Cooperation Card -->
+              <div
+                class="rounded-2xl p-8 shadow-xl relative overflow-hidden border border-xuan-accent/15"
+                style="background-color: #fdf0ee"
+              >
+                <div
+                  class="absolute -bottom-10 -right-10 w-40 h-40 bg-xuan-accent/8 rounded-full blur-3xl"
+                ></div>
+                <div class="relative z-10">
+                  <div
+                    class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-4"
+                  >
+                    <i class="fas fa-handshake text-white text-lg"></i>
+                  </div>
+                  <h3 class="text-xuan-dark text-lg font-bold mb-3">
+                    商务合作咨询
+                  </h3>
+                  <p class="text-gray-600 text-sm leading-relaxed mb-5">
+                    欢迎各行业品牌企业、广告机构、渠道服务商洽谈深度合作，共创产业数智增长新价值。
+                  </p>
+                  <a
+                    href="tel:19521568866"
+                    class="inline-flex items-center bg-xuan-accent text-white text-sm font-medium px-5 py-2.5 rounded-lg hover:bg-xuan-accent-dark transition-all duration-300"
+                  >
+                    <i class="fas fa-phone mr-2 text-xs"></i>立即致电
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <!-- Contact Form -->
+            <div
+              class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
+            >
+              <h3 class="text-lg font-bold text-xuan-dark mb-6">在线留言</h3>
+              <form id="contact-form" class="space-y-5" novalidate>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2"
+                    >姓名 <span class="text-red-500">*</span></label
+                  >
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    required
+                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
+                    placeholder="请输入您的姓名"
+                  />
+                  <p class="error-msg hidden text-red-500 text-xs mt-1">
+                    请输入您的姓名
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2"
+                    >联系电话 <span class="text-red-500">*</span></label
+                  >
+                  <input
+                    type="tel"
+                    name="phone"
+                    id="phone"
+                    required
+                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
+                    placeholder="请输入您的联系电话"
+                  />
+                  <p class="error-msg hidden text-red-500 text-xs mt-1">
+                    请输入正确的联系电话
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2"
+                    >邮箱地址 <span class="text-red-500">*</span></label
+                  >
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    required
+                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
+                    placeholder="请输入您的邮箱地址"
+                  />
+                  <p class="error-msg hidden text-red-500 text-xs mt-1">
+                    请输入正确的邮箱地址
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2"
+                    >公司名称 <span class="text-red-500">*</span></label
+                  >
+                  <input
+                    type="text"
+                    name="company"
+                    id="company"
+                    required
+                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
+                    placeholder="请输入您的公司名称"
+                  />
+                  <p class="error-msg hidden text-red-500 text-xs mt-1">
+                    请输入您的公司名称
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2"
+                    >业务需求描述 <span class="text-red-500">*</span></label
+                  >
+                  <textarea
+                    name="message"
+                    id="message"
+                    rows="4"
+                    required
+                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all resize-none"
+                    placeholder="请描述您的业务需求，以便我们更好地为您提供服务"
+                  ></textarea>
+                  <p class="error-msg hidden text-red-500 text-xs mt-1">
+                    请输入业务需求描述
+                  </p>
+                </div>
+                <button
+                  type="submit"
+                  class="w-full bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white py-3.5 px-6 rounded-lg hover:shadow-lg hover:shadow-xuan-accent/30 hover:scale-[1.02] transition-all duration-300 font-medium flex items-center justify-center"
+                >
+                  <i class="fas fa-paper-plane mr-2"></i>提交留言
+                </button>
+              </form>
+              <!-- Success Message -->
+              <div
+                id="form-success"
+                class="hidden mt-5 p-4 bg-green-50 border border-green-200 rounded-lg"
+              >
+                <div class="flex items-center space-x-2">
+                  <i class="fas fa-circle-check text-green-500 text-lg"></i>
+                  <p class="text-green-700 text-sm font-medium">
+                    提交成功！我们会尽快与您联系，感谢您的关注。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!-- ==================== Footer ==================== -->
+    <footer class="bg-xuan-dark text-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid md:grid-cols-3 gap-8 mb-8">
+          <!-- Company Info -->
+          <div>
+            <div class="flex items-center space-x-2 mb-4">
+              <img
+                src="assets/xuanchao-logo.png"
+                alt="玄潮科技"
+                class="w-9 h-9 object-contain"
+              />
+              <span class="text-xl font-bold">玄潮科技</span>
+            </div>
+            <p class="text-gray-400 text-sm leading-relaxed mb-4">
+              全域数据营销服务，赋能产业数智增长
+            </p>
+            <div class="flex space-x-3">
+              <a
+                href="#"
+                class="w-9 h-9 rounded-lg bg-white/10 hover:bg-xuan-accent flex items-center justify-center transition-all duration-300"
+                aria-label="微信"
+              >
+                <i class="fab fa-weixin text-sm"></i>
+              </a>
+              <a
+                href="#"
+                class="w-9 h-9 rounded-lg bg-white/10 hover:bg-xuan-accent flex items-center justify-center transition-all duration-300"
+                aria-label="微博"
+              >
+                <i class="fab fa-weibo text-sm"></i>
+              </a>
+              <a
+                href="#"
+                class="w-9 h-9 rounded-lg bg-white/10 hover:bg-xuan-accent flex items-center justify-center transition-all duration-300"
+                aria-label="领英"
+              >
+                <i class="fab fa-linkedin-in text-sm"></i>
+              </a>
+            </div>
+          </div>
+          <!-- Contact Info -->
+          <div>
+            <h3 class="text-lg font-semibold mb-4">联系方式</h3>
+            <div class="space-y-3 text-sm text-gray-400">
+              <div class="flex items-start space-x-2">
+                <i class="fas fa-location-dot w-4 mt-1 flex-shrink-0"></i>
+                <span>浙江省杭州市西湖区古荡街道西溪路525号C楼5686室</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <i class="fas fa-phone w-4 flex-shrink-0"></i>
+                <a
+                  href="tel:19521568866"
+                  class="hover:text-white transition-colors"
+                  >19521568866</a
+                >
+              </div>
+              <div class="flex items-center space-x-2">
+                <i class="fas fa-envelope w-4 flex-shrink-0"></i>
+                <a
+                  href="mailto:q@pangjukeji.com"
+                  class="hover:text-white transition-colors"
+                  >q@pangjukeji.com</a
+                >
+              </div>
+            </div>
+          </div>
+          <!-- Quick Links -->
+          <div>
+            <h3 class="text-lg font-semibold mb-4">快速链接</h3>
+            <div class="space-y-2 text-sm text-gray-400">
+              <a href="#home" class="block hover:text-white transition-colors"
+                >首页</a
+              >
+              <a href="#about" class="block hover:text-white transition-colors"
+                >关于我们</a
+              >
+              <a
+                href="#products"
+                class="block hover:text-white transition-colors"
+                >产品服务</a
+              >
+              <a
+                href="#contact"
+                class="block hover:text-white transition-colors"
+                >联系我们</a
+              >
+            </div>
+          </div>
+        </div>
+        <div
+          class="border-t border-white/10 pt-6 text-center text-sm text-gray-500"
+        >
+          <p>
+            &copy; <span id="current-year">2026</span> 玄潮科技. All rights
+            reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Back to Top Button -->
+    <button
+      id="back-to-top"
+      class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-gradient-to-br from-xuan-accent-light to-xuan-accent text-white shadow-lg opacity-0 invisible hover:scale-110 transition-all duration-300 z-40 flex items-center justify-center"
+      aria-label="返回顶部"
+    >
+      <i class="fas fa-arrow-up"></i>
+    </button>
+
+    <!-- ==================== Scripts ==================== -->
+    <script src="js/main.js"></script>
+  </body>
+</html>
diff --git a/玄潮官网/js/main.js b/玄潮官网/js/main.js
new file mode 100644
index 0000000..e801130
--- /dev/null
+++ b/玄潮官网/js/main.js
@@ -0,0 +1,307 @@
+/* ==================== 玄潮科技 - Main JavaScript ==================== */
+
+(function () {
+    'use strict';
+
+    /* ----- DOM Ready ----- */
+    document.addEventListener('DOMContentLoaded', function () {
+        initMobileMenu();
+        initSmoothScroll();
+        initHeaderScroll();
+        initActiveNav();
+        initRevealAnimations();
+        initCounters();
+        initBackToTop();
+        initContactForm();
+        initFooterYear();
+    });
+
+    /* ==================== Mobile Menu ==================== */
+    function initMobileMenu() {
+        var btn = document.getElementById('mobile-menu-btn');
+        var menu = document.getElementById('mobile-menu');
+        if (!btn || !menu) return;
+
+        btn.addEventListener('click', function () {
+            menu.classList.toggle('hidden');
+            var icon = btn.querySelector('i');
+            if (menu.classList.contains('hidden')) {
+                icon.className = 'fas fa-bars text-xl';
+            } else {
+                icon.className = 'fas fa-xmark text-xl';
+            }
+        });
+
+        // Close mobile menu when a link is clicked
+        var links = menu.querySelectorAll('.mobile-nav-link');
+        links.forEach(function (link) {
+            link.addEventListener('click', function () {
+                menu.classList.add('hidden');
+                btn.querySelector('i').className = 'fas fa-bars text-xl';
+            });
+        });
+    }
+
+    /* ==================== Smooth Scroll ==================== */
+    function initSmoothScroll() {
+        var links = document.querySelectorAll('a[href^="#"]');
+        links.forEach(function (link) {
+            link.addEventListener('click', function (e) {
+                var href = link.getAttribute('href');
+                if (href === '#' || href === '') return;
+                var target = document.querySelector(href);
+                if (!target) return;
+                e.preventDefault();
+                var headerHeight = document.getElementById('header').offsetHeight;
+                var targetPos = target.getBoundingClientRect().top + window.pageYOffset - headerHeight + 1;
+                window.scrollTo({
+                    top: targetPos,
+                    behavior: 'smooth'
+                });
+            });
+        });
+    }
+
+    /* ==================== Header Scroll Effect ==================== */
+    function initHeaderScroll() {
+        var header = document.getElementById('header');
+        if (!header) return;
+        window.addEventListener('scroll', function () {
+            if (window.scrollY > 10) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+    }
+
+    /* ==================== Active Nav Highlighting ==================== */
+    function initActiveNav() {
+        var sections = document.querySelectorAll('section[id]');
+        var navLinks = document.querySelectorAll('.nav-link');
+        if (!sections.length || !navLinks.length) return;
+
+        var observer = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    var id = entry.target.getAttribute('id');
+                    navLinks.forEach(function (link) {
+                        if (link.getAttribute('href') === '#' + id) {
+                            link.classList.add('active');
+                            link.classList.remove('text-gray-600');
+                        } else {
+                            link.classList.remove('active');
+                            link.classList.add('text-gray-600');
+                        }
+                    });
+                }
+            });
+        }, {
+            rootMargin: '-40% 0px -55% 0px'
+        });
+
+        sections.forEach(function (section) {
+            observer.observe(section);
+        });
+    }
+
+    /* ==================== Reveal Animations ==================== */
+    function initRevealAnimations() {
+        var elements = document.querySelectorAll('.reveal-up, .reveal-left, .reveal-right');
+        if (!elements.length) return;
+
+        // Set animation delay from inline style
+        elements.forEach(function (el) {
+            var styleDelay = el.style.animationDelay;
+            if (styleDelay) {
+                el.style.setProperty('--reveal-delay', styleDelay);
+            }
+        });
+
+        var observer = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('revealed');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {
+            threshold: 0.15,
+            rootMargin: '0px 0px -50px 0px'
+        });
+
+        elements.forEach(function (el) {
+            observer.observe(el);
+        });
+    }
+
+    /* ==================== Counter Animation ==================== */
+    function initCounters() {
+        var counters = document.querySelectorAll('.counter');
+        if (!counters.length) return;
+
+        var observer = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    animateCounter(entry.target);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {
+            threshold: 0.5
+        });
+
+        counters.forEach(function (counter) {
+            observer.observe(counter);
+        });
+    }
+
+    function animateCounter(el) {
+        var target = parseInt(el.getAttribute('data-target'), 10);
+        var duration = 2000;
+        var startTime = null;
+
+        function step(timestamp) {
+            if (!startTime) startTime = timestamp;
+            var progress = Math.min((timestamp - startTime) / duration, 1);
+            // Ease out cubic
+            var eased = 1 - Math.pow(1 - progress, 3);
+            var current = Math.floor(eased * target);
+            el.textContent = current;
+            if (progress < 1) {
+                requestAnimationFrame(step);
+            } else {
+                el.textContent = target;
+            }
+        }
+
+        requestAnimationFrame(step);
+    }
+
+    /* ==================== Back to Top ==================== */
+    function initBackToTop() {
+        var btn = document.getElementById('back-to-top');
+        if (!btn) return;
+
+        window.addEventListener('scroll', function () {
+            if (window.scrollY > 500) {
+                btn.classList.add('visible');
+                btn.classList.remove('opacity-0', 'invisible');
+            } else {
+                btn.classList.remove('visible');
+                btn.classList.add('opacity-0', 'invisible');
+            }
+        });
+
+        btn.addEventListener('click', function () {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+    }
+
+    /* ==================== Contact Form ==================== */
+    function initContactForm() {
+        var form = document.getElementById('contact-form');
+        if (!form) return;
+
+        var successMsg = document.getElementById('form-success');
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            // Clear previous errors
+            var errorMessages = form.querySelectorAll('.error-msg');
+            errorMessages.forEach(function (msg) { msg.classList.add('hidden'); });
+            var inputs = form.querySelectorAll('.form-input');
+            inputs.forEach(function (input) { input.classList.remove('error'); });
+
+            var isValid = true;
+
+            // Validate name
+            var name = document.getElementById('name');
+            if (!name.value.trim()) {
+                showError(name, 'name');
+                isValid = false;
+            }
+
+            // Validate phone (Chinese phone: 11 digits starting with 1, or landline)
+            var phone = document.getElementById('phone');
+            var phoneVal = phone.value.trim();
+            if (!phoneVal || !/^[\d\s\-+()]{7,20}$/.test(phoneVal)) {
+                showError(phone, 'phone');
+                isValid = false;
+            }
+
+            // Validate email
+            var email = document.getElementById('email');
+            var emailVal = email.value.trim();
+            if (!emailVal || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) {
+                showError(email, 'email');
+                isValid = false;
+            }
+
+            // Validate company
+            var company = document.getElementById('company');
+            if (!company.value.trim()) {
+                showError(company, 'company');
+                isValid = false;
+            }
+
+            // Validate message
+            var message = document.getElementById('message');
+            if (!message.value.trim()) {
+                showError(message, 'message');
+                isValid = false;
+            }
+
+            if (isValid) {
+                // === Submit logic ===
+                // 此处可对接后端API，示例：
+                // fetch('/api/contact', { method: 'POST', body: new FormData(form) })
+                //     .then(res => res.json())
+                //     .then(data => { ... })
+                //     .catch(err => { ... });
+
+                // 模拟提交成功
+                form.style.display = 'none';
+                successMsg.classList.remove('hidden');
+
+                // 5秒后恢复表单
+                setTimeout(function () {
+                    form.reset();
+                    form.style.display = '';
+                    successMsg.classList.add('hidden');
+                }, 5000);
+            }
+        });
+
+        function showError(input, fieldId) {
+            input.classList.add('error');
+            var errorMsg = input.parentElement.querySelector('.error-msg');
+            if (errorMsg) {
+                errorMsg.classList.remove('hidden');
+            }
+        }
+
+        // Clear error on input
+        var allInputs = form.querySelectorAll('.form-input');
+        allInputs.forEach(function (input) {
+            input.addEventListener('input', function () {
+                input.classList.remove('error');
+                var errorMsg = input.parentElement.querySelector('.error-msg');
+                if (errorMsg) errorMsg.classList.add('hidden');
+            });
+        });
+    }
+
+    /* ==================== Footer Year ==================== */
+    function initFooterYear() {
+        var yearEl = document.getElementById('current-year');
+        if (yearEl) {
+            yearEl.textContent = new Date().getFullYear();
+        }
+    }
+
+})();