/* production.css —— 由 template/{15 语种}/production.html 的内联样式外置，全站共用
   选择器带上元素原有类名，保证特异性不低于站内已有规则，外置后版式不会被压掉 */

.hero-section.hero-production.prd-1 {
    min-height: 480px;
    padding: 80px 0 64px;
}

.prd-2 {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.prd-3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.hero-content .prd-4 {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.hero-content .prd-5 {
    font-size: var(--font-size-xl);
    color: rgba(255,255,255,0.75);
    max-width: 720px;
    margin-bottom: 36px;
    line-height: var(--line-height-relaxed);
}

.btn-primary.prd-6 {
    padding: 16px 36px;
}

.btn-secondary.prd-7 {
    padding: 16px 36px;
}

.topic-nav.prd-8 {
    padding: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    position: sticky;
    top: 79px;
    z-index: 100;
}

.prd-9 {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.prd-9 .prd-10 {
    padding: 16px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.prd-9 .prd-11 {
    padding: 16px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.prd-9 .prd-12 {
    padding: 16px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.prd-9 .prd-13 {
    padding: 16px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.section.prd-14 {
    background: var(--color-gray-50);
}

.section-header .prd-15 {
    max-width: 720px;
    margin: 16px auto 0;
    color: var(--color-gray-500);
}

.section.prd-16 {
    background: var(--color-white);
}

.prd-17 {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 64px;
    align-items: center;
}

.prd-18 {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
}

.prd-19 {
    background: var(--color-gray-100);
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.prd-20 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section.prd-21 {
    background: var(--color-gray-50);
}

.section-header .prd-22 {
    max-width: 640px;
    margin: 16px auto 0;
    color: var(--color-gray-500);
}

.prd-23 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.advantage-card.prd-24 {
    text-align: left;
    padding: 40px 32px;
}

.prd-25 {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-card .prd-26 {
    margin-bottom: 12px;
    font-size: var(--font-size-lg);
}

.advantage-card .prd-27 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 16px;
}

.prd-28 {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.advantage-card.prd-29 {
    text-align: left;
    padding: 40px 32px;
}

.prd-30 {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-card .prd-31 {
    margin-bottom: 12px;
    font-size: var(--font-size-lg);
}

.advantage-card .prd-32 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 16px;
}

.prd-33 {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.advantage-card.prd-34 {
    text-align: left;
    padding: 40px 32px;
}

.prd-35 {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-card .prd-36 {
    margin-bottom: 12px;
    font-size: var(--font-size-lg);
}

.advantage-card .prd-37 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 16px;
}

.prd-38 {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.section.prd-39 {
    background: var(--color-white);
}

.section-header .prd-40 {
    max-width: 640px;
    margin: 16px auto 0;
    color: var(--color-gray-500);
}

.prd-41 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.advantage-card.prd-42 {
    text-align: center;
    padding: 32px 24px;
}

.prd-43 {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-44 {
    margin-bottom: 12px;
}

.prd-45 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
}

.advantage-card.prd-46 {
    text-align: center;
    padding: 32px 24px;
}

.prd-47 {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-48 {
    margin-bottom: 12px;
}

.prd-49 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
}

.advantage-card.prd-50 {
    text-align: center;
    padding: 32px 24px;
}

.prd-51 {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-52 {
    margin-bottom: 12px;
}

.prd-53 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
}

.section.prd-54 {
    background: var(--color-gray-50);
}

.prd-55 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
    counter-reset: step;
}

.advantage-card.prd-56 {
    text-align: center;
    padding: 40px 24px;
    position: relative;
}

.prd-57 {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.prd-58 {
    margin-bottom: 8px;
}

.advantage-card .prd-59 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.advantage-card.prd-60 {
    text-align: center;
    padding: 40px 24px;
}

.prd-61 {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.prd-62 {
    margin-bottom: 8px;
}

.advantage-card .prd-63 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.advantage-card.prd-64 {
    text-align: center;
    padding: 40px 24px;
}

.prd-65 {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.prd-66 {
    margin-bottom: 8px;
}

.advantage-card .prd-67 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.advantage-card.prd-68 {
    text-align: center;
    padding: 40px 24px;
}

.prd-69 {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.prd-70 {
    margin-bottom: 8px;
}

.advantage-card .prd-71 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.advantage-card.prd-72 {
    text-align: center;
    padding: 40px 24px;
}

.prd-73 {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.prd-74 {
    margin-bottom: 8px;
}

.advantage-card .prd-75 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.advantage-card.prd-76 {
    text-align: center;
    padding: 40px 24px;
}

.prd-77 {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.prd-78 {
    margin-bottom: 8px;
}

.advantage-card .prd-79 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ===== [STYLEATTR-FALLBACK-BEGIN] 由 _tools/_t_styleattr_responsive.js 生成，勿手改 =====
   原机制：protolabs-style.css 用 [style*="…"] 命中行内样式串做移动端降级；
   这些元素的内联样式外置后属性选择器不再命中，移动端会退回桌面尺寸。
   下面按类名重绘同样的降级，声明与 protolabs 逐字一致（含 !important）。 ===== */

@media (max-width: 1024px) {
    .prd-17 {
        grid-template-columns: 1fr !important;
    }
    .topic-nav.prd-8 {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .prd-41 {
        grid-template-columns: 1fr !important;
    }
    .prd-55 {
        grid-template-columns: 1fr !important;
    }
    .hero-section.hero-production.prd-1 {
        padding: 48px 0 !important;
    }
    .advantage-card.prd-42 {
        padding: 24px 16px !important;
    }
    .advantage-card.prd-46 {
        padding: 24px 16px !important;
    }
    .advantage-card.prd-50 {
        padding: 24px 16px !important;
    }
    .hero-section.hero-production.prd-1 {
        min-height: auto !important;
        padding: 48px 0 !important;
    }
    .hero-content .prd-4 {
        font-size: var(--font-size-3xl) !important;
    }
    .hero-content .prd-5 {
        font-size: var(--font-size-base) !important;
    }
    .prd-17 {
        gap: 24px !important;
    }
    .prd-19 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .prd-41 {
        grid-template-columns: 1fr !important;
    }
    .prd-55 {
        grid-template-columns: 1fr !important;
    }
    .prd-23 {
        grid-template-columns: 1fr !important;
    }
    .prd-23 {
        gap: 16px !important;
    }
    .prd-41 {
        gap: 16px !important;
    }
    .prd-55 {
        gap: 16px !important;
    }
}
.prd-19 {
    aspect-ratio: 16 / 9 !important;
    width: 460px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
/* ===== [STYLEATTR-FALLBACK-END] ===== */