/* 全局样式 */
:root {
    --primary-color: #425dcb; /* 蓝紫色 */
    --secondary-color: #439784; /* 青绿色 */
    --accent-color: #f5f5f5; /* 灰白色 */
    --bg-color: #fef8eb; /* 浅米色 */
    --dark-color: #1A2236; /* 深蓝黑色 */
    --light-color: #FFFFFF;
    --text-color: #333333;
    --border-radius: 12px;
    --card-border-radius: 16px;
    --button-border-radius: 8px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --text-gradient: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* 合并重复的过渡效果 */
.btn, 
header,
.feature-card,
.screenshot {
    transition: var(--transition);
}

/* 简化按钮悬停效果 */
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(66, 93, 203, 0.35);
}

/* 合并导航栏样式 */
header.scrolled {
    padding: 8px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 精简卡片通用样式 */
.card-style {
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* 删除重复的背景渐变声明 */
.bg-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* 按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    border: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
}

.btn:hover::after {
    height: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #3d55b8);
    color: var(--light-color);
    box-shadow: 0 12px 25px rgba(66, 93, 203, 0.3);
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(66, 93, 203, 0.4);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: 1px solid rgba(66, 93, 203, 0.15);
    box-shadow: 0 10px 20px rgba(66, 93, 203, 0.08);
}

.btn-secondary:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 25px rgba(66, 93, 203, 0.12);
}

.btn i {
    margin-left: 10px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.btn:hover i {
    transform: translateX(4px);
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--dark-color);
    box-shadow: 0 8px 20px rgba(200, 200, 200, 0.2);
    font-weight: 600;
}

.btn-accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(200, 200, 200, 0.3);
}

/* 头部样式 - 修改为滚动显示 */
header {
    padding: 15px 20px;
    background-color: var(--light-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    z-index: 100;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 更平滑的过渡效果 */
}

header.scrolled {
    /* 不再改变大小 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

header.scrolled .logo h1,
header.scrolled nav ul li a {
    /* 文字大小不再变化 */
    font-size: inherit;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-color);
    position: relative;
    display: flex;
    align-items: center;
}

.logo h1::before {
    content: '📱';
    margin-right: 10px;
    font-size: 24px;
}

nav ul {
    display: flex;
    list-style: none;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

nav ul li {
    margin-left: 30px;
    position: relative;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

nav ul li a {
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 8px 0;
    position: relative;
    color: rgba(26, 34, 54, 0.8);
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

nav ul li a:hover {
    color: var(--primary-color);
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li.active a {
    color: var(--primary-color);
    position: relative;
    font-weight: 600;
}

nav ul li.active a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 导航平移到右侧的样式 */
.nav-right-position {
    transform: translateX(350px); /* 从200px增加到350px，确保导航菜单移动到立即体验按钮位置 */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 立即体验按钮的过渡效果 */
.download-nav-btn {
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 10px 20px;
    border-radius: 25px; /* 胶囊形按钮 */
    font-weight: 500;
    transition: all 0.5s ease, opacity 0.6s ease, transform 0.5s ease;
    box-shadow: 0 4px 12px rgba(66, 93, 203, 0.2);
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

/* 不可见时不拦截点击 */
.download-nav-btn[style*="opacity: 0"] {
    pointer-events: none;
}

.download-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(66, 93, 203, 0.25);
}

/* 调整顶部英雄区域，确保全屏显示 */
#hero {
    padding: 60px 0 100px; /* 从60px 0改为60px 0 100px，增加底部间距 */
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(250,245,240,0.95) 100%), 
                url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBvcGFjaXR5PSIwLjA1Ij48cGF0aCBkPSJNMzAgNjBDNDYuNTY5NSA2MCA2MCA0Ni41Njk1IDYwIDMwQzYwIDEzLjQzMDUgNDYuNTY5NSAwIDMwIDBDMTMuNDMwNSAwIDAgMTMuNDMwNSAwIDMwQzAgNDYuNTY5NSAxMy40MzA1IDYwIDMwIDYwWiIgZmlsbD0iIzQyNWRjYiIvPjwvZz48L3N2Zz4=');
    background-size: cover, 200px 200px;
    background-position: center, center;
    background-repeat: no-repeat, repeat;
    position: relative;
    overflow: hidden;
    color: var(--dark-color);
    margin-top: 0;
    box-sizing: border-box;
    transition: all 0.8s ease;
}

#hero::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: radial-gradient(ellipse at top left, rgba(66, 93, 203, 0.08) 0%, rgba(66, 93, 203, 0) 70%),
                radial-gradient(ellipse at bottom right, rgba(67, 151, 132, 0.08) 0%, rgba(67, 151, 132, 0) 70%);
    z-index: 0;
    animation: subtle-shift 20s ease infinite alternate;
}

@keyframes subtle-shift {
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    100% {
        transform: translate(5%, 5%) scale(1.05);
    }
}

#hero::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0V0zm19 19h1v1h-1v-1zM2 2h1v1H2V2zm17 17h1v1h-1v-1zM4 4h1v1H4V4zm15 15h1v1h-1v-1zM6 6h1v1H6V6zm13 13h1v1h-1v-1zM8 8h1v1H8V8zm11 11h1v1h-1v-1zM10 10h1v1h-1v-1zm9 9h1v1h-1v-1zm12 12h1v1h-1v-1z' fill='%23425dcb' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 1;
    z-index: 0;
}

.slogan-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(66, 93, 203, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(66, 93, 203, 0.08);
    border: 1px solid rgba(66, 93, 203, 0.05);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.slogan-badge svg {
    margin-right: 8px;
    color: var(--primary-color);
}

#hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* 从60px减小到40px，使内容更紧凑 */
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content h2 {
    font-size: 42px; /* 增加字体大小 */
    font-weight: 700;
    margin-bottom: 20px; /* 增加间距 */
    color: var(--dark-color);
    line-height: 1.2;
    position: relative;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.05);
}

.hero-content h2 span {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.hero-content h2 span::after {
    content: '';
    position: absolute;
    bottom: -2px; /* 调整位置，使其贴近文字底部 */
    left: 0;
    transform: none; /* 移除居中变换 */
    width: 100%;
    height: 2px;
    background: none;
    
    /* 使用渐变实现水平方向两端收窄的效果 */
    background: linear-gradient(
        to right, 
        transparent, 
        var(--primary-color) 20%, 
        var(--primary-color) 80%, 
        transparent
    );
    
    /* 取消之前的剪切路径 */
    clip-path: none;
    opacity: 0.7;
}

.hero-subtitle {
    font-size: 17px; /* 增加字体大小 */
    margin-bottom: 30px; /* 从40px缩小 */
    color: rgba(26, 34, 54, 0.8);
    max-width: 95%;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.hero-app-frame {
    position: relative;
    z-index: 2;
    perspective: 1500px;
    display: flex;
    justify-content: center;
    padding: 0 20px; /* 添加左右内边距 */
    transform-style: preserve-3d;
}

.hero-app-image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(66, 93, 203, 0.12);
    max-width: 300px; /* 从290px稍微调大到300px，确保图片显示完整 */
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) scale(1.05);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); /* 快速响应的过渡 */
    border: 1px solid rgba(255, 255, 255, 0.7);
    will-change: transform; /* 提高性能 */
    margin: 0 auto; /* 居中显示 */
    animation: float 6s ease-in-out infinite;
}

.hero-app-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
    z-index: 2;
    pointer-events: none;
}

.hero-app-image:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.08);
    box-shadow: 0 40px 70px rgba(0, 0, 0, 0.2), 0 15px 25px rgba(66, 93, 203, 0.15);
}

.hero-app-image img {
    border-radius: 28px;
    width: 100%;
    display: block;
}

.stat-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 7px 10px; /* 从8px 12px缩小到7px 10px，进一步减小卡片大小 */
    border-radius: 10px; /* 从12px减小到10px */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); /* 进一步减轻阴影 */
    color: var(--dark-color);
    z-index: 3;
    display: flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* 替换统计卡片悬停样式 */
.stat-card:hover {
    transform: translateY(-3px); /* 悬停时效果轻微一些 */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 32px; /* 从36px缩小到32px */
    height: 32px; /* 从36px缩小到32px */
    border-radius: 8px; /* 从10px缩小到8px */
    background-color: rgba(66, 93, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px; /* 从12px缩小到10px */
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-color);
}

.stat-info h4 {
    font-size: 18px; /* 从20px缩小到18px */
    font-weight: 700;
    margin-bottom: 2px; /* 从4px缩小到2px */
}

.stat-info p {
    font-size: 12px; /* 从13px缩小到12px */
    color: rgba(26, 34, 54, 0.6);
    margin: 0; /* 确保没有外边距 */
}

.stat-card.left-stat {
    top: 20%;
    left: 20px; /* 从10px改为20px，进一步向右贴近英雄图中心 */
}

.stat-card.right-stat {
    bottom: 20%;
    right: 20px; /* 从10px改为20px，进一步向左贴近英雄图中心 */
}

.stat-card.bottom-stat {
    bottom: -15px; /* 从-20px改为-15px，更贴合英雄图 */
    left: 50%;
    transform: translateX(-50%);
}

.stat-card.bottom-stat:hover {
    transform: translateX(-50%) translateY(-3px);
}

/* 功能区域样式 */
#features {
    padding: 120px 0;
    background-color: var(--light-color);
    position: relative;
}

#features::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    top: -50px;
    background-color: var(--light-color);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: 700;
    position: relative;
    z-index: 10; /* 提高z-index确保在图片上方显示 */
}

.section-title span {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--text-gradient);
    margin: 20px auto 0;
    border-radius: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.feature-card {
    background-color: var(--light-color);
    border-radius: var(--card-border-radius);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--text-gradient);
    opacity: 0;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 20px;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
}

.feature-icon::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: rgba(66, 93, 203, 0.08);
    border-radius: 12px;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition);
}

.feature-card:hover .feature-icon::after {
    width: 60px;
    height: 60px;
}

.feature-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--dark-color);
    transition: var(--transition);
}

.feature-card:hover h3 {
    color: var(--primary-color);
}

.feature-card p {
    color: rgba(26, 34, 54, 0.7);
    font-size: 15px;
}

/* APP展示区域样式 */
#app-showcase {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    z-index: 1;
}

#app-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(67, 151, 132, 0.1) 0%, rgba(66, 93, 203, 0.1) 100%);
    z-index: -1;
}

/* 修改section-title的z-index，确保显示在图片上方，同时保留span的渐变样式 */
.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: 700;
    position: relative;
    z-index: 10; /* 提高z-index确保在图片上方显示 */
}

.section-title span {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 在移动端提高标题的z-index，防止被轮播图覆盖，但保留span样式 */
@media (max-width: 768px) {
    #app-showcase .section-title {
        margin-bottom: 100px; /* 增加与轮播图的间距 */
        z-index: 10;
        position: relative;
        text-shadow: 0 1px 3px rgba(255,255,255,0.8); /* 添加文字阴影增加可读性 */
    }
    
    /* 确保在移动端产品展示标题的渐变样式保持一致 */
    #app-showcase .section-title span {
        background: var(--text-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: none; /* 移除渐变文字的阴影效果 */
    }
}

/* 修改app-screenshots样式保证不遮挡标题 */
.app-screenshots {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    margin-top: 20px;
}

/* 修改移动端下的screenshot样式 */
@media (max-width: 768px) {
    .app-screenshots {
        height: 350px;
        margin-top: 0;
    }
    
    /* 修改活动图片和非活动图片的样式 */
    .app-screenshots .screenshot {
        position: absolute;
        width: 80%;
        max-width: 300px;
        transform: scale(0.9);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        opacity: 0;
        filter: blur(4px); /* 默认所有图片都添加模糊效果 */
    }
    
    /* 当前活动的图片保持清晰 */
    .app-screenshots .screenshot.active {
        z-index: 3;
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: blur(0); /* 移除活动图片的模糊效果 */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    /* 下一张图片右侧显示，保持模糊 */
    .app-screenshots .screenshot.next {
        transform: translateX(40%) scale(0.9) rotate(5deg);
        z-index: 2;
        opacity: 0.7;
        filter: blur(3px); /* 保持模糊效果 */
    }
    
    /* 上一张图片左侧显示，保持模糊 */
    .app-screenshots .screenshot.prev {
        transform: translateX(-40%) scale(0.9) rotate(-5deg);
        z-index: 2;
        opacity: 0.7;
        filter: blur(3px); /* 保持模糊效果 */
    }
    
    /* 隐藏其他图片 */
    .app-screenshots .screenshot:not(.active):not(.next):not(.prev) {
        transform: translateX(0) scale(0.8);
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }
    
    /* 调整轮播导航点位置，防止重叠到产品展示标题 */
    .app-carousel-nav {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        position: relative;
        z-index: 5;
    }
}

.app-showcase-header {
    text-align: center;
    margin-bottom: 60px;
}

.app-screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    justify-items: center;
    perspective: 1000px;
}

.screenshot {
    max-width: 280px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    transform: perspective(1000px) rotateY(0deg);
    position: relative;
    filter: blur(0);
}

.screenshot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(129, 85, 255, 0), rgba(129, 85, 255, 0.05));
    opacity: 0;
    transition: var(--transition);
}


    
  



.screenshot:hover::after {
    opacity: 1;
}

/* 添加悬停时其他图片模糊的效果 */
.app-screenshots:hover .screenshot:not(:hover) {
    filter: blur(4px);
    transform: scale(0.95);
    opacity: 0.7;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 新增/修改移动端预览图样式 */
.mobile-app-display img.mobile-app-image {
    max-width: 260px !important;
    height: auto;
    transition: transform 0.3s ease;
}

/* 可选：如果需要更紧凑的布局，调整容器间距 */
.mobile-app-display {
    margin-top: 20px; /* 适当缩小与上方内容的间距 */
}

/* 合作伙伴区域 */
.partners-section {
    padding: 80px 0;
    background-color: var(--light-color);
    text-align: center;
}

.partners-title {
    font-size: 28px;
    margin-bottom: 50px;
    color: var(--dark-color);
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}

.partner-logo {
    opacity: 0.6;
    transition: var(--transition);
    filter: grayscale(100%);
    max-width: 120px;
    height: auto;
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* 主要特性区块 */
.features-highlight {
    padding: 120px 0;
    background: linear-gradient(135deg, #1A1A2E 0%, #2E2E5C 100%);
    color: var(--light-color);
    position: relative;
    overflow: hidden;
}

.features-highlight::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.1) 0%, rgba(200, 200, 200, 0) 70%);
    top: -200px;
    left: -200px;
}

.features-highlight .section-title {
    color: var(--light-color);
    margin-bottom: 80px;
}

.features-grid-alt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-icon-alt {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--accent-color);
    transition: var(--transition);
}

.feature-item:hover .feature-icon-alt {
    background: rgba(200, 200, 200, 0.2);
    transform: translateY(-5px);
}

.feature-item h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--light-color);
}

.feature-item p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.7;
}

/* 价格表样式 */
.pricing-section {
    padding: 120px 0;
    background-color: var(--light-color);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.pricing-card {
    background-color: var(--light-color);
    border-radius: var(--card-border-radius);
    padding: 50px 40px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}

.pricing-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.pricing-card:hover::before {
    transform: scaleX(1);
}

.pricing-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-name {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.pricing-price {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.pricing-period {
    font-size: 16px;
    color: #999;
}

.pricing-features {
    list-style: none;
    margin-bottom: 40px;
}

.pricing-features li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    padding-left: 30px;
    color: #555;
}

.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.pricing-action {
    text-align: center;
}

.pricing-popular {
    position: absolute;
    top: 20px;
    right: -35px;
    background-color: var(--accent-color);
    color: var(--dark-color);
    padding: 5px 40px;
    font-size: 14px;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 2;
}

/* CTA区域 */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 100px 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-56-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,.075)' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.cta-title {
    font-size: 36px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.cta-subtitle {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.cta-buttons {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: var(--transition);
}

.cta-btn-light {
    background: white;
    color: var(--primary-color);
}

.cta-btn-light:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cta-btn-outline {
    border: 2px solid white;
    color: white;
    background: transparent;
}

.cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* 页脚样式 */
footer {
    background-color: var(--dark-color);
    color: var(--light-color);
    padding: 100px 0 30px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    top: -50px;
    background-color: var(--dark-color);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--light-color);
    position: relative;
    display: inline-block;
}

.footer-logo h3::before {
    content: '📱';
    margin-right: 10px;
    font-size: 28px;
}

.footer-links h4 {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--light-color);
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.footer-links h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    transition: color 0.3s ease;
    position: relative;
    padding-left: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a::before {
    content: '›';
    position: absolute;
    left: 0;
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-color);
}

.footer-links a:hover::before {
    transform: translateX(3px);
}

.footer-contact h4 {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--light-color);
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-contact p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--light-color);
}

.social-link:hover {
    background-color: var(--accent-color);
    color: var(--dark-color);
    transform: translateY(-5px);
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* 响应式设计 */
@media (max-width: 992px) {
    #hero .container {
        grid-template-columns: 1fr;
    }
    
    .hero-content {
        order: 2;
        text-align: center;
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-content h2 {
        font-size: 42px;
    }
    
    .hero-app-frame {
        order: 1;
        margin-bottom: 60px;
    }
    
    .cta-buttons {
        justify-content: center;
    }
    
    .stat-card.left-stat,
    .stat-card.right-stat {
        display: none;
    }
}

@media (max-width: 768px) {
    header {
        top: 30px; /* 从10px增加到30px，页眉往下移动 */
        width: 95%;
        padding: 10px 15px;
        border-radius: 25px;
    }
    
    header .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    nav {
        order: 3;
        width: 100%;
        margin-top: 15px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    nav::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
    }
    
    nav ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        white-space: nowrap;
    }
    
    nav ul li {
        margin: 0 12px 0 0;
    }
    
    nav ul li:last-child {
        padding-right: 15px;
    }
    
    .nav-right-position {
        transform: translateX(0);
    }
    
    .logo h1 {
        font-size: 18px;
    }
    
    .logo h1::before {
        font-size: 20px;
    }
    
    .download-nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    header.nav-hidden {
        transform: translateY(-100px) translateX(-50%);
    }
    
    /* 在移动端，将英雄内容与图片位置交换 */
    #hero .container {
        display: flex;
        flex-direction: column;
    }
    
    .hero-content {
        order: 1; /* 内容在上方 */
        text-align: center;
        margin-bottom: 30px;
    }
    
    .hero-app-frame {
        order: 2; /* 图片在下方 */
        margin-bottom: 30px;
        margin-top: 0;
    }
    
    .hero-content h2 {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-buttons .btn {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }
    
    .feature-card, 
    .pricing-card,
    .testimonial-card {
        padding: 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* 隐藏移动端"探索仪表盘"下的展示图 */
    .why-choose-image {
        display: none !important;
    }
    
    /* 移动端让内容区域占满宽度并居中内容 */
    .why-choose-content {
        flex: 1 1 100%;
        text-align: center;
        margin: 0 auto;
    }
    
    /* 让benefit-item也在移动端居中显示 */
    .benefit-item {
        justify-content: center;
    }
    
    /* 调整英雄区域顶部间距，为页眉腾出空间 */
    #hero {
        padding-top: 100px !important; /* 增加顶部间距 */
    }
    
    /* 增加slogan-badge的上边距，确保不被页眉遮挡 */
    .slogan-badge {
        margin-top: 20px !important;
    }

    /* 恢复正常显示页脚联系我们部分 */
    .footer-contact {
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding-top: 15px !important;
        margin-top: 15px !important;
        position: relative !important;
        /* 移除点击相关样式 */
    }
    
    .footer-contact h4 {
        /* 移除点击相关样式 */
        display: block !important; /* 改为块级显示 */
        align-items: normal !important;
        justify-content: flex-start !important; /* 左对齐 */
        margin-bottom: 15px !important; /* 恢复正常下边距 */
    }
    
    /* 移除折叠指示器 */
    .footer-contact h4::after {
        display: none !important; /* 隐藏箭头 */
    }
    
    /* 移除激活状态样式 */
    .footer-contact.active h4::after {
        display: none !important;
    }
    
    /* 恢复正常内容显示 */
    .footer-contact-content {
        max-height: none !important; /* 移除高度限制 */
        overflow: visible !important; /* 移除溢出隐藏 */
        display: block !important; /* 确保显示 */
        opacity: 1 !important; /* 确保可见 */
        visibility: visible !important; /* 确保可见 */
    }
    
    /* 移除激活状态样式 */
    .footer-contact.active .footer-contact-content {
        max-height: none !important;
    }
    
    /* 修复页脚问题 */
    
    /* 确保页脚居中布局 */
    .footer-logo {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* 社交媒体图标居中对齐 */
    .social-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 15px auto !important;
        width: 100% !important;
    }
    
    /* 确保联系我们信息可见 */
    .footer-contact {
        text-align: center !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding-top: 15px !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
    
    .footer-contact h4 {
        text-align: center !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
    
    .footer-contact h4::after {
        display: none !important;
    }
    
    .footer-contact-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 10px !important;
    }
    
    .footer-contact-content p {
        margin-bottom: 10px !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* 英雄页面缩小10% */
    .hero-app-frame {
        transform: scale(0.9) !important;
        margin: 0 auto !important;
    }
    
    .hero-app-image {
        transform: scale(0.9) !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    /* 修复提升工作效率悬浮卡片问题 */
    .stat-card.right-stat {
        /* 位置重置 - 使用固定位置而非相对位置 */
        position: absolute !important;
        top: auto !important; /* 不使用top定位 */
        bottom: 42% !important; /* 从35%改为42%, 将卡片向上移动 */
        right: 0 !important; /* 确保完全贴合屏幕右侧 */
        
        /* 降低尺寸 */
        width: auto !important;
        min-width: 0 !important; /* 移除最小宽度限制 */
        max-width: 150px !important; /* 减小最大宽度 */
        padding: 6px 10px !important; /* 减小内边距 */
        
        /* 确保显示在最上层 */
        z-index: 999 !important;
        
        /* 视觉样式 */
        background: var(--light-color) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; /* 减轻阴影 */
        border: none !important; /* 移除蓝色边框 */
        border-radius: 8px 0 0 8px !important; /* 减小圆角 */
        
        /* 确保可见性 */
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        transform: none !important;
        pointer-events: auto !important;
        
        /* 移除动画 */
        animation: none !important;
    }
}

/* 为移动端进一步优化 */
@media (max-width: 480px) {
    header {
        top: 40px; /* 从5px或者更低的值增加到40px */
        width: 92%;
        padding: 8px 12px;
    }
    
    .hero-content h2 {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-buttons .btn {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }
    
    .feature-card, 
    .pricing-card,
    .testimonial-card {
        padding: 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* 更小屏幕下进一步增加英雄区域顶部间距 */
    #hero {
        padding-top: 120px !important;
    }
    
    /* 更小屏幕上进一步调整英雄图尺寸 */
    .hero-app-frame, 
    .hero-app-image {
        transform: scale(0.85) !important; /* 更小屏幕上进一步缩小 */
        max-width: 85% !important;
    }
    
    /* 更小屏幕上进一步微调卡片位置和样式 */
    .stat-card.right-stat {
        bottom: 40% !important;
        max-width: 135px !important;
        right: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        /* 完全清除边框 */
        border: none !important;
        border-right: none !important;
    }
}

/* 优化移动端导航栏显示隐藏效果 */
header.nav-hidden {
    transform: translateY(-100px) translateX(-50%); /* 向上移出视野 */
    opacity: 0;
    pointer-events: none; /* 隐藏时禁用交互 */
}

/* 确保滚动类不会影响导航栏的隐藏/显示行为 */
header.scrolled.nav-hidden {
    transform: translateY(-100px) translateX(-50%);
    opacity: 0;
}

/* 修复移动端导航栏右侧位置问题 */
@media (max-width: 768px) {
    .nav-right-position {
        transform: translateX(0) !important;
    }
    
    /* 解决立即体验按钮在移动端的显示问题 */
    .download-nav-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative;
    }
}

/* 动画效果 */
@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-10px) translateX(5px);
    }
    100% {
        transform: translateY(0px) translateX(0px);
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
    }
}

.pulse-animation {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 页面过渡动画 */
.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    width: 100%;
}

.page-transition.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-delay-1 {
    animation-delay: 0.3s;
}

.fade-in-delay-2 {
    animation-delay: 0.6s;
}

.fade-in-delay-3 {
    animation-delay: 0.9s;
}

/* 为什么选择菠萝剧组部分 */
#why-choose {
    padding: 120px 0;
    position: relative;
    background-color: #f9f9f9;
    overflow: hidden;
}

#why-choose::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413L30 11.8l7.07 7.414z' fill='%23425dcb' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

#why-choose .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
}

.why-choose-content {
    flex: 1 1 450px;
}

.why-choose-content h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.why-choose-content h2 span {
    color: var(--primary-color);
    position: relative;
}

.why-choose-content p {
    font-size: 18px;
    margin-bottom: 40px;
    color: #555;
}

.benefits-list {
    margin-bottom: 40px;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(66, 93, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--primary-color);
    font-size: 20px;
    flex-shrink: 0;
}

.benefit-text h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--dark-color);
}

.benefit-text p {
    font-size: 15px;
    margin-bottom: 0;
    color: #777;
}

.why-choose-image {
    flex: 1 1 450px;
    position: relative;
    padding: 20px;
}

.why-choose-image img {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

.why-choose-image img:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* 客户评价部分 */
#testimonials {
    padding: 120px 0;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden;
}

#testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-56-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(67, 151, 132, 0.05)' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.testimonials-slider {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.testimonial-card {
    background-color: var(--light-color);
    border-radius: var(--card-border-radius);
    padding: 30px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    width: 100%;
    max-width: 500px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    opacity: 0.8;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
    margin-bottom: 30px;
    position: relative;
}

.testimonial-content::before {
    content: '\201C';
    font-size: 60px;
    line-height: 1;
    color: rgba(66, 93, 203, 0.1);
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: Georgia, serif;
}

.testimonial-content p {
    position: relative;
    padding-left: 30px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    background-color: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    display: block;
}

.testimonial-author h4 {
    margin-bottom: 5px;
}

.testimonial-author p {
    font-size: 14px;
    color: #777;
    margin: 0;
}

/* 立即体验部分 */
#download {
    padding: 120px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

#download::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23425dcb' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.download-subtitle {
    text-align: center;
    font-size: 18px;
    color: #555;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.download-options {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.download-btn {
    display: flex;
    align-items: center;
    background-color: #1A2236;
    color: white;
    padding: 15px 30px;
    border-radius: var(--button-border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.download-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.download-btn i {
    font-size: 30px;
    margin-right: 15px;
}

.download-btn .small-text {
    font-size: 12px;
    display: block;
    opacity: 0.8;
}

.download-btn .big-text {
    font-size: 18px;
    font-weight: 600;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .why-choose-content,
    .why-choose-image {
        flex: 1 1 100%;
    }
    
    .testimonial-card {
        max-width: 100%;
    }
    
    .download-options {
        flex-direction: column;
        align-items: center;
    }
}

/* 提示工具 Tooltips */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(26, 34, 54, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: rgba(26, 34, 54, 0.9) transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-6px);
}

/* 微信图标特殊样式 */
.wechat-link::after {
    bottom: calc(100% + 10px);
    background-color: var(--primary-color);
    font-weight: 600;
}

.wechat-link::before {
    bottom: calc(100% + 10px);
    border-color: var(--primary-color) transparent transparent;
}

/* 资源链接样式 */
.resource-link {
    transition: all 0.3s ease;
}

.resource-link:hover {
    color: var(--primary-color) !important;
}

.resource-link::after {
    bottom: auto;
    top: -30px;
    font-weight: 500;
    background-color: var(--primary-color);
}

.resource-link::before {
    bottom: auto;
    top: -12px;
    border-width: 6px 6px 0;
    border-color: var(--primary-color) transparent transparent;
}

.resource-link:hover::after,
.resource-link:hover::before {
    transform: translateX(-50%) translateY(-3px);
}

/* 添加向下滚动按钮样式 */
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--dark-color);
    opacity: 0.7;
    transition: opacity 0.3s ease;
    padding: 10px;
    z-index: 10;
}

.scroll-down:hover {
    opacity: 1;
}

.scroll-down span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.scroll-down i {
    font-size: 16px;
    animation: bounce 2s infinite;
    color: var(--primary-color);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 自动滚动指示器 */
.auto-scroll-indicator {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 10;
    pointer-events: none;
}

.auto-scroll-indicator.visible {
    opacity: 1;
}

.auto-scroll-indicator .countdown {
    font-weight: 700;
    color: var(--secondary-color);
}

/* 仪表盘页面新增样式 */
.dashboard-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.dashboard-stats .stat-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.dashboard-stats .stat-item i {
    color: var(--primary-color);
    font-size: 20px;
    margin-right: 10px;
}

.image-feature-tag {
    position: absolute;
    background-color: var(--primary-color);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.feature-details {
    list-style: none;
    margin-top: 15px;
    padding: 0;
    font-size: 14px;
    color: #666;
}

.feature-details li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px;
}

.feature-details li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.workflow-timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 50px;
    position: relative;
}

.workflow-timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 35px;
    width: 2px;
    background-color: var(--primary-color);
    opacity: 0.3;
}

.workflow-step {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.workflow-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-right: 30px;
    flex-shrink: 0;
    border: 2px solid var(--primary-color);
    z-index: 2;
}

.workflow-icon i {
    font-size: 30px;
    color: var(--primary-color);
}

.workflow-content {
    background-color: white;
    padding: 20px 30px;
    border-radius: var(--card-border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
}

.workflow-content h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    color: #666;
    font-size: 18px;
}

.mobile-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 50px 0;
}

.mobile-feature-item {
    background-color: white;
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.mobile-feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.mobile-feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(66, 93, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.mobile-feature-icon i {
    font-size: 30px;
    color: var(--primary-color);
}

.mobile-app-display {
    text-align: center;
    margin-top: 50px;
}

.mobile-app-image {
    max-width: 300px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.mobile-app-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.quotes-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.quote-card {
    background-color: white;
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    max-width: 500px;
    transition: var(--transition);
}

.quote-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.quote-content {
    position: relative;
    margin-bottom: 20px;
}

.quote-content i {
    font-size: 30px;
    color: rgba(66, 93, 203, 0.1);
    position: absolute;
    top: -10px;
    left: -5px;
}

.quote-content p {
    position: relative;
    padding-left: 30px;
    font-style: italic;
}

.quote-author {
    display: flex;
    align-items: center;
}

.quote-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    background-color: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    display: block;
}

.author-info h4 {
    margin-bottom: 5px;
}

.author-info p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}

.cta-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 15px;
}

/* 定价页面新增样式 */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
    color: white;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: var(--accent-color);
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.discount-badge {
    background-color: var(--accent-color);
    color: var(--dark-color);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.best-for {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.best-for span {
    background-color: rgba(66, 93, 203, 0.1);
    color: var(--primary-color);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.best-for p {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

.pricing-card.popular {
    transform: scale(1.05);
    z-index: 2;
}

.feature-disabled {
    color: #999;
}

.feature-disabled i {
    color: #ccc;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: 30px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.comparison-table th, 
.comparison-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.comparison-table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

.comparison-table th:first-child {
    text-align: left;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.feature-category {
    background-color: rgba(66, 93, 203, 0.05);
    font-weight: 600;
    color: var(--primary-color);
}

.add-ons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.add-on-card {
    background-color: white;
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.add-on-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.add-on-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(66, 93, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.add-on-icon i {
    font-size: 30px;
    color: var(--primary-color);
}

.add-on-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 15px 0;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 20px;
    background-color: white;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    position: relative;
    background-color: white;
}

.faq-question h3 {
    font-size: 18px;
    margin: 0;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
}

.faq-question i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    color: var(--primary-color);
}

.faq-question.active i {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-bottom: 20px;
    margin: 0;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.case-study-card {
    background-color: white;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.case-study-image {
    height: 200px;
    overflow: hidden;
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.1);
}

.case-study-content {
    padding: 20px;
}

.case-study-tag {
    display: inline-block;
    background-color: rgba(66, 93, 203, 0.1);
    color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.case-study-content h3 {
    margin-bottom: 10px;
}

.case-study-content p {
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
}

.read-more {
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
}

.read-more:hover {
    gap: 10px;
}

.cta-buttons-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}

.guarantee {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

.guarantee i {
    margin: 0 5px;
}

/* 合作伙伴页面新增样式 */
.partnership-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.partnership-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px 30px;
    border-radius: var(--card-border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    min-width: 150px;
}

.partnership-stats .stat-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.partnership-stats .stat-label {
    font-size: 14px;
    color: #666;
}

.partner-card {
    background-color: white;
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.partner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.partner-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(66, 93, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.partner-logo i {
    font-size: 36px;
    color: var(--primary-color);
}

.partner-name {
    margin-bottom: 10px;
    font-size: 20px;
}

.partner-description {
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.partner-link {
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    transition: gap 0.3s ease;
}

.partner-link:hover {
    gap: 10px;
}

.solution-tabs {
    margin-top: 50px;
}

.tab-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.tab-btn {
    padding: 10px 20px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease forwards;
}

.solution-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.solution-info {
    flex: 1 1 400px;
}

.solution-image {
    flex: 1 1 400px;
}

.solution-info h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 24px;
}

.solution-info p {
    margin-bottom: 20px;
}

.solution-features {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}

.solution-features li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.solution-features li i {
    color: var(--primary-color);
    margin-right: 10px;
}

.quote-icon {
    font-size: 24px;
    color: rgba(66, 93, 203, 0.2);
    margin-bottom: 10px;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.process-step {
    background-color: white;
    padding: 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    position: relative;
    transition: var(--transition);
}

.process-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 20px;
    background-color: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.step-content {
    margin-top: 10px;
}

.step-content h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    text-align: left;
}

.benefit-item {
    background-color: white;
    padding: 20px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(66, 93, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.benefit-icon i {
    font-size: 20px;
    color: var(--primary-color);
}

.benefit-item h4 {
    margin-bottom: 10px;
    font-size: 18px;
}

.partner-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.contact-form-container {
    max-width: 700px;
    margin: 40px auto 0;
}

.contact-form {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: var(--card-border-radius);
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.form-submit {
    text-align: center;
    margin-top: 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .dashboard-stats,
    .partnership-stats {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .pricing-toggle {
        flex-direction: column;
        gap: 10px;
    }
    
    .solution-content {
        flex-direction: column;
    }
}

/* 定义下滑隐藏导航栏的样式 */
header.nav-hidden {
    transform: translateY(-100px) translateX(-50%); /* 向上移出视野 */
    opacity: 0;
    pointer-events: none; /* 隐藏时禁用交互 */
}

/* 确保滚动类不会影响导航栏的隐藏/显示行为 */
header.scrolled.nav-hidden {
    transform: translateY(-100px) translateX(-50%);
    opacity: 0;
}

/* 页面过渡动画相关样式 */
.page-transitioning {
    overflow: hidden;
}

.nav-transition-out {
    opacity: 0.5;
    transform: translateX(-10px);
}

.nav-transition-in {
    opacity: 1;
    transform: translateX(0);
}

/* 删除导致页面内容消失的动画 */
/* 
.page-transitioning main,
.page-transitioning section:not(#hero) {
    animation: fadeOutRight 0.4s forwards;
}
*/

/* 为非首页添加特殊样式确保内容可见 */
.non-home-page main,
.non-home-page section {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
}

/* 添加苹果风格的滚动渐入动画 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 逐步延迟显示序列元素 */
.scroll-reveal-sequence > *:nth-child(1) { transition-delay: 0s; }
.scroll-reveal-sequence > *:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal-sequence > *:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal-sequence > *:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal-sequence > *:nth-child(5) { transition-delay: 0.4s; }

/* 为大型内容块设置更慢的动画 */
.scroll-reveal-slow {
    transition-duration: 1.2s;
}

/* 为不同方向的动画添加变体 */
.scroll-reveal-left {
    transform: translateX(-30px);
}

.scroll-reveal-right {
    transform: translateX(30px);
}

.scroll-reveal-left.visible,
.scroll-reveal-right.visible {
    transform: translateX(0);
}
/* 修复页面切换动画可能导致的布局问题 */
.page-transition {
    width: 100%;
}

/* 改进响应式布局 */
@media (max-width: 768px) {
    .dashboard-grid {
        display: flex;
        flex-direction: column;
    }
    
    .dashboard-info,
    .dashboard-image {
        width: 100%;
    }
}

/* 修复仪表盘网格布局 */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    align-items: center;
    width: 100%;
}

.dashboard-info {
    width: 100%;
}

.dashboard-image {
    width: 100%;
    position: relative;
}

/* 确保非首页内容可见 - 使用更强的选择器提高优先级 */
body.non-home-page .page-transition,
body.non-home-page .dashboard-grid,
body.non-home-page .dashboard-preview,
body.non-home-page .features-highlight,
body.non-home-page .dashboard-workflow,
body.non-home-page .dashboard-mobile {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
    width: 100% !important;
    display: block !important;
}

/* 修复仪表盘页面的图像尺寸问题 */
.dashboard-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 添加适当的文本排版 */
.dashboard-info h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--dark-color);
}

/* 修复特性列表样式 */
.dashboard-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.dashboard-features li {
    padding: 8px 0;
    position: relative;
    padding-left: 30px;
    margin-bottom: 8px;
}

.dashboard-features li i {
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--primary-color);
    font-size: 16px;
}

/* 页面标题样式修复 */
.page-header {
    background-color: white;
    padding: 120px 0 60px;
    text-align: center;
}

.page-title {
    font-size: 36px;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.page-subtitle {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 30px;
    color: #555;
}

/* 修复所有仪表盘特定页面的样式 */
.dashboard-preview,
.features-highlight,
.dashboard-workflow,
.dashboard-mobile {
    padding: 80px 0;
    overflow: hidden;
}

/* 修复网格布局中的图像溢出问题 */
.dashboard-grid {
    overflow: visible;
}

/* 修复移动应用版块样式 */
.mobile-app-image {
    max-width: 250px !important;
    margin: 0 auto;
    display: block;
}

/* 调整工作流时间线组件 */
.workflow-timeline {
    max-width: 900px;
    margin: 0 auto;
}

/* 移动端汉堡菜单样式 */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 200;
}

.mobile-menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* 添加移动端导航样式 */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 150;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.mobile-nav.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-nav ul li {
    margin: 20px 0;
}

.mobile-nav ul li a {
    font-size: 20px;
    color: var(--dark-color);
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    padding: 10px 0;
}

.mobile-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease, left 0.3s ease;
}

.mobile-nav ul li a:hover {
    color: var(--primary-color);
}

.mobile-nav ul li a:hover::after {
    width: 100%;
    left: 0;
}

.mobile-nav ul li.active a {
    color: var(--primary-color);
}

.mobile-nav ul li.active a::after {
    width: 100%;
    left: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* 更新移动端媒体查询 */
@media (max-width: 768px) {
    /* 显示汉堡菜单 */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* 隐藏桌面导航 */
    header nav {
        display: none;
    }
    
    /* 隐藏"立即体验"按钮 */
    .header-buttons {
        display: none;
    }
    
    /* 首页 Banner 按钮胶囊样式左右并列展示 */
    .hero-content .cta-buttons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }
    
    .hero-content .cta-buttons .btn {
        border-radius: 50px !important;
        padding: 10px 16px !important;
        min-width: 0 !important;
        width: auto !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        flex: 0 1 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .hero-content .btn-primary {
        background-color: var(--primary-color) !important;
        color: white !important;
    }
    
    .hero-content .btn-secondary {
        background-color: white !important;
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }
    
    /* 客户评价区域头像修复 */
    .testimonial-author {
        display: flex !important;
        align-items: center !important;
        margin-top: 15px !important;
    }
    
    .testimonial-author img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        margin-right: 12px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        background-color: #f5f5f5 !important; 
        border: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.08) !important;
        display: block !important;
    }
    
    /* 调整header布局，使Logo和汉堡菜单居两端 */
    header .container {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

/* 添加阻止滚动的样式 */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* 更窄屏幕的额外调整 */
@media (max-width: 480px) {
    header {
        top: 10px;
        width: 95%;
        padding: 10px 15px;
        border-radius: 30px;
    }
    
    .logo h1 {
        font-size: 18px;
    }
    
    .logo h1::before {
        font-size: 20px;
        margin-right: 5px;
    }
    
    /* 缩小移动菜单图标尺寸 */
    .mobile-menu-toggle {
        width: 25px;
        height: 18px;
    }
    
    /* 调整英雄区内容 */
    .hero-content h2 {
        font-size: 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* 调整特性卡片布局 */
    .features-grid {
        gap: 20px;
    }
    
    .feature-card {
        padding: 20px 15px;
    }
    
    /* 调整移动导航样式 */
    .mobile-nav ul li {
        margin: 15px 0;
    }
    
    .mobile-nav ul li a {
        font-size: 18px;
    }
    
    /* 优化小屏幕上的区块内边距 */
    #features, 
    #why-choose,
    #app-showcase,
    #testimonials,
    #download {
        padding: 40px 0;
    }
    
    /* 减少标题和区块间的空白 */
    .section-title {
        margin-bottom: 30px;
        font-size: 24px;
    }
    
    /* 调整为什么选择我们部分的布局 */
    .why-choose-content h2 {
        font-size: 24px;
    }
    
    .why-choose-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    /* 调整评价卡片 */
    .testimonial-card {
        padding: 20px 15px;
    }
    
    /* 调整底部CTA部分 */
    .cta-title {
        font-size: 24px;
    }
    
    .cta-subtitle {
        font-size: 14px;
        margin-bottom: 25px;
    }
}
/* 首页 Banner 按钮在移动端并列显示 */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: row !important;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    /* 确保英雄区域的统计卡片在移动端显示 */
    .stat-card.left-stat,
    .stat-card.right-stat,
    .stat-card.bottom-stat {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        position: absolute;
    }
    
    .stat-card.left-stat {
        top: 20px;
        left: -10px;
    }
    
    .stat-card.right-stat {
        top: 20px;
        right: -10px;
    }
    
    .stat-card.bottom-stat {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%) !important;
    }
    
    /* 专业功能与服务模块改为双行显示 */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
    
    /* 产品展示固定三行显示 */
    .app-screenshots {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .app-screenshots .screenshot {
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* 缩小客户评价模块 */
    .testimonial-card {
        padding: 15px !important;
        margin-bottom: 15px;
    }
    
    .testimonial-content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .testimonial-author img {
        width: 35px;
        height: 35px;
    }
    
    /* 页脚导航在移动端并排显示 */
    .footer-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "logo logo"
            "links1 links2"
            "contact contact";
        gap: 20px;
    }
    
    .footer-logo {
        grid-area: logo;
        text-align: center;
    }
    
    .footer-links:nth-of-type(1) {
        grid-area: links1;
    }
    
    .footer-links:nth-of-type(2) {
        grid-area: links2;
    }
    
    .footer-contact {
        grid-area: contact;
        text-align: center;
    }
    
    /* 英雄图悬浮卡片结构 */
    .hero-app-frame {
        position: relative;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
    
    .hero-app-image {
        position: relative;
        width: 100%;
    }
    
    .hero-app-image img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }
    
    .stat-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 8px 12px;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 10px;
        width: auto;
        max-width: 140px;
        z-index: 10;
    }
    
    .stat-card .stat-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        background: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    
    .stat-card .stat-info h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }
    
    .stat-card .stat-info p {
        margin: 0;
        font-size: 12px;
        color: #666;
    }
}

/* 更窄的屏幕下调整布局 */
@media (max-width: 480px) {
    /* 更适应小屏幕的按钮样式 */
    .cta-buttons .btn {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    /* 专业功能在超小屏幕下单列显示 */
    .features-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 修复英雄图悬浮模块在移动端的宽度问题 */
@media (max-width: 768px) {
    .stat-card {
        padding: 5px 8px !important;
        max-width: 120px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        z-index: 20 !important;
    }

    .stat-card .stat-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 10px !important;
        margin-right: 6px !important;
    }
    
    .stat-card .stat-info h4 {
        font-size: 12px !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }
    
    .stat-card .stat-info p {
        font-size: 10px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .stat-card.left-stat {
        top: 15% !important;
        left: -5px !important; 
    }
    
    /* 完全重做右侧卡片样式，彻底解决显示问题 */
    .stat-card.right-stat {
        /* 位置重置 - 使用固定位置而非相对位置 */
        position: absolute !important;
        top: auto !important; /* 不使用top定位 */
        bottom: 42% !important; /* 从35%改为42%, 将卡片向上移动 */
        right: 0 !important; /* 确保完全贴合屏幕右侧 */
        
        /* 降低尺寸 */
        width: auto !important;
        min-width: 0 !important; /* 移除最小宽度限制 */
        max-width: 150px !important; /* 减小最大宽度 */
        padding: 6px 10px !important; /* 减小内边距 */
        
        /* 确保显示在最上层 */
        z-index: 999 !important;
        
        /* 视觉样式 */
        background: var(--light-color) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; /* 减轻阴影 */
        border: none !important; /* 移除蓝色边框 */
        border-radius: 8px 0 0 8px !important; /* 减小圆角 */
        
        /* 确保可见性 */
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        transform: none !important;
        pointer-events: auto !important;
        
        /* 移除动画 */
        animation: none !important;
    }
    
    /* 调整右侧卡片内部元素尺寸 */
    .stat-card.right-stat .stat-icon {
        width: 28px !important; /* 减小图标尺寸 */
        height: 28px !important;
        min-width: 28px !important;
        font-size: 12px !important;
        margin-right: 8px !important;
    }
    
    .stat-card.right-stat .stat-info h4 {
        font-size: 13px !important; /* 减小字体 */
        margin-bottom: 1px !important; /* 减小间距 */
    }
    
    .stat-card.right-stat .stat-info p {
        font-size: 10px !important; /* 减小字体 */
    }
    
    /* 为了确保卡片始终可见，添加额外的动画效果以吸引注意 */
    @keyframes pulseEfficiency {
        0% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
    
    .stat-card.right-stat {
        animation: pulseEfficiency 5s ease-in-out infinite !important;
    }
    
    .stat-card.bottom-stat {
        bottom: 5px !important;
    }
    
    /* 产品展示区域优化 - 书签式叠放并支持滑动 */
    .app-screenshots {
        position: relative !important;
        height: 300px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        margin: 30px auto !important;
        width: 280px !important;
        perspective: 1000px !important;
    }
    
    .app-screenshots .screenshot {
        position: absolute !important;
        width: 220px !important;
        max-width: none !important;
        transition: all 0.5s ease !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        cursor: grab !important;
    }
    
    .app-screenshots .screenshot.active {
        z-index: 30 !important;
        transform: translateX(0) scale(1) !important;
        opacity: 1 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
    }
    
    .app-screenshots .screenshot.next {
        z-index: 20 !important;
        transform: translateX(40%) scale(0.9) rotate(5deg) !important;
        opacity: 0.8 !important;
    }
    
    .app-screenshots .screenshot.prev {
        z-index: 10 !important;
        transform: translateX(-40%) scale(0.9) rotate(-5deg) !important;
        opacity: 0.8 !important;
    }
    
    .app-screenshots .screenshot:not(.active):not(.next):not(.prev) {
        z-index: 5 !important;
        opacity: 0 !important;
        transform: translateX(0) scale(0.7) !important;
        pointer-events: none !important;
    }

    /* 轮播导航点优化 */
    .app-carousel-nav {
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .app-carousel-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: rgba(66, 93, 203, 0.3) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .app-carousel-dot.active {
        background-color: var(--primary-color) !important;
        transform: scale(1.2) !important;
    }
    
    /* 下载按钮样式优化 */
    .download-options {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .download-btn {
        background-color: #1A2236 !important;
        width: auto !important;
        max-width: 220px !important;
        padding: 10px 15px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .download-btn i {
        font-size: 20px !important;
    }
    
    .download-btn .small-text {
        font-size: 10px !important;
    }
    
    .download-btn .big-text {
        font-size: 14px !important;
    }
    
    /* 移动端页脚优化 */
    .footer-links {
        display: none !important; /* 隐藏"资源"和"快速链接"模块 */
    }
    
    .footer-contact {
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding-top: 15px !important;
        margin-top: 15px !important;
        position: relative !important;
    }
    
    /* 折叠式联系我们区域 */
    .footer-contact h4 {
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    
    .footer-contact h4::after {
        content: '\f078' !important;
        font-family: 'Font Awesome 6 Free' !important;
        font-weight: 900 !important;
        margin-left: 10px !important;
        font-size: 12px !important;
        transition: transform 0.3s ease !important;
    }
    
    .footer-contact.active h4::after {
        transform: rotate(180deg) !important;
    }
    
    .footer-contact-content {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    
    .footer-contact.active .footer-contact-content {
        max-height: 100px !important; /* 足够显示内容的高度 */
    }
}
/* 添加额外的媒体查询，针对超小屏幕调整 */
@media (max-width: 480px) {
    #hero {
        padding: 60px 0 120px; /* 在小屏幕上进一步增加底部间距 */
    }
    
    .scroll-down {
        bottom: 70px; /* 在小屏幕上进一步提高向下滚动按钮位置 */
    }
    
    .stat-card.right-stat {
        max-width: 150px !important; /* 在小屏幕上进一步增加右侧卡片宽度 */
        padding: 6px 10px !important; /* 增加内边距 */
        border: none !important; /* 移除蓝色边框 */
    }
}

/* 针对更小屏幕做进一步优化 */
@media (max-width: 480px) {
    /* ... existing code ... */
    
    /* 更小屏幕上进一步减小卡片尺寸 */
    .stat-card.right-stat {
        max-width: 130px !important;
        padding: 4px 8px !important;
        bottom: 50% !important; /* 从40%改为50%，在小屏幕上位置再往上一些 */
    }
    
    .stat-card.right-stat .stat-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 10px !important;
        margin-right: 6px !important;
    }
    
    .stat-card.right-stat .stat-info h4 {
        font-size: 11px !important;
    }
    
    .stat-card.right-stat .stat-info p {
        font-size: 9px !important;
    }
    
    /* ... existing code ... */
}

/* 针对更小屏幕单独处理页脚问题 */
@media (max-width: 480px) {
    /* ... existing code ... */
    
    /* 确保在最小屏幕上联系信息和社交图标正确显示 */
    .footer-contact-content,
    .footer-contact-content p,
    .social-links {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 微调社交图标布局 */
    .social-links {
        display: flex !important;
        justify-content: center !important;
        max-width: 180px !important;
        margin: 15px auto !important;
    }
    
    .social-link {
        margin: 0 8px !important;
    }
    
    /* ... existing code ... */
}

/* 重置页脚联系我们部分的样式，确保内容始终可见 */
.footer-contact-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.footer-contact-content p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 10px !important;
}

/* 移除折叠效果，确保始终显示内容 */
.footer-contact.active .footer-contact-content,
.footer-contact:not(.active) .footer-contact-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
}

@media (max-width: 768px) {
    /* ... existing code ... */
    
    /* 重置页脚在移动端的行为 */
    .footer-contact {
        width: 100% !important;
        text-align: center !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding-top: 15px !important;
        margin-top: 15px !important;
    }
    
    .footer-contact h4 {
        display: block !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        cursor: default !important;
    }
    
    /* 强制重置任何可能隐藏联系信息的样式 */
    .footer-contact-content,
    .footer-contact.active .footer-contact-content,
    .footer-contact:not(.active) .footer-contact-content {
        all: revert !important; /* 重置所有属性到初始状态 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        margin-top: 10px !important;
    }
    
    .footer-contact-content p,
    .footer-contact.active .footer-contact-content p,
    .footer-contact:not(.active) .footer-contact-content p {
        all: revert !important; /* 重置所有属性到初始状态 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* 移除任何可能的收起/展开箭头 */
    .footer-contact h4::after {
        display: none !important;
        content: none !important;
    }
    
    /* ... existing code ... */
}

@media (max-width: 480px) {
    .stat-card.right-stat {
        /* 简化边框 */
        border: none !important; /* 移除蓝色边框 */
        max-width: 140px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        bottom: 50% !important; /* 添加对齐位置，将卡片向上移动 */
    }
    
    .stat-card.right-stat .stat-icon {
        width: 24px !important; /* 进一步减小图标尺寸 */
        height: 24px !important;
        min-width: 24px !important;
    }
    
    .stat-card.right-stat .stat-info h4 {
        font-size: 12px !important; /* 减小字体 */
    }
    
    .stat-card.right-stat .stat-info p {
        font-size: 9px !important; /* 减小字体 */
    }
}

/* 确保非首页内容可见 - 但不禁用动画效果 */
body.non-home-page .page-transition {
    opacity: 1;
    visibility: visible;
    width: 100%;
    display: block;
}

/* 仅为特定元素保留动画效果 */
body.non-home-page .dashboard-grid,
body.non-home-page .dashboard-preview,
body.non-home-page .features-highlight,
body.non-home-page .dashboard-workflow,
body.non-home-page .dashboard-mobile {
    width: 100%;
    display: block;
}

/* 移除上面代码中的!important和transform:none/animation:none，以允许动画生效 */

/* 确保仪表盘页面的动态效果能够正常显示 */
body.non-home-page .page-transition,
body.non-home-page .dashboard-grid,
body.non-home-page .dashboard-preview,
body.non-home-page .features-highlight,
body.non-home-page .dashboard-workflow,
body.non-home-page .dashboard-mobile {
    opacity: 1;
    visibility: visible;
    width: 100%;
    display: block;
}

/* 允许特定区域的动画效果 */
body.non-home-page .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

body.non-home-page .scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 确保"随时随地掌控项目"和"体验智能仪表盘的力量"区域的动态效果 */
body.non-home-page .dashboard-content-block {
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

body.non-home-page .dashboard-content-block.visible {
    transform: translateY(0);
    opacity: 1;
}

/* 修改产品展示区域的布局，解决桌面端标题覆盖图片问题 */
#app-showcase {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    z-index: 1;
}

/* 修改section-title的z-index，确保显示在图片上方，同时保留span的渐变样式 */
.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: 700;
    position: relative;
    z-index: 10; /* 提高z-index确保在图片上方显示 */
}

/* 专门为桌面端调整产品展示部分的布局 */
@media (min-width: 769px) {
    #app-showcase .section-title {
        margin-bottom: 80px; /* 桌面端增加标题与图片之间的间距 */
    }
    
    .app-screenshots {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap;
        margin-top: 30px; /* 增加与标题的距离 */
        z-index: 5; /* 确保图片显示在适当的层级 */
    }
    
    /* 使桌面版截图并排显示，不重叠 */
    .screenshot {
        position: relative;
        max-width: 280px;
        transition: all 0.5s ease;
        z-index: 1;
    }
    
    /* 保留前面图片清晰，其他图片模糊的效果 */
    .screenshot:hover {
        z-index: 2;
        transform: scale(1.05);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        filter: blur(0); /* 确保鼠标悬停的图片清晰 */
    }
    
    .screenshot:not(:hover) {
        filter: blur(3px); /* 非鼠标悬停的图片保持模糊效果 */
    }
}

/* 在移动端提高标题的z-index，防止被轮播图覆盖，但保留span样式 */
@media (max-width: 768px) {
    #app-showcase .section-title {
        margin-bottom: 100px; /* 增加与轮播图的间距 */
        z-index: 10;
        position: relative;
        text-shadow: 0 1px 3px rgba(255,255,255,0.8); /* 添加文字阴影增加可读性 */
    }
    
    /* 确保在移动端产品展示标题的渐变样式保持一致 */
    #app-showcase .section-title span {
        background: var(--text-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: none; /* 移除渐变文字的阴影效果 */
    }
    
    /* 保留移动端的轮播效果 */
    .app-screenshots {
        height: 350px;
        margin-top: 0;
    }
}