:root {
    --primary: #003366;
    --accent: #FF6600;
    --bg-light: #F8FAFC;
    --bg-white: #FFFFFF;
    --text-main: #1E293B;
    --text-muted: #64748B;
    --border: #e2e8f0;
    --shadow: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 15px 45px rgba(0,0,0,0.1);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "PingFang SC","Microsoft YaHei",sans-serif; color:var(--text-main); background:var(--bg-light); line-height:1.7; }
header {
    background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
    position:fixed; width:100%; top:0; z-index:1000; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.nav-container {
    max-width:1240px; margin:0 auto; display:flex; justify-content:space-between;
    align-items:center; padding:14px 24px;
}
.logo { font-size:22px; font-weight:800; color:var(--primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.logo span { color:var(--accent); }
.nav-menu { display:flex; list-style:none; gap:4px; }
.nav-menu a { text-decoration:none; color:var(--text-main); font-weight:500; font-size:14.5px; padding:8px 16px; border-radius:6px; transition:var(--transition); }
.nav-menu a:hover , .nav-menu a.active { color:var(--primary); background:#eef4fb; font-weight:700; }
.mobile-btn { display:none; font-size:22px; cursor:pointer; color:var(--primary); padding:8px; background:none; border:none; }
.breadcrumb-bar {
    background:#fff; border-bottom:1px solid var(--border); padding:10px 24px;
    margin-top:66px; position:sticky; top:64px; z-index:99;
}
.breadcrumb-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-muted); }
.breadcrumb-inner a { color:var(--text-muted); text-decoration:none; }
.breadcrumb-inner a:hover { color:var(--primary); }
.product-hero { background:#fff; padding:44px 24px 48px; border-bottom:1px solid var(--border); }
.hero-inner { max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; }

/* 左侧单图 */
.product-image { flex:0 0 420px; max-width:100%; }
.main-image-wrapper {
    width:100%; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden;
    background:#f8fafc; border:1px solid var(--border); cursor:zoom-in;
    display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.main-image-wrapper img { width:85%; height:85%; object-fit:contain; transition: transform 0.4s; }
.main-image-wrapper:hover img { transform: scale(1.05); }

/* 右侧信息 */
.product-summary { flex:1; min-width:280px; }
.product-badge { display:inline-block; background:#eef4fb; color:var(--primary); padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:700; margin-bottom:14px; }
.product-summary h1 { font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--primary); margin-bottom:10px; }
.subtitle { font-size:14.5px; color:var(--text-muted); margin-bottom:20px; }
/* 胶囊式关键参数 */
.capsule-params { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.capsule {
    background:#f0f4fb; color:var(--primary); padding:6px 16px; border-radius:24px;
    font-size:13.5px; font-weight:600; border:1px solid #dce3f0;
    display:flex; align-items:center; gap:6px;
}
.capsule i { color:var(--accent); font-size:14px; }
.price-inquiry-box {
    background:linear-gradient(135deg,#fffdf7,#fff8f0); border:2px dashed var(--accent);
    border-radius:var(--radius); padding:20px 22px; margin-top:10px;
    display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between;
}
.btn-inquiry {
    display:inline-flex; align-items:center; gap:8px; padding:12px 28px;
    background:var(--accent); color:#fff; border:none; border-radius:8px;
    font-weight:700; font-size:15px; text-decoration:none; transition:var(--transition);
}
.btn-inquiry:hover { background:#e55a00; transform:translateY(-2px); }
.btn-secondary {
    display:inline-flex; align-items:center; gap:6px; padding:10px 20px;
    background:#fff; color:var(--primary); border:2px solid var(--primary);
    border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; transition:var(--transition);
}
.btn-secondary:hover { background:#f0f6fd; }

/* 主体内容 */
.main-content { max-width:1240px; margin:0 auto; padding:36px 24px 50px; display:grid; grid-template-columns:1fr 340px; gap:32px; }
.detail-area { min-width:0; }
.overview-section {
    background:#fff; border-radius:var(--radius); padding:32px 28px;
    margin-bottom:24px; box-shadow:var(--shadow); border:1px solid var(--border);
}
.overview-section h2 { font-size:24px; font-weight:700; color:var(--primary); margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid #eef2f8; }
.overview-section h3 { font-size:18px; font-weight:700; color:var(--text-main); margin:24px 0 12px; }
.overview-section p { font-size:14.5px; color:#475569; line-height:1.8; margin-bottom:12px; }
.overview-section ul { list-style:none; padding:0; }
.overview-section ul li { position:relative; padding-left:22px; margin-bottom:8px; font-size:14px; color:#475569; line-height:1.7; }
.overview-section ul li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--accent); transform:rotate(45deg); }

.param-table { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:10px; }
.param-table th, .param-table td { padding:11px 14px; text-align:left; border-bottom:1px solid #eef2f8; }
.param-table th { background:#f8fafc; color:var(--primary); font-weight:700; width:35%; }
.highlight-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin:12px 0; }
.highlight-card {
    background:linear-gradient(135deg,#f8fafc,#eef4fb); border-radius:var(--radius-sm);
    padding:18px 14px; text-align:center; border:1px solid #e2e8f0;
}
.highlight-card .icon-circle {
    width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:18px;
}
.highlight-card .title { font-weight:700; color:var(--primary); margin-bottom:4px; }
.highlight-card .desc { font-size:12px; color:var(--text-muted); }

.app-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.app-tag { background:#fff; border:1px solid var(--border); border-radius:20px; padding:8px 18px; font-size:13px; }

/* 侧边栏 */
.sidebar { min-width:0; }
.sidebar-card {
    background:#fff; border-radius:var(--radius); padding:22px 18px;
    margin-bottom:18px; box-shadow:var(--shadow); border:1px solid var(--border);
}
.sidebar-card h4 { font-size:16px; font-weight:700; color:var(--primary); margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid #eef2f8; }
.sidebar-card .info-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #eef2f8; font-size:13.5px; }
.sidebar-card .info-row .label { color:var(--text-muted); }
.sidebar-card .info-row .value { font-weight:600; }
.tech-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.tech-tag { background:#eef4fb; color:var(--primary); padding:4px 11px; border-radius:16px; font-size:11.5px; }
.btn-sidebar-cta { display:block; width:100%; padding:12px; text-align:center; background:var(--accent); color:#fff; border-radius:8px; font-weight:700; margin-top:14px; text-decoration:none; }
.btn-sidebar-cta:hover { background:#e55a00; }
.case-list { list-style:none; margin-top:10px; }
.case-list li { margin-bottom:8px; }
.case-list a { font-size:13.5px; color:var(--text-main); text-decoration:none; display:flex; align-items:center; gap:6px; transition:var(--transition); }
.case-list a:hover { color:var(--primary); }
.case-list i { color:var(--accent); font-size:12px; }

footer { background:#0f172a; color:#94a3b8; padding:60px 24px 30px; margin-top:30px; }
.footer-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:36px; }
.footer-grid h4 { color:#fff; margin-bottom:18px; }
.footer-bottom { text-align:center; margin-top:40px; padding-top:18px; border-top:1px solid #334155; font-size:12.5px; }

@media (max-width:1024px) {
    .main-content { grid-template-columns:1fr; }
    .sidebar { order:-1; }
    .product-image { flex:0 0 300px; }
}
@media (max-width:768px) {
    .nav-menu { display:none; position:absolute; top:62px; left:0; width:100%; background:#fff; flex-direction:column; padding:16px; box-shadow:0 12px 28px rgba(0,0,0,0.12); }
    .nav-menu.active { display:flex; }
    .nav-menu li { width:100%; }
    .mobile-btn { display:block; }
    .hero-inner { flex-direction:column; }
    .product-image { width:100%; }
    .main-image-wrapper { aspect-ratio:4/3; }
}