/* css/style.css */

/* --- 1. 基础重置与变量 --- */
:root {
    --color-primary: #1E5AF8;
    --text-main: #202632;
    --text-sub: #666A73;
    --text-white: #ffffff;
    --border-color: #AAAAAA;
    --bg-light: #F8FAFF;
    --container-width: 1300px; /* 核心内容宽度 */
    --font-stack: 'Outfit', 'SourceHanSansSC', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-stack);
    color: var(--text-main);
    background-color: #fff;
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, li { list-style: none; padding: 0; margin: 0; }

/* --- 2. 布局容器工具 --- */
.section { width: 100%; position: relative; overflow: hidden; }

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px; /* 防止小屏贴边 */
    position: relative;
}

/* 间距工具 */
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.pt-30 { padding-top: 30px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-60 { gap: 60px; }

/* Flex 工具 */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-start { display: flex; justify-content: flex-start; align-items: flex-start; }
.flex-wrap { flex-wrap: wrap; }

/* --- 3. Header 样式 --- */
.site-header {
    height: 70px;
    border-bottom: 0.5px solid var(--border-color);
    background: white;
    position: sticky; /* 可选：吸顶效果 */
    top: 0;
    z-index: 1000;
}

.header-inner { height: 100%; }
.logo { width: 150px; }

.nav-menu { display: flex; gap: 53px; }
.nav-link { font-size: 16px; color: var(--text-main); transition: color 0.3s; }
.nav-link.active { color: var(--color-primary); font-weight: 600; }
.nav-link:hover { color: var(--color-primary); }

/* --- 4. Footer 样式 (严格复刻版) --- */
.site-footer {
    width: 100%;
    height: 360px;
    /* 还原原版精确的径向渐变参数 */
    background: radial-gradient(ellipse 58.83% 28.28% at 50.00% -5.81%, rgba(30, 90, 248, 0.90) 0%, rgba(30, 90, 248, 0.45) 50%, rgba(30, 90, 248, 0) 100%), #202632;
    display: flex;
    justify-content: center;
    margin-top: auto;
    flex-shrink: 0;
}

.footer-inner {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 64px; /* 对应原版 top: 64.57px */
    position: relative;
}

.footer-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* 对应原版 gap: 32px */
}

/* Logo与描述文字的容器 */
.footer-brand-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer-logo {
    width: 160px;
    height: auto;
    display: block;
}

.footer-desc {
    width: 588px; /* 固定宽度以保证换行一致 */
    text-align: center;
    color: rgba(255, 255, 255, 0.60);
    font-size: 16px;
    font-family: var(--font-stack);
    font-weight: 400;
    line-height: 1.5;
}

/* 底部导航链接行 */
.footer-nav-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-nav-link {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 300; /* 原版 font-weight: 330，最接近的是 300 */
    line-height: 20px;
    opacity: 1;
    transition: opacity 0.3s;
}

.footer-nav-link:hover {
    opacity: 0.8;
}

.footer-nav-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.20);
}

/* 分割线 - 使用 margin-top 顶开距离，模拟原版 top: 298.57px 的位置 */
.footer-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.20);
    margin-top: 52px; /* 精确计算后的间距 */
}

/* 版权信息 - 对应原版 top: 319.57px */
.footer-copyright {
    color: rgba(255, 255, 255, 0.60);
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    margin-top: 20px;
    text-align: center;
}
/* --- 5. 通用组件 --- */

/* 按钮 */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    width:200px;
    background: var(--color-primary);
    color: white;
    border-radius: 48px;
    font-size: 20px;
    font-weight: 700;
    gap: 10px;
    transition: all 0.3s;
}
.btn-pill:hover { background: #1648d6; }
.btn-dot { position: relative; width: 16px; height: 16px; }
.btn-dot::after { content:''; position: absolute; width:16px; height:16px; background:rgba(255,255,255,0.3); border-radius:50%; }
.btn-dot::before { content:''; position: absolute; width:8px; height:8px; background:white; border-radius:50%; top:4px; left:4px; z-index:1; }

/* 标题 */
.h-center-title { text-align: center; font-size: 40px; font-weight: 700; margin-bottom: 60px; }
.text-blue { color: var(--color-primary); }

/* Banner 通用 */
.page-banner {
    height: 429px; /* 内页默认高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--text-main);
}
.page-banner.large { height: 552px; } /* 收单页这种大一点的 */
.banner-text-box { text-align: center; z-index: 2; position: relative; }
.banner-title { font-size: 48px; font-weight: 700; margin-bottom: 10px; }
.banner-sub { font-size: 32px; font-weight: 400; opacity: 0.8; }
.banner-icon-label { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.banner-icon-label span { font-size: 36px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; }

/* 三步流程 (Step 1-2-3) */
.steps-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 50px; margin-bottom: 50px; }
.step-item { display: flex; flex-direction: column; align-items: center; width: 200px; text-align: center; }
.step-icon { height: 112px; margin-bottom: 20px; display: flex; align-items: center; }
.step-title-box { position: relative; margin-bottom: 10px; }
.step-num { position: absolute; left: -40px; top: 0; width: 36px; height: 36px; border: 1px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.step-title { font-size: 24px; font-weight: 700; }
.step-desc { font-size: 16px; color: var(--text-main); }
.step-arrow { margin-top: 50px; width: 143px; }

/* --- 首页底部 CTA 模块 (严格复刻版) --- */
.cta-section-restored {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    /* 原版精确的径向渐变参数，制造底部发光效果 */
    background: radial-gradient(ellipse 46.75% 39.66% at 50.00% 123.75%, #88E5FF 0%, #1E5AF8 100%), #1E5AF8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 装饰圆环系统 - 使用绝对定位+居中变换，替代原版硬编码 left 值 */
.cta-ring {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%); /* 确保在任何屏幕宽度下都水平居中 */
    pointer-events: none; /* 避免挡住鼠标点击 */
    box-sizing: border-box;
}

/* 圆环 1 (最外层大圆) */
.cta-ring-1 {
    width: 681px;
    height: 680px;
    top: -37px; /* 原版 top 值 */
    border: 2px solid rgba(255, 255, 255, 0.08);
}

/* 圆环 2 (次大圆) */
.cta-ring-2 {
    width: 517px;
    height: 516px;
    top: 45px; /* 原版 top 值 */
    border: 2px solid rgba(255, 255, 255, 0.15);
}

/* 圆环 3 (中圆) */
.cta-ring-3 {
    width: 358px;
    height: 357px;
    top: 124px; /* 原版 top 值 */
    border: 2px solid rgba(255, 255, 255, 0.30);
}

/* 圆环 4 (中心圆) */
.cta-ring-4 {
    width: 206px;
    height: 206px;
    top: 200px; /* 原版 top 值 */
    border: 2px solid rgba(255, 255, 255, 0.50);
}

/* 内容层 */
.cta-content {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 原版文字在 top: 168px，按钮在下方，这里使用 gap 模拟间距 */
    padding-top: 40px; 
    gap: 50px;
}

.cta-title {
    color: white;
    font-size: 40px;
    font-family: var(--font-stack);
    font-weight: 900;
    margin: 0;
}

.cta-btn-white {
    text-decoration: none;
    background: white;
    color: #1E5AF8;
    font-size: 20px;
    font-family: var(--font-stack);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 100px;
    min-width: 140px;
    text-align: center;
    transition: transform 0.2s;
}

.cta-btn-white:hover {
    transform: scale(1.05);
}

/* 国家/地区 Chip (用于地图下方列表) */
.chip-container { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.country-chip {
    background: white;
    border-radius: 30px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--text-main);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.country-icon { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; }

/* 首页特定样式 */
.hero-banner { height: 600px; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hero-bg-img { position: absolute; width: 1920px; height: 100%; top:0; left: 50%; transform: translateX(-50%); z-index: 0; }
.hero-content { position: relative; z-index: 1; text-align: left; }
.hero-content h1 { font-size: 52px; font-weight: 900; margin-bottom: 20px; }
.hero-content p { font-size: 20px; margin-bottom: 40px; }

/* --- Solutions Section (精准复刻版) --- */

/* 外层容器：使用 Flexbox 保持卡片横向排列 */
.solutions-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px; /* 原版容器内边距 */
    width: 100%;
}

/* 卡片基础样式：内部使用绝对定位以还原像素级位置 */
.solution-card {
    width: 360px;
    height: 398px;
    background: linear-gradient(180deg, #EFF3FF 0%, white 100%);
    border-radius: 16px;
    position: relative; /* 为内部绝对定位提供基准 */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(30, 90, 248, 0.1);
}

/* 卡片标题通用 */
.solution-title {
    position: absolute;
    top: 229px;
    /* 原版 left 分别是 60.33px, 57.33px, 57.33px，统一微调为 57px */
    left: 57px; 
    font-size: 24px;
    font-weight: 700;
    line-height: 43.20px;
    color: var(--text-main);
    margin: 0;
}

/* 卡片描述通用 */
.solution-desc {
    position: absolute;
    top: 275px;
    left: 57px; /* 统一对齐 */
    width: 245px;
    color: var(--text-sub);
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
}

/* --- 卡片差异化处理 (还原原版图片位置和字体大小) --- */

/* 卡片 1 (跨境电商) */
.sol-img-1 {
    position: absolute;
    left: 41px;
    top: 60px;
    width: 278px;
    height: 169px;
}
.desc-large {
    font-size: 20px; /* 原版此处字体较大 */
    line-height: 30px;
}

/* 卡片 2 (外贸B2B) */
.sol-img-2 {
    position: absolute;
    left: 50px;
    top: 47px;
    width: 260px;
    height: 140px;
}
.desc-small {
    font-size: 14px; /* 原版此处字体较小 */
    line-height: 21px;
}

/* 卡片 3 (出海数娱) */
.sol-img-3 {
    position: absolute;
    left: 57px;
    top: 51.44px;
    width: 226px;
    height: 138px;
}
/* 描述样式同 desc-small */

.zigzag-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 80px; }
.zigzag-row.reverse { flex-direction: row-reverse; }
.zigzag-text { width: 48%; }
/* --- ZigZag 图片组件 (精确复刻版) --- */

/* 图片容器基础 - 保持 FlexItem 特性但内部允许绝对定位 */
.zigzag-img-wrapper {
    position: relative;
    width: 501px; /* 固定宽度以保证内部定位准确 */
    flex-shrink: 0; /* 防止被挤压 */
}

/* 通用：内部元素绝对定位 */
.zigzag-bg-shape,
.zigzag-main-img {
    position: absolute;
    display: block;
}

.zigzag-main-img {
    border-radius: 30px; /* 原版通用圆角 */
    /* 简单的投影让图片稍微立体一点，原版有 outline，这里用 border 模拟 */
    outline: 0.5px solid white; 
}

/* --- 第一行：全球收款 (Type 1) --- */
/* 原版高度 500px */
.zigzag-type-1 {
    height: 500px;
}

.zigzag-type-1 .zigzag-bg-shape {
    width: 501px;
    height: 184px;
    top: 326px; /* 原版 top */
    left: 0;
    background: linear-gradient(270deg, #1E5AF8 0%, rgba(30, 90, 248, 0.61) 20%, rgba(30, 90, 248, 0) 100%);
    border-radius: 200px;
}

.zigzag-type-1 .zigzag-main-img {
    width: 425px;
    height: 393px;
    top: 70px; /* 原版 top */
    left: 0;
    /* 第一张图没有 outline */
    outline: none; 
}

/* --- 第二行 & 第四行：全球收单/发卡 (Type 2 - Reverse) --- */
/* 原版高度 470px，背景旋转 180度 */
.zigzag-type-2 {
    height: 470px;
}

.zigzag-type-2 .zigzag-bg-shape {
    width: 501px;
    height: 184px;
    /* 原版是 transform: rotate(180deg) 配合 origin top left */
    /* 这里我们直接模拟旋转后的位置和渐变方向，更稳定 */
    bottom: 0; 
    right: 0; 
    background: linear-gradient(90deg, #1E5AF8 0%, rgba(30, 90, 248, 0.61) 20%, rgba(30, 90, 248, 0) 100%);
    border-radius: 200px;
}

.zigzag-type-2 .zigzag-main-img {
    width: 380px;
    height: 380px;
    top: 31px; /* 原版 top */
    left: 77px; /* 原版 left */
}

/* --- 第三行：全球分发 (Type 3) --- */
/* 原版高度 470px，背景位置稍有不同 */
.zigzag-type-3 {
    height: 470px;
}

.zigzag-type-3 .zigzag-bg-shape {
    width: 501px;
    height: 184px;
    top: 286px; /* 原版 top: 286px */
    left: 0;
    background: linear-gradient(270deg, #1E5AF8 0%, rgba(30, 90, 248, 0.61) 20%, rgba(30, 90, 248, 0) 100%);
    border-radius: 200px;
}

.zigzag-type-3 .zigzag-main-img {
    width: 380px;
    height: 380px;
    top: 31px; /* 原版 top */
    left: 45px; /* 原版 left */
}

/* --- Stats Section (精准复刻版) --- */

.stats-section-restored {
    width: 100%;
    height: 850px;
    background: linear-gradient(126deg, #3C72FF 0%, #1E5AF8 100%);
    position: relative;
    overflow: hidden;
    /* 作为一个大的相对定位容器，供内部元素定位 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. 地图背景：还原原版定位 */
/* 原版 left: 335px (在1920宽画布上) => 相当于水平居中 */
.stats-map-bg {
    position: absolute;
    top: 300px; /* 原版 top */
    left: 50%;
    transform: translateX(-50%);
    width: 1250px;
    height: 550px;
    z-index: 0;
    opacity: 1; /* 原版无透明度设置，如需微调可加 */
}

/* 2. 标题：还原原版位置 top: 98px */
.stats-header-box {
    margin-top: 98px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.stats-title-text {
    font-size: 40px;
    font-weight: 700;
    color: white;
}

/* 3. 数据行：还原原版位置 top: 218px */
/* 计算间距：218px (数据top) - 98px (标题top) - 标题高度(约50px) = margin-top */
/* 这里直接用 Flex 容器模拟原版宽度 1154px 的分布 */
.stats-row-box {
    width: 1154px;
    margin-top: 70px; /* 视觉调整以匹配原版 218px 的起始位置 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.stat-item-fixed {
    color: white;
    /* 原版宽度各不相同，这里不需要强制宽，自然撑开即可 */
}

.stat-num-fixed {
    font-family: 'Inter', sans-serif; /* 原版指定字体 */
    font-size: 57.6px;
    font-weight: 700;
    line-height: 84.67px;
}

.stat-label-fixed {
    font-size: 24px;
    font-weight: 400;
    line-height: 35.28px;
    margin-left: 10px; /* 原版微调偏移 */
}

/* 4. 优势卡片行：还原原版位置 top: 422px */
.benefits-row-box {
    /* 容器宽度计算：Card(360)*3 + Gap(66)*2 = 1212px */
    /* 原版卡片位置：355, 781, 1207。间距为 781-355-360 = 66px */
    width: 1212px; 
    margin-top: 80px; /* 视觉调整以匹配原版 422px 的起始位置 */
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* 卡片本体 - 内部绝对定位容器 */
.benefit-card-fixed {
    width: 360px;
    height: 360px;
    background: white;
    border-radius: 16px;
    position: relative; /* 关键：为内部绝对定位提供基准 */
    overflow: hidden;
}

/* 卡片内部元素 - 像素级还原 */
.b-card-icon-box {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 130px; /* (360-100)/2 = 130，水平居中 */
    top: 61px; /* 原版 top */
    overflow: hidden;
}

.b-card-title {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 187px; /* 原版 top */
    color: var(--text-main);
    font-size: 28px;
    font-weight: 700;
    line-height: 50.40px;
    margin: 0;
}

.b-card-desc {
    position: absolute;
    width: 277px;
    left: 42px; /* (360-277)/2 ≈ 41.5 */
    top: 248px; /* 原版 top */
    text-align: center;
    color: var(--text-black1, #636363);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}
/* 收款页特定 */
.collection-grid { display: flex; justify-content: space-between; gap: 20px; }
.col-card { width: 32%; background: linear-gradient(180deg, #FDFDFE 0%, rgba(255, 255, 255, 0) 100%); border: 1px solid white; border-radius: 12px; overflow: hidden; padding-bottom: 20px; }
.col-card-content { padding: 20px; }
.pain-point, .solution, .benefit { margin-bottom: 10px; font-size: 14px; color: #515151; }
.label-tag { font-weight: 700; color: var(--color-primary); text-transform: uppercase; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }

/* =========================================
   全球收款页 (Global Collection) 精确复刻样式
   ========================================= */

/* --- 1. 顶部 Banner (复刻原版渐变和布局) --- */
.collection-banner {
    width: 100%;
    height: 429px;
    position: relative;
    /* 原版复杂的双层背景模拟：底层白，上层光效 */
    background: radial-gradient(ellipse 158.96% 118.26% at 77.73% 74.36%, rgba(132.40, 166.15, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%);
    overflow: hidden;
}
.collection-banner-img {
    position: absolute;
    width: 1920px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.collection-banner-content {
    position: relative;
    z-index: 1;
    width: 1300px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 36px; /* 原版定位 left: 346px - container padding */
}

/* --- 2. 解决方案卡片 (Cards with Overlays) --- */
.sol-cards-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px; /* 原版 padding */
}

.sol-card-fixed {
    width: 377px; /* 原版 376.73px */
    height: 492px; /* 原版 491.63px */
    background: linear-gradient(180deg, #FDFDFE 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 12px;
    outline: 2px solid white; /* 原版 outline */
    position: relative;
    overflow: hidden;
}

/* 卡片顶部图片区域 */
.sol-card-top {
    width: 100%;
    height: 194px;
    position: relative;
    overflow: hidden;
}

.sol-card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 特殊切角标签 (场景一、二、三) */
.sol-card-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 91px;
    height: 42px;
    background: linear-gradient(90deg, #1E5AF8 0%, #5987FF 100%);
    border-bottom-right-radius: 57px; /* 原版特殊切角 */
    color: white;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-left: 16px;
    z-index: 2;
}

/* 图片上的悬浮气泡 (原版绝对定位还原) */
.bubble-tag {
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(30, 90, 248, 0.70) 0%, rgba(30, 90, 248, 0.20) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bubble-inner {
    width: 72px;
    height: 72px;
    background: linear-gradient(180deg, white 0%, #D7E2FF 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1E5AF8;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
}

/* 卡片文本内容区域 */
.sol-card-body {
    padding: 20px;
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sol-text-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
/* 双色圆点图标 */
.icon-dot-split {
    width: 20px;
    height: 15px;
    position: relative;
}
.icon-dot-split::before { content:''; position:absolute; left:0; width:15px; height:15px; background:linear-gradient(90deg, #1E5AF8 0%, rgba(89,135,255,0.6) 100%); border-radius:50%; }
.icon-dot-split::after { content:''; position:absolute; right:0; width:15px; height:15px; background:linear-gradient(270deg, rgba(255,158,23,0.5) 0%, rgba(255,158,23,0.1) 100%); border-radius:50%; }

.sol-label {
    color: #1E5AF8;
    font-size: 16px;
    font-weight: 700;
}
.sol-desc {
    color: #515151;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* --- 3. 中间 VA 模块 (Global/Local VA) --- */
.va-section-wrapper {
    width: 100%;
    background: linear-gradient(90deg, #EFF3FF 0%, #FFF8EF 100%);
    padding-top: 60px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.va-content-box {
    width: 1420px; /* 原版宽度 */
    height: 610px;
    background: url('../images/bg-collection_mid.png') center no-repeat;
    position: relative; /* 用于内部绝对定位 */
    margin-top: 60px;
}

/* 中心圆环 */
.va-center-circle {
    position: absolute;
    width: 237px;
    height: 237px;
    left: 50%;
    top: 166px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #1E5AF8 0%, #5987FF 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    z-index: 2;
}
.va-center-title { font-size: 28px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; }
.va-center-sub { font-size: 23px; opacity: 0.8; }

/* 左右两侧内容 - 使用绝对定位还原原版位置 */
.va-left-col {
    position: absolute;
    left: 80px;
    top: 72px;
    width: 474px;
}
.va-right-col {
    position: absolute;
    right: 40px; /* 原版 left: 883px relative to 1420px box */
    top: 74px;
    width: 495px;
}

.va-header { display: flex; gap: 12px; margin-bottom: 30px; }
.va-icon { width: 71px; height: 71px; }
.va-title-box h3 { margin: 0; font-size: 24px; font-weight: 700; }
.va-title-box p { margin: 0; font-size: 19px; color: #515151; }

.va-list-group { margin-bottom: 30px; }
.va-list-label { font-size: 19px; font-weight: 700; margin-bottom: 10px; display: block; }
.va-list-sub { font-size: 14px; color: #515151; font-weight: 400; }

/* Chips 样式微调 */
.va-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.va-chip {
    background: white;
    border-radius: 24px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #636363;
}
.va-chip img { width: 19px; height: 19px; border-radius: 50%; }
.va-chip b { color: #2D2D2D; font-weight: 700; }

/* --- 4. 三步流程 (微调) --- */
.step-container-fixed {
    padding-top: 30px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* =========================================
   全球收单页 (Global Acquiring) 精确复刻样式
   ========================================= */

/* --- 1. Banner & 悬浮信息卡 --- */
.acquiring-banner {
    width: 100%;
    height: 552px; /* 原版高度 */
    position: relative;
    /* 原版复杂的径向渐变背景 */
    background: radial-gradient(ellipse 158.96% 118.26% at 77.73% 74.36%, rgba(132.40, 166.15, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%);
    overflow: hidden;
}

.acquiring-banner-img {
    position: absolute;
    width: 1920px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.acquiring-banner-content {
    position: relative;
    z-index: 1;
    width: 1300px;
    margin: 0 auto;
    height: 100%;
    padding-left: 36px;
    padding-top: 79px; /* 原版文字起始位置 */
}

/* 底部悬浮的4个半透明卡片 */
.banner-float-cards {
    display: flex;
    justify-content: space-between;
    width: 1225px; /* 原版宽度 */
    position: absolute;
    top: 397px; /* 原版 top */
    left: 36px; /* 原版 left (相对于 content) */
}

.banner-info-card {
    width: 290px;
    padding: 20px;
    background: white; /* 实际效果看起来像白色背景 */
    border-radius: 20px;
    outline: 1px solid #A0B9FA;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.banner-info-title { font-size: 16px; font-weight: 700; color: #202632; }
.banner-info-desc { font-size: 14px; color: #666A73; line-height: 1.5; }

/* --- 2. 地区卡片 (Regions Grid) --- */
.region-cards-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 60px;
}

.region-card-fixed {
    width: 280px;
    height: 289px;
    background: white;
    border-radius: 16px;
    position: relative; /* 内部绝对定位基准 */
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.region-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 地区标签 (如：亚太) */
.region-tag-pill {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    background: white;
    padding: 4px 16px;
    border-radius: 34px;
    color: #1E5AF8;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 国家 Chip 列表容器 (绝对定位在底部) */
.region-chips-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 18px 30px; /* 原版 padding */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
}

/* 复用 .country-chip 样式，这里做微调 */
.region-chip-small {
    background: white;
    border-radius: 22px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #202632;
}
.region-chip-small img { width: 20px; height: 20px; border-radius: 50%; }

/* --- 3. 特性板块 (Feature Boxes) --- */
.features-container-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px; /* 上下间距 */
    padding-bottom: 30px;
}

.feature-box-large {
    width: 572px; /* 原版宽度 */
    padding: 30px;
    background: linear-gradient(135deg, #F0F4FF 0%, #F8FAFF 100%);
    border-radius: 20px;
    outline: 1px solid #AFC5FF;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.feature-box-row {
    width: 572px;
    padding: 30px;
    background: linear-gradient(135deg, #F0F4FF 0%, #F8FAFF 100%);
    border-radius: 20px;
    outline: 1px solid #AFC5FF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fb-title { font-size: 32px; font-weight: 400; color: black; margin-bottom: 10px; }
.fb-desc { font-size: 20px; color: #666A73; }

/* 货币 Chip 列表 */
.currency-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.currency-chip {
    background: white;
    border-radius: 40px;
    padding: 5px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #666A73;
    text-transform: uppercase;
}

/* =========================================
   全球分发页 (Global Disbursement) 精确复刻样式
   ========================================= */

/* --- 1. 核心蓝色容器 --- */
.disb-blue-box {
    width: 100%;
    padding: 30px 30px 50px 30px; /* 原版 padding */
    background-image: url('../images/bg-disbursement_blue.png');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    outline: 1px solid #AFC5FF;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 分类标题条 (银行卡分发 / 钱包账户分发) */
.disb-category-bar {
    width: fit-content;
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(30, 90, 248, 0.10) 0%, rgba(30, 90, 248, 0) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.disb-cat-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(90deg, #1E5AF8 0%, #5987FF 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.disb-cat-text {
    font-size: 32px;
    color: var(--text-main);
    font-weight: 400;
}

/* --- 2. 白色信息卡片 --- */
.disb-cards-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.disb-white-card {
    flex: 1; /* 平分宽度 */
    background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%); /* 原版渐变背景 */
    background-color: white; /* 兜底 */
    border-radius: 20px;
    padding: 20px; /* 原版内部 padding */
    position: relative;
    /* 原版这里高度是固定的，但为了响应内容，我们设最小高度 */
    min-height: 280px; 
}

/* 卡片内部标题 */
.disb-card-title {
    font-size: 25.36px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 25px; /* 对应原版 top: 77px - font-height */
}

/* 国家/货币 Chip 列表容器 */
.disb-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 原版间距 */
    align-content: flex-start;
}

/* 复用并微调 Chip 样式 */
.disb-chip {
    background: white;
    border-radius: 32px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px; /* 原版字体较大 */
    color: #2D2D2D;
    /* 原版没有边框，靠背景色区分？原版背景是纯白，卡片背景也是白？
       检查原版：卡片背景是渐变，chip背景是white。
       为了凸显，这里可能需要一点阴影或确保背景差异
    */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.disb-chip img { width: 28px; height: 28px; border-radius: 50%; }
.disb-chip b { font-weight: 700; }

/* --- 3. 钱包支付图标网格 --- */
.disb-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.disb-pay-icon {
    width: 50px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.disb-pay-icon img {
    max-width: 100%;
    max-height: 100%;
}

/* --- 4. 底部 CTA 特殊布局 --- */
.disb-cta-box {
    width: 100%;
    padding: 30px 50px;
    background: linear-gradient(180deg, #E6EDFF 0%, #F8FAFF 100%);
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

/* --- 全局分发页 Banner 修正样式 --- */

.disb-banner-restored {
    width: 100%;
    height: 429px; /* 原版高度 */
    position: relative;
    /* 原版背景光效参数 */
    background: radial-gradient(ellipse 158.96% 118.26% at 77.73% 74.36%, rgba(132.40, 166.15, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%);
    overflow: hidden;
}

.disb-banner-img {
    position: absolute;
    width: 1920px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.disb-banner-content {
    position: relative;
    z-index: 1;
    width: 1300px;
    margin: 0 auto;
    height: 100%;
    /* 关键：使用 Flex 列布局，并强制左对齐 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐核心 */
    justify-content: flex-start; /* 从顶部开始排列 */
    padding-top: 79px; /* 原版 Icon 的 top 值 */
    padding-left: 39px; /* 原版 left: 349px (Icon) 相对于 310px 的差值 */
    text-align: left;
}

/* 顶部 Icon + 标签行 */
.disb-banner-label-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 29px; /* 计算得出：162px(文字top) - 79px(icon top) - 54px(icon height) = 29px */
}

.disb-banner-label-text {
    color: #1E5AF8;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 54px; /* 对齐图标高度 */
}

/* 主标题文本 */
.disb-banner-main-text {
    display: flex;
    flex-direction: column;
    gap: 0; /* 原版文字紧挨着 */
}

.disb-text-title {
    color: #202632;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.disb-text-sub {
    color: #202632;
    font-size: 40px; /* 修正：原版是40px，之前通用样式是32px */
    font-weight: 400;
    line-height: 1.5;
}

/* =========================================
   全球发卡页 (Global Card Issuance) 精确复刻样式
   ========================================= */

/* --- 1. Banner (左对齐复刻) --- */
.card-banner-restored {
    width: 100%;
    height: 429px;
    position: relative;
    background: radial-gradient(ellipse 158.96% 118.26% at 77.73% 74.36%, rgba(132.40, 166.15, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%);
    overflow: hidden;
}

.card-banner-img {
    position: absolute;
    width: 1920px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.card-banner-content {
    position: relative;
    z-index: 1;
    width: 1300px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 强制左对齐 */
    justify-content: flex-start;
    padding-top: 79px; /* 原版 Top */
    padding-left: 39px; /* 原版 Left 偏移 */
}

.card-banner-label-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 29px; /* 间距还原 */
}

/* --- 2. 优势板块 (Advantages) --- */
.card-adv-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 280px; /* 原版固定高度 */
    margin-top: 60px; /* 标题与内容的间距 */
}

.card-adv-item {
    width: 280px;
    height: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-adv-icon {
    /* 原版 top: 0px 或 1px */
    margin-bottom: 20px; 
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.card-adv-title {
    /* 原版 top: 72px/76px */
    font-size: 32px;
    font-weight: 700;
    color: #2D2D2D;
    line-height: 57.6px;
    margin: 0;
    margin-bottom: 10px;
}

.card-adv-desc {
    /* 原版 top: 142px/146px */
    font-size: 20px;
    color: #636363;
    line-height: 30px;
    text-align: center;
    width: 100%;
}

/* --- 3. 实体卡/虚拟卡对比板块 (Comparison) --- */
.card-comp-section {
    width: 1300px; /* 固定内容宽度 */
    height: 386px;
    margin-top: -100px;
    padding-top: 50px;
    position: relative;
    background: url('../images/bg-card_s.png') no-repeat;
    background-size: 100% auto;
    border-radius: 24px;
}

/* 内部内容容器：原版有一个 top: 140.76px 的偏移容器，这里我们模拟文字的位置 */
.card-comp-content-layer {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 左侧：实体卡文本块 */
.comp-block-physical {
    position: absolute;
    /* 原版 text container left: 73.56px */
    left: 74px; 
    /* 原版 top: 47.64px (容器相对位置) + 140.76px (父级偏移) ≈ 188px
       但在原代码中，bg-card_s.png 是作为背景，然后文字在 top: 47px 
       我们重新对齐到背景图的视觉位置。
       原版文字容器 top: 140px + 47px = 187px 左右 
       为了对齐背景图里的卡片，我们使用 padding-top 
    */
    top: 188px; 
    width: 321px;
}

/* 右侧：虚拟卡文本块 */
.comp-block-virtual {
    position: absolute;
    /* 原版 left: 448.62px */
    left: 449px; 
    top: 188px;
    width: 321px;
}

.comp-title {
    color: white;
    font-size: 29px; /* 原版 28.94px */
    font-weight: 700;
    line-height: 52px;
    margin-bottom: 8px;
    /* 原版标题其实是在列表上方 -4.82px */
    position: absolute;
    top: -53px; 
    left: 0;
}

.comp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comp-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comp-icon {
    width: 22px; /* 原版 21.71px */
    height: 22px;
}

.comp-text {
    color: white;
    font-size: 15px;
    line-height: 15px; /* 原版紧凑行高 */
    font-weight: 400;
}

/* ==========================================================================
   MOBILE ADAPTER (移动端适配) - START
   将此代码粘贴到 style.css 的最末尾
   ========================================================================== */

@media screen and (max-width: 1024px) {
    
    /* --- 1. 全局容器与基础重置 --- */
    :root {
        --container-width: 100%;
    }

    .container, 
    .header-inner, 
    .footer-inner,
    .collection-banner-content,
    .acquiring-banner-content,
    .disb-banner-content,
    .card-banner-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }

    .disb-banner-content .disb-text-title{
        font-size: 32px !important;
    }

    /* 强制所有Banner高度自适应，取消固定高度 */
    .hero-banner,
    .page-banner,
    .collection-banner,
    .acquiring-banner,
    .disb-banner-restored,
    .card-banner-restored,
    .stats-section-restored,
    .cta-section-restored,
    .va-content-box {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 60px;
    }

    .flex-col, .flex-row, .flex-between, .flex-center {
        flex-direction: column;
        width: 100%;
    }

    .gap-60 { gap: 40px; }

    /* 图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 标题文字适配 */
    .h-center-title {
        font-size: 28px !important;
        margin-bottom: 30px;
        line-height: 1.3;
    }

    /* --- 2. Header (导航栏) --- */
    .site-header {
        height: auto;
        padding: 15px 0;
        position: relative;
    }
    
    .header-inner {
        flex-direction: row; /* Logo 和 菜单按钮保持横向 */
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .nav-menu {
        width: 100%;
        flex-direction: row; /* 保持横向滚动 */
        overflow-x: auto; /* 允许横向滚动 */
        gap: 20px;
        padding: 30px 0 15px;
        margin-top: 10px;
        border-top: 1px solid #f0f0f0;
        /* 隐藏滚动条 */
        -ms-overflow-style: none;
        scrollbar-width: none; 
        white-space: nowrap;
    }
    .nav-menu::-webkit-scrollbar { display: none; }
    
    .nav-link {
        font-size: 15px;
        flex-shrink: 0; /* 防止挤压 */
        padding: 5px 10px;
        background: #f5f7fa;
        border-radius: 20px;
    }
    .nav-link.active {
        background: var(--color-primary);
        color: white;
    }

    /* --- 3. 首页 (Index) 适配 --- */
    
    /* Hero Banner */
    .hero-banner {
        padding: 100px 0 60px;
        text-align: center;
    }
    .hero-bg-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        left: 0;
        transform: none;
    }
    .hero-content h1 {
        color: #ffffff !important;
        font-size: 36px;
        line-height: 1.2;
    }
    .hero-content .flex-col {
        align-items: center;
    }

    /* 解决方案卡片 (Grid化) */
    .solutions-wrapper {
        flex-direction: column;
        padding: 0;
        gap: 20px;
    }
    .solution-card {
        width: 100% !important;
        height: auto !important;
        min-height: 320px;
        /* 改为Flex布局，取消绝对定位 */
        display: flex;
        flex-direction: column;
        padding: 30px;
    }
    .sol-img-1, .sol-img-2, .sol-img-3 {
        position: static !important;
        margin: 0 auto 30px;
        width: 70% !important;
        height: auto !important;
    }
    .solution-title, .solution-desc {
        position: static !important;
        width: 100% !important;
        left: auto;
        top: auto;
        text-align: center !important;
    }
    .solution-title { margin-bottom: 10px; }

    /* 数据统计 (Stats Section) - 重构绝对定位为流式 */
    .stats-section-restored {
        display: flex;
        flex-direction: column;
        padding: 60px 20px;
    }
    .stats-map-bg {
        width: 100%;
        height: auto;
        top: 60px;
        opacity: 0.3; /* 手机上减淡背景 */
    }
    .stats-header-box { margin-top: 0; }
    .stats-title-text { font-size: 28px; }

    .stats-row-box {
        width: 100%;
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列布局 */
        gap: 30px;
    }
    .stat-item-fixed { text-align: center; }
    .stat-num-fixed { font-size: 32px; line-height: 1.2; }
    .stat-label-fixed { font-size: 14px; margin-left: 0; }

    /* 优势卡片 (Benefits) */
    .benefits-row-box {
        width: 100%;
        flex-direction: column;
        margin-top: 40px;
        gap: 20px;
    }
    .benefit-card-fixed {
        width: 100%;
        height: auto;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .b-card-icon-box, .b-card-title, .b-card-desc {
        position: static !important;
        width: 100% !important;
        left: auto;
        top: auto;
        margin: 0;
    }
    .b-card-icon-box { width: 80px; height: 80px; margin-bottom: 20px; }
    .b-card-title { margin-bottom: 15px; font-size: 24px; }
    .b-card-desc { font-size: 16px; }

    /* ZigZag 左右图文 */
    .zigzag-row, .zigzag-row.reverse {
        flex-direction: column;
        margin-bottom: 60px;
    }
    .zigzag-img-wrapper {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }
    .zigzag-type-1, .zigzag-type-2, .zigzag-type-3 { height: auto; }
    .zigzag-bg-shape { display: none; } /* 手机端隐藏复杂的背景图形，保持简洁 */
    .zigzag-main-img {
        position: static !important;
        width: 100% !important;
        max-width: 400px !important;
        border-radius: 16px;
    }
    .zigzag-text {
        width: 100%;
        text-align: left;
    }
    .zigzag-text p { font-size: 18px !important; }

    /* CTA Section */
    .cta-section-restored {
        height: auto;
        padding: 80px 20px;
    }
    .cta-ring { display: none; } /* 隐藏大圆环，防止撑开页面 */
    .cta-content { padding-top: 0; gap: 30px; }
    .cta-title { font-size: 28px; line-height: 1.3; }

    /* --- 4. 内页通用适配 --- */
    
    /* 通用 Banner 内容对齐 */
    .collection-banner-content,
    .acquiring-banner-content,
    .disb-banner-content,
    .card-banner-content {
        padding-top: 80px !important;
        padding-left: 20px !important;
        text-align: left;
        align-items: flex-start;
    }
    
    .collection-banner h1,
    .acquiring-banner h1,
    .disb-banner-restored h1,
    .card-banner-restored h1,
    .banner-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    .collection-banner p,
    .acquiring-banner p,
    .disb-text-sub,
    .card-banner-restored div[style*="font-size: 40px"] {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    
    .collection-banner-img,
    .acquiring-banner-img,
    .disb-banner-img,
    .card-banner-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        left: 0;
        transform: none;
    }

    /* 关于我们 (About) */
    .banner-text-box { width: 100%; }
    .banner-sub { font-size: 18px; }
    
    /* 核心优势四列变单列 */
    div[style*="display: flex; justify-content: space-between;"] {
        flex-direction: column;
        gap: 40px;
    }
    div[style*="width: 280px; text-align: center;"] {
        width: 100% !important;
    }
    
    /* Input Info 页面 */
    main[style*="background: url"] {
        background: #1E5AF8 !important; /* 手机端用纯色背景 */
        height: auto !important;
        padding: 40px 20px;
    }
    div[style*="width: 374px"] {
        width: 100% !important;
        padding: 30px !important;
    }

    /* --- 5. 全球收款 (Collection) --- */
    .sol-cards-container {
        flex-direction: column;
        padding: 0;
        gap: 30px;
    }
    .sol-card-fixed {
        width: 100%;
        height: auto;
        min-height: auto;
    }
    
    /* VA Section (中间那个复杂的圆环模块) */
    .va-section-wrapper { padding: 40px 0; }
    .va-content-box {
        width: 100%;
        height: auto;
        background: none; /* 移除背景图 */
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }
    .va-center-circle {
        position: static;
        margin: 0 auto;
        transform: none;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin-bottom: 20px;
    }
    .va-left-col, .va-right-col {
        position: static;
        width: 100%;
    }
    .va-icon { width: 50px; height: 50px; }

    /* 步骤条 (Steps) */
    .steps-wrapper {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
    }
    .step-arrow {
        transform: rotate(90deg); /* 箭头向下 */
        width: 40px;
        margin: -20px 0;
    }

    /* --- 6. 全球收单 (Acquiring) --- */
    .banner-float-cards {
        position: static;
        width: 100%;
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
        padding: 0 20px;
    }
    .banner-info-card { width: 100%; }

    .region-cards-wrapper {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .region-card-fixed { width: 100%; max-width: 400px; }

    .feature-box-large, .feature-box-row {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 20px;
    }
    .feature-box-row img { align-self: center; }

    /* --- 7. 全球分发 (Disbursement) --- */
    .disb-banner-main-text {
        margin-top: 20px;
    }
    
    .disb-cards-row {
        flex-direction: column;
    }
    .disb-white-card {
        min-height: auto;
    }
    
    .disb-cta-box {
        flex-direction: column-reverse; /* 图片在上，文字在下 */
        padding: 30px;
        text-align: center;
    }
    div[style*="width: 516px"], div[style*="width: 483px"] {
        width: 100% !important;
    }
    .disb-cta-box a { margin: 0 auto; }

    /* --- 8. 全球发卡 (Card Issuance) --- */
    .card-adv-grid {
        flex-direction: column;
        height: auto;
        gap: 30px;
        margin-top: 30px;
    }
    .card-adv-item {
        width: 100%;
        height: auto;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    /* 实体卡/虚拟卡对比图 - 移动端完全重构 */
    .card-comp-section {
        width: 100%;
        height: auto;
        margin-top: 30px;
        padding: 30px 20px;
        background: #1E5AF8; /* 纯色代替复杂背景图 */
        border-radius: 16px;
    }
    .card-comp-content-layer {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    .comp-block-physical, .comp-block-virtual {
        position: static;
        width: 100%;
        top: auto;
        left: auto;
    }
    .comp-title {
        position: static;
        margin-bottom: 15px;
    }

    /* --- 9. Footer (底部) --- */
    .site-footer {
        height: auto;
        background: #202632; /* 简化背景 */
        padding-bottom: 40px;
    }
    .footer-inner {
        padding-top: 40px;
    }
    .footer-desc {
        width: 100%;
        padding: 0 20px;
    }
    .footer-nav-row {
        flex-direction: column;
        gap: 15px;
    }
    .footer-nav-divider { display: none; }
    .footer-line { margin-top: 30px; }
}

/* ==========================================================================
   MOBILE PREMIUM ADAPTER (手机端精细化适配方案)
   针对：1024px 以下屏幕
   ========================================================================== */

@media screen and (max-width: 1024px) {
    
    /* --- 1. 基础全局规范 --- */
    :root {
        --container-width: 100%;
    }

    body {
        overflow-x: hidden; /* 防止横向溢出 */
    }

    .container {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 间距压缩，手机端不需要太大的间距 */
    .gap-60 { gap: 35px !important; }
    .gap-30 { gap: 20px !important; }

    /* --- 2. 标题文字规范优化 (问题1修复) --- */
    h1, .banner-title, 
    section[style*="font-size: 48px"], 
    div[style*="font-size: 48px"] {
        font-size: 30px !important; 
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    h2, .h-center-title, 
    section[style*="font-size: 40px"], 
    div[style*="font-size: 40px"],
    h2[style*="font-size: 40px"] {
        font-size: 26px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    h3, .fb-title, .b-card-title,
    div[style*="font-size: 32px"],
    h3[style*="font-size: 32px"] {
        font-size: 22px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
    }

    p, .banner-sub, .sol-desc, .fb-desc, .b-card-desc,
    div[style*="font-size: 20px"],
    p[style*="font-size: 20px"] {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* --- 3. Header 导航全显优化 (问题3修复) --- */
    .site-header {
        height: auto !important;
        padding: 12px 0;
        position: sticky;
    }

    .header-inner {
        flex-direction: column !important;
        gap: 12px;
    }

    .logo {
        width: 150px !important;
        margin: 0 auto; /* Logo居中展示，更有大厂感 */
    }

    .nav-menu {
        width: 100%;
        gap: 12px !important;
        justify-content: center;
        flex-wrap: wrap; /* 自动换行，确保显示全 */
        padding: 20px 0;
    }

    .nav-link {
        font-size: 14px !important;
        padding: 4px 8px;
        white-space: nowrap;
    }

    /* --- 4. Banner 布局与背景图 (问题4修复) --- */
    .hero-banner, .page-banner, .acquiring-banner, 
    .card-banner-restored, .disb-banner-restored, .collection-banner {
        height: auto !important;
        min-height: 380px !important;
        padding: 60px 20px !important;
        display: flex !important;
        align-items: center !important;
        background-color: #f4f7ff; /* 默认填充背景 */
        /* 这里的 background-image 会被后续您的新图替换 */
        background-position: center !important;
        background-size: cover !important;
    }

    /* Banner内部元素对齐 */
    .hero-content, .banner-text-box, .acquiring-banner-content, 
    .disb-banner-content, .card-banner-content, .collection-banner-content {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-bg-img, .acquiring-banner-img, .disb-banner-img, 
    .card-banner-img, .collection-banner-img {
        display: none !important; /* 手机端隐藏PC拉伸图，改用容器背景 */
    }

    /* 给每个页面预留移动端Banner背景图钩子 */
    .hero-banner { background-image: linear-gradient(rgba(30,90,248,0.8), rgba(30,90,248,0.8)), url('../images/banner-1.png') !important; color: white !important; }
    

    /* --- 5. 首页 b-card-icon-box 图片修复 (问题2修复) --- */
    .benefit-card-fixed {
        width: 100% !important;
        height: auto !important;
        padding: 40px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: static !important;
        margin-bottom: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }

    .b-card-icon-box {
        position: static !important; /* 取消绝对定位 */
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto 20px !important;
    }

    .b-card-icon-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* 保证图片比例正确 */
    }

    .b-card-title, .b-card-desc {
        position: static !important;
        width: 100% !important;
        text-align: center !important;
        left: auto !important;
        top: auto !important;
    }

    /* --- 6. 模块化布局适配 --- */

    /* 合作伙伴 Banner */
    .flex-center img[src*="partner"] {
        padding: 0 20px;
    }

    /* 首页解决方案卡片 */
    .solutions-wrapper {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 20px !important;
    }
    .solution-card {
        width: 100% !important;
        height: auto !important;
        min-height: 280px !important;
        padding: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .sol-img-1, .sol-img-2, .sol-img-3 {
        position: static !important;
        width: 180px !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }
    .solution-title, .solution-desc {
        position: static !important;
        width: 100% !important;
        text-align: center !important;
        left: auto !important;
    }

    /* Stats数据板块修复 */
    .stats-section-restored {
        height: auto !important;
        padding: 60px 20px !important;
    }
    .stats-map-bg {
        width: 150% !important; /* 手机端背景稍微放大增加质感 */
        opacity: 0.15 !important;
    }
    .stats-row-box {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-top: 40px !important;
    }
    .stat-item-fixed {
        width: 40% !important;
        text-align: center !important;
    }
    .benefits-row-box {
        width: 100% !important;
        flex-direction: column !important;
        margin-top: 40px !important;
    }

    /* ZigZag 交错图文适配 */
    .zigzag-row, .zigzag-row.reverse {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .zigzag-img-wrapper {
        width: 100% !important;
        height: auto !important;
    }
    .zigzag-bg-shape {
        display: none !important; /* 手机端隐藏复杂色块，保持精致 */
    }
    .zigzag-main-img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }
    .zigzag-text {
        width: 100% !important;
    }

    /* 按钮适配 */
    .btn-pill {
        width: 100% !important;
        max-width: 260px;
        margin: 0 auto;
    }

    /* --- 7. 各子页面精修 --- */

    /* VA双系统 (收款页) */
    .va-content-box {
        width: 100% !important;
        height: auto !important;
        background: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }
    .va-center-circle {
        position: static !important;
        transform: none !important;
        margin: 0 auto !important;
    }
    .va-left-col, .va-right-col {
        position: static !important;
        width: 100% !important;
    }

    /* 产品优势网格 (收单/发卡) */
    .region-cards-wrapper, .card-adv-grid, .features-container-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    .region-card-fixed, .card-adv-item, .feature-box-large, .feature-box-row {
        width: 100% !important;
        height: auto !important;
    }

    /* 步骤条适配 */
    .steps-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }
    .step-arrow {
        transform: rotate(90deg) !important;
        margin: -10px 0 !important;
    }

    /* --- 8. Footer 适配 --- */
    .site-footer {
        height: auto !important;
        padding-bottom: 40px !important;
    }
    .footer-desc {
        width: 100% !important;
        padding: 0 20px !important;
    }
    .footer-nav-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }
    .footer-nav-divider {
        display: none !important;
    }
}

/* ==========================================================================
   首页 Stats-row-box 专项精修适配 (针对手机端布局错乱优化)
   ========================================================================== */

@media screen and (max-width: 1024px) {
    /* 1. 容器重置：由固定宽度改为流式网格 */
    .stats-row-box {
        width: 100% !important;
        max-width: 500px !important; /* 限制最大宽度，防止在大屏平板上拉得太开 */
        margin: 40px auto 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 核心：平分为两列 */
        gap: 30px 10px !important; /* 上下间距30px，左右间距10px */
        padding: 0 10px !important;
        left: auto !important;
        position: relative !important;
    }

    /* 2. 单个统计项优化 */
    .stat-item-fixed {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 强制水平居中 */
        justify-content: center !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
    }

    /* 3. 数字字号大幅精简 (关键优化) */
    .stat-num-fixed {
        font-size: 30px !important; /* PC端57px太大了，手机端30px最精致 */
        line-height: 1.2 !important;
        font-weight: 700 !important;
        margin-bottom: 5px !important;
        font-family: 'Inter', sans-serif !important;
    }

    /* 4. 文字标签优化 */
    .stat-label-fixed {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-left: 0 !important; /* 移除PC端的左偏置 */
        opacity: 0.9 !important;
        font-weight: 400 !important;
        white-space: nowrap !important; /* 防止文字折行 */
    }

    /* 5. 背景地图微调：防止地图干扰数字阅读 */
    .stats-map-bg {
        width: 180% !important; /* 地图适当放大铺满背景 */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.2 !important; /* 调低透明度，让数字更清晰 */
    }
    
    /* 6. 统计区域高度自适应 */
    .stats-section-restored {
        height: auto !important;
        min-height: 600px !important;
        padding: 60px 20px 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

@media screen and (max-width: 1024px) {

    /* 1. 设置所有 Banner 的基础样式 */
    .hero-banner, 
    .page-banner, 
    .acquiring-banner, 
    .card-banner-restored, 
    .disb-banner-restored, 
    .collection-banner {
        height: auto !important;
        min-height: 450px !important; /* 保持Banner高度 */
        padding: 80px 24px 60px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;

        /* 核心需求设置 */
        background-color: #FFFFFF !important;    /* 1. 背景底色为白色 */
        background-repeat: no-repeat !important; /* 不重复 */
        background-position: center !important;   /* 2. 图片在中间 */
        background-size: cover !important;       /* 3. 宽高适配：cover 会填满整个容器且保持比例 */
        /* 如果你希望看到完整图片不被裁剪，可以把 cover 换成 contain */
    }

    /* 2. 首页 Banner 图片路径 */
    .hero-banner {
        background-image: url('../images/banner-1.png') !important;
    }

    /* 3. 其他页面图片路径 */
    .collection-banner {
        background-image: url('../images/banner-2.png') !important;
    }
  
    .acquiring-banner {
        background-image: url('../images/banner-3.png') !important;
    }
    .disb-banner-restored {
        background-image: url('../images/banner-4.png') !important;
    }
    .card-banner-restored {
        background-image: url('../images/banner-5.png') !important;
    }

    /* 4. 确保首页文字是白色（针对你的上一个需求） */
    /* 注意：如果图片没加载出来，白字在白底上会看不见，所以图片一定要给对 */
    .hero-content h1, 
    .hero-banner h1,
    .banner-title,
    .hero-content div,
    .banner-sub {
        color: #FFFFFF !important; 
        text-shadow: 0 2px 15px rgba(0,0,0,0.5) !important; /* 强烈建议保留阴影，否则白字在浅色图上看不清 */
        position: relative !important;
        z-index: 2 !important;
    }

    /* 5. 隐藏可能干扰的原始图片元素 */
    .banner-img-box, .hero-image, .banner-mask {
        display: none !important;
    }
}


/* --- 动效增强：不影响布局 --- */

/* 1. 定义入场动画 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 2. 悬停交互增强 (通用) */
.solution-card, .sol-card-fixed, .benefit-card-fixed, .region-card-fixed, .feature-box-large, .feature-box-row {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.solution-card:hover, .sol-card-fixed:hover, .benefit-card-fixed:hover, .region-card-fixed:hover, .feature-box-large:hover, .feature-box-row:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 45px rgba(30, 90, 248, 0.15) !important;
}

/* 3. 按钮呼吸动效 */
.btn-pill {
    transition: all 0.3s ease !important;
}

.btn-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(30, 90, 248, 0.3);
}

.btn-pill:active {
    transform: scale(0.98);
}

/* 4. Banner 文字入场动效 */
.banner-title, .hero-content h1 {
    animation: fadeInUp 1s ease forwards;
}

.banner-sub, .hero-content div {
    animation: fadeInUp 1.2s ease forwards;
}

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

/* 5. 顶部导航激活项小动画 */
.nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
    margin-top: 2px;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* 6. 数字统计增强 */
.stat-num-fixed {
    display: inline-block;
    transition: transform 0.3s ease;
}
.stat-item-fixed:hover .stat-num-fixed {
    transform: scale(1.1);
    color: #88E5FF;
}