:root {
    --color-bg: #ffffff; --color-surface: #f5f7f9; --color-border: #e2e6ea;
    --color-text-primary: #1e2a3a; --color-text-secondary: #4a5b6e;
    --color-accent: #2c5f8a; --color-accent-dark: #1f4564; --color-accent-light: #eef3fa;
    --font-sans: 'Inter', system-ui, -apple-system; --radius-md: 8px; --radius-lg: 16px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 8px 20px rgba(0,0,0,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-sans); color: var(--color-text-primary); background: var(--color-bg); line-height:1.5; }
.container { max-width: 1280px; margin:0 auto; padding:0 24px; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
.btn { display: inline-flex; align-items:center; gap:8px; padding:12px 28px; font-weight:600; border-radius:40px; transition:0.25s; cursor:pointer; border:1px solid transparent; }
.btn-primary { background: var(--color-accent); color: white; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text-primary); }
.btn-outline:hover { border-color: var(--color-accent); background: var(--color-accent-light); }
.btn-block { width:100%; justify-content:center; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag { font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); font-weight:600; display:inline-block; margin-bottom:12px; }
.section-title { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); }
.section-desc { color: var(--color-text-secondary); max-width: 600px; margin:12px auto 0; }
/* header */
.site-header { position: sticky; top:0; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom:1px solid var(--color-border); z-index:100; padding:12px 0; }
.nav-container { display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight:700; font-size:1.4rem; }
.brand-mark { color: var(--color-accent); margin-right:4px; }
.brand-en { font-weight:400; font-size:0.8rem; color:var(--color-text-secondary); }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-link { font-weight:500; transition:0.2s; }
.nav-link.active, .nav-link:hover { color: var(--color-accent); }
.nav-cta { background: var(--color-accent); color:white !important; padding:8px 20px; border-radius:40px; }
.nav-cta:hover { background: var(--color-accent-dark); }
.mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.bar { width:24px; height:2px; background: var(--color-text-primary); transition:0.2s; }
.mobile-menu { display:none; position:fixed; top:70px; left:0; width:100%; background:white; border-top:1px solid var(--color-border); padding:20px; flex-direction:column; gap:16px; z-index:99; }
.mobile-menu a { padding:10px 0; border-bottom:1px solid #eee; }
.mobile-cta { background:var(--color-accent); color:white; text-align:center; border-radius:40px; }
/* hero */
.hero { position:relative; padding: 100px 0 80px; background: linear-gradient(135deg, #f8fafc 0%, #ecf3f9 100%); overflow:hidden; }
.hero-container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:40px; }
.hero-content { flex:1; max-width:600px; }
.hero-tag { font-size:0.75rem; font-weight:600; text-transform:uppercase; color:var(--color-accent); letter-spacing:2px; }
.hero-title { font-size:3rem; font-weight:700; margin:20px 0 16px; line-height:1.2; }
.hero-accent { color: var(--color-accent); }
.hero-desc { color: var(--color-text-secondary); font-size:1.1rem; margin-bottom:32px; }
.hero-stats { display:flex; gap:40px; background: white; padding:24px 32px; border-radius: 60px; box-shadow: var(--shadow-md); }
.stat-num { font-size:2rem; font-weight:700; }
.stat-plus { font-size:1.5rem; font-weight:600; color:var(--color-accent); }
/* products grid - 强制3列，实现3x2布局 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 40px 0;
}
.product-card { background: white; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition:0.3s; cursor:pointer; border:1px solid var(--color-border); }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-img { aspect-ratio: 4/3; overflow: hidden; background: #eef2f6; display: flex; align-items: center; justify-content: center; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .product-img img { transform: scale(1.02); }
.product-info { padding:20px; }
.product-title { font-weight:600; font-size:1.2rem; margin-bottom:8px; }
.product-desc { font-size:0.85rem; color: var(--color-text-secondary); line-height:1.4; }
/* philosophy */
.philosophy { padding: 80px 0; background: var(--color-surface); }
.philosophy-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:32px; margin-top:40px; }
.philosophy-card { background: white; padding:32px 24px; border-radius: var(--radius-lg); text-align:center; border:1px solid var(--color-border); transition:0.2s; }
.card-icon { font-size:2.5rem; color: var(--color-accent); margin-bottom:20px; }
/* about */
.about { padding:80px 0; }
.about-grid { display:flex; gap:60px; align-items:center; flex-wrap:wrap; }
.about-content { flex:1; }
.about-image { flex:1; background: var(--color-surface); border-radius: var(--radius-lg); min-height:300px; display:flex; align-items:center; justify-content:center; }
.about-figure { text-align:center; }
.about-figure i { font-size:5rem; color: var(--color-accent); margin-bottom:12px; }
.about-text { margin-bottom:1rem; line-height:1.6; color: var(--color-text-secondary); }
.about-sign { margin-top:1.5rem; font-style:italic; color: var(--color-accent); }
/* 关于区域视频样式 */
.about-video-area {
    overflow: hidden;
    border-radius: var(--radius-lg);
    position: relative;
    background: var(--color-surface);
}

.about-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;  /* 您可以改为 4/3，根据视频比例调整 */
    position: relative;
}

.about-video {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 视频铺满容器，可能会裁剪边缘，但保证填满 */
    display: block;
}

.video-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    pointer-events: none;   /* 让文字不干扰视频点击 */
}

/* 可选：在移动端调整字幕大小 */
@media (max-width: 768px) {
    .video-caption {
        font-size: 0.7rem;
        bottom: 12px;
        left: 12px;
        padding: 4px 10px;
    }
}
/* contact */
.contact-section { padding:80px 0; background: var(--color-surface); }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-details { list-style:none; margin-top:24px; }
.contact-details li { margin:16px 0; display:flex; align-items:center; gap:12px; }
.social-links { margin-top: 32px; }
.social-links h4 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; color: var(--color-text-primary); }
.social-icons { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: white; color: var(--color-accent); transition: 0.2s; border: 1px solid var(--color-border); text-decoration: none; }
.social-icon:hover { background: var(--color-accent); color: white; transform: translateY(-3px); border-color: var(--color-accent); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-weight:500; margin-bottom:8px; }
.form-control { width:100%; padding:14px 18px; font-size:1rem; border:1px solid var(--color-border); border-radius:12px; font-family:inherit; transition:0.2s; background:white; }
.form-control:focus { outline:none; border-color: var(--color-accent); box-shadow:0 0 0 3px rgba(44,95,138,0.1); }
textarea.form-control { resize:vertical; min-height:100px; }
.error-msg { color:#c2410c; font-size:0.75rem; display:block; margin-top:4px; }
.form-feedback { margin-top:20px; text-align:center; background:#e6f4ea; padding:12px; border-radius:12px; color:#2c5f8a; }
/* footer */
.site-footer { background: #11181c; color: #a0b3c2; padding:48px 0 24px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:40px; }
.footer-logo { font-weight:600; color:white; font-size:1.2rem; display:block; margin-bottom:12px; }
.footer-desc { font-size:0.85rem; }
.footer-links ul, .footer-contact ul { list-style:none; margin-top:8px; }
.footer-links li, .footer-contact li { margin:8px 0; }
.footer-legal p { margin-top:8px; font-size:0.75rem; }
/* detail page */
.detail-page { padding: 60px 0; min-height:60vh; }
.detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.detail-img { border-radius: 24px; overflow: hidden; background: #f0f4f8; display:flex; align-items:center; justify-content:center; min-height:320px; }
.detail-img img { width: 100%; height: auto; display: block; object-fit: cover; }
.detail-customization { background: var(--color-accent-light); padding: 20px; border-radius: var(--radius-lg); margin: 20px 0; border-left: 3px solid var(--color-accent); }
.detail-customization h4 { margin-bottom: 8px; color: var(--color-accent-dark); }
/* legal & thankyou */
.legal-page, .thankyou-page { padding: 80px 0; min-height: 60vh; }
.legal-container, .thankyou-container { max-width: 900px; margin: 0 auto; }
.legal-content { background: white; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.legal-content h3 { font-size: 1.2rem; margin: 1.5rem 0 0.8rem; color: var(--color-text-primary); }
.legal-content p, .legal-content ul { margin-bottom: 1rem; line-height: 1.7; color: var(--color-text-secondary); }
.legal-content ul { margin-left: 2rem; }
.legal-note { background: var(--color-accent-light); padding: 24px; border-radius: var(--radius-lg); margin-top: 2rem; display: flex; gap: 16px; align-items: center; border-left: 4px solid var(--color-accent); }
.legal-note i { font-size: 2rem; color: var(--color-accent); }
.thankyou-card { text-align: center; background: white; border-radius: var(--radius-lg); padding: 60px 40px; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); max-width: 600px; margin: 0 auto; }
.thankyou-icon { font-size: 4rem; color: #2e7d32; margin-bottom: 24px; }
.thankyou-card h1 { font-size: 2rem; margin-bottom: 20px; }
.thankyou-card p { margin-bottom: 16px; font-size: 1.1rem; }
.thankyou-actions { display: flex; gap: 20px; justify-content: center; margin: 32px 0 24px; flex-wrap: wrap; }
.thankyou-note { font-size: 0.9rem; color: var(--color-text-secondary); }
/* responsive */
@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .nav-links { display:none; }
    .mobile-toggle { display:flex; }
    .hero-title { font-size:2rem; }
    .hero-stats { flex-wrap:wrap; justify-content:center; gap:20px; padding:20px; }
    .contact-layout { grid-template-columns:1fr; }
    .about-grid { flex-direction:column; }
    .detail-layout { grid-template-columns:1fr; }
    .container { padding:0 20px; }
    .filter-bar { flex-wrap:wrap; justify-content:center; }
    .filter-btn { margin-bottom:8px; }
    .social-icons { gap: 12px; }
    .social-icon { width: 36px; height: 36px; }
    .legal-content { padding: 24px; }
    .thankyou-card { padding: 40px 24px; }
    .legal-note { flex-direction: column; text-align: center; }
    .products-grid { grid-template-columns: 1fr; gap: 24px; }
}
.filter-bar { display:flex; gap:12px; justify-content:center; margin-bottom:40px; flex-wrap:wrap; }
.filter-btn { padding:8px 22px; border-radius:40px; background:transparent; border:1px solid var(--color-border); font-weight:500; transition:0.2s; cursor:pointer; }
.filter-btn.active, .filter-btn:hover { background: var(--color-accent); color:white; border-color:var(--color-accent); }
.btn-outline-link { display:inline-flex; align-items:center; gap:8px; font-weight:500; color: var(--color-accent); border-bottom:1px solid transparent; transition:0.2s; }
.btn-outline-link:hover { border-bottom-color: var(--color-accent); gap:12px; }
/* 增加查看全部按钮与核心理念区块的间距 */
.view-all-wrap {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px; /* 新增下边距，避免与下一区块过近 */
}
.legal-nav { display: flex; gap: 24px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap; }
.legal-nav a { padding: 8px 20px; background: var(--color-accent-light); border-radius: 40px; color: var(--color-accent); font-weight: 500; transition: 0.2s; text-decoration: none; }
.legal-nav a:hover { background: var(--color-accent); color: white; }
.legal-section { margin-bottom: 64px; scroll-margin-top: 100px; }
.legal-section h2 { font-size: 1.8rem; margin-bottom: 24px; border-left: 4px solid var(--color-accent); padding-left: 20px; }
/* 面包屑导航 */
.breadcrumb {
    padding: 16px 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb a:hover {
    color: var(--color-accent);
}
.breadcrumb .sep {
    margin: 0 8px;
    color: var(--color-border);
}
.breadcrumb .current {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* 产品分类标签 */
.product-category-tag {
    margin-bottom: 24px;
}
.category-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* 产品详情页 联系方式区块视觉优化 */
.product-detail-page .contact-layout,
.detail-page .contact-layout {
    align-items: start;
}
.detail-page .contact-info {
    padding-right: 40px;
}
/* 移动端恢复为正常内边距 */
@media (max-width: 768px) {
    .detail-page .contact-info {
        padding-right: 0;
    }
}
/* 统一 Header Logo 图片样式 */
.brand-logo {
    height: 40px;
    width: auto;
    display: block;
}
.legal-effective { margin-top: 24px; font-style: italic; color: var(--color-text-secondary); border-top: 1px solid var(--color-border); padding-top: 16px; }