:root {
  --af-bg: #f6f3ef;
  --af-surface: #ffffff;
  --af-surface-soft: #fbf7f3;
  --af-text: #221f1c;
  --af-muted: #6b625b;
  --af-border: #e8ddd4;
  --af-primary: #d51920;
  --af-primary-dark: #ad1017;
  --af-accent: #d51920;
  --af-success: #06a37f;
  --af-shadow: 0 18px 44px rgba(52, 39, 31, 0.08);
  --af-radius: 16px;
  --af-wrap: min(1180px, calc(100% - 48px));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.case-template-page {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--af-text);
  background: #f5f5f5;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.af-wrap {
  width: var(--af-wrap);
  margin: 0 auto;
}

main.case-template-main {
  padding: 28px 0 72px;
}

.case-section {
  margin-top: 20px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  box-shadow: var(--af-shadow);
  padding: 34px;
}

.case-section h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.25;
}
.case-section p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--af-muted);
}

.section-subtitle {
  margin: 0 0 24px;
  color: var(--af-muted);
  font-size: 15px;
}

.case-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fffdfa 0%, #f6eee8 100%),
    url("/assets/images/case/default-case-hero.jpg") center/cover no-repeat;
  color: var(--af-text);
  border: 1px solid #eee3da;
}

.case-hero::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 25, 32, 0.14) 0%, rgba(213, 25, 32, 0) 70%);
}

.case-hero > * {
  position: relative;
  z-index: 1;
}

.case-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.case-hero-main {
  min-width: 0;
}

.case-hero-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.case-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffd2d9;
  background: #fff1f3;
  color: #b3001b;
  font-size: 13px;
  font-weight: 600;
}

.case-hero h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.2;
}

.case-hero-lead {
  margin: 14px 0 0;
  max-width: 900px;
  color: var(--af-muted);
  font-size: 14px;
}

.hero-metrics {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hero-metrics li {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--af-border);
  padding: 14px;
}

.hero-metrics strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
}

.hero-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--af-muted);
}

.case-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case-brand-card {
  border-radius: 16px;
  border: 1px solid #e8ddd4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(52, 39, 31, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.case-brand-logo {
  min-height: 68px;
  border: 1px solid var(--af-border);
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.case-brand-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.case-brand-cover {
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--af-border);
  background: #eef5ff;
  aspect-ratio: 16 / 10;
}

.case-brand-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-brand-meta {
  margin-top: 12px;
  border-top: 1px solid var(--af-border);
  padding-top: 10px;
}

.case-brand-meta p {
  margin: 0;
  font-size: 13px;
  color: #5f6b7c;
}

.case-brand-meta p + p {
  margin-top: 6px;
}

.case-brand-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--af-muted);
  line-height: 1.65;
}

.af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  white-space: nowrap;
}
.af-overview-profile {
    border: 1px solid rgba(125, 151, 214, 0.14);
    border-radius: 14px;
    background: radial-gradient(circle at 82% 16%, rgba(23, 183, 198, 0.12), transparent 18%), radial-gradient(circle at 14% 72%, rgba(216, 41, 52, 0.14), transparent 20%), linear-gradient(135deg, #10192f 0%, #18284b 42%, #1b4a57 100%);
    color: #fff;
    padding: 18px 20px;
    margin: 0 0 16px;
    box-shadow: 0 8px 20px rgba(12, 59, 108, 0.18);
}
.af-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--af-primary) 0%, var(--af-primary-dark) 100%);
  box-shadow: 0 16px 30px rgba(213, 25, 32, 0.2);
}

.af-btn-primary:hover {
  background: linear-gradient(180deg, #c7141b 0%, #960d14 100%);
}

.af-btn-ghost {
  border-color: rgba(213, 25, 32, 0.18);
  color: var(--af-primary-dark);
  background: transparent;
}

.af-btn-ghost:hover {
  background: rgba(213, 25, 32, 0.08);
}

.quickview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quickview-card {
  border: 1px solid var(--af-border);
  border-radius: 12px;
  background: var(--af-surface-soft);
  padding: 14px;
}

.quickview-card dt {
  margin: 0;
  color: var(--af-muted);
  font-size: 13px;
}

.quickview-card dd {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.quickview-table-wrap {
  display: none;
}

.mobile-scroll-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8b5d52;
}

.challenges-grid,
.value-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.challenge-card,
.value-card,
.related-card {
  border: 1px solid var(--af-border);
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
}

.challenge-card h3,
.value-card h3,
.related-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.challenge-card p,
.value-card p,
.related-card p {
  margin: 10px 0 0;
  color: var(--af-muted);
  font-size: 14px;
}

.triangle-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.triangle-card {
  border-radius: 14px;
  border: 1px solid var(--af-border);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  padding: 18px;
}

.triangle-card h3 {
  margin: 0;
  font-size: 19px;
}

.triangle-card p {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--af-muted);
}

.solution-block {
  margin-top: 12px;
  border: 1px solid var(--af-border);
  border-radius: 14px;
  overflow: hidden;
}

.solution-block:first-of-type {
  margin-top: 0;
}

.solution-head {
  padding: 14px 16px;
  background: #fff1f3;
  border-bottom: 1px solid var(--af-border);
  font-weight: 700;
  color: var(--af-primary-dark);
}

.solution-body {
  padding: 16px;
}

.solution-body ul,
.impl-phase ul,
.value-card ul,
.lessons-list,
.metrics-list {
  margin: 0;
  padding-left: 18px;
}

.solution-body li,
.impl-phase li,
.value-card li,
.lessons-list li,
.metrics-list li {
  margin-top: 7px;
}

.solution-body li:first-child,
.impl-phase li:first-child,
.value-card li:first-child,
.lessons-list li:first-child,
.metrics-list li:first-child {
  margin-top: 0;
}

.impl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.impl-phase {
  border: 1px solid var(--af-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--af-surface-soft);
}

.impl-phase .phase-title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
}

.impl-phase .phase-output {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #e6b7bc;
  background: #fff7f8;
  color: #8c3138;
  font-size: 13px;
}

.value-card .value-number {
  display: block;
  margin-top: 10px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--af-primary);
}

.quote-card {
  border-left: 4px solid var(--af-accent);
  border-radius: 10px;
  background: #fff7f8;
  padding: 18px;
}

.quote-card blockquote {
  margin: 0;
  font-size: 18px;
  color: #4b2225;
}

.quote-card p {
  margin: 10px 0 0;
  color: #7b5356;
}

.related-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #7f6a5b;
}

.related-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  color: var(--af-primary);
  font-weight: 600;
}

.bottom-cta {
  margin-top: 20px;
  padding: 34px;
  border-radius: var(--af-radius);
  background: linear-gradient(180deg, var(--af-primary) 0%, var(--af-primary-dark) 100%);
  color: #ffffff;
}

.bottom-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 34px);
}

.bottom-cta p {
  margin: 10px 0 0;
  max-width: 900px;
  color: rgba(255, 255, 255, 0.9);
}

.bottom-cta .case-actions {
  margin-top: 18px;
}

.bottom-cta .af-btn-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: none;
}

.bottom-cta .af-btn-primary:hover {
  background: rgba(255, 255, 255, 0.22);
}

.footer-spacer {
  height: 20px;
}

.case-template-top-nav {
  border-bottom: 1px solid #e8ddd4;
}

.case-template-top-nav .u-menurow {
  width: var(--af-wrap);
  margin: 0 auto;
}

.case-breadcrumb {
  margin: 0 0 12px;
  color: #8b6f62;
  font-size: 13px;
}

.case-breadcrumb a {
  color: #7a5e52;
}

.af-overview-profile {
  border: 1px solid rgba(125, 151, 214, 0.14);
  border-radius: 14px;
  background: radial-gradient(circle at 82% 16%, rgba(23, 183, 198, 0.12), transparent 18%), radial-gradient(circle at 14% 72%, rgba(216, 41, 52, 0.14), transparent 20%), linear-gradient(135deg, #10192f 0%, #18284b 42%, #1b4a57 100%);
  color: #fff;
  padding: 18px 20px;
  margin: 0 0 16px;
  box-shadow: 0 8px 20px rgba(12, 59, 108, 0.18);
}

.af-overview-profile-main {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.af-overview-profile .af-overview-profile-main p{
    margin: 10px 0 15px;
    color: #ffffff;
    font-size: 32px;
}

.af-overview-profile-sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(242, 248, 255, 0.96);
}

.bpma-overview-card dd {
    margin: 7px 0 0;
    font-size: 15px;
    font-weight: 600;
}
.bpma-overview-card dt {
    margin: 0;
    color: var(--bpma-muted);
    font-size: 13px;
}
.bottom-cta .af-btn-ghost, .bpa-bottom-cta .bpa-btn-ghost, .bpma-bottom-cta .bpma-btn-ghost, .bpe-bottom-cta .bpe-btn-ghost, .full-bottom-cta .full-btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.12);
}
.bpma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    padding: 0 20px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1100px) {
  .case-hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-metrics,
  .quickview-grid,
  .challenges-grid,
  .triangle-grid,
  .impl-grid,
  .value-grid,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --af-wrap: calc(100% - 24px);
  }

  main.case-template-main {
    padding: 16px 0 56px;
  }

  .case-section {
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px 16px;
  }
 
  .case-hero {
    padding-top: 22px;
  }

  .case-brand-card {
    margin-top: 2px;
  }

  .hero-metrics,
  .challenges-grid,
  .triangle-grid,
  .impl-grid,
  .value-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .quickview-grid {
    display: none;
  }

  .quickview-table-wrap {
    display: block;
  }

  .quickview-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13px;
  }

  .quickview-table th,
  .quickview-table td {
    border: 1px solid var(--af-border);
    padding: 10px;
    text-align: left;
    vertical-align: top;
  }

  .quickview-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .quickview-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .quickview-scroll::-webkit-scrollbar-thumb {
    background: #d9c3b3;
    border-radius: 8px;
  }

  .bottom-cta {
    padding: 24px 16px;
  }

  .af-btn {
    width: 100%;
  }

  .case-actions {
    gap: 10px;
  }
  .af-overview-profile {
        padding: 14px 14px 13px;
        margin-bottom: 12px;
    }
}


/* ===== Merged From bpa-case-template.css ===== */
:root {
  --bpa-bg: #f6f3ef;
  --bpa-surface: #ffffff;
  --bpa-surface-soft: #fbf7f3;
  --bpa-text: #221f1c;
  --bpa-muted: #6b625b;
  --bpa-border: #e8ddd4;
  --bpa-primary: #d51920;
  --bpa-primary-dark: #ad1017;
  --bpa-accent: #d51920;
  --bpa-shadow: 0 18px 44px rgba(52, 39, 31, 0.08);
  --bpa-radius: 16px;
  --bpa-wrap: min(1200px, calc(100% - 48px));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.bpa-case-page {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: #f5f5f5;
  color: var(--bpa-text);
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.bpa-wrap {
  width: var(--bpa-wrap);
  margin: 0 auto;
}

main.bpa-case-main {
  padding: 50px 0 22px;
}

.bpa-section {
  margin-top: 18px;
  background: var(--bpa-surface);
  border: 1px solid var(--bpa-border);
  border-radius: var(--bpa-radius);
  box-shadow: var(--bpa-shadow);
  padding: 34px;
}

.bpa-section h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
}

.bpa-section p {
    margin: 10px 0 10px;
    color: var(--bpa-muted);
    font-size: 14px;
}
.bpa-section-subtitle {
  margin: 0 0 22px;
  color: var(--bpa-muted);
  font-size: 15px;
}

.bpa-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #eee3da;
  background:
    linear-gradient(180deg, #fffdfa 0%, #f6eee8 100%),
    url("/assets/images/case/bpa-case-hero.jpg") center/cover no-repeat;
  color: var(--bpa-text);
}

.bpa-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 25, 32, 0.14) 0%, rgba(213, 25, 32, 0) 70%);
}

.bpa-hero > * {
  position: relative;
  z-index: 1;
}

.bpa-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.bpa-hero-main {
  min-width: 0;
}

.bpa-breadcrumb {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8b6f62;
}

.bpa-breadcrumb a {
  color: #7a5e52;
}

.bpa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.bpa-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffd2d9;
  background: #fff1f3;
  color: #b3001b;
  font-size: 13px;
  font-weight: 600;
}

.bpa-hero h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.38;
}

.bpa-hero-lead {
  margin: 14px 0 0;
  max-width: 940px;
  color: var(--bpa-muted);
}

.bpa-hero-metrics {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpa-hero-metrics li {
  border-radius: 14px;
  border: 1px solid var(--bpa-border);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

.bpa-hero-metrics strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
}

.bpa-hero-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--bpa-muted);
}

.bpa-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bpa-brand-card {
  border-radius: 16px;
  border: 1px solid #e8ddd4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(52, 39, 31, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.bpa-brand-logo {
  min-height: 68px;
  border: 1px solid var(--bpa-border);
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.bpa-brand-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.bpa-brand-cover {
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bpa-border);
  background: #f7f1ed;
  aspect-ratio: 16 / 10;
}

.bpa-brand-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpa-brand-meta {
  margin-top: 12px;
  border-top: 1px solid var(--bpa-border);
  padding-top: 10px;
}

.bpa-brand-meta p {
  margin: 0;
  font-size: 13px;
  color: #5f6b7c;
}

.bpa-brand-meta p + p {
  margin-top: 6px;
}

.bpa-brand-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--bpa-muted);
  line-height: 1.65;
}

.bpa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
#overview .ak-overview-grid .ak-profile-main {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .ak-overview-grid .ak-profile-sub {
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .zd-overview-grid .zd-profile-main {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .zd-overview-grid .zd-profile-sub {
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

#overview .yq-overview-grid .yq-profile-main {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .yq-overview-grid .yq-profile-sub {
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

#overview .goldwind-overview-grid .goldwind-profile-main {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .goldwind-overview-grid .goldwind-profile-sub {
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

#overview .rb-overview-grid .rb-profile-main {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .rb-overview-grid .rb-profile-sub {
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}


#overview .xf-overview-grid .xf-main {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#overview .xf-overview-grid .xf-sub {
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.bpa-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--bpa-primary) 0%, var(--bpa-primary-dark) 100%);
  box-shadow: 0 16px 30px rgba(213, 25, 32, 0.2);
}

.bpa-btn-primary:hover {
  background: linear-gradient(180deg, #c7141b 0%, #960d14 100%);
}

.bpa-btn-ghost {
  background: transparent;
  color: var(--bpa-primary-dark);
  border-color: rgba(213, 25, 32, 0.18);
}

.bpa-btn-ghost:hover {
  background: rgba(213, 25, 32, 0.08);
}

.bpa-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpa-overview-card {
  border: 1px solid var(--bpa-border);
  border-radius: 12px;
  background: var(--bpa-surface-soft);
  padding: 14px;
}

.bpa-overview-card dt {
  margin: 0;
  color: var(--bpa-muted);
  font-size: 13px;
}

.bpa-overview-card dd {
  margin: 7px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.bpa-overview-table-wrap {
  display: none;
}

.bpa-mobile-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8b5d52;
}

.bpa-overview-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bpa-overview-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 13px;
}

.bpa-overview-table th,
.bpa-overview-table td {
  border: 1px solid var(--bpa-border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.bpa-challenge-grid,
.bpa-three-grid,
.bpa-value-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bpa-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.bpa-three-grid{
  margin-top:15px;
}
.bpa-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bpa-card {
  border: 1px solid var(--bpa-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
  margin-bottom:10px;
}

.bpa-card h3,
.bpa-card h4 {
  margin: 0;
  line-height: 1.35;
}

.bpa-card h3 {
  font-size: 18px;
}

.bpa-card h4 {
  font-size: 17px;
}

.bpa-card p {
  margin: 10px 0 0;
  color: var(--bpa-muted);
  font-size: 14px;
}

.bpa-impact {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px dashed #e6b7bc;
  background: #fff7f8;
  padding: 10px;
  color: #8c3138;
  font-size: 13px;
}

.bpa-solution-block {
  margin-top: 12px;
  border: 1px solid var(--bpa-border);
  border-radius: 14px;
  overflow: hidden;
}

.bpa-solution-block:first-of-type {
  margin-top: 0;
}

.bpa-solution-head {
  padding: 14px 16px;
  background: #fff1f3;
  border-bottom: 1px solid var(--bpa-border);
}

.bpa-solution-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--bpa-primary-dark);
}

.bpa-solution-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  padding: 16px;
}

.bpa-solution-list,
.bpa-result-list,
.bpa-lessons,
.bpa-value-list{
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
}


.bpa-step-list{
list-style: none;
margin-top:10px;
font-size: 14px;
}


.bpa-solution-list li,
.bpa-result-list li,
.bpa-lessons li {
  margin-top: 8px;
 
}
.bpa-value-list li {
  margin-top: 8px;
list-style-type: disc;
 }

.bpa-result-list{
  margin-top:8px;
 
}
/***流程规划设计图标****/
.bpa-solution-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/done.png') no-repeat;
    background-size: 14px 14px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpa-result-list li::before{
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/goodjob.png') no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}


.bpa-lessons li::before{
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/goodjob.png') no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}






.bpa-solution-list li:first-child,
.bpa-result-list li:first-child,
.bpa-lessons li:first-child,
.bpa-value-list li:first-child,
.bpa-step-list li:first-child {
  margin-top: 0;
}

.bpa-solution-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bpa-border);
  background: #f7f1ed;
  min-height: 180px;
}

.bpa-step-output {
  margin: 10px 0 0;
  border: 1px dashed #e6b7bc;
  border-radius: 10px;
  background: #fff7f8;
  color: #8c3138;
  font-size: 13px;
  padding: 10px;
}

.bpa-value-number {
  display: block;
  margin: 10px 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--bpa-primary);
}

.bpa-quote {
  border-left: 4px solid var(--bpa-accent);
  border-radius: 10px;
  background: #fff7f8;
  padding: 18px;
}

.bpa-quote blockquote {
  margin: 0;
  font-size: 18px;
  color: #4b2225;
}

.bpa-quote p {
  margin: 10px 0 0;
  color: #7b5356;
  font-size:16px;
}

.bpa-related-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #7f6a5b;
}

.bpa-related-kpi {
  margin: 10px 0 0;
  padding-left: 18px;
}

.bpa-related-kpi li {
  margin-top: 6px;
  color: var(--bpa-muted);
  font-size: 13px;
  list-style-type: disc;
}

.bpa-related-kpi li:first-child {
  margin-top: 0;
}

.bpa-related-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--bpa-primary);
  font-size: 14px;
}

.bpa-bottom-cta {
  margin-top: 18px;
  border-radius: var(--bpa-radius);
  background: radial-gradient(260px 180px at 92% 18%, rgba(255, 106, 118, 0.2), rgba(255, 106, 118, 0) 72%), linear-gradient(135deg, rgba(12, 21, 37, 0.98), rgba(72, 12, 25, 0.98)), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  color: #ffffff;
  padding: 34px;
}

.bpa-bottom-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.bpa-bottom-cta p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 980px;
      font-size: 18px;
}

.bpa-bottom-cta .bpa-actions {
  margin-top: 18px;
}

.bpa-footer-spacer {
  height: 18px;
}

.bpa-top-nav {
  border-bottom: 1px solid #e8ddd4;
}

.bpa-top-nav .u-menurow {
  width: var(--bpa-wrap);
  margin: 0 auto;
}
#overview  .af-overview-profile .af-overview-profile-main{
margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

#overview  .af-overview-profile .af-overview-profile-sub{
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

#overview  .zj-overview-grid .zj-profile-main{
margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

#overview  .zj-overview-grid .zj-profile-sub{
    margin-top: 12px;
    font-size: clamp(14px, 3.2vw, 18px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}


@media (max-width: 1100px) {
  .bpa-hero-layout {
    grid-template-columns: 1fr;
  }

  .bpa-hero-metrics,
  .bpa-overview-grid,
  .bpa-challenge-grid,
  .bpa-three-grid,
  .bpa-value-grid,
  .bpa-related-grid,
  .bpa-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bpa-solution-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --bpa-wrap: calc(100% - 24px);
  }

  main.bpa-case-main {
    padding: 14px 0 56px;
  }

  .bpa-section {
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px 16px;
  }

  .bpa-hero {
    padding-top: 22px;
  }

  .bpa-brand-card {
    margin-top: 2px;
  }

  .bpa-hero-metrics,
  .bpa-challenge-grid,
  .bpa-three-grid,
  .bpa-value-grid,
  .bpa-related-grid,
  .bpa-step-grid,
  .bpa-overview-grid {
    grid-template-columns: 1fr;
  }

  .bpa-overview-grid {
    display: none;
  }

  .bpa-overview-table-wrap {
    display: block;
  }

  .bpa-btn {
    width: 100%;
  }

  .bpa-actions {
    gap: 10px;
  }
}


/* ===== Merged From bpma-case-template.css ===== */
:root {
  --bpma-bg: #f6f3ef;
  --bpma-surface: #ffffff;
  --bpma-surface-soft: #fbf7f3;
  --bpma-text: #221f1c;
  --bpma-muted: #6b625b;
  --bpma-border: #e8ddd4;
  --bpma-primary: #d51920;
  --bpma-primary-dark: #ad1017;
  --bpma-accent: #d51920;
  --bpma-shadow: 0 18px 44px rgba(52, 39, 31, 0.08);
  --bpma-radius: 16px;
  --bpma-wrap: min(1200px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

body.bpma-case-page {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--bpma-text);
  background: #f5f5f5;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.bpma-wrap {
  width: var(--bpma-wrap);
  margin: 0 auto;
}

main.bpma-case-main {
  padding: 50px 0 22px;
}

.bpma-top-nav {
  border-bottom: 1px solid #e8ddd4;
}

.bpma-top-nav .u-menurow {
  width: var(--bpma-wrap);
  margin: 0 auto;
}

.bpma-section {
  margin-top: 18px;
  background: var(--bpma-surface);
  border: 1px solid var(--bpma-border);
  border-radius: var(--bpma-radius);
  box-shadow: var(--bpma-shadow);
  padding: 34px;
}

.bpma-section h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.24;
}
.bpma-section p {
    margin: 10px 0 15px;
    color: var(--bpa-muted);
    font-size: 14px;
}


.bpma-subtitle {
  margin: 0 0 22px;
  color: var(--bpma-muted);
  font-size: 15px;
}

.bpma-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #eee3da;
  color: var(--bpma-text);
  background:
    linear-gradient(180deg, #fffdfa 0%, #f6eee8 100%),
    url("/assets/images/case/bpma-case-hero.jpg") center/cover no-repeat;
}

.bpma-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 25, 32, 0.14) 0%, rgba(213, 25, 32, 0) 70%);
}

.bpma-hero > * {
  position: relative;
  z-index: 1;
}

.bpma-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.bpma-hero-main {
  min-width: 0;
}

.bpma-breadcrumb {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8b6f62;
}

.bpma-breadcrumb a {
  color: #7a5e52;
}

.bpma-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.bpma-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffd2d9;
  background: #fff1f3;
  color: #b3001b;
  font-size: 13px;
  font-weight: 600;
}

.bpma-hero h1 {
    margin: 0;
    font-size: clamp(24px, 4.2vw, 40px);
    line-height: 1.38;
}

.bpma-hero-lead {
  margin: 14px 0 0;
  max-width: 960px;
  color: var(--bpma-muted);
}

.bpma-hero-metrics {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpma-hero-metrics li {
  border-radius: 14px;
  border: 1px solid var(--bpma-border);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

.bpma-hero-metrics strong {
  display: block;
  font-size: clamp(22px, 3vw, 26px);
  line-height: 1.15;
}

.bpma-hero-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--bpma-muted);
}

.bpma-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bpma-brand-card {
  border-radius: 16px;
  border: 1px solid #e8ddd4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(52, 39, 31, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.bpma-brand-logo {
  min-height: 68px;
  border: 1px solid var(--bpma-border);
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.bpma-brand-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.bpma-brand-cover {
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bpma-border);
  background: #f7f1ed;
  aspect-ratio: 16 / 10;
}

.bpma-brand-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpma-brand-meta {
  margin-top: 12px;
  border-top: 1px solid var(--bpma-border);
  padding-top: 10px;
}

.bpma-brand-meta p {
  margin: 0;
  font-size: 13px;
  color: #5f6b7c;
}

.bpma-brand-meta p + p {
  margin-top: 6px;
}

.bpma-brand-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--bpma-muted);
  line-height: 1.65;
}

.bpma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.bpma-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--bpma-primary) 0%, var(--bpma-primary-dark) 100%);
  box-shadow: 0 16px 30px rgba(213, 25, 32, 0.2);
}

.bpma-btn-primary:hover {
  background: linear-gradient(180deg, #c7141b 0%, #960d14 100%);
}

.bpma-btn-ghost {
  border-color: rgba(213, 25, 32, 0.18);
  color: var(--bpma-primary-dark);
  background: transparent;
}

.bpma-btn-ghost:hover {
  background: rgba(213, 25, 32, 0.08);
}

.bpma-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpma-overview-card {
  border: 1px solid var(--bpma-border);
  border-radius: 12px;
  background: var(--bpma-surface-soft);
  padding: 14px;
}

.bpma-overview-card dt {
  margin: 0;
  color: var(--bpma-muted);
  font-size: 13px;
}

.bpma-overview-card dd {
  margin: 7px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.bpma-overview-table-wrap { display: none; }

.bpma-mobile-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8b5d52;
}

.bpma-overview-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bpma-overview-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 13px;
}

.bpma-overview-table th,
.bpma-overview-table td {
  border: 1px solid var(--bpma-border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.bpma-challenge-grid,
.bpma-three-grid,

.bpma-related-grid,
.bpma-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bpma-value-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.bpma-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bpma-card {
  border: 1px solid var(--bpma-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
  margin-bottom: 10px;
}

.bpma-card h3,
.bpma-card h4 {
  margin: 0;
  line-height: 1.35;
}

.bpma-card h3 { font-size: 18px; }
.bpma-card h4 { font-size: 16px; }

.bpma-card p {
  margin: 10px 0 0;
  color: var(--bpma-muted);
  font-size: 14px;
}

.bpma-impact {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px dashed #e6b7bc;
  background: #fff7f8;
  color: #8c3138;
  padding: 10px;
  font-size: 13px;
}

.bpma-solution-block {
  margin-top: 12px;
  border: 1px solid var(--bpma-border);
  border-radius: 14px;
  overflow: hidden;
}

.bpma-solution-block:first-of-type {
  margin-top: 0;
}

.bpma-solution-head {
  padding: 14px 16px;
  background: #fff1f3;
  border-bottom: 1px solid var(--bpma-border);
}

.bpma-solution-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--bpma-primary-dark);
}

.bpma-solution-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  padding: 16px;
}

.bpma-solution-list,
.bpma-result-list,
.bpma-value-list,
.bpma-lessons,
.bpma-related-kpi {
    margin: 10px 0 0;
    padding-left: 16px;
}
.bpma-step-list{
   margin-top:10px;
   font-size: 14px;
}

.bpma-solution-list li,
.bpma-result-list li,
.bpma-lessons li,
.bpma-step-list li{
  margin-top: 8px;
  font-size: 14px;
}

.bpma-related-kpi li {
    margin-top: 6px;
    color: var(--bpa-muted);
    font-size: 13px;
    list-style-type: disc;
}
.bpma-value-list li {
  margin-top: 8px;
  list-style-type: disc;
  font-size: 13px;
 }
/***流程管理图标****/
.bpma-solution-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/done.png') no-repeat;
    background-size: 14px 14px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpma-result-list li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 14px 14px;
    background-position: bottom;
    display: inline-block;
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpma-lessons li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block;
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}


.bpma-solution-list li:first-child,
.bpma-result-list li:first-child,
.bpma-value-list li:first-child,
.bpma-lessons li:first-child,
.bpma-step-list li:first-child,
.bpma-related-kpi li:first-child {
  margin-top: 0;
}







.bpa-lessons li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block;
    width: 30px;
    height: 20px;
}
.bpe-lessons li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block;
    width: 30px;
    height: 20px;
}

.bpma-solution-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bpma-border);
  background: #f7f1ed;
  min-height: 180px;
}

.bpma-scene-card h4 {
  font-size: 18px;
}

.bpma-scene-point {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid #f1dbcf;
  background: #fff7f8;
  padding: 10px;
}

.bpma-scene-point strong {
  display: block;
  color: #8c3138;
  font-size: 13px;
}

.bpma-scene-point p {
  margin: 6px 0 0;
  font-size: 13px;
}

.bpma-step-output {
  margin: 10px 0 0;
  border: 1px dashed #e6b7bc;
  border-radius: 10px;
  background: #fff7f8;
  color: #8c3138;
  font-size: 13px;
  padding: 10px;
}

.bpma-value-number {
  display: block;
  margin: 10px 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--bpma-primary);
}

.bpma-quote {
  border-left: 4px solid var(--bpma-accent);
  border-radius: 10px;
  background: #fff7f8;
  padding: 18px;
}

.bpma-quote blockquote {
  margin: 0;
  font-size: 18px;
  color: #4b2225;
}

.bpma-quote p {
  margin: 10px 0 0;
  color: #7b5356;
  font-size:16px;
}

.bpma-related-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #7f6a5b;
}

.bpma-related-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--bpma-primary);
  font-size: 14px;
}

.bpma-bottom-cta {
  margin-top: 18px;
  border-radius: var(--bpma-radius);
  background: radial-gradient(260px 180px at 92% 18%, rgba(255, 106, 118, 0.2), rgba(255, 106, 118, 0) 72%), linear-gradient(135deg, rgba(12, 21, 37, 0.98), rgba(72, 12, 25, 0.98)), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  color: #ffffff;
  padding: 34px;
}

.bpma-bottom-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.bpma-bottom-cta p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 980px;
      font-size: 18px;
}

.bpma-bottom-cta .bpma-actions {
  margin-top: 18px;
}

.bpma-footer-spacer {
  height: 18px;
}
.bottom-navigation-bottom-inner-bottom .right-coding img {
  display: inline-block;
}

@media (max-width: 1100px) {
  .bpma-hero-layout {
    grid-template-columns: 1fr;
  }

  .bpma-hero-metrics,
  .bpma-overview-grid,
  .bpma-challenge-grid,
  .bpma-three-grid,
  .bpma-value-grid,
  .bpma-related-grid,
  .bpma-scene-grid,
  .bpma-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bpma-solution-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --bpma-wrap: calc(100% - 24px);
  }

  main.bpma-case-main {
    padding: 14px 0 56px;
  }

  .bpma-section {
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px 16px;
  }

  .bpma-hero {
    padding-top: 22px;
  }

  .bpma-brand-card {
    margin-top: 2px;
  }

  .bpma-hero-metrics,
  .bpma-challenge-grid,
  .bpma-three-grid,
  .bpma-value-grid,
  .bpma-related-grid,
  .bpma-scene-grid,
  .bpma-step-grid,
  .bpma-overview-grid {
    grid-template-columns: 1fr;
  }

  .bpma-overview-grid { display: none; }
  .bpma-overview-table-wrap { display: block; }

  .bpma-btn { width: 100%; }
  .bpma-actions { gap: 10px; }
}


/* ===== Merged From bpe-case-template.css ===== */
:root {
  --bpe-bg: #f6f3ef;
  --bpe-surface: #ffffff;
  --bpe-surface-soft: #fbf7f3;
  --bpe-text: #221f1c;
  --bpe-muted: #6b625b;
  --bpe-border: #e8ddd4;
  --bpe-primary: #d51920;
  --bpe-primary-dark: #ad1017;
  --bpe-accent: #d51920;
  --bpe-shadow: 0 18px 44px rgba(52, 39, 31, 0.08);
  --bpe-radius: 16px;
  --bpe-wrap: min(1200px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

body.bpe-case-page {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--bpe-text);
  background: #f5f5f5;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.bpe-wrap {
  width: var(--bpe-wrap);
  margin: 0 auto;
}

main.bpe-case-main {
  padding: 50px 0 72px;
}

.bpe-top-nav {
  border-bottom: 1px solid #e8ddd4;
}

.bpe-top-nav .u-menurow {
  width: var(--bpe-wrap);
  margin: 0 auto;
}

.bpe-section {
  margin-top: 18px;
  background: var(--bpe-surface);
  border: 1px solid var(--bpe-border);
  border-radius: var(--bpe-radius);
  box-shadow: var(--bpe-shadow);
  padding: 34px;
}

.bpe-section h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.24;
}
.bpe-section p {
    margin: 10px 0 15px;
    color: var(--bpa-muted);
    font-size: 14px;
}
.bpe-subtitle {
  margin: 0 0 22px;
  color: var(--bpe-muted);
  font-size: 15px;
}

.bpe-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #eee3da;
  color: var(--bpe-text);
  background:
    linear-gradient(180deg, #fffdfa 0%, #f6eee8 100%),
    url("/assets/images/case/bpe-case-hero.jpg") center/cover no-repeat;
}

.bpe-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 25, 32, 0.14) 0%, rgba(213, 25, 32, 0) 70%);
}

.bpe-hero > * {
  position: relative;
  z-index: 1;
}

.bpe-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.bpe-hero-main {
  min-width: 0;
}

.bpe-breadcrumb {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8b6f62;
}

.bpe-breadcrumb a {
  color: #7a5e52;
}

.bpe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.bpe-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffd2d9;
  background: #fff1f3;
  color: #b3001b;
  font-size: 13px;
  font-weight: 600;
}

.bpe-hero h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.18;
}

.bpe-hero-lead {
  margin: 14px 0 0;
  max-width: 960px;
  color: var(--bpe-muted);
}

.bpe-hero-metrics {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpe-hero-metrics li {
  border-radius: 14px;
  border: 1px solid var(--bpe-border);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

.bpe-hero-metrics strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
}

.bpe-hero-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--bpe-muted);
}

.bpe-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bpe-brand-card {
  border-radius: 16px;
  border: 1px solid #e8ddd4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(52, 39, 31, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.bpe-brand-logo {
  min-height: 68px;
  border: 1px solid var(--bpe-border);
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.bpe-brand-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.bpe-brand-cover {
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bpe-border);
  background: #f7f1ed;
  aspect-ratio: 16 / 10;
}

.bpe-brand-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpe-brand-meta {
  margin-top: 12px;
  border-top: 1px solid var(--bpe-border);
  padding-top: 10px;
}

.bpe-brand-meta p {
  margin: 0;
  font-size: 13px;
  color: #5f6b7c;
}

.bpe-brand-meta p + p {
  margin-top: 6px;
}

.bpe-brand-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--bpe-muted);
  line-height: 1.65;
}

.bpe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.bpe-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--bpe-primary) 0%, var(--bpe-primary-dark) 100%);
  box-shadow: 0 16px 30px rgba(213, 25, 32, 0.2);
}

.bpe-btn-primary:hover {
  background: linear-gradient(180deg, #c7141b 0%, #960d14 100%);
}

.bpe-btn-ghost {
  border-color: rgba(213, 25, 32, 0.18);
  color: var(--bpe-primary-dark);
  background: transparent;
}

.bpe-btn-ghost:hover {
  background: rgba(213, 25, 32, 0.08);
}

.bpe-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpe-overview-card {
  border: 1px solid var(--bpe-border);
  border-radius: 12px;
  background: var(--bpe-surface-soft);
  padding: 14px;
}

.bpe-overview-card dt {
  margin: 0;
  color: var(--bpe-muted);
  font-size: 13px;
}

.bpe-overview-card dd {
  margin: 7px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.bpe-overview-table-wrap { display: none; }

.bpe-mobile-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8b5d52;
}

.bpe-overview-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bpe-overview-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 13px;
}

.bpe-overview-table th,
.bpe-overview-table td {
  border: 1px solid var(--bpe-border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.bpe-challenge-grid,
.bpe-three-grid,
.bpe-value-grid,
.bpe-related-grid,
.bpe-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bpe-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bpe-card {
  border: 1px solid var(--bpe-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
  margin-bottom:10px;
}

.bpe-card h3,
.bpe-card h4 {
  margin: 0;
  line-height: 1.35;
}

.bpe-card h3 { font-size: 18px; }
.bpe-card h4 { font-size: 16px; }

.bpe-card p {
  margin: 10px 0 0;
  color: var(--bpe-muted);
  font-size: 14px;
}

.bpe-impact {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px dashed #e6b7bc;
  background: #fff7f8;
  color: #8c3138;
  padding: 10px;
  font-size: 13px;
}

.bpe-solution-block {
  margin-top: 12px;
  border: 1px solid var(--bpe-border);
  border-radius: 14px;
  overflow: hidden;
}

.bpe-solution-block:first-of-type {
  margin-top: 0;
}

.bpe-solution-head {
  padding: 14px 16px;
  background: #fff1f3;
  border-bottom: 1px solid var(--bpe-border);
}

.bpe-solution-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--bpe-primary-dark);
}

.bpe-solution-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  padding: 16px;
}

.bpe-solution-list,
.bpe-result-list,
.bpe-value-list,
.bpe-related-kpi,
.bpe-lessons {
  margin: 0;
  padding-left: 18px;
}
.bpe-result-list{
  margin-top: 10px;
}
.bpe-related-kpi li {
    margin-top: 10px;
    color: var(--bpe-muted);
    font-size: 13px;
    list-style-type: disc;
}

.bpe-step-list{
margin-top: 10px;
font-size: 14px;
}
.bpe-value-list li {
    margin-top: 8px;
    list-style-type: disc;
    font-size: 13px;
}

.bpe-solution-list li,
.bpe-result-list li,
.bpe-value-list li,
.bpe-lessons li,
.bpe-step-list li,
.bpe-related-kpi li {
  margin-top: 8px;
  font-size: 14px;
}


.bpe-solution-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/done.png') no-repeat;
    background-size: 14px 14px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpe-result-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/goodjob.png') no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpe-lessons li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block;
    width: 30px;
    height: 20px;
}


.bpe-solution-list li:first-child,
.bpe-result-list li:first-child,
.bpe-value-list li:first-child,
.bpe-lessons li:first-child,
.bpe-step-list li:first-child,
.bpe-related-kpi li:first-child {
  margin-top: 0;
}

.bpe-solution-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bpe-border);
  background: #f7f1ed;
  min-height: 180px;
}

.bpe-scene-card h4 {
  font-size: 18px;
}

.bpe-scene-point {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid #f1dbcf;
  background: #fff7f8;
  padding: 10px;
}

.bpe-scene-point strong {
  display: block;
  color: #8c3138;
  font-size: 13px;
}

.bpe-scene-point p {
  margin: 6px 0 0;
  font-size: 13px;
}

.bpe-step-output {
  margin: 10px 0 0;
  border: 1px dashed #e6b7bc;
  border-radius: 10px;
  background: #fff7f8;
  color: #8c3138;
  font-size: 13px;
  padding: 10px;
}

.bpe-value-number {
  display: block;
  margin: 10px 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--bpe-primary);
}

.bpe-quote {
  border-left: 4px solid var(--bpe-accent);
  border-radius: 10px;
  background: #fff7f8;
  padding: 18px;
}

.bpe-quote blockquote {
  margin: 0;
  font-size: 18px;
  color: #4b2225;
}

.bpe-quote p {
  margin: 10px 0 0;
  color: #7b5356;
  font-size:16px;
}

.bpe-related-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #7f6a5b;
}

.bpe-related-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--bpe-primary);
  font-size: 14px;
}

.bpe-bottom-cta {
  margin-top: 18px;
  border-radius: var(--bpe-radius);
  background: radial-gradient(260px 180px at 92% 18%, rgba(255, 106, 118, 0.2), rgba(255, 106, 118, 0) 72%), linear-gradient(135deg, rgba(12, 21, 37, 0.98), rgba(72, 12, 25, 0.98)), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  color: #ffffff;
  padding: 34px;
}

.bpe-bottom-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.bpe-bottom-cta p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 980px;
  font-size: 18px;
}

.bpe-bottom-cta .bpe-actions {
  margin-top: 18px;
}

.bpe-footer-spacer {
  height: 18px;
}

@media (max-width: 1100px) {
  .bpe-hero-layout {
    grid-template-columns: 1fr;
  }

  .bpe-hero-metrics,
  .bpe-overview-grid,
  .bpe-challenge-grid,
  .bpe-three-grid,
  .bpe-value-grid,
  .bpe-related-grid,
  .bpe-scene-grid,
  .bpe-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bpe-solution-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --bpe-wrap: calc(100% - 24px);
  }

  main.bpe-case-main {
    padding: 14px 0 56px;
  }

  .bpe-section {
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px 16px;
  }

  .bpe-hero {
    padding-top: 22px;
  }

  .bpe-brand-card {
    margin-top: 2px;
  }

  .bpe-hero-metrics,
  .bpe-challenge-grid,
  .bpe-three-grid,
  .bpe-value-grid,
  .bpe-related-grid,
  .bpe-scene-grid,
  .bpe-step-grid,
  .bpe-overview-grid {
    grid-template-columns: 1fr;
  }

  .bpe-overview-grid { display: none; }
  .bpe-overview-table-wrap { display: block; }

  .bpe-btn { width: 100%; }
  .bpe-actions { gap: 10px; }
}


/* ===== Merged From bpi-case-template.css ===== */
:root {
  --bpi-bg: #f6f3ef;
  --bpi-surface: #ffffff;
  --bpi-surface-soft: #fbf7f3;
  --bpi-text: #221f1c;
  --bpi-muted: #6b625b;
  --bpi-border: #e8ddd4;
  --bpi-primary: #d51920;
  --bpi-primary-dark: #ad1017;
  --bpi-accent: #d51920;
  --bpi-shadow: 0 18px 44px rgba(52, 39, 31, 0.08);
  --bpi-radius: 16px;
  --bpi-wrap: min(1200px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

body.bpi-case-page {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--bpi-text);
  background: #f5f5f5;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.bpi-wrap {
  width: var(--bpi-wrap);
  margin: 0 auto;
}

main.bpi-case-main {
  padding: 50px 0 22px;
}

.bpi-top-nav {
  border-bottom: 1px solid #e8ddd4;
}

.bpi-top-nav .u-menurow {
  width: var(--bpi-wrap);
  margin: 0 auto;
}

.bpi-section {
  margin-top: 18px;
  background: var(--bpi-surface);
  border: 1px solid var(--bpi-border);
  border-radius: var(--bpi-radius);
  box-shadow: var(--bpi-shadow);
  padding: 34px;
}

.bpi-section h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.24;
}

.bpi-subtitle {
  margin: 0 0 22px;
  color: var(--bpi-muted);
  font-size: 15px;
}

.bpi-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #eee3da;
  color: var(--bpi-text);
  background:
    linear-gradient(180deg, #fffdfa 0%, #f6eee8 100%),
    url("/assets/images/case/bpi-case-hero.jpg") center/cover no-repeat;
}

.bpi-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 25, 32, 0.14) 0%, rgba(213, 25, 32, 0) 70%);
}

.bpi-hero > * {
  position: relative;
  z-index: 1;
}

.bpi-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.bpi-hero-main {
  min-width: 0;
}

.bpi-breadcrumb {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8b6f62;
}

.bpi-breadcrumb a {
  color: #7a5e52;
}

.bpi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.bpi-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffd2d9;
  background: #fff1f3;
  color: #b3001b;
  font-size: 13px;
  font-weight: 600;
}

.bpi-hero h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.38;
}

.bpi-hero-lead {
  margin: 14px 0 0;
  max-width: 960px;
  color: var(--bpi-muted);
  font-size: 14px;
}

.bpi-hero-metrics {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bpi-hero-metrics li {
  border-radius: 14px;
  border: 1px solid var(--bpi-border);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

.bpi-hero-metrics strong {
  display: block;
  font-size: clamp(22px, 3vw, 26px);
  line-height: 1.15;
}

.bpi-hero-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--bpi-muted);
}

.bpi-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bpi-brand-card {
  border-radius: 16px;
  border: 1px solid #e8ddd4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(52, 39, 31, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.bpi-brand-logo {
  min-height: 68px;
  border: 1px solid var(--bpi-border);
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.bpi-brand-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.bpi-brand-cover {
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bpi-border);
  background: #f7f1ed;
  aspect-ratio: 16 / 10;
}

.bpi-brand-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpi-brand-meta {
  margin-top: 12px;
  border-top: 1px solid var(--bpi-border);
  padding-top: 10px;
}

.bpi-brand-meta p {
  margin: 0;
  font-size: 13px;
  color: #5f6b7c;
}

.bpi-brand-meta p + p {
  margin-top: 6px;
}

.bpi-brand-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--bpi-muted);
  line-height: 1.65;
}

.bpi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.bpi-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--bpi-primary) 0%, var(--bpi-primary-dark) 100%);
  box-shadow: 0 16px 30px rgba(213, 25, 32, 0.2);
}

.bpi-btn-primary:hover {
  background: linear-gradient(180deg, #c7141b 0%, #960d14 100%);
}

.bpi-btn-ghost {
  border-color: rgba(213, 25, 32, 0.18);
  color: var(--bpi-primary-dark);
  background: transparent;
}

.bpi-btn-ghost:hover {
  background: rgba(213, 25, 32, 0.08);
}

.bpi-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.bpi-overview-card {
  border: 1px solid var(--bpi-border);
  border-radius: 12px;
  background: var(--bpi-surface-soft);
  padding: 14px;
}

.bpi-overview-card dt {
  margin: 0;
  color: var(--bpi-muted);
  font-size: 13px;
}

.bpi-overview-card dd {
  margin: 7px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.bpi-overview-table-wrap { display: none; }

.bpi-mobile-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8b5d52;
}

.bpi-overview-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bpi-overview-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 13px;
}

.bpi-overview-table th,
.bpi-overview-table td {
  border: 1px solid var(--bpi-border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.bpi-challenge-grid,
.bpi-three-grid,
.bpi-value-grid,
.bpi-scene-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bpi-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}


.bpi-three-grid{
  margin-top:20px;
}
.bpi-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bpi-card {
  border: 1px solid var(--bpi-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
  margin-bottom:10px;
}

.bottom-cta .af-btn-ghost, .bpi-bottom-cta .bpi-btn-ghost{
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.12);
}

.bpi-card h3,
.bpi-card h4 {
  margin: 0;
  line-height: 1.35;
}

.bpi-card h3 { font-size: 18px; }
.bpi-card h4 { font-size: 16px; }

.bpi-card p {
  margin: 10px 0 0;
  color: var(--bpi-muted);
  font-size: 14px;
}

.bpi-impact {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px dashed #e6b7bc;
  background: #fff7f8;
  color: #8c3138;
  padding: 10px;
  font-size: 13px;
}

.bpi-solution-block {
  margin-top: 12px;
  border: 1px solid var(--bpi-border);
  border-radius: 14px;
  overflow: hidden;
}

.bpi-solution-block:first-of-type {
  margin-top: 0;
}

.bpi-solution-head {
  padding: 14px 16px;
  background: #fff1f3;
  border-bottom: 1px solid var(--bpi-border);
}

.bpi-solution-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--bpi-primary-dark);
}

.bpi-solution-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  padding: 16px;
}

.bpi-solution-list,
.bpi-result-list,
.bpi-value-list,
.bpi-lessons{
  margin: 0;
  padding-left: 18px;
}
.bpi-step-list{
margin-top: 5px;
font-size: 14px;
}


.bpi-result-list{
  margin-top: 10px;
}
.bpi-related-kpi {
  margin-top: 10px;
  padding-left: 18px;
}
.bpi-solution-list li,
.bpi-result-list li,
.bpi-lessons li,
.bpi-step-list li{
  margin-top: 8px;
  font-size: 14px;
}

.bpi-value-list li {
    margin-top: 8px;
    list-style-type: disc;
    font-size: 13px;
}


.bpi-related-kpi li {
    margin-top: 6px;
    color: var(--bpi-muted);
    font-size: 13px;
    list-style-type: disc;
}

.bpi-section p{
  font-size: 14px;
  color: var(--bpi-muted);
}


.bpi-solution-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/done.png') no-repeat;
    background-size: 14px 14px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpi-result-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/goodjob.png') no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.bpi-lessons li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block;
    width: 30px;
    height: 20px;
}








.bpi-solution-list li:first-child,
.bpi-result-list li:first-child,
.bpi-value-list li:first-child,
.bpi-lessons li:first-child,
.bpi-step-list li:first-child,
.bpi-related-kpi li:first-child {
  margin-top: 0;
}

.bpi-solution-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bpi-border);
  background: #f7f1ed;
  min-height: 180px;
}

.bpi-scene-card h4 {
  font-size: 18px;
      margin-bottom: 15px;
}

.bpi-scene-point {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid #f1dbcf;
  background: #fff7f8;
  padding: 10px;
}

.bpi-scene-point strong {
  display: block;
  color: #8c3138;
  font-size: 13px;
}

.bpi-scene-point p {
  margin: 6px 0 0;
  font-size: 13px;
}

.bpi-step-output {
  margin: 10px 0 0;
  border: 1px dashed #e6b7bc;
  border-radius: 10px;
  background: #fff7f8;
  color: #8c3138;
  font-size: 13px;
  padding: 10px;
}

.bpi-value-number {
  display: block;
  margin: 10px 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--bpi-primary);
}

.bpi-quote {
  border-left: 4px solid var(--bpi-accent);
  border-radius: 10px;
  background: #fff7f8;
  padding: 18px;
}

.bpi-quote blockquote {
  margin: 0;
  font-size: 18px;
  color: #4b2225;
}

.bpi-quote p {
  margin: 10px 0 0;
  color: #7b5356;
  font-size:16px;
}

.bpi-related-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #7f6a5b;
}

.bpi-related-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--bpi-primary);
  font-size: 14px;
}

.bpi-bottom-cta {
  margin-top: 18px;
  border-radius: var(--bpi-radius);
  background: radial-gradient(260px 180px at 92% 18%, rgba(255, 106, 118, 0.2), rgba(255, 106, 118, 0) 72%), linear-gradient(135deg, rgba(12, 21, 37, 0.98), rgba(72, 12, 25, 0.98)), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  color: #ffffff;
  padding: 34px;
}

.bpi-bottom-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.bpi-bottom-cta p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 980px;
      font-size: 18px;
}

.bpi-bottom-cta .bpi-actions {
  margin-top: 18px;
}

.bpi-footer-spacer {
  height: 18px;
}

@media (max-width: 1100px) {
  .bpi-hero-layout {
    grid-template-columns: 1fr;
  }

  .bpi-hero-metrics,
  .bpi-overview-grid,
  .bpi-challenge-grid,
  .bpi-three-grid,
  .bpi-value-grid,
  .bpi-related-grid,
  .bpi-scene-grid,
  .bpi-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bpi-solution-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --bpi-wrap: calc(100% - 24px);
  }

  main.bpi-case-main {
    padding: 14px 0 56px;
  }

  section#overview[class*="-section"] {
    display: none !important;
  }

  .bpi-section {
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px 16px;
  }

  .bpi-hero {
    padding-top: 22px;
  }

  .bpi-brand-card {
    margin-top: 2px;
  }

  .bpi-hero-metrics,
  .bpi-challenge-grid,
  .bpi-three-grid,
  .bpi-value-grid,
  .bpi-related-grid,
  .bpi-scene-grid,
  .bpi-step-grid,
  .bpi-overview-grid {
    grid-template-columns: 1fr;
  }

  .bpi-overview-grid { display: none; }
  .bpi-overview-table-wrap { display: block; }

  .bpi-btn { width: 100%; }
  .bpi-actions { gap: 10px; }
}


/* ===== Merged From full-process-case-template.css ===== */
:root {
  --full-bg: #f6f3ef;
  --full-surface: #ffffff;
  --full-surface-soft: #fbf7f3;
  --full-text: #221f1c;
  --full-muted: #6b625b;
  --full-border: #e8ddd4;
  --full-primary: #d51920;
  --full-primary-dark: #ad1017;
  --full-accent: #d51920;
  --full-shadow: 0 18px 44px rgba(52, 39, 31, 0.08);
  --full-radius: 16px;
  --full-wrap: min(1200px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
}

body.full-case-page {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--full-text);
  background: #f5f5f5;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.full-wrap {
  width: var(--full-wrap);
  margin: 0 auto;
}

main.full-case-main {
  padding: 50px 0 72px;
}

.full-top-nav {
  border-bottom: 1px solid #e8ddd4;
}

.full-top-nav .u-menurow {
  width: var(--full-wrap);
  margin: 0 auto;
}

.full-section {
  margin-top: 18px;
  background: var(--full-surface);
  border: 1px solid var(--full-border);
  border-radius: var(--full-radius);
  box-shadow: var(--full-shadow);
  padding: 34px;
}

.full-section h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.24;
}
.full-section p {
    margin: 10px 0 15px;
    color: var(--bpa-muted);
    font-size: 14px;
}
.full-subtitle {
  margin: 0 0 22px;
  color: var(--full-muted);
  font-size: 15px;
}

.full-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #eee3da;
  color: var(--full-text);
  background:
    linear-gradient(180deg, #fffdfa 0%, #f6eee8 100%),
    url("/assets/images/case/full-process-case-hero.jpg") center/cover no-repeat;
}

.full-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 25, 32, 0.14) 0%, rgba(213, 25, 32, 0) 70%);
}

.full-hero > * {
  position: relative;
  z-index: 1;
}

.full-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.full-hero-main {
  min-width: 0;
}

.full-breadcrumb {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8b6f62;
}

.full-breadcrumb a {
  color: #7a5e52;
}

.full-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.full-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffd2d9;
  background: #fff1f3;
  color: #b3001b;
  font-size: 13px;
  font-weight: 600;
}

.full-hero h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.38;
}

.full-hero-lead {
  margin: 14px 0 0;
  max-width: 960px;
  color: var(--full-muted);
}

.full-hero-metrics {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.full-hero-metrics li {
  border-radius: 14px;
  border: 1px solid var(--full-border);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

.full-hero-metrics strong {
  display: block;
  font-size: clamp(22px, 3vw, 26px);
  line-height: 1.15;
}

.full-hero-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--full-muted);
}

.full-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.full-brand-card {
  border-radius: 16px;
  border: 1px solid #e8ddd4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(52, 39, 31, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.full-brand-logo {
  min-height: 68px;
  border: 1px solid var(--full-border);
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.full-brand-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.full-brand-cover {
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--full-border);
  background: #f7f1ed;
  aspect-ratio: 16 / 10;
}

.full-brand-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-brand-meta {
  margin-top: 12px;
  border-top: 1px solid var(--full-border);
  padding-top: 10px;
}

.full-brand-meta p {
  margin: 0;
  font-size: 13px;
  color: #5f6b7c;
}

.full-brand-meta p + p {
  margin-top: 6px;
}

.full-brand-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--full-muted);
  line-height: 1.65;
}

.full-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.full-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--full-primary) 0%, var(--full-primary-dark) 100%);
  box-shadow: 0 16px 30px rgba(213, 25, 32, 0.2);
}

.full-btn-primary:hover {
  background: linear-gradient(180deg, #c7141b 0%, #960d14 100%);
}

.full-btn-ghost {
  border-color: rgba(213, 25, 32, 0.18);
  color: var(--full-primary-dark);
  background: transparent;
}

.full-btn-ghost:hover {
  background: rgba(213, 25, 32, 0.08);
}

.full-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.full-overview-card {
  border: 1px solid var(--full-border);
  border-radius: 12px;
  background: var(--full-surface-soft);
  padding: 14px;
}

.full-overview-card dt {
  margin: 0;
  color: var(--full-muted);
  font-size: 13px;
}

.full-overview-card dd {
  margin: 7px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.full-overview-table-wrap { display: none; }

.full-mobile-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8b5d52;
}

.full-overview-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.full-overview-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 13px;
}

.full-overview-table th,
.full-overview-table td {
  border: 1px solid var(--full-border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.full-challenge-grid,
.full-three-grid,
.full-value-grid,
.full-related-grid,
.full-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.full-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.full-card {
  border: 1px solid var(--full-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
}

.full-card h3,
.full-card h4 {
  margin: 0;
  line-height: 1.35;
}

.full-card h3 { font-size: 18px; }
.full-card h4 { font-size: 16px; }

.full-card p {
  margin: 10px 0 0;
  color: var(--full-muted);
  font-size: 14px;
}

.full-impact {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px dashed #e6b7bc;
  background: #fff7f8;
  color: #8c3138;
  padding: 10px;
  font-size: 13px;
}

.full-solution-block {
  margin-top: 12px;
  border: 1px solid var(--full-border);
  border-radius: 14px;
  overflow: hidden;
}

.full-solution-block:first-of-type {
  margin-top: 0;
}

.full-solution-head {
  padding: 14px 16px;
  background: #fff1f3;
  border-bottom: 1px solid var(--full-border);
}

.full-solution-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--full-primary-dark);
}

.full-solution-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  padding: 16px;
}

.full-solution-list,
.full-result-list,
.full-value-list,
.full-lessons,
.full-related-kpi {
  margin: 0;
  padding-left: 18px;
}
.full-result-list{
   margin-top: 10px;
}

.full-step-list {
    margin-top: 10px;
    font-size: 13px;
}

.full-solution-list li,
.full-result-list li,
.full-lessons li,
.full-step-list li{
  margin-top: 8px;
  font-size: 14px;
}

.full-related-kpi li {
  list-style-type: disc;
    font-size: 13px;
    color: var(--full-muted);
}

.full-value-list li {
    margin-top: 8px;
    list-style-type: disc;
    font-size: 13px;
}
.full-solution-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/done.png') no-repeat;
    background-size: 14px 14px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.full-result-list li::before {
    content: ""; /* 确保伪元素有内容 */
    background: url('/assets/images/goodjob.png') no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block; /* 或 block，根据需要 */
    width: 30px; /* 设置宽度 */
    height: 20px; /* 设置高度 */
}

.full-lessons li::before {
    content: "";
    background: url(/assets/images/goodjob.png) no-repeat;
    background-size: 16px 16px;
    background-position: bottom;
    display: inline-block;
    width: 30px;
    height: 20px;
}


.full-solution-list li:first-child,
.full-result-list li:first-child,
.full-value-list li:first-child,
.full-lessons li:first-child,
.full-step-list li:first-child,
.full-related-kpi li:first-child {
  margin-top: 0;
}

.full-solution-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--full-border);
  background: #f7f1ed;
  min-height: 180px;
}

.full-scene-card h4 {
  font-size: 18px;
}

.full-scene-point {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid #f1dbcf;
  background: #fff7f8;
  padding: 10px;
}

.full-scene-point strong {
  display: block;
  color: #8c3138;
  font-size: 13px;
}

.full-scene-point p {
  margin: 6px 0 0;
  font-size: 13px;
}

.full-step-output {
  margin: 10px 0 0;
  border: 1px dashed #e6b7bc;
  border-radius: 10px;
  background: #fff7f8;
  color: #8c3138;
  font-size: 13px;
  padding: 10px;
}

.full-value-number {
  display: block;
  margin: 10px 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--full-primary);
}

.full-quote {
  border-left: 4px solid var(--full-accent);
  border-radius: 10px;
  background: #fff7f8;
  padding: 18px;
}

.full-quote blockquote {
  margin: 0;
  font-size: 18px;
  color: #4b2225;
}

.full-quote p {
  margin: 10px 0 0;
  color: #7b5356;
  font-size:16px;
}

.full-related-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #7f6a5b;
}

.full-related-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--full-primary);
  font-size: 14px;
}

.full-bottom-cta {
  margin-top: 18px;
  border-radius: var(--full-radius);
  background: radial-gradient(260px 180px at 92% 18%, rgba(255, 106, 118, 0.2), rgba(255, 106, 118, 0) 72%), linear-gradient(135deg, rgba(12, 21, 37, 0.98), rgba(72, 12, 25, 0.98)), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  color: #ffffff;
  padding: 34px;
}

.full-bottom-cta h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.full-bottom-cta p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 980px;
      font-size: 18px;
}

.full-bottom-cta .full-actions {
  margin-top: 18px;
}

.full-footer-spacer {
  height: 18px;
}

@media (max-width: 1100px) {
  .full-hero-layout {
    grid-template-columns: 1fr;
  }

  .full-hero-metrics,
  .full-overview-grid,
  .full-challenge-grid,
  .full-three-grid,
  .full-value-grid,
  .full-related-grid,
  .full-scene-grid,
  .full-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .full-solution-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --full-wrap: calc(100% - 24px);
  }

  main.full-case-main {
    padding: 14px 0 56px;
  }

  .full-section {
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px 16px;
  }

  .full-hero {
    padding-top: 22px;
  }

  .full-brand-card {
    margin-top: 2px;
  }

  .full-hero-metrics,
  .full-challenge-grid,
  .full-three-grid,
  .full-value-grid,
  .full-related-grid,
  .full-scene-grid,
  .full-step-grid,
  .full-overview-grid {
    grid-template-columns: 1fr;
  }

  .full-overview-grid { display: none; }
  .full-overview-table-wrap { display: block; }

  .full-btn { width: 100%; }
  .full-actions { gap: 10px; }
}


/* full process specific tweaks */
.full-hero-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.full-four-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.full-step-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.full-loop-diagram {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--full-border);
  border-radius: 14px;
  background: #fffaf7;
}

.full-loop-node {
  flex: 1 1 180px;
  min-height: 74px;
  border: 1px solid #f1dbcf;
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
}

.full-loop-node strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.full-loop-node span {
  display: inline-block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #8c3138;
  background: #fff1f3;
  border: 1px solid #ffd2d9;
  border-radius: 999px;
  padding: 2px 9px;
}

.full-loop-arrow {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  color: #b97e66;
  line-height: 1;
}

.full-loop-arrow-last {
  color: #c0232a;
}

.full-loop-note {
  margin: 12px 0 0;
  color: var(--full-muted);
}

@media (max-width: 1200px) {
  .full-four-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .full-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .full-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .full-hero-metrics,
  .full-four-grid,
  .full-step-grid {
    grid-template-columns: 1fr;
  }

  .full-loop-diagram {
    padding: 12px;
    gap: 8px;
  }

  .full-loop-node {
    flex: 1 1 100%;
  }

  .full-loop-arrow {
    width: 100%;
    text-align: center;
    transform: rotate(90deg);
  }
}
/* Jingbo-like solution layout shared by all case pages */
#solutions .af-solution-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 39%, 460px);
  gap: 18px;
  align-items: start;
}

#solutions .af-solution-phases {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#solutions .af-solution-layout > figure {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

#solutions .af-solution-layout > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1100px) {
  #solutions .af-solution-layout {
    grid-template-columns: 1fr;
  }

  #solutions .af-solution-layout > figure {
    margin: 12px auto 16px;
  }

  #solutions .af-solution-phases {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .bpa-hero .bpa-tags,
  .bpma-hero .bpma-tags,
  .bpe-hero .bpe-tags,
  .bpi-hero .bpi-tags,
  .full-hero .full-tags {
    display: none !important;
  }
}