:root {
  --case-blue: #075fca;
  --case-navy: #06295c;
  --case-orange: #ff7a00;
  --case-ink: #102b52;
  --case-line: #dce8f5;
}

.success-page {
  color: var(--case-ink);
  background: #edf4ff;
}

.success-page .site-header { background: rgba(249, 252, 255, .95); }
.success-page .desktop-nav a:first-child::after { display: none; }
.success-page .desktop-nav a.active { color: var(--case-blue); }
.success-page .desktop-nav a.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  height: 2px;
  background: var(--case-blue);
}

.success-shell {
  width: 80%;
  margin: 0 auto;
}

.success-page footer .container {
  width: 80%;
  max-width: none;
}

.success-hero {
  position: relative;
  min-height: 430px;
  padding-top: 68px;
  overflow: hidden;
  background: #eff6ff;
}

.success-hero > img {
  position: absolute;
  inset: 68px 0 0;
  width: 100%;
  height: calc(100% - 68px);
  object-fit: cover;
  object-position: center;
}

.success-hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 55px;
}

.success-kicker {
  margin: 0 0 5px;
  color: var(--case-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.success-hero h1 {
  margin: 0;
  color: #061f4d;
  font-size: 44px;
  line-height: 1.15;
}

.success-hero h2 {
  margin: 19px 0 0;
  color: #0a2d61;
  font-size: 25px;
  font-weight: 600;
}

.hero-benefits {
  display: flex;
  gap: 40px;
  margin-top: 45px;
}

.hero-benefits article {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-benefits img {
  width: 46px;
  height: 46px;
}

.hero-benefits strong,
.hero-benefits span { display: block; }
.hero-benefits strong { font-size: 14px; }
.hero-benefits span {
  margin-top: 5px;
  color: #50627a;
  font-size: 11px;
}

.success-list {
  padding: 22px 0 72px;
  background: linear-gradient(180deg, #edf4ff, #f9fbff);
}

.success-card {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  gap: 36px;
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid rgba(13, 79, 156, .1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 76, 135, .1);
}

.success-visual {
  position: relative;
  height: 405px;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.success-visual > span {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 13px 17px;
  border-radius: 9px 0 9px 0;
  color: #fff;
  background: var(--case-blue);
  font-weight: 800;
}

.success-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.success-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 5px 3px 0;
}

.success-detail header p {
  margin: 0 0 8px;
  color: var(--case-blue);
  font-size: 17px;
  font-weight: 700;
}

.success-detail h2 {
  margin: 0 0 7px;
  color: #061f4d;
  font-size: 28px;
}

.success-detail h3 {
  margin: 0;
  color: #35465c;
  font-size: 15px;
  font-weight: 500;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.case-meta p { margin: 0; }
.case-meta strong,
.case-meta span { display: block; }
.case-meta strong {
  margin-bottom: 5px;
  color: #4d5f77;
  font-size: 12px;
}
.case-meta span {
  color: #172f51;
  font-size: 11px;
  line-height: 1.45;
}

.case-summary {
  max-width: 100%;
  margin: 0;
  color: #53647a;
  font-size: 12px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.case-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 22px;
}

.case-results p {
  margin: 0;
  text-align: center;
  border-right: 1px solid var(--case-line);
}

.case-results p:last-child { border-right: 0; }
.case-results strong,
.case-results span { display: block; }
.case-results strong {
  color: var(--case-blue);
  font-size: 27px;
  line-height: 1.1;
}
.case-results small { font-size: 13px; }
.case-results span {
  margin-top: 7px;
  color: #596a7e;
  font-size: 11px;
}

.case-more {
  margin-top: 17px;
  padding: 13px 15px;
  border-radius: 8px;
  background: #f2f7fe;
  color: #52657d;
  font-size: 12px;
  line-height: 1.7;
}

.case-more p { margin: 0; }
.case-button {
  align-self: flex-end;
  min-width: 145px;
  margin-top: auto;
  padding: 11px 20px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--case-orange);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}

.case-button:hover {
  background: #e86900;
  transform: translateY(-1px);
}

.success-cta {
  display: grid;
  grid-template-columns: 1.15fr 1.4fr auto;
  align-items: center;
  gap: 32px;
  padding: 25px 38px;
  border-radius: 13px;
  color: #fff;
  background: #062d67 url("assets/method-blue-tech-bg.png") center / cover;
  box-shadow: 0 16px 36px rgba(5, 39, 88, .18);
}

.success-cta strong {
  font-size: 22px;
  line-height: 1.35;
}
.success-cta h2 { margin: 0 0 7px; font-size: 17px; }
.success-cta p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 12px; }
.success-cta .button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 7px;
  color: #fff;
  background: var(--case-orange);
}

/* 字体可读性增强 */
.hero-benefits span { font-size: 13px; }
.success-detail header p { font-size: 19px; }
.success-detail h2 { font-size: 30px; }
.success-detail h3 { font-size: 16px; }
.case-meta strong,
.case-meta span { font-size: 13px; }
.case-summary { font-size: 14px; line-height: 1.8; }
.case-results strong { font-size: 30px; }
.case-results span { font-size: 13px; }
.case-more { font-size: 14px; }
.case-button { font-size: 14px; }
.success-cta h2 { font-size: 19px; }
.success-cta p { font-size: 14px; }

@media (max-width: 980px) {
  .success-shell,
  .success-page footer .container { width: calc(100% - 40px); }
  .success-hero { min-height: 470px; }
  .success-hero > img { object-position: 57% center; opacity: .76; }
  .hero-benefits { gap: 22px; flex-wrap: wrap; max-width: 650px; }
  .success-card { grid-template-columns: 1fr; }
  .success-visual { height: 460px; }
  .success-cta { grid-template-columns: 1fr 1fr; }
  .success-cta .button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
  .success-shell,
  .success-page footer .container { width: calc(100% - 28px); }
  .success-hero { min-height: 650px; padding-top: 62px; }
  .success-hero > img {
    top: 62px;
    height: calc(100% - 62px);
    object-position: 68% center;
    opacity: .38;
  }
  .success-hero-copy { padding-top: 42px; }
  .success-hero h1 { font-size: 40px; }
  .success-hero h2 { max-width: 340px; font-size: 21px; line-height: 1.5; }
  .hero-benefits { display: grid; gap: 17px; margin-top: 35px; }
  .hero-benefits article { max-width: 300px; }
  .success-list { padding-top: 16px; }
  .success-card { gap: 22px; padding: 14px; }
  .success-visual { min-height: 0; height: 380px; }
  .success-detail h2 { font-size: 25px; }
  .success-detail header p { font-size: 16px; }
  .case-meta { grid-template-columns: 1fr 1fr; gap: 18px; }
  .case-results { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .case-results p:nth-child(2) { border-right: 0; }
  .case-results strong { font-size: 24px; }
  .case-button { align-self: stretch; margin-top: 22px; }
  .success-cta { grid-template-columns: 1fr; gap: 18px; padding: 25px 22px; }
  .success-cta .button { grid-column: auto; width: 100%; }
}