/* 基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: system-ui, -apple-system, sans-serif; 
    background-color: #fafafa; 
    overflow-x: hidden;
}

.container { 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 40px 20px; 
}

/* 标签栏样式 */
.tab-bar { 
    margin-bottom: 50px; 
    position: relative; 
}
.tab-buttons { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    justify-content: center;
}
.tab-btn { 
    padding: 14px 24px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #64748b; 
    background-color: white; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
.tab-btn.active { 
    color: white; 
    background-color: #2563eb; 
}
.tab-bar-bg { 
    position: absolute; 
    top: 30%; 
    left: 50%; 
    width: 80%; 
    height: 40%; 
    background-color: #dbeafe; 
    border-radius: 100px; 
    z-index: -1; 
    transform: translateX(-50%);
}

/* 内容区域样式 */
.content-container { 
    position: relative; 
}
.tab-content { 
    display: none; 
    flex-wrap: wrap; 
    gap: 60px; 
    align-items: center; 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.5s ease, transform 0.5s ease; 
}
.tab-content[data-content="1"] { 
    display: flex; 
    opacity: 1; 
    transform: translateY(0); 
}

/* 文字部分样式 */
.text-section { 
    flex: 1; 
    min-width: 300px; 
    max-width: 600px; 
}
.tag { 
    display: inline-block; 
    padding: 6px 16px; 
    font-size: 14px; 
    font-weight: 500; 
    border-radius: 30px; 
    margin-bottom: 20px; 
}
.section-title { 
    font-size: 42px; 
    font-weight: 700; 
    color: #1e293b; 
    margin: 0 0 30px 0; 
    line-height: 1.2; 
}
.section-desc { 
    font-size: 18px; 
    color: #64748b; 
    line-height: 1.7; 
    margin: 0 0 40px 0; 
}

/* 功能项样式 */
.features { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 24px; 
}
.feature-item { 
    display: flex; 
    gap: 20px; 
    padding: 20px; 
    background-color: white; 
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
    transition: all 0.3s ease; 
}
.feature-icon { 
    width: 56px; 
    height: 56px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}
.feature-icon span { 
    font-size: 24px; 
}
.feature-text h3 { 
    font-size: 20px; 
    font-weight: 600; 
    margin: 0 0 10px 0; 
}
.feature-text p { 
    font-size: 16px; 
    color: #64748b; 
    line-height: 1.6; 
    margin: 0; 
}

/* 按钮样式 */
.consult-btn { 
    margin-top: 40px; 
    padding: 16px 32px; 
    font-size: 16px; 
    font-weight: 600; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    transition: all 0.3s ease; 
}
.consult-btn span { 
    transition: transform 0.3s ease; 
}

/* 图片部分样式 */
.image-section { 
    flex: 1; 
    min-width: 300px; 
    position: relative; 
}
.image-container { 
    position: relative; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 20px 60px rgba(37,99,235,0.15); 
    transform: perspective(1000px) rotateY(5deg); 
    transition: all 0.5s ease; 
}
.image-container img { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.image-decor { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    border-radius: 50%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: -1; 
    filter: blur(80px); 
}

/* 弹窗样式 */
.modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.5); 
    display: none; 
    align-items: center; 
    justify-content: center; 
    z-index: 1000; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
.modal-content { 
    width: 90%; 
    max-width: 400px; 
    background-color: white; 
    border-radius: 16px; 
    overflow: hidden; 
    transform: translateY(20px); 
    transition: transform 0.3s ease; 
}
.modal-header { 
    padding: 20px 24px; 
    border-bottom: 1px solid #f1f5f9; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.modal-header h3 { 
    font-size: 20px; 
    font-weight: 600; 
    margin: 0; 
}
.close-modal { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background-color: #f1f5f9; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.close-modal span { 
    font-size: 18px; 
    color: #64748b; 
}
.modal-body { 
    padding: 30px 24px; 
    text-align: center; 
}
.modal-body p { 
    font-size: 16px; 
    color: #64748b; 
    margin: 0 0 25px 0; 
}
.qrcode-container { 
    width: 220px; 
    height: 220px; 
    margin: 0 auto 25px; 
    padding: 10px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
}
.qrcode-container img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.modal-footer { 
    padding: 16px 24px; 
    background-color: #f8fafc; 
    display: flex; 
    justify-content: center; 
}
.modal-btn { 
    padding: 12px 24px; 
    background-color: #2563eb; 
    color: white; 
    font-size: 14px; 
    font-weight: 600; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
}

/* 主题色样式 */
.tag1, .icon1 { background-color: #dbeafe; color: #2563eb; }
.btn1, .decor1 { background-color: #2563eb; }

.tag2, .icon2 { background-color: #dcfce7; color: #166534; }
.btn2, .decor2 { background-color: #166534; }

.tag3, .icon3 { background-color: #fff7ed; color: #92400e; }
.btn3, .decor3 { background-color: #92400e; }

.tag4, .icon4 { background-color: #fce7f3; color: #9d174d; }
.btn4, .decor4 { background-color: #9d174d; }

.tag5, .icon5 { background-color: #f3f4f6; color: #374151; }
.btn5, .decor5 { background-color: #374151; }

/* 奇数偶数标签页图片旋转方向 */
.tab-content[data-content="2"] .image-container,
.tab-content[data-content="4"] .image-container {
    transform: perspective(1000px) rotateY(-5deg);
}