/*
Theme Name: 华企在线
Theme URI: https://www.mtbyy.com
Author: 华企在线
Author URI: https://www.mtbyy.com
Description: 华企在线企业官网主题 - 以技术驱动增长，以流程构建效率。蓝图白×技术网格风格，理性紧凑的企业级SaaS官网设计。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: huaqi-online
Tags: business, corporate, saas, custom-menu, featured-images, translation-ready
*/

/* CSS Variables */
:root {
    --canvas-bg: #fbfbfc;
    --card-bg: #ffffff;
    --light-gray: #f0f2f5;
    --text-primary: #1a1f2e;
    --text-secondary: #5f6368;
    --border-color: #e8eaed;
    --accent-orange: #ec652b;
    --accent-orange-hover: #d95a24;
    --light-blue: #e8f0fe;
    --light-green: #e6f4ea;
    --status-green: #16ca2e;
    --footer-bg: #1a1f2e;
    --shadow-light: rgba(0,0,0,0.04) 0px 2px 8px;
    --shadow-hover: rgba(0,0,0,0.08) 0px 2px 12px;
    --grid-pattern: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--canvas-bg);
    background-image: var(--grid-pattern);
    background-size: 12px 12px;
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text-primary); line-height: 1.15; }
h1 { font-size: 48px; letter-spacing: -0.5px; }
h2 { font-size: 36px; letter-spacing: -0.03em; }
h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
p { color: var(--text-secondary); line-height: 1.5; }
a { color: var(--accent-orange); text-decoration: none; }

/* Navigation */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--canvas-bg);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: border-color 0.2s ease;
}
.navbar.scrolled { border-bottom-color: #d0d4d8; }
.nav-container {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav-logo { font-size: 16px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 8px; list-style: none; }
.nav-link {
    font-size: 14px; font-weight: 400; color: var(--text-secondary);
    text-decoration: none; padding: 8px 16px; border-radius: 8px;
    transition: all 0.2s ease; position: relative;
}
.nav-link:hover { color: var(--text-primary); background: rgba(26,31,46,0.04); }
.nav-link.active, .current-menu-item .nav-link { color: var(--text-primary); font-weight: 500; }
.current-menu-item .nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 20px; height: 2px; background: var(--accent-orange);
}
.nav-cta { display: flex; align-items: center; gap: 16px; }

/* Buttons */
.btn-primary {
    background: var(--accent-orange); color: #ffffff; padding: 12px 24px;
    border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.2s ease; display: inline-block;
}
.btn-primary:hover { background: var(--accent-orange-hover); transform: translateY(-1px); color: #fff; }
.btn-secondary {
    background: transparent; color: var(--accent-orange); padding: 12px 24px;
    border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none;
    border: 1px solid var(--accent-orange); cursor: pointer; transition: all 0.2s ease; display: inline-block;
}
.btn-secondary:hover { background: rgba(236,101,43,0.05); color: var(--accent-orange); }
.btn-text { color: var(--accent-orange); text-decoration: none; font-size: 14px; font-weight: 500; }

/* Mobile Menu */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-menu-btn span { display: block; width: 24px; height: 2px; background: var(--text-primary); margin: 5px 0; }

/* Hero */
.hero { padding: 120px 0 80px; min-height: 600px; }
.hero-container { display: grid; grid-template-columns: 55% 45%; gap: 48px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 24px; }
.hero-badge::before { content: ''; width: 6px; height: 6px; background: #145aff; border-radius: 50%; }
.hero-title { font-size: 48px; font-weight: 700; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 16px; }
.hero-subtitle { font-size: 18px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-panel { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 32px; }
.data-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.data-card { text-align: center; }
.data-number { font-family: 'JetBrains Mono', 'Roboto Mono', monospace; font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.data-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.process-flow { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.process-step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.process-icon { width: 40px; height: 40px; background: var(--light-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.process-label { font-size: 12px; color: var(--text-secondary); }
.process-arrow { color: var(--border-color); font-size: 20px; }

/* Sections */
.section { padding: 80px 0; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-title { font-size: 36px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.section-subtitle { font-size: 16px; color: var(--text-secondary); }

/* Matrix Table */
.matrix-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card-bg); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-light); }
.matrix-table thead { background: var(--light-gray); }
.matrix-table th { padding: 16px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.matrix-table th:first-child { text-align: left; }
.matrix-table td { padding: 16px; border-bottom: 1px solid var(--border-color); font-size: 14px; text-align: center; }
.matrix-table td:first-child { font-weight: 500; color: var(--text-primary); text-align: left; }
.matrix-table tbody tr:nth-child(even) { background: var(--canvas-bg); }
.matrix-table tbody tr:hover { background: var(--light-gray); }
.check-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--accent-orange); border-radius: 50%; color: white; font-size: 12px; }

/* Timeline */
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item { position: relative; margin-bottom: 48px; }
.timeline-item::before { content: ''; position: absolute; left: -33px; top: 8px; width: 12px; height: 12px; background: var(--accent-orange); border-radius: 50%; }
.timeline-card { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 24px; transition: box-shadow 0.2s ease; }
.timeline-card:hover { box-shadow: var(--shadow-hover); }
.timeline-client { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.timeline-stages { display: flex; gap: 12px; flex-wrap: wrap; }
.stage-tag { padding: 8px 16px; border-radius: 4px; font-size: 14px; }
.stage-problem { background: var(--light-gray); color: var(--text-secondary); }
.stage-solution { background: var(--light-blue); color: var(--text-primary); }
.stage-result { background: var(--light-green); color: var(--accent-orange); font-weight: 700; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 48px; }
.team-member { text-align: center; }
.team-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--light-gray); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--text-secondary); }
.team-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.team-role { font-size: 12px; color: var(--text-secondary); }
.cert-badges { display: flex; gap: 24px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap; }
.cert-badge { width: 80px; height: 80px; background: var(--light-gray); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-secondary); filter: grayscale(100%); transition: filter 0.4s ease; text-align: center; padding: 8px; }
.cert-badge:hover { filter: grayscale(0%); }
.trust-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: center; }
.trust-number { font-family: 'JetBrains Mono', 'Roboto Mono', monospace; font-size: 40px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.trust-label { font-size: 14px; color: var(--text-secondary); }

/* CTA Form */
.cta-section { background: var(--light-gray); padding: 80px 0; }
.cta-container { display: grid; grid-template-columns: 60% 40%; gap: 48px; align-items: start; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.form-input { width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid var(--border-color); background: var(--card-bg); border-radius: 8px; font-size: 14px; color: var(--text-primary); transition: border-color 0.2s ease; }
.form-input:focus { outline: none; border-bottom: 2px solid var(--accent-orange); }
.form-textarea { resize: vertical; min-height: 100px; }
.receipt-card { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 32px; text-align: center; }
.receipt-icon { width: 48px; height: 48px; background: var(--light-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: var(--accent-orange); }
.receipt-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.receipt-text { font-size: 14px; color: var(--text-secondary); }

/* Footer */
.footer { background: var(--footer-bg); color: #ffffff; padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.footer-links a:hover { color: #ffffff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); }

/* Page Header */
.page-header { padding: 120px 0 60px; text-align: center; }
.page-title { font-size: 40px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.page-subtitle { font-size: 16px; color: var(--text-secondary); }

/* Service Cards */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.service-card { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 32px; transition: all 0.2s ease; }
.service-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.service-icon { width: 48px; height: 48px; background: var(--light-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.service-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.service-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.service-link { color: var(--accent-orange); text-decoration: none; font-size: 14px; font-weight: 500; }

/* Case Cards */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.case-card { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 24px; transition: all 0.2s ease; }
.case-card:hover { box-shadow: var(--shadow-hover); }
.case-logo { width: 60px; height: 60px; background: var(--light-gray); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.case-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.case-stages { display: flex; flex-direction: column; gap: 12px; }

/* Blog / WordPress Post Cards */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.blog-card { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); overflow: hidden; transition: all 0.2s ease; }
.blog-card:hover { box-shadow: var(--shadow-hover); }
.blog-image { width: 100%; height: 200px; background: var(--light-gray); display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--text-secondary); overflow: hidden; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-content { padding: 24px; }
.blog-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.blog-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.blog-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }

/* Contact */
.contact-container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info { padding: 32px; background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); }
.contact-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-icon { width: 40px; height: 40px; background: var(--light-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.contact-text h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.contact-text p { font-size: 14px; color: var(--text-secondary); }
.map-placeholder { width: 100%; height: 300px; background: var(--light-gray); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-secondary); margin-top: 24px; }

/* About */
.about-content { max-width: 800px; margin: 0 auto; }
.about-text { font-size: 16px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 48px; }
.timeline-vertical { position: relative; padding-left: 40px; margin: 48px 0; }
.timeline-vertical::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item-vertical { position: relative; margin-bottom: 32px; }
.timeline-item-vertical::before { content: ''; position: absolute; left: -33px; top: 8px; width: 12px; height: 12px; background: var(--accent-orange); border-radius: 50%; }
.timeline-year { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--accent-orange); margin-bottom: 8px; }
.timeline-desc { font-size: 14px; color: var(--text-secondary); }

/* WordPress Content Styles */
.wp-content { max-width: 800px; margin: 0 auto; }
.wp-content .entry-content { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 48px; }
.wp-content .entry-content h2 { margin: 32px 0 16px; font-size: 24px; }
.wp-content .entry-content p { line-height: 1.8; margin-bottom: 16px; font-size: 16px; }
.wp-content .entry-content ul, .wp-content .entry-content ol { padding-left: 20px; line-height: 1.8; margin-bottom: 16px; }
.wp-content .entry-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* WordPress Post Navigation */
.post-navigation { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.post-navigation a { color: var(--accent-orange); text-decoration: none; font-size: 14px; }

/* WordPress Comments */
.comments-area { max-width: 800px; margin: 48px auto 0; }
.comment-list { list-style: none; }
.comment { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-light); padding: 24px; margin-bottom: 16px; }
.comment-author { font-weight: 600; color: var(--text-primary); }
.comment-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span { padding: 8px 16px; border-radius: 8px; font-size: 14px; text-decoration: none; }
.pagination a { background: var(--card-bg); color: var(--text-secondary); box-shadow: var(--shadow-light); }
.pagination a:hover { background: var(--light-gray); }
.pagination .current { background: var(--accent-orange); color: #fff; }

/* Responsive */
@media (max-width: 1024px) {
    .hero-container, .cta-container, .contact-container { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .nav-links.active { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--canvas-bg); padding: 24px; border-bottom: 1px solid var(--border-color); }
    h1, .hero-title { font-size: 32px; }
    h2, .section-title { font-size: 28px; }
    .data-cards, .trust-stats { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .timeline { padding-left: 24px; }
    .timeline::before { left: 7px; }
    .timeline-item::before { left: -25px; }
}

/* Animations */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.counter { display: inline-block; }