/* --- 基础重置和变量 --- */
:root {
    --A5-primary-color: #000;
    --A5-secondary-color: #6C6EE5; /* 用于图表和强调 */
    --A5-text-dark: #222;
    --A5-text-light: #666;
    --A5-bg-light: #fff;
    --A5-btn-primary-bg: #1A1A1A;
    --A5-btn-primary-text: #fff;
}

/* --- 主要容器和布局 --- */
.A5-banner-container {
    padding: 5px 0;
    position: relative;
    /* 背景保持透明 */
    background: transparent; 
    overflow: hidden;
}

.A5-content-wrapper {
    /* 宽度优化：增加最大宽度到 1400px */
    max-width: 1500px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 增加左右内边距 */
    padding: 2 10px; 
}

/* --- 左侧内容样式 --- */
/* 标题和段落的切入动画 */
@keyframes A5-title-fadein {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.A5-content-left {
    flex: 1;
    max-width: 55%; 
    z-index: 10;
}

.A5-tag-expert {
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 15px;
    background-color: var(--A5-bg-light);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--A5-text-dark);
}

.A5-content-left h1 {
    font-size: 70px; 
    line-height: 1.2;
    font-weight: 800;
    color: var(--A5-text-dark);
    margin-bottom: 20px;
    /* 应用标题切入动画 */
    animation: A5-title-fadein 0.8s ease-out 0.2s backwards; 
}

.A5-content-left h1 span {
    color: #F55F98; 
    display: inline-block;
    position: relative;
}

.A5-content-left p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--A5-text-light);
    margin-bottom: 30px;
    /* 应用段落切入动画 (延迟启动) */
    animation: A5-title-fadein 0.8s ease-out 0.4s backwards;
}

/* --- 按钮样式 --- */
.A5-cta-buttons a {
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s, transform 0.1s;
    display: inline-flex;
    align-items: center;
}

.A5-btn-primary {
    background-color: var(--A5-btn-primary-bg);
    color: var(--A5-btn-primary-text);
    margin-right: 15px;
}

.A5-btn-primary:hover {
    background-color: #333;
}

.A5-btn-secondary {
    background-color: transparent;
    color: var(--A5-text-dark);
    border: 2px solid var(--A5-text-dark); 
    padding: 12px 25px;
}

.A5-btn-secondary:after {
    content: '→'; 
    margin-left: 8px;
    font-size: 20px;
    line-height: 1;
}

/* 按钮点击反馈 (按下时收缩) */
.A5-btn-primary:active, .A5-btn-secondary:active {
    transform: scale(0.98);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* --- 右侧视觉区域样式 --- */
.A5-content-right {
    flex: 1;
    max-width: 45%; 
    display: flex;
    justify-content: center;
    position: relative;
}

.A5-image-area {
    position: relative;
    min-height: 400px;
    width: 100%;
}

.A5-megaphone-img {
    max-width: 100%;
    height: auto;
    display: block;
    z-index: 5;
    position: relative;
    /* 确保主图也能平滑移动 (JS控制) */
    transition: transform 0.1s linear; 
}

/* --- 浮动卡片通用样式 (增加立体感和初始位移) --- */
.A5-card-clients, .A5-card-metrics-marketing, .A5-card-metrics-success {
    position: absolute;
    background-color: var(--A5-bg-light);
    border-radius: 15px;
    /* 增强阴影，增加 Z 轴深度 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); 
    padding: 15px;
    z-index: 15;
    text-align: center;
    backdrop-filter: blur(10px); 
    background-color: rgba(255, 255, 255, 0.85); 
    /* 动态浮动效果的过渡 */
    transition: transform 0.2s ease-out, box-shadow 0.3s ease-in-out; 
}

/* 客户数卡片定位和初始倾斜 */
.A5-card-clients {
    top: 5%;
    right: 5%;
    width: 180px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 初始轻微位移和旋转 */
    transform: translate(5px, 5px) rotateZ(-1deg);
}

/* 营销数据卡片定位和初始倾斜 */
.A5-card-metrics-marketing {
    bottom: 0;
    left: 10%;
    width: 220px;
    padding: 20px;
    text-align: left;
    /* 初始轻微位移和旋转 */
    transform: translate(-5px, 5px) rotateZ(1deg);
}

/* 成功率卡片定位和初始位移 */
.A5-card-metrics-success {
    bottom: 20%;
    right: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    /* 初始轻微位移 */
    transform: translate(0, -5px);
}

/* 卡片悬停效果：取消倾斜，放大，增强阴影 */
.A5-card-clients:hover, 
.A5-card-metrics-marketing:hover, 
.A5-card-metrics-success:hover {
    transform: translate(0, 0) rotateZ(0deg) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}


.A5-card-clients span {
    font-weight: 600;
    color: var(--A5-text-dark);
    margin-bottom: 8px;
}

.A5-client-avatars img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--A5-bg-light);
    margin-left: -10px;
    object-fit: cover;
}
.A5-client-avatars img:first-child {
    margin-left: 0;
}

.A5-card-metrics-marketing .A5-metric-title {
    font-size: 14px;
    color: var(--A5-text-light);
    display: block;
}
.A5-card-metrics-marketing .A5-metric-percent {
    font-size: 24px;
    font-weight: 800;
    color: var(--A5-text-dark);
    display: block;
    margin-bottom: 10px;
}

.A5-chart-placeholder {
    margin-top: 10px;
}

.A5-line-chart {
    width: 100%;
    height: auto;
}

/* 成功率卡片定位 */
.A5-card-metrics-success {
    bottom: 20%;
    right: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
}

.A5-success-rate-icon {
    font-size: 30px;
    margin-bottom: 5px;
}

.A5-card-metrics-success .A5-metric-percent {
    font-size: 28px;
    font-weight: 800;
    color: var(--A5-text-dark);
}

.A5-card-metrics-success .A5-metric-label {
    font-size: 14px;
    color: var(--A5-text-light);
}
/* --- 响应式设计 (RWD) --- */
/* ... (媒体查询保持不变) ... */
@media (max-width: 1450px) {
    .A5-content-wrapper, .A5-trust-bar-wrapper {
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    .A5-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .A5-content-left, .A5-content-right {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .A5-content-left h1 {
        font-size: 40px;
    }

    .A5-cta-buttons {
        justify-content: center;
        display: flex;
    }
    
    /* 992px以下，取消浮动卡片的初始倾斜和位移，避免布局错乱 */
    .A5-card-clients, .A5-card-metrics-marketing, .A5-card-metrics-success {
        transform: none !important;
    }

    .A5-card-clients { top: -20px; right: 10px; }
    .A5-card-metrics-marketing { left: 5%; bottom: 5%; width: 45%; }
    .A5-card-metrics-success { right: 5%; bottom: 5%; width: 40%; }
}

@media (max-width: 600px) {
    .A5-banner-container { padding: 40px 0; }
    
    .A5-cta-buttons { flex-direction: column; gap: 10px; }
    .A5-cta-buttons a { width: 80%; margin: 0 auto; }

    .A5-card-metrics-marketing, .A5-card-metrics-success {
        position: static; 
        margin: 10px auto;
        width: 90%;
    }
    .A5-image-area { min-height: auto; }
}