/* 作用域：仅影响 index-1.html 中的 ASOC MSSP/MDR 板块 */
.asoc-mssp-mdr {
  position: relative;
  padding: 90px 0;
  /* 使用站点默认深蓝背景，避免自定义梯度色覆盖 */
  background: inherit;
  color: #e9eef7;
}

/* 背景板容器（圆角 + 描边 + 阴影） */
.asoc-mssp-mdr .asoc-mssp-mdr-surface {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 46px 36px;
  border-radius: 24px;
  background: #221831; /* 根据要求更换为深紫蓝背景色 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* 背景板装饰框柱（右侧淡色竖向条纹） */
.asoc-mssp-mdr .asoc-mssp-mdr-surface::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -40px;
  width: 420px;
  height: 160%;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.08) 6%,
      rgba(255, 255, 255, 0.04) 12%,
      rgba(255, 255, 255, 0) 12%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 24px
    );
  transform: rotate(8deg);
  pointer-events: none;
}

/* 布局：左侧文案 + 右侧特性，两列 */
.asoc-mssp-mdr .asoc-mssp-mdr-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.asoc-mssp-mdr .asoc-mssp-mdr-main {
  flex: 0 0 44%;
  min-width: 320px;
}

.asoc-mssp-mdr .asoc-mssp-mdr-features-panel {
  flex: 1 1 auto;
  padding: 8px 4px; /* 上下留白，避免贴边 */
}

.asoc-mssp-mdr .asoc-mssp-mdr-title-group .sub-heading {
  letter-spacing: 0.08em;
  color: #2f66ff; /* 统一为自评估英文的蓝色 */
}

.asoc-mssp-mdr .asoc-mssp-mdr-title {
  margin-top: 6px;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.asoc-mssp-mdr .asoc-mssp-mdr-title-highlight {
  color: #ff7a1a; /* 使用自评估橙色 */
}
/* 调整 ASOC 英文样式接近上方英文副标题 */
.asoc-mssp-mdr .asoc-mssp-mdr-asoc-word {
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.asoc-mssp-mdr .asoc-mssp-mdr-subtitle {
  margin-top: 8px;
  font-weight: 600;
  color: #a9c6ff;
}

.asoc-mssp-mdr .asoc-mssp-mdr-description {
  color: #cfd8ea;
}

/* 左侧示意图片框 */
.asoc-mssp-mdr .asoc-mssp-mdr-illustration {
  margin-top: 24px;
  max-width: 500px;     /* 大屏更大显示 */
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.asoc-mssp-mdr .asoc-mssp-mdr-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 中等及以下屏幕，适当缩小最大宽度 */
@media (max-width: 1399.98px) {
  .asoc-mssp-mdr .asoc-mssp-mdr-illustration {
    max-width: 460px;
  }
}
@media (max-width: 991.98px) {
  .asoc-mssp-mdr .asoc-mssp-mdr-illustration {
    max-width: 100%;
  }
}

/* 登录入口按钮 */
.asoc-mssp-mdr .asoc-mssp-mdr-button-wrapper .asoc-mssp-mdr-assess-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
  color: #fff;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asoc-mssp-mdr .asoc-mssp-mdr-button-wrapper .asoc-mssp-mdr-assess-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23, 162, 184, 0.35);
}

/* 卡片网格与卡片定制 */
.asoc-mssp-mdr .asoc-mssp-mdr-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 固定两列 */
  column-gap: 36px;  /* 列间距（加大） */
  row-gap: 48px;     /* 每列上下间距（加大） */
  align-content: start;
}

.asoc-mssp-mdr .asoc-mssp-mdr-feature-card {
  background: rgba(255, 255, 255, 0.06); /* 稍提升不透明度，卡片边界更清晰 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  border-radius: 14px;
  padding: 20px 22px;        /* 统一内边距 */
  min-height: 160px;         /* 等高视觉 */
  display: flex;
  flex-direction: column;    /* 使标题与正文垂直排布 */
  margin: 0;                  /* 移除外边距，间距由grid控制 */
}

.asoc-mssp-mdr .asoc-mssp-mdr-feature-title {
  color: #ff7a1a;       /* 采用“自评估”高亮的橙色 */
  text-align: center;   /* 小标题居中 */
  font-size: 22px;      /* 收紧字号以保证一行显示 */
  line-height: 1.3;
  margin: 2px 0 8px;   /* 与正文的间距 */
  white-space: nowrap;  /* 强制单行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出时省略，避免换行 */
}

.asoc-mssp-mdr .asoc-mssp-mdr-feature-description {
  color: #c0cbe0;
  line-height: 1.85;
}

/* 响应式微调 */
@media (max-width: 991.98px) {
  .asoc-mssp-mdr {
    padding: 70px 0;
  }
  .asoc-mssp-mdr .asoc-mssp-mdr-content {
    flex-direction: column;
    gap: 28px;
  }
  .asoc-mssp-mdr .asoc-mssp-mdr-main {
    flex-basis: auto;
    min-width: 0;
  }
  .asoc-mssp-mdr .asoc-mssp-mdr-features-grid {
    grid-template-columns: 1fr; /* 移动端单列 */
    row-gap: 24px; /* 移动端行间距 */
  }
}