/* 修复样式问题和增强响应式设计 */

/* 确保所有页面在移动设备上有更好的显示效果 */
@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 1.8rem;
  }
  
  .section-title h2 {
    font-size: 1.6rem;
  }
  
  .card {
    padding: 1rem;
  }
  
  .feature-item h4 {
    font-size: 1rem;
  }
}

/* 修复特定元素的样式问题 */
.logo {
  max-height: 40px;
  width: auto;
}

.nav-cta {
  white-space: nowrap;
}

.interactive-image {
  width: auto;
  height: 300px;
  display: inline-block;
  margin: 0 auto;
}

.qr-code {
  max-width: 150px;
  margin: 0 auto;
}

/* 增强可访问性 */
.btn:focus, 
input:focus, 
select:focus, 
textarea:focus {
  outline: 2px solid rgba(0, 86, 179, 0.5);
  outline-offset: 2px;
}

/* 确保表单元素在各种设备上的一致性 */
input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
}

/* 修复移动端菜单的层级问题 */
.mobile-menu {
  z-index: 1000;
}

/* 确保图片容器在所有浏览器中正确显示 */
.image-container {
  display: block;
  width: 100%;
}

/* 修复案例轮播在某些浏览器中的显示问题 */
.case-slider {
  min-height: 300px;
}

/* 确保按钮在触摸设备上有足够的点击区域 */
.btn, .nav-link, .faq-question {
  min-height: 44px;
  min-width: 44px;
}

/* 增强表单验证的视觉反馈 */
input:invalid, select:invalid, textarea:invalid {
  border-color: #dc3545;
}

/* 修复页脚在某些浏览器中的显示问题 */
.footer {
  width: 100%;
  overflow: hidden;
}

/* 确保所有交互元素有明确的悬停状态 */
.interactive-item:hover, 
.platform-item:hover, 
.feature-card:hover, 
.contact-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* 修复在某些浏览器中的字体渲染问题 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 确保动画在低性能设备上不会影响用户体验 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}