/* 桐果云官网 - 产品页面样式文件 */
/* 基于平台概述.md中的产品页面设计规范 */

/* ===== 1. 产品页面特有变量 ===== */
:root {
  /* 产品页面特有颜色 - 简约配色方案 */
  --pillar-1-color: #FF7043;
  /* 业务自助能力 - 简约橙色 */
  --pillar-1-bg: #FFF3E0;
  --pillar-2-color: #42A5F5;
  /* IT管控体系 - 简约蓝色 */
  --pillar-2-bg: #E3F2FD;
  --pillar-3-color: #66BB6A;
  /* 系统集成生态 - 简约绿色 */
  --pillar-3-bg: #E8F5E9;

  /* 产品页面间距 */
  --section-spacing-xl: 6rem;
  --section-spacing-lg: 4rem;
  --section-spacing-md: 3rem;
  --section-spacing-sm: 2rem;
}

/* ===== 页面导航样式 ===== */
.page-navigation {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px;
    width: 200px;
    transition: all 0.3s ease;
    border: 1px solid var(--gray-200);
}

.page-navigation:hover,
.page-navigation.expanded {
    width: 200px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.page-navigation .nav-link span {
    opacity: 1;
    transform: translateX(0);
}

.page-navigation .nav-toggle i {
    transform: rotate(180deg);
}

.page-navigation.collapsed {
    width: 60px;
}

.page-navigation.collapsed .nav-link span {
    opacity: 0;
    transform: translateX(-10px);
}

.page-navigation.collapsed .nav-toggle i {
    transform: rotate(0deg);
}

/* 导航进度条 */
.nav-progress {
    margin-bottom: 20px;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 2px;
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
}

/* 导航链接 */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--gray-700);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.nav-link:hover {
    background: var(--light-gray);
    color: var(--primary-color);
    transform: translateX(-2px);
}

.nav-link.active {
    background: var(--primary-color);
    color: var(--white);
}

.nav-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-link span {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* 导航切换按钮 */
.nav-toggle {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray-600);
    transition: all 0.3s ease;
    z-index: 1001;
}

.nav-toggle:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .page-navigation {
        display: none;
    }
    
    .mobile-nav-toggle {
        display: block;
    }
}

/* 导航栏样式 ===== */


/* ===== 页脚样式 ===== */
.footer {
  background-color: var(--gray-900);
  color: var(--white);
  padding: 4rem 0 2rem;
}

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

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  height: 40px;
  margin-bottom: 1rem;
}

.footer-description {
  color: var(--gray-400);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--white);
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--gray-400);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--primary-color);
}

.footer-contact {
  list-style: none;
  padding: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  color: var(--gray-400);
}

.footer-contact i {
  margin-right: 0.75rem;
  color: var(--primary-color);
  margin-top: 0.25rem;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--gray-800);
  text-align: center;
  color: var(--gray-400);
}

/* 社交链接样式 */
.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--white);
  transition: all var(--transition-fast);
}

.social-link:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* 隐藏产品功能、行业实战、联系我们三个部分 */
  .footer-content>div:nth-child(2),
  .footer-content>div:nth-child(3),
  .footer-content>div:nth-child(4) {
    display: none;
  }

  /* ===== 移动端优化：模块一 - 页面英雄区域 ===== */
  .page-hero {
    min-height: 70vh;
    padding-top: 60px;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
    line-height: 1.3;
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-description {
    font-size: var(--font-size-base);
  }

  .hero-metrics {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .hero-metric {
    padding: var(--spacing-md);
  }

  .metric-value {
    font-size: var(--font-size-3xl);
  }

  /* 移动科技线条装饰到左侧 */
  .tech-lines {
    width: 30%;
    left: 0;
    right: auto;
    opacity: 0.1;
  }

  .tech-line.line-1 {
    left: 10%;
    right: auto;
  }

  .tech-line.line-2 {
    left: 20%;
    right: auto;
  }

  .tech-line.line-3 {
    left: 15%;
    right: auto;
  }

  .tech-line.line-4 {
    left: 25%;
    right: auto;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  /* ===== 移动端优化：模块二 - 三大价值支柱 ===== */
  .pillars-grid {
    gap: var(--spacing-md);
  }

  .pillar-block {
    margin-bottom: var(--spacing-md);
  }

  .pillar-block-header {
    padding: var(--spacing-lg);
  }

  .pillar-block-header .pillar-title {
    font-size: var(--font-size-xl);
  }

  .pillar-block-header .pillar-subtitle {
    font-size: var(--font-size-base);
  }

  .pillar-block-header .pillar-core-value {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
  }

  .horizontal-cards {
    grid-template-columns: 1fr;
  }

  .pillar-metrics {
    grid-template-columns: 1fr;
  }

  /* 手风琴样式 */
  .pillar-block-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 !important;
  }

  .pillar-block.active .pillar-block-content {
    max-height: 2000px;
    padding-bottom: var(--spacing-xl);
  }

  .pillar-block-header {
    cursor: pointer;
    position: relative;
  }

  .pillar-block-header::after {
    content: '+';
    position: absolute;
    right: var(--spacing-lg);
    top: 21px;
    font-size: var(--font-size-2xl);
    font-weight: 300;
    transition: transform 0.3s ease;
  }

  .pillar-block.active .pillar-block-header::after {
    content: '−';
    transform: rotate(0deg);
  }

  /* ===== 移动端优化：模块三 - 平台能力架构导图 ===== */
  .architecture-layers {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .layer-content {
    flex-direction: column;
  }

  .layer-header {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--gray-300);
    margin-right: 0;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    text-align: center;
  }

  .layer-title {
    font-size: var(--font-size-lg);
  }

  .layer-components {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    width: 100%;
  }

  .architecture-component {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-md);
  }

  .component-icon {
    margin-bottom: var(--spacing-sm);
  }

  .component-text {
    align-items: center;
  }

  /* ===== 移动端优化：模块五 - 行业应用场景 ===== */
  .industry-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .industry-card {
    margin-bottom: var(--spacing-lg);
  }

  .industry-card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }

  .industry-icon {
    margin-bottom: var(--spacing-sm);
  }

  .industry-title {
    font-size: var(--font-size-lg);
  }

  .industry-card-content {
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .industry-challenge,
  .industry-solution,
  .industry-result {
    padding: var(--spacing-md);
  }

  /* 轮播样式 */
  .industry-section {
    position: relative;
    overflow: hidden;
  }

  .industry-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }

  .industry-grid::-webkit-scrollbar {
    display: none;
  }

  .industry-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    margin-right: var(--spacing-lg);
    margin-bottom: 0;
  }

  .industry-card:last-child {
    margin-right: 0;
  }

  /* ===== 移动端优化：模块六 - 平台优势总结 ===== */
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .advantage-card {
    padding: var(--spacing-lg);
  }

  .advantage-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .advantage-title {
    font-size: var(--font-size-lg);
  }

  .advantage-description {
    font-size: var(--font-size-sm);
  }

  /* ===== 移动端优化：模块七 - 实施路径展示 ===== */
  .implementation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    position: relative;
  }

  .implementation-grid::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    opacity: 0.3;
  }

  .implementation-step {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    position: relative;
  }

  .implementation-step::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--spacing-xl) - 6px);
    top: 30px;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--primary-color);
  }

  .step-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .step-title {
    font-size: var(--font-size-lg);
  }

  .step-description {
    font-size: var(--font-size-sm);
  }

  .path-line,
  .path-dots {
    display: none;
  }

  /* ===== 移动端优化：模块八 - 客户评价展示 ===== */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .testimonial-card {
    padding: var(--spacing-lg);
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .testimonial-card:last-child {
    margin-right: 0;
  }

  /* 水平轮播样式 */
  .testimonials-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }

  .testimonials-grid::-webkit-scrollbar {
    display: none;
  }

  .client-avatar {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .client-name {
    font-size: var(--font-size-base);
  }

  /* ===== 移动端优化：模块九 - 常见问题解答 ===== */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .faq-column {
    gap: var(--spacing-md);
  }

  .faq-column-title {
    font-size: var(--font-size-lg);
  }

  .faq-question {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  .faq-answer.active {
    padding: var(--spacing-md);
  }

  /* ===== 移动端优化：模块十 - 行动号召区 ===== */
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }

  .cta-title {
    font-size: var(--font-size-2xl);
  }

  .cta-description {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 576px) {
  .footer {
    padding: 3rem 0 1.5rem;
  }

  .footer-content {
    gap: 1.5rem;
  }
}

/* ===== 2. 产品页面通用样式 ===== */
.product-section {
  padding: var(--section-spacing-xl) 0;
  position: relative;
}

.product-section-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: var(--dark);
  position: relative;
  padding-bottom: var(--spacing-md);
}

.product-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.product-section-subtitle {
  font-size: var(--font-size-lg);
  text-align: center;
  color: var(--gray-600);
  margin-bottom: var(--section-spacing-md);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ===== 3. 模块一：页面英雄区域 ===== */
.page-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background-color: var(--white);
  color: var(--dark);
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.hero-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  width: 100%;
}

/* 科技线条装饰 */
.tech-lines {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  opacity: 0.2;
}

.tech-line {
  position: absolute;
  background: var(--primary-color);
  border-radius: 2px;
  animation: float 6s ease-in-out infinite;
}

.tech-line.line-1 {
  top: 20%;
  right: 10%;
  width: 120px;
  height: 2px;
  animation-delay: 0s;
}

.tech-line.line-2 {
  top: 40%;
  right: 20%;
  width: 80px;
  height: 2px;
  animation-delay: 1s;
}

.tech-line.line-3 {
  top: 60%;
  right: 15%;
  width: 100px;
  height: 2px;
  animation-delay: 2s;
}

.tech-line.line-4 {
  top: 80%;
  right: 25%;
  width: 60px;
  height: 2px;
  animation-delay: 3s;
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 3;
}

/* 渐变文字效果 */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

.hero-subtitle {
  font-size: var(--font-size-2xl);
  color: var(--gray-600);
  margin-bottom: var(--section-spacing-md);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease 0.2s forwards;
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  margin-bottom: var(--section-spacing-md);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease 0.4s forwards;
}

/* 关键指标展示 */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--section-spacing-md);
}

.hero-metric {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--light-gray);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--transition);
}

.hero-metric:nth-child(1) {
  animation: fadeInUp 1s ease 0.6s forwards;
}

.hero-metric:nth-child(2) {
  animation: fadeInUp 1s ease 0.8s forwards;
}

.hero-metric:nth-child(3) {
  animation: fadeInUp 1s ease 1s forwards;
}

.hero-metric:hover {
  background: var(--white);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.metric-value {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.metric-label {
  font-size: var(--font-size-base);
  color: var(--gray-600);
}

/* 数字滚动动画 */
.counter-animation {
  transition: all 1s ease;
}

/* 英雄区行动按钮 */
.hero-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease 1.2s forwards;
}

.hero-actions .btn {
  padding: 1rem 2rem;
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-lg);
}

/* ===== 4. 模块二：三大价值支柱深度解析 ===== */
.pillars-section {
  background-color: var(--light-gray);
}

.pillars-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* 支柱块网格 - 垂直排列 */
.pillars-grid {
  display: flex;
  flex-direction: column;
  gap: var(--section-spacing-lg);
  margin-top: var(--section-spacing-md);
}

/* 支柱块样式 - 简约设计 */
.pillar-block {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all var(--transition);
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
  background: var(--white);
  border: 1px solid var(--gray-100);
}

.pillar-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 支柱一：业务自助能力体系 */
.pillar-1 {
  /* 去掉顶部边框颜色 */
}

/* 支柱二：IT管控体系 */
.pillar-2 {
  /* 去掉顶部边框颜色 */
}

/* 支柱三：系统集成生态 */
.pillar-3 {
  /* 去掉顶部边框颜色 */
}

/* 支柱块头部 - 极简设计，无图标，标题突出 */
.pillar-block-header {
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  background: var(--white);
}

/* 完全移除图标，让视觉焦点完全在标题上 */
.pillar-block-header .pillar-icon {
  display: none;
}

.pillar-block-header .pillar-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--gray-700);
  /* 改为更柔和的灰色，参考首页样式 */
  position: relative;
  padding-bottom: var(--spacing-sm);
  line-height: 1.4;
  /* 增加标题行高，更舒适 */
}

.pillar-block-header .pillar-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
}

.pillar-1 .pillar-block-header .pillar-title::after {
  background: var(--pillar-1-color);
}

.pillar-2 .pillar-block-header .pillar-title::after {
  background: var(--pillar-2-color);
}

.pillar-3 .pillar-block-header .pillar-title::after {
  background: var(--pillar-3-color);
}

.pillar-block-header .pillar-subtitle {
  font-size: var(--font-size-lg);
  /* 增大字体 */
  color: var(--gray-600);
  /* 改为更浅的灰色，参考首页平台能力快览样式 */
  line-height: 1.8;
  /* 增加行高，更舒适 */
  margin-bottom: var(--spacing-lg);
  /* 增加间距 */
  font-weight: 500;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.pillar-block-header .pillar-core-value {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  /* 改为更浅的灰色，参考首页平台能力快览样式 */
  line-height: 1.8;
  /* 增加行高 */
  padding: var(--spacing-lg);
  /* 增加内边距 */
  background: var(--light-gray);
  border-radius: var(--border-radius);
  border-left: 4px solid;
  /* 加粗边框 */
  max-width: 800px;
  margin: 0 auto;
  font-weight: 500;
  margin-top: var(--spacing-md);
}

.pillar-1 .pillar-block-header .pillar-core-value {
  border-left-color: var(--pillar-1-color);
  background: linear-gradient(to right, rgba(255, 112, 67, 0.05), var(--light-gray));
  /* 添加渐变背景 */
}

.pillar-2 .pillar-block-header .pillar-core-value {
  border-left-color: var(--pillar-2-color);
  background: linear-gradient(to right, rgba(66, 165, 245, 0.05), var(--light-gray));
  /* 添加渐变背景 */
}

.pillar-3 .pillar-block-header .pillar-core-value {
  border-left-color: var(--pillar-3-color);
  background: linear-gradient(to right, rgba(102, 187, 106, 0.05), var(--light-gray));
  /* 添加渐变背景 */
}

/* 支柱块内容 */
.pillar-block-content {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  background: var(--white);
}

/* 水平卡片容器 */
.horizontal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* 水平卡片样式 - 简约设计 */
.horizontal-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  border: 1px solid var(--gray-100);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.horizontal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.horizontal-card .card-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.horizontal-card .card-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  font-size: 1rem;
  border: 1px solid;
}

/* 卡片描述文字样式 - 参考首页"平台能力快览"样式 */
.horizontal-card .card-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  font-weight: 400;
}

/* 卡片特性列表样式 */
.horizontal-card .card-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

/* 卡片特性项样式 */
.horizontal-card .card-feature {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.6;
  font-weight: 400;
}

.horizontal-card .card-feature i {
  margin-right: var(--spacing-xs);
  font-size: 0.9rem;
  color: var(--success-color);
}

.pillar-1 .horizontal-card .card-feature i {
  color: var(--pillar-1-color);
}

.pillar-2 .horizontal-card .card-feature i {
  color: var(--pillar-2-color);
}

.pillar-3 .horizontal-card .card-feature i {
  color: var(--pillar-3-color);
}

.pillar-1 .horizontal-card .card-icon {
  color: var(--pillar-1-color);
  border-color: var(--pillar-1-color);
}

.pillar-2 .horizontal-card .card-icon {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .horizontal-card .card-icon {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

/* 能力解析 */
.capabilities-list {
  margin-bottom: var(--spacing-xl);
}

.capability-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  transition: all var(--transition);
}

.capability-item:hover {
  background: var(--gray-100);
  transform: translateX(3px);
}

.capability-icon-small {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  font-size: 1rem;
  border: 1px solid;
}

.pillar-1 .capability-icon-small {
  color: var(--pillar-1-color);
  border-color: var(--pillar-1-color);
}

.pillar-2 .capability-icon-small {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .capability-icon-small {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

.capability-content h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--dark);
}

.capability-content p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.6;
}

/* 展开详细能力按钮 */
.expand-capabilities-btn {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  background: var(--light-gray);
  border: 1px dashed var(--gray-300);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.expand-capabilities-btn:hover {
  background: var(--white);
  border-color: var(--gray-400);
}

/* 详细能力展开区域 */
.detailed-capabilities {
  display: none;
  margin-bottom: var(--spacing-xl);
}

.detailed-capabilities.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

.detailed-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.detailed-capability {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  transition: all var(--transition);
}

.detailed-capability:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.detailed-capability-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--spacing-sm);
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 1px solid;
}

.pillar-1 .detailed-capability-icon {
  color: var(--pillar-1-color);
  border-color: var(--pillar-1-color);
}

.pillar-2 .detailed-capability-icon {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .detailed-capability-icon {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

.detailed-capability h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--dark);
}

.detailed-capability p {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  line-height: 1.4;
}

/* 关键成果指标 */
.pillar-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--light-gray);
  border-radius: var(--border-radius);
}

.pillar-metric {
  text-align: center;
  padding: var(--spacing-sm);
}

.pillar-metric-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: inherit;
}

.pillar-1 .pillar-metric-value {
  color: var(--pillar-1-color);
}

.pillar-2 .pillar-metric-value {
  color: var(--pillar-2-color);
}

.pillar-3 .pillar-metric-value {
  color: var(--pillar-3-color);
}

/* ===== 5. 模块二新增样式 ===== */
/* 支柱核心价值描述 */
.pillar-core-value {
  font-size: var(--font-size-lg);
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  border-left: 3px solid;
}

.pillar-1 .pillar-core-value {
  border-left-color: var(--pillar-1-color);
}

.pillar-2 .pillar-core-value {
  border-left-color: var(--pillar-2-color);
}

.pillar-3 .pillar-core-value {
  border-left-color: var(--pillar-3-color);
}

/* 引擎分析区域 */
.engine-analysis {
  margin-bottom: var(--spacing-xl);
}

.engine-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--dark);
  text-align: center;
}

.engine-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--gray-100);
  transition: all var(--transition);
}

.engine-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.engine-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.engine-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  font-size: 1.2rem;
  border: 1px solid;
}

.pillar-1 .engine-icon {
  color: var(--pillar-1-color);
  border-color: var(--pillar-1-color);
}

.pillar-2 .engine-icon {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .engine-icon {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

.engine-header h5 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--dark);
  margin: 0;
}

.engine-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.engine-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.engine-feature {
  display: flex;
  align-items: center;
}

/* 可视化建模能力网格 */
.modeling-capabilities {
  margin-bottom: var(--spacing-xl);
}

.capabilities-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--dark);
  text-align: center;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.capability-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition);
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.capability-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(0, 0, 0, 0.1);
}

.capability-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-md);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid;
}

.pillar-1 .capability-icon {
  color: var(--pillar-1-color);
  border-color: var(--pillar-1-color);
}

.pillar-2 .capability-icon {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .capability-icon {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

.capability-item h5 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--dark);
}

.capability-item p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.4;
}

/* 自助分析场景 */
.analysis-scenarios {
  margin-bottom: var(--spacing-xl);
}

.scenarios-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--dark);
  text-align: center;
}

.scenarios-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.scenario-icon {
  width: 80px;
  height: 80px;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-lg);
  font-size: 2rem;
  border: 3px solid;
}

.pillar-1 .scenario-icon {
  color: var(--pillar-1-color);
  border-color: var(--pillar-1-color);
}

.pillar-2 .scenario-icon {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .scenario-icon {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

.scenario-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  flex: 1;
}

.scenario-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.scenario-item {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.scenario-item i {
  margin-right: var(--spacing-xs);
  font-size: 0.9rem;
}

.pillar-1 .scenario-item i {
  color: var(--pillar-1-color);
}

.pillar-2 .scenario-item i {
  color: var(--pillar-2-color);
}

.pillar-3 .scenario-item i {
  color: var(--pillar-3-color);
}

/* 能力分析区域（支柱二和三） */
.capabilities-analysis {
  margin-bottom: var(--spacing-xl);
}

.capability-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: 2px solid rgba(0, 0, 0, 0.05);
  transition: all var(--transition);
}

.capability-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 0, 0, 0.1);
}

.capability-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.capability-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  font-size: 1.5rem;
  border: 2px solid;
}

.pillar-2 .capability-icon {
  color: var(--pillar-2-color);
  border-color: var(--pillar-2-color);
}

.pillar-3 .capability-icon {
  color: var(--pillar-3-color);
  border-color: var(--pillar-3-color);
}

.capability-header h5 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--dark);
  margin: 0;
}

.capability-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.capability-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.capability-feature {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.capability-feature i {
  margin-right: var(--spacing-xs);
  font-size: 0.9rem;
}

.pillar-2 .capability-feature i {
  color: var(--pillar-2-color);
}

.pillar-3 .capability-feature i {
  color: var(--pillar-3-color);
}

/* 响应式调整 */
@media (max-width: 768px) {

  .engine-features,
  .capability-features,
  .scenario-list {
    grid-template-columns: 1fr;
  }

  .scenarios-content {
    flex-direction: column;
    text-align: center;
  }

  .scenario-icon {
    margin-right: 0;
    margin-bottom: var(--spacing-md);
  }

  .capabilities-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* 水平卡片响应式调整 */
  .horizontal-cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .horizontal-card {
    margin-bottom: var(--spacing-md);
  }

  /* 支柱指标响应式调整 */
  .pillar-metrics {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .pillar-metric {
    padding: var(--spacing-md);
  }

  /* 支柱块头部调整 */
  .pillar-block-header {
    padding: var(--spacing-lg);
  }

  .pillar-block-header .pillar-icon {
    display: none;
    /* 确保在响应式设计中图标也被隐藏 */
  }

  .pillar-block-header .pillar-title {
    font-size: var(--font-size-xl);
  }

  .pillar-block-header .pillar-core-value {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .product-section-title {
    font-size: var(--font-size-2xl);
  }

  .product-section-subtitle {
    font-size: var(--font-size-base);
  }
}

/* ===== 6. 模块三：平台能力架构导图 - 优化版 ===== */
.architecture-section {
  background-color: var(--white);
  padding: var(--section-spacing-lg) 0;
  /* 压缩整体高度 */
}

.architecture-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* 五层架构可视化容器 - 更紧凑 */
.architecture-layers {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  /* 减少层间距 */
  margin: var(--spacing-xl) 0;
  /* 减少外边距 */
  position: relative;
}

/* 架构层样式 - 现代简约设计 */
.architecture-layer {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  /* 减少内边距 */
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  /* 更轻的阴影 */
}

.architecture-layer:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 层内容容器 - 标题在左侧布局 */
.layer-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  align-items: stretch;
}

/* 层标题样式 - 左侧显示 */
.layer-header {
  flex: 0 0 180px;
  /* 固定宽度 */
  text-align: left;
  padding: var(--spacing-sm) 0;
  border-right: 2px solid var(--gray-300);
  margin-right: var(--spacing-lg);
  flex-direction: column;
    justify-content: center;
    display: flex;
}

.layer-title {
  font-size: var(--font-size-xl);
  /* 减小字体大小 */
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.layer-subtitle {
  font-size: var(--font-size-xs);
  /* 减小字体大小 */
  color: var(--gray-600);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 层组件容器 - 更紧凑 */
.layer-components {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  /* 减少组件间距 */
}

/* 架构组件样式 - 现代简约，图标和标题一行显示 */
.architecture-component {
  background: var(--light-gray);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  /* 增加内边距，使卡片更高 */
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid var(--gray-200);
  /* 更细的边框 */
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}

.architecture-component:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-color);
  background: var(--white);
}

/* 组件图标 - 更简约，不抢眼 */
.component-icon {
  width: 36px;
  /* 进一步减小图标大小 */
  height: 36px;
  min-width: 36px;
  /* 确保图标保持固定大小 */
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  /* 减小图标大小 */
  color: var(--primary-color);
  transition: all var(--transition);
  border: 1px solid var(--gray-200);
  flex-shrink: 0;
  /* 防止图标被压缩 */
}

.architecture-component:hover .component-icon {
  background: var(--primary-color);
  color: var(--white);
  transform: scale(1.05);
  border-color: var(--primary-color);
}

/* 组件标题和副标题容器 */
.component-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-width: 0;
  /* 允许文本容器收缩 */
}

/* 组件标题 - 更紧凑，视觉焦点 */
.component-title {
  font-size: var(--font-size-base);
  /* 保持字体大小 */
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 2px;
  /* 减小间距 */
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.component-subtitle {
  font-size: var(--font-size-xs);
  /* 减小字体大小 */
  color: var(--gray-600);
  margin-bottom: 0;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* 各层颜色主题 - 更简约 */
.layer-1 {
  border-left: 3px solid #FF7043;
}

.layer-1 .layer-title {
  color: #FF7043;
}

.layer-1 .component-icon {
  color: #FF7043;
  border-color: rgba(255, 112, 67, 0.2);
}

.layer-1 .architecture-component:hover .component-icon {
  background: #FF7043;
  border-color: #FF7043;
}

.layer-2 {
  border-left: 3px solid #42A5F5;
}

.layer-2 .layer-title {
  color: #42A5F5;
}

.layer-2 .component-icon {
  color: #42A5F5;
  border-color: rgba(66, 165, 245, 0.2);
}

.layer-2 .architecture-component:hover .component-icon {
  background: #42A5F5;
  border-color: #42A5F5;
}

.layer-3 {
  border-left: 3px solid #66BB6A;
}

.layer-3 .layer-title {
  color: #66BB6A;
}

.layer-3 .component-icon {
  color: #66BB6A;
  border-color: rgba(102, 187, 106, 0.2);
}

.layer-3 .architecture-component:hover .component-icon {
  background: #66BB6A;
  border-color: #66BB6A;
}

.layer-4 {
  border-left: 3px solid #AB47BC;
}

.layer-4 .layer-title {
  color: #AB47BC;
}

.layer-4 .component-icon {
  color: #AB47BC;
  border-color: rgba(171, 71, 188, 0.2);
}

.layer-4 .architecture-component:hover .component-icon {
  background: #AB47BC;
  border-color: #AB47BC;
}

.layer-5 {
  border-left: 3px solid #FFA726;
}

.layer-5 .layer-title {
  color: #FFA726;
}

.layer-5 .component-icon {
  color: #FFA726;
  border-color: rgba(255, 167, 38, 0.2);
}

.layer-5 .architecture-component:hover .component-icon {
  background: #FFA726;
  border-color: #FFA726;
}

/* 架构交互提示 - 更简约 */
.architecture-hint {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  border: 1px dashed var(--gray-300);
  /* 更细的虚线 */
  margin-top: var(--spacing-lg);
}

.architecture-hint p {
  font-size: var(--font-size-sm);
  /* 减小字体大小 */
  color: var(--gray-600);
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.architecture-hint i {
  font-size: 1rem;
  /* 减小图标大小 */
  color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .layer-content {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .layer-header {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--gray-300);
    margin-right: 0;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    text-align: center;
  }

  .layer-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 768px) {
  .layer-components {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .architecture-component {
    padding: var(--spacing-sm);
    /* 在移动端保持较小的内边距 */
  }

  .component-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .component-title {
    font-size: var(--font-size-sm);
  }

  .component-subtitle {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 760px) {
  .layer-components {
    grid-template-columns: 1fr;
  }

  .architecture-section {
    padding: var(--section-spacing-md) 0;
  }

  .architecture-layer {
    padding: var(--spacing-sm);
    width: 100%;
  }

  .layer-title {
    font-size: var(--font-size-base);
  }

  .architecture-hint p {
    font-size: var(--font-size-xs);
  }
}

/* ===== 7. 架构导图弹窗样式 ===== */
.architecture-detail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--gray-200);
}

.architecture-detail-popup.active {
  opacity: 1;
  visibility: visible;
}

/* 弹窗遮罩 */
.architecture-detail-popup::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

/* 弹窗头部 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: var(--light-gray);
  border-bottom: 1px solid var(--gray-200);
}

.popup-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  flex: 1;
}

.popup-layer {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  background: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--gray-300);
  margin-left: var(--spacing-md);
}

.popup-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-600);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.popup-close:hover {
  background: var(--gray-100);
  color: var(--dark);
}

/* 弹窗内容 */
.popup-content {
  padding: var(--spacing-xl);
  max-height: 400px;
  overflow-y: auto;
}

.popup-description {
  font-size: var(--font-size-lg);
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
}

.popup-features h4 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-color);
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features-list li {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  border-left: 3px solid var(--primary-color);
  transition: all var(--transition-fast);
}

.features-list li:hover {
  background: var(--white);
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.features-list li strong {
  color: var(--dark);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.features-list li span {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* 弹窗底部 */
.popup-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: var(--light-gray);
  border-top: 1px solid var(--gray-200);
}

.popup-prev-btn,
.popup-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius);
  color: var(--dark);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  gap: 0.5rem;
}

.popup-prev-btn:hover,
.popup-next-btn:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 167, 243, 0.2);
}

.popup-prev-btn:disabled,
.popup-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.popup-prev-btn:disabled:hover,
.popup-next-btn:disabled:hover {
  background: var(--white);
  color: var(--dark);
  border-color: var(--gray-300);
  box-shadow: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .architecture-detail-popup {
    width: 95%;
    max-height: 90vh;
  }

  .popup-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .popup-layer {
    margin-left: 0;
    align-self: flex-start;
  }

  .popup-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
  }

  .popup-content {
    padding: var(--spacing-lg);
    max-height: 50vh;
  }

  .popup-footer {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .popup-prev-btn,
  .popup-next-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .popup-title {
    font-size: var(--font-size-xl);
  }

  .popup-description {
    font-size: var(--font-size-base);
  }

  .popup-features h4 {
    font-size: var(--font-size-lg);
  }
}


/* ===== 9. 模块五：行业应用场景 ===== */
.industry-section {
  background-color: var(--light-gray);
  padding: var(--section-spacing-lg) 0;
  position: relative;
  overflow: hidden;
}

.industry-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

/* 行业案例网格布局 - 3列 */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--section-spacing-md);
}

/* 行业案例卡片样式 - 现代化设计 */
.industry-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all var(--transition);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

/* 卡片头部 - 弱化色块，突出标题 */
.industry-card-header {
  padding: var(--spacing-lg);
  background: var(--white);
  position: relative;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
}

/* 移除原有的圆形装饰 */
.industry-card-header::after {
  display: none;
}

/* 图标 - 弱化处理 */
.industry-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--gray-600);
  transition: all var(--transition);
  opacity: 0.7;
}

.industry-card:hover .industry-icon {
  opacity: 1;
  transform: scale(1.05);
}

/* 标题 - 突出显示 */
.industry-title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  color: var(--gray-800);
  position: relative;
  padding-bottom: var(--spacing-sm);
  flex: 1;
}

.industry-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  opacity: 0.7;
}

/* 卡片内容 */
.industry-card-content {
  padding: var(--spacing-xl) var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* 客户信息 - 现代化设计 */
.industry-client {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: linear-gradient(to right, rgba(0, 167, 243, 0.05), rgba(0, 167, 243, 0.02));
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-color);
  transition: all var(--transition-fast);
}

.industry-client:hover {
  background: linear-gradient(to right, rgba(0, 167, 243, 0.08), rgba(0, 167, 243, 0.04));
  transform: translateX(3px);
}

.industry-client i {
  color: var(--primary-color);
  font-size: 1.1rem;
}

.industry-client span {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--gray-800);
}

/* 挑战、解决方案、成果部分 - 现代化设计 */
.industry-challenge,
.industry-solution,
.industry-result {
  padding: var(--spacing-lg);
  background: var(--light-gray);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition);
  border: 1px solid transparent;
}

.industry-challenge:hover,
.industry-solution:hover,
.industry-result:hover {
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--gray-200);
}

.industry-challenge h4,
.industry-solution h4,
.industry-result h4 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  line-height: 1.4;
}

.industry-challenge h4::before {
  content: '⚠️';
  font-size: 1rem;
  opacity: 0.8;
}

.industry-solution h4::before {
  content: '💡';
  font-size: 1rem;
  opacity: 0.8;
}

.industry-result h4::before {
  content: '🏆';
  font-size: 1rem;
  opacity: 0.8;
}

.industry-challenge p,
.industry-solution p,
.industry-result p {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* 各行业卡片颜色主题 - 弱化处理，使用浅色背景和边框 */
.industry-card:nth-child(1) .industry-card-header {
  background: linear-gradient(to bottom, rgba(74, 111, 165, 0.05) 0%, rgba(74, 111, 165, 0.02) 100%);
  border-bottom: 1px solid rgba(74, 111, 165, 0.15);
}

.industry-card:nth-child(1) .industry-icon {
  color: #4A6FA5;
  border-color: rgba(74, 111, 165, 0.2);
  background: rgba(74, 111, 165, 0.05);
}

.industry-card:nth-child(1) .industry-title::after {
  background: #4A6FA5;
}

.industry-card:nth-child(2) .industry-card-header {
  background: linear-gradient(to bottom, rgba(46, 139, 87, 0.05) 0%, rgba(46, 139, 87, 0.02) 100%);
  border-bottom: 1px solid rgba(46, 139, 87, 0.15);
}

.industry-card:nth-child(2) .industry-icon {
  color: #2E8B57;
  border-color: rgba(46, 139, 87, 0.2);
  background: rgba(46, 139, 87, 0.05);
}

.industry-card:nth-child(2) .industry-title::after {
  background: #2E8B57;
}

.industry-card:nth-child(3) .industry-card-header {
  background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05) 0%, rgba(255, 152, 0, 0.02) 100%);
  border-bottom: 1px solid rgba(255, 152, 0, 0.15);
}

.industry-card:nth-child(3) .industry-icon {
  color: #FF9800;
  border-color: rgba(255, 152, 0, 0.2);
  background: rgba(255, 152, 0, 0.05);
}

.industry-card:nth-child(3) .industry-title::after {
  background: #FF9800;
}

.industry-card:nth-child(4) .industry-card-header {
  background: linear-gradient(to bottom, rgba(156, 39, 176, 0.05) 0%, rgba(156, 39, 176, 0.02) 100%);
  border-bottom: 1px solid rgba(156, 39, 176, 0.15);
}

.industry-card:nth-child(4) .industry-icon {
  color: #9C27B0;
  border-color: rgba(156, 39, 176, 0.2);
  background: rgba(156, 39, 176, 0.05);
}

.industry-card:nth-child(4) .industry-title::after {
  background: #9C27B0;
}

.industry-card:nth-child(5) .industry-card-header {
  background: linear-gradient(to bottom, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.02) 100%);
  border-bottom: 1px solid rgba(33, 150, 243, 0.15);
}

.industry-card:nth-child(5) .industry-icon {
  color: #2196F3;
  border-color: rgba(33, 150, 243, 0.2);
  background: rgba(33, 150, 243, 0.05);
}

.industry-card:nth-child(5) .industry-title::after {
  background: #2196F3;
}

.industry-card:nth-child(6) .industry-card-header {
  background: linear-gradient(to bottom, rgba(233, 30, 99, 0.05) 0%, rgba(233, 30, 99, 0.02) 100%);
  border-bottom: 1px solid rgba(233, 30, 99, 0.15);
}

.industry-card:nth-child(6) .industry-icon {
  color: #E91E63;
  border-color: rgba(233, 30, 99, 0.2);
  background: rgba(233, 30, 99, 0.05);
}

/* 行业案例详情列表样式 - 列表展示 */
.industry-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.industry-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--white);
  border-radius: var(--border-radius);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.industry-detail-item:hover {
  background: var(--light-gray);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.detail-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--light-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border: 1px solid var(--gray-300);
  transition: all var(--transition-fast);
}

.industry-detail-item:hover .detail-icon {
  background: var(--white);
  transform: scale(1.05);
}

.detail-content {
  flex: 1;
}

.detail-content p {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: 1.5;
  margin: 0;
}

.detail-content strong {
  color: var(--gray-800);
  font-weight: 600;
}

/* 各行业列表项颜色主题 */
.industry-card:nth-child(1) .detail-icon {
  color: #4A6FA5;
  border-color: rgba(74, 111, 165, 0.3);
  background: rgba(74, 111, 165, 0.05);
}

.industry-card:nth-child(2) .detail-icon {
  color: #2E8B57;
  border-color: rgba(46, 139, 87, 0.3);
  background: rgba(46, 139, 87, 0.05);
}

.industry-card:nth-child(3) .detail-icon {
  color: #FF9800;
  border-color: rgba(255, 152, 0, 0.3);
  background: rgba(255, 152, 0, 0.05);
}

.industry-card:nth-child(4) .detail-icon {
  color: #9C27B0;
  border-color: rgba(156, 39, 176, 0.3);
  background: rgba(156, 39, 176, 0.05);
}

.industry-card:nth-child(5) .detail-icon {
  color: #2196F3;
  border-color: rgba(33, 150, 243, 0.3);
  background: rgba(33, 150, 243, 0.05);
}

.industry-card:nth-child(6) .detail-icon {
  color: #E91E63;
  border-color: rgba(233, 30, 99, 0.3);
  background: rgba(233, 30, 99, 0.05);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .industry-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .industry-card-header {
    padding: var(--spacing-md);
  }

  .industry-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .industry-title {
    font-size: var(--font-size-lg);
  }

  .industry-card-content {
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .industry-section {
    padding: var(--section-spacing-md) 0;
  }

  .industry-card-header {
    padding: var(--spacing-sm);
  }

  .industry-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }

  .industry-title {
    font-size: var(--font-size-base);
  }

  .industry-card-content {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .industry-client,
  .industry-challenge,
  .industry-solution,
  .industry-result {
    padding: var(--spacing-sm);
  }
}

/* ===== 10. 模块六：平台优势总结 ===== */
.advantages-section {
  background-color: var(--white);
  padding: var(--section-spacing-xl) 0;
  position: relative;
}

.advantages-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

/* 优势网格布局 - 4列 */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--section-spacing-md);
}

/* 优势卡片样式 */
.advantage-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  text-align: center;
}

.advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

/* 优势图标 - 弱化图标，突出标题 */
.advantage-icon {
  width: 60px;
  /* 减小图标大小 */
  height: 60px;
  margin: 0 auto var(--spacing-md);
  /* 减小间距 */
  background: var(--light-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  /* 减小图标字体大小 */
  color: var(--gray-600);
  /* 使用更柔和的颜色 */
  border: 1px solid var(--gray-300);
  /* 减小边框粗细，使用更柔和的颜色 */
  transition: all var(--transition);
  opacity: 0.8;
  /* 降低不透明度 */
}

.advantage-card:hover .advantage-icon {
  background: var(--light-gray);
  /* 悬停时保持背景不变 */
  color: var(--primary-color);
  /* 悬停时变为主色 */
  transform: scale(1.05);
  border-color: var(--primary-color);
  opacity: 1;
  /* 悬停时恢复不透明度 */
}

/* 优势标题 - 增强标题视觉权重 */
.advantage-title {
  font-size: var(--font-size-2xl);
  /* 增大字体大小 */
  font-weight: 800;
  /* 增加字体粗细 */
  color: var(--gray-800);
  /* 使用更深的颜色 */
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.advantage-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  opacity: 0.7;
}

/* 优势描述 */
.advantage-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
  flex: 1;
}

/* 关键点容器 */
.advantage-keypoints {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: auto;
}

/* 关键点项 */
.keypoint {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.keypoint:hover {
  background: var(--white);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.keypoint i {
  color: var(--success-color);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.keypoint span {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.4;
  text-align: left;
  flex: 1;
}

/* 各优势卡片颜色主题 */
.advantage-card:nth-child(1) .advantage-icon {
  color: #FF7043;
  border-color: #FF7043;
}

.advantage-card:nth-child(1):hover .advantage-icon {
  background: #FF7043;
  color: var(--white);
}

.advantage-card:nth-child(2) .advantage-icon {
  color: #42A5F5;
  border-color: #42A5F5;
}

.advantage-card:nth-child(2):hover .advantage-icon {
  background: #42A5F5;
  color: var(--white);
}

.advantage-card:nth-child(3) .advantage-icon {
  color: #66BB6A;
  border-color: #66BB6A;
}

.advantage-card:nth-child(3):hover .advantage-icon {
  background: #66BB6A;
  color: var(--white);
}

.advantage-card:nth-child(4) .advantage-icon {
  color: #AB47BC;
  border-color: #AB47BC;
}

.advantage-card:nth-child(4):hover .advantage-icon {
  background: #AB47BC;
  color: var(--white);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .advantage-card {
    padding: var(--spacing-lg);
  }

  .advantage-icon {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
  }

  .advantage-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 768px) {
  .advantages-section {
    padding: var(--section-spacing-lg) 0;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .advantage-card {
    padding: var(--spacing-xl);
  }

  .advantage-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }

  .advantage-title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 480px) {
  .advantages-section {
    padding: var(--section-spacing-md) 0;
  }

  .advantage-card {
    padding: var(--spacing-lg);
  }

  .advantage-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
  }

  .advantage-title {
    font-size: var(--font-size-lg);
  }

  .advantage-description {
    font-size: var(--font-size-sm);
  }

  .keypoint {
    padding: var(--spacing-xs);
  }

  .keypoint span {
    font-size: var(--font-size-xs);
  }
}

/* ===== 11. 模块七：实施路径展示 ===== */
.implementation-section {
  background-color: var(--light-gray);
  padding: var(--section-spacing-xl) 0;
  position: relative;
}

.implementation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

/* 实施路径网格布局 - 4列 */
.implementation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--section-spacing-md);
  position: relative;
}

/* 实施步骤卡片样式 */
.implementation-step {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  z-index: 2;
}

.implementation-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

/* 步骤图标 - 弱化图标，突出标题 */
.step-icon {
  width: 60px;
  /* 减小图标大小 */
  height: 60px;
  margin: 0 auto var(--spacing-md);
  /* 减小间距 */
  background: var(--light-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  /* 减小图标字体大小 */
  color: var(--gray-600);
  /* 使用更柔和的颜色 */
  border: 1px solid var(--gray-300);
  /* 减小边框粗细，使用更柔和的颜色 */
  transition: all var(--transition);
  opacity: 0.8;
  /* 降低不透明度 */
}

.implementation-step:hover .step-icon {
  background: var(--light-gray);
  /* 悬停时保持背景不变 */
  color: var(--primary-color);
  /* 悬停时变为主色 */
  transform: scale(1.05);
  border-color: var(--primary-color);
  opacity: 1;
  /* 悬停时恢复不透明度 */
}

/* 步骤标题 - 增强标题视觉权重 */
.step-title {
  font-size: var(--font-size-2xl);
  /* 增大字体大小 */
  font-weight: 800;
  /* 增加字体粗细 */
  color: var(--gray-800);
  /* 使用更深的颜色 */
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.step-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  opacity: 0.7;
}

/* 步骤时长 */
.step-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-700);
}

.step-duration i {
  color: var(--primary-color);
  font-size: 0.9rem;
}

/* 步骤描述 */
.step-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
  flex: 1;
}

/* 交付物区域 */
.step-deliverables {
  margin-top: auto;
  text-align: left;
}

.step-deliverables h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.step-deliverables h4::before {
  content: '📋';
  font-size: 0.9rem;
}

/* 交付物列表 */
.deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.deliverables-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.deliverables-list li:hover {
  background: var(--white);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.deliverables-list li i {
  color: var(--success-color);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.deliverables-list li span {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.4;
  text-align: left;
  flex: 1;
}

/* 实施路径连接线 */
.implementation-path {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(12.5% - 20px);
  /* 调整位置以对齐4列网格 */
}

.path-line {
  position: absolute;
  top: 50%;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--gray-300);
  transform: translateY(-50%);
  z-index: 1;
}

.path-dots {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
}

.path-dot {
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}

.path-dot.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(0, 167, 243, 0.2);
}

.path-dot:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  transform: scale(1.1);
}

/* 各步骤颜色主题 */
.implementation-step:nth-child(1) .step-icon {
  color: #FF7043;
  border-color: #FF7043;
}

.implementation-step:nth-child(1):hover .step-icon {
  background: #FF7043;
  color: var(--white);
}

.implementation-step:nth-child(2) .step-icon {
  color: #42A5F5;
  border-color: #42A5F5;
}

.implementation-step:nth-child(2):hover .step-icon {
  background: #42A5F5;
  color: var(--white);
}

.implementation-step:nth-child(3) .step-icon {
  color: #66BB6A;
  border-color: #66BB6A;
}

.implementation-step:nth-child(3):hover .step-icon {
  background: #66BB6A;
  color: var(--white);
}

.implementation-step:nth-child(4) .step-icon {
  color: #AB47BC;
  border-color: #AB47BC;
}

.implementation-step:nth-child(4):hover .step-icon {
  background: #AB47BC;
  color: var(--white);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .implementation-section {
    padding: var(--section-spacing-md) 0;
  }

  .implementation-step {
    padding: var(--spacing-lg);
  }

  .step-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
  }

  .step-title {
    font-size: var(--font-size-lg);
  }

  .step-description {
    font-size: var(--font-size-sm);
  }

  .deliverables-list li {
    padding: var(--spacing-xs);
  }

  .deliverables-list li span {
    font-size: var(--font-size-xs);
  }
}

/* ===== 12. 模块八：客户评价展示 ===== */
.testimonials-section {
  background-color: var(--white);
  padding: var(--section-spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

/* 客户评价网格布局 - 3列 */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--section-spacing-md);
}

/* 客户评价卡片样式 */
.testimonial-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

/* 客户信息区域 */
.testimonial-client {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.client-avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: var(--light-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary-color);
  border: 2px solid var(--gray-200);
  overflow: hidden;
}

.client-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-info {
  flex: 1;
}

.client-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.client-position {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
}

.client-industry {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--light-gray);
  color: var(--gray-700);
  border-radius: var(--border-radius);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid var(--gray-200);
}

/* 评价内容 */
.testimonial-content {
  flex: 1;
  margin-bottom: var(--spacing-lg);
}

.testimonial-quote {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: 1.6;
  font-style: italic;
  position: relative;
  padding-left: var(--spacing-md);
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -0.5rem;
  font-size: 2rem;
  color: var(--primary-color);
  opacity: 0.3;
  font-family: serif;
}

/* 评分区域 */
.testimonial-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm);
  background: var(--light-gray);
  border-radius: var(--border-radius);
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.rating-star {
  color: #FFD700;
  font-size: 1.2rem;
}

.rating-value {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--dark);
  margin-left: var(--spacing-xs);
}

.rating-label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-left: auto;
}

/* 关键成果区域 */
.testimonial-results {
  margin-top: auto;
}

.results-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.results-title::before {
  content: '🏆';
  font-size: 0.9rem;
}

.results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.results-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--light-gray);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.results-list li:hover {
  background: var(--white);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.results-list li i {
  color: var(--success-color);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.results-list li span {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.4;
  text-align: left;
  flex: 1;
}

/* 各行业卡片颜色主题 */
.testimonial-card:nth-child(1) .client-industry {
  background: rgba(74, 111, 165, 0.1);
  color: #4A6FA5;
  border-color: rgba(74, 111, 165, 0.3);
}

.testimonial-card:nth-child(1) .client-avatar {
  color: #4A6FA5;
  border-color: rgba(74, 111, 165, 0.3);
}

.testimonial-card:nth-child(2) .client-industry {
  background: rgba(46, 139, 87, 0.1);
  color: #2E8B57;
  border-color: rgba(46, 139, 87, 0.3);
}

.testimonial-card:nth-child(2) .client-avatar {
  color: #2E8B57;
  border-color: rgba(46, 139, 87, 0.3);
}

.testimonial-card:nth-child(3) .client-industry {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
  border-color: rgba(255, 152, 0, 0.3);
}

.testimonial-card:nth-child(3) .client-avatar {
  color: #FF9800;
  border-color: rgba(255, 152, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: var(--section-spacing-lg) 0;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial-card {
    padding: var(--spacing-lg);
  }

  .client-avatar {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .client-name {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  .implementation-section {
    padding: var(--section-spacing-md) 0;
  }

  .implementation-step {
    padding: var(--spacing-lg);
  }

  .step-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
  }

  .step-title {
    font-size: var(--font-size-lg);
  }

  .step-description {
    font-size: var(--font-size-sm);
  }

  .deliverables-list li {
    padding: var(--spacing-xs);
  }

  .deliverables-list li span {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .testimonials-section {
    padding: var(--section-spacing-md) 0;
  }

  .testimonial-card {
    padding: var(--spacing-md);
  }

  .testimonial-client {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }

  .client-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .testimonial-quote {
    padding-left: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .testimonial-quote::before {
    font-size: 1.5rem;
    top: -0.25rem;
  }

  .testimonial-rating {
    flex-wrap: wrap;
    justify-content: center;
  }

  .rating-label {
    margin-left: 0;
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-xs);
  }

  .results-list li {
    padding: var(--spacing-xs);
  }

  .results-list li span {
    font-size: var(--font-size-xs);
  }
}

/* ===== 13. 模块九：常见问题解答 (FAQ Section) ===== */
.faq-section {
  background-color: var(--light-gray);
  padding: var(--section-spacing-xl) 0;
  position: relative;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

/* FAQ网格布局 - 2列 */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--section-spacing-md);
}

/* FAQ列样式 */
.faq-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* FAQ列标题 */
.faq-column-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.faq-column-title i {
  color: var(--primary-color);
  font-size: 1.2rem;
}

/* FAQ项目样式 */
.faq-item {
  background: var(--white);
  border-radius: var(--border-radius);
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition);
  overflow: hidden;
}

.faq-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* FAQ问题按钮样式 */
.faq-question {
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--white);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--dark);
  transition: all var(--transition-fast);
  position: relative;
}

.faq-question:hover {
  background: var(--light-gray);
}

.faq-question.active {
  background: var(--light-gray);
  color: var(--primary-color);
}

/* FAQ问题图标 */
.faq-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--gray-500);
  transition: all var(--transition-fast);
  margin-left: var(--spacing-sm);
}

.faq-question.active .faq-icon {
  color: var(--primary-color);
  transform: rotate(180deg);
}

/* FAQ答案样式 */
.faq-answer {
  padding: 0 var(--spacing-lg);
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition);
  background: var(--white);
}

.faq-answer.active {
  padding: var(--spacing-lg);
  max-height: 500px;
  border-top: 1px solid var(--gray-100);
}

.faq-answer-content {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: 1.6;
}

.faq-answer-content p {
  margin-bottom: var(--spacing-sm);
}

.faq-answer-content p:last-child {
  margin-bottom: 0;
}

/* 左侧列（技术相关问题）颜色主题 */
.faq-column:first-child .faq-column-title {
  border-bottom-color: #42A5F5;
}

.faq-column:first-child .faq-column-title i {
  color: #42A5F5;
}

.faq-column:first-child .faq-item:hover {
  border-color: #42A5F5;
}

.faq-column:first-child .faq-question.active {
  color: #42A5F5;
}

.faq-column:first-child .faq-question.active .faq-icon {
  color: #42A5F5;
}

/* 右侧列（业务相关问题）颜色主题 */
.faq-column:last-child .faq-column-title {
  border-bottom-color: #66BB6A;
}

.faq-column:last-child .faq-column-title i {
  color: #66BB6A;
}

.faq-column:last-child .faq-item:hover {
  border-color: #66BB6A;
}

.faq-column:last-child .faq-question.active {
  color: #66BB6A;
}

.faq-column:last-child .faq-question.active .faq-icon {
  color: #66BB6A;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .faq-grid {
    gap: var(--spacing-lg);
  }

  .faq-question {
    font-size: 1.1rem;
    font-weight: 400;
    color: #333;
    padding: 1.2rem 1.5rem;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #42A5F5;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .faq-column {
    gap: var(--spacing-md);
  }

  .faq-column-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
  }

  .faq-question {
    padding: var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 400;
  }

  .faq-answer.active {
    padding: var(--spacing-lg);
  }

  .faq-answer-content {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: var(--section-spacing-md) 0;
  }

  .faq-grid {
    gap: var(--spacing-lg);
  }

  .faq-column-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

  .faq-question {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .faq-answer.active {
    padding: var(--spacing-md);
  }

  .faq-answer-content {
    font-size: var(--font-size-sm);
  }

  .faq-icon {
    width: 20px;
    height: 20px;
    font-size: 0.9rem;
  }
}

/* ===== 14. 模块十：行动召唤 (CTA Section) ===== */
.cta-section {
  padding: 5rem 0;
  background: var(--gradient-light-blue);
  text-align: center;
}

.cta-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dark);
}

.cta-description {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  .cta-title {
    font-size: var(--font-size-3xl);
  }

  .cta-description {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 768px) {

  /* 移动端页脚优化 */
  .footer {
    padding: 2rem 0 1rem;
  }

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

  .footer-brand {
    max-width: 100%;
    text-align: center;
  }

  .footer-title {
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
  }

  .footer-description {
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
  }

  .footer-links li {
    margin-bottom: 0.5rem;
  }

  .footer-links a {
    font-size: var(--font-size-sm);
  }

  .footer-contact li {
    margin-bottom: 0.75rem;
    font-size: var(--font-size-sm);
  }

  .footer-contact i {
    font-size: 0.875rem;
  }

  .footer-bottom {
    padding-top: 1.5rem;
    font-size: var(--font-size-xs);
  }

  .footer-bottom p {
    margin-bottom: 0.5rem;
  }

  .social-links {
    justify-content: center;
    margin-top: 1rem;
  }

  .social-link {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  /* 隐藏产品功能、行业实战、联系我们三个部分 */
  .footer-content>div:nth-child(2),
  .footer-content>div:nth-child(3),
  .footer-content>div:nth-child(4) {
    display: none;
  }
}

/********************************
 * 移动端强制纵向 & 居中修复
 ********************************/
@media (max-width: 768px) {

  /* 1. 所有 section 内部统一居中 */
  section,
  .container {
    text-align: center;
  }

  /* 2. 所有 flex 强制纵向 */
  .hero-actions,
  .pillars-grid,
  .architecture-layers,
  .layer-content,
  .industry-grid,
  .advantages-grid,
  .implementation-grid,
  .testimonials-grid,
  .faq-grid,
  .cta-actions,
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 3. 所有卡片类元素占满一行 */
  .pillar-block,
  .industry-card,
  .advantage-card,
  .implementation-step,
  .testimonial-card,
  .faq-column {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .industry-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .industry-card {
    margin-right: 0 !important;
  }

  .advantages-grid {
    display: flex;
    flex-direction: column;
  }

  .faq-grid {
    display: flex;
    flex-direction: column;
  }

  .faq-column {
    width: 100%;
  }

  .faq-question {
    text-align: left; /* 问题左对齐更好读 */
  }
}