/* ==================== 首页样式 ==================== */

/* Banner区域 */
.banner-section {
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.banner-bg {
  background-image: url('../images/banner-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px 0 100px;
  position: relative;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.banner-left {
  flex: 1;
  max-width: 580px;
}

.banner-title {
  font-size: 42px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 24px 0;
}

.banner-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin: 0 0 32px 0;
}

.btn-banner {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, #1E6FFF 0%, #4A8FFF 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(30, 111, 255, 0.3);
}

.btn-banner:hover {
  background: linear-gradient(135deg, #0D5FEF 0%, #3A7FEF 100%);
  box-shadow: 0 6px 16px rgba(30, 111, 255, 0.4);
  transform: translateY(-2px);
}

.banner-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-right img {
  max-width: 100%;
  height: auto;
}

/* 三个卡片 */
.feature-cards {
  display: flex;
  gap: 24px;
  margin-top: -60px;
  position: relative;
  z-index: 10;
}

.feature-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 24px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.card-icon {
  flex-shrink: 0;
}

.card-icon img {
  width: 64px;
  height: 64px;
  display: block;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  text-overflow: ellipsis;
}

/* 产品功能架构 */
.product-structure-section {
  padding: 60px 0;
  background-color: #fff;
}

.section-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 10px 0;
}

.structure-image {
  text-align: center;
}

.structure-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ==================== 响应式设计 ==================== */
@media screen and (max-width: 768px) {
  .banner-bg {
      padding: 40px 0 80px;
  }

  .banner-content {
      flex-direction: column;
      gap: 40px;
  }

  .banner-left {
      max-width: 100%;
      text-align: center;
  }

  .banner-title {
      font-size: 28px;
      margin-bottom: 16px;
  }

  .banner-desc {
      font-size: 14px;
      margin-bottom: 24px;
  }

  .btn-banner {
      padding: 10px 28px;
      font-size: 15px;
      width: 100%;
  }

  .banner-right {
      width: 100%;
  }

  .feature-cards {
      flex-direction: column;
      margin-top: -40px;
      gap: 16px;
  }

  .feature-card {
      padding: 24px 20px;
  }

  .card-icon img {
      width: 56px;
      height: 56px;
  }

  .card-title {
      font-size: 16px;
  }

  .card-desc {
      font-size: 13px;
  }

  .product-structure-section {
      padding: 60px 0;
  }

  .section-title {
      font-size: 24px;
      margin-bottom: 40px;
  }
}

/* ==================== 全周期智慧数字化采购管理 ==================== */
.smart-procurement-section {
  background-color: #fff;
}

/* 头部蓝色背景区域 */
.procurement-header {
  background-image: url('../images/section2-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 0 80px;
  text-align: center;
  color: #fff;
}

.procurement-title {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.procurement-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 60px 0;
}

/* Tab导航 */
.procurement-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.tab-item {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 10px 0;
  position: relative;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-item:hover {
  color: #fff;
}

.tab-item.active {
  color: #fff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #fff;
}

/* Tab内容区域 */
.procurement-content {
  padding: 0;
  margin-top: -50px;
  position: relative;
}

.procurement-content .container {
  padding-bottom: 80px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.content-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 16px;
  padding: 50px 60px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.content-left {
  flex: 1;
  max-width: 480px;
}

.content-left img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.content-right {
  flex: 1;
}

.content-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.content-intro {
  font-size: 16px;
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-item .label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px 0;
}

.feature-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 0;
}

/* 底部大标题 */
.procurement-footer {
  background-color: #f5f7fa;
  padding: 80px 0;
  text-align: center;
}

.procurement-footer .footer-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

/* ==================== 响应式设计 - 全周期智慧数字化采购管理 ==================== */
@media screen and (max-width: 1024px) {
  .procurement-tabs {
      gap: 40px;
  }

  .tab-item {
      font-size: 15px;
  }

  .procurement-content .container {
      padding-top: 70px;
      padding-bottom: 70px;
  }

  .content-layout {
      gap: 50px;
      padding: 40px 50px;
  }

  .content-title {
      font-size: 28px;
  }

  .procurement-footer {
      padding: 70px 0;
  }

  .procurement-footer .footer-title {
      font-size: 32px;
  }
}

@media screen and (max-width: 768px) {
  .procurement-header {
      padding: 40px 0 60px;
  }

  .procurement-title {
      font-size: 24px;
      margin-bottom: 12px;
  }

  .procurement-subtitle {
      font-size: 14px;
      margin-bottom: 20px;
  }

  /* 移动端Tab横向滚动 */
  .procurement-tabs {
      justify-content: flex-start;
      gap: 32px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 16px;
  }

  .procurement-tabs::-webkit-scrollbar {
      display: none;
  }

  .tab-item {
      font-size: 14px;
      padding: 8px 0;
  }

  .tab-item.active::after {
      bottom: -18px;
  }

  .procurement-content {
      margin-top: -30px;
  }

  .procurement-content .container {
      padding-top: 0px;
      padding-bottom: 60px;
  }

  .content-layout {
      flex-direction: column;
      gap: 32px;
      padding: 30px 20px;
      border-radius: 12px;
  }

  .content-left {
      max-width: 100%;
      width: 100%;
      order: 2; /* 图片移到下方 */
  }

  .content-right {
      order: 1; /* 文字移到上方 */
  }

  .content-title {
      font-size: 24px;
      margin-bottom: 12px;
  }

  .content-intro {
      font-size: 14px;
      margin-bottom: 28px;
  }

  .feature-list {
      gap: 24px;
  }

  .feature-item h4 {
      font-size: 15px;
      margin-bottom: 8px;
  }

  .feature-item p {
      font-size: 13px;
  }

  .procurement-footer {
      padding: 50px 0;
  }

  .procurement-footer .footer-title {
      font-size: 20px;
      line-height: 1.4;
  }
}

/* ==================== 利器功能 ==================== */
.key-features-section {
  background-color: #fff;
  padding: 40px 0;
}

.features-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 60px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 30px;
}

.feature-box {
  text-align: center;
  padding: 40px 30px;
  transition: all 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-5px);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-box-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.feature-box-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 0;
}

.features-action {
  text-align: center;
}

.btn-features {
  display: inline-block;
  padding: 8px 40px;
  background: linear-gradient(135deg, #1E6FFF 0%, #4A8FFF 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(30, 111, 255, 0.3);
}

.btn-features:hover {
  background: linear-gradient(135deg, #0D5FEF 0%, #3A7FEF 100%);
  box-shadow: 0 6px 16px rgba(30, 111, 255, 0.4);
  transform: translateY(-2px);
}

/* ==================== 典型用户 ==================== */
.customers-section {
  background-color: #f5f7fa;
  padding: 40px 0;
}

.customers-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 30px 0;
}

.customer-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 10px;
}

.customer-case {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.customer-case:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.customer-case:hover .case-image img {
  transform: scale(1.05);
}

.case-content {
  padding: 30px 24px;
}

.case-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
  line-height: 1.5;
  height: 54px; /* 固定两行高度: 18px * 1.5 * 2 = 54px */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-logo {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 右对齐 */
}

.case-logo img {
  max-height: 100%;
  max-width: 150px;
  object-fit: contain;
}

/* Logo墙 */
.logo-wall {
  margin-bottom: 10px;
  padding: 40px 0;
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.logo-wall-row {
  overflow: hidden;
  margin-bottom: 24px;
}

.logo-wall-row:last-child {
  margin-bottom: 0;
}

.logo-wall-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
}

/* 第一行 - 向左滚动 */
.logo-wall-track-1 {
  animation: scroll-left 40s linear infinite;
}

/* 第二行 - 向左滚动 */
.logo-wall-track-2 {
  animation: scroll-left 35s linear infinite;
}

/* 第三行 - 向左滚动 */
.logo-wall-track-3 {
  animation: scroll-left 45s linear infinite;
}

.logo-wall-track:hover {
  animation-play-state: paused;
}

.logo-wall-item {
  flex-shrink: 0;
  width: 170px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  transition: all 0.3s ease;
}

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

.logo-wall-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
  max-width: 116px;
}

@keyframes scroll-left {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
      transform: translateX(-50%);
  }
  100% {
      transform: translateX(0);
  }
}

/* 客户案例按钮 */
.customers-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.btn-customers {
  padding: 8px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  line-height: 24px;
}

.btn-primary-customers {
  background: linear-gradient(135deg, #1E6FFF 0%, #4A8FFF 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(30, 111, 255, 0.3);
}

.btn-primary-customers:hover {
  background: linear-gradient(135deg, #0D5FEF 0%, #3A7FEF 100%);
  box-shadow: 0 6px 16px rgba(30, 111, 255, 0.4);
  transform: translateY(-2px);
}

.btn-outline-customers {
  background: #fff;
  color: #1E6FFF;
  border: 2px solid #1E6FFF;
}

.btn-outline-customers:hover {
  background: #F5F8FF;
  border-color: #0D5FEF;
  color: #0D5FEF;
  transform: translateY(-2px);
}

/* ==================== 响应式设计 - 利器功能和典型用户 ==================== */
@media screen and (max-width: 1024px) {
  .logo-wall-item {
      width: 120px;
      gap: 60px;
  }
}

@media screen and (max-width: 768px) {
  .key-features-section {
      padding: 20px 0;
  }

  .features-title {
      font-size: 22px;
      margin-bottom: 20px;
  }

  .features-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
  }

  .customer-cases {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
  }

  .logo-wall-item img {
      max-width: 100%;
  }
  .logo-wall-item {
      padding: 8px 12px;
  }

  .feature-box {
      padding: 10px 20px;
  }

  .feature-icon {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
  }

  .feature-box-title {
      font-size: 16px;
      margin-bottom: 8px;
  }

  .feature-box-desc {
      font-size: 13px;
  }

  .btn-features {
      padding: 10px 32px;
      font-size: 15px;
      width: 100%;
  }

  /* 典型用户移动端 */
  .customers-section {
      padding: 40px 0;
  }

  .customers-title {
      font-size: 24px;
      margin-bottom: 40px;
  }

  .customer-cases {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 40px;
  }

  .case-image {
      height: 180px;
  }

  .case-content {
      padding: 24px 20px;
  }

  .case-title {
      font-size: 16px;
      margin-bottom: 12px;
      height: 48px; /* 移动端固定两行高度: 16px * 1.5 * 2 = 48px */
  }

  .case-desc {
      font-size: 13px;
      margin-bottom: 16px;
  }

  .case-logo {
      justify-content: end;
  }

  .logo-wall {
      margin-bottom: 40px;
      padding: 30px 0;
  }

  .logo-wall-item {
      width: 100px;
      height: 50px;
  }

  .logo-wall-track {
      gap: 10px;
  }

  .customers-actions {
      flex-direction: column;
      gap: 12px;
  }

  .btn-customers {
      padding: 10px 32px;
      font-size: 15px;
      width: 100%;
      text-align: center;
  }
}

/* ==================== 为什么选择正远SRM ==================== */
.why-choose-section {
  background-color: #EDF1F6;
  padding: 40px 0;
}

.why-choose-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 50px 0;
}

/* 顶部大卡片 */
.why-choose-main-card {
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  min-height: 211px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  height: 210px;
}

.main-card-content {
  width: 50%;
  padding: 50px 60px;
}

.main-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.main-card-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.main-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-card-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
}

.main-card-desc {
  font-size: 15px;
  color: #666666;
  line-height: 1.8;
  margin: 0;
}

/* 底部两个卡片 */
.why-choose-bottom-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.bottom-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}
.bottom-card-content {
  padding: 40px 40px 0 40px;
}

.bottom-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.bottom-card-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.bottom-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bottom-card-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
}

.bottom-card-desc {
  font-size: 15px;
  color: #666666;
  line-height: 1.8;
  margin: 0 0 24px 0;
}

.bottom-card-image {
  width: 100%;
  margin-top: 24px;
}

.bottom-card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 0 8px 8px;
}

/* ==================== 权威认证 ==================== */
.certification-section {
  background-color: #fff;
  padding: 80px 0;
}

.certification-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 16px 0;
}

.certification-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin: 0 0 60px 0;
}

/* 第一行：三个卡片 */
.certification-row-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

/* 第二行：一个大卡片 */
.certification-row-2 {
  width: 100%;
}

.certification-row-2 .certification-card {
  min-height: 224px;
  height: auto;
  background: #F3F8FB;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* PC端：文字占左侧50%，图片占右侧50% */
.cert-content-left {
  width: 50%;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cert-image-right {
  width: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-image-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图标头部 */
.cert-icon-header {
  margin-bottom: 20px;
}

.cert-header-icon {
  width: 48px;
  height: 48px;
  display: block;
}

/* 副标题 */
.cert-subtitle {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* 通用卡片样式 */
.certification-card {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  position: relative;
}

/* 文字内容容器 */
.cert-content {
  padding: 40px;
}

/* 文字在上方 */
.cert-content-top {
  align-self: flex-start;
}

/* 文字在下方 */
.cert-content-bottom {
  align-self: flex-end;
}

/* 统计数据 */
.certification-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.stat-label {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

.stat-divider {
  width: 2px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
}

/* 标题和描述 */
.cert-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.cert-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 0;
}

/* ==================== 响应式设计 - 为什么选择和权威认证 ==================== */
@media screen and (max-width: 1024px) {
  .main-card-content {
      width: 55%;
      padding: 40px;
  }

  .why-choose-bottom-cards {
      gap: 24px;
  }

  .bottom-card {
      padding: 32px 28px;
  }
}

@media screen and (max-width: 768px) {
  .why-choose-section {
      padding: 40px 0;
  }

  .why-choose-title {
      font-size: 26px;
      margin-bottom: 40px;
      line-height: 1.3;
  }

  /* 将三个卡片整合成一个统一的块 */
  .why-choose-main-card {
      background: #fff;
      background-image: none !important;
      min-height: auto;
      height: auto;
      margin-bottom: 0;
      border-radius: 16px 16px 0 0;
      box-shadow: none;
  }

  .main-card-content {
      width: 100%;
      padding: 32px 24px;
  }

  .main-card-header {
      margin-bottom: 16px;
      gap: 12px;
      align-items: flex-start;
  }

  .main-card-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
  }

  .main-card-title {
      font-size: 18px;
      line-height: 1.5;
  }

  .main-card-desc {
      font-size: 13px;
      line-height: 1.7;
  }

  /* 底部卡片容器，变成一个整体 */
  .why-choose-bottom-cards {
      grid-template-columns: 1fr;
      gap: 0;
  }

  .bottom-card {
      padding: 0;
      overflow: hidden;
      box-shadow: none;
      border-radius: 0;
      background: #fff;
  }

  .bottom-card:first-child {
      border-top: 1px solid #E8EBF0;
  }

  .bottom-card:last-child {
      border-top: 1px solid #E8EBF0;
      border-radius: 0 0 16px 16px;
  }

  .bottom-card-content {
      padding: 32px 24px;
  }

  .bottom-card-header {
      margin-bottom: 16px;
      gap: 12px;
      align-items: flex-start;
  }

  .bottom-card-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
  }

  .bottom-card-title {
      font-size: 18px;
      line-height: 1.5;
  }

  .bottom-card-desc {
      font-size: 13px;
      line-height: 1.7;
      margin-bottom: 0;
  }

  /* 移动端隐藏底部图片 */
  .bottom-card-image {
      display: none;
  }

  /* 权威认证移动端 */
  .certification-section {
      padding: 60px 0;
  }

  .certification-title {
      font-size: 24px;
      margin-bottom: 12px;
  }

  .certification-subtitle {
      font-size: 14px;
      margin-bottom: 40px;
  }

  .certification-row-1 {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 20px;
  }

  .certification-row-2 {
      margin-top: 20px;
  }

  .certification-row-2 .certification-card {
      flex-direction: column;
      min-height: auto;
  }

  .certification-card {
      min-height: 310px;
  }

  .cert-content {
      padding: 30px 24px;
      text-align: center;
  }

  /* 移动端：文字和图片上下排列 */
  .cert-content-left {
      width: 100%;
      padding: 32px 24px;
  }

  .cert-image-right {
      width: 100%;
      order: 2;
  }

  .cert-icon-header {
      margin-bottom: 16px;
  }

  .cert-header-icon {
      width: 32px;
      height: 32px;
  }

  .cert-subtitle {
      font-size: 14px;
      margin-bottom: 12px;
  }

  .certification-stats {
      gap: 16px;
      margin-bottom: 20px;
  }

  .stat-number {
      font-size: 20px;
  }

  .stat-label {
      font-size: 16px;
  }

  .stat-divider {
      height: 32px;
  }

  .cert-title {
      font-size: 18px;
      margin-bottom: 10px;
  }

  .cert-desc {
      font-size: 13px;
  }
}

/* ==================== SRM资源 ==================== */
.srm-resources-section {
  background-color: #EDF3F8;
  padding: 40px 0;
}

.resources-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 60px 0;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.resource-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.resource-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: inherit;
}

.resource-card-image {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
}

.resource-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

.resource-card:hover .resource-card-image img {
  transform: scale(1.05);
}

.resource-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.tag-demo {
  background: #2164FF;
}

.tag-srm {
  background: #2164FF;
}

.tag-guide {
  background: #2164FF;
}

.resource-card-content {
  padding: 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-card-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a !important;
  line-height: 1.5;
  margin: 0 0 20px 0;
  min-height: 66px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-link {
  font-size: 15px;
  color: #2164FF !important;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: all 0.3s ease;
  margin-top: auto;
}

.resource-link:hover {
  color: #0D4FD9;
  transform: translateX(4px);
}

.resources-action {
  text-align: center;
}

.btn-all-resources {
  display: inline-block;
  padding: 10px 40px;
  background: #2164FF;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(33, 100, 255, 0.3);
}

.btn-all-resources:hover {
  background: #0D4FD9;
  box-shadow: 0 6px 16px rgba(33, 100, 255, 0.4);
  transform: translateY(-2px);
}

/* ==================== 响应式设计 - SRM资源 ==================== */

@media screen and (max-width: 768px) {
  .srm-resources-section {
      padding: 30px 0;
  }

  .resources-title {
      font-size: 24px;
      margin-bottom: 20px;
  }

  .resources-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 30px;
  }

  .resource-card-image {
      height: 200px;
  }

  .resource-card-content {
      padding: 24px 20px;
  }

  .resource-card-title {
      font-size: 18px;
      margin-bottom: 16px;
      min-height: auto;
  }

  .resource-link {
      font-size: 14px;
  }

  .btn-all-resources {
      padding: 12px 32px;
      font-size: 15px;
      width: 100%;
  }
}

/* ==================== 常见问题解答 ==================== */
.faq-section {
  background-color: #F7F7F7;
  padding: 40px 0;
}

.faq-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 50px 0;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto 60px;
}

.faq-item {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

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

.faq-question {
  display: flex;
  align-items: center;
  padding: 24px 28px;
  cursor: pointer;
  gap: 16px;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #FAFAFA;
}

.faq-question-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #FF6B35;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}

.faq-question-text {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.5;
}

.faq-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #999;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
  transform: rotate(90deg);
}

.faq-answer {
  padding: 0 28px 28px 72px;
  display: none;
  animation: fadeIn 0.3s ease;
}

.faq-item.active .faq-answer {
  display: block;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.faq-answer-intro {
  font-size: 15px;
  color: #333;
  margin: 0 0 16px 0;
  line-height: 1.8;
}

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

.faq-answer-list li {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 12px;
  padding-left: 0;
}

.faq-answer-list li:last-child {
  margin-bottom: 0;
}

.faq-answer-list li strong {
  color: #333;
  font-weight: 600;
}

.faq-footer {
  text-align: center;
  /* padding-top: 40px; */
}

.faq-footer-title {
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 30px 0;
}

.btn-contact-expert {
  cursor: pointer;
  display: inline-block;
  padding: 10px 30px;
  background: #2164FF;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(33, 100, 255, 0.3);
}

.btn-contact-expert:hover {
  background: #0D4FD9;
  box-shadow: 0 6px 16px rgba(33, 100, 255, 0.4);
  transform: translateY(-2px);
}

/* ==================== 响应式设计 - FAQ ==================== */
@media screen and (max-width: 768px) {
  .faq-section {
      padding: 30px 0;
  }

  .faq-title {
      font-size: 24px;
      margin-bottom: 30px;
  }

  .faq-list {
      margin-bottom: 40px;
  }

  .faq-item {
      margin-bottom: 12px;
  }

  .faq-question {
      padding: 20px 20px;
      gap: 12px;
  }

  .faq-question-icon {
      width: 24px;
      height: 24px;
      font-size: 16px;
  }

  .faq-question-text {
      font-size: 16px;
  }

  .faq-toggle {
      width: 20px;
      height: 20px;
      font-size: 20px;
  }

  .faq-answer {
      padding: 0 20px 20px 56px;
  }

  .faq-answer-intro,
  .faq-answer-list li {
      font-size: 14px;
  }

  .faq-footer-title {
      font-size: 22px;
      margin-bottom: 24px;
  }

  .btn-contact-expert {
      padding: 10px 32px;
      font-size: 15px;
      width: 100%;
  }
}

/* ==================== CTA区域 ==================== */
.cta-section {
  background-color: #fff;
}

.cta-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
  position: relative;
}

.cta-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.cta-title {
  font-size: 36px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.5;
  margin: 0 0 40px 0;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn-cta {
  display: inline-block;
  padding: 10px 36px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-cta-primary {
  background: #2164FF;
  color: #fff;
  border: 2px solid #2164FF;
  box-shadow: 0 4px 12px rgba(33, 100, 255, 0.3);
}

.btn-cta-primary:hover {
  background: #0D4FD9;
  border-color: #0D4FD9;
  box-shadow: 0 6px 16px rgba(33, 100, 255, 0.4);
  transform: translateY(-2px);
}

.btn-cta-outline {
  background: transparent;
  color: #2164FF;
  border: 2px solid #2164FF;
}

.btn-cta-outline:hover {
  background: #2164FF;
  color: #fff;
  box-shadow: 0 4px 12px rgba(33, 100, 255, 0.3);
  transform: translateY(-2px);
}

/* ==================== 响应式设计 - CTA ==================== */
@media screen and (max-width: 768px) {
  .cta-bg {
      padding: 60px 0;
  }

  .cta-title {
      font-size: 24px;
      margin-bottom: 30px;
  }

  .cta-buttons {
      flex-direction: column;
      gap: 12px;
  }

  .btn-cta {
      width: 100%;
      padding: 10px 32px;
      font-size: 15px;
  }
}