/* ===== 全局样式 ===== */
/* 重置所有元素的默认边距和盒模型 */
* {
    margin: 0;                /* 移除所有元素的外边距 */
    padding: 0;               /* 移除所有元素的内边距 */
    box-sizing: border-box;   /* 使元素的宽度和高度包含padding和border，更容易控制布局 */
}

/* 页面主体样式 */
body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;  /* 字体优先使用微软雅黑，降级为Arial和无衬线字体 */
    color: #e0e0e0;           /* 浅灰色文字，在深色背景上提供良好对比度但不刺眼 */
    line-height: 1.6;         /* 行高为字体大小的1.6倍，提高可读性 */
    background-color: #121212; /* 深黑色背景，符合现代暗色主题设计 */
}

/* 主容器样式 - 包含侧边栏和主内容区 */
.container {
    display: flex;            /* 使用弹性布局，便于侧边栏和主内容的排列 */
    min-height: 100vh;        /* 最小高度为视口高度，确保即使内容少也能填满屏幕 */
}

/* ===== 左侧边栏样式 ===== */
.sidebar {
    width: 250px;             /* 固定宽度，为导航提供足够空间 */
    background-color: #1e1e1e; /* 深灰黑色背景，比主背景略浅，形成层次感 */
    color: #fff;              /* 白色文字，在深色背景上提供最佳可读性 */
    position: fixed;          /* 固定定位，使侧边栏在滚动时保持可见 */
    height: 100vh;            /* 高度为视口高度，确保侧边栏填满屏幕高度 */
    overflow-y: hidden;       /* 隐藏垂直滚动条，保持界面整洁 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);  /* 右侧阴影，增强深度感和分隔效果 */
    display: flex;            /* 使用弹性布局，便于垂直排列子元素 */
    flex-direction: column;   /* 子元素垂直排列 */
}

/* 品牌LOGO区域样式 */
.logo {
    padding: 15px 10px;       /* 上下15px、左右10px的内边距，提供适当空间 */
    text-align: center;       /* 文本居中对齐 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);  /* 底部细线边框，提供分隔效果 */
}

/* LOGO图片样式 */
.logo-image {
    width: 140px;              /* 固定宽度，确保LOGO大小合适 */
    height: auto;             /* 高度自动，保持图片比例 */
    margin-bottom: 2px;      /* 底部外边距，与文字LOGO保持间距 */
    display: block;           /* 块级显示，便于应用margin */
    margin-left: auto;        /* 左右外边距自动，实现水平居中 */
    margin-right: auto;
}

/* 品牌文字LOGO样式 */
.logo h1 {
    font-size: 24px;          /* 字体大小，确保醒目但不过大 */
    font-weight: bold;        /* 粗体，增强视觉重要性 */
    color: #fff;
    margin: 0;
}

/* 主导航菜单样式 */
.main-nav {
    list-style: none;          /* 移除列表项默认的项目符号 */
    padding: 0;                /* 移除默认内边距 */
    margin-top: 20px;          /* 顶部外边距，与LOGO区域保持间距 */
}

/* 导航菜单项容器样式 */
.main-nav li {
    padding: 0;                /* 移除默认内边距，确保导航项紧凑排列 */
}

/* 导航链接样式 */
.main-nav a {
    display: block;            /* 块级显示，使整个区域可点击 */
    padding: 12px 20px;        /* 上下12px、左右20px的内边距，提供足够的点击区域 */
    color: #b0b0b0;            /* 浅灰色文字，比正文稍暗，形成层次感 */
    text-decoration: none;     /* 移除下划线 */
    transition: all 0.3s ease; /* 平滑过渡效果，提升用户体验 */
    font-size: 16px;           /* 字体大小适中，确保可读性 */
}

/* 导航链接悬停和激活状态样式 */
.main-nav a:hover, .main-nav a.active {
    background-color: rgba(255, 255, 255, 0.05); /* 微亮背景，提供视觉反馈 */
    color: #fff;               /* 白色文字，增强对比度 */
    border-left: 4px solid #ff6b6b; /* 左侧红色边框，作为视觉指示器 */
    padding-left: 16px;        /* 左内边距调整，补偿边框宽度(20px - 4px) */
}

/* 导航链接图标样式 */
.main-nav a i {
    margin-right: 10px;        /* 右侧外边距，与文本保持间距 */
    width: 20px;               /* 固定宽度，确保图标对齐 */
    text-align: center;        /* 文本居中，确保图标居中显示 */
    color: #bb86fc;            /* 浅紫色，与标题颜色一致，增强视觉效果 */
}

/* ===== 侧边栏底部备案信息样式 ===== */
.footer-info {
    padding: 10px 5px;         /* 上下10px、左右5px的内边距，提供适当空间 */
    text-align: center;        /* 文本居中对齐 */
    font-size: 11px;           /* 小字体，适合次要信息 */
    color: #888;               /* 中灰色，降低视觉重要性 */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* 顶部细线边框，提供分隔效果 */
    margin-top: auto;          /* 自动顶部外边距，将元素推到容器底部 */
}

/* 备案信息段落样式 */
.footer-info p {
    margin-bottom: 3px;        /* 底部外边距，段落间保持适当间距 */
    color: #888;               /* 中灰色，保持与父元素一致 */
    line-height: 1.2;          /* 行高略小，使紧凑文本更易读 */
}

/* 备案信息链接样式 */
.footer-info a {
    color: #888;               /* 链接颜色与文本一致，不突兀 */
    text-decoration: none;     /* 移除下划线 */
    transition: color 0.3s;    /* 颜色变化平滑过渡 */
}

/* 备案信息链接悬停样式 */
.footer-info a:hover {
    color: #bb86fc;            /* 悬停时变为浅紫色，提供视觉反馈 */
}

/* ===== 主内容区样式 ===== */
.main-content {
    flex: 1;                   /* 弹性布局中占据剩余空间 */
    margin-left: 250px;        /* 左侧外边距与侧边栏宽度相等，确保内容不被侧边栏遮挡 */
    padding: 20px;             /* 内边距，提供内容与边界的间距 */
}

/* 内容区各部分的容器样式 */
.content-section {
    margin-bottom: 50px;       /* 底部外边距，各部分之间保持足够间距 */
    background-color: #1e1e1e; /* 深灰黑色背景，比主背景略浅，形成层次感 */
    border-radius: 8px;        /* 圆角边框，提供现代感 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 阴影效果，增强深度感和立体感 */
    overflow: hidden;          /* 隐藏溢出内容，确保圆角效果完整 */
}

/* 内容区内部容器样式 */
.section-inner {
    padding: 30px;             /* 内边距，提供内容与容器边界的间距 */
}

/* 二级标题样式 */
h2 {
    color: #bb86fc;            /* 浅紫色，突出标题，增加视觉层次 */
    display: flex;             /* 使用弹性布局，便于图标和文字的排列 */
    align-items: center;       /* 垂直居中对齐 */
    margin-bottom: 20px;       /* 底部外边距，与下方内容保持间距 */
    font-size: 28px;           /* 字体大小，确保标题醒目 */
    position: relative;        /* 相对定位，为可能的伪元素定位做准备 */
    padding-bottom: 10px;      /* 底部内边距，增加标题与内容的分隔感 */
}

/* 二级标题装饰线样式 */
h2:after {
    content: '';               /* 创建一个空内容的伪元素 */
    position: absolute;        /* 绝对定位，相对于h2元素 */
    bottom: 0;                 /* 定位到h2元素底部 */
    left: 0;                   /* 定位到h2元素左侧 */
    width: 50px;               /* 宽度固定，形成短线效果 */
    height: 3px;               /* 高度适中，确保可见但不过于突兀 */
    background-color: #03dac6; /* 青绿色，与主题色形成对比 */
}

/* 二级标题图标样式 */
h2 i {
    margin-right: 10px;        /* 右侧外边距，与文本保持间距 */
    font-size: 24px;           /* 图标大小略小于标题文字，保持视觉平衡 */
    color: #03dac6;            /* 青绿色，与装饰线颜色一致，形成视觉统一 */
}

/* 段落文本样式 */
p {
    margin-bottom: 15px;       /* 底部外边距，段落间保持适当间距 */
    color: #b0b0b0;            /* 浅灰色，在深色背景上提供良好可读性 */
}

/* ===== 注册流程部分样式 ===== */
.register-process {
    display: flex;              /* 弹性布局，便于内容排列 */
    align-items: center;        /* 垂直居中对齐 */
    justify-content: space-between; /* 两端对齐，最大化利用空间 */
    margin-top: 20px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 注册步骤说明区域样式 */
.register-steps {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    padding-right: 30px;        /* 右侧内边距，与二维码保持间距 */
}

/* 注册步骤有序列表样式 */
.register-steps ol {
    margin-left: 20px;          /* 左侧外边距，为列表标记提供空间 */
    margin-bottom: 20px;        /* 底部外边距，与下方内容保持间距 */
}

/* 注册步骤列表项样式 */
.register-steps li {
    margin-bottom: 10px;        /* 底部外边距，列表项间保持间距 */
    padding-left: 10px;         /* 左侧内边距，增加可读性 */
}

/* 二维码容器样式 */
.qr-code {
    width: 150px;               /* 固定宽度，确保二维码大小合适 */
    height: 150px;              /* 固定高度，保持正方形比例 */
    background-color: #2d2d2d;  /* 中灰黑色背景，与主背景形成对比 */
    border: 1px solid #333333;  /* 深灰色边框，增强边界感 */
    display: flex;              /* 弹性布局，便于内容居中 */
    align-items: center;        /* 垂直居中对齐 */
    justify-content: center;    /* 水平居中对齐 */
}

/* 二维码图片样式 */
.qr-code img {
    max-width: 100%;            /* 最大宽度为容器宽度，确保不溢出 */
    max-height: 100%;           /* 最大高度为容器高度，确保不溢出 */
}

/* 下载按钮容器样式 */
.download-btn {
    margin-top: 20px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 通用按钮样式 */
.btn {
    display: inline-block;      /* 行内块级显示，允许设置宽高和边距 */
    background-color: #bb86fc;  /* 浅紫色背景，突出按钮 */
    color: #121212;             /* 深黑色文字，与背景形成强对比 */
    padding: 10px 25px;         /* 上下10px、左右25px的内边距，提供足够点击区域 */
    border-radius: 4px;         /* 圆角边框，提供现代感 */
    text-decoration: none;      /* 移除下划线 */
    font-weight: bold;          /* 粗体文字，增强可读性 */
    transition: background-color 0.3s; /* 背景色变化平滑过渡 */
}

/* 按钮悬停状态样式 */
.btn:hover {
    background-color: #03dac6;  /* 悬停时变为青绿色，提供视觉反馈 */
}

/* ===== 品牌故事部分样式 ===== */
.brand-story {
    display: flex;              /* 弹性布局，便于内容排列 */
    flex-wrap: wrap;            /* 允许换行，适应不同屏幕尺寸 */
    gap: 30px;                  /* 元素间间距，提供适当分隔 */
    align-items: center;        /* 垂直居中对齐 */
    margin-top: 20px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 品牌故事文本内容区域样式 */
.story-content {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    min-width: 300px;           /* 最小宽度，确保在小屏幕上有足够空间 */
}

/* 品牌故事图片区域样式 */
.story-image {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    min-width: 300px;           /* 最小宽度，确保在小屏幕上有足够空间 */
    text-align: center;         /* 文本居中，确保图片居中显示 */
}

/* 品牌故事图片样式 */
.story-image img {
    max-width: 100%;            /* 最大宽度为容器宽度，确保不溢出 */
    border-radius: 10px;        /* 圆角边框，提供现代感 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 阴影效果，增强深度感和立体感 */
}

/* ===== 产品系列部分样式 ===== */
.product-categories {
    display: grid;              /* 网格布局，便于创建均匀的卡片布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式列布局，自动适应屏幕宽度 */
    gap: 25px;                  /* 网格项间距，提供适当分隔 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 产品类别卡片样式 */
.category-item {
    background-color: #2d2d2d;  /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 8px;         /* 圆角边框，提供现代感 */
    padding: 25px;              /* 内边距，提供内容与边界的间距 */
    transition: transform 0.3s, box-shadow 0.3s; /* 变换和阴影平滑过渡 */
    border-left: 3px solid #bb86fc; /* 左侧浅紫色边框，增加视觉特色 */
}

/* 产品类别卡片悬停效果 */
.category-item:hover {
    transform: translateY(-5px); /* 向上平移，创造悬浮效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 增强阴影，强化悬浮感 */
}

/* 产品类别标题和图标容器样式 */
.category-header {
    display: flex;              /* 弹性布局，便于内容排列 */
    align-items: center;        /* 垂直居中对齐 */
    margin-bottom: 15px;        /* 底部外边距，与描述文本保持间距 */
}

/* 产品类别图标样式 */
.category-icon {
    font-size: 36px;            /* 字体大小，确保图标醒目 */
    color: #03dac6;             /* 青绿色，突出图标 */
    margin-right: 10px;         /* 右侧外边距，与标题保持间距 */
}

/* 产品类别标题样式 */
.category-item h3 {
    font-size: 20px;            /* 字体大小，确保标题醒目但不过大 */
    margin-bottom: 0;           /* 移除底部外边距，因为现在标题在category-header中 */
    color: #bb86fc;             /* 浅紫色，与图标形成色彩对比 */
}

/* ===== 品牌理念部分样式 ===== */
.brand-philosophy {
    display: grid;              /* 使用网格布局，便于精确控制布局 */
    grid-template-columns: repeat(3, 1fr); /* 3列等宽布局，每行3个卡片 */
    grid-template-rows: repeat(2, auto);   /* 2行自适应高度，每列2个卡片 */
    gap: 25px;                  /* 元素间间距，提供适当分隔 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 品牌理念卡片样式 */
.philosophy-item {
    background-color: #2d2d2d;  /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 8px;         /* 圆角边框，提供现代感 */
    padding: 25px;              /* 内边距，提供内容与边界的间距 */
    text-align: center;         /* 文本居中，提供整齐的视觉效果 */
    transition: transform 0.3s, box-shadow 0.3s; /* 变换和阴影平滑过渡 */
    display: flex;              /* 使用弹性布局，便于内容垂直排列 */
    flex-direction: column;     /* 子元素垂直排列 */
    align-items: center;        /* 水平居中对齐 */
}

/* 品牌理念卡片悬停效果 */
.philosophy-item:hover {
    transform: translateY(-5px); /* 向上平移，创造悬浮效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 增强阴影，强化悬浮感 */
}

/* 品牌理念图标样式 */
.philosophy-icon {
    font-size: 40px;            /* 字体大小，确保图标醒目 */
    color: #bb86fc;             /* 浅紫色，突出图标 */
    margin-bottom: 15px;        /* 底部外边距，与标题保持间距 */
}

/* 品牌理念标题样式 */
.philosophy-item h3 {
    font-size: 20px;            /* 字体大小，确保标题醒目但不过大 */
    margin-bottom: 10px;        /* 底部外边距，与描述文本保持间距 */
    color: #03dac6;             /* 青绿色，与图标形成色彩对比 */
}

/* ===== 小程序体验部分样式 ===== */
.miniprogram-showcase {
    display: flex;              /* 弹性布局，便于内容排列 */
    flex-wrap: wrap;            /* 允许换行，适应不同屏幕尺寸 */
    gap: 40px;                  /* 元素间间距，提供适当分隔 */
    align-items: center;        /* 垂直居中对齐 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

/* ===== 小程序信息区域样式 ===== */
.miniprogram-info {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    min-width: 300px;           /* 最小宽度，确保在小屏幕上有足够空间 */
}

/* 小程序信息标题样式 */
.miniprogram-info h3 {
    font-size: 22px;            /* 字体大小，确保标题醒目 */
    margin-bottom: 20px;        /* 底部外边距，与下方内容保持间距 */
    color: #bb86fc;             /* 浅紫色，突出标题 */
}

/* 小程序功能列表容器样式 */
.miniprogram-features {
    margin-left: 20px;          /* 左侧外边距，为列表标记提供空间 */
    margin-bottom: 20px;        /* 底部外边距，与下方内容保持间距 */
}

/* 小程序功能列表项样式 */
.miniprogram-features li {
    margin-bottom: 10px;        /* 底部外边距，列表项间保持间距 */
    position: relative;         /* 相对定位，为伪元素定位做准备 */
    padding-left: 25px;         /* 左侧内边距，为勾选图标提供空间 */
}

/* 小程序功能列表项前的勾选图标样式 */
.miniprogram-features li:before {
    content: '✓';              /* 创建一个勾选符号的伪元素 */
    position: absolute;         /* 绝对定位，相对于列表项 */
    left: 0;                    /* 定位到列表项左侧 */
    color: #03dac6;             /* 青绿色，突出图标 */
    font-weight: bold;          /* 粗体，增强可见性 */
}

/* 突出显示文本样式 */
.highlight-text {
    font-size: 18px;            /* 字体大小，比普通文本大 */
    color: #ff4081;             /* 粉红色，突出显示 */
    font-weight: bold;          /* 粗体，增强视觉重要性 */
    margin: 20px 0 10px;        /* 上下外边距，与周围内容保持间距 */
}

/* 特别提示框样式 */
.special-note {
    background-color: rgba(187, 134, 252, 0.1); /* 浅紫色半透明背景 */
    border-left: 3px solid #bb86fc; /* 左侧紫色边框，增加视觉特色 */
    padding: 10px 15px;         /* 内边距，提供内容与边界的间距 */
    margin-bottom: 20px;        /* 底部外边距，与下方内容保持间距 */
    font-size: 14px;            /* 字体大小适中，确保可读性 */
    color: #03dac6;             /* 青绿色文字，突出显示 */
    border-radius: 0 4px 4px 0;  /* 右侧圆角边框，提供现代感 */
    display: flex;              /* 弹性布局，便于内容排列 */
    align-items: center;        /* 垂直居中对齐 */
    justify-content: center;    /* 水平居中对齐 */
}

/* 特别提示框图标样式 */
.special-note i {
    margin: 0 8px;              /* 左右外边距，与文本保持间距 */
    color: #bb86fc;             /* 浅紫色，与边框颜色一致 */
}

/* ===== 手机模型区域样式 ===== */
.phone-mockup {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    min-width: 250px;           /* 最小宽度，确保在小屏幕上有足够空间 */
    display: flex;              /* 弹性布局，便于内容居中 */
    justify-content: center;    /* 水平居中对齐 */
}

/* 手机框架样式 */
.phone-frame {
    width: 250px;               /* 固定宽度，模拟真实手机尺寸 */
    height: 500px;              /* 固定高度，保持手机比例 */
    background-color: #2d2d2d;  /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 30px;        /* 大圆角边框，模拟手机外观 */
    border: 8px solid #333;     /* 深灰色边框，模拟手机边框 */
    position: relative;         /* 相对定位，为伪元素定位做准备 */
    display: flex;              /* 弹性布局，便于内容排列 */
    flex-direction: column;     /* 子元素垂直排列 */
    align-items: center;        /* 水平居中对齐 */
    justify-content: center;    /* 垂直居中对齐 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* 阴影效果，增强立体感 */
    overflow: hidden;           /* 隐藏溢出内容，确保圆角效果完整 */
}

/* 手机顶部刘海区域样式 */
.phone-frame:before {
    content: '';               /* 创建一个空内容的伪元素 */
    position: absolute;         /* 绝对定位，相对于手机框架 */
    top: 0;                    /* 定位到手机框架顶部 */
    width: 40%;                /* 宽度为手机框架的40% */
    height: 25px;              /* 固定高度，模拟刘海尺寸 */
    background-color: #333;     /* 深灰色背景，与边框颜色一致 */
    border-radius: 0 0 15px 15px; /* 底部圆角边框，模拟刘海形状 */
}

/* 手机框架内二维码样式 */
.phone-frame .qr-code {
    width: 180px;               /* 固定宽度，确保二维码大小合适 */
    height: 180px;              /* 固定高度，保持正方形比例 */
    background-color: #fff;     /* 白色背景，确保二维码可见 */
    border: none;               /* 移除边框 */
    margin-bottom: 20px;        /* 底部外边距，与下方内容保持间距 */
}

/* ===== 多平台店铺部分样式 ===== */
.platforms-grid {
    display: grid;              /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式列布局，自动适应屏幕宽度 */
    gap: 25px;                  /* 网格项之间的间距 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

.platform-item {
    background-color: #2d2d2d;   /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 8px;         /* 圆角边框，提供现代感 */
    padding: 25px;              /* 内边距，确保内容不会贴近边缘 */
    transition: transform 0.3s, box-shadow 0.3s; /* 变换和阴影平滑过渡 */
}

.platform-item:hover {
    transform: translateY(-5px); /* 向上平移，创造悬浮效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 增强阴影，强化悬浮感 */
    background-color: #333;     /* 悬停时背景色变深，增强视觉反馈 */
}

.platform-icon {
    font-size: 36px;            /* 字体大小，确保图标醒目 */
    color: #03dac6;             /* 青绿色，突出图标 */
    margin-bottom: 15px;        /* 底部外边距，与标题保持间距 */
}

.platform-item h3 {
    font-size: 20px;            /* 字体大小，确保标题醒目但不过大 */
    margin-bottom: 10px;        /* 底部外边距，与描述文本保持间距 */
    color: #bb86fc;             /* 浅紫色，与图标形成色彩对比 */
}

.platform-link {
    display: inline-block;      /* 行内块元素，便于设置边距 */
    margin-top: 15px;           /* 顶部外边距，与上方内容保持间距 */
    color: #bb86fc;             /* 浅紫色，与标题颜色一致 */
    text-decoration: none;      /* 移除下划线 */
    font-weight: bold;          /* 粗体，增强可读性 */
    transition: color 0.3s;     /* 颜色平滑过渡效果 */
}

.platform-link:hover {
    color: #03dac6;             /* 悬停时变为青绿色，提供视觉反馈 */
}

.platform-link i {
    margin-left: 5px;          /* 左侧外边距，与文本保持间距 */
    transition: transform 0.3s; /* 变换平滑过渡 */
}

.platform-link:hover i {
    transform: translateX(5px); /* 向右平移，创造动态效果 */
}

/* ===== 会员福利部分样式 ===== */
.benefits-container {
    display: grid;              /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式列布局，自动适应屏幕宽度 */
    gap: 25px;                  /* 网格项之间的间距 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 福利项样式 */
.benefit-item, .benefit-card {
    background-color: #2d2d2d;   /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 12px;        /* 增大圆角边框，提供更现代的感觉 */
    padding: 30px;              /* 增加内边距，确保内容有更好的呼吸空间 */
    transition: transform 0.3s, box-shadow 0.3s; /* 变换和阴影平滑过渡 */
    position: relative;         /* 相对定位，为内部元素定位做准备 */
    overflow: hidden;           /* 隐藏溢出内容 */
    border-top: 3px solid #03dac6; /* 顶部边框，增加设计感 */
}

/* 福利项悬停效果 */
.benefit-item:hover, .benefit-card:hover {
    transform: translateY(-5px); /* 向上平移，创造悬浮效果 */
    box-shadow: 0 10px 25px rgba(3, 218, 198, 0.2); /* 增强阴影，使用品牌色 */
    background-color: #333;     /* 悬停时背景色变深，增强视觉反馈 */
}

/* 卡片图标容器样式 */
.card-icon {
    font-size: 36px;            /* 字体大小，确保图标醒目 */
    color: #03dac6;             /* 青绿色，突出图标 */
    margin-bottom: 20px;        /* 底部外边距，与标题保持间距 */
    text-align: center;         /* 文本居中 */
    background-color: rgba(3, 218, 198, 0.1); /* 半透明背景 */
    width: 70px;                /* 固定宽度 */
    height: 70px;               /* 固定高度 */
    border-radius: 50%;         /* 圆形 */
    display: flex;              /* 弹性布局 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
    margin-left: auto;          /* 水平居中 */
    margin-right: auto;         /* 水平居中 */
}

/* 福利标题样式 */
.benefit-item h3, .benefit-card h3 {
    font-size: 22px;            /* 增大字体大小 */
    margin-bottom: 20px;        /* 增加底部外边距 */
    color: #bb86fc;             /* 浅紫色，与图标形成色彩对比 */
    text-align: center;         /* 文本居中 */
    font-weight: 600;           /* 加粗字体 */
}

/* 福利列表样式 */
.benefit-list {
    list-style: none;           /* 移除默认列表样式 */
    padding: 0;                 /* 移除内边距 */
    margin: 0;                  /* 移除外边距 */
}

.benefit-list li {
    margin-bottom: 12px;        /* 底部外边距，项目之间保持间距 */
    display: flex;              /* 弹性布局 */
    align-items: center;        /* 垂直居中 */
}

.benefit-list li i {
    color: #03dac6;             /* 青绿色，突出图标 */
    margin-right: 10px;         /* 右侧外边距，与文本保持间距 */
    font-size: 16px;            /* 字体大小 */
}

/* 奖励图标样式 */
.prize-icon {
    text-align: center;         /* 文本居中 */
    margin-top: 25px;           /* 顶部外边距 */
}

.prize-icon i {
    font-size: 48px;            /* 字体大小，确保图标醒目 */
    color: #bb86fc;             /* 浅紫色 */
    animation: pulse 2s infinite; /* 脉冲动画，无限循环 */
}

/* 脉冲动画 */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== 会员福利卡片列表样式 ===== */

/* 会员福利卡片列表项样式 */
.benefit-card ul li:last-child {
    margin-bottom: 0;           /* 移除最后一项的底部外边距 */
}

/* 卡片悬停时图标效果 */
.benefit-card:hover .card-icon {
    background-color: rgba(3, 218, 198, 0.2); /* 悬停时背景色加深 */
    transform: scale(1.05);     /* 轻微放大 */
}

/* 卡片悬停时奖励图标效果 */
.benefit-card:hover .prize-icon i {
    animation-duration: 1s;      /* 加快动画速度 */
}

/* 会员福利卡片列表样式 */
.benefit-card ul {
    list-style: none;           /* 移除默认列表样式 */
    padding: 0;                 /* 移除内边距 */
    margin: 0;                  /* 移除外边距 */
}

/* 会员福利列表项样式 */
.benefit-card li {
    margin-bottom: 8px;         /* 底部外边距，与下一项保持间距 */
    display: flex;              /* 弹性布局，便于图标与文本对齐 */
    align-items: center;        /* 垂直居中对齐 */
}

/* 会员福利列表项前的勾选图标 */
.benefit-card li:before {
    content: '✓';               /* 勾选符号 */
    color: #03dac6;             /* 青绿色，突出图标 */
    margin-right: 8px;          /* 右侧外边距，与文本保持间距 */
    font-weight: bold;          /* 粗体，增强可见性 */
}

/* 特殊福利项样式 */
.benefit-card .special {
    color: #cf6679;             /* 粉红色，突出特殊项 */
    font-weight: bold;          /* 粗体，增强可读性 */
}

/* 特殊福利项前的星形图标 */
.benefit-card .special:before {
    content: '★';               /* 星形符号 */
}

/* ===== 活动专区部分样式 ===== */
.activities-grid {
    display: grid;              /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式列布局，自动适应屏幕宽度 */
    gap: 25px;                  /* 网格项之间的间距 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 活动项样式 */
.activity-item {
    background-color: #2d2d2d;   /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 8px;         /* 圆角边框，提供现代感 */
    padding: 25px;              /* 内边距，确保内容不会贴近边缘 */
    transition: transform 0.3s, box-shadow 0.3s; /* 变换和阴影平滑过渡 */
    position: relative;         /* 相对定位，为伪元素定位做准备 */
    overflow: hidden;           /* 隐藏溢出内容，确保装饰线效果完整 */
}

/* 活动项悬停效果 */
.activity-item:hover {
    transform: translateY(-5px); /* 向上平移，创造悬浮效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 增强阴影，强化悬浮感 */
    background-color: #333;     /* 悬停时背景色变深，增强视觉反馈 */
}

/* 活动项顶部装饰线 */
.activity-item:before {
    content: '';                /* 创建一个空内容的伪元素 */
    position: absolute;         /* 绝对定位，相对于活动项 */
    top: 0;                    /* 定位到活动项顶部 */
    left: 0;                    /* 定位到活动项左侧 */
    width: 100%;                /* 宽度为活动项的100% */
    height: 3px;                /* 固定高度，创建细线效果 */
    background: linear-gradient(to right, #bb86fc, #03dac6); /* 从浅紫色到青绿色的渐变背景 */
}

.activity-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* 特殊活动项样式 */
.activity-item.special {
    border: 2px solid #bb86fc;  /* 浅紫色边框，突出特殊活动 */
    animation: pulse 2s infinite; /* 脉冲动画，无限循环，增强吸引力 */
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(187, 134, 252, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(187, 134, 252, 0);
    }
}

/* 活动徽章样式 */
.activity-badge {
    position: absolute;         /* 绝对定位，相对于活动项 */
    top: 10px;                  /* 距离顶部10px */
    right: 10px;                /* 距离右侧10px */
    background-color: #cf6679;  /* 粉红色背景 */
    color: #fff;                /* 白色文本，提供良好对比度 */
    padding: 5px 10px;          /* 内边距，确保文本不会贴近边缘 */
    border-radius: 20px;        /* 大圆角边框，创建胶囊形状 */
    font-size: 0.8rem;          /* 较小字体大小，适合徽章 */
    font-weight: bold;          /* 粗体，增强可读性 */
}

/* 活动标题和图标容器样式 */
.activity-header {
    display: flex;              /* 弹性布局，便于内容排列 */
    align-items: center;        /* 垂直居中对齐 */
    margin-bottom: 10px;        /* 底部外边距，与描述文本保持间距 */
}

/* 活动图标样式 */
.activity-icon {
    font-size: 36px;            /* 大字体大小，确保图标可见 */
    color: #03dac6;             /* 青绿色，突出图标 */
    margin-right: 10px;         /* 右侧外边距，与标题保持间距 */
    display: inline-block;      /* 行内块级显示，使图标和文字在同一行 */
    vertical-align: middle;     /* 垂直居中对齐 */
}

/* 大转盘活动图标旋转动画 */
.activity-icon.wheel {
    animation: rotate 5s linear infinite; /* 线性旋转动画，无限循环，5秒一周 */
}

/* 活动标题样式 */
.activity-item h3 {
    font-size: 1.25rem;         /* 标题字体大小 */
    font-weight: 600;           /* 字体粗细 */
    margin-bottom: 0;           /* 移除底部外边距，因为现在标题在activity-header中 */
    color: #f5f5f5;             /* 浅灰色，保持与整体风格一致 */
}

/* ===== 联系我们部分样式 ===== */
.contact-container {
    display: flex;              /* 弹性布局 */
    flex-wrap: wrap;            /* 允许换行，适应小屏幕 */
    gap: 30px;                  /* 子元素之间的间距 */
    margin-top: 30px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 联系信息区域样式 */
.contact-info {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    min-width: 250px;           /* 最小宽度，确保在小屏幕上有足够空间 */
}

/* 联系项样式 */
.contact-item {
    display: flex;              /* 弹性布局，便于图标与文本对齐 */
    align-items: center;        /* 垂直居中对齐 */
    margin-bottom: 15px;        /* 底部外边距，与下一项保持间距 */
}

/* 联系项图标样式 */
.contact-item i {
    font-size: 20px;            /* 字体大小，确保图标可见 */
    color: #bb86fc;             /* 浅紫色，突出图标 */
    margin-right: 10px;         /* 右侧外边距，与文本保持间距 */
    width: 25px;                /* 固定宽度，确保图标对齐 */
    text-align: center;         /* 文本居中对齐，确保图标居中 */
}

/* 社交媒体图标容器样式 */
.social-icons, .social-media {
    display: flex;              /* 弹性布局，便于图标水平排列 */
    gap: 15px;                  /* 图标之间的间距 */
    margin-top: 20px;           /* 顶部外边距，与上方内容保持间距 */
}

/* 社交媒体图标链接样式 */
.social-icons a, .social-media a.social-icon {
    display: flex;              /* 弹性布局，便于内容居中 */
    align-items: center;        /* 垂直居中对齐 */
    justify-content: center;    /* 水平居中对齐 */
    width: 40px;                /* 固定宽度 */
    height: 40px;               /* 固定高度，保持正方形比例 */
    background-color: #2d2d2d;  /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 50%;         /* 圆形边框 */
    color: #bb86fc;             /* 浅紫色，突出图标 */
    transition: all 0.3s ease;  /* 平滑过渡效果，用于悬停动画 */
}

/* 社交媒体图标悬停效果 */
.social-icons a:hover, .social-media a.social-icon:hover {
    background-color: #bb86fc;  /* 悬停时背景色变为浅紫色 */
    color: #121212;             /* 悬停时图标颜色变为深灰黑色，提供对比 */
    transform: translateY(-3px); /* 向上平移，创造悬浮效果 */
}

/* 新闻订阅区域样式 - 现用于企业微信获客二维码 */
.newsletter {
    flex: 1;                    /* 弹性布局中占据可用空间 */
    min-width: 300px;           /* 最小宽度，确保在小屏幕上有足够空间 */
    background-color: #2d2d2d;  /* 中灰黑色背景，与主背景形成对比 */
    border-radius: 8px;         /* 圆角边框，提供现代感 */
    padding: 25px;              /* 内边距，确保内容不会贴近边缘 */
}

/* 企业微信获客二维码容器样式 */
.work-wechat-qrcode {
    display: flex;              /* 弹性布局 */
    flex-direction: column;     /* 垂直排列内容 */
    align-items: center;        /* 水平居中对齐 */
    text-align: center;         /* 文本居中 */
}

/* 企业微信标题样式 */
.newsletter h3 {
    font-size: 20px;            /* 字体大小，确保标题醒目但不过大 */
    margin-bottom: 10px;        /* 底部外边距，与下方内容保持间距 */
    color: #bb86fc;             /* 浅紫色，突出标题 */
}

/* 二维码容器样式 */
.qrcode-container {
    display: flex;              /* 弹性布局 */
    justify-content: center;    /* 水平居中对齐 */
    margin-top: 20px;           /* 顶部外边距，与上方内容保持间距 */
    background-color: #ffffff;  /* 白色背景，突出二维码 */
    padding: 10px;              /* 内边距，形成白色边框效果 */
    border-radius: 8px;         /* 圆角边框，提供现代感 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
}

/* 二维码图片样式 */
.qrcode-container img {
    width: 150px;               /* 固定宽度 */
    height: 150px;              /* 固定高度，保持正方形比例 */
    object-fit: contain;        /* 确保图片完整显示 */
}

/* 通用按钮样式 */
.btn {
    display: inline-block;      /* 行内块元素，便于设置边距 */
    padding: 10px 25px;         /* 内边距，确保文本不会贴近边缘 */
    background-color: #bb86fc;  /* 浅紫色背景，突出按钮 */
    color: #121212;             /* 深灰黑色文本，提供良好对比度 */
    text-decoration: none;      /* 移除下划线 */
    border-radius: 4px;         /* 圆角边框，提供现代感 */
    font-weight: bold;          /* 粗体，增强可读性 */
    transition: all 0.3s ease;  /* 平滑过渡效果，用于悬停动画 */
    border: none;
    cursor: pointer;
}

/* 按钮悬停效果 */
.btn:hover {
    background-color: #03dac6;  /* 悬停时背景色变为青绿色 */
    transform: translateY(-2px); /* 向上平移，创造悬浮效果 */
}

/* ===== 响应式调整 ===== */
/* 大屏幕设备 - 最大宽度1200px */
@media (max-width: 1200px) {
    /* 调整网格布局，减少每列的最小宽度 */
    .product-categories,
    .platforms-grid,
    .activities-grid {
        grid-template-columns: repeat(2, 1fr); /* 固定两列布局 */
    }
    
    /* 会员福利容器改为单列布局 */
    .benefits-container {
        grid-template-columns: 1fr; /* 改为单列网格布局 */
        max-width: 500px; /* 限制最大宽度 */
        margin-left: auto; /* 水平居中 */
        margin-right: auto; /* 水平居中 */
    }
    
    /* 品牌理念部分改为垂直布局 */
    .brand-philosophy {
        flex-direction: column;
    }
}

/* 平板和移动设备 - 最大宽度768px */
@media (max-width: 768px) {
    /* 主容器改为垂直布局 */
    .container {
        flex-direction: column;   /* 子元素垂直排列 */
    }

    /* 侧边栏样式调整 */
    .sidebar {
        width: 100%;              /* 宽度占满容器 */
        height: auto;             /* 高度自适应内容 */
        position: relative;       /* 相对定位 */
        overflow-y: visible;      /* 显示垂直滚动条 */
    }

    /* 主内容区样式调整 */
    .main-content {
        margin-left: 0;           /* 移除左侧外边距 */
        padding: 15px;            /* 减小内边距 */
    }

    /* 网格布局改为单列 */
    .product-categories,
    .platforms-grid,
    .activities-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }

    /* 内容区域改为垂直布局 */
    .brand-story,
    .miniprogram-showcase,
    .contact-container {
        flex-direction: column;   /* 子元素垂直排列 */
    }

    /* 内容区内部容器样式调整 */
    .section-inner {
        padding: 20px;            /* 调整内边距 */
    }

    /* 手机框架尺寸调整 */
    .phone-frame {
        width: 200px;             /* 减小宽度 */
        height: 400px;            /* 减小高度 */
        margin: 0 auto;           /* 水平居中 */
    }

    /* 手机框架内二维码尺寸调整 */
    .phone-frame .qr-code {
        width: 150px;             /* 减小宽度 */
        height: 150px;            /* 减小高度 */
    }
}