/*
 * Static Banner, isolated from legacy .home-banner rules.
 * Coordinates use the measured 2290×1054 banner as their desktop design space.
 * Only the illustration scales on mobile; real copy and links reflow independently.
 */
.home-page .mc-banner {
  container-type: inline-size;
  width: min(
    calc(100% - var(--public-content-gutter)),
    var(--public-content-max)
  );
  margin: 0 auto;
  color: #062370;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* Stage 3: keep the hero artwork, but remove the enclosing marketing panel. */
.home-page .mc-banner-canvas {
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.home-page .mc-banner-background-picture {
  opacity: .12;
}
.mc-banner-canvas {
  --u: calc(100cqw / 2290);
  position: relative;
  width: 100%;
  aspect-ratio: 2290 / 1054;
  border-radius: calc(28 * var(--u));
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px #e8edf6;
  background: radial-gradient(ellipse at top right, #eff5ff, transparent 60%), #fcfdfe;
}
.mc-banner-background-picture { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mc-banner-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.mc-banner-copy { display: contents; }
.home-page .mc-banner-headline {
  position: absolute;
  top: calc(195 * var(--u));
  left: calc(104 * var(--u));
  margin: 0;
  color: #062370;
  font-size: calc(148 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.home-page .mc-banner-subtitle {
  position: absolute;
  margin: 0;
  top: calc(390 * var(--u));
  left: calc(106 * var(--u));
  font-size: calc(40 * var(--u));
  font-weight: 500;
  color: #939db9;
  line-height: 1.4;
  letter-spacing: calc(3.8 * var(--u));
  white-space: nowrap;
}
.mc-banner-actions {
  position: absolute;
  top: calc(540 * var(--u));
  left: calc(104 * var(--u));
  display: flex;
  gap: calc(58 * var(--u));
}
.mc-banner-actions > a {
  height: calc(107 * var(--u));
  min-height: 44px;
  border-radius: calc(18 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(17 * var(--u));
  font-size: max(14px, calc(33 * var(--u)));
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.mc-banner-primary { width: calc(394 * var(--u)); background: #025cfb; color: #fff; box-shadow: 0 calc(7 * var(--u)) calc(17 * var(--u)) #0864ef1f; }
.mc-banner-actions > .mc-banner-primary { font-size: max(14px, calc(32 * var(--u))); gap: calc(12 * var(--u)); }
.mc-banner-primary span { font-size: calc(40 * var(--u)); font-weight: 400; }
.mc-banner-secondary { width: calc(414 * var(--u)); color: #0864f6; border: calc(3 * var(--u)) solid #8db6ff; background: #ffffffa3; }
.mc-banner-secondary img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.mc-banner-actions > a:focus-visible { outline: 3px solid #062370; outline-offset: 4px; }
.mc-banner-actions > a:active { transform: translateY(1px); }
.mc-banner-primary:active { background: #084fd3; }
.mc-banner-secondary:active { background: #eaf2ff; }
/* Touch devices keep a stable resting state rather than a sticky hover. */
@media (hover: hover) and (pointer: fine) {
  .mc-banner-primary:hover { background: #084fd3; }
  .mc-banner-secondary:hover { background: #fff; border-color: #0864f6; }
  .mc-banner-actions > a:hover:not(:active) { transform: translateY(-2px); }
  .mc-banner-primary:hover > span { transform: translateX(2px); }
}
.mc-banner-visual {
  position: absolute;
  left: calc(1060 * var(--u));
  top: calc(100 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(920 * var(--u));
  pointer-events: none;
}
.mc-banner-visual-stage { position: absolute; left: calc(-1060 * var(--u)); top: calc(-100 * var(--u)); width: calc(2290 * var(--u)); height: calc(1054 * var(--u)); }
.mc-banner-layer { position: absolute; width: 100%; height: 100%; inset: 0; }
.mc-banner-card { position: absolute; color: #606e8b; }
.mc-banner-api { left: calc(1113 * var(--u)); top: calc(230 * var(--u)); width: calc(325 * var(--u)); height: calc(566 * var(--u)); }
.mc-banner-response { left: calc(1519 * var(--u)); top: calc(296 * var(--u)); width: calc(296 * var(--u)); height: calc(492 * var(--u)); }
.mc-banner-report { left: calc(1891 * var(--u)); top: calc(230 * var(--u)); width: calc(326 * var(--u)); height: calc(617 * var(--u)); }
.home-page .mc-banner-card-title { margin: 0; position: absolute; top: calc(40 * var(--u)); width: 100%; text-align: center; color: #164bdc; font-size: calc(34 * var(--u)); line-height: 1.4; font-weight: 600; }
.home-page .mc-banner-api .mc-banner-card-title { width: calc(285 * var(--u)); font-size: calc(33 * var(--u)); }
.mc-banner-api-body { position: absolute; top: calc(116 * var(--u)); left: calc(23 * var(--u)); right: calc(23 * var(--u)); bottom: calc(28 * var(--u)); border-radius: calc(18 * var(--u)); background: #ffffff9c; padding: calc(23 * var(--u)) calc(10 * var(--u)); }
.mc-banner-endpoint { font-family: Consolas, monospace; font-size: calc(18.5 * var(--u)); font-weight: 600; line-height: 1.8; white-space: nowrap; letter-spacing: calc(-.5 * var(--u)); }
.mc-banner-api pre { margin: calc(32 * var(--u)) 0 0; padding: 0; border: 0; background: none; font-family: Consolas, "Microsoft YaHei", monospace; font-size: calc(21 * var(--u)); font-weight: 600; line-height: calc(34 * var(--u)); color: #707d97; }
.mc-banner-response-status { position: absolute; top: calc(115 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); height: calc(70 * var(--u)); padding: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); border-radius: calc(12 * var(--u)); background: #ffffffc9; font-size: calc(20 * var(--u)); font-weight: 600; white-space: nowrap; }
.mc-banner-response-status img { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.mc-banner-response-status span:last-child { margin-left: auto; }
.home-page .mc-banner-reply { position: absolute; margin: 0; left: calc(43 * var(--u)); top: calc(225 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1.6; font-weight: 600; }
.mc-banner-response-lines { position: absolute; left: calc(43 * var(--u)); top: calc(330 * var(--u)); width: calc(205 * var(--u)); display: grid; gap: calc(16 * var(--u)); }
.mc-banner-response-lines i { height: calc(16 * var(--u)); background: #e9eef8; border-radius: calc(4 * var(--u)); }
.mc-banner-response-lines i:nth-child(2) { width: 90%; opacity: .85; }
.mc-banner-response-lines i:nth-child(3) { width: 55%; }
.mc-banner-score { position: absolute; left: calc(64 * var(--u)); top: calc(121 * var(--u)); width: calc(205 * var(--u)); height: calc(205 * var(--u)); }
.mc-banner-score > img { width: 100%; height: 100%; }
.mc-banner-score > div { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; transform: translateY(calc(2 * var(--u))); color: #08cdbc; font-family: Arial, "Microsoft YaHei", sans-serif; font-size: calc(82 * var(--u)); font-weight: 700; letter-spacing: calc(-1 * var(--u)); }
.mc-banner-score span { margin-top: calc(28 * var(--u)); margin-left: calc(3 * var(--u)); font-family: "Microsoft YaHei", sans-serif; font-size: calc(29 * var(--u)); font-weight: 500; letter-spacing: 0; }
.mc-banner-report-results { position: absolute; top: calc(358 * var(--u)); left: calc(27 * var(--u)); right: calc(27 * var(--u)); height: calc(224 * var(--u)); background: #ffffffbd; border-radius: calc(18 * var(--u)); padding: calc(19 * var(--u)) calc(23 * var(--u)); }
.mc-banner-report-results > div:not(.mc-banner-micro-bars) { display: flex; align-items: center; gap: calc(22 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 600; white-space: nowrap; }
.mc-banner-report-results > div:nth-child(2) { margin-top: calc(43 * var(--u)); }
.mc-banner-report-results img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.mc-banner-micro-bars { display: flex; gap: calc(4 * var(--u)); margin: calc(18 * var(--u)) 0 0 calc(69 * var(--u)); height: calc(23 * var(--u)); opacity: .68; }
.mc-banner-micro-bars i { flex: 1; background: #d7e7df; }
.mc-banner-micro-bars i:nth-child(3n) { background: #e1e7e8; }
.mc-banner-micro-bars i:first-child { background: #b893b0; }
.mc-banner-micro-bars i:last-child { background: #e8bfca; }
.mc-banner-metrics { position: absolute; top: calc(841 * var(--u)); left: calc(115 * var(--u)); display: grid; grid-template-columns: calc(346 * var(--u)) calc(328 * var(--u)) calc(288 * var(--u)); grid-template-rows: minmax(0, 1fr); height: calc(102 * var(--u)); }
.mc-banner-metric { display: flex; align-items: center; min-height: 0; gap: calc(30 * var(--u)); padding-left: calc(48 * var(--u)); border-right: calc(2 * var(--u)) solid #e6edf9; }
.mc-banner-metric:first-child { padding-left: 0; gap: calc(19 * var(--u)); }
.mc-banner-metric:last-child { border: 0; padding-left: calc(43 * var(--u)); }
.mc-banner-metric > img { flex-shrink: 0; width: calc(86 * var(--u)); height: calc(104 * var(--u)); object-fit: contain; }
.mc-banner-metric:first-child > img { width: calc(96 * var(--u)); transform: translate(calc(-5 * var(--u)), calc(-2 * var(--u))); }
.mc-banner-metric:last-child > img { width: calc(88 * var(--u)); transform: translateY(calc(-5 * var(--u))); }
.mc-banner-metric span { display: block; font-size: calc(31 * var(--u)); font-weight: 600; color: #8291b3; white-space: nowrap; line-height: 1.35; }
.mc-banner-metric strong { display: block; margin-top: calc(4 * var(--u)); font-family: Arial, "Microsoft YaHei", sans-serif; font-size: calc(60 * var(--u)); font-weight: 600; color: #0f46c6; line-height: 1.12; letter-spacing: calc(.6 * var(--u)); }
.mc-banner-metric small { font-size: calc(40 * var(--u)); font-weight: 500; }
.home-page .mc-banner-note { position: absolute; left: calc(115 * var(--u)); right: calc(115 * var(--u)); top: calc(984 * var(--u)); margin: 0; color: #677a9a; font-size: max(12px, calc(22 * var(--u))); line-height: 1.4; }
@media (min-width: 1440px) {
  .home-page .mc-banner {
    width: min(
      calc(100% - var(--public-content-gutter)),
      var(--public-content-max)
    );
  }
}
/* Reuse the site's 900px compact breakpoint; keep 720px phone gutters below. */
@media (max-width: 900px) {
  .mc-banner-canvas { aspect-ratio: auto; border-radius: 12px; padding: 30px 18px 18px; display: flex; flex-direction: column; }
  .mc-banner-copy { display: block; width: min(100%, 560px); margin-inline: auto; }
  .home-page .mc-banner-headline { position: static; font-size: clamp(32px, 9vw, 48px); letter-spacing: -.035em; white-space: normal; line-height: 1.25; }
  .home-page .mc-banner-subtitle { position: static; margin: 16px 0 22px; font-size: 15px; line-height: 1.8; letter-spacing: 0; white-space: normal; color: #596b8c; }
  .mc-banner-actions { position: static; display: flex; flex-wrap: wrap; gap: 10px; }
  .mc-banner-actions > a, .mc-banner-actions > .mc-banner-primary { flex: 1 1 140px; width: auto; min-width: 0; min-height: 48px; height: auto; padding: 10px 12px; font-size: 15px; gap: 8px; border-radius: 8px; }
  .mc-banner-primary span { font-size: 23px; }
  .mc-banner-secondary { border-width: 1px; }
  .mc-banner-secondary img { width: 21px; height: 21px; }
  .mc-banner-visual { order: 2; position: relative; container-type: inline-size; left: auto; top: auto; width: min(100%, 480px); height: auto; aspect-ratio: 1200 / 920; margin: 18px auto 0; }
  .mc-banner-visual-stage { --u: calc(100cqw / 1200); }
  .mc-banner-metrics { order: 1; position: static; width: min(100%, 480px); height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; margin: 28px auto 0; }
  .mc-banner-metric, .mc-banner-metric:first-child, .mc-banner-metric:last-child { flex-direction: column; gap: 8px; padding: 0 4px; text-align: center; border-right-width: 1px; }
  .mc-banner-metric > img, .mc-banner-metric:first-child > img, .mc-banner-metric:last-child > img { width: 32px; height: 36px; transform: none; }
  .mc-banner-metric span { font-size: 13px; line-height: 1.6; color: #596b8c; }
  .mc-banner-metric strong { margin-top: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; }
  .mc-banner-metric small { font-size: 18px; }
  .home-page .mc-banner-note { order: 3; position: static; width: min(100%, 560px); margin: 12px auto 0; font-size: 12px; line-height: 1.7; color: #596b8c; }
}
@media (max-width: 720px) {
  .home-page .mc-banner { width: calc(100% - 24px); }
}
/* One short decorative entrance only: no looping status/progress simulation.
 * Text, controls and the disclosure are immediately available without JS. */
@media (prefers-reduced-motion: no-preference) {
  .mc-banner-visual { animation: mc-banner-enter 640ms cubic-bezier(.2, .7, .2, 1) 1; }
  .mc-banner-actions > a { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
  .mc-banner-primary > span { transition: transform 160ms ease; }
}
@keyframes mc-banner-enter {
  from { opacity: .45; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-banner-visual { animation: none; }
  .mc-banner-actions > a, .mc-banner-primary > span { transition: none; transform: none !important; }
}
@media (forced-colors: active) {
  .mc-banner-actions > a { border: 1px solid LinkText; color: LinkText; background: Canvas; box-shadow: none; }
  .mc-banner-actions > a:focus-visible { outline-color: Highlight; }
}