/* =========================================================
   解决方案页专用样式
   （页面 Banner / 共享 Header 与 Footer / 底部 CTA 已在 common.css 定义）
   风格：暖橙主品牌 + 莫兰迪辅助色，卡片网格/痛点/AI 能力/转化条
   ========================================================= */

/* ---------- 方案网格区（白色底，与 Banner 浅暖形成明暗层次） ---------- */
.solutions-sec {
  background: #fff;
}

/* ---------- 方案卡片网格 ---------- */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.solution-card {
  scroll-margin-top: 96px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: 0 10px 30px rgba(30, 25, 20, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
}

/* 卡片头部：图标 + 方案名 */
.solution-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* 方案图标：主橙打头 + 多彩协调色（视觉更丰富、便于区分） */
.solution-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 25, 20, 0.16);
}

.solution-icon.icon-s1 { background: linear-gradient(135deg, #FF7A3D, #FFB04D); }   /* 主橙：医疗陪诊 */
.solution-icon.icon-s2 { background: linear-gradient(135deg, #5E9DBB, #8FB6CC); }   /* 天青蓝：电商零售 */
.solution-icon.icon-s3 { background: linear-gradient(135deg, #7FA98F, #9DBF9F); }   /* 苔绿：协会商会 */
.solution-icon.icon-s4 { background: linear-gradient(135deg, #B5974E, #C9B072); }   /* 暖沙：供应链 */
.solution-icon.icon-s5 { background: linear-gradient(135deg, #8E7BB5, #B3A3CF); }   /* 藕紫：企业办公 */
.solution-icon.icon-s6 { background: linear-gradient(135deg, #E8601C, #FF7A3D); }   /* 深橙：定制开发 */

.solution-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 6px;
}

.solution-sub {
  font-size: 13px;
  color: var(--blue-500);
  font-weight: 600;
}

/* 方案简介 */
.solution-desc {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 痛点分析 */
.solution-pain {
  background: #FCF7F1;
  border-left: 3px solid var(--blue-500);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 22px;
}

.solution-pain-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-500);
  margin-bottom: 8px;
}

.solution-pain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.solution-pain-list li {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.7;
}

.solution-pain-list li::before {
  content: "•";
  color: var(--blue-500);
  margin-right: 8px;
  font-weight: 700;
}

/* 能力标签（灵活少量，避免 AI 堆砌） */
.solution-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.solution-cap {
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 122, 61, 0.08);
  border: 1px solid rgba(255, 122, 61, 0.18);
  color: var(--blue-500);
  font-size: 12px;
  font-weight: 600;
}

/* 适用产品 */
.solution-apps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  flex-grow: 1;
}

.solution-apps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-body);
}

/* 首条"适用产品/服务方式"强化：加粗标题化，与功能清单区分 */
.solution-apps li:first-child {
  margin-bottom: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-gray);
  font-weight: 700;
  color: var(--text-title);
}

.solution-apps li:first-child::before {
  content: "●";
  background: none;
  color: var(--blue-500);
  font-size: 8px;
}

.solution-apps li::before {
  content: "✓";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 122, 61, 0.12);
  color: var(--blue-500);
  font-size: 11px;
}

/* 卡片底部操作 */
.solution-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.solution-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-500);
  transition: color 0.25s ease;
}

.solution-more:hover {
  color: var(--cyan-400);
}

/* 合作流程流程条 */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.flow-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}

.flow-step-num {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--grad-main);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(30, 25, 20, 0.14);
}

/* 步骤数字图标差异化配色（与方案卡片多彩方案呼应） */
.flow-d1 .flow-step-num { background: linear-gradient(135deg, #FF7A3D, #FFB04D); }   /* 主橙 */
.flow-d2 .flow-step-num { background: linear-gradient(135deg, #5E9DBB, #8FB6CC); }   /* 天青蓝 */
.flow-d3 .flow-step-num { background: linear-gradient(135deg, #7FA98F, #9DBF9F); }   /* 苔绿 */
.flow-d4 .flow-step-num { background: linear-gradient(135deg, #8E7BB5, #B3A3CF); }   /* 藕紫 */

.flow-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 8px;
}

.flow-step p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}

/* ---------- 信任转化条 ---------- */
.trust-bar {
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 210, 140, 0.28), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(255, 176, 77, 0.35), transparent 45%),
    linear-gradient(135deg, #FF7A3D 0%, #EE6E2F 100%);
  padding: 52px 0;
}

.trust-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.trust-stats {
  display: flex;
  gap: 52px;
}

.trust-stat {
  display: flex;
  flex-direction: column;
}

.trust-stat strong {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.trust-stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 8px;
  letter-spacing: 1px;
}

.trust-inner .btn-primary {
  background: #fff;
  color: var(--blue-500);
  box-shadow: 0 10px 24px rgba(120, 40, 0, 0.22);
}

.trust-inner .btn-primary:hover {
  background: #FFF3E4;
  transform: translateY(-2px);
}

/* ---------- 响应式适配 ---------- */
@media (max-width: 992px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }

  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-stats {
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .flow-steps {
    grid-template-columns: 1fr;
  }

  .solution-card {
    padding: 26px 22px;
  }

  .trust-inner {
    justify-content: center;
    text-align: center;
  }

  .trust-stats {
    justify-content: center;
    gap: 24px;
    width: 100%;
  }

  .trust-stat strong {
    font-size: 28px;
  }
}