/* ============================================================
   关于我们页专属样式 - 布艺配饰风 · 错位图文 / 纵向时间线 / 徽章
   ============================================================ */

/* ---------- Banner 微调 ---------- */
.about-banner { background: linear-gradient(135deg, var(--cream-2), var(--lotus-soft)); }
.about-banner .pb-visual img { transform: rotate(-1.5deg); }
.about-banner h1 em { font-style: normal; color: var(--lotus-deep); position: relative; }
.about-banner h1 em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 10px;
    background: var(--sage-soft); z-index: -1; border-radius: 6px;
}
.about-banner-meta { display: flex; gap: 30px; margin-top: 32px; flex-wrap: wrap; }
.about-banner-meta span { font-size: .92rem; color: var(--ink-soft); }
.about-banner-meta strong { font-family: var(--f-serif); font-size: 1.4rem; color: var(--lotus-deep); margin-right: 6px; font-weight: 600; }

/* 通用居中区段头 */
.about-sec-head { text-align: center; margin-bottom: 60px; }
.about-sec-head .sec-desc { margin: 0 auto; }
.about-sec-head .tag-label { margin-bottom: 18px; }

/* ---------- 公司简介:错位图文 ---------- */
.about-intro-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.about-intro-text { position: relative; }
.about-intro-text .tag-label { margin-bottom: 22px; }
.about-intro-text h2 { margin-bottom: 20px; }
.about-intro-text .lead { font-size: 1.1rem; color: var(--ink); margin-bottom: 18px; }
.about-intro-text p { margin-bottom: 14px; }
.about-intro-sign { margin-top: 30px; display: flex; align-items: baseline; gap: 18px; padding-top: 20px; border-top: 1px dashed var(--line); }
.about-intro-sign .sig { font-family: var(--f-serif); font-size: 1.4rem; color: var(--lotus-deep); font-weight: 600; }
.about-intro-sign .sig-sub { font-size: .85rem; color: var(--ink-mute); letter-spacing: 1px; }

.about-intro-visual { position: relative; height: 470px; }
.about-intro-visual .iv-main {
    position: absolute; top: 0; right: 0; width: 80%; height: 90%;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 8px;
    overflow: hidden; box-shadow: var(--shadow);
    transform: rotate(1.2deg); border: 6px solid var(--white);
}
.about-intro-visual .iv-main img { width: 100%; height: 100%; object-fit: cover; }
.about-intro-visual .iv-sub {
    position: absolute; left: 0; bottom: 0; width: 48%; height: 46%;
    border-radius: 8px var(--radius) var(--radius) var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    transform: rotate(-3deg); border: 5px solid var(--cream);
}
.about-intro-visual .iv-sub img { width: 100%; height: 100%; object-fit: cover; }
.about-intro-visual .iv-tag {
    position: absolute; top: 5%; left: -3%;
    background: var(--white); padding: 10px 16px; border-radius: 8px;
    box-shadow: var(--shadow-sm); font-size: .82rem; font-weight: 500;
    transform: rotate(-5deg); color: var(--ink);
}
.about-intro-visual .iv-stitch {
    position: absolute; top: 16px; right: 16px; width: 56px; height: 56px;
    border: 2px dashed var(--lotus-deep); border-radius: 50%; opacity: .55;
}

/* ---------- 发展历程:纵向时间线 ---------- */
.about-history { background: var(--cream-2); }
.about-timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 10px 0; }
.tl-line {
    position: absolute; left: 120px; top: 0; bottom: 0; width: 2px;
    background: repeating-linear-gradient(180deg, var(--lotus) 0 10px, transparent 10px 20px);
}
.tl-item {
    position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 50px;
    padding: 22px 0; align-items: flex-start;
}
.tl-item::before {
    content: ""; position: absolute; left: 113px; top: 32px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--white); border: 3px solid var(--lotus-deep); z-index: 2;
}
.tl-item:nth-child(even)::before { border-color: var(--sage-deep); }
.tl-year {
    font-family: var(--f-serif); font-size: 1.7rem; color: var(--lotus-deep);
    font-weight: 600; text-align: right; padding-top: 22px;
}
.tl-item:nth-child(even) .tl-year { color: var(--sage-deep); }
.tl-card {
    background: var(--white); border-radius: var(--radius); padding: 22px 28px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line); position: relative;
}
.tl-card::before {
    content: ""; position: absolute; left: -28px; top: 38px; width: 28px; height: 0;
    border-top: 2px dashed var(--lotus);
}
.tl-item:nth-child(even) .tl-card::before { border-top-color: var(--sage); }
.tl-tag {
    display: inline-block; font-size: .74rem; letter-spacing: 2px; color: var(--lotus-deep);
    background: var(--lotus-soft); padding: 3px 12px; border-radius: 20px; margin-bottom: 8px;
}
.tl-item:nth-child(even) .tl-tag { color: var(--sage-deep); background: var(--sage-soft); }
.tl-card h3 { margin-bottom: 6px; }
.tl-card p { font-size: .92rem; }

/* ---------- 我们的优势:错落卡片 ---------- */
.about-adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.about-adv-card {
    background: var(--white); border-radius: var(--radius); padding: 32px 24px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
    transition: transform .4s, box-shadow .4s; position: relative;
}
.about-adv-card:nth-child(1) { transform: translateY(22px); }
.about-adv-card:nth-child(3) { transform: translateY(44px); }
.about-adv-card:nth-child(4) { transform: translateY(12px); }
.about-adv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.about-adv-card .aic {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: var(--lotus-soft); margin-bottom: 18px;
}
.about-adv-card:nth-child(even) .aic { background: var(--sage-soft); }
.about-adv-card .aic svg { width: 28px; height: 28px; }
.about-adv-card .num {
    position: absolute; top: 22px; right: 24px; font-family: var(--f-serif);
    font-size: 1.4rem; color: var(--cream-3); font-weight: 600;
}
.about-adv-card h3 { margin-bottom: 8px; font-size: 1.18rem; }
.about-adv-card p { font-size: .9rem; }

/* ---------- 资质荣誉:徽章与证书 ---------- */
.about-honor { background: var(--cream-2); }
.honor-stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.honor-badges { display: flex; flex-wrap: wrap; gap: 36px 30px; justify-content: center; }
.honor-badge { text-align: center; width: 130px; }
.badge-circle {
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--white), var(--cream));
    border: 3px dashed var(--lotus-deep); display: grid; place-items: center;
    margin: 0 auto 14px; position: relative; box-shadow: var(--shadow-sm);
}
.honor-badge:nth-child(even) .badge-circle { border-color: var(--sage-deep); }
.badge-circle svg { width: 42px; height: 42px; }
/* 飘带 */
.badge-circle::after {
    content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 38px; background: var(--lotus-deep);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 50% 78%, 20% 100%);
}
.honor-badge:nth-child(even) .badge-circle::after { background: var(--sage-deep); }
.honor-badge span { display: block; font-size: .86rem; color: var(--ink); font-weight: 500; margin-top: 24px; }

.honor-certs { display: flex; flex-direction: column; gap: 16px; }
.honor-cert {
    background: var(--white); border-radius: var(--radius); padding: 18px 22px;
    border: 1px solid var(--line); display: flex; gap: 18px; align-items: center;
    box-shadow: var(--shadow-sm); transition: transform .35s, box-shadow .35s;
}
.honor-cert:hover { transform: translateX(6px); box-shadow: var(--shadow); }
.cert-frame {
    width: 64px; height: 82px; border: 3px double var(--lotus-deep); border-radius: 6px;
    display: grid; place-items: center; flex-shrink: 0; background: var(--cream-2);
    position: relative;
}
.cert-frame::before { content: "证"; font-family: var(--f-serif); font-size: 1.7rem; color: var(--lotus-deep); }
.cert-seal {
    position: absolute; bottom: -6px; right: -6px; width: 22px; height: 22px;
    border-radius: 50%; background: var(--lotus-deep); opacity: .65;
}
.honor-cert .ct-body h4 { font-size: 1rem; margin-bottom: 4px; }
.honor-cert .ct-body span { font-size: .8rem; color: var(--ink-mute); }

/* ---------- 数据统计 ---------- */
.about-stats .stat-grid { grid-template-columns: repeat(4, 1fr); }

/* ---------- CTA 白按钮 ---------- */
.cta-band .cta-white { background: var(--white); color: var(--sage-deep); }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .about-intro-grid { grid-template-columns: 1fr; gap: 44px; }
    .about-intro-visual { height: 380px; }
    .about-adv-grid { grid-template-columns: repeat(2, 1fr); }
    .about-adv-card:nth-child(n) { transform: none; }
    .honor-stage { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
    .tl-line { left: 20px; }
    .tl-item { grid-template-columns: 1fr; gap: 8px; padding-left: 50px; }
    .tl-item::before { left: 13px; top: 24px; }
    .tl-year { text-align: left; padding-top: 0; font-size: 1.3rem; }
    .tl-card::before { display: none; }
    .about-adv-grid { grid-template-columns: 1fr; }
    .about-stats .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .honor-badges { gap: 28px 22px; }
}
@media (max-width: 560px) {
    .about-intro-visual { height: 300px; }
    .about-intro-visual .iv-sub { width: 56%; height: 42%; }
}