/* 跨设备显示一致性修复 */

/* 1. 海报图亮度统一 */
.hero img {
  filter: brightness(0.8) contrast(1.1) !important;
  -webkit-filter: brightness(0.8) contrast(1.1) !important;
}

/* 2. 产品图片轮播按钮统一显示 */
.portfolio .swiper-pagination {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 30px !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center !important;
  width: 100% !important;
}

.portfolio .swiper-pagination .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 196, 81, 0.5) !important;
  border-radius: 50% !important;
  margin: 0 6px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  float: none !important;
}

.portfolio .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent-color) !important;
  transform: scale(1.2) !important;
}

/* 3. Features区域灰框统一显示 */
.features .features-item {
  background: rgba(249, 249, 249, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 4. Call to Action背景图片位置统一 */
.call-to-action {
  position: relative !important;
  overflow: hidden !important;
}

.call-to-action img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
}

.call-to-action .container {
  position: relative !important;
  z-index: 2 !important;
}

/* 5. 评价区域位置统一 */
.testimonials {
  position: relative !important;
  overflow: hidden !important;
}

.testimonials .testimonials-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
}

.testimonials .container {
  position: relative !important;
  z-index: 2 !important;
}

/* 6. Sales Team边框统一显示 */
.team .team-member,
.team-modern-card {
  border: 2px solid rgba(255, 196, 81, 0.3) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.team .team-member:hover,
.team-modern-card:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 8px 24px rgba(255, 196, 81, 0.15) !important;
  transform: translateY(-4px) !important;
}

/* 7. Article页面文章框背景色统一 */
.article-card {
  background: color-mix(in srgb, var(--accent-color), #fff 85%) !important;
  border: 1px solid rgba(255, 196, 81, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
}

.article-card:hover {
  background: color-mix(in srgb, var(--accent-color), #fff 80%) !important;
  box-shadow: 0 8px 24px rgba(255, 196, 81, 0.12) !important;
  transform: translateY(-4px) !important;
}

/* 8. About页面背景色统一 */
.about-modern section {
  background: #fff !important;
  position: relative !important;
}

.about-modern section:nth-of-type(even) {
  background: #f9f9f9 !important;
}

.about-modern section:nth-of-type(odd) {
  background: #fff !important;
}

/* 9. Partner Brands按钮背景色统一 */
.brand-tab-button {
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  color: #495057 !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.brand-tab-button.active,
.brand-tab-button:hover {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #151515 !important;
  font-weight: 700 !important;
}

/* 10. 全局颜色变量强制应用 */
:root {
  --accent-color: #ffc451 !important;
  --heading-color: #151515 !important;
  --default-color: #333333 !important;
  --background-color: #ffffff !important;
  --surface-color: #ffffff !important;
  --contrast-color: #312f2f !important;
}

/* 11. 强制字体渲染 */
* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 12. 图片渲染优化 */
img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* 13. 阴影和边框统一 */
.shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 14. 响应式修复 */
@media (max-width: 768px) {
  .hero img {
    filter: brightness(0.75) contrast(1.15) !important;
    -webkit-filter: brightness(0.75) contrast(1.15) !important;
  }
  
  .features .features-item {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .team-modern-card {
    width: 200px !important;
  }
}

/* 15. 浏览器兼容性修复 */
@supports (-webkit-appearance: none) {
  .hero img {
    filter: brightness(0.8) contrast(1.1) !important;
  }
}

@supports not (-webkit-appearance: none) {
  .hero img {
    filter: brightness(0.8) contrast(1.1) !important;
  }
}

/* 16. 确保所有交互元素可见 */
button, a, [role="button"] {
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* 17. 强制显示重要元素 */
.swiper-pagination,
.carousel-control-prev,
.carousel-control-next {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 18. 统一圆角和间距 */
.rounded-4 {
  border-radius: 12px !important;
}

.rounded-pill {
  border-radius: 50px !important;
}

/* 19. 确保文本颜色一致性 */
.text-dark {
  color: #151515 !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-muted {
  color: #6c757d !important;
}

/* 20. 强制应用主题色 */
.bg-warning {
  background-color: var(--accent-color) !important;
}

.text-warning {
  color: var(--accent-color) !important;
}

.border-warning {
  border-color: var(--accent-color) !important;
}