commit f776972645738360f2a1078b8b85a49276304f73
Author: aiotagro <mapleaf@aiotagro.com>
Date:   Mon Dec 8 15:22:56 2025 +0800

    初始化项目结构并添加官网首页

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..35410ca
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..d843f34
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings" defaultProject="true" />
+</project>
\ No newline at end of file
diff --git a/.trae/documents/Website Optimization Plan - Phase 2.md b/.trae/documents/Website Optimization Plan - Phase 2.md
new file mode 100644
index 0000000..186ef9d
--- /dev/null
+++ b/.trae/documents/Website Optimization Plan - Phase 2.md	
@@ -0,0 +1,17 @@
+I will continue to optimize the website with a focus on mobile responsiveness and user experience. Here is the plan:
+
+## 1. Enhance Mobile Experience (App.vue)
+- **Responsive Navigation**: Implement a "Hamburger Menu" for mobile devices. When the screen width is small, the horizontal menu will collapse into a drawer or dropdown menu.
+- **Layout Adjustments**: Ensure the header and footer look good on smaller screens.
+
+## 2. Upgrade Help Center (Help.vue)
+- **Search Functionality**: Add a search bar at the top to filter FAQs.
+- **Categorization**: Group FAQs into categories (e.g., "Account & Security", "Trading & Payment", "Technical Support") for better navigation.
+- **UI Polish**: Improve the visual style of the help center.
+
+## 3. Add 404 Not Found Page
+- **Create `src/views/NotFound.vue`**: A friendly error page with a button to return to the home page.
+- **Router Configuration**: Update `src/router/index.js` to catch unmatched routes and redirect to the 404 page.
+
+## 4. Add Page Transitions
+- **Global Transition**: Add a subtle fade-slide animation in `App.vue` when switching between routes to make the navigation feel smoother.
diff --git a/.trae/documents/完善项目核心文档.md b/.trae/documents/完善项目核心文档.md
new file mode 100644
index 0000000..7246382
--- /dev/null
+++ b/.trae/documents/完善项目核心文档.md
@@ -0,0 +1,47 @@
+# 文档完善计划
+
+根据当前项目状态（官网已重构，其他模块待开发），我将完善核心文档以指导后续开发。
+
+## 1. 更新现有文档
+- **`docs/官网需求文档.md`**
+    - 更新技术栈描述：Vue 3 + Bootstrap 5 + ECharts。
+    - 更新功能模块描述：与当前重构后的页面保持一致。
+
+## 2. 编写核心架构文档
+- **`docs/整个项目的架构文档.md`** (目前为空)
+    - 定义总体技术架构：
+        - **官网**：Vue 3 + Bootstrap 5 (已实现)
+        - **管理后台 (Admin)**：推荐 Vue 3 + Element Plus (适合后台复杂表单)
+        - **小程序 (Mini-program)**：推荐 Uni-app (跨平台，复用 Vue 技术栈)
+        - **后端服务 (Backend)**：推荐 Java Spring Boot (企业级稳健) 或 Node.js NestJS (全栈统一)
+        - **数据库**：MySQL + Redis
+        - **基础设施**：CentOS 10, Docker, Nginx
+    - 绘制简易架构图（文本描述）。
+
+## 3. 编写项目总需求文档
+- **`docs/整个项目需求文档.md`** (目前为空)
+    - 明确项目背景：云南肉牛产业数字化。
+    - 核心业务流：养殖 -> 交易 -> 金融 -> 监管。
+    - 角色定义：政府、企业、养殖户、访客。
+
+## 4. 编写数据库设计文档（初稿）
+- **`docs/数据库设计文档.md`** (目前为空)
+    - 设计核心ER图概念。
+    - 规划基础表结构：
+        - `users` (用户/企业)
+        - `cattle_info` (牛只档案)
+        - `transactions` (交易记录)
+        - `news` (新闻资讯)
+
+## 5. 编写部署文档
+- **`docs/部署文档.md`** (目前为空)
+    - 规划服务器目录结构。
+    - 编写官网的构建与 Nginx 部署配置。
+    - 规划后端与数据库的 Docker 部署方案。
+
+## 执行顺序
+1. 更新官网需求文档 (反映现状)。
+2. 撰写整个项目的架构文档 (确立基石)。
+3. 撰写整个项目需求文档 (明确范围)。
+4. 撰写数据库设计文档 (数据先行)。
+5. 撰写部署文档 (运维准备)。
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7b5b9aa
--- /dev/null
+++ b/README.md
@@ -0,0 +1,18 @@
+# caiyunniu 云南智慧牛产业平台
+
+## 项目简介
+云南智慧牛产业平台（原彩云牛畜牧管理系统）旨在通过数字化手段，为畜牧业提供全面的管理解决方案。
+
+## 目录结构
+- `docs/` - 项目文档目录
+- `admin-system/` - 管理后台目录
+- `mini-program/` - 小程序app目录
+- `backend/` - 后端服务目录
+- `website/` - 官网目录
+- `scripts/` - 脚本目录（数据库、部署、测试、运维等）
+
+## 文档入口
+请查看 [docs/](docs/) 目录获取详细文档。
+
+主要文档：
+- [整个项目需求文档](docs/整个项目需求文档.md)
diff --git a/docs/后端开发文档.md b/docs/后端开发文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/后端架构文档.md b/docs/后端架构文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/后端管理开发文档.md b/docs/后端管理开发文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/后端管理需求文档.md b/docs/后端管理需求文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/安全文档.md b/docs/安全文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/官网需求文档.md b/docs/官网需求文档.md
new file mode 100644
index 0000000..c7c7b91
--- /dev/null
+++ b/docs/官网需求文档.md
@@ -0,0 +1,46 @@
+# 云南智慧牛产业平台 - 官网需求文档
+
+## 1. 概述
+云南智慧牛产业平台官网是平台对外的门户窗口，主要承担品牌展示、信息发布、用户引导和政策宣传等功能。
+
+## 2. 核心功能模块
+
+### 2.1 首页
+- **轮播图**：全屏视差滚动展示平台核心价值、最新活动或政策亮点。
+- **平台简介**：简要介绍“云南智慧牛产业平台”的背景、使命和愿景。
+- **核心服务**：以卡片形式展示智慧养殖、牛只交易、金融服务、政府监管四大核心板块入口。
+- **平台数据**：可视化展示平台入驻企业数、牛只总数、交易额等关键指标（集成 ECharts 图表）。
+- **合作伙伴**：展示合作的政府机构、金融机构、大型养殖企业 Logo（支持懒加载）。
+
+### 2.2 关于我们
+- **平台背景**：详细介绍项目背景、发展历程。
+- **发展历程**：时间轴展示关键里程碑。
+- **联系我们**：提供联系方式、地址、地图导航。
+
+### 2.3 解决方案
+- **智慧养殖**：介绍养殖管理系统的功能亮点（牛只档案、健康监测等）。
+- **牛只交易**：介绍交易流程、安全保障机制。
+- **金融赋能**：介绍活体抵押贷、养殖保险等金融产品。
+- **政府监管**：介绍全链条监管功能。
+
+### 2.4 新闻中心
+- **行业资讯**：畜牧业相关新闻。
+- **政策法规**：国家及云南省相关畜牧业政策。
+- **平台动态**：平台版本更新、活动发布等。
+
+### 2.5 帮助中心 / 联系我们
+- **常见问题**：FAQ 列表。
+- **在线留言**：提供表单提交合作意向。
+- **联系方式**：电话、邮箱、地址展示。
+
+## 3. 非功能需求
+- **响应式设计**：基于 Bootstrap 3 Grid 系统，兼容主流浏览器（IE9+），适配 PC 和移动端。
+- **性能优化**：使用 CDN 加速静态资源加载（Bootstrap, jQuery, ECharts）。
+- **SEO优化**：HTML5 语义化标签，针对“云南智慧牛”、“畜牧管理”等关键词优化 Meta 标签。
+- **交互体验**：界面简洁大气，操作流畅。
+
+## 4. 技术栈
+- **核心技术**：HTML5 + CSS3 + JavaScript (jQuery 1.12.4)
+- **UI 框架**：Bootstrap 3.4.1 (响应式布局 & 组件)
+- **数据可视化**：ECharts 5.4.3
+- **兼容性**：支持 IE9+, Chrome, Firefox, Safari, Edge
diff --git a/docs/小程序app开发文档.md b/docs/小程序app开发文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/小程序app接口设计文档.md b/docs/小程序app接口设计文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/小程序app需求文档.md b/docs/小程序app需求文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/小程序架构文档.md b/docs/小程序架构文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/数据库设计文档.md b/docs/数据库设计文档.md
new file mode 100644
index 0000000..112111f
--- /dev/null
+++ b/docs/数据库设计文档.md
@@ -0,0 +1,82 @@
+# 云南智慧牛产业平台 - 数据库设计文档
+
+## 1. 设计规范
+- **数据库引擎**: MySQL 8.0 InnoDB
+- **字符集**: utf8mb4_general_ci
+- **命名规范**: 小写下划线命名法 (snake_case)
+- **主键策略**: 分布式雪花算法 ID (BIGINT)
+
+## 2. 核心表结构
+
+### 2.1 用户中心
+#### 用户表 (`sys_user`)
+| 字段名 | 类型 | 长度 | 说明 |
+| :--- | :--- | :--- | :--- |
+| id | BIGINT | 20 | 主键ID |
+| username | VARCHAR | 50 | 用户名 |
+| password | VARCHAR | 100 | 密码(BCrypt) |
+| phone | VARCHAR | 20 | 手机号 |
+| user_type | TINYINT | 4 | 用户类型(1:养殖户 2:交易商 3:监管员 4:银行) |
+| status | TINYINT | 4 | 状态(0:禁用 1:正常) |
+| create_time | DATETIME | | 创建时间 |
+
+#### 企业/牧场表 (`sys_farm`)
+| 字段名 | 类型 | 长度 | 说明 |
+| :--- | :--- | :--- | :--- |
+| id | BIGINT | 20 | 主键ID |
+| user_id | BIGINT | 20 | 关联用户ID |
+| farm_name | VARCHAR | 100 | 牧场名称 |
+| address | VARCHAR | 200 | 详细地址 |
+| license_no | VARCHAR | 50 | 防疫合格证号 |
+| scale | INT | 11 | 养殖规模 |
+
+### 2.2 智慧养殖
+#### 牛只档案表 (`biz_cattle`)
+| 字段名 | 类型 | 长度 | 说明 |
+| :--- | :--- | :--- | :--- |
+| id | BIGINT | 20 | 主键ID |
+| farm_id | BIGINT | 20 | 所属牧场ID |
+| ear_tag | VARCHAR | 50 | 耳标号(唯一) |
+| breed | VARCHAR | 50 | 品种 |
+| gender | TINYINT | 4 | 性别(1:公 2:母) |
+| birth_date | DATE | | 出生日期 |
+| weight | DECIMAL | 10,2 | 当前体重(kg) |
+| status | TINYINT | 4 | 状态(1:在栏 2:出栏 3:死亡) |
+
+#### 健康记录表 (`biz_health_record`)
+| 字段名 | 类型 | 长度 | 说明 |
+| :--- | :--- | :--- | :--- |
+| id | BIGINT | 20 | 主键ID |
+| cattle_id | BIGINT | 20 | 牛只ID |
+| record_type | TINYINT | 4 | 类型(1:免疫 2:诊疗 3:检疫) |
+| description | TEXT | | 详情描述 |
+| operate_time | DATETIME | | 操作时间 |
+| operator | VARCHAR | 50 | 操作人 |
+
+### 2.3 交易中心
+#### 交易订单表 (`trade_order`)
+| 字段名 | 类型 | 长度 | 说明 |
+| :--- | :--- | :--- | :--- |
+| id | BIGINT | 20 | 主键ID |
+| order_no | VARCHAR | 64 | 订单编号 |
+| seller_id | BIGINT | 20 | 卖家ID |
+| buyer_id | BIGINT | 20 | 买家ID |
+| amount | DECIMAL | 12,2 | 交易金额 |
+| status | TINYINT | 4 | 状态(0:待付款 1:待发货 2:运输中 3:已完成) |
+| cattle_ids | JSON | | 关联牛只ID列表 |
+
+### 2.4 基础信息
+#### 新闻资讯表 (`cms_news`)
+| 字段名 | 类型 | 长度 | 说明 |
+| :--- | :--- | :--- | :--- |
+| id | BIGINT | 20 | 主键ID |
+| title | VARCHAR | 200 | 标题 |
+| category | VARCHAR | 50 | 分类(policy/industry/platform) |
+| content | LONGTEXT | | 内容(HTML) |
+| view_count | INT | 11 | 浏览量 |
+| publish_time | DATETIME | | 发布时间 |
+
+## 3. 索引设计
+- `sys_user`: `uk_username` (username), `uk_phone` (phone)
+- `biz_cattle`: `uk_ear_tag` (ear_tag), `idx_farm_id` (farm_id)
+- `trade_order`: `uk_order_no` (order_no), `idx_seller` (seller_id), `idx_buyer` (buyer_id)
diff --git a/docs/整个项目的架构文档.md b/docs/整个项目的架构文档.md
new file mode 100644
index 0000000..f048764
--- /dev/null
+++ b/docs/整个项目的架构文档.md
@@ -0,0 +1,87 @@
+# 云南智慧牛产业平台 - 总体架构文档
+
+## 1. 架构概述
+本平台采用前后端分离的微服务/模块化单体架构，旨在构建一个覆盖肉牛产业全生命周期的数字化服务体系。平台由官网门户、管理后台、微信小程序和后端服务四大核心部分组成。
+
+## 2. 技术架构图
+```mermaid
+graph TD
+    User[用户/企业/政府] -->|HTTPS| Gateway[Nginx 网关]
+    
+    subgraph "前端应用层 (Frontend)"
+        Gateway -->|/| Website[官网门户 (Vue3 + Bootstrap5)]
+        Gateway -->|/admin| Admin[管理后台 (Vue3 + Element Plus)]
+        Gateway -->|/api| Backend[后端服务 API]
+        User -->|微信| MiniProgram[微信小程序 (Uni-app)]
+        MiniProgram -->|HTTPS| Backend
+    end
+
+    subgraph "后端服务层 (Backend)"
+        Backend[Java Spring Boot / Node.js NestJS]
+        Backend --> Service1[用户中心]
+        Backend --> Service2[牛只档案]
+        Backend --> Service3[交易中心]
+        Backend --> Service4[金融服务]
+    end
+
+    subgraph "数据存储层 (Data)"
+        Backend --> MySQL[(MySQL 主数据库)]
+        Backend --> Redis[(Redis 缓存)]
+        Backend --> OSS[(对象存储 - 图片/视频)]
+    end
+```
+
+## 3. 技术栈选型
+
+### 3.1 前端层
+- **官网门户 (Website)**
+    - **框架**: Vue 3 + Vite
+    - **UI库**: Bootstrap 5 (响应式适配)
+    - **图表**: ECharts 5
+    - **说明**: 侧重于品牌展示和信息发布，要求SEO友好和极致的响应式体验。
+
+- **管理后台 (Admin System)**
+    - **框架**: Vue 3 + Vite
+    - **UI库**: Element Plus
+    - **状态管理**: Pinia
+    - **说明**: 侧重于复杂表单处理、数据管理和权限控制。
+
+- **移动端/小程序 (Mini Program)**
+    - **框架**: Uni-app (Vue 3 语法)
+    - **说明**: 一套代码编译发布到微信小程序、H5等多端，方便养殖户和监管员现场作业。
+
+### 3.2 后端层 (Backend)
+- **开发语言**: Java (推荐) 或 Node.js
+- **核心框架**: Spring Boot 3 (Java) 或 NestJS (Node.js)
+- **ORM框架**: MyBatis-Plus / TypeORM
+- **API规范**: RESTful API + Swagger/OpenAPI 文档
+
+### 3.3 数据层
+- **关系型数据库**: MySQL 8.0 (存储业务数据)
+- **缓存数据库**: Redis 6.0 (会话管理、热点数据)
+- **文件存储**: MinIO 或 阿里云 OSS (牛只照片、监控视频)
+
+### 3.4 基础设施 & 运维
+- **操作系统**: CentOS 10
+- **容器化**: Docker + Docker Compose
+- **反向代理**: Nginx
+- **CI/CD**: Jenkins 或 GitLab CI (规划中)
+
+## 4. 核心业务流程
+1. **数据采集**: 养殖户通过小程序录入牛只信息（出生、防疫、称重）。
+2. **数据上链**: 关键数据（如检疫证明）存证，确保不可篡改。
+3. **交易撮合**: 买卖双方在平台发布需求，平台进行匹配并提供资金托管。
+4. **金融授信**: 银行根据养殖户的资产数据（牛只数量、价值）进行授信放款。
+5. **监管预警**: 异常移动、疫情风险自动触发预警推送给政府监管端。
+
+## 5. 目录结构规划
+```
+/
+├── website/          # 官网源代码 (Vue3 + Bootstrap)
+├── admin-system/     # 管理后台源代码 (Vue3 + Element Plus) - 待初始化
+├── mini-program/     # 小程序源代码 (Uni-app) - 待初始化
+├── backend/          # 后端服务源代码 (Spring Boot) - 待初始化
+├── docs/             # 项目文档
+├── scripts/          # 运维脚本
+└── README.md         # 项目入口说明
+```
diff --git a/docs/整个项目需求文档.md b/docs/整个项目需求文档.md
new file mode 100644
index 0000000..3a6296f
--- /dev/null
+++ b/docs/整个项目需求文档.md
@@ -0,0 +1,48 @@
+# 云南智慧牛产业平台 - 需求规格说明书
+
+## 1. 项目背景
+云南省肉牛产业基础雄厚，但长期存在“散、小、乱”的问题，面临信息不对称、融资难、监管难等挑战。本项目旨在利用物联网、大数据等新一代信息技术，搭建全省统一的肉牛产业服务平台，实现全产业链的数字化转型。
+
+## 2. 项目目标
+1. **建立牛只电子身份证**：实现一牛一码，全生命周期可追溯。
+2. **构建可信交易体系**：解决活体交易中的信任问题，降低交易成本。
+3. **创新金融服务模式**：利用生物资产数字化，盘活养殖户资产，引入金融活水。
+4. **提升政府监管效能**：实现疫情精准防控和产业发展科学决策。
+
+## 3. 用户角色
+- **养殖户/企业**：牛只录入、日常养殖管理、发布买卖信息、申请贷款/保险。
+- **交易商/经纪人**：浏览牛源、发布收购需求、参与竞价。
+- **金融机构**：查看资产评估报告、审批贷款、保险理赔。
+- **政府监管部门**：查看产业大数据、防疫监管、屠宰检疫。
+- **普通访客**：浏览行业资讯、政策法规、平台公示信息。
+
+## 4. 功能需求概览
+
+### 4.1 智慧养殖模块
+- **档案管理**：牛只基本信息（品种、月龄、体重）、系谱信息。
+- **繁育管理**：发情监测、配种记录、妊娠检查、产犊记录。
+- **健康管理**：免疫记录、诊疗记录、用药记录。
+- **环境监测**：集成温湿度、氨气等传感器数据。
+
+### 4.2 牛只交易模块
+- **供需大厅**：买卖信息发布与搜索。
+- **在线竞拍**：直播看牛、在线出价、保证金管理。
+- **资金托管**：第三方支付集成，确认收货后分账。
+- **物流运输**：运输车辆预约、轨迹实时追踪。
+
+### 4.3 金融服务模块
+- **资产评估**：基于养殖数据的牛只价值动态评估模型。
+- **活体抵押**：在线申请抵押贷款，电子耳标+电子围栏远程监管。
+- **养殖保险**：在线投保、一键报案、远程定损。
+
+### 4.4 政府监管模块
+- **产业地图**：全省肉牛存栏分布热力图。
+- **防疫追溯**：疫苗发放核销、免疫覆盖率统计。
+- **检疫出证**：电子检疫证申请与核验。
+- **无害化处理**：病死牛处理流程全记录。
+
+## 5. 非功能需求
+- **高并发**：支持全省 50万+ 养殖户同时在线。
+- **高可用**：系统可用性 >= 99.9%。
+- **数据安全**：核心数据加密存储，符合等保三级要求。
+- **易用性**：针对农村用户群体优化界面，提供语音输入等便捷功能。
diff --git a/docs/测试文档.md b/docs/测试文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/用户手册文档.md b/docs/用户手册文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/管理后台开发文档.md b/docs/管理后台开发文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/管理后台接口设计文档.md b/docs/管理后台接口设计文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/管理后台架构文档.md b/docs/管理后台架构文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/管理后台需求文档.md b/docs/管理后台需求文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/运维文档.md b/docs/运维文档.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/部署文档.md b/docs/部署文档.md
new file mode 100644
index 0000000..991d642
--- /dev/null
+++ b/docs/部署文档.md
@@ -0,0 +1,121 @@
+# 云南智慧牛产业平台 - 部署与运维文档
+
+## 1. 部署环境
+- **操作系统**: CentOS 10 64位
+- **Web服务器**: Nginx 1.24+
+- **容器引擎**: Docker 24.0+
+- **容器编排**: Docker Compose 2.20+
+
+## 2. 目录结构规范
+服务器根目录建议为 `/opt/caiyunniu/`：
+```
+/opt/caiyunniu/
+├── docker-compose.yml    # 容器编排文件
+├── nginx/
+│   ├── conf.d/           # Nginx 配置文件
+│   ├── certs/            # SSL 证书
+│   └── html/             # 前端静态资源
+│       ├── website/      # 官网构建产物 (dist)
+│       └── admin/        # 管理后台构建产物 (dist)
+├── mysql/
+│   ├── data/             # 数据库数据卷
+│   └── init/             # 初始化 SQL 脚本
+├── redis/
+│   └── data/             # Redis 数据卷
+└── logs/                 # 应用日志
+```
+
+## 3. 前端部署 (Website)
+
+### 3.1 本地构建
+在开发机执行：
+```bash
+cd website
+npm install
+npm run build
+```
+构建完成后，生成的 `dist` 目录即为部署包。
+
+### 3.2 上传文件
+将 `dist` 目录内容上传至服务器：
+```bash
+scp -r dist/* user@server_ip:/opt/caiyunniu/nginx/html/website/
+```
+
+### 3.3 Nginx 配置示例
+```nginx
+server {
+    listen 80;
+    server_name www.caiyunniu.com;
+
+    # 强制跳转 HTTPS
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name www.caiyunniu.com;
+
+    ssl_certificate /etc/nginx/certs/caiyunniu.pem;
+    ssl_certificate_key /etc/nginx/certs/caiyunniu.key;
+
+    # 官网前端
+    location / {
+        root /usr/share/nginx/html/website;
+        index index.html;
+        try_files $uri $uri/ /index.html; # Vue Router History 模式支持
+    }
+
+    # 后端 API 代理
+    location /api/ {
+        proxy_pass http://backend-service:8080/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+## 4. 后端部署 (Backend)
+
+### 4.1 Docker 镜像构建
+在后端项目根目录创建 `Dockerfile`：
+```dockerfile
+FROM openjdk:17-jdk-alpine
+VOLUME /tmp
+COPY target/*.jar app.jar
+ENTRYPOINT ["java","-jar","/app.jar"]
+```
+
+### 4.2 Docker Compose 编排
+```yaml
+version: '3'
+services:
+  backend-service:
+    build: ./backend
+    ports:
+      - "8080:8080"
+    environment:
+      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/caiyunniu?useSSL=false
+      - SPRING_REDIS_HOST=redis
+    depends_on:
+      - mysql
+      - redis
+
+  mysql:
+    image: mysql:8.0
+    environment:
+      MYSQL_ROOT_PASSWORD: strong_password
+    volumes:
+      - ./mysql/data:/var/lib/mysql
+
+  redis:
+    image: redis:6.0
+    volumes:
+      - ./redis/data:/data
+```
+
+## 5. 运维常用命令
+- **启动所有服务**: `docker-compose up -d`
+- **查看日志**: `docker-compose logs -f backend-service`
+- **重启服务**: `docker-compose restart backend-service`
+- **Nginx 重载配置**: `docker exec -it nginx nginx -s reload`
diff --git a/website/.vite/deps/_metadata.json b/website/.vite/deps/_metadata.json
new file mode 100644
index 0000000..1f49854
--- /dev/null
+++ b/website/.vite/deps/_metadata.json
@@ -0,0 +1,8 @@
+{
+  "hash": "dcd6c0c3",
+  "configHash": "e557ffb3",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "f2f05487",
+  "optimized": {},
+  "chunks": {}
+}
\ No newline at end of file
diff --git a/website/.vite/deps/package.json b/website/.vite/deps/package.json
new file mode 100644
index 0000000..3dbc1ca
--- /dev/null
+++ b/website/.vite/deps/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/website/about.html b/website/about.html
new file mode 100644
index 0000000..860107b
--- /dev/null
+++ b/website/about.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>关于我们 - 云南智慧牛产业平台</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <!--[if lt IE 9]>
+      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <style>
+        .about-header {
+            background-image: url('images/about-header.jpg');
+            background-size: cover;
+            background-position: center;
+            color: white;
+            padding: 120px 0 100px;
+            text-align: center;
+            position: relative;
+        }
+        .about-header::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.6);
+        }
+        .about-header .container {
+            position: relative;
+            z-index: 1;
+        }
+        .timeline {
+            position: relative;
+            padding: 40px 0;
+            list-style: none;
+        }
+        .timeline:before {
+            content: " ";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 50%;
+            width: 4px;
+            margin-left: -2px;
+            background-color: #ebeef5;
+            border-radius: 2px;
+        }
+        .timeline > li {
+            position: relative;
+            margin-bottom: 40px;
+        }
+        .timeline > li:before,
+        .timeline > li:after {
+            content: " ";
+            display: table;
+        }
+        .timeline > li:after {
+            clear: both;
+        }
+        .timeline > li > .timeline-panel {
+            float: left;
+            position: relative;
+            width: 45%;
+            padding: 25px;
+            border: 1px solid #ebeef5;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+            background: #fff;
+            transition: all 0.3s;
+        }
+        .timeline > li > .timeline-panel:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            border-color: #409EFF;
+        }
+        .timeline > li > .timeline-badge {
+            z-index: 100;
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            width: 24px;
+            height: 24px;
+            margin-left: -12px;
+            border-radius: 50%;
+            background-color: #409EFF;
+            border: 4px solid #fff;
+            box-shadow: 0 0 0 2px #409EFF;
+        }
+        .timeline > li.timeline-inverted > .timeline-panel {
+            float: right;
+        }
+        .timeline-title {
+            margin-top: 0;
+            color: #303133;
+            font-weight: bold;
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+        .timeline-body p {
+            color: #606266;
+            font-size: 15px;
+            line-height: 1.6;
+            margin-bottom: 0;
+        }
+        .text-muted i {
+            margin-right: 5px;
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                    <span class="sr-only">切换导航</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
+            </div>
+            <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="solutions.html">解决方案</a></li>
+                    <li><a href="news.html">新闻中心</a></li>
+                    <li class="active"><a href="about.html">关于我们</a></li>
+                    <li><a href="help.html">帮助中心</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                    <li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="about-header">
+        <div class="container">
+            <h1 class="animated fadeInDown">关于我们</h1>
+            <p class="lead animated fadeInUp delay-1s">用科技连接牧场与餐桌，让养牛更简单</p>
+        </div>
+    </div>
+
+    <!-- 公司简介 -->
+    <div class="section-container">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 wow fadeInLeft">
+                    <h2 class="section-title">平台背景</h2>
+                    <div class="section-divider" style="margin-left: 0;"></div>
+                    <p class="lead">云南智慧牛产业平台是响应国家乡村振兴战略，依托云南省丰富的畜牧资源，由顶尖技术团队打造的综合性服务平台。</p>
+                    <p>我们致力于解决传统养殖中的信息不对称、融资难、监管难等痛点。平台通过物联网、大数据、区块链等技术，构建了从养殖到餐桌的全产业链数字化闭环，为政府、企业、养殖户、金融机构提供一站式服务。</p>
+                    <p>目前，平台已覆盖全省16个州市，服务养殖户超过5万户，管理牛只超过80万头，成为云南省数字农业的标杆项目。</p>
+                </div>
+                <div class="col-md-6 wow fadeInRight">
+                    <img src="images/about-header.jpg" class="img-responsive img-rounded shadow-lg" alt="团队合作" style="margin-top: 20px;">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 发展历程 -->
+    <div class="section-container bg-gray">
+        <div class="container">
+            <div class="text-center">
+                <h2 class="section-title">发展历程</h2>
+                <div class="section-divider"></div>
+            </div>
+            
+            <ul class="timeline">
+                <li class="wow fadeInUp" data-wow-delay="0.2s">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                        <div class="timeline-heading">
+                            <h4 class="timeline-title">2024年1月</h4>
+                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 起步</small></p>
+                        </div>
+                        <div class="timeline-body">
+                            <p>云南智慧牛产业平台项目正式立项，组建核心研发团队。</p>
+                        </div>
+                    </div>
+                </li>
+                <li class="timeline-inverted wow fadeInUp" data-wow-delay="0.4s">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                        <div class="timeline-heading">
+                            <h4 class="timeline-title">2024年6月</h4>
+                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 上线</small></p>
+                        </div>
+                        <div class="timeline-body">
+                            <p>平台V1.0版本发布，在昆明、曲靖等地开展试点应用。</p>
+                        </div>
+                    </div>
+                </li>
+                <li class="wow fadeInUp" data-wow-delay="0.6s">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                        <div class="timeline-heading">
+                            <h4 class="timeline-title">2024年12月</h4>
+                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 突破</small></p>
+                        </div>
+                        <div class="timeline-body">
+                            <p>平台注册养殖户突破1万户，在栏牛只超过10万头，获得政府表彰。</p>
+                        </div>
+                    </div>
+                </li>
+                <li class="timeline-inverted wow fadeInUp" data-wow-delay="0.8s">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                        <div class="timeline-heading">
+                            <h4 class="timeline-title">2025年5月</h4>
+                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 升级</small></p>
+                        </div>
+                        <div class="timeline-body">
+                            <p>V2.0版本发布，新增活体抵押贷、在线交易大厅等核心功能，开启全面推广。</p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h3>联系我们</h3>
+                    <p>电话：400-888-8888</p>
+                    <p>邮箱：contact@caiyunniu.com</p>
+                    <p>地址：云南省昆明市高新技术产业开发区</p>
+                </div>
+                <div class="col-md-4">
+                    <h3>快速链接</h3>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html">关于平台</a></li>
+                        <li><a href="solutions.html">核心服务</a></li>
+                        <li><a href="help.html">帮助中心</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h3>关注我们</h3>
+                    <p>微信公众号：云南智慧牛</p>
+                </div>
+            </div>
+            <div class="footer-bottom text-center">
+                <p>&copy; 2025 云南智慧牛产业平台 版权所有</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="js/wow.min.js"></script>
+    <script>
+        new WOW().init();
+
+        // Navbar Scroll Effect
+        $(document).ready(function(){
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 50) {
+                    $('.navbar-default').addClass('navbar-scrolled');
+                } else {
+                    $('.navbar-default').removeClass('navbar-scrolled');
+                }
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/contact.html b/website/contact.html
new file mode 100644
index 0000000..785756a
--- /dev/null
+++ b/website/contact.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>联系我们 - 云南智慧牛产业平台</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <!--[if lt IE 9]>
+      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <style>
+        .contact-header {
+            background-image: url('images/contact-header.jpg');
+            background-size: cover;
+            background-position: center;
+            color: white;
+            padding: 120px 0 80px;
+            text-align: center;
+            position: relative;
+        }
+        .contact-header::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.6);
+        }
+        .contact-header .container {
+            position: relative;
+            z-index: 1;
+        }
+        .contact-card {
+            text-align: center;
+            padding: 40px 20px;
+            border: 1px solid #ebeef5;
+            border-radius: 12px;
+            margin-bottom: 30px;
+            transition: all 0.3s;
+            background: #fff;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+        }
+        .contact-card:hover {
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            transform: translateY(-10px);
+            border-color: #409EFF;
+        }
+        .contact-icon {
+            font-size: 48px;
+            color: #409EFF;
+            margin-bottom: 25px;
+        }
+        .map-container {
+            height: 450px;
+            background-color: #f5f7fa;
+            margin-top: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #909399;
+            font-size: 18px;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid #ebeef5;
+        }
+        .form-control {
+            height: 46px;
+            border-radius: 4px;
+            box-shadow: none;
+            border-color: #dcdfe6;
+        }
+        .form-control:focus {
+            border-color: #409EFF;
+            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+        }
+        textarea.form-control {
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                    <span class="sr-only">切换导航</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
+            </div>
+            <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="solutions.html">解决方案</a></li>
+                    <li><a href="news.html">新闻中心</a></li>
+                    <li><a href="about.html">关于我们</a></li>
+                    <li><a href="help.html">帮助中心</a></li>
+                    <li class="active"><a href="contact.html">联系我们</a></li>
+                    <li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="contact-header">
+        <div class="container">
+            <h1 class="animated fadeInDown">联系我们</h1>
+            <p class="lead animated fadeInUp delay-1s">无论是业务咨询还是技术支持，我们随时为您服务</p>
+        </div>
+    </div>
+
+    <div class="container" style="margin-top: 50px; margin-bottom: 80px;">
+        <div class="row animated fadeInUp">
+            <div class="col-md-4">
+                <div class="contact-card">
+                    <i class="glyphicon glyphicon-map-marker contact-icon"></i>
+                    <h3>公司地址</h3>
+                    <p>云南省昆明市高新技术产业开发区科高路999号</p>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="contact-card">
+                    <i class="glyphicon glyphicon-earphone contact-icon"></i>
+                    <h3>联系电话</h3>
+                    <p>400-888-8888</p>
+                    <p>0871-12345678</p>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="contact-card">
+                    <i class="glyphicon glyphicon-envelope contact-icon"></i>
+                    <h3>电子邮箱</h3>
+                    <p>contact@caiyunniu.com</p>
+                    <p>support@caiyunniu.com</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="row" style="margin-top: 40px;">
+            <div class="col-md-6 wow fadeInLeft">
+                <h2>在线留言</h2>
+                <div class="section-divider" style="margin-left: 0;"></div>
+                <p class="text-muted">请填写以下表单，我们的工作人员会在24小时内与您联系。</p>
+                <form>
+                    <div class="form-group">
+                        <label for="name">您的姓名</label>
+                        <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
+                    </div>
+                    <div class="form-group">
+                        <label for="phone">联系电话</label>
+                        <input type="tel" class="form-control" id="phone" placeholder="请输入您的手机号码">
+                    </div>
+                    <div class="form-group">
+                        <label for="email">电子邮箱</label>
+                        <input type="email" class="form-control" id="email" placeholder="请输入您的电子邮箱">
+                    </div>
+                    <div class="form-group">
+                        <label for="message">留言内容</label>
+                        <textarea class="form-control" id="message" rows="5" placeholder="请详细描述您的需求或建议"></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-lg">提交留言</button>
+                </form>
+            </div>
+            <div class="col-md-6 wow fadeInRight">
+                <div class="map-container">
+                    <img src="https://via.placeholder.com/600x450.png?text=Map+Placeholder" alt="Map" style="width: 100%; height: 100%; object-fit: cover;">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h3>联系我们</h3>
+                    <p>电话：400-888-8888</p>
+                    <p>邮箱：contact@caiyunniu.com</p>
+                    <p>地址：云南省昆明市高新技术产业开发区</p>
+                </div>
+                <div class="col-md-4">
+                    <h3>快速链接</h3>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html">关于平台</a></li>
+                        <li><a href="solutions.html">核心服务</a></li>
+                        <li><a href="help.html">帮助中心</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h3>关注我们</h3>
+                    <p>微信公众号：云南智慧牛</p>
+                </div>
+            </div>
+            <div class="footer-bottom text-center">
+                <p>&copy; 2025 云南智慧牛产业平台 版权所有</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="js/wow.min.js"></script>
+    <script>
+        new WOW().init();
+
+        // Navbar Scroll Effect
+        $(document).ready(function(){
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 50) {
+                    $('.navbar-default').addClass('navbar-scrolled');
+                } else {
+                    $('.navbar-default').removeClass('navbar-scrolled');
+                }
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/css/animate.min.css b/website/css/animate.min.css
new file mode 100644
index 0000000..f3f1068
--- /dev/null
+++ b/website/css/animate.min.css
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -https://daneden.github.io/animate.css/
+ * Version - 3.7.2
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2019 Daniel Eden
+ */
+
+@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion:reduce),(print){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}}
\ No newline at end of file
diff --git a/website/css/style.css b/website/css/style.css
new file mode 100644
index 0000000..a3a528f
--- /dev/null
+++ b/website/css/style.css
@@ -0,0 +1,397 @@
+/* Reset & Common */
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
+    color: #333;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.6;
+}
+
+a {
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+a:hover, a:focus {
+    text-decoration: none;
+}
+
+/* Navbar */
+.navbar-default {
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    border: none;
+    padding: 15px 0;
+    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    backdrop-filter: blur(10px);
+}
+
+.navbar-default.navbar-scrolled {
+    padding: 8px 0;
+    background-color: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+}
+
+.navbar-brand {
+    font-size: 26px;
+    font-weight: 800;
+    color: #409EFF !important;
+    padding-top: 10px;
+    letter-spacing: -0.5px;
+    transition: all 0.3s;
+}
+
+.navbar-scrolled .navbar-brand {
+    font-size: 24px;
+}
+
+.navbar-nav > li > a {
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133 !important;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    position: relative;
+    transition: color 0.3s;
+}
+
+/* Navbar Link Underline Animation */
+.navbar-nav > li > a::after {
+    content: '';
+    position: absolute;
+    bottom: 12px;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background-color: #409EFF;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transform: translateX(-50%);
+}
+
+.navbar-nav > li:hover > a::after,
+.navbar-nav > li.active > a::after {
+    width: 80%;
+}
+
+.navbar-nav > li.active > a,
+.navbar-nav > li > a:hover {
+    color: #409EFF !important;
+    background-color: transparent !important;
+}
+
+/* Mobile Toggle Button */
+.navbar-toggle {
+    border: none;
+    background-color: transparent !important;
+    margin-top: 18px;
+}
+
+.navbar-toggle .icon-bar {
+    background-color: #303133;
+    width: 24px;
+    height: 2px;
+    border-radius: 1px;
+    transition: all 0.3s;
+}
+
+.navbar-toggle:hover .icon-bar {
+    background-color: #409EFF;
+}
+
+/* When opened */
+.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
+    opacity: 0;
+}
+.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(4) {
+    transform: rotate(-45deg) translate(5px, -5px);
+}
+
+.navbar-btn {
+    margin-top: 12px;
+    border-radius: 20px;
+    padding: 8px 25px;
+    font-weight: 500;
+    box-shadow: 0 4px 6px rgba(64, 158, 255, 0.2);
+    transition: all 0.3s;
+    border: none;
+    background: linear-gradient(135deg, #409EFF 0%, #3a8ee6 100%);
+}
+
+.navbar-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(64, 158, 255, 0.3);
+    background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
+}
+
+/* Hero Carousel */
+.carousel-inner .item {
+    height: 650px;
+    background-size: cover;
+    background-position: center;
+}
+
+.carousel-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5));
+}
+
+.carousel-caption {
+    bottom: 25%;
+    padding-bottom: 30px;
+}
+
+.carousel-caption h1 {
+    font-size: 56px;
+    font-weight: 800;
+    text-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    margin-bottom: 25px;
+    letter-spacing: 1px;
+}
+
+.carousel-caption p {
+    font-size: 22px;
+    margin-bottom: 40px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    font-weight: 300;
+}
+
+.btn-lg {
+    padding: 12px 35px;
+    font-size: 18px;
+    border-radius: 30px;
+}
+
+/* Sections */
+.section-container {
+    padding: 100px 0;
+}
+
+.section-title {
+    font-size: 40px;
+    font-weight: 700;
+    margin-bottom: 15px;
+    color: #303133;
+    position: relative;
+    display: inline-block;
+}
+
+.section-subtitle {
+    font-size: 18px;
+    color: #909399;
+    margin-bottom: 40px;
+}
+
+.section-divider {
+    width: 60px;
+    height: 5px;
+    background-color: #409EFF;
+    margin: 20px auto;
+    border-radius: 3px;
+}
+
+.bg-gray {
+    background-color: #f5f7fa;
+}
+
+/* Service Cards */
+.service-card {
+    background: #fff;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    margin-bottom: 30px;
+    height: 340px;
+    border: 1px solid #ebeef5;
+}
+
+.hover-lift:hover {
+    transform: translateY(-12px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
+}
+
+.service-icon-wrapper {
+    height: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    position: relative;
+}
+
+.service-icon-wrapper::after {
+    content: '';
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+    right: 0;
+    height: 40px;
+    background: #fff;
+    transform: skewY(-4deg);
+}
+
+.service-icon {
+    font-size: 56px;
+    z-index: 1;
+}
+
+.service-content {
+    padding: 25px;
+    text-align: center;
+}
+
+.service-content h3 {
+    margin-top: 10px;
+    margin-bottom: 15px;
+    font-size: 22px;
+    font-weight: 600;
+    color: #303133;
+}
+
+.service-content p {
+    color: #606266;
+    margin-bottom: 20px;
+    height: 48px;
+    overflow: hidden;
+    font-size: 15px;
+}
+
+/* Data Section */
+.data-section {
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    color: #fff;
+    position: relative;
+    background-attachment: fixed;
+}
+
+.section-title.text-white {
+    color: #fff;
+}
+
+.section-divider.bg-white {
+    background-color: #fff;
+    opacity: 0.8;
+}
+
+.data-item {
+    margin-bottom: 40px;
+    padding: 20px;
+}
+
+.data-item .number {
+    font-size: 56px;
+    font-weight: 800;
+    font-family: 'DIN Alternate', 'Arial', sans-serif;
+    margin-bottom: 10px;
+    background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 5px 15px rgba(0,0,0,0.15);
+}
+
+.data-item .label {
+    font-size: 20px;
+    opacity: 0.9;
+    font-weight: 300;
+}
+
+/* Footer */
+.footer {
+    background-color: #26292e;
+    color: #909399;
+    padding: 80px 0 30px;
+    font-size: 14px;
+}
+
+.footer h3 {
+    font-size: 18px;
+    color: #fff;
+    margin-bottom: 30px;
+    font-weight: 600;
+    position: relative;
+    padding-bottom: 15px;
+    letter-spacing: 0.5px;
+}
+
+.footer h3::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 30px;
+    height: 2px;
+    background-color: #409EFF;
+}
+
+.footer p {
+    margin-bottom: 15px;
+    line-height: 1.8;
+}
+
+.footer ul.list-unstyled li {
+    margin-bottom: 12px;
+}
+
+.footer a {
+    color: #909399;
+    text-decoration: none;
+    transition: all 0.3s;
+    display: inline-block;
+}
+
+.footer a:hover {
+    color: #409EFF;
+    padding-left: 5px;
+}
+
+.footer-bottom {
+    margin-top: 60px;
+    padding-top: 30px;
+    border-top: 1px solid rgba(255,255,255,0.05);
+    font-size: 13px;
+    color: #606266;
+}
+
+/* Back to Top */
+#back-to-top {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    z-index: 9999;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    line-height: 46px;
+    background: #409EFF;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    display: none;
+    font-size: 20px;
+    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.4);
+    transition: all 0.3s;
+}
+
+#back-to-top:hover {
+    background: #66b1ff;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(64, 158, 255, 0.5);
+}
+
+/* Responsive Fixes */
+@media (max-width: 768px) {
+    .navbar-brand { font-size: 22px; }
+    .carousel-inner .item { height: 400px; }
+    .carousel-caption h1 { font-size: 32px; margin-bottom: 10px; }
+    .carousel-caption p { font-size: 16px; margin-bottom: 20px; }
+    .section-container { padding: 60px 0; }
+    .section-title { font-size: 30px; }
+    .data-item .number { font-size: 36px; }
+    .footer { padding: 40px 0 20px; }
+    .footer h3 { margin-top: 30px; }
+}
diff --git a/website/help.html b/website/help.html
new file mode 100644
index 0000000..1c113c9
--- /dev/null
+++ b/website/help.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>帮助中心 - 云南智慧牛产业平台</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <!--[if lt IE 9]>
+      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <style>
+        .help-header {
+            background-image: url('images/help-header.jpg');
+            background-size: cover;
+            background-position: center;
+            color: white;
+            padding: 120px 0 100px;
+            text-align: center;
+            position: relative;
+        }
+        .help-header::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.6);
+        }
+        .help-header .container {
+            position: relative;
+            z-index: 1;
+        }
+        .search-box {
+            max-width: 600px;
+            margin: 30px auto 0;
+            position: relative;
+        }
+        .search-box input {
+            height: 56px;
+            font-size: 16px;
+            border-radius: 28px;
+            padding-left: 25px;
+            padding-right: 60px;
+            border: none;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+        .search-box .btn {
+            position: absolute;
+            right: 5px;
+            top: 5px;
+            height: 46px;
+            width: 46px;
+            border-radius: 50%;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #409EFF;
+            border: none;
+            transition: all 0.3s;
+        }
+        .search-box .btn:hover {
+            transform: scale(1.05);
+            background: #66b1ff;
+        }
+        .panel-group .panel {
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            border: 1px solid #ebeef5;
+            margin-bottom: 15px;
+            overflow: hidden;
+        }
+        .panel-default > .panel-heading {
+            background-color: #fff;
+            border: none;
+            padding: 0;
+        }
+        .panel-title > a {
+            display: block;
+            text-decoration: none;
+            font-weight: 600;
+            color: #303133;
+            padding: 18px 20px;
+            transition: all 0.3s;
+        }
+        .panel-title > a:hover {
+            color: #409EFF;
+            background-color: #fcfcfc;
+        }
+        .panel-title > a .glyphicon {
+            margin-right: 10px;
+            color: #409EFF;
+            font-size: 14px;
+        }
+        .panel-body {
+            border-top: 1px solid #f0f2f5;
+            padding: 20px;
+            color: #606266;
+            line-height: 1.8;
+        }
+        .list-group-item {
+            border: none;
+            padding: 12px 20px;
+            color: #606266;
+            border-radius: 4px !important;
+            margin-bottom: 5px;
+            transition: all 0.2s;
+        }
+        .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
+            background-color: #ecf5ff;
+            color: #409EFF;
+            border: none;
+            font-weight: bold;
+        }
+        .list-group-item:hover {
+            background-color: #f5f7fa;
+            color: #409EFF;
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                    <span class="sr-only">切换导航</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
+            </div>
+            <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="solutions.html">解决方案</a></li>
+                    <li><a href="news.html">新闻中心</a></li>
+                    <li><a href="about.html">关于我们</a></li>
+                    <li class="active"><a href="help.html">帮助中心</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                    <li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="help-header">
+        <div class="container">
+            <h1 class="animated fadeInDown">帮助中心</h1>
+            <p class="lead animated fadeInUp delay-1s">有什么可以帮您？</p>
+            <div class="search-box animated fadeInUp delay-2s">
+                <input type="text" class="form-control" placeholder="搜索问题关键词，如“如何注册”">
+                <button class="btn btn-primary"><i class="glyphicon glyphicon-search" style="color: white;"></i></button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container" style="margin-top: 50px; margin-bottom: 80px;">
+        <div class="row">
+            <div class="col-md-3 wow fadeInLeft">
+                <div class="list-group">
+                    <a href="#" class="list-group-item active">常见问题</a>
+                    <a href="#" class="list-group-item">账号管理</a>
+                    <a href="#" class="list-group-item">牛只录入</a>
+                    <a href="#" class="list-group-item">交易指南</a>
+                    <a href="#" class="list-group-item">金融服务</a>
+                </div>
+            </div>
+            <div class="col-md-9 wow fadeInRight">
+                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="headingOne">
+                            <h4 class="panel-title">
+                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                    <i class="glyphicon glyphicon-question-sign"></i> 如何注册成为平台会员？
+                                </a>
+                            </h4>
+                        </div>
+                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+                            <div class="panel-body">
+                                您可以点击页面右上角的“登录/注册”按钮，选择“注册”，填写您的手机号码并获取验证码即可完成注册。如果是企业用户，注册后需要在个人中心进行企业认证。
+                            </div>
+                        </div>
+                    </div>
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="headingTwo">
+                            <h4 class="panel-title">
+                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                    <i class="glyphicon glyphicon-question-sign"></i> 忘记密码怎么办？
+                                </a>
+                            </h4>
+                        </div>
+                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+                            <div class="panel-body">
+                                在登录页面点击“忘记密码”，输入您注册时的手机号码，通过短信验证码验证身份后，即可重置密码。
+                            </div>
+                        </div>
+                    </div>
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="headingThree">
+                            <h4 class="panel-title">
+                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                                    <i class="glyphicon glyphicon-question-sign"></i> 发布的牛只信息需要审核吗？
+                                </a>
+                            </h4>
+                        </div>
+                        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+                            <div class="panel-body">
+                                是的，为了保证交易的真实性和安全性，所有发布的牛只信息都需要经过平台审核。审核通常在1-2个工作日内完成，审核结果会通过短信通知您。
+                            </div>
+                        </div>
+                    </div>
+                    <div class="panel panel-default">
+                        <div class="panel-heading" role="tab" id="headingFour">
+                            <h4 class="panel-title">
+                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                                    <i class="glyphicon glyphicon-question-sign"></i> 申请活体抵押贷款需要什么条件？
+                                </a>
+                            </h4>
+                        </div>
+                        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
+                            <div class="panel-body">
+                                申请人需为平台实名认证用户，且牛只已佩戴智能耳标并录入系统满3个月。具体额度和利率根据您的养殖规模和信用状况由合作银行评估决定。
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="text-center" style="margin-top: 50px;">
+                    <h3>没找到答案？</h3>
+                    <p class="text-muted">您可以直接联系我们的客服人员</p>
+                    <a href="contact.html" class="btn btn-primary btn-lg">联系客服</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h3>联系我们</h3>
+                    <p>电话：400-888-8888</p>
+                    <p>邮箱：contact@caiyunniu.com</p>
+                    <p>地址：云南省昆明市高新技术产业开发区</p>
+                </div>
+                <div class="col-md-4">
+                    <h3>快速链接</h3>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html">关于平台</a></li>
+                        <li><a href="solutions.html">核心服务</a></li>
+                        <li><a href="help.html">帮助中心</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h3>关注我们</h3>
+                    <p>微信公众号：云南智慧牛</p>
+                </div>
+            </div>
+            <div class="footer-bottom text-center">
+                <p>&copy; 2025 云南智慧牛产业平台 版权所有</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="js/wow.min.js"></script>
+    <script>
+        new WOW().init();
+
+        // Navbar Scroll Effect
+        $(document).ready(function(){
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 50) {
+                    $('.navbar-default').addClass('navbar-scrolled');
+                } else {
+                    $('.navbar-default').removeClass('navbar-scrolled');
+                }
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/images/about-header.jpg b/website/images/about-header.jpg
new file mode 100644
index 0000000..f80bc40
Binary files /dev/null and b/website/images/about-header.jpg differ
diff --git a/website/images/contact-header.jpg b/website/images/contact-header.jpg
new file mode 100644
index 0000000..31b977a
Binary files /dev/null and b/website/images/contact-header.jpg differ
diff --git a/website/images/help-header.jpg b/website/images/help-header.jpg
new file mode 100644
index 0000000..b365eaf
Binary files /dev/null and b/website/images/help-header.jpg differ
diff --git a/website/images/hero-1.jpg b/website/images/hero-1.jpg
new file mode 100644
index 0000000..ebfad2f
Binary files /dev/null and b/website/images/hero-1.jpg differ
diff --git a/website/images/hero-2.jpg b/website/images/hero-2.jpg
new file mode 100644
index 0000000..018df4f
Binary files /dev/null and b/website/images/hero-2.jpg differ
diff --git a/website/images/hero-3.jpg b/website/images/hero-3.jpg
new file mode 100644
index 0000000..331f800
--- /dev/null
+++ b/website/images/hero-3.jpg
@@ -0,0 +1 @@
+<html><body>404</body></html>
\ No newline at end of file
diff --git a/website/images/news-header.jpg b/website/images/news-header.jpg
new file mode 100644
index 0000000..e77d217
Binary files /dev/null and b/website/images/news-header.jpg differ
diff --git a/website/index.html b/website/index.html
new file mode 100644
index 0000000..602f167
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>云南智慧牛产业平台 - 数字化驱动畜牧业未来</title>
+    <!-- Bootstrap 3 -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
+    <!--[if lt IE 9]>
+      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+                    <span class="sr-only">切换导航</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
+            </div>
+
+            <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li class="active"><a href="index.html">首页</a></li>
+                    <li><a href="solutions.html">解决方案</a></li>
+                    <li><a href="news.html">新闻中心</a></li>
+                    <li><a href="about.html">关于我们</a></li>
+                    <li><a href="help.html">帮助中心</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                    <li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 轮播图 (Hero Section) -->
+    <div id="carousel-hero" class="carousel slide" data-ride="carousel">
+        <ol class="carousel-indicators">
+            <li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
+            <li data-target="#carousel-hero" data-slide-to="1"></li>
+            <li data-target="#carousel-hero" data-slide-to="2"></li>
+        </ol>
+        <div class="carousel-inner" role="listbox">
+            <div class="item active" style="background-image: url('images/hero-1.jpg');">
+                <div class="carousel-overlay"></div>
+                <div class="carousel-caption">
+                    <h1 class="animated fadeInDown">云南智慧牛产业平台</h1>
+                    <p class="animated fadeInUp delay-1s">数字化驱动畜牧业未来，打造全产业链智慧生态</p>
+                    <p class="animated fadeInUp delay-2s"><a class="btn btn-lg btn-primary" href="#" role="button">立即体验</a> <a class="btn btn-lg btn-default" href="#" role="button" style="background: transparent; color: white; border: 2px solid white;">了解更多</a></p>
+                </div>
+            </div>
+            <div class="item" style="background-image: url('images/hero-2.jpg');">
+                <div class="carousel-overlay"></div>
+                <div class="carousel-caption">
+                    <h1 class="animated fadeInDown">智慧养殖解决方案</h1>
+                    <p class="animated fadeInUp delay-1s">物联网+大数据，让养殖更轻松、更高效</p>
+                    <p class="animated fadeInUp delay-2s"><a class="btn btn-lg btn-primary" href="solutions.html" role="button">查看方案</a></p>
+                </div>
+            </div>
+            <div class="item" style="background-image: url('images/hero-3.jpg');">
+                <div class="carousel-overlay"></div>
+                <div class="carousel-caption">
+                    <h1 class="animated fadeInDown">可信牛只交易</h1>
+                    <p class="animated fadeInUp delay-1s">全程溯源，资金托管，让交易更放心</p>
+                    <p class="animated fadeInUp delay-2s"><a class="btn btn-lg btn-primary" href="#" role="button">进入交易大厅</a></p>
+                </div>
+            </div>
+        </div>
+        <a class="left carousel-control" href="#carousel-hero" role="button" data-slide="prev">
+            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+            <span class="sr-only">上一张</span>
+        </a>
+        <a class="right carousel-control" href="#carousel-hero" role="button" data-slide="next">
+            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+            <span class="sr-only">下一张</span>
+        </a>
+    </div>
+
+    <!-- 平台简介 -->
+    <section class="section-container text-center">
+        <div class="container">
+            <h2 class="section-title">平台简介</h2>
+            <div class="section-divider"></div>
+            <div class="row">
+                <div class="col-md-8 col-md-offset-2">
+                    <p class="lead text-muted">
+                        <span class="text-primary">云南智慧牛产业平台</span>（原彩云牛畜牧管理系统）致力于通过物联网、大数据、人工智能等先进技术，为畜牧业提供从养殖、交易、金融到监管的全方位数字化解决方案。
+                    </p>
+                    <p class="text-muted">我们旨在提升管理效率，降低运营成本，保障食品安全，推动产业升级，助力云南肉牛产业高质量发展。</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 核心服务 -->
+    <section class="section-container bg-gray">
+        <div class="container">
+            <div class="text-center">
+                <h2 class="section-title">核心服务</h2>
+                <p class="section-subtitle">打造全产业链闭环服务体系</p>
+                <div class="section-divider"></div>
+            </div>
+            <div class="row" style="margin-top: 40px;">
+                <div class="col-sm-6 col-md-3">
+                    <div class="service-card hover-lift">
+                        <div class="service-icon-wrapper" style="background: linear-gradient(135deg, #409EFF 0%, #3a8ee6 100%);">
+                            <i class="glyphicon glyphicon-dashboard service-icon"></i>
+                        </div>
+                        <div class="service-content">
+                            <h3>智慧养殖</h3>
+                            <p>牛只档案、健康监测、繁殖管理、饲料管理，实现精细化养殖。</p>
+                            <a href="solutions.html?tab=farming" class="btn btn-link">查看详情 &rarr;</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-md-3">
+                    <div class="service-card hover-lift">
+                        <div class="service-icon-wrapper" style="background: linear-gradient(135deg, #67C23A 0%, #5daf34 100%);">
+                            <i class="glyphicon glyphicon-shopping-cart service-icon"></i>
+                        </div>
+                        <div class="service-content">
+                            <h3>牛只交易</h3>
+                            <p>在线交易大厅、价格行情、供需匹配、安全支付，让交易更便捷。</p>
+                            <a href="solutions.html?tab=trading" class="btn btn-link">查看详情 &rarr;</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-md-3">
+                    <div class="service-card hover-lift">
+                        <div class="service-icon-wrapper" style="background: linear-gradient(135deg, #E6A23C 0%, #cf9236 100%);">
+                            <i class="glyphicon glyphicon-yen service-icon"></i>
+                        </div>
+                        <div class="service-content">
+                            <h3>金融服务</h3>
+                            <p>活体抵押贷款、养殖保险、风险评估，解决资金难题。</p>
+                            <a href="solutions.html?tab=finance" class="btn btn-link">查看详情 &rarr;</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-md-3">
+                    <div class="service-card hover-lift">
+                        <div class="service-icon-wrapper" style="background: linear-gradient(135deg, #F56C6C 0%, #dd6161 100%);">
+                            <i class="glyphicon glyphicon-stats service-icon"></i>
+                        </div>
+                        <div class="service-content">
+                            <h3>政府监管</h3>
+                            <p>数据上报、合规检查、疫情预警、追溯体系，助力精准监管。</p>
+                            <a href="solutions.html?tab=government" class="btn btn-link">查看详情 &rarr;</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 平台数据 -->
+    <section class="section-container data-section">
+        <div class="container">
+            <div class="text-center text-white">
+                <h2 class="section-title text-white">平台数据</h2>
+                <div class="section-divider bg-white"></div>
+            </div>
+            <div class="row" style="margin-top: 40px;">
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.2s">
+                            <div class="number" data-symbol="+">1200</div>
+                            <div class="label">入驻企业</div>
+                        </div>
+                        <div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.4s">
+                            <div class="number" data-symbol="+">50000</div>
+                            <div class="label">在栏牛只</div>
+                        </div>
+                        <div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.6s">
+                            <div class="number">350000000</div>
+                            <div class="label">累计交易额</div>
+                        </div>
+                        <div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.8s">
+                            <div class="number" data-symbol="%">100</div>
+                            <div class="label">安全溯源</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div id="main-chart" style="width: 100%; height: 350px;"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 底部 Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h3>联系我们</h3>
+                    <p>电话：400-888-8888</p>
+                    <p>邮箱：contact@caiyunniu.com</p>
+                    <p>地址：云南省昆明市高新技术产业开发区</p>
+                </div>
+                <div class="col-md-4">
+                    <h3>快速链接</h3>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html">关于平台</a></li>
+                        <li><a href="solutions.html">核心服务</a></li>
+                        <li><a href="help.html">帮助中心</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h3>关注我们</h3>
+                    <p>微信公众号：云南智慧牛</p>
+                    <p>获取最新行业资讯和平台动态</p>
+                </div>
+            </div>
+            <div class="footer-bottom text-center">
+                <p>&copy; 2025 云南智慧牛产业平台 版权所有</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Back to Top -->
+    <div id="back-to-top" title="回到顶部">
+        <i class="glyphicon glyphicon-chevron-up"></i>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
+    <script src="js/wow.min.js"></script>
+    <script>
+        // Initialize WOW.js
+        new WOW().init();
+
+        // Smooth Scroll
+        $(document).ready(function(){
+            // Counter Animation
+            $('.data-item .number').each(function () {
+                $(this).prop('Counter',0).animate({
+                    Counter: $(this).text().replace(/,/g, '').replace(/\+/g, '')
+                }, {
+                    duration: 2500,
+                    easing: 'swing',
+                    step: function (now) {
+                        var text = Math.ceil(now).toLocaleString();
+                        if($(this).data('symbol')) {
+                            text += $(this).data('symbol');
+                        }
+                        $(this).text(text);
+                    }
+                });
+            });
+
+            // Add smooth scrolling to all links
+            $("a").on('click', function(event) {
+                if (this.hash !== "") {
+                    event.preventDefault();
+                    var hash = this.hash;
+                    $('html, body').animate({
+                        scrollTop: $(hash).offset().top
+                    }, 800, function(){
+                        window.location.hash = hash;
+                    });
+                }
+            });
+
+            // Back to Top Button
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 300) {
+                    $('#back-to-top').fadeIn();
+                } else {
+                    $('#back-to-top').fadeOut();
+                }
+            });
+
+            $('#back-to-top').click(function() {
+                $('html, body').animate({scrollTop: 0}, 800);
+                return false;
+            });
+
+            // Navbar Scroll Effect
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 50) {
+                    $('.navbar-default').addClass('navbar-scrolled');
+                } else {
+                    $('.navbar-default').removeClass('navbar-scrolled');
+                }
+            });
+        });
+
+        // ECharts 初始化
+        var chartDom = document.getElementById('main-chart');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+            title: {
+                text: '月度交易额趋势',
+                textStyle: { color: '#fff' },
+                left: 'center'
+            },
+            tooltip: {
+                trigger: 'axis'
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: { color: '#fff' },
+                axisLine: { lineStyle: { color: '#fff' } }
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: { color: '#fff' },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
+            },
+            series: [
+                {
+                    name: '交易额 (万元)',
+                    type: 'line',
+                    smooth: true,
+                    data: [1200, 1320, 1010, 1340, 2900, 3500],
+                    itemStyle: { color: '#409EFF' },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
+                            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
+                        ])
+                    }
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+
+        // 响应式图表
+        window.addEventListener('resize', function() {
+            myChart.resize();
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/js/wow.min.js b/website/js/wow.min.js
new file mode 100644
index 0000000..a692251
--- /dev/null
+++ b/website/js/wow.min.js
@@ -0,0 +1,2 @@
+/*! WOW - v1.1.2 - 2015-04-07
+* Copyright (c) 2015 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);
\ No newline at end of file
diff --git a/website/news.html b/website/news.html
new file mode 100644
index 0000000..db7b4f0
--- /dev/null
+++ b/website/news.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>新闻中心 - 云南智慧牛产业平台</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <!--[if lt IE 9]>
+      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <style>
+        .news-header {
+            background-image: url('images/news-header.jpg');
+            background-size: cover;
+            background-position: center;
+            color: white;
+            padding: 120px 0 80px;
+            text-align: center;
+            position: relative;
+        }
+        .news-header::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+        }
+        .news-header .container {
+            position: relative;
+            z-index: 1;
+        }
+        .news-item {
+            border-bottom: 1px solid #ebeef5;
+            padding: 25px 0;
+            transition: all 0.3s;
+            position: relative;
+        }
+        .news-item:hover {
+            background-color: #fcfcfc;
+            padding-left: 10px;
+            border-left: 3px solid #409EFF;
+        }
+        .news-date {
+            color: #909399;
+            font-size: 14px;
+            margin-bottom: 8px;
+            display: inline-block;
+            background: #f0f2f5;
+            padding: 2px 8px;
+            border-radius: 4px;
+        }
+        .news-title {
+            font-size: 20px;
+            font-weight: 600;
+            color: #303133;
+            margin-top: 5px;
+            margin-bottom: 12px;
+        }
+        .news-title a {
+            color: #303133;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .news-title a:hover {
+            color: #409EFF;
+        }
+        .news-summary {
+            color: #606266;
+            font-size: 15px;
+            line-height: 1.8;
+            margin-bottom: 0;
+        }
+        .nav-tabs {
+            border-bottom: 2px solid #ebeef5;
+            margin-bottom: 30px;
+        }
+        .nav-tabs > li > a {
+            font-size: 16px;
+            color: #606266;
+            border: none;
+            background: transparent;
+            padding: 10px 20px;
+        }
+        .nav-tabs > li.active > a, 
+        .nav-tabs > li.active > a:focus, 
+        .nav-tabs > li.active > a:hover {
+            border: none;
+            border-bottom: 3px solid #409EFF;
+            color: #409EFF;
+            background: transparent;
+            font-weight: bold;
+        }
+        .panel-default {
+            border: 1px solid #ebeef5;
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+        }
+        .panel-heading {
+            background-color: #f5f7fa;
+            font-weight: bold;
+            color: #303133;
+            padding: 15px;
+        }
+        .list-group-item {
+            border-color: #ebeef5;
+            padding: 12px 15px;
+            color: #606266;
+            transition: all 0.2s;
+        }
+        .list-group-item:hover {
+            background-color: #ecf5ff;
+            color: #409EFF;
+            border-left: 3px solid #409EFF;
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                    <span class="sr-only">切换导航</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
+            </div>
+            <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="solutions.html">解决方案</a></li>
+                    <li class="active"><a href="news.html">新闻中心</a></li>
+                    <li><a href="about.html">关于我们</a></li>
+                    <li><a href="help.html">帮助中心</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                    <li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="news-header">
+        <div class="container">
+            <h1 class="animated fadeInDown">新闻中心</h1>
+            <p class="lead animated fadeInUp delay-1s">掌握行业动态，洞察市场先机</p>
+        </div>
+    </div>
+
+    <div class="container" style="margin-top: 50px; margin-bottom: 80px;">
+        <div class="row">
+            <div class="col-md-9 wow fadeInLeft">
+                <!-- Tabs -->
+                <ul class="nav nav-tabs" role="tablist">
+                    <li role="presentation" class="active"><a href="#industry" role="tab" data-toggle="tab">行业资讯</a></li>
+                    <li role="presentation"><a href="#policy" role="tab" data-toggle="tab">政策法规</a></li>
+                    <li role="presentation"><a href="#platform" role="tab" data-toggle="tab">平台动态</a></li>
+                </ul>
+
+                <div class="tab-content">
+                    <div role="tabpanel" class="tab-pane active" id="industry">
+                        <div class="news-item">
+                            <div class="news-date">2025-05-20</div>
+                            <h3 class="news-title"><a href="#">云南肉牛产业大会在昆明隆重召开</a></h3>
+                            <p class="news-summary">来自全省各地的专家学者、企业家代表齐聚一堂，共商肉牛产业高质量发展大计...</p>
+                        </div>
+                        <div class="news-item">
+                            <div class="news-date">2025-05-18</div>
+                            <h3 class="news-title"><a href="#">本周活牛市场价格行情分析</a></h3>
+                            <p class="news-summary">受季节性需求影响，本周育肥牛价格小幅上涨，架子牛价格保持稳定...</p>
+                        </div>
+                        <div class="news-item">
+                            <div class="news-date">2025-05-15</div>
+                            <h3 class="news-title"><a href="#">数字化养殖技术助力传统牧场转型升级</a></h3>
+                            <p class="news-summary">某大型牧场引入智慧牛管理系统后，人工成本降低30%，产犊率提升15%...</p>
+                        </div>
+                    </div>
+                    
+                    <div role="tabpanel" class="tab-pane" id="policy">
+                        <div class="news-item">
+                            <div class="news-date">2025-04-10</div>
+                            <h3 class="news-title"><a href="#">关于印发《云南省肉牛产业发展十四五规划》的通知</a></h3>
+                            <p class="news-summary">明确提出到2025年，全省肉牛存栏量突破800万头，综合产值达到1000亿元...</p>
+                        </div>
+                    </div>
+                    
+                    <div role="tabpanel" class="tab-pane" id="platform">
+                        <div class="news-item">
+                            <div class="news-date">2025-06-01</div>
+                            <h3 class="news-title"><a href="#">平台V2.0版本正式上线公告</a></h3>
+                            <p class="news-summary">新增活体抵押贷在线申请功能，优化了交易大厅的搜索体验...</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pagination -->
+                <nav aria-label="Page navigation" class="text-center">
+                    <ul class="pagination">
+                        <li class="disabled">
+                            <a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
+                        </li>
+                        <li class="active"><a href="#">1</a></li>
+                        <li><a href="#">2</a></li>
+                        <li><a href="#">3</a></li>
+                        <li>
+                            <a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+
+            <div class="col-md-3 wow fadeInRight">
+                <div class="panel panel-default">
+                    <div class="panel-heading">热门推荐</div>
+                    <div class="list-group">
+                        <a href="#" class="list-group-item">2025年养殖补贴政策解读</a>
+                        <a href="#" class="list-group-item">如何提高母牛受胎率？专家支招</a>
+                        <a href="#" class="list-group-item">平台入驻企业突破1000家</a>
+                        <a href="#" class="list-group-item">关于严厉打击私屠滥宰的通告</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h3>联系我们</h3>
+                    <p>电话：400-888-8888</p>
+                    <p>邮箱：contact@caiyunniu.com</p>
+                    <p>地址：云南省昆明市高新技术产业开发区</p>
+                </div>
+                <div class="col-md-4">
+                    <h3>快速链接</h3>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html">关于平台</a></li>
+                        <li><a href="solutions.html">核心服务</a></li>
+                        <li><a href="help.html">帮助中心</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h3>关注我们</h3>
+                    <p>微信公众号：云南智慧牛</p>
+                </div>
+            </div>
+            <div class="footer-bottom text-center">
+                <p>&copy; 2025 云南智慧牛产业平台 版权所有</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="js/wow.min.js"></script>
+    <script>
+        new WOW().init();
+
+        // Navbar Scroll Effect
+        $(document).ready(function(){
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 50) {
+                    $('.navbar-default').addClass('navbar-scrolled');
+                } else {
+                    $('.navbar-default').removeClass('navbar-scrolled');
+                }
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/solutions.html b/website/solutions.html
new file mode 100644
index 0000000..13fd3fa
--- /dev/null
+++ b/website/solutions.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>解决方案 - 云南智慧牛产业平台</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <!--[if lt IE 9]>
+      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <style>
+        .solution-header {
+            background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
+            color: white;
+            padding: 120px 0 80px;
+            text-align: center;
+        }
+        .nav-tabs {
+            border-bottom: 2px solid #ebeef5;
+            margin-bottom: 40px;
+        }
+        .nav-tabs > li > a {
+            font-size: 18px;
+            padding: 15px 30px;
+            color: #606266;
+            border-radius: 4px 4px 0 0;
+            transition: all 0.3s;
+        }
+        .nav-tabs > li.active > a, 
+        .nav-tabs > li.active > a:focus, 
+        .nav-tabs > li.active > a:hover {
+            border: 1px solid #ebeef5;
+            border-bottom-color: transparent;
+            color: #409EFF;
+            font-weight: bold;
+            background-color: #fff;
+            border-top: 3px solid #409EFF;
+        }
+        .tab-pane {
+            padding: 20px 0;
+        }
+        .feature-list li {
+            margin-bottom: 15px;
+            font-size: 16px;
+            line-height: 1.8;
+            color: #555;
+        }
+        .feature-icon {
+            color: #67C23A;
+            margin-right: 12px;
+            font-size: 18px;
+        }
+        .solution-img {
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            transition: transform 0.3s;
+        }
+        .solution-img:hover {
+            transform: translateY(-5px);
+        }
+    </style>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                    <span class="sr-only">切换导航</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
+            </div>
+            <div class="collapse navbar-collapse" id="navbar-collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="index.html">首页</a></li>
+                    <li class="active"><a href="solutions.html">解决方案</a></li>
+                    <li><a href="news.html">新闻中心</a></li>
+                    <li><a href="about.html">关于我们</a></li>
+                    <li><a href="help.html">帮助中心</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                    <li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Page Header -->
+    <div class="solution-header">
+        <div class="container">
+            <h1 class="animated fadeInDown">解决方案</h1>
+            <p class="lead animated fadeInUp delay-1s">针对不同业务场景，提供专业的一站式解决方案</p>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="container" style="margin-top: 50px; margin-bottom: 80px;">
+        <!-- Tabs -->
+        <ul class="nav nav-tabs text-center animated fadeInUp" role="tablist" id="solutionTabs">
+            <li role="presentation" class="active"><a href="#farming" aria-controls="farming" role="tab" data-toggle="tab">智慧养殖</a></li>
+            <li role="presentation"><a href="#trading" aria-controls="trading" role="tab" data-toggle="tab">牛只交易</a></li>
+            <li role="presentation"><a href="#finance" aria-controls="finance" role="tab" data-toggle="tab">金融赋能</a></li>
+            <li role="presentation"><a href="#government" aria-controls="government" role="tab" data-toggle="tab">政府监管</a></li>
+        </ul>
+
+        <!-- Tab Panes -->
+        <div class="tab-content">
+            <!-- 智慧养殖 -->
+            <div role="tabpanel" class="tab-pane fade in active" id="farming">
+                <div class="row">
+                    <div class="col-md-6 wow fadeInLeft">
+                        <h2>智慧养殖解决方案</h2>
+                        <p class="lead text-muted">通过物联网设备和大数据分析，实现养殖全流程的数字化管理。</p>
+                        <ul class="list-unstyled feature-list">
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>牛只档案：</strong> 一牛一档，记录血统、生长、免疫全生命周期数据。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>健康监测：</strong> 智能耳标实时监测体温、活动量，疾病早发现。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>繁殖管理：</strong> 发情自动报警，提高配种成功率，缩短产犊间隔。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>环境监控：</strong> 温湿度、氨气浓度自动调节，提供舒适生长环境。</li>
+                        </ul>
+                        <br>
+                        <a href="#" class="btn btn-primary btn-lg">申请试用</a>
+                    </div>
+                    <div class="col-md-6 wow fadeInRight">
+                        <img src="images/hero-2.jpg" class="img-responsive img-rounded solution-img" alt="智慧养殖">
+                    </div>
+                </div>
+            </div>
+
+            <!-- 牛只交易 -->
+            <div role="tabpanel" class="tab-pane fade" id="trading">
+                <div class="row">
+                    <div class="col-md-6">
+                        <h2>可信牛只交易体系</h2>
+                        <p class="lead text-muted">打造公开、透明、公平的活牛交易市场，解决传统交易痛点。</p>
+                        <ul class="list-unstyled feature-list">
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>视频看牛：</strong> 360度高清视频展示，足不出户看好牛。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>在线竞价：</strong> 公开透明的竞价机制，发现真实市场价格。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>资金托管：</strong> 银行存管资金，确认收货后放款，保障资金安全。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>物流追踪：</strong> 专用运输车辆，全程定位监控，防止中途换牛。</li>
+                        </ul>
+                        <br>
+                        <a href="#" class="btn btn-success btn-lg">进入交易大厅</a>
+                    </div>
+                    <div class="col-md-6">
+                        <img src="images/hero-3.jpg" class="img-responsive img-rounded solution-img" alt="牛只交易">
+                    </div>
+                </div>
+            </div>
+
+            <!-- 金融赋能 -->
+            <div role="tabpanel" class="tab-pane fade" id="finance">
+                <div class="row">
+                    <div class="col-md-6">
+                        <h2>普惠金融服务</h2>
+                        <p class="lead text-muted">盘活生物资产，解决养殖户融资难、融资贵问题。</p>
+                        <div class="panel panel-default">
+                            <div class="panel-heading"><strong>活体抵押贷</strong></div>
+                            <div class="panel-body">
+                                <p>基于牛只资产评估，无需不动产抵押，快速放款。</p>
+                                <ul>
+                                    <li>额度：最高500万</li>
+                                    <li>利率：年化3.85%起</li>
+                                    <li>特点：一牛一码，远程监管</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="panel panel-default">
+                            <div class="panel-heading"><strong>养殖保险</strong></div>
+                            <div class="panel-body">
+                                <p>覆盖疾病、意外、自然灾害，理赔无忧。</p>
+                                <ul>
+                                    <li>费率：政府补贴 + 个人自付</li>
+                                    <li>理赔：在线定损，最快24小时到账</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <img src="https://images.unsplash.com/photo-1579621970563-ebec7560eb3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="img-responsive img-rounded solution-img" alt="金融服务">
+                    </div>
+                </div>
+            </div>
+
+            <!-- 政府监管 -->
+            <div role="tabpanel" class="tab-pane fade" id="government">
+                <div class="row">
+                    <div class="col-md-6">
+                        <h2>全链条监管平台</h2>
+                        <p class="lead text-muted">助力政府部门实现精准监管和科学决策。</p>
+                        <ul class="list-unstyled feature-list">
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>产业地图：</strong> 全省肉牛存栏分布热力图，产业结构一目了然。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>防疫追溯：</strong> 疫苗发放核销全记录，免疫覆盖率自动统计。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>检疫监管：</strong> 电子检疫证在线开具与核验，杜绝病害肉流入市场。</li>
+                            <li><i class="glyphicon glyphicon-ok feature-icon"></i> <strong>无害化处理：</strong> 病死牛处理流程全记录，防止二次污染。</li>
+                        </ul>
+                    </div>
+                    <div class="col-md-6">
+                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="img-responsive img-rounded solution-img" alt="政府监管">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h3>联系我们</h3>
+                    <p>电话：400-888-8888</p>
+                    <p>邮箱：contact@caiyunniu.com</p>
+                    <p>地址：云南省昆明市高新技术产业开发区</p>
+                </div>
+                <div class="col-md-4">
+                    <h3>快速链接</h3>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html">关于平台</a></li>
+                        <li><a href="solutions.html">核心服务</a></li>
+                        <li><a href="help.html">帮助中心</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h3>关注我们</h3>
+                    <p>微信公众号：云南智慧牛</p>
+                </div>
+            </div>
+            <div class="footer-bottom text-center">
+                <p>&copy; 2025 云南智慧牛产业平台 版权所有</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="js/wow.min.js"></script>
+    <script>
+        new WOW().init();
+        
+        // Navbar Scroll Effect & URL Tab
+        $(document).ready(function(){
+            // Navbar Scroll
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 50) {
+                    $('.navbar-default').addClass('navbar-scrolled');
+                } else {
+                    $('.navbar-default').removeClass('navbar-scrolled');
+                }
+            });
+
+            var urlParams = new URLSearchParams(window.location.search);
+            var tab = urlParams.get('tab');
+            if(tab){
+                $('.nav-tabs a[href="#' + tab + '"]').tab('show');
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file