* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #e2e8f0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #1a1a2e 100%);
  background-size: 400% 400%;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  pointer-events: none;
  z-index: 0;
}

/* Ensure all content is above the grid */
body > * {
  position: relative;
  z-index: 1;
}

/* Ripple Effect Styles */
.ripple {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(165, 180, 252, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::before {
  width: 300px;
  height: 300px;
  transition: width 0s, height 0s;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(165, 180, 252, 0.4);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Apply ripple to clickable elements */
.cta-button,
.login-btn,
.register-btn,
.logout-btn,
.language-switcher,
.pricing-button,
.feature-card,
.about-card,
.pricing-card,
.feature-module,
.feature-item,
.feature-list .feature-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

/* Enhanced hover effects with ripple */
.cta-button:hover,
.login-btn:hover,
.register-btn:hover,
.logout-btn:hover,
.language-switcher:hover,
.pricing-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(165, 180, 252, 0.4);
}

.feature-card:hover,
.about-card:hover,
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(165, 180, 252, 0.3);
}

.feature-module:hover {
  transform: translateY(-3px);
}

/* Ripple animation keyframes - enhanced */
@keyframes ripple-animation {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Prevent text selection during ripple */
.ripple-effect {
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header {
  background: rgba(15, 20, 35, 0.95);
  backdrop-filter: blur(15px);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(102, 126, 234, 0.4);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #a5b4fc;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(165, 180, 252, 0.4));
  transition: all 0.3s ease;
}

.logo:hover {
  transform: translateY(-1px);
  color: #c084fc;
}

.logo:hover img {
  filter: drop-shadow(0 4px 12px rgba(165, 180, 252, 0.6));
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: #cbd5e1;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #a5b4fc;
}

/* Auth Section */
.auth-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.login-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login-btn,
.register-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn:hover,
.register-btn:hover {
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.login-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.login-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.btn-loading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(165, 180, 252, 0.3);
  border-top: 2px solid #a5b4fc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 0.85rem;
}

.register-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

.register-btn:hover {
  background: linear-gradient(135deg, #ee5a24, #d63031);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-name {
  color: #f1f5f9;
  font-weight: 500;
  padding: 8px 12px;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 15px;
  font-size: 0.9rem;
}

.logout-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: linear-gradient(135deg, #ee5a24, #d63031);
  transform: translateY(-2px);
}

/* Language Toggle */
.language-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.language-switcher {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.language-switcher:hover {
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Hero Section */
.hero {
  padding: 100px 0 60px;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 50%, rgba(15, 52, 96, 0.95) 100%);
  backdrop-filter: blur(20px);
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-hero" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-hero)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* Typewriter Effect */
.typewriter-container {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  color: #f1f5f9;
  min-height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  flex-wrap: wrap;
}

.typewriter-text {
  background: linear-gradient(135deg, #ffffff 0%, #667eea 50%, #f093fb 100%);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease-in-out infinite;
  position: relative;
  text-shadow: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  display: inline-block;
}

.typewriter-cursor {
  color: #ffffff;
  font-weight: 300;
  animation: simpleBlink 1.2s ease-in-out infinite;
  margin-left: 3px;
  display: inline-block;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  color: #f1f5f9;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #cbd5e1;
}

.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 18px 45px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.4s ease;
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

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

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.5);
  border-color: rgba(165, 180, 252, 0.3);
}

/* Features Section */
.features {
  padding: 80px 0; /* 增加上下padding，为hover效果留空间 */
  background: rgba(15, 20, 35, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(102, 126, 234, 0.2);
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
  position: relative;
}

.features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-features" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-features)"/></svg>');
  opacity: 0.5;
  pointer-events: none;
}

.features > * {
  position: relative;
  z-index: 1;
}

.section-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  color: #f1f5f9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.features-grid {
  display: flex;
  gap: 2rem;
  margin: 3rem 0 2rem 0; /* 增加下边距，确保hover时不超出 */
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 15px 0; /* 添加上下内边距为hover效果预留空间 */
}

/* 轮播容器渐变边缘效果 */
.features-grid::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, rgba(15, 20, 35, 0.9), transparent);
  z-index: 2;
  pointer-events: none;
}

.features-grid::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, rgba(15, 20, 35, 0.9), transparent);
  z-index: 2;
  pointer-events: none;
}

/* 轮播内容容器 */
.features-carousel {
  display: flex;
  gap: 2rem;
  animation: carousel-scroll 25s linear infinite;
  width: calc(320px * 12 + 2rem * 11); /* 6个卡片重复2次 */
}

@keyframes carousel-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-320px * 6 - 2rem * 5)); /* 滚动一个周期的距离 */
  }
}

/* 暂停动画效果 */
.features-carousel:hover {
  animation-play-state: paused;
}

.feature-card {
  background: rgba(30, 41, 59, 0.9);
  backdrop-filter: blur(15px);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.2);
  flex: 0 0 320px; /* 固定宽度，不缩放 */
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-card:hover {
  transform: translateY(-8px); /* 稍微减少移动距离，避免超出 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.4);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: white;
  box-shadow: 0 8px 20px rgba(165, 180, 252, 0.3);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f1f5f9;
}

.feature-card p {
  color: #cbd5e1;
  line-height: 1.6;
}

/* Benefits Section */
.benefits {
  padding: 80px 0;
  background: rgba(15, 20, 35, 0.9);
  color: #e2e8f0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.benefit-item {
  text-align: center;
  padding: 1.5rem;
}

.benefit-number {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.benefit-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

/* Pricing Section */
.pricing {
  padding: 60px 0;
  background: rgba(10, 15, 30, 0.98);
  backdrop-filter: blur(20px);
  position: relative;
}

.pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-pricing" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(139,92,246,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-pricing)"/></svg>');
  opacity: 0.4;
  pointer-events: none;
}

.pricing > * {
  position: relative;
  z-index: 1;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.pricing-card {
  background: rgba(30, 41, 59, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  position: relative;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.4);
}

.pricing-card.featured {
  border: 3px solid #a5b4fc;
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(165, 180, 252, 0.3);
}

.pricing-header h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f1f5f9;
}

.price {
  font-size: 2.5rem;
  font-weight: bold;
  color: #a5b4fc;
  margin-bottom: 1.5rem;
}

.price span {
  font-size: 1rem;
  color: #94a3b8;
}

.popular {
  position: absolute;
  top: -10px;
  right: 20px;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pricing-features {
  list-style: none;
  margin: 2rem 0;
  text-align: left;
}

.pricing-features li {
  padding: 0.5rem 0;
  color: #cbd5e1;
}

.pricing-button {
  display: inline-block;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  transition: transform 0.3s;
  box-shadow: 0 4px 15px rgba(165, 180, 252, 0.3);
}

.pricing-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(165, 180, 252, 0.4);
}

/* Financial Section */
.financial {
  padding: 80px 0;
  background: rgba(15, 20, 35, 0.9);
  color: #e2e8f0;
}

.financial-assumptions {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%);
  border-left: 4px solid #667eea;
  padding: 25px;
  margin: 30px 0;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.financial-assumptions h3 {
  margin-bottom: 15px;
  color: #f1f5f9;
  font-size: 1.2rem;
}

.assumptions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assumption-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.assumption-label {
  font-weight: bold;
  color: #6c5ce7;
  min-width: 150px;
}

.assumption-value {
  color: #4a5568;
  line-height: 1.5;
}

.financial-table {
  margin-top: 40px;
  overflow-x: auto;
}

.revenue-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.table-header {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%);
  color: #f1f5f9;
}

.table-header th {
  padding: 20px 15px;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
}

.revenue-source {
  text-align: left !important;
}

.revenue-row td {
  padding: 25px 20px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.3);
  text-align: center;
  transition: background-color 0.3s ease;
  color: #f1f5f9;
}

.revenue-row:hover td {
  background-color: rgba(51, 65, 85, 0.5);
}

.source-name {
  text-align: left !important;
  font-weight: 600;
  color: #f1f5f9;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%);
}

.source-detail {
  font-size: 0.9rem;
  color: #667eea;
  font-weight: 600;
}

.revenue-amount {
  font-weight: 700;
  color: #f1f5f9;
  font-size: 1.15rem;
  position: relative;
}

.revenue-amount::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
  opacity: 0.7;
}

.calculation {
  font-size: 0.85rem;
  color: #718096;
  font-weight: normal;
  display: block;
  margin-top: 5px;
}

.total-row {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%);
  color: #f1f5f9;
}

.total-row td {
  padding: 30px 20px;
  font-weight: 800;
  font-size: 1.3rem;
  border: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.total-label {
  text-align: left !important;
}

.total-amount {
  text-align: center;
}

/* Feature Modules Section */
.feature-modules {
  padding: 40px 0;
  background: rgba(10, 15, 30, 0.98);
  backdrop-filter: blur(20px);
  position: relative;
}

.feature-modules::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-modules" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(100,116,139,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-modules)"/></svg>');
  opacity: 0.4;
  pointer-events: none;
}

.feature-modules > * {
  position: relative;
  z-index: 1;
}

.feature-module {
  background: rgba(15, 20, 35, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(102, 126, 234, 0.15);
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(102, 126, 234, 0.25);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  filter: blur(5px);
}

.feature-module.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.feature-module:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.5);
}

.module-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  padding: 0.5rem 1rem; /* 减少上下padding，增加左右padding */
  text-align: left; /* 居左对齐 */
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid rgba(102, 126, 234, 0.3);
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.feature-module.animate-in .module-header {
  opacity: 1;
  transform: translateX(0);
}

.module-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-header" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(102,126,234,0.2)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-header)"/></svg>');
  opacity: 0.4;
}

.module-header > * {
  position: relative;
  z-index: 1;
}

.module-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem; /* 图标和标题之间的间距 */
  display: inline-block; /* 让图标和标题在同一行 */
  opacity: 0.9;
  vertical-align: middle; /* 垂直居中对齐 */
}

.module-title {
  font-size: 0.9rem; /* 减小标题字号 */
  font-weight: 600;
  margin-bottom: 0.3rem; /* 调整下边距为描述预留空间 */
  color: #e2e8f0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  display: inline-block; /* 让标题和图标在同一行 */
  vertical-align: middle; /* 垂直居中对齐 */
}

.module-description {
  font-size: 0.75rem;
  opacity: 0.8;
  max-width: 350px;
  margin: 0; /* 居左对齐，移除auto */
  line-height: 1.3;
  color: #cbd5e1;
  display: block; /* 确保描述独占一行 */
  clear: both; /* 清除浮动影响 */
}

.module-content {
  padding: 1.2rem; /* 增加内边距，让模块更饱满 */
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.feature-module.animate-in .module-content {
  opacity: 1;
  transform: translateX(0);
}

/* New Module Layout Styles */
.module-layout {
  display: grid;
  grid-template-columns: 2fr 2.8fr; /* 右侧更宽，展示更丰富 */
  gap: 0.6rem; /* 适当增加间距 */
  align-items: flex-start; /* 顶部对齐而不是居中 */
  min-height: 280px; /* 增加最小高度让模块更饱满 */
}

.module-left {
  padding-right: 0.5rem; /* 减少右边距 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 确保左侧内容顶部对齐 */
}

.module-right {
  padding-left: 0.5rem; /* 减少左边距 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 改为顶部对齐 */
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* 增加功能项间距，让布局更舒展 */
  height: 100%; /* 充分利用高度 */
  justify-content: flex-start; /* 确保从顶部开始排列 */
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Visual Demo Styles */
.visual-demo {
  height: 100%;
  min-height: 400px; /* 增加最小高度，让右侧更饱满 */
  display: flex;
  align-items: flex-start; /* 改为顶部对齐 */
  justify-content: center; /* 水平居中保持 */
  padding: 1.5rem 1rem; /* 增加内边距，让内容更饱满 */
  background: rgba(15, 20, 35, 0.4);
  border-radius: 10px;
}

/* Phone Mockup Styles */
.phone-mockup {
  width: 380px;
  height: 520px;
  background: linear-gradient(145deg, #0f0f0f 0%, #1a1a1a 50%, #2d2d2d 100%);
  border-radius: 35px;
  padding: 25px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(102, 126, 234, 0.2);
}

.phone-header {
  background: rgba(30, 41, 59, 0.9);
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 12px;
  margin-bottom: 10px;
}

.app-title {
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.ai-badge {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 10px;
  margin-top: 5px;
  display: inline-block;
}

.phone-content {
  height: 320px;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 15px;
  padding: 15px;
  overflow-y: auto;
}

.chat-interface {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message {
  display: flex;
  align-items: flex-start;
}

.customer-message .message-bubble {
  background: rgba(102, 126, 234, 0.2);
  color: #fff;
  padding: 10px 12px;
  border-radius: 15px 15px 5px 15px;
  max-width: 200px;
  font-size: 12px;
  margin-left: auto;
}

.ai-suggestion {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}

.suggestion-label {
  color: #4caf50;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 5px;
}

.suggestion-text {
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.suggestion-quality {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #ccc;
}

.score {
  color: #4caf50;
  font-weight: 600;
}

.feature-item {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(51, 65, 85, 0.8) 100%);
  backdrop-filter: blur(10px);
  padding: 1.8rem;
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
}

.feature-module.animate-in .feature-item:nth-child(1) {
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}

.feature-module.animate-in .feature-item:nth-child(2) {
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.0s forwards;
}

.feature-module.animate-in .feature-item:nth-child(3) {
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
}

.feature-module.animate-in .feature-item:nth-child(4) {
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s forwards;
}
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: bottom;
}

.feature-item:hover::before {
  transform: scaleY(1);
}

.feature-item:hover {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(71, 85, 105, 0.95) 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
}

.feature-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.8rem;
  position: relative;
}

.feature-item p {
  color: #cbd5e1;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Blog Section */
.blog-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.blog-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="blog-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23blog-grid)"/></svg>');
  opacity: 0.3;
}

.blog-section > .container {
  position: relative;
  z-index: 1;
}

.blog-header {
  text-align: center;
  margin-bottom: 4rem;
}

.blog-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 1rem auto 0;
  line-height: 1.6;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.blog-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  color: #2d3748;
  position: relative;
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.featured-blog {
  grid-column: span 1;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.blog-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.blog-visual {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* AI Visual */
.ai-visual {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  position: relative;
}

.ai-nodes {
  display: flex;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation: pulse 2s infinite;
}

.node:nth-child(2) {
  animation-delay: 0.5s;
  transform: scale(1.2);
}

.node:nth-child(3) {
  animation-delay: 1s;
}

.ai-connections {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 2px;
}

.connection {
  position: absolute;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  animation: flow 3s infinite;
}

.connection:first-child {
  width: 60px;
  left: 20%;
}

.connection:last-child {
  width: 60px;
  right: 20%;
  animation-delay: 1.5s;
}

/* Success Visual */
.success-visual {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.chart-bars {
  display: flex;
  gap: 8px;
  align-items: end;
  height: 80px;
}

.bar {
  width: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px 4px 0 0;
  animation: grow 2s ease-out infinite;
}

.bar:nth-child(2) {
  animation-delay: 0.5s;
}

.bar:nth-child(3) {
  animation-delay: 1s;
}

.growth-arrow {
  font-size: 2rem;
  color: white;
  font-weight: bold;
  animation: bounce 2s infinite;
}

/* Guide Visual */
.guide-visual {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  flex-direction: column;
  gap: 1.5rem;
}

.guide-steps {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}

.step.active {
  background: rgba(255, 255, 255, 0.9);
  color: #f5576c;
  transform: scale(1.2);
}

.step-line {
  width: 30px;
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.step-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  animation: progress 3s infinite;
}

.guide-progress {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.guide-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  animation: loading 2s ease-in-out infinite;
}

.blog-date {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.blog-content {
  padding: 2rem;
}

.blog-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #2d3748;
  line-height: 1.4;
}

.blog-content p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.blog-tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.tag {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.blog-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e2e8f0;
  padding-top: 1rem;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  margin-left: 1rem;
}

.author-name {
  font-weight: 600;
  color: #2d3748;
  font-size: 0.9rem;
}

.read-more {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: #5a67d8;
}

.blog-footer {
  text-align: center;
}

.view-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 1rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-block;
  backdrop-filter: blur(10px);
}

.view-all-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Animations */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes flow {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.2);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes loading {
  0%,
  100% {
    width: 30%;
  }
  50% {
    width: 80%;
  }
}

/* Typewriter Animations */
@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes smoothBlink {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

@keyframes simpleBlink {
  0%,
  40% {
    opacity: 1;
  }
  50%,
  90% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

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

@keyframes pulse-glow {
  0%,
  100% {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(102, 126, 234, 0.6);
  }
  50% {
    text-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 50px rgba(102, 126, 234, 0.8), 0 0 75px rgba(240, 147, 251, 0.6);
  }
}

/* Module animation keyframes */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Visual Demo Animation */
.visual-demo {
  opacity: 0 !important;
  transform: scale(0.95) translateX(30px) !important;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.0s !important;
}

.feature-module.animate-in .visual-demo {
  opacity: 1 !important;
  transform: scale(1) translateX(0) !important;
}

/* Legacy Feature List Support */
.feature-list {
  background: rgba(15, 20, 35, 0.9);
}

.feature-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.feature-category {
  background: rgba(15, 20, 35, 0.9);
  padding: 2rem;
  border-radius: 15px;
  border-left: 4px solid #a5b4fc;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.feature-category h3 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #f1f5f9;
}

.feature-category ul {
  list-style: none;
}

.feature-category li {
  padding: 0.5rem 0;
  color: #cbd5e1;
  position: relative;
  padding-left: 1.5rem;
}

.feature-category li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #a5b4fc;
  font-weight: bold;
}

/* About Section */
.about {
  padding: 60px 0;
  background: rgba(10, 15, 30, 0.98);
  backdrop-filter: blur(20px);
  position: relative;
}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-about" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(34,197,94,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-about)"/></svg>');
  opacity: 0.4;
  pointer-events: none;
}

.about > * {
  position: relative;
  z-index: 1;
}

.about-content {
  margin-top: 2rem;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.about-card {
  background: rgba(30, 41, 59, 0.9);
  backdrop-filter: blur(15px);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.about-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.4);
}

.about-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: white;
  box-shadow: 0 8px 20px rgba(165, 180, 252, 0.3);
}

.about-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f1f5f9;
}

.about-card p {
  color: #cbd5e1;
  line-height: 1.6;
}

.team-section {
  background: rgba(15, 20, 35, 0.9);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.team-section h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #a5b4fc;
}

.team-section p {
  color: #cbd5e1;
  line-height: 1.6;
}

/* Partnership Section */
.partnership {
  padding: 80px 0;
  background: rgba(15, 20, 35, 0.9);
}

.partnership-content {
  margin-top: 2rem;
}

.partnership-intro {
  text-align: center;
  margin-bottom: 3rem;
}

.partnership-intro p {
  font-size: 1.2rem;
  color: #4a5568;
  line-height: 1.6;
}

.partnership-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.partnership-card {
  background: rgba(15, 20, 35, 0.9);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.partnership-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.5);
}

.partnership-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.8rem;
  color: white;
  box-shadow: 0 6px 16px rgba(165, 180, 252, 0.3);
}

.partnership-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #f1f5f9;
  text-align: center;
}

.partnership-card ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.partnership-card li {
  color: #cbd5e1;
  line-height: 1.6;
  padding: 0.3rem 0;
}

.partnership-benefits {
  text-align: center;
  padding: 0.8rem;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  border-radius: 10px;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(165, 180, 252, 0.3);
}

.partnership-contact {
  background: rgba(15, 20, 35, 0.9);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.partnership-contact h3 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #a5b4fc;
  text-align: center;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #a5b4fc, #c084fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(165, 180, 252, 0.3);
}

.step-content h4 {
  color: #f1f5f9;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.step-content p {
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.4;
}

.contact-info {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(102, 126, 234, 0.3);
}

.contact-info p {
  color: #cbd5e1;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* CTA Section */
.cta-section {
  padding: 60px 0;
  background: rgba(15, 20, 35, 0.98);
  backdrop-filter: blur(20px);
  color: #f1f5f9;
  text-align: center;
  position: relative;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-cta" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(236,72,153,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-cta)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.cta-section > * {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  color: #f1f5f9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.cta-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  color: #cbd5e1;
}

/* Footer */
footer {
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(20px);
  color: #94a3b8;
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid rgba(102, 126, 234, 0.3);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid-footer" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M 25 0 L 0 0 0 25" fill="none" stroke="rgba(71,85,105,0.2)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid-footer)"/></svg>');
  opacity: 0.5;
  pointer-events: none;
}

footer > * {
  position: relative;
  z-index: 1;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3 {
  margin-bottom: 1rem;
  color: #a5b4fc;
}

.footer-section p,
.footer-section a {
  color: #94a3b8;
  text-decoration: none;
  line-height: 1.8;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: #a5b4fc;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(102, 126, 234, 0.3);
  padding-top: 2rem;
  color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1,
  .typewriter-container {
    font-size: 2.5rem;
  }

  .typewriter-text.typing {
    animation: typing 2.5s steps(30, end) forwards, gradientShift 4s ease-in-out infinite 2.5s;
  }

  .nav-links {
    display: none;
  }

  .auth-section {
    gap: 0.5rem;
  }

  .login-section {
    flex-direction: column;
    gap: 0.3rem;
  }

  .login-btn,
  .register-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-width: 70px;
  }

  .loading-spinner {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
  }

  .loading-text {
    font-size: 0.75rem;
  }

  .user-name {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  .logout-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .partnership-types {
    grid-template-columns: 1fr;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .features-grid {
    overflow: hidden; /* 移动端保持轮播效果 */
    margin: 2rem 0 1.5rem 0; /* 移动端调整边距 */
    padding: 12px 0; /* 移动端padding */
  }

  .features-carousel {
    width: calc(280px * 12 + 1.5rem * 11); /* 移动端调整宽度 */
  }

  @keyframes carousel-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-280px * 6 - 1.5rem * 5));
    }
  }

  .feature-card {
    flex: 0 0 280px;
    min-height: 260px;
    padding: 1.5rem;
  }

  .feature-card:hover {
    transform: translateY(-6px); /* 移动端减少hover移动距离 */
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.featured {
    transform: none;
  }

  .feature-categories {
    grid-template-columns: 1fr;
  }

  /* Feature Modules Mobile Styles */
  .feature-modules {
    padding: 30px 0;
  }

  .feature-module {
    margin-bottom: 2rem;
    border-radius: 15px;
  }

  .module-header {
    padding: 0.4rem 1rem; /* 移动端也减少上下padding */
  }

  .module-icon {
    font-size: 1.6rem; /* 移动端稍小的图标 */
    margin-right: 0.4rem; /* 移动端图标和标题间距 */
    display: inline-block;
    vertical-align: middle;
  }

  .module-title {
    font-size: 1rem; /* 移动端也减小标题 */
    margin-bottom: 0.3rem; /* 为描述预留空间 */
    display: inline-block; /* 移动端也让标题和图标在同一行 */
    vertical-align: middle;
  }

  .module-description {
    font-size: 0.9rem; /* 移动端描述字体大小 */
    margin: 0; /* 移动端也居左对齐 */
    display: block;
    clear: both;
  }

  .module-content {
    padding: 1rem; /* 移动端保持舒适的内边距 */
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .feature-item {
    padding: 1.5rem;
  }

  .feature-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
  }

  .feature-item p {
    font-size: 0.9rem;
  }

  /* Blog Section Mobile Styles */
  .blog-section {
    padding: 40px 0;
  }

  .blog-header {
    margin-bottom: 2.5rem;
  }

  .blog-subtitle {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .blog-card {
    border-radius: 15px;
  }

  .blog-image {
    height: 150px;
  }

  .node {
    width: 30px;
    height: 30px;
  }

  .ai-nodes {
    gap: 1.5rem;
  }

  .chart-bars {
    height: 60px;
  }

  .bar {
    width: 15px;
  }

  .growth-arrow {
    font-size: 1.5rem;
  }

  .guide-steps {
    gap: 0.5rem;
  }

  .step {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .step-line {
    width: 20px;
  }

  .guide-progress {
    width: 60px;
  }

  .blog-content {
    padding: 1.5rem;
  }

  .blog-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .blog-content p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .blog-tags {
    margin-bottom: 1rem;
  }

  .tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
  }

  .author-avatar {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }

  .author-name {
    font-size: 0.8rem;
  }

  .read-more {
    font-size: 0.8rem;
  }

  .view-all-btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }

  .feature-list .feature-item {
    padding: 16px; /* 移动端保持合理的内边距 */
  }

  .feature-list .feature-item h4 {
    font-size: 15px; /* 移动端标题大小 */
    margin-bottom: 8px; /* 移动端标题下边距 */
  }

  .feature-list .feature-item p {
    font-size: 13px; /* 移动端描述文字大小 */
    line-height: 1.5; /* 移动端行高 */
  }

  .visual-demo {
    min-height: 350px; /* 移动端增加高度 */
    padding: 1rem; /* 移动端增加内边距 */
    align-items: flex-start; /* 移动端也顶部对齐 */
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .assumption-item {
    flex-direction: column;
    gap: 5px;
  }

  .assumption-label {
    min-width: auto;
  }

  .revenue-table {
    font-size: 0.9rem;
  }

  .table-header th,
  .revenue-row td,
  .total-row td {
    padding: 15px 10px;
  }

  .revenue-amount,
  .total-amount {
    font-size: 1rem;
  }

  .calculation {
    font-size: 0.8rem;
  }

  .upgrade-plan {
    padding: 40px 0;
  }

  .upgrade-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .upgrade-categories {
    gap: 1.5rem;
  }

  .upgrade-category {
    margin-bottom: 0.5rem;
  }

  .upgrade-category h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }

  .upgrade-item {
    padding: 0.8rem;
  }

  .upgrade-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
  }

  .upgrade-item h4 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
  }

  .upgrade-item p {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .section-subtitle {
    font-size: 1rem;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
  }
}

/* Upgrade Plan Styles */
.upgrade-plan {
  padding: 60px 0;
  background: rgba(15, 20, 35, 0.9);
}

.section-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #4a5568;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.upgrade-categories {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.upgrade-category {
  margin-bottom: 1rem;
}

.upgrade-category h3 {
  font-size: 1.5rem;
  color: #f1f5f9;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
}

.upgrade-category h3::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 2px;
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.upgrade-item {
  background: rgba(30, 41, 59, 0.9);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(102, 126, 234, 0.3);
  text-align: center;
}

.upgrade-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.upgrade-icon {
  font-size: 2rem;
  margin-bottom: 0.6rem;
  display: block;
}

.upgrade-item h4 {
  font-size: 1rem;
  color: #f1f5f9;
  margin-bottom: 0.6rem;
  font-weight: 600;
  line-height: 1.3;
}

.upgrade-item p {
  color: #4a5568;
  line-height: 1.4;
  font-size: 0.85rem;
}

/* Roadmap Styles */
.roadmap {
  padding: 60px 0;
  background: linear-gradient(135deg, rgba(15, 20, 35, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.roadmap-table-container {
  overflow-x: auto;
  margin-top: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.roadmap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.roadmap-table thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.roadmap-table th {
  padding: 16px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: white;
  border: none;
}

.roadmap-table th:first-child {
  width: 18%;
  text-align: center;
}

.roadmap-table th:nth-child(2) {
  width: 28%;
  text-align: left;
}

.roadmap-table th:nth-child(3) {
  width: 12%;
  text-align: center;
}

.roadmap-table th:nth-child(4) {
  width: 42%;
  text-align: left;
}

.milestone-row {
  transition: background-color 0.3s ease;
  border-bottom: 1px solid rgba(102, 126, 234, 0.3);
}

.milestone-row:hover {
  background-color: rgba(237, 242, 247, 0.5);
}

.milestone-row.final {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
}

.milestone-row td {
  padding: 16px 12px;
  border: none;
  color: #f1f5f9;
}

.milestone-name {
  font-weight: 700;
  font-size: 1rem;
  color: #667eea;
  text-align: center;
  vertical-align: middle;
}

.milestone-modules {
  display: flex;
  flex-direction: column;
  gap: 4px;
  vertical-align: top;
}

.module-item {
  background: rgba(237, 242, 247, 0.8);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #4a5568;
  border-left: 2px solid #667eea;
}

.milestone-date {
  font-weight: 600;
  font-size: 0.95rem;
  color: #ff6b6b;
  text-align: center;
  vertical-align: middle;
  background: rgba(237, 242, 247, 0.8);
  border-radius: 6px;
  padding: 8px 6px;
}

.milestone-value {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #4a5568;
  vertical-align: top;
}

.value-item {
  background: rgba(237, 242, 247, 0.8);
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  border-left: 2px solid #ff6b6b;
  font-size: 0.85rem;
  line-height: 1.3;
}

.value-item:last-child {
  margin-bottom: 0;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .roadmap-table-container {
    overflow-x: scroll;
  }

  .roadmap-table {
    min-width: 750px;
  }

  .roadmap-table th,
  .roadmap-table td {
    padding: 14px 8px;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .roadmap {
    padding: 40px 0;
  }

  .roadmap-table {
    min-width: 650px;
  }

  .roadmap-table th,
  .roadmap-table td {
    padding: 12px 6px;
    font-size: 0.8rem;
  }

  .milestone-name {
    font-size: 0.9rem;
  }

  .module-item {
    padding: 5px 8px;
    font-size: 0.75rem;
  }

  .milestone-date {
    font-size: 0.85rem;
    padding: 6px 4px;
  }

  .milestone-value {
    font-size: 0.8rem;
  }

  .value-item {
    padding: 5px 8px;
    margin-bottom: 3px;
    font-size: 0.75rem;
  }
}

/* MCP Module Styles */
.mcp-module {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(15, 20, 35, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.mcp-diagram-container {
  background: rgba(30, 41, 59, 0.9);
  border-radius: 15px;
  padding: 3rem;
  margin: 3rem auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.3);
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  max-width: 1200px;
}

.mcp-diagram-container .mermaid {
  min-width: 800px;
  min-height: 500px;
  background: transparent;
  color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mcp-features {
  margin-top: 3rem;
}

.mcp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.mcp-feature-card {
  background: rgba(30, 41, 59, 0.9);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.mcp-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.mcp-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity 0.3s;
}

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

.mcp-feature-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.8rem;
  color: white;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.mcp-feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #f1f5f9;
  font-weight: 600;
}

.mcp-feature-card p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Dashboard Mockup Styles */
.dashboard-mockup {
  width: 480px;
  height: 360px;
  background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.dashboard-header {
  text-align: center;
  margin-bottom: 20px;
}

.dashboard-header h3 {
  color: #f1f5f9;
  font-size: 16px;
  font-weight: 600;
}

.platform-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.platform-item {
  background: rgba(102, 126, 234, 0.15);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.platform-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.platform-name {
  font-size: 10px;
  color: #cbd5e1;
  margin-bottom: 5px;
}

.platform-count {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
}

.customer-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
}

.tag-item.high-potential {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4caf50;
}

.tag-item.churn-warning {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #ff9800;
}

.tag-item.upsell {
  background: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  color: #2196f3;
}

.tag-count {
  font-weight: 600;
}

/* Analytics Dashboard Styles */
.analytics-dashboard {
  width: 480px;
  height: 340px;
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #2d2d2d 100%);
  border-radius: 20px;
  padding: 25px;
  color: white;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.dashboard-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
}

.funnel-chart {
  margin-bottom: 20px;
}

.funnel-stage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.stage-label {
  font-size: 11px;
  color: #cbd5e1;
  min-width: 60px;
}

.stage-bar {
  background: linear-gradient(135deg, #a5b4fc, #c084fc);
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 40px;
  margin-left: 10px;
  box-shadow: 0 2px 8px rgba(165, 180, 252, 0.3);
}

.conversion-rate {
  text-align: center;
  font-size: 12px;
  color: #cbd5e1;
}

.rate-value {
  color: #4caf50;
  font-weight: 600;
  font-size: 16px;
}

/* Security Dashboard Styles */
.security-dashboard {
  width: 480px;
  height: 360px;
  background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.security-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.security-header h3 {
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 600;
}

.security-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #4caf50;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.secure {
  background: #4caf50;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.asset-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  background: rgba(102, 126, 234, 0.15);
  border-radius: 10px;
  padding: 12px 8px;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.stat-icon {
  font-size: 18px;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 9px;
  color: #cbd5e1;
}

.permission-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
}

.permission-item.admin {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #f44336;
}

.permission-item.manager {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #ff9800;
}

.permission-item.sales {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4caf50;
}

.permission-count {
  font-weight: 600;
}

/* Mobile responsive for MCP module */
@media (max-width: 768px) {
  .mcp-module {
    padding: 50px 0;
  }

  .mcp-diagram-container {
    padding: 1.5rem;
    margin: 2rem auto;
    min-height: 400px;
    max-width: 100%;
  }

  .mcp-diagram-container .mermaid {
    min-width: 600px;
    min-height: 350px;
    font-size: 12px;
  }

  .mcp-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .mcp-feature-card {
    padding: 1.5rem;
  }

  .mcp-feature-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .mcp-feature-card h3 {
    font-size: 1.1rem;
  }

  .mcp-feature-card p {
    font-size: 0.9rem;
  }

  /* Module Layout Mobile Styles */
  .module-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem; /* 移动端增加间距让布局更舒展 */
    align-items: flex-start; /* 移动端也确保顶部对齐 */
    min-height: auto; /* 移动端取消最小高度限制 */
  }

  .module-left,
  .module-right {
    padding: 0;
    align-items: flex-start; /* 移动端也确保顶部对齐 */
  }

  .phone-mockup {
    width: 250px;
    height: 400px;
    padding: 15px;
  }

  .dashboard-mockup,
  .analytics-dashboard,
  .security-dashboard,
  .outreach-dashboard,
  .data-dashboard {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    height: auto;
    min-height: 280px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
  }

  .phone-mockup {
    width: 300px;
    height: 450px;
    padding: 20px;
  }
}

/* Outreach Dashboard Styles */
.outreach-dashboard {
  width: 480px;
  height: 390px;
  background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 152, 0, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.outreach-header {
  text-align: center;
  margin-bottom: 20px;
}

.outreach-header h3 {
  color: #f1f5f9;
  font-size: 16px;
  font-weight: 600;
}

.schedule-timeline {
  margin-bottom: 20px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.timeline-item:last-child {
  border-bottom: none;
}

.time-slot {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
}

.activity-type {
  background: rgba(102, 126, 234, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #a5b4fc;
  text-align: center;
}

.activity-type.message {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.activity-status {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.activity-status.scheduled {
  color: #4caf50;
}

.activity-status.pending {
  color: #ff9800;
}

.outreach-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.stat-box {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 5px;
}

.stat-text {
  font-size: 10px;
  color: #cbd5e1;
}

/* Data Dashboard Styles */
.data-dashboard {
  width: 480px;
  height: 410px;
  background: linear-gradient(135deg, rgba(15, 20, 35, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(33, 150, 243, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.dashboard-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(102, 126, 234, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.tab.active {
  background: linear-gradient(135deg, #a5b4fc, #c084fc);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(165, 180, 252, 0.4);
}

.chart-container {
  margin-bottom: 20px;
}

.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 15px;
  text-align: center;
}

.line-chart {
  height: 100px;
  background: rgba(102, 126, 234, 0.15);
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.chart-line {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #a5b4fc, #c084fc);
  transform: translateY(-50%);
}

.chart-points {
  position: relative;
  height: 100%;
}

.point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #a5b4fc;
  border-radius: 50%;
  border: 2px solid rgba(15, 20, 35, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kpi-card {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
}

.kpi-value {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 5px;
}

.kpi-label {
  font-size: 9px;
  color: #cbd5e1;
}

/* Enhanced Feature Item Styles for Left Side */
.feature-list .feature-item {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.9) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px; /* 增加圆角让视觉更柔和 */
  padding: 20px; /* 增加内边距让内容更饱满 */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影增加层次感 */
  /* 移除flex: 1，让高度由内容决定 */
}

.feature-list .feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: bottom;
}

.feature-list .feature-item:hover::before {
  transform: scaleY(1);
}

.feature-list .feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.feature-list .feature-item h4 {
  color: #f1f5f9;
  font-size: 16px; /* 增加标题字体大小 */
  font-weight: 600;
  margin-bottom: 10px; /* 增加下边距 */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.feature-list .feature-item h4::before {
  content: '✨';
  margin-right: 8px;
  font-size: 14px;
  opacity: 0.8;
}

.feature-list .feature-item p {
  color: #cbd5e1;
  font-size: 14px; /* 增加描述文字大小 */
  line-height: 1.6; /* 增加行高让文字更舒展 */
  position: relative;
  z-index: 1;
}

/* 右下角联系表单样式 */
.contact-form-widget {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 切换按钮 */
.contact-form-toggle {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact-form-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
}

.toggle-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-align: center;
}

.icon-text {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
}

.toggle-text {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.9;
}

/* 表单面板 */
.contact-form-panel {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 320px;
  background: rgba(15, 20, 35, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  max-height: 90vh;
  overflow-y: auto;
}

.contact-form-widget.active .contact-form-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* 表单头部 */
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 15px 20px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.form-header h3 {
  color: #f1f5f9;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.form-close {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 24px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.form-close:hover {
  background: rgba(102, 126, 234, 0.2);
  color: #f1f5f9;
}

/* 表单样式 */
.contact-form {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: rgba(51, 65, 85, 0.9);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #94a3b8;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading {
  color: #cbd5e1;
}

/* 成功提示样式 */
.success-message {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  margin: 20px;
  animation: successSlideIn 0.5s ease-out;
}

.success-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
}

.success-text h4 {
  color: #22c55e;
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.success-text p {
  color: #cbd5e1;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

@keyframes successSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .contact-form-widget {
    bottom: 20px;
    right: 20px;
  }

  .contact-form-toggle {
    width: 50px;
    height: 50px;
  }

  .icon-text {
    font-size: 20px;
  }

  .toggle-text {
    font-size: 8px;
  }

  .contact-form-panel {
    width: 280px;
    bottom: 70px;
    right: 0;
  }

  .form-header {
    padding: 15px;
  }

  .form-header h3 {
    font-size: 16px;
  }

  .contact-form {
    padding: 15px;
  }

  .success-message {
    padding: 15px;
    gap: 12px;
    margin: 15px;
  }

  .success-icon {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }

  .success-text h4 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .success-text p {
    font-size: 13px;
  }
}

/* 小屏幕适配 */
@media (max-width: 480px) {
  .contact-form-panel {
    width: calc(100vw - 40px);
    right: -10px;
  }
}

/* 表单动画效果 */
.contact-form-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="form-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(102,126,234,0.08)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23form-grid)"/></svg>');
  border-radius: 15px;
  opacity: 0.3;
  pointer-events: none;
}

.contact-form-panel > * {
  position: relative;
  z-index: 1;
}