/* ══════════════════════════════════════
   HERO.CSS — 首页专属样式（只在首页加载，不拖慢其他页面）
   包含：Hero大图区 / Trust卡片 / Products / Applications / OEM分栏 /
   波浪时间轴 / Market Opportunity / Factory图墙 / Capabilities / Testimonials /
   MOQ定价 / Quality&Certs / FAQ / Contact表单
══════════════════════════════════════ */

/* ── HERO（整屏背景图 + 文字浮层版式） ── */
/* .hero 高度跟着文字内容自动撑高（min-height，不设死上限），无论标题换成几行、切换到哪种语言文字变长，
   都不会被裁切——因为 .hero-text 是文档流里的正常盒子，内容多高，.hero 就跟着多高，
   而 .hero-bg 背景图是 inset:0 绝对定位铺满 .hero，会自动跟着适配，两者结构上依然是独立的两个盒子，
   只是背景图的呈现高度会随 .hero 的实际高度变化（这是全屏背景图这种版式的天然特性，不是bug）。 */
.hero { width:100%; min-height:clamp(620px, calc(100vh - 68px), 760px); background:var(--ink); margin-top:68px; position:relative; overflow:hidden; }
/* 背景图层：独立盒子，绝对定位铺满 .hero 当前的实际高度 */
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; display:block; }
/* 从左到右深色渐变蒙版，保证左侧文字在图片上清晰可读；右侧留出图片本身可见区域 */
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,24,31,.94) 0%, rgba(20,24,31,.80) 32%, rgba(20,24,31,.15) 62%, transparent 78%); z-index:1; }
/* 文字层：放回文档流里（position:relative，不再是 absolute+inset:0），
   内容多高 .hero-text 就多高，.hero 会跟着自动撑开——彻底不存在"内容太多被裁掉"的情况。
   宽度从 660px 加宽到 820px，标题能少换一到两行，不那么拥挤，视觉上通过左侧深色渐变
   自然过渡到右侧产品图，不会显得生硬。
   底部 padding 116px 是关键：只要这个值 > 下方 Trust卡片区的 -100px 上顶量，
   不管 .hero-text 内容把 .hero 撑到多高，CTA按钮到 .hero 底边的距离永远是这 116px，
   跟标题换几行完全无关，按钮永远不会被压住 */
.hero-text { position:relative; z-index:2; width:100%; max-width:960px; display:flex; flex-direction:column; justify-content:center; min-height:clamp(620px, calc(100vh - 68px), 760px); padding:80px 5% 116px 8%; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:#FFD9BE; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:26px; background:rgba(255,106,19,.18); border:1px solid rgba(255,150,90,.45); padding:6px 14px; border-radius:100px; width:fit-content; }
.hero-tag-dot { position:relative; width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.hero-tag-dot::before { content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--orange); opacity:.5; animation:tagDotPing 1.8s ease-out infinite; }
@keyframes tagDotPing { 0%{ transform:scale(.6); opacity:.6; } 100%{ transform:scale(2.2); opacity:0; } }
.hero-title { font-size:44px; font-weight:900; line-height:1.22; margin-bottom:28px; letter-spacing:-.5px; color:#FFFFFF; }
.hero-title em { font-style:normal; color:var(--orange); }
.hero-desc { font-size:16px; color:rgba(255,255,255,.78); line-height:1.75; margin-bottom:34px; max-width:520px; }
.hero-specs { list-style:none; margin-bottom:42px; display:flex; flex-direction:column; gap:16px; }
.hero-specs li { font-size:14px; color:rgba(255,255,255,.82); font-weight:500; display:flex; align-items:flex-start; gap:10px; line-height:1.6; }
.hero-specs li .dot { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:rgba(255,106,19,.22); border:1.5px solid var(--orange); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.hero-specs li .dot::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); display:block; }
.hero-specs li strong { color:#FFFFFF; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* 首页Hero区按钮更大气，覆盖main.css里的默认尺寸 */
.hero .btn-primary { position:relative; overflow:hidden; padding:15px 34px; font-size:15px; }
.hero .btn-primary::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); transition:left .5s ease; }
.hero .btn-primary:hover::after { left:130%; }
.hero .btn-secondary { padding:15px 34px; font-size:15px; background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.hero .btn-secondary:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }

/* 首页专属：更大尺寸的图片占位（Hero/工厂大图等） */
.hero .photo-slot, .oem-image .photo-slot, .factory-item .photo-slot { min-height:320px; border:1.5px dashed rgba(20,24,31,.14); }
.hero .photo-slot .ph-icon, .oem-image .photo-slot .ph-icon { width:52px; height:52px; opacity:.75; background:var(--orange-tint); border-radius:50%; padding:13px; }

/* ── TRUST CARDS ── */
.trust-cards-section { position:relative; z-index:6; margin-top:-100px; padding:0 0 70px; }
.trust-cards-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.trust-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 20px 24px; text-align:center; box-shadow:0 20px 46px rgba(20,24,31,.12); transition:box-shadow .25s, transform .25s, border-color .25s; }
.trust-card:hover { transform:translateY(-4px); box-shadow:0 24px 52px rgba(20,24,31,.16); border-color:rgba(255,106,19,.35); }
.tc-num { display:block; font-family:var(--font-d); font-size:34px; font-weight:900; color:var(--orange-deep); line-height:1; margin-bottom:12px; transition:transform .3s ease; }
.trust-card:hover .tc-num { transform:scale(1.12); }
.trust-card h3 { font-family:var(--font-d); font-size:14px; font-weight:800; color:var(--ink); margin-bottom:8px; line-height:1.3; }
.trust-card p { font-size:12px; color:var(--ink-soft); line-height:1.55; }

/* ── MOQ PRICING ── */
.moq-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:1400px){ .moq-grid { grid-template-columns:repeat(3,1fr); } }
.moq-tier { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; position:relative; cursor:pointer; transition:transform .25s, box-shadow .25s, border-color .25s; }
.moq-tier:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(20,24,31,.10); border-color:rgba(255,106,19,.4); }
.moq-selected { border-color:var(--orange); border-width:1.5px; box-shadow:0 8px 22px rgba(255,106,19,.10); }
.moq-selected:hover { box-shadow:0 14px 32px rgba(255,106,19,.14); }
.moq-badge { position:absolute; top:12px; right:12px; background:var(--orange); color:#FFF; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:100px; }
.moq-tier-header { padding:28px 22px 16px; text-align:center; border-bottom:1px solid var(--line); }
.moq-qty { font-family:var(--font-d); font-size:38px; font-weight:900; color:var(--orange-deep); display:block; line-height:1; }
.moq-unit { font-size:13px; color:var(--ink-soft); font-weight:500; margin-top:4px; display:block; }
.moq-tier-body { padding:20px 22px; flex:1; }
.moq-label { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:14px; letter-spacing:.5px; font-family:var(--font-d); }
.moq-features { list-style:none; display:flex; flex-direction:column; gap:9px; }
.moq-features li { font-size:13px; color:var(--ink-soft); line-height:1.5; display:flex; gap:7px; }
.moq-features li::before { content:'✓'; color:var(--orange-deep); font-weight:700; flex-shrink:0; }
.moq-tier-footer { padding:0 22px 22px; }
.moq-service { display:block; text-align:center; font-size:10px; font-weight:700; color:var(--orange-deep); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.moq-tier:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

/* ── PRODUCTS ── */
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.product-card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .25s, box-shadow .25s; position:relative; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(20,24,31,.10); }
.product-card .img-wrap { width:100%; aspect-ratio:1/1; background:var(--mist-card); display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:13px; overflow:hidden; }
.product-card .img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.product-card:hover .img-wrap img { transform:scale(1.06); }
.product-card .body { padding:24px 24px 0; flex:1; display:flex; flex-direction:column; }
.product-card h2 { font-family:var(--font-d); font-size:20px; font-weight:800; color:var(--ink); }
.product-card .desc { color:var(--ink-soft); font-size:14px; line-height:1.65; margin-bottom:16px; overflow-wrap:break-word; word-break:break-word; }
.b2b-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.meta-tag { font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--mist-card); border-radius:100px; padding:4px 10px; }
.meta-tag.cert { color:var(--orange-deep); background:var(--orange-tint); border:1px solid rgba(255,106,19,.3); }
.product-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px; }
.product-highlights { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:8px; }
.product-highlights li { font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.product-highlights li::before { content:'✓'; color:var(--orange-deep); font-weight:700; flex-shrink:0; }
.stat-item { background:var(--mist-card); border-radius:var(--rs); padding:8px 12px; }
.stat-item .s-label { font-size:10px; color:var(--slate); font-weight:600; letter-spacing:.5px; display:block; }
.stat-item .s-val { font-size:14px; font-weight:700; color:var(--ink); font-family:var(--font-d); }
.product-card .card-footer { padding:0 24px 24px; }
.btn-card { display:block; width:100%; padding:13px 0; text-align:center; background:transparent; color:var(--orange-deep); border:1.5px solid var(--orange); border-radius:var(--rs); font-size:14px; font-weight:700; transition:all .2s; font-family:var(--font-b); }
.btn-card:hover { background:var(--orange); color:#FFF; }
.compliance-note { font-size:11.5px; color:var(--slate); line-height:1.5; padding:0 24px 20px; border-top:1px dashed var(--line); margin-top:14px; padding-top:12px; }

/* ── APPLICATIONS / SOLUTIONS ── */
.solutions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.solution-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s; display:flex; flex-direction:column; }
.solution-card:hover { transform:translateY(-4px); border-color:var(--orange); box-shadow:0 12px 32px rgba(20,24,31,.08); }
.solution-media { width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--mist-card); } /* 原4:3改成16:9，图片占比更小，给下面的文案留出更多视觉重量 */
.solution-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.solution-card:hover .solution-media img { transform:scale(1.06); }
.solution-media .photo-slot { border-radius:0; min-height:0; height:100%; }
.solution-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.solution-card h3 { font-family:var(--font-d); font-size:17px; font-weight:800; margin-bottom:10px; color:var(--ink); }
.solution-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; flex:1; } /* 文案变长后字号/行高微调，保证阅读舒适度 */
.solution-products { display:flex; gap:6px; flex-wrap:wrap; }
.solution-tag { font-size:11px; font-weight:600; color:var(--orange-deep); background:var(--orange-sub); border:1px solid rgba(255,106,19,.25); border-radius:100px; padding:3px 10px; }

/* ── OEM SECTION ── */
.oem-split { display:flex; align-items:center; gap:64px; }
.oem-content { flex:1; max-width:50%; }
.oem-content h2 { font-family:var(--font-d); font-size:32px; font-weight:800; margin-bottom:18px; line-height:1.2; color:var(--ink); }
.oem-content > p { color:var(--ink-soft); font-size:15px; line-height:1.75; margin-bottom:32px; }
.oem-steps { list-style:none; display:flex; flex-direction:column; gap:0; }
.oem-step { display:flex; align-items:flex-start; gap:16px; padding-bottom:20px; position:relative; }
.oem-step:not(:last-child)::before { content:''; position:absolute; left:15px; top:32px; bottom:0; width:1px; background:var(--line); }
.oem-step .num { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--orange-sub); border:1.5px solid var(--orange); color:var(--orange-deep); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; font-family:var(--font-d); position:relative; z-index:1; }
.oem-step .step-body { padding-top:5px; }
.oem-step .step-title { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.oem-step .step-time { font-size:12px; color:var(--slate); }
.oem-image { flex:1; max-width:50%; }
.img-banner { width:100%; aspect-ratio:21/6; background:var(--mist); border:1px solid var(--line); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:14px; text-align:center; padding:20px; margin-top:40px; }

/* ── WAVE TIMELINE ── */
.wave-panel { background:transparent; border:none; box-shadow:none; padding:44px 20px 30px; margin-top:36px; }
.wave-track { position:relative; height:280px; margin-top:0; padding:0 40px; box-sizing:border-box; }
.wave-track svg { position:absolute; inset:0; width:100%; height:100%; }
.wave-track svg path { opacity:0; stroke-dashoffset:60; transition:opacity 1s ease .1s, stroke-dashoffset 1.6s ease .1s; }
.wave-panel.in-view .wave-track svg path { opacity:0.7; stroke-dashoffset:0; }
.wave-circle { position:absolute; width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--orange), var(--orange-deep)); border:3px solid #fff; color:#fff; font-family:var(--font-d); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; transform:translate(-50%,-50%) scale(var(--pop,0)); opacity:var(--pop,0); box-shadow:0 6px 16px rgba(232,90,0,.35), 0 0 0 3px var(--orange-tint); z-index:2; transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s ease, box-shadow .25s ease; transition-delay:var(--d,0s); }
.wave-panel.in-view .wave-circle { --pop:1; }
.wave-circle:hover { transform:translate(-50%,-50%) scale(1.22); box-shadow:0 12px 26px rgba(232,90,0,.45), 0 0 0 5px var(--orange-tint); z-index:5; transition-delay:0s; }
.wave-panel.in-view .wave-circle:hover + .wave-label { transform:translateX(-50%) translateY(-5px) scale(1.05); border-color:var(--orange); box-shadow:0 16px 32px rgba(20,24,31,.16); transition-delay:0s; }
.wave-circle::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--orange); opacity:0; }
.wave-panel.in-view .wave-circle::after { animation:waveRing 1.4s ease-out; animation-delay:calc(var(--d,0s) + .1s); }
@keyframes waveRing { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }
.wave-label { position:absolute; width:172px; text-align:center; transform:translateX(-50%) translateY(8px); opacity:0; z-index:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:0 8px 20px rgba(20,24,31,.07); cursor:pointer; transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease; transition-delay:var(--d,0s); }
.wave-panel.in-view .wave-label { opacity:1; transform:translateX(-50%) translateY(0); }
.wave-panel.in-view .wave-label:hover { transform:translateX(-50%) translateY(-5px) scale(1.05); border-color:var(--orange); box-shadow:0 16px 32px rgba(20,24,31,.16); z-index:5; transition-delay:0s; }
.wave-label .wl-title { font-size:12.5px; font-weight:800; color:var(--ink); font-family:var(--font-d); margin-bottom:4px; line-height:1.35; }
.wave-label .wl-time { font-size:11px; color:var(--orange-deep); font-weight:600; line-height:1.45; }
.wave-mobile { display:none; }
@media(prefers-reduced-motion: reduce){ .wave-circle,.wave-label,.wave-track svg path,.wave-circle::after{ transition:none!important; animation:none!important; opacity:1!important; transform:translate(-50%,-50%) scale(1)!important; } .wave-label{ transform:translateX(-50%) translateY(0)!important; } }

/* ── MARKET OPPORTUNITY / ASSET LIBRARY ── */
.market-row { display:flex; align-items:center; gap:56px; padding:48px 0; border-bottom:1px solid var(--line); }
.market-row:last-of-type { border-bottom:none; }
.market-row.reverse { flex-direction:row-reverse; }
.market-text { flex:1; }
.market-image { flex:1; }
.market-num { font-family:var(--font-d); font-size:13px; font-weight:800; color:var(--orange); letter-spacing:.1em; }
.market-text h3 { font-family:var(--font-d); font-size:24px; font-weight:800; color:var(--ink); margin:10px 0 16px; }
.market-text p { font-size:14.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:14px; }
.market-points { list-style:none; display:flex; flex-direction:column; gap:10px; margin:18px 0 20px; }
.market-points li { font-size:13.5px; color:var(--ink-soft); line-height:1.6; display:flex; gap:9px; align-items:flex-start; }
.market-points li::before { content:'✓'; color:var(--orange-deep); font-weight:700; flex-shrink:0; }
.market-used-in { font-size:13px; color:var(--slate); font-weight:600; padding-top:14px; border-top:1px dashed var(--line); }
.market-used-in a { color:var(--orange-deep); font-weight:700; }
.market-used-in a:hover { text-decoration:underline; }

/* ── FACTORY / ABOUT (首页版，图片墙，和About独立页的.factory-grid占位版不同) ── */
.factory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:44px; }
.factory-item { position:relative; overflow:hidden; border-radius:var(--rs); aspect-ratio:4/3; transition:box-shadow .3s, transform .3s; }
.factory-item:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,24,31,.12); }
.factory-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.factory-item:hover img { transform:scale(1.04); }
.factory-item .cap { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(20,24,31,.7)); color:#fff; font-size:12px; font-weight:600; padding:20px 14px 12px; }

/* ── CAPABILITIES / BUYER CONCERNS ── */
.cap-grid, .cap-grid-3, .cap-grid-2 { display:grid; gap:34px; }
.cap-grid { grid-template-columns:repeat(4,1fr); }
.cap-grid-3 { grid-template-columns:repeat(3,1fr); }
.cap-grid-2 { grid-template-columns:1fr 1fr; }
.rd-case-grid { grid-template-columns:repeat(4,1fr); }
.cap-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; transition:box-shadow .25s, transform .25s, border-color .25s; }
.cap-card:hover { border-color:rgba(255,106,19,.35); box-shadow:0 16px 36px rgba(20,24,31,.09); transform:translateY(-4px); }
.resource-link { display:inline-flex; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--orange-deep); border-bottom:1.5px solid var(--orange); padding-bottom:2px; }
.resource-link:hover { color:var(--orange); }
.cap-icon { width:46px; height:46px; margin-bottom:18px; color:var(--orange-deep); display:flex; align-items:center; justify-content:center; background:var(--orange-tint); border-radius:12px; padding:11px; box-sizing:border-box; transition:transform .3s ease, background .3s ease, color .3s ease; }
.cap-card:hover .cap-icon { transform:scale(1.1) rotate(-4deg); background:var(--orange); color:#fff; }
.cap-icon svg { width:100%; height:100%; }
.cap-card h3 { font-family:var(--font-d); font-size:18px; font-weight:800; margin-bottom:12px; line-height:1.3; color:var(--ink); }
.cap-card p { font-size:14px; color:var(--ink-soft); line-height:1.7; }
.cap-card-numbered { border-top:3px solid var(--orange); padding-top:26px; }
.cap-num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; font-family:var(--font-d); font-weight:800; font-size:15px; margin-bottom:18px; flex-shrink:0; }
.cap-grid-5-row { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.cap-grid-5-row + .cap-grid-5-row { margin-top:28px; }
.cap-grid-5-row2 { grid-template-columns:repeat(2,1fr); }
.cap-grid-5-row .cap-card-numbered { height:100%; }

/* ── TESTIMONIALS ── */
/* 制造能力速览板块：标签页切换版（点击标签，下方左图右文联动切换） */
.mfgcap-tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.mfgcap-tab-btn { font-family:var(--font-b); font-size:14px; font-weight:700; color:var(--ink-soft); background:var(--mist); border:1px solid transparent; border-radius:8px; padding:14px 20px; cursor:pointer; transition:background .18s, color .18s, transform .12s; white-space:nowrap; }
.mfgcap-tab-btn:hover { background:var(--orange-tint); color:var(--orange-deep); }
.mfgcap-tab-btn.active { background:var(--ink); color:#fff; }
.mfgcap-panels { position:relative; }
.mfgcap-panel { display:none; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; animation:mfgcapFadeIn .35s ease; }
.mfgcap-panel.active { display:grid; }
@keyframes mfgcapFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.mfgcap-panel-photo { aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--mist); }
.mfgcap-panel-photo .photo-slot { width:100%; height:100%; border-radius:0; }
.mfgcap-panel-body h3 { font-family:var(--font-d); font-size:26px; font-weight:800; color:var(--ink); margin-bottom:16px; line-height:1.3; }
.mfgcap-panel-body p { font-size:15px; color:var(--ink-soft); line-height:1.8; }
@media (max-width:900px) {
  .mfgcap-panel { grid-template-columns:1fr; gap:24px; }
  .mfgcap-tab-btn { font-size:13px; padding:11px 16px; }
  /* 手机端标签页改成横向滑动，避免6个标签纵向堆叠占用大量高度 */
  .mfgcap-tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:8px; padding-bottom:6px; margin:0 -4% 32px; padding-left:4%; padding-right:4%; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mfgcap-tabs::-webkit-scrollbar { display:none; }
  .mfgcap-tab-btn { flex-shrink:0; scroll-snap-align:start; }
}

/* 买家反馈板块顶部的信任统计条：评分 / 准时交付率 / 出口国家数 */
.trust-stats-row { display:flex; justify-content:center; gap:72px; flex-wrap:wrap; margin:0 0 48px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.trust-stat { text-align:center; }
.trust-stat-icon-num { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; }
.trust-stat-stars { display:flex; gap:2px; color:#F5A623; }
.trust-stat-stars svg { width:18px; height:18px; }
.trust-stat-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; }
.trust-stat-icon svg { width:100%; height:100%; }
.trust-stat-icon-check { color:#2AAE6C; }
.trust-stat-icon-globe { color:var(--orange); }
.trust-stat-num { font-family:var(--font-d); font-size:32px; font-weight:900; color:var(--ink); line-height:1; }
.trust-stat-num-green { color:#2AAE6C; }
.trust-stat-num-orange { color:var(--orange-deep); }
.trust-stat-label { font-size:13px; color:var(--ink-soft); }
@media (max-width:640px) { .trust-stats-row { gap:36px; } }

/* Hero 手机端适配：
   1. 取消 min-height 撑满视口高度的设定——桌面端这么做是为了给背景图留够展示空间，
      但手机窄屏下背景图本来就几乎被文字和渐变盖住看不见，硬撑高度只会在文字下方
      留一大截空白。改成让 .hero 完全跟着 .hero-text 的实际内容走。
   2. 渐变蒙层从"左深右浅的横向渐变"改成"整体偏深的纵向渐变"——横向渐变是给宽屏
      左文右图的版式设计的，窄屏下文字占满整行宽度，横向渐变会导致背景要么全黑
      要么露出一条没意义的图片窄边，改成上下渐变，让深色背景显得是有意为之的设计，
      而不是"背景图坏掉了"的观感。
   3. 缩小文字区上下留白——手机端不需要给下方 Trust 卡片区的负margin叠加效果留安全间距
      （trust-cards-section 在 640px 以下已经把 margin-top 归零，不再需要116px那么多缓冲）*/
@media (max-width:768px) {
  .hero { min-height:0; }
  /* 之前顶部到底部都接近全黑(90%~97%不透明)，图片基本被完全盖住，看不出"沉浸大图"的感觉。
     改成顶部只留轻微暗度让图片细节能透出来，往下逐渐加深，到文字区域保证白字清晰可读。 */
  .hero-overlay { background:linear-gradient(180deg, rgba(15,18,24,.35) 0%, rgba(15,18,24,.55) 38%, rgba(15,18,24,.88) 68%, rgba(15,18,24,.96) 100%); }
  .hero-text { min-height:0; padding:0 6% 44px; max-width:100%; justify-content:flex-end; min-height:min(88vh, 620px); }
  .hero-title { font-size:32px; }
  .hero-desc { max-width:100%; }
}

.testi-scroll { display:flex; gap:20px; overflow-x:auto; padding:6px 4px 20px; cursor:grab; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.testi-scroll:active { cursor:grabbing; }
.testi-scroll::-webkit-scrollbar { height:6px; }
.testi-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:10px; }
.testi-card { flex:0 0 auto; width:320px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; user-select:none; }
.testi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.testi-name { font-family:var(--font-d); font-size:17px; font-weight:800; color:var(--ink); display:block; }
.testi-flag { width:24px; height:18px; border-radius:3px; flex-shrink:0; object-fit:cover; box-shadow:0 0 0 1px rgba(20,24,31,.08); margin-top:2px; }
.testi-role { font-size:12.5px; color:var(--slate); margin-top:3px; margin-bottom:18px; }
.testi-quote { font-size:14px; color:var(--ink-soft); line-height:1.85; }
.concern-label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--slate); margin-bottom:6px; }
.answer-label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:6px; margin-top:2px; }
.photo-card { position:relative; border-radius:var(--r); overflow:hidden; transition:box-shadow .25s, transform .25s; aspect-ratio:4/3; }
.photo-card:hover { box-shadow:0 16px 36px rgba(20,24,31,.18); transform:translateY(-4px); }
.photo-card .photo-slot { position:absolute; inset:0; border-radius:0; border:1px solid var(--line); min-height:0; }
.photo-card-overlay { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:36px 20px 18px; background:linear-gradient(to top, rgba(10,12,16,.82) 0%, rgba(10,12,16,.45) 55%, rgba(10,12,16,0) 100%); }
.photo-card-overlay h3 { font-family:var(--font-d); font-size:17px; font-weight:800; margin-bottom:6px; line-height:1.3; color:#fff; }
.photo-card-overlay p { font-size:13px; color:rgba(255,255,255,.85); line-height:1.55; }

/* ── QUALITY + CERTS ── */
.qc-split { display:flex; align-items:flex-start; gap:60px; }
.qc-vision { flex:0 0 34%; }
.qc-vision h2 { font-family:var(--font-d); font-size:32px; font-weight:800; margin-bottom:22px; line-height:1.2; color:var(--ink); }
.qc-vision p { font-size:15px; color:var(--ink-soft); line-height:1.8; }
.qc-process { flex:1; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.certs-table { min-width:520px; width:100%; border-collapse:collapse; margin-top:8px; }
.certs-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); font-weight:700; padding:10px 14px; border-bottom:2px solid var(--line); }
.certs-table td { padding:14px 14px; font-size:14px; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.certs-table td.cname { font-weight:700; color:var(--ink); font-family:var(--font-d); }
.certs-table td.status-tbc { color:var(--slate); font-style:italic; }
.certs-table tr.placeholder td { color:var(--slate); font-style:italic; }
.status-check { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--orange-sub); }
.status-check svg { width:14px; height:14px; stroke:var(--orange-deep); }
.certs-note { margin-top:16px; font-size:12.5px; color:var(--slate); background:var(--mist); border:1px dashed var(--line); padding:12px 14px; border-radius:var(--rs); }

/* ── PARTNERSHIP / PROCESS FLOW ── */
.flow-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px; }
.flow-step { text-align:center; }
.flow-num { width:44px; height:44px; border-radius:50%; background:var(--orange); color:#fff; font-family:var(--font-d); font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.flow-step h4 { font-family:var(--font-d); font-size:16px; font-weight:800; margin-bottom:8px; color:var(--ink); }
.flow-step p { font-size:13.5px; color:var(--ink-soft); line-height:1.6; }

/* ── FAQ ── */
.faq-container { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:8px; }
.faq-cat-title { display:block; font-family:var(--font-d); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--orange-deep); margin-bottom:16px; }
.faq-item { border-bottom:1px solid var(--line); padding:14px 0; }
.faq-item summary { cursor:pointer; font-size:14.5px; font-weight:700; color:var(--ink); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:color .2s ease; }
.faq-item summary:hover { color:var(--orange-deep); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .faq-toggle { flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); position:relative; transition:transform .3s ease, border-color .3s ease, background .3s ease; }
.faq-item summary .faq-toggle::before, .faq-item summary .faq-toggle::after { content:''; position:absolute; background:var(--ink-soft); transition:background .3s ease; }
.faq-item summary .faq-toggle::before { top:50%; left:5px; right:5px; height:1.5px; transform:translateY(-50%); }
.faq-item summary .faq-toggle::after { left:50%; top:5px; bottom:5px; width:1.5px; transform:translateX(-50%); transition:opacity .3s ease; }
.faq-item[open] summary .faq-toggle { transform:rotate(180deg); border-color:var(--orange); background:var(--orange-tint); }
.faq-item[open] summary .faq-toggle::after { opacity:0; }
.faq-item[open] summary .faq-toggle::before { background:var(--orange-deep); }
.faq-item p { font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin-top:10px; }

/* ── CONTACT / FORM ── */
.form-wrap { max-width:100%; margin:0; }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start; }
.contact-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; position:sticky; top:88px; }
.contact-avatar { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--mist-card); color:var(--slate); font-size:11px; margin-bottom:16px; }
.contact-avatar .avatar-icon { width:26px; height:26px; }
.contact-avatar .avatar-icon svg { width:100%; height:100%; }
.contact-name { font-family:var(--font-d); font-size:18px; font-weight:800; color:var(--ink); }
.contact-role { font-size:13px; color:var(--orange-deep); font-weight:700; margin-top:2px; margin-bottom:16px; }
.contact-quote { font-size:13.5px; color:var(--ink-soft); line-height:1.65; font-style:italic; border-left:2px solid var(--orange); padding-left:14px; margin-bottom:22px; }
.contact-channels { display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.channel-row { display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--ink-soft); }
.channel-row strong { color:var(--ink); display:block; font-size:13.5px; }
.channel-icon { font-size:18px; flex-shrink:0; width:28px; text-align:center; }
.contact-response { font-size:12.5px; color:var(--orange-deep); font-weight:700; border-top:1px dashed var(--line); padding-top:14px; }
.form-header { text-align:center; margin-bottom:40px; }
.form-header p { color:var(--ink-soft); font-size:15px; margin-top:10px; }
.b2b-form { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:36px; box-shadow:0 20px 50px rgba(20,24,31,.06); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-label { display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.form-control { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--rs); font-family:var(--font-b); font-size:14px; background:var(--mist); }
.form-control:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-sub); background:#fff; }
.checkbox-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.checkbox-row label { font-size:13.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; font-weight:500; }
.btn-submit { width:100%; background:var(--orange); color:#fff; padding:16px; border:none; border-radius:var(--rs); font-family:var(--font-b); font-weight:700; font-size:15px; cursor:pointer; transition:background .2s; margin-top:8px; }
.btn-submit:hover { background:var(--orange-deep); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; }
.form-feedback { margin-top:14px; padding:12px 16px; border-radius:var(--rs); font-size:13px; line-height:1.5; display:none; }
.form-feedback:not(:empty) { display:block; }
.form-feedback-success { background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; }
.form-feedback-error { background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }

/* 首页 WhatsApp 悬浮按钮带呼吸动画（比内页更醒目） */
.wa-float { width:58px; height:58px; animation:wa-pulse 2.6s ease-in-out infinite; }
.wa-float:hover { transform:scale(1.08); animation-play-state:paused; }
@keyframes wa-pulse { 0%,100% { box-shadow:0 8px 24px rgba(0,0,0,.2), 0 0 0 0 rgba(37,211,102,.45); } 50% { box-shadow:0 8px 24px rgba(0,0,0,.2), 0 0 0 10px rgba(37,211,102,0); } }

/* ── RESPONSIVE（首页专属断点） ── */
@media(max-width:1360px){ .side-toc { display:none; } }
@media(max-width:1100px){
  .hero-text{max-width:100%} .hero-overlay{background:linear-gradient(180deg, rgba(20,24,31,.55) 0%, rgba(20,24,31,.92) 55%, rgba(20,24,31,.96) 100%)}
  .moq-grid,.factory-grid,.cap-grid,.cap-grid-3,.cap-grid-2,.cap-grid-5-row,.product-grid,.solutions-grid,.rd-case-grid{grid-template-columns:repeat(2,1fr)}
  .oem-split,.qc-split,.contact-grid,.market-row,.market-row.reverse{flex-direction:column}
  .oem-content,.oem-image,.qc-vision{max-width:100%}
  .faq-container{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{position:static}
  .trust-cards-grid{ grid-template-columns:repeat(3,1fr); }
  .trust-cards-section{ margin-top:-70px; }
  .wave-desktop{ display:none; }
  .wave-mobile{ display:flex; }
  .rd-flow{ flex-direction:column; gap:20px; }
  .rd-flow::before{ display:none; }
  .rd-flow-step{ display:flex; align-items:center; gap:12px; text-align:left; }
  .rd-flow-step .circle{ margin:0; flex:none; }
  .img-banner{ aspect-ratio:16/9; }
}
@media(max-width:768px){
  .product-grid,.solutions-grid{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* Solutions（Your Market. Our Products.）卡片手机端优化：
     配图区从 4:3（较高较方）改成 16:9（更扁），大幅压缩图片占用的屏幕高度；
     标题/正文/标签字号一并调小，整卡更紧凑，一屏能看到更多内容，不会显得"图片占满全屏、内容看不全" */
  .solution-media { aspect-ratio:16/9; }
  .solution-body { padding:16px 18px; }
  .solution-card h3 { font-size:15px; margin-bottom:6px; }
  .solution-card p { font-size:12.5px; line-height:1.55; margin-bottom:10px; }
  .solution-tag { font-size:10px; padding:2px 8px; }

  .trust-cards-grid{grid-template-columns:repeat(2,1fr)}
  .trust-cards-section{margin-top:0; padding-top:40px;}
  .testi-card{ width:78vw; }
}
@media(max-width:520px){
  .hero-title{font-size:36px}
  .flow-steps,.moq-grid,.factory-grid,.cap-grid,.cap-grid-3,.cap-grid-2,.cap-grid-5-row,.rd-case-grid{grid-template-columns:1fr}
  /* trust-cards（首页Hero下方"8+ Years / 12 Production Lines..."这组数据卡片）
     之前手机上会退到单列，5张卡片每张都占满一整屏高度，要滑很久才看完，
     视觉上显得又大又空。改成手机上也保持2列，卡片内边距和数字字号一并收紧，
     信息密度更合理，不用滑半天。 */
  .trust-cards-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .trust-card{ padding:16px 10px 14px; }
  .tc-num{ font-size:24px; margin-bottom:6px; }
  .trust-card h3{ font-size:12px; margin-bottom:4px; }
  .trust-card p{ font-size:10.5px; line-height:1.4; }
  .rd-flow-images{ grid-template-columns:repeat(2,1fr); }
}

/* Latest Articles（首页新增板块） */
.latest-articles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.latest-article-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.latest-article-card:hover { border-color:var(--orange); box-shadow:0 12px 28px rgba(20,24,31,.08); transform:translateY(-3px); }
.la-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep); background:var(--orange-sub); border-radius:100px; padding:4px 11px; margin-bottom:14px; }
.latest-article-card h3 { font-family:var(--font-d); font-size:17px; font-weight:800; color:var(--ink); line-height:1.35; margin-bottom:10px; }
.latest-article-card p { font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px; }
.la-meta { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--slate); padding-top:14px; border-top:1px dashed var(--line); }
.la-link { color:var(--orange-deep); font-weight:700; }
@media(max-width:900px){ .latest-articles-grid { grid-template-columns:1fr; } }