/* ============================================
   产品详情页 · 走 about.html 视觉语言
   v0.2 重做 2026-06-15 (丽丽戳"不好看"后)
   主要复用 about.css 的 .about-hero / .mission / .stats / .tech-card
   只新加: hero 背景图覆盖 / spec-grid 表 / CTA 块
   ============================================ */

/* ====== Hero 背景 · 栏板半挂车真图(从钉盘扒) ====== */
.pf-hero {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.55) 0%, rgba(8,14,28,0.35) 50%, rgba(8,14,28,0.7) 100%),
        url('assets/images/products/flatbed/mission.jpg') center/cover no-repeat;
}
.pf-stats {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.94) 0%, rgba(15,32,53,0.96) 100%),
        url('assets/images/products/flatbed/mission.jpg') center/cover no-repeat;
}
.pf-features {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.88) 0%, rgba(15,32,53,0.92) 100%),
        url('assets/images/products/flatbed/mission.jpg') center/cover no-repeat;
}
.pf-hero .about-hero-eyebrow {
    letter-spacing: 5px;
    color: var(--blue-300);
    font-weight: 600;
}

/* === 每个车型 Hero/Stats/Features 背景图独立覆盖 (2026-06-16) === */
.pf-hero-dump {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.55) 0%, rgba(8,14,28,0.35) 50%, rgba(8,14,28,0.7) 100%),
        url('assets/images/products/dump/03.jpg') center/cover no-repeat;
}
.pf-stats-dump {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.94) 0%, rgba(15,32,53,0.96) 100%),
        url('assets/images/products/dump/03.jpg') center/cover no-repeat;
}
.pf-features-dump {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.88) 0%, rgba(15,32,53,0.92) 100%),
        url('assets/images/products/dump/03.jpg') center/cover no-repeat;
}

.pf-hero-lowbed {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.55) 0%, rgba(8,14,28,0.35) 50%, rgba(8,14,28,0.7) 100%),
        url('assets/images/products/lowbed/01.jpg') center/cover no-repeat;
}
.pf-stats-lowbed {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.94) 0%, rgba(15,32,53,0.96) 100%),
        url('assets/images/products/lowbed/01.jpg') center/cover no-repeat;
}
.pf-features-lowbed {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.88) 0%, rgba(15,32,53,0.92) 100%),
        url('assets/images/products/lowbed/01.jpg') center/cover no-repeat;
}

.pf-hero-crane {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.55) 0%, rgba(8,14,28,0.35) 50%, rgba(8,14,28,0.7) 100%),
        url('assets/images/products/crane/01.jpg') center/cover no-repeat;
}
.pf-stats-crane {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.94) 0%, rgba(15,32,53,0.96) 100%),
        url('assets/images/products/crane/01.jpg') center/cover no-repeat;
}
.pf-features-crane {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.88) 0%, rgba(15,32,53,0.92) 100%),
        url('assets/images/products/crane/01.jpg') center/cover no-repeat;
}

.pf-hero-fence {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.55) 0%, rgba(8,14,28,0.35) 50%, rgba(8,14,28,0.7) 100%),
        url('assets/images/products/fence/01.jpg') center/cover no-repeat;
}
.pf-stats-fence {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.94) 0%, rgba(15,32,53,0.96) 100%),
        url('assets/images/products/fence/01.jpg') center/cover no-repeat;
}
.pf-features-fence {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.88) 0%, rgba(15,32,53,0.92) 100%),
        url('assets/images/products/fence/01.jpg') center/cover no-repeat;
}

.pf-hero-aerial {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.55) 0%, rgba(8,14,28,0.35) 50%, rgba(8,14,28,0.7) 100%),
        url('assets/images/products/aerial/01.jpg') center/cover no-repeat;
}
.pf-stats-aerial {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.94) 0%, rgba(15,32,53,0.96) 100%),
        url('assets/images/products/aerial/01.jpg') center/cover no-repeat;
}
.pf-features-aerial {
    background:
        linear-gradient(180deg, rgba(8,14,28,0.88) 0%, rgba(15,32,53,0.92) 100%),
        url('assets/images/products/aerial/01.jpg') center/cover no-repeat;
}

/* ====== PRODUCT OVERVIEW 左图右文布局 (2026-06-16 丽丽建议) ====== */
.pf-mission .mission-grid {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: start;
}
.pf-mission-image {
    position: sticky;
    top: 100px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 32, 53, 0.18);
    background: var(--gray-100);
    aspect-ratio: 4 / 3;
}
.pf-mission-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.pf-mission .mission-eyebrow {
    text-align: left;
    margin-bottom: 14px;
}
.pf-mission .mission-headline {
    text-align: left;
    font-size: 30px;
    line-height: 1.3;
    max-width: none;
    margin: 0 0 28px;
}
.pf-mission .mission-trinity {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--gray-200);
}
.pf-mission .trinity-item { text-align: left; }
.pf-mission .mission-tags {
    justify-content: flex-start;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .pf-mission .mission-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pf-mission-image {
        position: static;
        top: auto;
    }
    .pf-mission .mission-headline { font-size: 24px; }
}

/* ====== 核心参数看板 / 产品特点 · 视差等效果 ====== */
@media (min-width: 769px) {
    .pf-stats, .pf-features { background-attachment: fixed; }
}
.pf-stats .stat-number {
    font-size: 40px;
    color: var(--blue-300);
}
.pf-stats .stat-unit {
    font-size: 18px;
}

/* ====== 技术规格全表 ====== */
.pf-spec-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--gray-50, #f5f7fa) 0%, var(--white) 100%);
}

.pf-spec-grid {
    max-width: 1000px;
    margin: 56px auto 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow: hidden;
}

.pf-spec-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    padding: 18px 32px;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s ease;
}
.pf-spec-row:last-child { border-bottom: 0; }
.pf-spec-row:nth-child(even) { background: var(--gray-50); }
.pf-spec-row:hover { background: rgba(37,99,235,0.04); }

.pf-spec-key {
    font-size: 14px;
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: 0.5px;
}
.pf-spec-val {
    font-size: 15px;
    color: var(--navy-900);
    font-weight: 600;
}

@media (max-width: 768px) {
    .pf-spec-row {
        grid-template-columns: 1fr;
        padding: 16px 20px;
        gap: 4px;
    }
    .pf-spec-key { font-size: 13px; }
    .pf-spec-val { font-size: 14px; }
}

.pf-spec-note {
    max-width: 1000px;
    margin: 16px auto 0;
    text-align: right;
    font-size: 13px;
    color: var(--gray-500);
    font-style: italic;
}

/* ====== CTA 询价 (大留白,典雅) ====== */
.pf-cta {
    padding: 100px 0;
    background: var(--white);
    text-align: center;
}
.pf-cta .section-header {
    margin-bottom: 48px;
}
.pf-cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.pf-cta-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}
.pf-cta-btn-primary {
    background: var(--navy-900);
    color: var(--white);
    border: 1px solid var(--navy-900);
}
.pf-cta-btn-primary:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,99,235,0.25);
}
.pf-cta-btn-ghost {
    background: transparent;
    color: var(--navy-900);
    border: 1px solid var(--gray-300);
}
.pf-cta-btn-ghost:hover {
    border-color: var(--navy-900);
    background: var(--gray-50);
}

.pf-cta-contact {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    font-size: 13px;
    color: var(--gray-500);
    letter-spacing: 1px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
    margin: 0 auto;
}
.pf-cta-tel {
    font-size: 22px;
    font-weight: 800;
    color: var(--navy-900);
    text-decoration: none;
    letter-spacing: 1.5px;
}

/* ====== 页脚收一些 ====== */
.pf-footer {
    padding: 32px 0;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 13px;
    text-align: center;
}
.pf-footer .footer-bottom p {
    margin: 4px 0;
}
.pf-footer .footer-addr {
    color: var(--gray-400, #94a3b8);
    font-size: 12px;
}