:root{--bg:#f8fafc;--bg-light:#f1f5f9;--bg-card:#ffffff;--text:#1e293b;--text-dim:#64748b;--accent:#2563eb;--accent-rgb:37,99,235;--accent-2:#0ea5e9;--accent-2-rgb:14,165,233;--accent-dark:#1d4ed8;--border:#e2e8f0;--border-hover:#cbd5e1;--radius:8px;--max-w:1200px;--header-h:64px;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;--transition:0.25s ease;--shadow:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 8px 30px rgba(0,0,0,0.1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover,a:focus{color:var(--accent-dark)}
ul,ol{list-style:none}

.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);z-index:1000;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.main-nav{display:flex;align-items:center;justify-content:flex-start;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;height:100%}
.logo{color:var(--text);font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;letter-spacing:0.02em}
.logo img{height:40px;width:auto;object-fit:contain}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:0.5rem}
.menu-toggle span{width:24px;height:2px;background:var(--text);border-radius:1px;transition:var(--transition)}
.nav-menu{display:flex;align-items:center;gap:0.25rem;list-style:none;margin-left:2rem}
.nav-menu>li>a{display:block;padding:0.6rem 1rem;font-size:0.95rem;color:var(--text-dim);border-radius:var(--radius);transition:background var(--transition),color var(--transition)}
.nav-menu>li>a:hover,.nav-menu>li>a:focus,.nav-menu>li>a.active{color:var(--accent);background:var(--bg-light)}
.cta-nav{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;font-weight:500}
.cta-nav:hover{background:linear-gradient(135deg,var(--accent-dark),var(--accent))!important}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 0.5rem);left:0;background:#eff6ff;border:2px solid var(--accent);border-radius:var(--radius);padding:0.5rem;min-width:220px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--transition),transform var(--transition),visibility var(--transition);z-index:100}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:0.5rem 0.75rem;font-size:0.9rem;color:#1e293b;border-radius:6px;background:#eff6ff;transition:background var(--transition),color var(--transition);white-space:nowrap}
.dropdown-menu a:hover,.dropdown-menu a:focus{background:#2563eb!important;color:#fff!important}
.dropdown-menu a.active{color:var(--accent);font-weight:600}

@media (max-width:768px){
.menu-toggle{display:flex}
.nav-menu{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--bg-card);flex-direction:column;align-items:stretch;gap:0;padding:1rem;transform:translateX(100%);transition:transform var(--transition);overflow-y:auto;z-index:999}
.nav-menu.active{transform:translateX(0)}
.nav-menu>li>a{padding:0.8rem 1rem;border-bottom:1px solid var(--border);border-radius:0}
.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:1rem;background:transparent;min-width:auto}
.dropdown-menu a{padding:0.5rem 1rem;color:var(--text-dim)}
}

main{padding-top:var(--header-h);max-width:var(--max-w);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
@media(max-width:768px){main{padding-left:1rem;padding-right:1rem}}

.section{padding:4rem 0}
.section-dark{background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#e2e8f0}
.section-dark h2,.section-dark h3,.section-dark p{color:#e2e8f0}
.section-dark .text-dim{color:#94a3b8}
.section-header{text-align:center;margin-bottom:3rem}
.section-header h2{font-size:2rem;font-weight:700;margin-bottom:0.5rem}
.section-subtitle{color:var(--text-dim);font-size:1.05rem;max-width:700px;margin:0 auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.hero{padding:5rem 0 3rem;text-align:center;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0ea5e9 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><circle cx=%2250%22 cy=%2250%22 r=%2240%22 fill=%22none%22 stroke=%22rgba(255,255,255,0.03)%22 stroke-width=%220.5%22/></svg>');background-size:60px 60px;opacity:0.5}
.hero h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem;position:relative;z-index:1}
.hero .highlight{color:#60a5fa}
.hero-subtitle{font-size:1.1rem;max-width:700px;margin:0 auto 2rem;color:#cbd5e1;position:relative;z-index:1}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;position:relative;z-index:1}
.hero-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.stat-item{text-align:center}
.stat-number{font-size:2rem;font-weight:700;color:#60a5fa}
.stat-label{font-size:0.9rem;color:#94a3b8}
@media(max-width:768px){.hero h1{font-size:1.8rem}.hero-stats{gap:1rem}.stat-number{font-size:1.5rem}}

.btn{display:inline-block;padding:0.75rem 1.5rem;border-radius:var(--radius);font-weight:500;transition:transform var(--transition),box-shadow var(--transition);cursor:pointer;border:none;font-size:1rem}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 4px 15px rgba(37,99,235,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.4);color:#fff}
.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.btn-link{color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:0.25rem}
.btn-link:hover{color:var(--accent-dark);gap:0.5rem}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.product-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);box-shadow:var(--shadow)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.product-card figure{position:relative;overflow:hidden;background:var(--bg-light);border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:center;justify-content:center;min-height:280px}
.product-card figure img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;margin:0 auto}
.product-card figcaption{padding:0.75rem 1rem;font-size:0.85rem;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--bg);text-align:center}
.product-card-body{padding:1.25rem}
.product-card-body h3{font-size:1.1rem;font-weight:600;margin-bottom:0.5rem}
.product-card-body p{color:var(--text-dim);font-size:0.9rem;margin-bottom:0.75rem}
.tag-list{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.75rem}
.tag-list li{font-size:0.75rem;padding:0.25rem 0.6rem;background:var(--bg-light);border-radius:20px;color:var(--text-dim)}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem;align-items:start}
@media(max-width:768px){.product-detail{grid-template-columns:1fr}}
.product-gallery{display:flex;align-items:center;justify-content:center;background:var(--bg-light);border-radius:var(--radius);overflow:hidden;min-height:400px;border:1px solid var(--border)}
.product-gallery img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;margin:0 auto}
.product-info h1{font-size:2rem;margin-bottom:1rem}
.product-desc{color:var(--text-dim);margin-bottom:1.5rem;font-size:1.05rem}
.product-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.product-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--text-dim);font-size:0.9rem}
.product-meta span{display:flex;align-items:center;gap:0.25rem}

.related-products{padding:3rem 0;border-top:1px solid var(--border);margin-top:3rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}
.related-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center;transition:transform var(--transition),box-shadow var(--transition);box-shadow:var(--shadow)}
.related-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.related-item figure{background:var(--bg-light);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:160px;margin-bottom:0.75rem}
.related-item figure img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;margin:0 auto}
.related-item h4{font-size:1rem;margin-bottom:0.25rem}
.related-item p{font-size:0.85rem;color:var(--text-dim)}

.content-section{max-width:900px;margin:0 auto;padding:2rem 0}
.content-section h2{font-size:1.5rem;margin:2rem 0 1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent);display:inline-block}
.content-section h3{font-size:1.2rem;margin:1.5rem 0 0.75rem}
.content-section p{margin-bottom:1rem;color:var(--text-dim)}
.content-section ul,.content-section ol{margin-left:1.5rem;margin-bottom:1rem;list-style:disc}
.content-section li{margin-bottom:0.5rem}
.content-section table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.content-section th,.content-section td{padding:0.75rem;text-align:left;border-bottom:1px solid var(--border)}
.content-section th{background:var(--bg-light);font-weight:600}
.content-section tr:hover{background:var(--bg-light)}
.content-section a{color:var(--accent);font-weight:500}
.content-section a:hover{color:var(--accent-dark)}

.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.app-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:transform var(--transition),box-shadow var(--transition);box-shadow:var(--shadow);display:block;color:var(--text)}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--text)}
.app-card h3{font-size:1.1rem;margin-bottom:0.5rem;color:var(--accent)}
.app-card p{color:var(--text-dim);font-size:0.9rem}

.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:2rem}
.news-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);box-shadow:var(--shadow)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-card figure{background:var(--bg-light);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px}
.news-card figure img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;margin:0 auto}
.news-card .card-body{padding:1.25rem}
.news-card time{font-size:0.8rem;color:var(--text-dim);display:block;margin-bottom:0.5rem}
.news-card h3{font-size:1rem;margin-bottom:0.5rem}
.news-card p{color:var(--text-dim);font-size:0.9rem;margin-bottom:0.75rem}

.page-header{text-align:center;padding:3rem 0}
.page-header h1{font-size:2.5rem;margin-bottom:0.5rem}
.page-header p{color:var(--text-dim);max-width:600px;margin:0 auto}

.breadcrumbs{padding:1rem 0;font-size:0.85rem;color:var(--text-dim)}
.breadcrumbs ol{display:flex;gap:0.5rem;list-style:none;flex-wrap:wrap}
.breadcrumbs li{display:flex;gap:0.5rem}
.breadcrumbs li:not(:last-child)::after{content:'>';color:var(--text-dim)}
.breadcrumbs a{color:var(--accent)}
.breadcrumbs a:hover{color:var(--accent-dark)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-info h2{margin-bottom:1rem}
.contact-info address{font-style:normal;color:var(--text-dim);line-height:2}
.contact-info a{color:var(--accent)}
.map-placeholder{background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--text-dim);margin-top:1rem;min-height:200px;display:flex;align-items:center;justify-content:center}
.contact-form h2{margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;margin-bottom:0.4rem;font-weight:500}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);font-size:1rem;transition:border-color var(--transition)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.form-group textarea{resize:vertical;min-height:120px}

.oem-content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
@media(max-width:768px){.oem-content{grid-template-columns:1fr}}
.process-steps{padding-left:1.5rem;list-style:decimal}
.process-steps li{margin-bottom:1rem;font-size:0.95rem}
.process-steps li strong{color:var(--accent)}
.feature-list li{margin-bottom:0.75rem;padding-left:1.5rem;position:relative}
.feature-list li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}

.trust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem;margin-top:2rem}
.trust-item{text-align:center;padding:1.5rem}
.trust-item svg{color:var(--accent);margin-bottom:1rem}
.trust-item h3{font-size:1.1rem;margin-bottom:0.5rem}
.trust-item p{color:var(--text-dim);font-size:0.9rem}

.site-footer{background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#cbd5e1;padding:3rem 0 0;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.footer-section h3{color:#fff;font-size:1rem;margin-bottom:1rem}
.footer-section p,.footer-section a{color:#94a3b8;font-size:0.9rem}
.footer-section a:hover{color:#fff}
.footer-section ul{list-style:none}
.footer-section li{margin-bottom:0.5rem}
.footer-section address{color:#94a3b8;font-size:0.9rem;line-height:1.8;font-style:normal}
.footer-bottom{text-align:center;padding:1.5rem;margin-top:2rem;border-top:1px solid rgba(255,255,255,0.1);font-size:0.85rem;color:#64748b}
.footer-bottom a{color:#94a3b8}
.footer-bottom a:hover{color:#fff}

.text-center{text-align:center}
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition);z-index:999}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--accent-dark);color:#fff}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============================================
   SEO修复：深色区域内的对比表格可读性
   ============================================ */

.section-dark .content-section table thead th {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
    padding: 0.85rem 1rem;
}

.section-dark .content-section table tbody td {
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
}

.section-dark .content-section table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.section-dark .content-section h3 {
    color: #e2e8f0;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.section-dark .content-section table {
    width: 100%;
    border-collapse: collapse;
}

/* ============================================
   修复：产品卡片图片完整显示（不裁剪）
   ============================================ */

/* 产品列表卡片图片 — 完整显示，统一容器高度 */
.product-card figure {
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 280px;
}

.product-card figure img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* 产品详情页大图 — 完整显示 */
.product-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 400px;
    max-height: 500px;
    border: 1px solid var(--border);
}

.product-gallery img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* 相关产品卡片 */
.related-item figure {
    background: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    max-height: 160px;
    margin-bottom: 0.75rem;
}

.related-item figure img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* 技术资讯卡片 */
.news-card figure {
    background: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: 200px;
}

.news-card figure img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* ============================================
   修复：页面左右两侧增加留白
   ============================================ */

@media (min-width: 769px) {
    main {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (max-width: 768px) {
    main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .product-gallery {
        min-height: 280px;
        max-height: 350px;
    }
    
    .product-gallery img {
        max-height: 350px;
    }
}

/* 语言切换按钮（右上角） */
.lang-switch{margin-left:auto}
.lang-switch .lang-link{border:1.5px solid var(--accent);color:var(--accent)!important;font-weight:600;border-radius:999px;padding:0.35rem 0.9rem!important;font-size:0.85rem;letter-spacing:0.03em}
.lang-switch .lang-link:hover{background:var(--accent)!important;color:#fff!important}
@media (max-width:768px){.lang-switch{margin-left:0;margin-top:0.5rem}}