:root { 
    --brand-color: #00247d; 
    --brand-light: #e6ebf5; 
    --text-dark: #0f172a; 
    --text-main: #334155; 
    --text-gray: #64748b; 
    --bg-body: #f8fafc; 
    --border-color: #e2e8f0; 
}

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased; 
}

/* =========================================
   顶部导航与公共布局
========================================= */
.top-accent-bar { height: 4px; background: linear-gradient(90deg, var(--brand-color) 0%, #38bdf8 100%); }
header { background-color: #ffffff; border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.03); position: sticky; top: 0; z-index: 100; }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 12px 5%; }
.logo img { height: 45px; display: block; }
.header-intelligence { font-size: 0.95rem; font-weight: 700; color: var(--text-gray); text-transform: uppercase; letter-spacing: 1px; border-left: 2px solid var(--border-color); padding-left: 15px; }

/* =========================================
   文章主体容器
========================================= */
.insight-wrapper { padding: 40px 0; }
.insight-container { max-width: 1100px; width: 92%; margin: 0 auto; display: block; }
.breadcrumb-nav { font-size: 0.85rem; color: var(--text-gray); margin-bottom: 1.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.breadcrumb-nav a { color: var(--brand-color); text-decoration: none; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.insight-main { background: #ffffff; padding: 4rem 7%; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f5f9; }

/* =========================================
   文章头部信息 (H1, Meta, Tags)
========================================= */
h1.insight-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 2.5rem; 
    color: var(--text-dark); 
    margin-top: 0;
    margin-bottom: 1rem; 
    letter-spacing: -0.8px; 
    line-height: 1.2;
    font-weight: 800;
}
.insight-meta { display: flex; align-items: center; gap: 1.5rem; font-size: 0.95rem; color: var(--text-gray); border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 3rem; }
.tag-cloud a { background: #f1f5f9; color: #475569; text-decoration: none; font-size: 0.85rem; font-weight: 600; padding: 8px 16px; border-radius: 30px; border: 1px solid #e2e8f0; transition: all 0.3s ease; }
.tag-cloud a::before { content: '#'; margin-right: 4px; color: #94a3b8; }
.tag-cloud a:hover { background: var(--brand-color); color: #ffffff; border-color: var(--brand-color); transform: translateY(-2px); }

/* =========================================
   正文排版 (H2, H3, P, A, IMG)
========================================= */
.html-content { font-size: 1.15rem; line-height: 1.85; color: #1e293b; }

.html-content h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.75rem; 
    color: var(--text-dark); 
    margin-top: 2.5rem; 
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.html-content h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.35rem; 
    color: var(--text-dark);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.4;
}

.html-content p {
    font-family: 'Inter', sans-serif !important;
    line-height: 1.8; 
    font-size: 1.15rem; 
    color: #334155; 
    letter-spacing: 0.2px; 
}

.html-content img.insight-inline-image { display: block; max-width: 100%; width: auto; height: auto; margin: 2.5rem auto; border-radius: 8px; box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12); border: 1px solid var(--border-color); clear: both; }
@media (min-width: 769px) { .html-content img.insight-inline-image { max-width: 650px; } }

.clearfix::after { content: ""; clear: both; display: table; }

/* 动态内链样式 */
.html-content a.auto-product-link {
    color: var(--brand-color);
    text-decoration: none;
    border-bottom: 1px dashed #94a3b8; 
    padding-bottom: 1px;
    transition: all 0.2s ease;
}
.html-content a.auto-product-link:hover {
    color: #0f172a;
    border-bottom: 1px solid var(--brand-color); 
    background-color: #f1f5f9; 
}

/* =========================================
   列表 (OL / UL)
========================================= */
.html-content ol, .html-content ul { 
    background: #f8fafc; 
    padding: 25px 25px 25px 50px; 
    border-radius: 8px; 
    margin-bottom: 30px; 
}
.html-content ol { border-left: 4px solid #3b82f6; box-shadow: inset 0 0 0 1px #e2e8f0; }
.html-content ul { border: 1px solid var(--border-color); }

.html-content ol li,
.html-content ul li {
    font-size: 1.15rem; 
    color: #334155;
    line-height: 1.8;   
    margin-bottom: 12px;
}
.html-content ol li:last-child,
.html-content ul li:last-child { margin-bottom: 0; }

.html-content ol li strong,
.html-content ul li strong {
    color: #0f172a;     
    font-weight: 700;
}

/* =========================================
   FAQ 区块
========================================= */
.faq-styled-section { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 30px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); margin-bottom: 40px; }
.faq-styled-section h3 { font-size: 1.15rem !important; color: #0f172a !important; margin-top: 0 !important; margin-bottom: 12px !important; border-bottom: none !important; padding-bottom: 0 !important; display: flex; align-items: flex-start; font-weight: 700;}
.faq-styled-section p { color: #475569; margin-bottom: 25px !important; padding-left: 15px; border-left: 3px solid #cbd5e1; line-height: 1.6;}
.faq-styled-section p:last-child { margin-bottom: 0 !important; }
.faq-styled-section strong { color: #3b82f6; }
.faq-item { margin-bottom: 25px; }
.faq-item:last-child { margin-bottom: 0; }

/* =========================================
   底部转化横幅 (CDMO Banner)
========================================= */
.cdmo-banner-premium { position: relative; margin-top: 4rem; background: linear-gradient(135deg, #020617 0%, #0f172a 40%, #1e3a8a 100%); border-radius: 16px; padding: 3rem 4rem; display: flex; align-items: center; justify-content: space-between; overflow: hidden; box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); }
.banner-content { display: flex; align-items: flex-start; gap: 20px; position: relative; z-index: 2; max-width: 70%; }
.banner-icon svg { width: 40px; height: 40px; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 8px; border-radius: 8px; }
.banner-text h3 { margin: 0 0 0.5rem 0; font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.banner-text p { margin: 0; color: #cbd5e1; font-size: 1.1rem; line-height: 1.5; }
.banner-text .sub-text { margin-top: 0.5rem; font-size: 0.95rem; color: #94a3b8; }
.banner-text .highlight { color: #38bdf8; font-weight: 600; background: rgba(56, 189, 248, 0.1); padding: 2px 6px; border-radius: 4px; }
.banner-btn-glow { position: relative; z-index: 2; background: #fff; color: #0f172a; padding: 1rem 2rem; font-weight: 700; border-radius: 50px; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }
.banner-btn-glow:hover { background: #38bdf8; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(56, 189, 248, 0.4); }
.banner-btn-glow .arrow { display: inline-block; transition: transform 0.2s; margin-left: 5px; }
.banner-btn-glow:hover .arrow { transform: translateX(4px); }
.decoration-circle { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 1; }
.circle-1 { width: 300px; height: 300px; background: rgba(56, 189, 248, 0.15); top: -100px; right: -50px; }
.circle-2 { width: 200px; height: 200px; background: rgba(99, 102, 241, 0.15); bottom: -50px; left: -50px; }

/* =========================================
   页脚 (Footer)
========================================= */
.minimal-footer { background-color: #ffffff; border-top: 1px solid var(--border-color); padding: 30px 5%; margin-top: 60px; color: var(--text-gray); font-size: 0.95rem; }
.minimal-footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.minimal-footer strong { color: var(--brand-color); }
.minimal-footer a { color: var(--text-gray); text-decoration: none; font-weight: 600; }

/* =========================================
   移动端适配 (Media Queries)
========================================= */
@media (max-width: 768px) { 
    .header-intelligence { display: none; } 
    .insight-main { padding: 2rem 1.5rem; } 
    
    /* 缩小移动端标题和正文，防止拥挤 */
    h1.insight-title { font-size: 2rem; } 
    .html-content h2 { font-size: 1.5rem; margin-top: 2rem; }
    .html-content h3 { font-size: 1.25rem; margin-top: 1.5rem; }
    .html-content p, 
    .html-content ol li, 
    .html-content ul li { font-size: 1.05rem; line-height: 1.7; }
    
    .html-content img.insight-inline-image { max-width: 100% !important; float: none !important; margin: 20px 0 !important; display: block; } 
    
    .cdmo-banner-premium { flex-direction: column; text-align: center; padding: 2.5rem 1.5rem; } 
    .banner-content { flex-direction: column; align-items: center; max-width: 100%; margin-bottom: 2rem; } 
    .banner-btn-glow { width: 100%; text-align: center; } 
    .minimal-footer-container { flex-direction: column; text-align: center; } 
}