/*
 * 来源：从原页面内联 <style> 迁出，并按用途拆分为独立 CSS。
 * 原始哈希：dc25601ba304，用于追溯迁出前的样式内容。
 * 原始位置：index.html。
 * 维护说明：该文件依赖 HTML 中的 <link> 加载顺序，调整后请做页面回归检查。
 */
#st-service-commitments {
  padding: 90px 20px;
  background-color: #f9fbff;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.st-service-container {
  max-width: 1400px;
  /* 扩展容器宽度，保证五列服务卡片有足够横向空间。 */
  margin: 0 auto;
}

/* 标题区域：控制文字层级和上下间距。 */
.st-service-header {
  text-align: center;
  margin-bottom: 60px;
}

.st-service-header h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.st-service-header h2 span {
  color: #FF5B00;
}

/* 服务卡片网格：桌面端保持五列排列。 */
.st-service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  /* 收紧卡片间距，避免五列布局在桌面端过于拥挤。 */
}

/* 服务卡片：统一承诺项的背景、间距和交互反馈。 */
.st-service-card {
  background: #ffffff;
  padding: 30px 20px;
  /* 控制内边距，保证窄列下内容仍有呼吸感。 */
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  /* 让图标、标题和说明在卡片内垂直排列并居中。 */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 装饰条：强化卡片顶部的品牌识别。 */
.st-service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #FF5B00;
  transition: width 0.4s ease;
}

.st-service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: #FF5B00;
}

.st-service-card:hover::after {
  width: 100%;
}

/* 图标样式：统一服务承诺图标尺寸和背景。 */
.st-service-icon {
  width: 50px;
  height: 50px;
  background: #fff7ed;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  /* 配合 flex 布局保持图标水平居中。 */
  margin-left: auto;
  margin-right: auto;
}

.st-service-card:hover .st-service-icon {
  background: #FF5B00;
}

.st-service-icon svg {
  width: 26px;
  height: 26px;
  fill: #FF5B00;
  transition: 0.3s;
}

.st-service-card:hover .st-service-icon svg {
  fill: #ffffff;
}

.st-service-card h4 {
  font-size: 1.1rem;
  /* 缩小标题字号，避免五列布局中标题换行过多。 */
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
}

.st-service-card p {
  color: #64748b;
  font-size: 0.85rem;
  /* 控制说明文字字号，保证小屏阅读舒适。 */
  line-height: 1.5;
  margin: 0;
}

/* 响应式调整：在窄屏下保持内容层级和可读性。 */
@media (max-width: 1200px) {
  /* 中屏降为三列，减少卡片拥挤。 */
  .st-service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* 平板降为两列，保持卡片宽度和可读性。 */
  .st-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .st-service-header h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  /* 手机端单列展示，优先保证阅读和点击空间。 */
  .st-service-grid {
    grid-template-columns: 1fr;
  }

  .st-service-card {
    padding: 30px;
  }
}