.elementor-31361 .elementor-element.elementor-element-db62488{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-db62488.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-31361 .elementor-element.elementor-element-d1ba205{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-76c0e88{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-7f768ba{width:var( --container-widget-width, 100.08% );max-width:100.08%;--container-widget-width:100.08%;--container-widget-flex-grow:0;}.elementor-31361 .elementor-element.elementor-element-7f768ba.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-31361 .elementor-element.elementor-element-e2467bd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-dd3fc5b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-d05a2fc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-c3795d1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-cf96d14{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-e55b9bd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-8027d7d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-b1657f1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-31361 .elementor-element.elementor-element-183be72{width:var( --container-widget-width, 100.076% );max-width:100.076%;--container-widget-width:100.076%;--container-widget-flex-grow:0;}.elementor-31361 .elementor-element.elementor-element-183be72.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-31361 .elementor-element.elementor-element-721a989{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}@media(min-width:769px){.elementor-31361 .elementor-element.elementor-element-db62488{--width:106.084%;}}/* Start custom CSS for text-editor, class: .elementor-element-6048f0a *//* =========================================
   Reset & Base Styles
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1e293b; 
    background-color: #f8fafc; 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    /* 核心修改 1：放宽最大容器宽度，给图片更多展示空间 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* =========================================
   Typography
   ========================================= */
h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
}

p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #475569;
}

strong {
    color: #0f172a;
    font-weight: 600;
}

/* =========================================
   Hero Section
   ========================================= */
.hero-section {
    padding: 5rem 0 4rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.badge {
    display: inline-block;
    background-color: #eff6ff;
    color: #2563eb; 
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
}

/* =========================================
   Rule Layout (Grid/Flex)
   ========================================= */
main {
    padding: 5rem 0;
}

.rule-card {
    display: flex;
    align-items: center;
    gap: 3rem; /* 稍微缩小间距，把空间让给图片 */
    margin-bottom: 5rem;
}

.rule-card.reverse {
    flex-direction: row-reverse;
}

/* 核心修改 2：调整左右比例 */
.rule-content {
    flex: 0.8; /* 文本区域变窄 */
    max-width: 500px; /* 限制文本最大宽度，防止阅读困难 */
}

.rule-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.image-wrapper {
    flex: 1.4; /* 图片区域占据更大的比例 (约 60%+) */
    width: 100%;
}

/* =========================================
   Image Styles
   ========================================= */
.content-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: block;
    object-fit: contain; /* 确保整张图片完整显示 */
    background-color: #ffffff; /* 防止透明PNG出现底色问题 */
}

/* =========================================
   Technical Callout Boxes
   ========================================= */
.example-box, .formula-box {
    background-color: #ffffff;
    border-left: 4px solid #2563eb;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
    color: #334155;
}

.formula-box {
    background-color: #0f172a;
    border-left: 4px solid #38bdf8;
    color: #f8fafc;
}

.formula {
    margin: 0;
    color: #cbd5e1;
}

.formula strong {
    display: block;
    font-size: 1.25rem;
    color: #ffffff;
    margin-top: 0.5rem;
    font-family: monospace;
}

.divider {
    border: 0;
    height: 1px;
    background: #e2e8f0;
    margin: 4rem auto;
    width: 100%;
}

/* =========================================
   Footer
   ========================================= */
.site-footer {
    background-color: #ffffff;
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

.site-footer p {
    margin: 0;
    font-size: 0.875rem;
}

.site-footer a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* =========================================
   Responsive Design (Mobile/Tablet)
   ========================================= */
/* 核心修改 3：在 1024px 时就切换为上下结构，防止笔记本屏幕图片太小 */
@media (max-width: 1024px) {
    h1 {
        font-size: 2.25rem;
    }
    
    .container {
        padding: 0 24px;
    }

    .rule-card, .rule-card.reverse {
        flex-direction: column;
        gap: 3rem;
    }
    
    .rule-content {
        max-width: 100%; /* 移动端文本占满全宽 */
    }

    .image-wrapper {
        order: -1; /* 让图片在移动端显示在文字上方 */
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-76a16f1 *//* =========================================
   Core Advantages Table Section
   ========================================= */
.advantages-section {
    margin: 5rem 0;
}

.advantages-section h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-description {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    font-size: 1.125rem;
    color: #64748b;
}

/* 响应式表格容器，防止移动端表格撑破页面 */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.advantages-table {
    width: 100%;
    min-width: 700px; /* 保证表格在小屏幕上也能保持合理的列宽，通过滚动条查看 */
    border-collapse: collapse;
    text-align: left;
}

/* 表头样式 */
.advantages-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* 单元格样式 */
.advantages-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
    line-height: 1.6;
}

/* 去掉最后一行的底边框 */
.advantages-table tbody tr:last-child td {
    border-bottom: none;
}

/* 鼠标悬停交互效果 */
.advantages-table tbody tr {
    transition: background-color 0.2s ease;
}

.advantages-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* 左侧 Feature 栏特殊样式 */
.feature-title {
    font-weight: 600;
    color: #0f172a !important;
    width: 30%; /* 控制左侧列宽占比 */
}

/* 针对化学警告文本的特殊样式 */
.warning-text {
    color: #ef4444; /* 柔和的红色警示 */
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-block;
    margin-top: 0.25rem;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-7f768ba *//* =========================================
   页面 CTA 模块 (信息回到主页面)
   ========================================= */
.engineer-cta {
    background-color: #0f172a;
    color: #ffffff;
    padding: 4rem 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 4rem auto;
    max-width: 1400px;
    width: 100%;
    box-sizing: border-box;
}

.engineer-cta h2 {
    color: #ffffff;
    margin-bottom: 1rem;
}

.engineer-cta p {
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 1.5rem auto;
}

.engineer-profile {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    margin: 0 auto 2.5rem auto;
}

.engineer-profile p {
    margin: 0;
    color: #e2e8f0;
}

.engineer-profile strong {
    color: #ffffff;
}

.engineer-profile .role {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.primary-btn {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 1rem 3rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.primary-btn:hover {
    background-color: #1d4ed8;
}

/* =========================================
   弹窗 (Modal) 基础样式
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.8); 
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-window {
    background-color: #ffffff;
    width: 90%;
    max-width: 600px; /* 改为纯表单后，弹窗不需要那么宽了 */
    border-radius: 12px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-window {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 2rem;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.close-btn:hover {
    color: #0f172a;
}

.modal-header {
    background-color: #f8fafc;
    padding: 2rem 2rem 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
}

.modal-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #0f172a;
}

.modal-header p {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
}

.modal-body {
    padding: 2rem;
}

/* =========================================
   强制 Contact Form 7 样式 (解决输入框不可见的问题)
   ========================================= */
.cf7-custom-grid .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 强制给所有输入框和多行文本框添加边框和背景 */
.cf7-custom-grid input[type="text"],
.cf7-custom-grid input[type="email"],
.cf7-custom-grid input[type="tel"],
.cf7-custom-grid textarea,
.cf7-custom-grid .wpcf7-text,
.cf7-custom-grid .wpcf7-textarea {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #cbd5e1 !important; /* 清晰的网格边框 */
    background-color: #f8fafc !important; /* 浅灰色背景 */
    border-radius: 6px !important;
    font-size: 1rem !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 鼠标点击输入框时的焦点状态 */
.cf7-custom-grid input:focus,
.cf7-custom-grid textarea:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* 针对 CF7 的提交按钮做美化 */
.cf7-custom-grid input[type="submit"] {
    width: 100% !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    padding: 1rem !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin-top: 1rem !important;
}

.cf7-custom-grid input[type="submit"]:hover {
    background-color: #1e293b !important;
}

/* 调整表单内的文字标签颜色 */
.cf7-custom-grid label {
    font-weight: 600;
    color: #334155;
    font-size: 0.875rem;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e78ac9b *//* =========================================
   Technical Parameters Section
   ========================================= */
.tech-specs-section {
    max-width: 1400px;
    margin: 4rem auto;
    color: #1e293b;
    font-family: 'Inter', -apple-system, sans-serif;
}

.tech-specs-section h2 {
    font-size: 2.25rem;
    color: #0f172a;
    margin-bottom: 1rem;
    border-bottom: 3px solid #2563eb;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.data-basis {
    background-color: #f8fafc;
    border-left: 4px solid #94a3b8;
    padding: 1rem 1.5rem;
    color: #475569;
    font-size: 1rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.spec-block {
    margin-bottom: 4rem;
}

.spec-block h3 {
    font-size: 1.5rem;
    color: #0f172a;
    margin-bottom: 1.25rem;
}

.sub-heading {
    font-size: 1rem;
    font-weight: 400;
    color: #64748b;
}

/* =========================================
   Responsive Data Tables
   ========================================= */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.data-table {
    width: 100%;
    min-width: 800px; /* Ensures table doesn't compress too much on mobile */
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.data-table th {
    background-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
    line-height: 1.5;
}

/* Zebra Striping */
.data-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Hover Effect */
.data-table tbody tr:hover {
    background-color: #eff6ff;
    transition: background-color 0.2s ease;
}

/* Make the first column (Parameter/Condition) stand out */
.row-header {
    font-weight: 600;
    color: #0f172a !important;
    width: 25%;
}

/* =========================================
   Technical Notes & Callout Boxes
   ========================================= */
.tech-note {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.formula-box p {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

.formula-box p:last-child {
    margin-bottom: 0;
}

.shortcut-box {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}

.shortcut-box h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #1e40af;
    font-size: 1.125rem;
}

.shortcut-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.shortcut-box li {
    font-size: 0.95rem;
    color: #1e3a8a;
    background-color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-5d4ae35 *//* =========================================
   Recommended Shaft Section Specifics
   ========================================= */

/* 为需要避免的材质添加警示性的暗红色高亮 */
.warning-item {
    color: #b91c1c !important; /* 深红色 */
}

/* 确保表格内的符号和文字排版优雅 */
.data-table td {
    line-height: 1.6;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0875c08 *//* =========================================
   Application Fields Section
   ========================================= */
.applications-section {
    padding: 5rem 0;
    background-color: #f8fafc; /* 浅色背景，让白色卡片更凸显 */
}

.applications-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.applications-section h2 {
    font-size: 2.25rem;
    color: #0f172a;
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.125rem;
    margin-bottom: 3rem;
}

/* 核心：CSS Grid 布局 (4列2排) */
.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制桌面端 4 列等分 */
    gap: 1.5rem; /* 卡片之间的间距 */
}

/* 卡片样式 */
.app-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 鼠标悬停时卡片微微浮起 */
.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* 图片容器：固定比例 16:9，防止图片高度不一致导致排版混乱 */
.app-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-color: #e2e8f0; /* 如果图片没加载出来的占位底色 */
    overflow: hidden;
}

.app-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满容器且不变形 */
    transition: transform 0.5s ease;
}

/* 鼠标悬停时图片缓慢放大 */
.app-card:hover .app-image img {
    transform: scale(1.08);
}

/* 内容区域 */
.app-content {
    padding: 1.5rem;
    flex-grow: 1; /* 让内容较少的卡片也能向下撑满高度对齐 */
}

.app-content h3 {
    font-size: 1.125rem;
    color: #0f172a;
    margin-top: 0;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.app-content p {
    font-size: 0.9rem; /* 在 4 列布局中，稍小的字号更显精致 */
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   响应式设计 (Tablet & Mobile)
   ========================================= */

/* 平板端：改为 2 列 */
@media (max-width: 1100px) {
    .app-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机端：改为 1 列 */
@media (max-width: 640px) {
    .app-grid {
        grid-template-columns: 1fr;
    }
    
    .applications-section h2 {
        font-size: 1.875rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-043db9f *//* =========================================
   Application CTA Banner (应用底部横幅)
   ========================================= */
.application-cta {
    padding: 0 0 5rem 0;
    background-color: #f8fafc; /* 与应用板块背景融为一体 */
}

.application-cta .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.cta-inner {
    background-color: #0f172a;
    border-radius: 12px;
    padding: 3rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cta-text {
    flex: 1;
}

.cta-text h3 {
    color: #ffffff;
    font-size: 1.875rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.cta-text p {
    color: #94a3b8;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    max-width: 700px;
}

.engineer-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    color: #e2e8f0;
    font-size: 0.875rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981; /* 绿色的在线状态圆点 */
    border-radius: 50%;
    margin-right: 0.75rem;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.engineer-badge strong {
    color: #ffffff;
    margin-right: 0.25rem;
}

.cta-action {
    flex-shrink: 0;
}

/* 按钮样式与轻微的呼吸动效，吸引点击 */
.primary-btn {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.primary-btn:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
}

/* 响应式：平板和手机端变为上下结构 */
@media (max-width: 900px) {
    .cta-inner {
        flex-direction: column;
        text-align: center;
        padding: 2.5rem 2rem;
    }
    
    .cta-text p {
        margin: 0 auto 1.5rem auto;
    }
}

/* =========================================
   弹窗与表单网格样式 (确保绝对清晰)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.8); 
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-window {
    background-color: #ffffff;
    width: 90%;
    max-width: 600px; /* 适合纯表单的舒适宽度 */
    border-radius: 12px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-window {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 2rem;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.close-btn:hover {
    color: #0f172a;
}

.modal-header {
    background-color: #f8fafc;
    padding: 2rem 2rem 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
}

.modal-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #0f172a;
}

.modal-header p {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
}

.modal-body {
    padding: 2rem;
}

/* =========================================
   强化版 Contact Form 7 网格样式
   ========================================= */
.cf7-custom-grid .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.cf7-custom-grid input[type="text"],
.cf7-custom-grid input[type="email"],
.cf7-custom-grid input[type="tel"],
.cf7-custom-grid textarea,
.cf7-custom-grid .wpcf7-text,
.cf7-custom-grid .wpcf7-textarea {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    border: 1px solid #cbd5e1 !important; /* 清晰的浅色边框 */
    background-color: #f8fafc !important; /* 微弱的底色，区分输入区与背景 */
    border-radius: 6px !important;
    font-size: 1rem !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

.cf7-custom-grid input:focus,
.cf7-custom-grid textarea:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.cf7-custom-grid input[type="submit"] {
    width: 100% !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    padding: 1rem !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin-top: 1rem !important;
}

.cf7-custom-grid input[type="submit"]:hover {
    background-color: #1e293b !important;
}

.cf7-custom-grid label {
    font-weight: 600;
    color: #334155;
    font-size: 0.875rem;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-6556e21 *//* =========================================
   Troubleshooting & Failure Cards Section (Compact Version)
   ========================================= */
.troubleshooting-section {
    padding: 3rem 0; /* 缩小整体上下留白 */
    background-color: #f8fafc; 
}

.troubleshooting-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.troubleshooting-section h2 {
    font-size: 2rem;
    color: #0f172a;
    margin-bottom: 1.5rem; /* 缩小标题下方间距 */
    text-align: left;
}

/* 故障卡片外框 */
.fc-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1.25rem; /* 缩小卡片之间的垂直间距 */
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* 顶部标题区 */
.fc-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem; /* 缩小标题栏内边距 */
    border-bottom: 1px solid #e2e8f0;
    background-color: #ffffff;
}

.fc-num {
    background-color: #1e293b; 
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem; 
    width: 28px; /* 缩小编号方块 */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.fc-header h3 {
    margin: 0;
    font-size: 1.125rem; 
    color: #0f172a;
    font-weight: 600;
}

/* 卡片内容区 (左右分栏) */
.fc-body {
    display: flex;
    padding: 1.25rem 1.5rem; /* 缩小主体内边距 */
    gap: 1.5rem; /* 缩小左图右文的间距 */
}

/* 左侧：图片占位区 */
.fc-image {
    flex: 0 0 32%; /* 图片宽度稍微缩窄，留给文字更多空间 */
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1; 
    border-radius: 6px;
    min-height: 220px; /* 大幅降低图片框的最小高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
}

.fc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* 右侧：原因与解决方案 */
.fc-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 缩小红绿盒子之间的间距 */
}

/* 原因与方案盒子基础样式 */
.fc-box {
    padding: 1rem 1.25rem; /* 缩小红绿盒子的内边距 */
    border-radius: 6px;
}

.fc-box h4 {
    margin-top: 0;
    margin-bottom: 0.5rem; /* 标题和列表贴得更近 */
    font-size: 0.85rem; 
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fc-box ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #334155;
    font-size: 0.9rem; /* 列表字号微调 */
    line-height: 1.5; /* 收紧行高 */
}

.fc-box li {
    margin-bottom: 0.35rem; /* 缩小列表项之间的间距 */
}

.fc-box li:last-child {
    margin-bottom: 0;
}

/* 红色原因区 (CAUSES) */
.fc-causes {
    background-color: #fef2f2; 
}

.fc-causes h4 {
    color: #dc2626; 
}

/* 绿色解决区 (REMEDIES) */
.fc-remedies {
    background-color: #f0fdf4; 
}

.fc-remedies h4 {
    color: #16a34a; 
}

/* =========================================
   响应式设计 (平板与手机端)
   ========================================= */
@media (max-width: 900px) {
    .fc-body {
        flex-direction: column;
    }
    
    .fc-image {
        min-height: 180px; /* 移动端进一步压缩图片高度 */
    }
}

@media (max-width: 640px) {
    .fc-header {
        padding: 1rem;
    }
    
    .fc-body {
        padding: 1rem;
        gap: 1rem;
    }
    
    .fc-box {
        padding: 1rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-ba9024f *//* =========================================
   Procurement & Selection Section
   ========================================= */
.procurement-section {
    padding: 3rem 0;
    background-color: #ffffff;
}

.procurement-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.procurement-section h2 {
    font-size: 2rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* 采购参数清单卡片 */
.procurement-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    padding: 2rem 2.5rem;
}

.parameter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* 列表项之间的间距 */
}

.parameter-list li {
    position: relative;
    padding-left: 2rem;
    color: #475569;
    font-size: 1rem;
    line-height: 1.5;
}

/* 自定义蓝色科技感选中打钩 (Checkmark) */
.parameter-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.parameter-list strong {
    color: #0f172a;
    font-weight: 600;
}

/* =========================================
   24小时服务承诺呼出框 (Callout Box)
   ========================================= */
.service-commitment {
    display: flex;
    align-items: flex-start;
    background-color: #0f172a; /* 深蓝色强调背景 */
    color: #e2e8f0;
    padding: 1.75rem 2.5rem;
    border-radius: 0 0 8px 8px;
    gap: 1.25rem;
}

.commitment-icon {
    color: #38bdf8; /* 亮蓝色时钟图标 */
    flex-shrink: 0;
    margin-top: 2px;
}

.commitment-text p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.commitment-text strong {
    color: #ffffff;
    font-size: 1.05rem;
    margin-right: 0.25rem;
}

/* =========================================
   响应式设计 (平板与手机端)
   ========================================= */
@media (max-width: 768px) {
    .procurement-card {
        padding: 1.5rem;
    }
    
    .service-commitment {
        padding: 1.5rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .parameter-list li {
        font-size: 0.95rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-debcfef *//* =========================================
   Drawing Submission CTA Section
   ========================================= */
.drawing-cta-section {
    padding: 0 0 4rem 0; /* 紧接在上一部分下方 */
    background-color: #ffffff;
}

.drawing-cta-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.drawing-cta-box {
    background-color: #ffffff;
    border: 2px dashed #cbd5e1; /* 虚线边框，暗示“上传文件”的交互感 */
    border-radius: 8px;
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.drawing-cta-box:hover {
    border-color: #3b82f6; /* 悬停时边框变蓝 */
    background-color: #f8fafc;
}

.drawing-text {
    flex: 1;
}

.drawing-text h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: #0f172a;
}

.drawing-text p {
    margin: 0;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
}

.drawing-action {
    flex-shrink: 0;
}

/* 带有图标的上传按钮 */
.upload-btn {
    display: inline-flex;
    align-items: center;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.upload-btn .btn-icon {
    margin-right: 0.75rem;
}

.upload-btn:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 900px) {
    .drawing-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        gap: 1.5rem;
    }
}
/* =========================================
   强制覆盖主题的按钮样式 (解决灰色按钮问题)
   ========================================= */
.drawing-cta-box .upload-btn {
    background-color: #2563eb !important; /* 强制高亮蓝色背景 */
    color: #ffffff !important; /* 强制纯白文字 */
    border: none !important;
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important; /* 让字母大写更显专业 */
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2) !important; /* 添加一点蓝色发光阴影，更吸引点击 */
}

.drawing-cta-box .upload-btn:hover {
    background-color: #1d4ed8 !important; /* 鼠标悬停变深蓝 */
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
    color: #ffffff !important;
}

/* 确保 SVG 图标颜色正确并与文字对齐 */
.drawing-cta-box .upload-btn .btn-icon {
    margin-right: 0.75rem !important;
    stroke: #ffffff !important; 
    width: 20px !important;
    height: 20px !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-183be72 *//* =========================================
   FAQ Accordion Section (风箱式折叠面板)
   ========================================= */
.faq-section {
    padding: 4rem 0;
    background-color: #ffffff;
}

.faq-section .container {
    max-width: 1000px; /* 限制最大宽度让阅读更舒适 */
    margin: 0 auto;
    padding: 0 24px;
}

.faq-section h2 {
    font-size: 2.25rem;
    color: #0f172a;
    margin-bottom: 2rem;
    text-align: center;
}

/* =========================================
   原生 details/summary 样式定制
   ========================================= */
.accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.accordion-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 标题行 (Summary) */
.accordion-title {
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    border-radius: 8px;
    list-style: none; /* 移除默认的黑色三角形 */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 隐藏 Safari 自带的箭头 */
.accordion-title::-webkit-details-marker {
    display: none;
}

/* 展开状态的标题栏样式 */
details[open] .accordion-title {
    color: #2563eb; /* 展开时标题变蓝 */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid #e2e8f0;
}

/* =========================================
   自定义加减号图标 (纯 CSS 绘制)
   ========================================= */
.accordion-icon {
    flex-shrink: 0;
    margin-left: 1rem;
    width: 20px;
    height: 20px;
    position: relative;
}

/* 加号的横线和竖线 */
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #64748b;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* 横线 */
.accordion-icon::before {
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
}

/* 竖线 */
.accordion-icon::after {
    top: 0;
    left: 9px;
    width: 2px;
    height: 20px;
}

/* 悬停和展开时的图标颜色 */
.accordion-title:hover .accordion-icon::before,
.accordion-title:hover .accordion-icon::after {
    background-color: #2563eb;
}

details[open] .accordion-icon::before,
details[open] .accordion-icon::after {
    background-color: #2563eb;
}

/* 展开时，竖线旋转隐藏，变成减号 */
details[open] .accordion-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

details[open] .accordion-icon::before {
    transform: rotate(180deg);
}

/* =========================================
   折叠面板内容区
   ========================================= */
.accordion-content {
    padding: 1.5rem;
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    animation: fadeInDown 0.3s ease-in-out; /* 简单的展开动画 */
}

.accordion-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.accordion-content p:last-child {
    margin-bottom: 0;
}

/* 针对 Q5 和 Q8 优化的列表样式 */
.faq-list {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.faq-list li {
    margin-bottom: 0.5rem;
}

.faq-list strong {
    color: #1e293b;
}

/* 简单的渐入动画 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   FAQ 内部表格样式 (Q4 专用)
   ========================================= */
.faq-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin: 1.25rem 0;
}

.faq-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.faq-table th {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.faq-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
}

.faq-table tbody tr:last-child td {
    border-bottom: none;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-530c012 *//* =========================================
   About Company & Final CTA Section
   ========================================= */
.about-company-section {
    background-color: #0f172a; /* 深色背景压轴 */
    padding: 6rem 0;
    color: #e2e8f0;
}

.about-company-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.about-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    background-color: rgba(255, 255, 255, 0.03); /* 轻微的内发光背景框 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4rem;
}

/* 左侧文本区 */
.about-content {
    flex: 1;
    max-width: 800px;
}

.company-badge {
    display: inline-block;
    background-color: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.about-content h2 {
    color: #ffffff;
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.about-content p {
    color: #94a3b8;
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.about-content p:last-child {
    margin-bottom: 0;
}

/* 右侧按钮区 */
.about-action {
    flex-shrink: 0;
}

/* 强制覆盖主题的醒目蓝色按钮 */
.final-cta-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    padding: 1.25rem 2.5rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
}

.final-cta-btn svg {
    margin-left: 0.75rem !important;
    transition: transform 0.3s ease !important;
}

.final-cta-btn:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4) !important;
}

/* 悬停时箭头向右轻微移动的动效 */
.final-cta-btn:hover svg {
    transform: translateX(4px) !important;
}

/* 响应式调整 (平板与手机端) */
@media (max-width: 1024px) {
    .about-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 3rem 2rem;
        gap: 2.5rem;
    }
    
    .about-content h2 {
        font-size: 1.875rem;
    }
}/* End custom CSS */