/* ========== Reset & Base ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; color: #333; background: #fff; line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: color .2s; }
a:hover { color: #1890ff; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ========== Header ========== */
.header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: all .3s; }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.header .logo { display: flex; align-items: center; }
.header .logo img { height: 45px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 15px; color: #555; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.active { color: #1890ff; border-bottom-color: #1890ff; }
.header-contact { display: flex; align-items: center; gap: 20px; font-size: 14px; color: #555; }
.header-contact .hc-item { display: flex; align-items: center; gap: 6px; }
.header-contact .hc-item .hc-icon { width: 28px; height: 28px; background: #e6f7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #1890ff; }
.header-contact .hc-item span { color: #333; font-weight: 600; }

/* ========== Banner ========== */
.banner { margin-top: 70px; position: relative; overflow: hidden; height: 460px; background: linear-gradient(135deg, #0d47a1 0%, #1890ff 50%, #00bcd4 100%); }
.banner-slides { display: flex; transition: transform .6s ease; height: 100%; }
.banner-slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; flex-direction: column; padding: 0 20px; }
.banner-slide h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
.banner-slide p { font-size: 20px; opacity: .9; max-width: 600px; }
.banner-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.banner-dots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s; }
.banner-dots span.active { background: #fff; }
.banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: #fff; transition: background .3s; }
.banner-arrow:hover { background: rgba(255,255,255,.4); }
.banner-arrow.prev { left: 20px; }
.banner-arrow.next { right: 20px; }

/* ========== Section Common ========== */
.section { padding: 70px 0; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 10px; }
.section-title p { font-size: 16px; color: #888; }
.section-title h2::after { content: ""; display: block; width: 50px; height: 3px; background: #1890ff; margin: 12px auto 0; border-radius: 2px; }

/* ========== Product Tabs ========== */
.product-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
.product-tabs .tab-btn { padding: 10px 24px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; color: #666; background: #fafafa; transition: all .2s; }
.product-tabs .tab-btn:hover { border-color: #1890ff; color: #1890ff; }
.product-tabs .tab-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ========== Product Cards ========== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.product-card { border: 1px solid #eee; border-radius: 8px; padding: 24px; text-align: center; transition: all .3s; background: #fff; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-4px); border-color: #1890ff; }
.product-card h4 { font-size: 16px; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.product-card .spec { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: #666; }
.product-card .spec .label { color: #999; }
.product-card .price { margin-top: 16px; padding-top: 12px; border-top: 1px solid #f0f0f0; font-size: 22px; font-weight: 700; color: #f5222d; }
.product-card .price small { font-size: 13px; font-weight: 400; color: #999; }
.product-card .btn-buy { display: inline-block; margin-top: 14px; padding: 8px 28px; background: #1890ff; color: #fff; border-radius: 4px; font-size: 14px; }
.product-card .btn-buy:hover { background: #096dd9; color: #fff; }

/* ========== Solutions ========== */
.solutions-list { display: flex; flex-direction: column; gap: 60px; }
.solution-item { display: flex; align-items: center; gap: 50px; }
.solution-item:nth-child(even) { flex-direction: row-reverse; }
.solution-img { flex: 0 0 420px; height: 280px; background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #1890ff; }
.solution-info { flex: 1; }
.solution-info h3 { font-size: 24px; color: #222; margin-bottom: 8px; }
.solution-info .subtitle { font-size: 15px; color: #1890ff; margin-bottom: 16px; }
.solution-info p { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 16px; }
.solution-info .btn-more { display: inline-block; padding: 8px 24px; border: 1px solid #1890ff; color: #1890ff; border-radius: 4px; font-size: 14px; }
.solution-info .btn-more:hover { background: #1890ff; color: #fff; }

/* ========== Stats ========== */
.stats-section { background: linear-gradient(135deg, #0d47a1, #1890ff); color: #fff; padding: 80px 0; text-align: center; }
.stats-section h2 { font-size: 32px; margin-bottom: 8px; }
.stats-section .sub { font-size: 16px; opacity: .8; margin-bottom: 50px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 800px; margin: 0 auto; }
.stat-item .num { font-size: 56px; font-weight: 700; }
.stat-item .label { font-size: 16px; opacity: .85; margin-top: 8px; }

/* ========== About Intro ========== */
.about-intro { background: #f9f9f9; }
.about-intro .container { display: flex; align-items: center; gap: 50px; }
.about-intro .img-box { flex: 0 0 400px; height: 280px; background: linear-gradient(135deg, #e8eaf6, #c5cae9); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #3f51b5; }
.about-intro .text-box { flex: 1; }
.about-intro .text-box h3 { font-size: 26px; color: #222; margin-bottom: 16px; }
.about-intro .text-box p { font-size: 15px; color: #666; line-height: 1.9; }

/* ========== News ========== */
.news-tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
.news-tabs .ntab { padding: 8px 24px; cursor: pointer; font-size: 15px; color: #666; border-bottom: 2px solid transparent; }
.news-tabs .ntab.active { color: #1890ff; border-bottom-color: #1890ff; }
.news-list { max-width: 800px; margin: 0 auto; }
.news-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px dashed #eee; }
.news-item a { font-size: 15px; color: #444; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-item a:hover { color: #1890ff; }
.news-item .date { font-size: 13px; color: #aaa; margin-left: 20px; flex-shrink: 0; }
.news-content { display: none; }
.news-content.active { display: block; }

/* ========== Footer ========== */
.footer { background: #1a1a2e; color: #ccc; padding: 50px 0 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: #999; padding: 4px 0; }
.footer-col a:hover { color: #1890ff; }
.footer-bottom { text-align: center; padding: 20px 0; font-size: 13px; color: #777; }

/* ========== Quick Contact Button ========== */
.quick-contact { position: fixed; right: 20px; bottom: 30px; z-index: 999; }
.quick-contact .qc-btn { width: 56px; height: 56px; background: #1890ff; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(24,144,255,.4); transition: all .3s; }
.quick-contact .qc-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(24,144,255,.5); background: #096dd9; color: #fff; }
.quick-contact .qc-popup { display: none; position: absolute; bottom: 66px; right: 0; background: #fff; border-radius: 12px; padding: 24px; min-width: 240px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.quick-contact:hover .qc-popup { display: block; }
.qc-popup h5 { font-size: 16px; color: #222; margin-bottom: 12px; }
.qc-popup .qc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: #555; }
.qc-popup .qc-row .qc-icon { color: #1890ff; font-size: 16px; width: 20px; text-align: center; }
.back-top { position: fixed; right: 20px; bottom: 100px; width: 44px; height: 44px; background: #fff; color: #1890ff; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.1); font-size: 18px; z-index: 999; transition: all .3s; }
.back-top:hover { background: #1890ff; color: #fff; }

/* ========== Page Banner (sub-pages) ========== */
.page-banner { margin-top: 70px; padding: 60px 0; text-align: center; color: #fff; background: linear-gradient(135deg, #0d47a1 0%, #1890ff 100%); }
.page-banner h1 { font-size: 36px; font-weight: 700; margin-bottom: 10px; }
.page-banner p { font-size: 16px; opacity: .85; }
.breadcrumb { margin-top: 70px; padding: 14px 0; background: #f5f5f5; font-size: 14px; color: #888; }
.breadcrumb a { color: #1890ff; }

/* ========== Solution Detail ========== */
.solution-detail { padding: 60px 0; }
.solution-detail h2 { font-size: 28px; color: #222; margin-bottom: 10px; }
.solution-detail .lead { font-size: 16px; color: #666; margin-bottom: 40px; line-height: 1.8; }
.solution-detail h3 { font-size: 22px; color: #222; margin: 40px 0 20px; padding-left: 12px; border-left: 4px solid #1890ff; }
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.problem-card { padding: 24px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; }
.problem-card h4 { font-size: 16px; color: #f5222d; margin-bottom: 10px; }
.problem-card p { font-size: 14px; color: #666; line-height: 1.7; }
.advantage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.advantage-card { padding: 24px; border: 1px solid #e6f7ff; border-radius: 8px; background: #e6f7ff; }
.advantage-card h4 { font-size: 16px; color: #1890ff; margin-bottom: 10px; }
.advantage-card p { font-size: 14px; color: #555; line-height: 1.7; }
.arch-box { padding: 30px; background: #f0f5ff; border: 1px solid #d6e4ff; border-radius: 8px; margin: 20px 0; }
.arch-box p { font-size: 14px; color: #555; line-height: 1.8; margin-bottom: 10px; }

/* ========== Help Center ========== */
.help-section { padding: 50px 0; }
.help-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.help-cat { padding: 28px; border: 1px solid #eee; border-radius: 8px; background: #fff; transition: all .3s; }
.help-cat:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: #1890ff; }
.help-cat h3 { font-size: 18px; color: #222; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.help-cat ul li { padding: 8px 0; border-bottom: 1px dashed #f5f5f5; }
.help-cat ul li a { font-size: 14px; color: #555; }
.help-cat ul li a:hover { color: #1890ff; }

/* ========== About Page ========== */
.about-content { padding: 50px 0; }
.about-content .intro-text { font-size: 15px; color: #555; line-height: 2; margin-bottom: 30px; }
.about-content .cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }
.about-content .cert-item { height: 200px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 14px; border: 1px solid #eee; }
.about-content .bank-info { background: #f9f9f9; padding: 24px; border-radius: 8px; margin: 30px 0; }
.about-content .bank-info h4 { font-size: 18px; margin-bottom: 12px; color: #222; }
.about-content .bank-info p { font-size: 14px; color: #555; line-height: 2; }

/* ========== Product Config ========== */
.config-section { padding: 50px 0; }
.config-panel { background: #f9f9f9; padding: 30px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 30px; }
.config-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
.config-row:last-child { border: none; }
.config-label { flex: 0 0 80px; font-size: 14px; color: #999; }
.config-options { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.config-opt { padding: 6px 16px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; color: #555; cursor: pointer; transition: all .2s; }
.config-opt:hover { border-color: #1890ff; color: #1890ff; }
.config-opt.active { background: #1890ff; color: #fff; border-color: #1890ff; }
.config-summary { background: #e6f7ff; padding: 20px; border-radius: 8px; border: 1px solid #91d5ff; margin-top: 20px; }
.config-summary h4 { font-size: 16px; color: #1890ff; margin-bottom: 12px; }
.config-summary p { font-size: 14px; color: #555; }
.btn-consult { display: inline-block; padding: 10px 36px; background: #1890ff; color: #fff; border-radius: 4px; font-size: 15px; margin-top: 16px; margin-right: 12px; }
.btn-consult:hover { background: #096dd9; color: #fff; }
.btn-clear { display: inline-block; padding: 10px 36px; border: 1px solid #ddd; color: #666; border-radius: 4px; font-size: 15px; margin-top: 16px; }

/* ========== Data Center Table ========== */
.dc-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.dc-table th, .dc-table td { padding: 12px 16px; text-align: left; border: 1px solid #eee; font-size: 14px; }
.dc-table th { background: #f5f5f5; color: #333; font-weight: 600; }
.dc-table td { color: #555; }
.dc-table tr:hover { background: #f0f8ff; }

/* ========== CTA Section ========== */
.cta-section { text-align: center; padding: 60px 0; background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
.cta-section h2 { font-size: 28px; color: #222; margin-bottom: 16px; }
.cta-section .btn-cta { display: inline-block; padding: 12px 40px; background: #1890ff; color: #fff; border-radius: 4px; font-size: 16px; }
.cta-section .btn-cta:hover { background: #096dd9; color: #fff; }

/* ========== Search Box ========== */
.search-box { max-width: 500px; margin: 0 auto 40px; display: flex; }
.search-box input { flex: 1; padding: 10px 16px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; outline: none; }
.search-box input:focus { border-color: #1890ff; }
.search-box button { padding: 10px 24px; background: #1890ff; color: #fff; border: none; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 14px; }
.hot-search { text-align: center; margin-bottom: 30px; font-size: 14px; color: #888; }
.hot-search a { color: #1890ff; margin: 0 8px; }

/* ========== Contact Section ========== */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 30px 0; }
.contact-card { padding: 24px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee; }
.contact-card h4 { font-size: 16px; color: #222; margin-bottom: 12px; }
.contact-card p { font-size: 14px; color: #555; line-height: 2; }

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .header .container { height: 56px; }
  .nav { display: none; }
  .banner { height: 300px; }
  .banner-slide h2 { font-size: 28px; }
  .banner-slide p { font-size: 16px; }
  .section { padding: 40px 0; }
  .section-title h2 { font-size: 24px; }
  .product-grid { grid-template-columns: 1fr; }
  .solution-item, .solution-item:nth-child(even) { flex-direction: column; }
  .solution-img { flex: none; width: 100%; height: 180px; }
  .stats-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-intro .container { flex-direction: column; }
  .about-intro .img-box { flex: none; width: 100%; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .help-categories { grid-template-columns: 1fr; }
  .problem-grid, .advantage-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .header-contact { display: none; }
  .quick-contact { right: 10px; bottom: 15px; }
}