/* page-oem.css — OEM页专属组件（只在OEM页加载） */

/* ══════════════════════════════════════
   OEM 页专属组件
══════════════════════════════════════ */
.oem-hero { padding:48px 0 60px; background:var(--paper); position:relative; overflow:hidden; margin-top:68px; }
.oem-hero::after { content:''; position:absolute; top:-140px; right:-160px; width:600px; height:600px; background:radial-gradient(circle, rgba(255,106,19,.10) 0%, transparent 70%); pointer-events:none; }
.oem-hero-split { display:flex; align-items:center; gap:56px; position:relative; z-index:1; }
.oem-hero-text { flex:1; max-width:52%; }
.oem-hero-text h1 { font-size:36px; font-weight:800; line-height:1.2; color:var(--ink); margin-bottom:16px; letter-spacing:-.3px; }
.oem-hero-text .about-hero-lead { margin:0 0 26px; text-align:left; max-width:100%; }
.oem-hero-media { flex:1; max-width:48%; aspect-ratio:4/3; }

.wide-banner { aspect-ratio:21/7; border-radius:var(--r); overflow:hidden; }
.wide-banner img, .wide-banner .photo-slot { width:100%; height:100%; object-fit:cover; }

/* OEM vs ODM 对比卡 */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.compare-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; position:relative; transition:transform .25s, box-shadow .25s, border-color .25s; }
.compare-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(20,24,31,.08); border-color:rgba(255,106,19,.35); }
.compare-recommended { border-color:var(--orange); border-width:1.5px; }
.compare-badge { position:absolute; top:-1px; right:24px; background:var(--orange); color:#FFF; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:0 0 6px 6px; }
.compare-tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep); background:var(--orange-sub); border:1px solid rgba(255,106,19,.25); border-radius:100px; padding:5px 12px; margin-bottom:16px; }
.compare-card h3 { font-family:var(--font-d); font-size:22px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.compare-card .sub { font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px; }
.compare-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.compare-list li { font-size:13.5px; color:var(--ink-soft); line-height:1.55; display:flex; gap:9px; align-items:flex-start; }
.compare-list li::before { content:'✓'; color:var(--orange-deep); font-weight:700; flex-shrink:0; }
.compare-fit { font-size:12.5px; color:var(--slate); border-top:1px dashed var(--line); padding-top:14px; }
.compare-fit strong { color:var(--ink); }

/* PROCESS — 左侧步骤列表点击联动右侧大图（OEM/Quality 通用交互组件） */
.process-interactive { display:flex; gap:48px; align-items:stretch; }
.process-hint { font-size:12.5px; font-weight:600; color:var(--orange-deep); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.process-hint svg { width:14px; height:14px; flex-shrink:0; }
.process-list { flex:1; max-width:52%; display:flex; flex-direction:column; gap:10px; }
.process-list-item { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r); cursor:pointer; background:rgba(255,255,255,.55); border:1px solid var(--line); transition:background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.process-list-item:hover { background:var(--paper); border-color:rgba(255,106,19,.35); transform:translateX(2px); }
.process-list-item.active { background:var(--paper); border-color:var(--orange); box-shadow:0 12px 30px rgba(255,106,19,.12); }
.process-list-item .process-num { width:36px; height:36px; flex-shrink:0; margin:0; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; font-family:var(--font-d); font-weight:800; font-size:13px; background:var(--mist-card); border:1.5px solid var(--line); color:var(--ink-soft); transition:background .2s, border-color .2s, color .2s; }
.process-list-item.active .process-num { background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 4px 12px rgba(255,106,19,.35); }
.process-list-content { flex:1; }
.process-list-content h4 { font-family:var(--font-d); font-size:15px; font-weight:800; color:var(--ink); margin:0; line-height:1.3; transition:margin .2s, color .2s; }
.process-list-item.active .process-list-content h4 { margin-bottom:8px; color:var(--orange-deep); }
.process-list-content p { font-size:13px; color:var(--ink-soft); line-height:1.65; max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
.process-list-item.active .process-list-content p { max-height:140px; opacity:1; }
.process-visual { flex:1; max-width:48%; position:sticky; top:100px; align-self:stretch; min-height:420px; }
.process-chevron { width:20px; height:20px; flex-shrink:0; align-self:center; color:var(--slate); transition:transform .25s, color .25s; }
.process-chevron svg { width:100%; height:100%; }
.process-list-item.active .process-chevron { color:var(--orange-deep); transform:rotate(90deg); }
.process-visual .photo-slot { display:none; border:1px solid var(--line); background:radial-gradient(circle at 30% 20%, var(--orange-tint) 0%, var(--mist) 65%); border-radius:18px; box-shadow:0 24px 56px rgba(20,24,31,.09); gap:16px; }
.process-visual .photo-slot.active { display:flex; }
.process-visual .ph-icon-wrap { width:68px; height:68px; border-radius:50%; background:#fff; border:1px solid rgba(255,106,19,.25); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(255,106,19,.18); }
.process-visual .ph-icon-wrap svg { width:28px; height:28px; color:var(--orange-deep); }
.process-visual .ph-step { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-deep); }
.process-visual .ph-title { font-family:var(--font-d); font-size:19px; font-weight:800; color:var(--ink); }

/* OEM页联系卡片图标（圆形icon版，和首页contact的emoji版区分开，避免同名class样式冲突） */
.oem-channel-row { display:flex; align-items:center; gap:13px; font-size:13.5px; color:var(--ink-soft); padding:8px 0; }
.oem-channel-icon { flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--orange-tint); color:var(--orange-deep); display:flex; align-items:center; justify-content:center; }
.oem-channel-icon svg { width:17px; height:17px; }
.oem-channel-text { display:flex; flex-direction:column; gap:2px; line-height:1.4; }
.oem-channel-text strong { color:var(--ink); font-size:13px; font-weight:700; }
.oem-channel-value { color:var(--ink-soft); font-size:13.5px; }

@media(max-width:1000px){
  .compare-grid { grid-template-columns:1fr; }
  .oem-hero-split { flex-direction:column; }
  .oem-hero-text, .oem-hero-media { max-width:100%; }
  .oem-hero-media { aspect-ratio:16/9; order:-1; }
  .process-interactive { flex-direction:column; }
  .process-list, .process-visual { max-width:100%; }
  .process-visual { position:static; aspect-ratio:16/9; }
}

/* OEM页专属：细线左边框风格的能力卡片(和首页立体卡片版cap-card区分开,避免同名class冲突) */
.oem-cap-grid, .oem-cap-grid-3, .oem-cap-grid-2 { display:grid; gap:32px; }
.oem-cap-grid { grid-template-columns:repeat(4,1fr); }
.oem-cap-grid-3 { grid-template-columns:repeat(3,1fr); }
.oem-cap-grid-2 { grid-template-columns:1fr 1fr; }
.oem-cap-card { border-left:2px solid var(--line); padding-left:22px; transition:border-color .25s, transform .25s; }
.oem-cap-card:hover { border-color:var(--orange); transform:translateX(4px); }
.oem-cap-icon { width:36px; height:36px; margin-bottom:14px; color:var(--orange-deep); display:block; }
.oem-cap-icon svg { width:100%; height:100%; }
.oem-cap-card h3 { font-family:var(--font-d); font-size:17px; font-weight:800; margin-bottom:10px; line-height:1.3; color:var(--ink); }
.oem-cap-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
@media(max-width:1000px){ .oem-cap-grid,.oem-cap-grid-3 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .oem-cap-grid,.oem-cap-grid-3,.oem-cap-grid-2 { grid-template-columns:1fr; } }