/* 公共样式 - 通用组件和动画 */

/* ==================== 浏览器兼容性 ==================== */

/* 隐藏滚动条 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 圆角兼容性 */
.rounded-3xl {
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
}

.rounded-2xl {
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
}

/* 过渡动画兼容性 */
.transition-all {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
}

.transition-colors {
  transition: color 0.15s ease, background-color 0.15s ease;
  -webkit-transition: color 0.15s ease, background-color 0.15s ease;
  -moz-transition: color 0.15s ease, background-color 0.15s ease;
  -o-transition: color 0.15s ease, background-color 0.15s ease;
}

/* 背景模糊兼容性 */
.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 不支持 backdrop-filter 的浏览器回退 */
@supports not (backdrop-filter: blur(12px)) {
  .bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* group-hover 兼容性增强 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

/* ==================== 动画定义 ==================== */

/* 浮动动画 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* 上滑淡入动画 */
@keyframes slideUp {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: slideUp 0.6s ease-out forwards;
}

/* 模态框动画 */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-modal {
  animation: modalFadeIn 0.2s ease-out forwards;
}

/* ==================== 通用组件样式 ==================== */

/* 链接悬停效果 */
.link-hover {
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-hover:hover {
  color: rgb(37 99 235);
}

.link-hover-light:hover {
  color: white;
}

/* 下载按钮样式 */
.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: white;
  border: 1px solid rgb(226 232 240);
  color: rgb(30 41 59);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-download:hover {
  border-color: rgb(96 165 250);
  color: rgb(37 99 235);
}

.btn-download:active {
  transform: scale(0.95);
}

.btn-download.active {
  background-color: rgb(15 23 42);
  color: white;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.btn-download.active:hover {
  background-color: rgb(30 41 59);
}

/* 功能卡片通用样式 */
.card-feature {
  padding: 2rem;
  background-color: white;
  border-radius: 1.5rem;
  border: 1px solid rgb(241 245 249);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-feature:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.5rem);
}

/* 图标容器通用样式 */
.icon-container {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

/* 图标容器颜色变体 */
.icon-blue {
  background-color: rgb(239 246 255);
  color: rgb(37 99 235);
}

.icon-purple {
  background-color: rgb(250 245 255);
  color: rgb(147 51 234);
}

.icon-emerald {
  background-color: rgb(236 253 245);
  color: rgb(5 150 105);
}

.icon-indigo {
  background-color: rgb(238 242 255);
  color: rgb(79 70 229);
}

.icon-cyan {
  background-color: rgb(236 254 255);
  color: rgb(8 145 178);
}

/* 日期文本样式 */
.text-2026-date {
  font-size: 0.875rem;
  color: rgb(100 116 139);
  font-weight: 400;
}

/* ==================== 按钮样式 ==================== */

/* 主按钮样式 */
.btn-primary {
  padding: 1rem 2rem;
  background-color: rgb(37 99 235);
  color: white;
  border-radius: 1rem;
  font-weight: 600;
  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.2), 0 8px 10px -6px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: rgb(29 78 216);
  transform: translateY(-0.25rem);
}

/* 次按钮样式 */
.btn-secondary {
  padding: 1rem 2rem;
  background-color: white;
  color: rgb(51 65 85);
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background-color: rgb(248 250 252);
}

/* 标签徽章样式 */
.badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  background-color: rgb(239 246 255);
  color: rgb(37 99 235);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==================== 特性卡片样式 ==================== */

/* 特性卡片容器 */
.feature-card {
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid rgb(241 245 249);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(226, 232, 240, 0.5);
}

/* 特性卡片图标容器 */
.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

/* ==================== 统计数据样式 ==================== */

/* 统计项容器 */
.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 1.875rem;
  font-weight: 700;
  color: rgb(15 23 42);
}

.stat-label {
  font-size: 0.875rem;
  color: rgb(100 116 139);
  margin-top: 0.25rem;
}

/* ==================== 小图标容器样式 ==================== */

/* 小型图标容器（用于特性列表） */
.icon-box-sm {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 大型图标容器背景色变体 */
.bg-blue-100 {
  background-color: rgb(219 234 254);
}

.bg-indigo-100 {
  background-color: rgb(224 231 255);
}