/* =========================================================
   GreenFuture 主题 - 关于我们页样式
   用于：templates/front/about.html
   依赖：gf/base.css（设计令牌 / 容器 / 通用区块 .section
         / 内页 Hero .gf-page-hero / 眉标 .gf-page-tag / 滚动渐入 .gf-reveal）
   内容：Hero 数据 / 公司介绍 / 优势 / 工厂 / 服务 / 团队
         / 服务流程 / VIP 横幅与权益 / 经销商
   ========================================================= */

/* ===== Hero 实力数据（源自公司介绍：20 年经验 / 100+ 国家 / 欧洲 Top 5 供应商） ===== */
.ab-hero-stats {
    display: flex; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap;
}
.ab-hero-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 32px; min-width: 180px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: var(--transition);
}
.ab-hero-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ab-hero-stat strong {
    font-size: 28px; font-weight: 800; line-height: 1.2;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ab-hero-stat span { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* ===== Who We Are（图文双栏，about.company.title/desc） ===== */
.ab-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ab-who-text h2 { font-size: 34px; font-weight: 800; color: var(--secondary); margin-bottom: 20px; line-height: 1.25; }
.ab-who-text p { color: var(--text-muted); font-size: 15px; line-height: 1.9; }
.ab-who-media { position: relative; }
.ab-who-media img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ab-who-badge {
    position: absolute; bottom: -18px; left: -18px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; padding: 14px 22px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); z-index: 2;
    display: flex; flex-direction: column; line-height: 1.3;
}
.ab-who-badge strong { font-size: 20px; font-weight: 800; }
.ab-who-badge span { font-size: 12px; opacity: .92; }

/* ===== Our Advantages（6 项优势瓷贴，about.adv.*） ===== */
.ab-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-adv-item {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px 24px; text-align: center; transition: var(--transition);
}
.ab-adv-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.ab-adv-icon {
    width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), #D1FAE5);
    color: var(--primary-dark); display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.ab-adv-item:hover .ab-adv-icon {
    background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
    box-shadow: 0 6px 16px rgba(6,182,212,0.35);
}
.ab-adv-item h3 { font-size: 16px; font-weight: 700; color: var(--secondary); }

/* ===== Our Factory（左文右图 2x2，about.factory.*） ===== */
.ab-factory-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.ab-factory-text h2 { font-size: 32px; font-weight: 800; color: var(--secondary); margin-bottom: 18px; line-height: 1.25; }
.ab-factory-text p { color: var(--text-muted); font-size: 15px; line-height: 1.9; }
.ab-factory-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-factory-imgs img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    transition: var(--transition);
}
.ab-factory-imgs img:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }
.ab-factory-imgs img:nth-child(even) { transform: translateY(20px); }
.ab-factory-imgs img:nth-child(even):hover { transform: translateY(20px) scale(1.03); }

/* ===== What We Offer（3 卡片：技术支持 / 生产方案 / 一站式采购） ===== */
.ab-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-offer-card {
    background: var(--surface); border-radius: var(--radius); padding: 36px 28px;
    border: 1px solid var(--border); transition: var(--transition);
    position: relative; overflow: hidden;
}
.ab-offer-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0); transition: transform 0.4s; transform-origin: left;
}
.ab-offer-card:hover::before { transform: scaleX(1); }
.ab-offer-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.ab-offer-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), #D1FAE5);
    color: var(--primary); display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.ab-offer-card h3 { font-size: 18px; font-weight: 700; color: var(--secondary); margin-bottom: 10px; }
.ab-offer-card p { font-size: 14px; color: var(--text-muted); line-height: 1.8; }

/* ===== Our Service Team（中心文案 + 展会 4 图，悬停出字幕） ===== */
.ab-team-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-team-item {
    border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 4/3;
    box-shadow: var(--shadow);
}
.ab-team-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ab-team-item:hover img { transform: scale(1.08); }
.ab-team-item .caption {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 16px 14px;
    background: linear-gradient(transparent, rgba(15,23,42,0.75)); color: #fff;
    font-size: 13px; font-weight: 600; opacity: 0; transition: var(--transition);
}
.ab-team-item:hover .caption { opacity: 1; }

/* ===== Our Service Process（4 步时间线，about.process.step1-4） ===== */
.ab-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
/* 顶部贯穿渐变连线 */
.ab-process::before {
    content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; opacity: .35;
}
.ab-step { text-align: center; position: relative; padding: 0 8px; }
.ab-step-num {
    width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--primary);
    color: var(--primary); font-size: 18px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; transition: var(--transition);
}
.ab-step:hover .ab-step-num {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(6,182,212,0.35);
}
.ab-step h3 { font-size: 16px; font-weight: 700; color: var(--secondary); margin-bottom: 8px; }
.ab-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }

/* ===== VIP 横幅（深色渐变 + 握手背景图 + 三个客户关切） ===== */
.ab-vip-banner {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0C4A6E 0%, #065F46 55%, #059669 100%);
}
.ab-vip-banner .bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18;
}
.ab-vip-banner .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(15,23,42,0.85) 0%, rgba(6,182,212,0.25) 70%, transparent 100%);
}
.ab-vip-banner .container { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 90px; }
.ab-vip-eyebrow {
    display: inline-block; padding: 6px 16px; border-radius: 20px; margin-bottom: 18px;
    background: rgba(52,211,153,0.15); border: 1px solid rgba(52,211,153,0.4);
    font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase;
}
.ab-vip-banner h2 { font-size: 36px; font-weight: 800; margin-bottom: 8px; }
.ab-vip-banner h4 {
    font-size: 19px; font-weight: 700; margin-bottom: 26px;
    background: linear-gradient(90deg, #A5F3FC, #A7F3D0);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ab-vip-concerns { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.ab-vip-concern {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm); padding: 14px 20px;
    font-size: 15px; font-weight: 600;
    transition: var(--transition);
}
.ab-vip-concern:hover { background: rgba(255,255,255,0.12); transform: translateX(6px); }
.ab-vip-concern svg { flex: none; color: var(--accent); }

/* ===== VIP / VVIP 权益卡（about.vip.level1/level2） ===== */
.ab-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 980px; margin: 0 auto; }
.ab-tier {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 40px 36px; position: relative; overflow: hidden; transition: var(--transition);
}
.ab-tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ab-tier-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 20px; border-radius: 22px; margin-bottom: 22px;
    font-size: 14px; font-weight: 800; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--primary-light), #D1FAE5); color: var(--primary-dark);
}
.ab-tier h3 { font-size: 22px; font-weight: 800; color: var(--secondary); margin-bottom: 10px; }
.ab-tier > p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 8px; }
.ab-tier > p strong { color: var(--primary); }
.ab-tier-perks { margin-top: 20px; display: flex; flex-direction: column; }
.ab-perk {
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
    font-size: 14px; color: var(--secondary-light); font-weight: 600; line-height: 1.55;
}
.ab-perk + .ab-perk { border-top: 1px dashed var(--border); }
.ab-perk-icon {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-light), #D1FAE5);
    color: var(--primary-dark); display: flex; align-items: center; justify-content: center;
}
/* VVIP 深色高亮卡 */
.ab-tier-vvip {
    background: linear-gradient(150deg, var(--secondary) 0%, #164E63 55%, #065F46 100%);
    border: none; color: #fff;
    box-shadow: 0 16px 44px rgba(15,23,42,0.3);
}
.ab-tier-vvip::after {
    content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(52,211,153,0.22) 0%, transparent 70%);
    top: -90px; right: -70px;
}
.ab-tier-vvip .ab-tier-badge {
    background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
    box-shadow: 0 4px 14px rgba(6,182,212,0.4);
}
.ab-tier-vvip h3 { color: #fff; }
.ab-tier-vvip > p { color: #CBD5E1; }
.ab-tier-vvip > p strong { color: var(--accent); }
.ab-tier-vvip .ab-perk { color: #E2E8F0; border-top-color: rgba(255,255,255,0.14); }
.ab-tier-vvip .ab-perk-icon {
    background: rgba(52,211,153,0.16); color: var(--accent);
}

/* ===== Distributorship（4 项利益清单 + We Guarantee 4 卡） ===== */
.ab-dist-benefits {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto 64px;
}
.ab-dist-benefit {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--secondary-light);
    transition: var(--transition);
}
.ab-dist-benefit:hover { border-color: var(--primary-light); box-shadow: var(--shadow); transform: translateY(-3px); }
.ab-dist-benefit svg { flex: none; color: var(--accent-dark); }
.ab-guarantee-title {
    text-align: center; font-size: 24px; font-weight: 800; color: var(--secondary); margin-bottom: 36px;
}
.ab-guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ab-guarantee-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 24px; text-align: center; transition: var(--transition);
}
.ab-guarantee-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.ab-guarantee-icon {
    width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(6,182,212,0.35);
}
.ab-guarantee-card h3 { font-size: 16px; font-weight: 700; color: var(--secondary); margin-bottom: 8px; }
.ab-guarantee-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.ab-dist-cta { text-align: center; margin-top: 48px; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .ab-who-grid, .ab-factory-grid { grid-template-columns: 1fr; gap: 44px; }
    .ab-adv-grid, .ab-offer-grid { grid-template-columns: repeat(2, 1fr); }
    .ab-process { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
    .ab-process::before { display: none; }
    .ab-team-gallery, .ab-guarantee-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ab-hero-stat { min-width: 140px; padding: 14px 20px; }
    .ab-who-text h2, .ab-factory-text h2 { font-size: 26px; }
    .ab-who-badge { left: 12px; bottom: -14px; padding: 10px 16px; }
    .ab-adv-grid, .ab-offer-grid, .ab-process,
    .ab-team-gallery, .ab-guarantee-grid,
    .ab-dist-benefits, .ab-tiers { grid-template-columns: 1fr; }
    .ab-factory-imgs img:nth-child(even),
    .ab-factory-imgs img:nth-child(even):hover { transform: none; }
    .ab-vip-banner h2 { font-size: 26px; }
    .ab-tier { padding: 30px 24px; }
}