/* ========== 关于我们页面样式 ========== */

/* Hero 区域 */
.about-hero {
    padding: 70px 0 60px;
    position: relative;
    overflow: hidden;
}
.about-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' opacity='0.06' d='M50 45C42 35 32 38 28 48C24 58 32 70 50 85C68 70 76 58 72 48C68 38 58 35 50 45ZM26 28C22 22 14 24 12 31C10 38 16 44 25 46C30 40 30 33 26 28ZM74 28C78 22 86 24 88 31C90 38 84 44 75 46C70 40 70 33 74 28ZM36 15C33 9 24 10 22 17C20 24 26 30 34 32C39 27 39 20 36 15ZM64 15C67 9 76 10 78 17C80 24 74 30 66 32C61 27 61 20 64 15Z'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 120px 120px;
}
.about-hero-icon {
    font-size: 52px;
    color: #fff;
    margin-bottom: 16px;
}
.about-hero-title {
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}
.about-hero-subtitle {
    font-size: 17px;
    color: rgba(255,255,255,.88);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}
.about-hero-paw {
    margin-top: 24px;
}

/* 站点简介区域 */
.about-intro {
    padding: 40px 0 20px;
}
.about-story-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
    height: 100%;
}
.about-section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 24px;
}
.about-section-title i {
    color: var(--primary);
    margin-right: 8px;
}
.about-text p {
    font-size: 15.5px;
    line-height: 1.9;
    color: #4a4543;
    margin-bottom: 16px;
    text-indent: 2em;
}
.about-text strong {
    color: var(--primary);
    font-weight: 700;
}

/* 高亮卡片 */
.about-highlight-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}
.about-hl-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
}
.about-hl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(192,133,82,.12);
}
.about-hl-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--primary-light), #FDE6CF);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary);
}
.about-hl-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.about-hl-body p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* 数据统计 */
.about-stats {
    padding: 48px 0;
    margin-top: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 20px;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 30px;
    padding-right: 30px;
}
.stat-item {
    padding: 12px 8px;
}
.stat-number {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
}
.stat-number span {
    font-size: 0.5em;
    font-weight: 700;
    opacity: .85;
}
.stat-label {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    font-weight: 500;
    letter-spacing: 1px;
}

/* 使命愿景 */
.about-mission {
    padding: 48px 0 20px;
}
.mission-card {
    background: #fff;
    border-radius: 16px;
    padding: 34px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    height: 100%;
    transition: transform .25s ease;
    position: relative;
    overflow: hidden;
}
.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}
.mission-primary::before {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.mission-secondary::before {
    background: linear-gradient(90deg, #5D8AA8, #3A6B96);
}
.mission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mission-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}
.mission-primary .mission-icon {
    background: linear-gradient(135deg, var(--primary-light), #FDE6CF);
    color: var(--primary);
}
.mission-secondary .mission-icon {
    background: linear-gradient(135deg, #E8F0F8, #D0E0EE);
    color: #3A6B96;
}
.mission-card h4 {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
}
.mission-card p {
    font-size: 15px;
    line-height: 1.85;
    color: #555;
    margin: 0;
}

/* 核心价值 */
.about-values {
    padding: 40px 0 20px;
}
.value-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 26px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
}
.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(192,133,82,.12);
}
.value-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 18px;
}
.value-card h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.value-card p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
    margin: 0;
}

/* CTA 联系区域 */
.about-cta {
    padding: 52px 0 30px;
}
.cta-inner {
    background: linear-gradient(135deg, var(--bg-warm), var(--primary-light));
    border-radius: 20px;
    padding: 48px 36px;
    text-align: center;
    border: 2px dashed var(--border-color);
}
.cta-inner h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
}
.cta-inner h3 i {
    color: var(--primary);
    margin-right: 8px;
}
.cta-inner > p {
    font-size: 15.5px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 28px;
    line-height: 1.75;
}
.cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 12px 32px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 15px;
    transition: all .25s ease;
    text-decoration: none;
}
.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192,133,82,.4);
    color: #fff;
}
.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--primary);
    padding: 12px 32px;
    border: 2px solid var(--primary);
    border-radius: 25px;
    font-weight: 600;
    font-size: 15px;
    transition: all .25s ease;
    text-decoration: none;
}
.btn-cta-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

/* 响应式适配 */
@media (max-width: 992px) {
    .about-story-card { padding: 28px; }
    .about-highlight-cards { margin-top: 24px; }
    .about-stats { border-radius: 16px; margin: 20px -15px; }
    .mission-card { padding: 28px; }
    .value-card { padding: 28px 20px; }
    .cta-inner { padding: 36px 24px; }
}
@media (max-width: 576px) {
    .about-hero { padding: 50px 0 40px; }
    .about-hero-title { font-size: 28px; }
    .about-story-card { padding: 24px; }
    .about-hl-card { padding: 18px; }
    .about-hl-icon { width: 44px; height: 44px; min-width: 44px; font-size: 19px; }
    .about-stats { padding: 36px 20px; }
    .stat-number { font-size: 28px; }
    .mission-card { padding: 24px; }
    .value-card { padding: 24px 18px; }
    .cta-inner { padding: 32px 20px; }
    .btn-cta-primary, .btn-cta-outline { padding: 10px 24px; font-size: 14px; }
}