/* ============================================
   V5.3 - 关于我们 + FAQ 全新排版
   ============================================ */

/* ===== 关于我们 ===== */
.about-section {
  padding: 100px 0 80px !important;
  background: #fff !important;
}

/* 上半：居中大标题 */
.about-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.about-hero .section-tag {
  margin-bottom: 20px;
}

.about-hero .section-title {
  font-size: 2.6rem !important;
  margin-bottom: 24px !important;
}

.about-lead {
  font-size: 16px !important;
  color: #555 !important;
  line-height: 2 !important;
  text-align: left;
}

.about-highlight {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 700 !important;
  color: #0052d9 !important;
  white-space: nowrap !important;
}

.inline-logo {
  height: 18px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* 数据统计条 - 横排一字 */
.about-stats-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: linear-gradient(135deg, #f0f5ff 0%, #f8f9fb 50%, #fff8f0 100%) !important;
  border-radius: 20px !important;
  border: 1px solid #eef0f4 !important;
  padding: 36px 20px !important;
  margin-bottom: 56px !important;
  overflow: hidden !important;
}

.about-stat-v2 {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  padding: 0 24px !important;
}

/* 分隔竖线 */
.about-stat-v2:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 10% !important;
  height: 80% !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, #d0d5dd, transparent) !important;
}

.about-stat-v2 .stat-num {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #0052d9 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}

.about-stat-v2 .stat-num sup {
  font-size: 18px !important;
  font-weight: 700 !important;
  vertical-align: super !important;
}

.about-stat-v2 .stat-divider {
  display: none !important;
}

.about-stat-v2 .stat-text {
  font-size: 14px !important;
  color: #888 !important;
  font-weight: 500 !important;
}

/* 价值观卡片 - 4列横排 */
.about-values-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.value-card {
  background: #fff !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

.value-card:hover {
  border-color: rgba(0,82,217,0.15) !important;
  box-shadow: 0 12px 36px rgba(0,82,217,0.08) !important;
  transform: translateY(-6px) !important;
}

.value-card-icon {
  font-size: 36px !important;
  margin-bottom: 16px !important;
  line-height: 1 !important;
}

.value-card h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 10px !important;
}

.value-card p {
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* 隐藏旧布局元素（以防残留） */
.about-layout,
.about-text,
.about-visual,
.about-cards,
.about-stat-card,
.about-values .value-item {
  display: none !important;
}

/* ===== FAQ - 2列网格卡片 ===== */
.faq-section {
  padding: 100px 0 80px !important;
  background: #f8f9fb !important;
}

.faq-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.faq-card {
  background: #fff !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 20px !important;
  padding: 28px 28px 28px 32px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* 左侧彩色竖线 */
.faq-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--faq-color, #0052d9) !important;
  border-radius: 4px 0 0 4px !important;
  transition: width 0.3s ease !important;
}

/* data-color 映射 */
.faq-card[data-color="#0052d9"] { --faq-color: #0052d9; }
.faq-card[data-color="#00b8d9"] { --faq-color: #00b8d9; }
.faq-card[data-color="#ff6a00"] { --faq-color: #ff6a00; }
.faq-card[data-color="#7c3aed"] { --faq-color: #7c3aed; }
.faq-card[data-color="#059669"] { --faq-color: #059669; }
.faq-card[data-color="#dc2626"] { --faq-color: #dc2626; }

.faq-card:hover {
  border-color: rgba(0,82,217,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,82,217,0.08) !important;
  transform: translateY(-4px) !important;
}

.faq-card:hover::before {
  width: 6px !important;
}

.faq-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.faq-card-icon {
  font-size: 28px !important;
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8f9fb !important;
  border-radius: 14px !important;
  transition: all 0.3s ease !important;
}

.faq-card:hover .faq-card-icon {
  background: #f0f5ff !important;
  transform: scale(1.1) !important;
}

.faq-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.faq-card-body {
  padding-left: 62px !important;
}

.faq-card-body p {
  font-size: 14px !important;
  color: #555 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.faq-card-body strong {
  color: #0052d9 !important;
  font-weight: 700 !important;
}

/* 隐藏旧FAQ手风琴 */
.faq-grid {
  display: none !important;
}

/* ===== 响应式 ===== */
@media (max-width: 992px) {
  .about-values-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .faq-grid-v2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: 60px 0 50px !important;
  }
  .about-hero .section-title {
    font-size: 1.8rem !important;
  }
  .about-stats-bar {
    flex-wrap: wrap !important;
    padding: 24px 16px !important;
    gap: 20px !important;
  }
  .about-stat-v2 {
    flex: 0 0 45% !important;
    padding: 12px 16px !important;
  }
  .about-stat-v2:not(:last-child)::after {
    display: none !important;
  }
  .about-stat-v2 .stat-num {
    font-size: 28px !important;
  }
  .about-values-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .value-card {
    padding: 24px 18px !important;
  }
  .faq-section {
    padding: 60px 0 50px !important;
  }
  .faq-card {
    padding: 22px 20px 22px 24px !important;
  }
  .faq-card-body {
    padding-left: 0 !important;
  }
  .faq-card-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
}

/* ========== Logo Enlargement (v28) ========== */
/* Hero badge logos: 24px -> 48px */
section.hero .badge-logo {
  width: auto !important;
  height: 72px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin: 0 6px !important;
}

/* Trust bar logos: 16px -> 28px */
.trust-logo {
  width: auto !important;
  height: 28px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}
.trust-logos-text { gap: 20px !important; align-items: center !important; }

/* Brand showcase logos: 40px -> 64px */
.brand-showcase .brand-logo-img {
  width: auto !important;
  height: 64px !important;
  object-fit: contain !important;
}
.brand-logo-card { padding: 24px 32px !important; }

/* About section inline logos: 18px -> 32px */
.about-section .inline-logo {
  width: auto !important;
  height: 32px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

/* ========== Logo Cleanup v30 ========== */
/* Hero badge logos: 96px */
section.hero .badge-logo {
  height: 96px !important;
  width: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin: 0 8px !important;
}

/* Brand pills (text-based, no images) */
.brand-pill {
  background: #f0f5ff !important;
  border: 1px solid #d0e0ff !important;
  border-radius: 24px !important;
  padding: 12px 28px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0052d9 !important;
  letter-spacing: 1px !important;
}
.brand-logo-item { padding: 0 !important; }

/* Hide any remaining trust-logo/inline-logo/brand-logo-img images */
.trust-logo, .inline-logo, .brand-logo-img {
  display: none !important;
}

/* ========== Hero badge logo fix v31 ========== */
/* Reset all badge logos to 36px */
section.hero .badge-logo {
  height: 36px !important;
  width: auto !important;
  margin: 0 8px !important;
}
/* Haikang is square (1:1), needs extra height to look balanced */
section.hero .badge-logo[alt*="海康"] {
  height: 52px !important;
}

/* ========== About highlight text fix v34 ========== */
.about-lead .about-highlight {
  font-weight: 400 !important;
  color: inherit !important;
  display: inline !important;
}

/* ========== About highlight box fix v35 ========== */
.about-lead .about-highlight {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}