/* Custom CSS for 可达智灵官网 */

/* CSS Variables for consistent theming */
:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  
  --tech-50: #f0f9ff;
  --tech-100: #e0f2fe;
  --tech-200: #bae6fd;
  --tech-300: #7dd3fc;
  --tech-400: #38bdf8;
  --tech-500: #0ea5e9;
  --tech-600: #0284c7;
  --tech-700: #0369a1;
  --tech-800: #075985;
  --tech-900: #0c4a6e;
  
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
}

/* ADE角色图片突破边框效果 */
.ade-role-container {
  position: relative;
  overflow: visible;
  z-index: 10;
}

.ade-role-card {
  position: relative;
  transform: perspective(800px) rotateY(-8deg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(20px 20px 30px rgba(0, 0, 0, 0.15));
}

.ade-role-card:hover {
  transform: perspective(800px) rotateY(-12deg) translateZ(20px);
  filter: drop-shadow(25px 25px 40px rgba(0, 0, 0, 0.25));
}

/* 为每个角色添加不同的突破效果 */
.ade-role-card.role-product {
  margin-right: -20px;
}

.ade-role-card.role-architect {
  margin-right: -25px;
  transform: perspective(800px) rotateY(-10deg);
}

.ade-role-card.role-developer {
  margin-right: -30px;
  transform: perspective(800px) rotateY(-12deg);
}

.ade-role-card.role-tester {
  margin-right: -25px;
  transform: perspective(800px) rotateY(-10deg);
}

.ade-role-card.role-devops {
  margin-right: -20px;
  transform: perspective(800px) rotateY(-8deg);
}

/* 图片占位符优化 */
.ade-role-placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border-radius: 16px;
  overflow: hidden;
}

.ade-role-placeholder::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
  border-radius: 18px;
  z-index: -1;
}

/* ============================================================================= */
/* 功能亮点部分的动画优化 */
/* ============================================================================= */

/* 滚动进入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 功能亮点图片悬浮动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 图片容器增强效果 */
.feature-image-container {
  position: relative;
  overflow: visible;
}

/* .feature-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
  border-radius: 24px;
  z-index: 1;
  transition: all 0.3s ease;
}

.feature-image-container:hover::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(14, 165, 233, 0.15) 100%);
} */

.feature-image-container img {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.feature-image-container:hover img {
  transform: scale(1.05);
}

/* 浮动图标动画 */
.floating-icon {
  animation: float 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* 数据展示卡片优化 */
.feature-stat-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-stat-card:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 按钮增强动画 */
#show-more-features {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#show-more-features::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  transition: left 0.5s;
}

#show-more-features:hover::before {
  left: 100%;
}

#show-more-features:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-400);
}

#show-more-features .fas {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 渐变背景动画 */
.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 响应式动画优化 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .floating-icon,
  .animated-gradient {
    animation: none !important;
  }
}

/* 滚动触发动画类 */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .ade-role-card {
    transform: none;
    margin-right: 0;
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.1));
  }
  
  .ade-role-card:hover {
    transform: scale(1.1);
    filter: drop-shadow(15px 15px 25px rgba(0, 0, 0, 0.15));
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* 防止页面因阴影而产生水平滚动 */
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Browser Compatibility */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Modern CSS feature detection and fallbacks */
@supports not (backdrop-filter: blur(10px)) {
  .navbar-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
  }
}

/* Custom scrollbar with fallbacks */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary-500), var(--tech-500));
  background: #3b82f6; /* fallback */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--primary-600), var(--tech-600));
}

/* Typography enhancements */
.font-display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

/* Glass morphism effect */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-600), var(--tech-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated background patterns */
.hero-bg {
  position: relative;
  overflow: hidden;
}

.hero-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%);
  animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(5px) translateY(-5px) rotate(1deg); }
  50% { transform: translateX(-5px) translateY(5px) rotate(-1deg); }
  75% { transform: translateX(-5px) translateY(-5px) rotate(1deg); }
}

/* Enhanced button styles */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-600), var(--tech-600));
  border: none;
  color: white;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-secondary {
  background: white;
  border: 2px solid var(--primary-600);
  color: var(--primary-600);
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Card hover effects */
.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(14, 165, 233, 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: var(--primary-300);
}

.feature-card:hover::before {
  opacity: 1;
}

/* Logo carousel animation - 由JavaScript动态控制 */

/* Logo grayscale effect - 已移除黑白化和hover效果 */
.logo-grayscale {
  /* 移除黑白化效果，保持原始颜色 */
  /* filter: grayscale(100%) brightness(0.8) contrast(0.9); */
  /* opacity: 0.7; */
  cursor: pointer;
  height: 3rem; /* 桌面端保持原有大小 */
}

.logo-grayscale:hover {
  /* 移除hover效果 - 保持默认状态 */
  cursor: pointer;
}

/* Logo容器默认样式 - 桌面端 */
.logo-container {
  gap: 3rem; /* 桌面端较大间距 */
  /* min-width 由JavaScript动态设置 */
}

/* Sticky Process Animation */
.scroll-triggers {
  position: relative;
  z-index: 1;
}

.scroll-trigger {
  opacity: 0;
  pointer-events: none;
}

#sticky-content {
  position: sticky;
  top: 5rem;
  z-index: 10;
  max-height: 80vh;
  overflow: visible;
}

/* New Process Step Styles */
.process-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  display: flex; /* 使用flex让内容垂直填充 */
  flex-direction: column; /* 垂直方向排列 */
  justify-content: flex-start; /* 从顶部开始，不压缩高度 */
  align-items: stretch; /* 横向拉伸 */
  padding: 3rem 2rem; /* 上下更多空间 */
  overflow: visible; /* 允许内容完整显示 */
  box-sizing: border-box; /* 确保padding计算正确 */
}

/* 确保内部grid容器能充分利用空间 */
.process-step .grid {
  flex: 1; /* 让grid占满可用空间 */
  align-items: start; /* 网格内容从顶部开始，不压缩 */
  min-height: 400px; /* 设置最小高度确保内容不被压缩 */
}

.process-step.active {
  opacity: 1;
  visibility: visible;
}

/* Ensure proper sticky behavior */
.sticky-scroll-container {
  position: relative;
  width: 100%;
  /* 确保有足够的高度让sticky工作 */
  min-height: 100vh;
}

#process {
  /* 确保父容器不阻止sticky */
  overflow: visible;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
  z-index: 10;
  width: 100%;
  /* 调试用边框 */
  /* border: 2px solid red; */
}

/* Progressive animation for content items */
.animate-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-content.active .animate-item {
  opacity: 1;
  transform: translateY(0);
}

.animate-item[data-delay="0"] { transition-delay: 0.1s; }
.animate-item[data-delay="1"] { transition-delay: 0.2s; }
.animate-item[data-delay="2"] { transition-delay: 0.4s; }
.animate-item[data-delay="3"] { transition-delay: 0.6s; }
.animate-item[data-delay="4"] { transition-delay: 0.8s; }
.animate-item[data-delay="5"] { transition-delay: 1.0s; }
.animate-item[data-delay="6"] { transition-delay: 1.2s; }

/* Enhanced sticky content styling */
#sticky-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 50%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

/* Animated gradient border */
#sticky-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent, 
    rgba(59, 130, 246, 0.1), 
    transparent, 
    rgba(14, 165, 233, 0.1), 
    transparent);
  background-size: 400% 400%;
  border-radius: inherit;
  z-index: -1;
  animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Enhanced step number styling */
.process-content .w-12.h-12 {
  background: linear-gradient(135deg, var(--step-color-from), var(--step-color-to));
  box-shadow: 
    0 8px 16px -8px var(--step-color-shadow),
    0 0 0 3px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
}

.process-content .w-12.h-12::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, transparent, var(--step-color-glow), transparent);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.process-content.active .w-12.h-12::after {
  opacity: 1;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.05); opacity: 0.6; }
}

/* Step-specific color variables */
.process-content[data-step="1"] {
  --step-color-from: #3b82f6;
  --step-color-to: #2563eb;
  --step-color-shadow: rgba(59, 130, 246, 0.4);
  --step-color-glow: rgba(59, 130, 246, 0.3);
}

.process-content[data-step="2"] {
  --step-color-from: #0ea5e9;
  --step-color-to: #0284c7;
  --step-color-shadow: rgba(14, 165, 233, 0.4);
  --step-color-glow: rgba(14, 165, 233, 0.3);
}

.process-content[data-step="3"] {
  --step-color-from: #10b981;
  --step-color-to: #059669;
  --step-color-shadow: rgba(16, 185, 129, 0.4);
  --step-color-glow: rgba(16, 185, 129, 0.3);
}

.process-content[data-step="4"] {
  --step-color-from: #f97316;
  --step-color-to: #ea580c;
  --step-color-shadow: rgba(249, 115, 22, 0.4);
  --step-color-glow: rgba(249, 115, 22, 0.3);
}

.process-content[data-step="5"] {
  --step-color-from: #8b5cf6;
  --step-color-to: #7c3aed;
  --step-color-shadow: rgba(139, 92, 246, 0.4);
  --step-color-glow: rgba(139, 92, 246, 0.3);
}

/* Enhanced image styling */
.process-content img {
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(1.05) contrast(1.1);
}

.process-content.active img {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.process-content:not(.active) img {
  transform: scale(0.95) rotate(-1deg);
  opacity: 0.7;
  filter: brightness(0.8) contrast(0.9);
}

/* Process navigation */
.process-nav-btn {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.process-nav-btn.active {
  background-color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  box-shadow: 
    0 0 0 4px rgba(59, 130, 246, 0.2),
    0 8px 25px -8px rgba(59, 130, 246, 0.6);
  transform: scale(1.3);
}

.process-nav-btn:hover:not(.active) {
  transform: scale(1.15);
  border-color: var(--primary-400) !important;
  background-color: var(--primary-100) !important;
}

/* Progress line between nav buttons */
.process-nav-btn::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--primary-200), transparent);
  transform: translateX(-50%);
  transition: all 0.4s ease;
}

.process-nav-btn:last-child::after {
  display: none;
}

.process-nav-btn.active::after {
  background: linear-gradient(to bottom, var(--primary-600), var(--primary-300));
  width: 3px;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

/* Navigation container positioning */
.process-nav {
  position: fixed;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%) translateX(1rem);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, visibility, transform;
}

/* Smooth entrance animation */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Enhanced navigation button hover effects */
.process-nav-btn {
  position: relative;
  will-change: transform, box-shadow;
}

.process-nav-btn::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.process-nav-btn:hover::before {
  opacity: 1;
}

@media (max-width: 1024px) {
  .process-nav {
    right: 1rem;
  }
}

@media (max-width: 768px) {
  .process-nav {
    display: none; /* 在移动端完全隐藏导航圆点，因为sticky滚动在移动端已禁用 */
  }
  
  /* 移动端导航样式 */
  #mobile-menu {
    transition: all 0.3s ease-in-out;
    transform: translateY(-10px);
    opacity: 0;
  }
  
  #mobile-menu:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* 移动端菜单项动画 */
  #mobile-menu a {
    transform: translateX(-20px);
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  #mobile-menu:not(.hidden) a {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* 为菜单项添加延迟动画 */
  #mobile-menu:not(.hidden) a:nth-child(1) { transition-delay: 0.1s; }
  #mobile-menu:not(.hidden) a:nth-child(2) { transition-delay: 0.2s; }
  #mobile-menu:not(.hidden) a:nth-child(3) { transition-delay: 0.3s; }
  #mobile-menu:not(.hidden) a:nth-child(4) { transition-delay: 0.4s; }
  
  /* 汉堡菜单按钮悬停效果 */
  #mobile-menu-button:hover {
    background-color: rgba(99, 102, 241, 0.1);
  }
  
  /* 移动端菜单项悬停效果增强 */
  #mobile-menu a:hover {
    background-color: rgba(99, 102, 241, 0.05);
    transform: translateX(5px);
  }
}

/* Enhanced animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Intersection Observer animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ROI stats animation */
.roi-stat {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.roi-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-500), var(--tech-500));
}

.roi-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.roi-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-600), var(--tech-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  animation: countUp 2s ease-out;
}

@keyframes countUp {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Navigation enhancements */
#navbar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Team member cards */
.team-member {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member:hover {
  transform: translateY(-8px);
}

.team-avatar {
  background: linear-gradient(135deg, var(--primary-400), var(--tech-400));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.team-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, var(--primary-500), var(--tech-500));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.team-member:hover .team-avatar::after {
  opacity: 1;
}

/* Contact form enhancements */
.form-input {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid #e5e7eb;
}

.form-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.form-input:hover {
  border-color: var(--primary-300);
}

/* Footer enhancements */
footer {
  background: linear-gradient(135deg, #1f2937, #111827);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
}

/* Responsive design helpers */
/* Process content styles */
.process-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-content.active {
  opacity: 1;
  visibility: visible;
}

/* Scroll trigger styles */
.scroll-trigger {
  position: absolute;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Animate items within process content */
.process-content .animate-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease-out;
}

.process-content.active .animate-item {
  opacity: 1;
  transform: translateY(0);
}

/* Fade out animation */
.process-content.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

/* Ensure proper spacing for sticky container */
#process {
  padding-bottom: 100vh; /* Provide enough space for sticky content */
}

/* Scroll triggers should be invisible but take space */
.scroll-triggers {
  pointer-events: none;
}

.scroll-trigger {
  opacity: 0;
}

@media (max-width: 1024px) {
  #sticky-content {
    padding: 1.5rem;
    margin: 0 1rem;
    max-height: 70vh;
    aspect-ratio: 4/3;
    max-width: calc(100vw - 2rem);
    overflow-x: hidden;
  }
  
  .process-content .grid {
    gap: 1rem;
  }
  
  #sticky-content .process-content {
    min-height: 300px;
  }
  
  /* 平板视图下ADE角色图片尺寸调整 */
  .ade-role-card {
    max-width: 320px !important;
    height: 320px !important;
  }
  
  #process-card {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  }
}

/* 中等屏幕尺寸优化 */
@media (max-width: 640px) {
  #process-card {
    max-width: calc(100vw - 1rem) !important;
    width: calc(100vw - 1rem) !important;
    margin: 0 auto !important;
    padding: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 8px 10px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  }
  
  .ade-role-card {
    max-width: 250px !important;
    height: 250px !important;
  }
  
  .process-step .grid {
    gap: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .hero-bg::before {
    animation: none;
  }
  
  .roi-number {
    font-size: 2rem;
  }
  
  .sticky {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
  
  #sticky-content {
    position: relative;
    top: auto;
    max-height: none;
    margin: 0.5rem;
    padding: 1rem;
    aspect-ratio: auto;
    min-height: auto;
    max-width: calc(100vw - 1rem);
    overflow-x: hidden;
  }
  
  #sticky-content .process-content {
    min-height: auto;
    padding: 1rem 0;
  }
  
  #sticky-content .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  
  .scroll-trigger {
    height: 50vh;
  }
  
  .process-content {
    position: relative;
    margin-bottom: 1.5rem;
  }
  
  .process-content .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .process-content:not(.active) {
    opacity: 0.6;
  }
  
  .animate-item {
    transition-delay: 0.1s !important;
  }
  
  .process-content .space-y-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .process-content .space-y-3 > * + * {
    margin-top: 0.5rem;
  }
  
  /* 手机视图下ADE角色图片尺寸调整 */
  .ade-role-card {
    width: 100% !important;
    max-width: 280px !important;
    height: 280px !important;
    margin: 0 auto !important;
  }
  
  /* 确保图片容器不会超出屏幕 */
  .ade-role-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  /* 调整sticky content容器的最大宽度 */
  #process-card {
    max-width: calc(100vw - 1rem) !important;
    width: calc(100vw - 1rem) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* 确保网格布局在手机视图下正确换行 */
  .process-step .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 调整ADE角色卡片在手机视图下的边距 */
  .ade-role-card.role-product,
  .ade-role-card.role-architect,
  .ade-role-card.role-developer,
  .ade-role-card.role-tester,
  .ade-role-card.role-devops {
    margin-right: 0 !important;
    transform: none !important;
  }
  
  /* 确保文本内容在手机视图下不会超出容器 */
  .process-step .space-y-4 {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  
  /* 调整步骤标题在手机视图下的字体大小 */
  .process-step h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  /* 调整步骤描述文本的字体大小和行高 */
  .process-step .text-gray-700 {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
  
  /* 确保渐变背景卡片在手机视图下适应 */
  .bg-gradient-to-r {
    padding: 0.75rem !important;
  }
  
  /* 调整步骤编号圆圈的大小 */
  .process-step .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* 手机端字体和间距优化 */
@media (max-width: 768px) {
  /* Hero区域优化 */
  h1 {
    font-size: 2rem !important; /* 从text-4xl调整为更小的尺寸 */
    line-height: 1.2 !important;
  }
  
  .hero-section p {
    font-size: 1rem !important; /* 从md:text-2xl调整为更小的尺寸 */
    line-height: 1.5 !important;
  }
  
  /* 功能卡片优化 */
  .grid.md\\:grid-cols-3 {
    gap: 1rem !important;
  }
  
  .grid.md\\:grid-cols-3 > div {
    padding: 1rem !important; /* 减少卡片内边距 */
  }
  
  .grid.md\\:grid-cols-3 h3 {
    font-size: 1rem !important; /* 减小卡片标题字体 */
  }
  
  .grid.md\\:grid-cols-3 p {
    font-size: 0.95rem !important; /* 调整卡片内容字体 */
  }
  
  /* 图标大小调整 */
  .fas.text-2xl {
    font-size: 1.25rem !important; /* 减小图标大小 */
  }
  
  /* 客户案例区域优化 */
  .grid.md\\:grid-cols-2 {
    gap: 1rem !important;
  }
  
  .grid.md\\:grid-cols-2 > div {
    padding: 1rem !important; /* 减少案例卡片内边距 */
  }
  
  .grid.md\\:grid-cols-2 h4 {
    font-size: 1.125rem !important; /* 减小案例标题字体 */
  }
  
  .grid.md\\:grid-cols-2 blockquote {
    font-size: 1rem !important; /* 减小引用文字字体 */
  }
  
  .grid.md\\:grid-cols-2 p {
    font-size: 0.95rem !important; /* 调整描述文字字体 */
  }
  
  /* ROI统计区域优化 */
  .grid.grid-cols-2.md\\:grid-cols-4 {
    gap: 1rem !important;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 > div {
    padding: 0.75rem !important; /* 减少统计卡片内边距 */
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 .text-4xl {
    font-size: 1.5rem !important; /* 减小统计数字字体 */
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 .text-gray-600 {
    font-size: 0.75rem !important; /* 减小统计标签字体 */
  }
  
  /* 功能特性区域优化 */
  .grid.lg\\:grid-cols-2 {
    gap: 1.5rem !important;
  }
  
  .grid.lg\\:grid-cols-2 h3 {
    font-size: 1.5rem !important; /* 减小特性标题字体 */
  }
  
  .grid.lg\\:grid-cols-2 p {
    font-size: 0.95rem !important; /* 调整特性描述字体 */
  }
  
  .grid.lg\\:grid-cols-2 .text-2xl {
    font-size: 1.25rem !important; /* 减小统计数字字体 */
  }
  
  .grid.lg\\:grid-cols-2 .text-sm {
    font-size: 0.75rem !important; /* 减小统计标签字体 */
  }
  
  /* 对比表格优化 */
  .overflow-x-auto table {
    font-size: 0.875rem !important; /* 减小表格字体 */
  }
  
  .overflow-x-auto th,
  .overflow-x-auto td {
    padding: 0.75rem 0.5rem !important; /* 减少表格单元格内边距 */
  }
  
  /* 流程区域优化 */
  .process-step h3 {
    font-size: 1.25rem !important; /* 减小流程步骤标题字体 */
  }
  
  .process-step .text-gray-700 {
    font-size: 0.95rem !important; /* 调整流程步骤描述字体 */
  }
  
  .process-step .text-2xl {
    font-size: 1.25rem !important; /* 减小流程统计数字字体 */
  }
  
  .process-step .text-sm {
    font-size: 0.75rem !important; /* 减小流程统计标签字体 */
  }
  
  /* 通用标题优化 */
  h2 {
    font-size: 1.75rem !important; /* 减小二级标题字体 */
    margin-bottom: 1rem !important; /* 减少标题下边距 */
  }
  
  h3 {
    font-size: 1.25rem !important; /* 减小三级标题字体 */
  }
  
  /* 通用段落优化 */
  p {
    font-size: 1rem !important; /* 调整段落字体为更合适的大小 */
    line-height: 1.6 !important;
  }
  
  /* 按钮优化 */
  .bg-primary-600,
  .bg-primary-700 {
    padding: 0.5rem 1rem !important; /* 减少按钮内边距 */
    font-size: 0.875rem !important; /* 减小按钮字体 */
  }
  
  /* 容器内边距优化 */
  .max-w-7xl {
    padding-left: 1rem !important; /* 减少容器左右内边距 */
    padding-right: 1rem !important;
  }
  
  .py-20 {
    padding-top: 2rem !important; /* 减少容器上下内边距 */
    padding-bottom: 2rem !important;
  }
  
  .py-32 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .mb-16 {
    margin-bottom: 2rem !important; /* 减少元素下边距 */
  }
  
  .mb-20 {
    margin-bottom: 2.5rem !important;
  }
  
  .mb-24 {
    margin-bottom: 3rem !important;
  }
}

/* 超小屏幕优化 (320px - 480px) */
@media (max-width: 480px) {
  #process-card {
    padding: 0.5rem !important;
    margin: 0.25rem !important;
    max-width: calc(100vw - 0.5rem) !important;
    width: calc(100vw - 0.5rem) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  }
  
  .ade-role-card {
    max-width: 200px !important;
    height: 200px !important;
  }
  
  /* 进一步减小超小屏幕的字体 */
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  p {
    font-size: 0.9rem !important; /* 调整超小屏幕段落字体 */
  }
  
  .process-step h3 {
    font-size: 1.125rem !important;
  }
  
  .process-step .text-gray-700 {
    font-size: 0.85rem !important; /* 调整超小屏幕流程步骤描述字体 */
  }
  
  /* 进一步减少内边距 */
  .py-20 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .py-32 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .mb-16 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-20 {
    margin-bottom: 2rem !important;
  }
  
  .mb-24 {
    margin-bottom: 2.5rem !important;
  }
  
  .process-step .w-12.h-12 {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
  }
  
  .bg-gradient-to-r {
    padding: 0.5rem !important;
  }
  
  /* 导航栏优化 */
  .navbar {
    padding: 0.5rem 0 !important;
  }
  
  .navbar .max-w-7xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* 移动端菜单优化 */
  #mobile-menu {
    padding: 0.5rem !important;
  }
  
  #mobile-menu a {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* 客户Logo轮播优化 - 调整logo大小和间距 */
  .logo-grayscale {
    height: 2rem !important; /* 手机端logo大小 */
  }
  
  .logo-container {
    gap: 2rem !important; /* 手机端适中间距 */
    /* min-width 由JavaScript动态设置 */
  }
  
  /* 手机端logo轮播动画调整 - 由JavaScript动态控制 */
  
  /* 成功案例卡片优化 */
  .grid.md\\:grid-cols-3 {
    gap: 0.75rem !important;
  }
  
  .grid.md\\:grid-cols-3 > div {
    padding: 0.75rem !important;
  }
  
  .grid.md\\:grid-cols-3 h4 {
    font-size: 1rem !important;
  }
  
  .grid.md\\:grid-cols-3 p {
    font-size: 0.85rem !important; /* 调整超小屏幕卡片内容字体 */
  }
  
  .grid.md\\:grid-cols-3 .text-lg {
    font-size: 1rem !important;
  }
  
  /* 投资回报周期卡片优化 */
  .grid.md\\:grid-cols-3 .bg-green-50,
  .grid.md\\:grid-cols-3 .bg-blue-50,
  .grid.md\\:grid-cols-3 .bg-purple-50 {
    padding: 0.75rem !important;
  }
  
  .grid.md\\:grid-cols-3 .text-2xl {
    font-size: 1.25rem !important;
  }
  
  .grid.md\\:grid-cols-3 .text-sm {
    font-size: 0.75rem !important;
  }
  
  /* 特性图标优化 */
  .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  .w-16.h-16 i {
    font-size: 1.25rem !important;
  }
  
  /* 特性统计卡片优化 */
  .grid.grid-cols-2 > div {
    padding: 0.75rem !important;
  }
  
  .grid.grid-cols-2 .text-2xl {
    font-size: 1.25rem !important;
  }
  
  .grid.grid-cols-2 .text-sm {
    font-size: 0.75rem !important;
  }
  
  /* 流程步骤编号圆圈优化 */
  .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* 流程步骤内容优化 */
  .space-y-4 > * + * {
    margin-top: 0.75rem !important;
  }
  
  .space-y-3 > * + * {
    margin-top: 0.5rem !important;
  }
  
  /* 渐变背景卡片优化 */
  .bg-gradient-to-r {
    padding: 0.75rem !important;
  }
  
  .bg-gradient-to-r h5 {
    font-size: 0.875rem !important;
  }
  
  .bg-gradient-to-r p {
    font-size: 0.75rem !important;
  }
  
  /* 联系我们区域优化 */
  .bg-white.rounded-xl {
    padding: 1.5rem !important;
  }
  
  .bg-white.rounded-xl h3 {
    font-size: 1.5rem !important;
  }
  
  .bg-white.rounded-xl p {
    font-size: 0.875rem !important;
  }
  
  /* 表单元素优化 */
  input, textarea, select {
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* 页脚优化 */
  footer {
    padding: 1.5rem 0 !important;
  }
  
  footer .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  footer h3 {
    font-size: 1rem !important;
  }
  
  footer p, footer a, footer li {
    font-size: 0.8rem !important;
  }
}

/* 中等屏幕优化 (481px - 640px) */
@media (max-width: 640px) and (min-width: 481px) {
  /* 适中的字体大小调整 */
  h1 {
    font-size: 2.25rem !important;
  }
  
  h2 {
    font-size: 1.875rem !important;
  }
  
  h3 {
    font-size: 1.375rem !important;
  }
  
  p {
    font-size: 0.95rem !important; /* 调整中等屏幕段落字体 */
  }
  
  /* 适中的内边距调整 */
  .py-20 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  
  .py-32 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }
  
  .mb-16 {
    margin-bottom: 2.25rem !important;
  }
  
  .mb-20 {
    margin-bottom: 2.75rem !important;
  }
  
  .mb-24 {
    margin-bottom: 3.25rem !important;
  }
  
  /* 卡片内边距适中调整 */
  .grid.md\\:grid-cols-3 > div,
  .grid.md\\:grid-cols-2 > div {
    padding: 1.25rem !important;
  }
  
  /* 统计数字适中调整 */
  .text-4xl {
    font-size: 1.75rem !important;
  }
  
  .text-2xl {
    font-size: 1.375rem !important;
  }
  
  /* 图标适中调整 */
  .w-16.h-16 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
  
  .w-12.h-12 {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
}

/* Loading states */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus styles for keyboard navigation */
.focus\:ring-2:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-500);
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid;
  }
  
  .feature-card {
    border-width: 2px;
  }
}

/* Additional Browser Compatibility */

/* IE11 Grid fallbacks */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .grid > * {
    flex: 1;
    min-width: 250px;
    margin: 0.5rem;
  }
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(10px)) {
  .backdrop-blur-md {
    background: rgba(255, 255, 255, 0.95) !important;
  }
  
  .backdrop-blur-sm {
    background: rgba(255, 255, 255, 0.9) !important;
  }
}

/* CSS Variables fallback for older browsers */
.no-css-vars {
  /* Fallback colors for browsers without CSS custom property support */
  --primary-500: #3b82f6;
  --tech-500: #0ea5e9;
  --primary-600: #2563eb;
  --tech-600: #0284c7;
}

/* Flexbox gap fallback */
@supports not (gap: 1rem) {
  .flex.gap-4 > * + * {
    margin-left: 1rem;
  }
  
  .flex.flex-col.gap-4 > * + * {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* 小屏幕优化 (320px - 480px) */
@media (max-width: 480px) {
  /* 小屏幕logo轮播优化 - 保持logo大小，调整间距 */
  .logo-container {
    gap: 1rem !important; /* 小屏幕较小间距 */
  }
}

/* 超小屏幕优化 (320px以下) */
@media (max-width: 320px) {
  /* 超小屏幕logo轮播优化 - 保持logo大小，最小间距 */
  .logo-container {
    gap: 0.75rem !important; /* 超小间距 */
  }
}

/* Object-fit fallback */
@supports not (object-fit: cover) {
  .object-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
  }
}