/* VitaBoost Plus 产品落地页样式表 */
/* VitaBoost Plus 产品落地页样式表 */
/* 作者：开发团队 */
/* 最后更新：2024年 */

/* 全局样式重置 - 移除所有默认边距和内边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 包含边框和内边距在元素宽度内 */
}

/* 整体页面平滑滚动效果 */
html {
    scroll-behavior: smooth; /* 平滑滚动 */
    scroll-padding-top: 80px; /* 高度偏移避免固定导航栏遮挡 */
}

/* 页面主体样式设置 */
body {
    font-family: 'Arial', sans-serif; /* 设置字体 */
    line-height: 1.6; /* 设置行高 */
    color: #333; /* 设置文字颜色 */
}

/* 容器样式 - 限制最大宽度并居中 */
.container {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 20px; /* 左右内边距 */
}

/* 顶部导航栏样式 */
header {
    background: #fff; /* 背景颜色为白色 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影效果 */
    position: fixed; /* 固定定位 */
    width: 100%; /* 全宽 */
    top: 0; /* 顶部对齐 */
    z-index: 1001; /* 层级设置，确保在最上层（高于其他固定元素） */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
}

/* 导航栏内容布局 */
nav {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 1rem 0; /* 上下内边距 */
}

/* LOGO样式 */
.logo {
    font-size: 1.8rem; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    color: #2c7a2c; /* 绿色主题色 */
}

/* 导航链接列表 */
.nav-links {
    display: flex; /* 弹性布局 */
    list-style: none; /* 移除列表样式 */
    gap: 2rem; /* 链接间距 */
}

/* 导航链接样式 */
.nav-links a {
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 文字颜色 */
    font-weight: 500; /* 中等粗细 */
    transition: color 0.3s; /* 颜色过渡效果 */
}

/* 导航链接悬停效果 */
.nav-links a:hover {
    color: #2c7a2c; /* 悬停时变为绿色 */
}

/* 主要大图区域样式 */
.hero {
    background: linear-gradient(135deg, #2c7a2c 0%, #4caf50 100%); /* 渐变背景 */
    color: white; /* 白色文字 */
    padding: 140px 0 120px; /* 增加内边距（顶部留空给导航栏） */
    min-height: 750px; /* 增加最小高度 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
}

/* Hero内容布局 */
.hero-content {
    display: grid; /* 网格布局 */
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 5rem; /* 增加列间距 */
    align-items: center; /* 垂直对齐 */
    width: 100%; /* 全宽 */
    padding: 2rem 0; /* 增加上下内边距 */
}

/* 左侧文字内容区域 */
.hero-text {
    text-align: left; /* 左对齐 */
}

/* 右侧图片区域 */
.hero-image {
    text-align: center; /* 图片居中 */
    position: relative; /* 相对定位（为标签定位） */
    padding: 0 1rem; /* 增加左右内边距为更大的图片提供空间 */
    overflow: visible; /* 允许图片超出容器边界 */
}

/* 产品主图样式 */
.main-product-image {
    max-width: 160%; /* 增加最大宽度使图片更大 */
    width: 160%; /* 设置宽度为120% */
    height: auto; /* 高度自适应 */
    border-radius: 20px; /* 圆角 */
    box-shadow: 0 25px 50px rgba(0,0,0,0.3); /* 增强阴影效果 */
    transition: transform 0.3s ease; /* 变形过渡 */
    transform: scale(1.05); /* 默认放大5% */
    /* background-color: #ff6b35;  */
}

/* 产品图片悬停效果 */
.main-product-image:hover {
    transform: scale(1.1); /* 悬停时进一步放大 */
}

/* 产品特色标签 */
.product-badge {
    position: absolute; /* 绝对定位 */
    top: 50px; /* 距离顶部 */
    right: 200px; /* 距离右侧 */
    background: #ff6b35; /* 橙色背景 */
    color: white; /* 白色文字 */
    padding: 10px 18px; /* 增加内边距 */
    border-radius: 25px; /* 增加圆角 */
    font-size: 1rem; /* 增加字体大小 */
    font-weight: bold; /* 粗体 */
    box-shadow: 0 6px 15px rgba(255, 107, 53, 0.4); /* 增强阴影 */
    animation: pulse 2s infinite; /* 脉动动画 */
    z-index: 10; /* 设置层级确保在图片上方 */
}

/* 标签文字 */
.badge-text {
    display: block; /* 块级元素 */
}

/* 主标题样式 */
.hero h1 {
    font-size: 4rem; /* 增加字体大小 */
    margin-bottom: 1.5rem; /* 增加下边距 */
    font-weight: 700; /* 粗体 */
    line-height: 1.2; /* 设置行高 */
}

/* 副标题样式 */
.hero p {
    font-size: 1.4rem; /* 增加字体大小 */
    margin-bottom: 2.5rem; /* 增加下边距 */
    opacity: 0.9; /* 透明度 */
    line-height: 1.6; /* 设置行高 */
}

/* 行动召唤按钮样式 */
.cta-button {
    display: inline-block; /* 内联块级元素 */
    background: #ff6b35; /* 橙色背景 */
    color: white; /* 白色文字 */
    padding: 15px 36px; /* 增加内边距 */
    font-size: 1.3rem; /* 增加字体大小 */
    text-decoration: none; /* 移除下划线 */
    border-radius: 50px; /* 圆角 */
    font-weight: bold; /* 粗体 */
    transition: all 0.3s; /* 所有属性过渡效果 */
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3); /* 增强阴影效果 */
}

/* 按钮悬停效果 */
.cta-button:hover {
    background: #e55a2b; /* 悬停时颜色加深 */
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4); /* 增强阴影 */
}

/* 功能特性区域样式 */
.features {
    padding: 100px 0 80px; /* 上部增加内边距避免被导航栏遮挡 */
    background: #f8f9fa; /* 浅灰色背景 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 设置层级确保正常显示 */
    scroll-margin-top: 80px; /* 滚动时的顶部边距，避免被导航栏遮挡 */
}

/* 区域标题样式 */
.section-title {
    text-align: center; /* 文字居中 */
    font-size: 2.5rem; /* 字体大小 */
    margin-bottom: 3rem; /* 下边距 */
    color: #2c7a2c; /* 绿色主题色 */
}

/* 功能特性网格布局 */
.features-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格列 */
    gap: 2rem; /* 网格间距 */
}

/* 功能特性卡片样式 */
.feature-card {
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    text-align: center; /* 文字居中 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 阴影效果 */
    transition: transform 0.3s, box-shadow 0.3s; /* 变形和阴影过渡效果 */
    position: relative; /* 相对定位 */
    z-index: 2; /* 设置层级确保在背景上方 */
}

/* 功能卡片悬停效果 */
.feature-card:hover {
    transform: translateY(-10px); /* 悬停时向上移动更多 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* 增强阴影效果 */
    z-index: 10; /* 悬停时提高层级 */
}

/* 功能图标样式 */
.feature-icon {
    font-size: 3rem; /* 图标大小 */
    margin-bottom: 1rem; /* 下边距 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 80px; /* 固定高度 */
}

/* 功能图标中的图片样式 */
.feature-icon img {
    width: 60px; /* 图片宽度 */
    height: 60px; /* 图片高度 */
    object-fit: cover; /* 保持纵横比裁剪 */
    border-radius: 50%; /* 圆形图片 */
    box-shadow: 0 4px 15px rgba(44, 122, 44, 0.3); /* 绿色阴影 */
    transition: all 0.3s ease; /* 过渡效果 */
    border: 3px solid #2c7a2c; /* 绿色边框 */
}

/* 功能图标图片悬停效果 */
.feature-icon img:hover {
    transform: scale(1.1) rotate(5deg); /* 放大并旋转 */
    box-shadow: 0 6px 20px rgba(44, 122, 44, 0.4); /* 增强阴影 */
    border-color: #ff6b35; /* 悬停时改为橙色边框 */
}

/* 功能卡片标题样式 */
.feature-card h3 {
    font-size: 1.5rem; /* 字体大小 */
    margin-bottom: 1rem; /* 下边距 */
    color: #2c7a2c; /* 绿色主题色 */
}

/* 产品展示区域样式 */
.product {
    padding: 80px 0; /* 上下内边距 */
}

/* 产品内容布局 */
.product-content {
    display: grid; /* 网格布局 */
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 4rem; /* 列间距 */
    align-items: center; /* 垂直居中对齐 */
}

/* 产品图片区域 */
.product-image {
    text-align: center; /* 图片居中 */
}

/* 产品图片样式 */
.product-image img {
    max-width: 100%; /* 最大宽度100% */
    height: auto; /* 高度自适应 */
    border-radius: 15px; /* 圆角 */
}

/* 产品信息区域标题 */
.product-info h2 {
    font-size: 2.5rem; /* 字体大小 */
    margin-bottom: 1rem; /* 下边距 */
    color: #2c7a2c; /* 绿色主题色 */
}

/* 产品信息段落样式 */
.product-info p {
    font-size: 1.1rem; /* 字体大小 */
    margin-bottom: 1.5rem; /* 下边距 */
    color: #666; /* 深灰色 */
}

/* 产品优势列表样式 */
.benefits {
    list-style: none; /* 移除默认列表样式 */
    margin-bottom: 2rem; /* 下边距 */
}

/* 列表项样式 */
.benefits li {
    padding: 0.5rem 0; /* 上下内边距 */
    position: relative; /* 相对定位 */
    padding-left: 2rem; /* 左内边距（为图标留空间） */
}

/* 列表项前的勾选图标 */
.benefits li::before {
    content: "✓"; /* 勾选符号 */
    position: absolute; /* 绝对定位 */
    left: 0; /* 左对齐 */
    color: #2c7a2c; /* 绿色 */
    font-weight: bold; /* 粗体 */
    font-size: 1.2rem; /* 字体大小 */
}

/* 成分展示区域样式 */
.ingredients {
    padding: 80px 0; /* 上下内边距 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 渐变背景 */
}

/* 成分网格布局 */
.ingredient-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式网格 */
    gap: 2rem; /* 网格间距 */
    margin-top: 3rem; /* 顶部边距 */
}

/* 成分卡片样式 */
.ingredient-card {
    background: white; /* 白色背景 */
    padding: 1.5rem; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    text-align: center; /* 文字居中 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* 阴影效果 */
    transition: all 0.3s; /* 过渡效果 */
}

/* 成分卡片悬停效果 */
.ingredient-card:hover {
    transform: translateY(-5px); /* 向上移动 */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* 增强阴影 */
}

/* 成分卡片标题 */
.ingredient-card h4 {
    color: #2c7a2c; /* 绿色主题色 */
    margin-bottom: 0.5rem; /* 下边距 */
}

/* 成分图标样式 */
.ingredient-icon {
    margin-bottom: 1.5rem; /* 增加下边距 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 160px; /* 增加固定高度 */
}

/* 成分图标中的图片样式 */
.ingredient-icon img {
    width: 140px; /* 约10厘米宽度 */
    height: 140px; /* 约10厘米高度 */
    object-fit: cover; /* 保持纵横比裁剪 */
    border-radius: 12px; /* 增加圆角 */
    box-shadow: 0 6px 20px rgba(44, 122, 44, 0.3); /* 增强绿色阴影 */
    transition: all 0.3s ease; /* 过渡效果 */
    border: 4px solid #2c7a2c; /* 增加绿色边框 */
}

/* 成分图标图片悬停效果 */
.ingredient-icon img:hover {
    transform: scale(1.05); /* 轻微放大 */
    box-shadow: 0 8px 25px rgba(44, 122, 44, 0.4); /* 增强阴影 */
    border-color: #ff6b35; /* 悬停时改为橙色边框 */
}

/* 客户评价区域样式 */
.testimonials {
    padding: 80px 0; /* 上下内边距 */
    background: #f8f9fa; /* 浅灰色背景 */
}

/* 评价网格布局 */
.testimonials-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格列 */
    gap: 2rem; /* 网格间距 */
}

/* 单个评价卡片样式 */
.testimonial {
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 评价内容文本样式 */
.testimonial-text {
    font-style: italic; /* 斜体 */
    margin-bottom: 1rem; /* 下边距 */
    font-size: 1.1rem; /* 字体大小 */
}

/* 评价者信息样式 */
.testimonial-author {
    font-weight: bold; /* 粗体 */
    color: #2c7a2c; /* 绿色主题色 */
}

/* 星级评分样式 */
.stars {
    color: #ffc107; /* 金色星星 */
    margin-bottom: 1rem; /* 下边距 */
}

/* 信任指标区域样式 */
.trust-indicators {
    padding: 60px 0; /* 上下内边距 */
    background: white; /* 白色背景 */
    text-align: center; /* 文字居中 */
}

/* 信任指标网格布局 */
.trust-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 响应式网格 */
    gap: 2rem; /* 网格间距 */
    margin-top: 2rem; /* 顶部边距 */
}

/* 信任指标项样式 */
.trust-item {
    padding: 1rem; /* 内边距 */
}

/* 信任指标图片样式 */
.trust-item img {
    max-width: 100px; /* 最大宽度 */
    height: auto; /* 高度自适应 */
    margin-bottom: 1rem; /* 下边距 */
    opacity: 0.7; /* 透明度 */
    transition: opacity 0.3s; /* 透明度过渡 */
}

/* 信任指标图片悬停效果 */
.trust-item:hover img {
    opacity: 1; /* 悬停时完全不透明 */
}

/* FAQ常见问题区域样式 */
.faq {
    padding: 80px 0; /* 上下内边距 */
    background: #f8f9fa; /* 浅灰色背景 */
}

/* FAQ项目样式 */
.faq-item {
    background: white; /* 白色背景 */
    margin-bottom: 1rem; /* 下边距 */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* FAQ问题样式 */
.faq-question {
    padding: 1.5rem; /* 内边距 */
    background: white; /* 白色背景 */
    cursor: pointer; /* 鼠标指针 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    font-weight: bold; /* 粗体 */
    transition: background-color 0.3s; /* 背景颜色过渡 */
}

/* FAQ问题悬停效果 */
.faq-question:hover {
    background: #f8f9fa; /* 悬停时背景变色 */
}

/* FAQ图标样式 */
.faq-icon {
    transition: transform 0.3s; /* 变形过渡效果 */
    font-size: 1.2rem; /* 字体大小 */
}

/* FAQ图标旋转效果 */
.faq-icon.rotate {
    transform: rotate(180deg); /* 旋转180度 */
}

/* FAQ答案样式 */
.faq-answer {
    padding: 0 1.5rem; /* 左右内边距 */
    max-height: 0; /* 初始高度为0 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: max-height 0.3s ease, padding 0.3s ease; /* 高度和内边距过渡 */
    background: #f8f9fa; /* 浅灰色背景 */
}

/* FAQ答案激活状态 */
.faq-answer.active {
    max-height: 200px; /* 激活时最大高度 */
    padding: 1.5rem; /* 激活时内边距 */
}

/* 价格区域样式 */
.pricing {
    padding: 80px 0; /* 上下内边距 */
    background: linear-gradient(135deg, #2c7a2c 0%, #4caf50 100%); /* 渐变背景 */
    text-align: center; /* 文字居中 */
}

/* 价格区域标题样式 */
.pricing .section-title {
    color: white; /* 白色文字 */
}

/* 价格网格布局 */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 价格卡片样式 */
.pricing-card {
    background: white; /* 白色背景 */
    padding: 3rem; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    position: relative; /* 相对定位 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* 阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 热门套餐突出显示 */
.pricing-card.popular {
    transform: scale(1.05);
    border: 3px solid #ff6b35;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* 价格卡片悬停效果 */
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

/* 热门套餐悬停效果 */
.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-5px);
}

/* 价格标签样式 */
.pricing-badge {
    position: absolute; /* 绝对定位 */
    top: -15px; /* 距离顶部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中对齐 */
    background: #ff6b35; /* 橙色背景 */
    color: white; /* 白色文字 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    font-weight: bold; /* 粗体 */
    font-size: 0.9rem; /* 字体大小 */
}

/* 价格显示样式 */
.price {
    font-size: 3rem; /* 字体大小 */
    color: #2c7a2c; /* 绿色主题色 */
    font-weight: bold; /* 粗体 */
    margin: 1rem 0; /* 上下边距 */
}

/* 原价样式 */
.original-price {
    font-size: 1.5rem; /* 字体大小 */
    color: #999; /* 灰色 */
    text-decoration: line-through; /* 删除线 */
    margin-right: 10px; /* 右边距 */
}

/* 社交媒体联系区域样式 */
.social-contact {
    padding: 80px 0; /* 上下内边距 */
    background: linear-gradient(135deg, #2c7a2c 0%, #1e5a1e 100%); /* 渐变背景 */
    text-align: center; /* 文字居中 */
}

/* 社交媒体副标题 */
.social-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-bottom: 3rem;
    font-weight: 300;
}

/* 社交媒体按钮容器 */
.social-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* 社交媒体按钮样式 */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

/* 社交媒体图标 */
.social-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Facebook按钮 */
.social-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(24, 119, 242, 0.4);
}

/* Instagram按钮 */
.social-btn.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #e6683c;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 48, 108, 0.4);
}

/* Twitter按钮 */
.social-btn.twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(29, 161, 242, 0.4);
}

/* YouTube按钮 */
.social-btn.youtube:hover {
    background: #ff0000;
    border-color: #ff0000;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
}

/* Telegram按钮 */
.social-btn.telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4);
}

/* WhatsApp按钮 */
.social-btn.whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

/* 联系信息 */
.contact-info {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-info p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

.contact-info a {
    color: #ff6b35;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #fff;
    text-decoration: underline;
}

/* 页脚样式 */
footer {
    background: #1a1a1a; /* 深色背景 */
    color: white; /* 白色文字 */
    padding: 3rem 0 2rem; /* 上下内边距 */
}

/* 页脚内容布局 */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* 页脚区块 */
.footer-section {
    text-align: left;
}

/* 页脚标题 */
.footer-section h3,
.footer-section h4 {
    color: #4caf50; /* 绿色主题色 */
    margin-bottom: 1rem;
}

.footer-section h3 {
    font-size: 1.5rem;
}

.footer-section h4 {
    font-size: 1.2rem;
}

/* 页脚链接样式 */
.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #4caf50; /* 悬停时绿色 */
    text-decoration: underline;
}

/* 页脚底部 */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 1.5rem;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
}

/* 进度条样式 */
.progress-bar {
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左对齐 */
    width: 0%; /* 初始宽度 */
    height: 4px; /* 高度 */
    background: #ff6b35; /* 橙色背景 */
    z-index: 9999; /* 最高层级 */
    transition: width 0.1s; /* 宽度过渡效果 */
}

/* 返回顶部按钮样式 */
.back-to-top {
    position: fixed; /* 固定定位 */
    bottom: 20px; /* 距离底部 */
    right: 20px; /* 距离右侧 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    background: #2c7a2c; /* 绿色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形 */
    font-size: 1.5rem; /* 字体大小 */
    cursor: pointer; /* 鼠标指针 */
    opacity: 0; /* 初始透明 */
    visibility: hidden; /* 初始隐藏 */
    transition: all 0.3s; /* 过渡效果 */
    z-index: 1000; /* 层级 */
}

/* 返回顶部按钮显示状态 */
.back-to-top.show {
    opacity: 1; /* 完全不透明 */
    visibility: visible; /* 可见 */
}

/* 返回顶部按钮悬停效果 */
.back-to-top:hover {
    background: #1e5a1e; /* 悬停时颜色加深 */
    transform: translateY(-2px); /* 向上移动 */
}

/* 浮动WhatsApp客服按钮样式 */
.floating-whatsapp-btn {
    position: fixed; /* 固定定位 */
    bottom: 80px; /* 距离底部，在返回顶部按钮上方 */
    right: 20px; /* 距离右侧 */
    z-index: 1001; /* 高层级，在返回顶部按钮上方 */
    opacity: 1; /* 默认显示 */
    visibility: visible; /* 可见 */
    transition: all 0.3s ease; /* 过渡效果 */
}

.floating-whatsapp-btn a {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); /* WhatsApp绿色渐变 */
    color: white;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 25px; /* 圆角按钮 */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); /* 绿色阴影效果 */
    font-size: 0.9rem;
    font-weight: 600;
    gap: 8px; /* 图标和文字间距 */
    transition: all 0.3s ease;
    min-width: 140px; /* 最小宽度 */
    justify-content: center; /* 内容居中 */
}

/* WhatsApp图标样式 */
.whatsapp-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* WhatsApp按钮悬停效果 */
.floating-whatsapp-btn a:hover {
    background: linear-gradient(135deg, #128c7e 0%, #075e54 100%); /* 悬停时颜色加深 */
    transform: translateY(-3px) scale(1.05); /* 向上移动并放大 */
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); /* 增强阴影 */
}

/* 动画效果 - 脉动提醒 */
.floating-whatsapp-btn {
    animation: whatsappPulse 4s infinite;
}

@keyframes whatsappPulse {
    0%, 85%, 100% {
        transform: scale(1);
    }
    92% {
        transform: scale(1.05);
    }
}

/* 购买模态框样式 */
.purchase-modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 2000; /* 高层级 */
    left: 0; /* 左对齐 */
    top: 0; /* 顶部对齐 */
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
    backdrop-filter: blur(5px); /* 背景模糊 */
}

/* 购买模态框内容样式 */
.purchase-modal-content {
    background-color: white; /* 白色背景 */
    margin: 2% auto; /* 上下2%边距，水平居中 */
    padding: 2rem; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    width: 90%; /* 宽度90% */
    max-width: 600px; /* 最大宽度 */
    max-height: 90vh; /* 最大高度 */
    overflow-y: auto; /* 垂直滚动 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 阴影效果 */
    position: relative; /* 相对定位为关闭按钮定位 */
}

/* 购买模态框标题样式 */
.purchase-modal-content h2 {
    color: #2c7a2c; /* 绿色标题 */
    margin-bottom: 1.5rem; /* 下边距 */
    font-size: 1.8rem; /* 字体大小 */
    text-align: center; /* 居中对齐 */
    border-bottom: 2px solid #f0f0f0; /* 底部分割线 */
    padding-bottom: 1rem; /* 底部内边距 */
}

/* 选中套餐信息显示样式 */
.selected-package-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #2c7a2c;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.selected-package-info h3 {
    color: #2c7a2c;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.selected-package-info .selected-package-name {
    color: #ff6b35;
    font-weight: bold;
}

.selected-package-info .selected-package-desc {
    color: #666;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.selected-package-info .selected-package-price {
    color: #2c7a2c;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0;
}

/* 购买表单样式 */
.purchase-form {
    margin-top: 1rem; /* 顶部边距 */
}

/* 购买表单内的表单组样式 - 重写标签颜色 */
.purchase-form .form-group {
    margin-bottom: 1.5rem; /* 下边距 */
}

/* 购买表单内的标签样式 - 深色文字 */
.purchase-form .form-group label {
    display: block; /* 块级元素 */
    margin-bottom: 0.5rem; /* 下边距 */
    color: #333; /* 深色文字（适合白色背景） */
    font-weight: bold; /* 粗体 */
    font-size: 0.95rem; /* 字体大小 */
}

/* 购买表单内的输入框样式 */
.purchase-form .form-group input,
.purchase-form .form-group textarea,
.purchase-form .form-group select {
    width: 100%; /* 全宽 */
    padding: 12px; /* 内边距 */
    border: 2px solid #e0e0e0; /* 浅灰色边框 */
    border-radius: 8px; /* 圆角 */
    font-size: 1rem; /* 字体大小 */
    background: #fff; /* 白色背景 */
    color: #333; /* 深色文字 */
    transition: all 0.3s; /* 过渡效果 */
    box-sizing: border-box; /* 包含边框在宽度内 */
}

/* 购买表单输入框焦点状态 */
.purchase-form .form-group input:focus,
.purchase-form .form-group textarea:focus,
.purchase-form .form-group select:focus {
    outline: none; /* 移除默认轮廓 */
    border-color: #2c7a2c; /* 绿色边框 */
    box-shadow: 0 0 0 3px rgba(44, 122, 44, 0.1); /* 淡绿色阴影 */
}

/* 购买表单文本域样式 */
.purchase-form .form-group textarea {
    resize: vertical; /* 垂直调整大小 */
    min-height: 80px; /* 最小高度 */
}

/* 购买表单选择框样式 */
/* 购买表单占位符样式 */
.purchase-form .form-group input::placeholder,
.purchase-form .form-group textarea::placeholder {
    color: #999; /* 灰色占位符 */
    opacity: 1; /* 完全不透明 */
    font-style: italic; /* 斜体 */
}

/* 购买表单选择框默认选项样式 */
.purchase-form .form-group select option[value=""] {
    color: #999; /* 灰色文字 */
}

.purchase-form .form-group select {
    cursor: pointer; /* 鼠标指针 */
    appearance: none; /* 移除默认样式 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23666" d="M6 8L0 2h12z"/></svg>'); /* 下拉箭头 */
    background-repeat: no-repeat; /* 不重复 */
    background-position: right 12px center; /* 右侧位置 */
    background-size: 12px; /* 箭头大小 */
    padding-right: 35px; /* 右侧内边距为箭头留空间 */
}

/* 表单行样式 */
.form-row {
    display: grid; /* 网格布局 */
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 1rem; /* 列间距 */
    margin-bottom: 1rem; /* 下边距 */
}

/* 全宽表单行 */
.form-row.full-width {
    grid-template-columns: 1fr; /* 单列 */
}

/* 必填字段标记 */
.required {
    color: #e74c3c; /* 红色 */
    font-weight: bold; /* 粗体 */
}

/* 购买表单验证样式 */
.purchase-form .form-group input:invalid:not(:placeholder-shown),
.purchase-form .form-group select:invalid:not(:placeholder-shown),
.purchase-form .form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #e74c3c; /* 红色边框 */
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); /* 淡红色阴影 */
}

/* 购买表单有效样式 */
.purchase-form .form-group input:valid:not(:placeholder-shown),
.purchase-form .form-group select:valid:not(:placeholder-shown),
.purchase-form .form-group textarea:valid:not(:placeholder-shown) {
    border-color: #27ae60; /* 绿色边框 */
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1); /* 淡绿色阴影 */
}

/* 购买按钮区域 */
.purchase-buttons {
    display: flex; /* 弹性布局 */
    gap: 1rem; /* 按钮间距 */
    margin-top: 2rem; /* 顶部边距 */
}

/* 确认购买按钮样式 */
.confirm-purchase-btn {
    flex: 1; /* 占据剩余空间 */
    background: #2c7a2c; /* 绿色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 15px 30px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    font-size: 1.1rem; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    cursor: pointer; /* 鼠标指针 */
    transition: all 0.3s; /* 过渡效果 */
}

/* 确认购买按钮悬停效果 */
.confirm-purchase-btn:hover {
    background: #1e5a1e; /* 悬停时颜色加深 */
    transform: translateY(-2px); /* 向上移动 */
}

/* 取消按钮样式 */
.cancel-btn {
    background: #6c757d; /* 灰色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 15px 30px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    font-size: 1.1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标指针 */
    transition: all 0.3s; /* 过渡效果 */
}

/* 取消按钮悬停效果 */
.cancel-btn:hover {
    background: #5a6268; /* 悬停时颜色加深 */
}

/* 订单成功模态框样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 3000; /* 高层级 */
    left: 0; /* 左对齐 */
    top: 0; /* 顶部对齐 */
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
}

/* 模态框内容样式 */
.modal-content {
    background-color: white; /* 白色背景 */
    margin: 15% auto; /* 上下15%边距，水平居中 */
    padding: 2rem; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    width: 80%; /* 宽度80% */
    max-width: 500px; /* 最大宽度 */
    position: relative; /* 相对定位 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 阴影效果 */
}

/* 关闭按钮样式 */
.close {
    position: absolute; /* 绝对定位 */
    top: 15px; /* 距离顶部 */
    right: 20px; /* 距离右侧 */
    color: #aaa; /* 灰色 */
    font-size: 28px; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    cursor: pointer; /* 鼠标指针 */
}

/* 关闭按钮悬停效果 */
.close:hover {
    color: #333; /* 悬停时颜色加深 */
}

/* 加载动画样式 */
.loading {
    display: inline-block; /* 内联块级元素 */
    width: 16px; /* 宽度 */
    height: 16px; /* 高度 */
    border: 2px solid #ffffff; /* 白色边框 */
    border-radius: 50%; /* 圆形 */
    border-top-color: transparent; /* 顶部透明 */
    animation: spin 1s ease-in-out infinite; /* 旋转动画 */
}

/* 动画关键帧定义 */
@keyframes spin {
    to { transform: rotate(360deg); } /* 旋转360度 */
}

@keyframes pulse {
    0% { transform: scale(1); } /* 初始大小 */
    50% { transform: scale(1.05); } /* 放大 */
    100% { transform: scale(1); } /* 恢复 */
}

@keyframes fadeInUp {
    from {
        opacity: 0; /* 初始透明 */
        transform: translateY(30px); /* 向下偏移 */
    }
    to {
        opacity: 1; /* 完全不透明 */
        transform: translateY(0); /* 回到原位 */
    }
}

@keyframes slideIn {
    from {
        opacity: 0; /* 初始透明 */
        transform: translateX(-50px); /* 向左偏移 */
    }
    to {
        opacity: 1; /* 完全不透明 */
        transform: translateX(0); /* 回到原位 */
    }
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0px); /* 原位 */
    }
    50% {
        transform: translateY(-20px); /* 向上浮动 */
    }
}

/* 动画类样式 */
.fade-in {
    animation: fadeInUp 0.8s ease-out; /* 淡入向上动画 */
}

.slide-left {
    animation: slideIn 0.8s ease-out; /* 左滑动画 */
}

.slide-right {
    animation: slideIn 0.8s ease-out reverse; /* 右滑动画 */
}

.pulse-animation {
    animation: pulse 2s infinite; /* 脉动动画 */
}

.floating {
    animation: floating 3s ease-in-out infinite; /* 浮动动画 */
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
    /* 导航栏调整 */
    .nav-links {
        display: none; /* 隐藏导航链接 */
    }
    
    /* Hero区域调整 */
    .hero {
        min-height: 600px; /* 移动设备上的最小高度 */
        padding: 120px 0 100px; /* 调整内边距 */
    }
    
    .hero-content {
        grid-template-columns: 1fr; /* 单列布局 */
        text-align: center; /* 文字居中 */
        gap: 3rem; /* 调整间距 */
        padding: 1rem 0; /* 调整内边距 */
    }
    
    /* 在小屏幕上图片在文字下面 */
    .hero-image {
        order: 2; /* 图片排在第二位 */
        padding: 0; /* 移除内边距 */
    }
    
    /* 平板设备上的产品图片调整 */
    .main-product-image {
        max-width: 100%; /* 平板上恢复正常宽度 */
        width: 100%; /* 设置宽度为100% */
        transform: scale(1); /* 移除默认放大 */
    }
    
    .hero-text {
        order: 1; /* 文字排在第一位 */
    }
    
    /* 标题字体调整 */
    .hero h1 {
        font-size: 3rem; /* 移动设备上的字体大小 */
    }
    
    /* 产品内容调整 */
    .product-content {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 2rem; /* 减少间距 */
    }
    
    /* 功能网格调整 */
    .features-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    /* 成分网格调整 */
    .ingredient-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 调整最小宽度 */
    }
    
    /* 评价网格调整 */
    .testimonials-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    /* 价格网格调整 */
    .pricing-grid {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 1.5rem;
    }
    
    /* 社交媒体按钮调整 */
    .social-buttons {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        gap: 1rem;
    }
    
    /* 信任指标调整 */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    }
    
    /* 表单行调整 */
    .form-row {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    /* 购买按钮调整 */
    .purchase-buttons {
        flex-direction: column; /* 垂直布局 */
    }
    
    /* 模态框调整 */
    .purchase-modal-content {
        width: 95%; /* 增加宽度 */
        margin: 5% auto; /* 减少上下边距 */
    }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
    /* 容器内边距调整 */
    .container {
        padding: 0 15px; /* 减少左右内边距 */
    }
    
    /* 区域内边距调整 */
    .hero {
        padding: 100px 0 80px; /* 手机设备上的内边距 */
        min-height: 500px; /* 手机设备最小高度 */
    }
    
    .features,
    .product,
    .ingredients,
    .testimonials,
    .pricing,
    .social-contact,
    .faq {
        padding: 60px 0; /* 减少上下内边距 */
    }
    
    /* 社交媒体按钮调整 */
    .social-buttons {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        gap: 1rem;
    }
    
    /* 标题字体调整 */
    .hero h1 {
        font-size: 2.2rem; /* 手机设备上的字体大小 */
    }
    
    /* 手机设备上的产品图片调整 */
    .main-product-image {
        max-width: 95%; /* 手机上轻微减小 */
        width: 95%; /* 设置宽度为95% */
        transform: scale(1); /* 移除默认放大 */
    }
    
    .hero-image {
        padding: 0; /* 移除内边距 */
    }
    
    .section-title {
        font-size: 2rem; /* 减小区域标题字体 */
    }
    
    /* 功能卡片调整 */
    .feature-card {
        padding: 1.5rem; /* 减少内边距 */
    }
    
    /* 价格卡片调整 */
    .pricing-grid {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 1.5rem; /* 减少间距 */
        padding: 0 0.5rem; /* 减少内边距 */
    }
    
    .pricing-card {
        padding: 2rem; /* 减少内边距 */
    }
    
    /* 取消热门套餐的特殊缩放效果 */
    .pricing-card.popular {
        transform: none;
        border: 2px solid #ff6b35;
    }
    
    .pricing-card.popular:hover {
        transform: translateY(-5px);
    }
    
    /* 价格字体调整 */
    .price {
        font-size: 2.5rem; /* 减小字体 */
    }
    
    /* 信任指标调整为单列 */
    .trust-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    /* 社交媒体按钮调整 */
    .social-buttons {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 1rem;
    }
    
    .social-btn {
        padding: 0.8rem 1rem; /* 减小内边距 */
        font-size: 0.9rem; /* 减小字体 */
    }
    
    .social-icon {
        width: 20px; /* 减小图标 */
        height: 20px;
    }
    
    /* 返回顶部按钮调整 */
    .back-to-top {
        width: 45px; /* 减小宽度 */
        height: 45px; /* 减小高度 */
        font-size: 1.3rem; /* 减小字体 */
    }
    
    /* 浮动WhatsApp按钮移动设备调整 */
    .floating-whatsapp-btn {
        bottom: 70px; /* 调整位置 */
        right: 15px; /* 调整右边距 */
    }
    
    .floating-whatsapp-btn a {
        padding: 10px 14px; /* 减小内边距 */
        font-size: 0.8rem; /* 减小字体 */
        border-radius: 20px; /* 调整圆角 */
        min-width: 120px; /* 减小最小宽度 */
    }
    
    .whatsapp-icon {
        font-size: 1rem; /* 减小图标 */
    }
}

/* 所有主要区域滚动时的顶部边距设置 - 避免被固定导航栏遮挡 */
#home, #features, #product, #testimonials, #pricing, #contact, #faq {
    scroll-margin-top: 80px; /* 滚动时顶部边距 */
}

/* 社交媒体链接样式 */
.social-links {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* 圆形按钮样式 - 统一定义按钮基础样式 */
.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.social-button.facebook {
    color: #3b5998;
}

.social-button.telegram {
    color: #0088cc;
}

.social-button:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* 社交媒体图标样式 - 适配图片 */
.social-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* 移除社交媒体文字显示 */
.social-button span {
    display: none;
}

/* 移除联系客服文字样式 */










/* 右侧按钮的样式 */
.whatsapp-button {
    position: fixed;  /* 固定定位 */
    bottom: 20px;     /* 距离页面底部 20px */
    left: 20px;       /* 距离页面左侧 20px */
    z-index: 9999;    /* 确保按钮在最上层，防止被遮挡 */
    overflow: visible; /* 允许内容溢出 */
}

.whatsapp-icon {
    width: 50px;      /* 设置图标宽度 */
    height: 50px;     /* 设置图标高度 */
    


}

.whatsapp-icon:hover {
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}