/* Promotional page content is scoped; existing site components keep their styles. */
.promotion-page { --promo-color: #ff6a00; --promo-tint: #fff7f0; background: #fff; color: #242a35; }
.promotion-page.promotion-rw { --promo-color: #3285ff; --promo-tint: #f2f7ff; }
/* Match the existing 1200px header; narrow screens scroll horizontally. */
.promotion-page .promo-main { min-width: 1200px; padding-top: 140px; }
.promotion-page.promotion-rw .promo-main { padding-top: 180px; }
.promotion-page .promo-hero { display: block; width: 100%; background: var(--promo-tint); }
.promotion-page .promo-hero img { display: block; width: 100%; height: auto; }
.promotion-page.promotion-rw .promo-hero img { max-height: 650px; object-fit: contain; }
.promotion-page .promo-section { padding: 72px 0; }
.promotion-page .promo-wrap { width: 1200px; margin: 0 auto; }
.promotion-page .promo-main h1, .promotion-page .promo-main h2, .promotion-page .promo-main h3, .promotion-page .promo-main h4 { font-family: inherit; font-weight: 600; line-height: 1.5; margin: 0; }
.promotion-page .promo-main h1 { font-size: 36px; }
.promotion-page .promo-main h2, .promotion-page .promo-title { font-size: 32px; text-align: center; margin-bottom: 40px; }
.promotion-page .promo-main h3 { font-size: 21px; margin: 14px 0; }
.promotion-page .promo-main h4 { font-size: 16px; color: var(--promo-color); margin-bottom: 8px; }
.promotion-page .promo-main p { font-size: 17px; line-height: 1.9; margin: 18px 0; color: #596170; }
.promotion-page .promo-huge { font-size: 2em; color: var(--promo-color); }
.promotion-page .promo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.promotion-page .promo-scene { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 38px #18284115; }
.promotion-page .promo-button { display: inline-block; background: var(--promo-color); color: white; padding: 13px 30px; border-radius: 5px; font-size: 17px; text-decoration: none; margin-top: 14px; }
.promotion-page .promo-tint { background: var(--promo-tint); }
.promotion-page .promo-cards { display: grid; gap: 20px; }
.promotion-page .promo-five { grid-template-columns: repeat(5,1fr); }
.promotion-page .promo-three { grid-template-columns: repeat(3,1fr); }
.promotion-page .promo-cards article { padding: 28px 22px; background: white; border: 1px solid #e8ebf0; border-radius: 10px; box-shadow: 0 10px 28px #18284109; border-top: 3px solid var(--promo-color); }
.promotion-page .promo-cards p { font-size: 16px; margin-bottom: 0; }
/* GEO advantage cards use full-width photographic headers. */
.promotion-page .promo-advantages article { padding: 0 0 26px; overflow: hidden; border-top: 1px solid #e8ebf0; box-shadow: 0 10px 28px #18284115; }
.promotion-page .promo-advantage-visual { display: block; overflow: hidden; background: #2168a6; isolation: isolate; }
.promotion-page .promo-advantages .promo-advantage-image { display: block; width: 100%; height: 124px; object-fit: cover; mix-blend-mode: luminosity; opacity: .9; }
.promotion-page .promo-advantages .promo-advantage-copywriting { object-position: center 90%; }
.promotion-page .promo-advantages .promo-advantage-review { object-position: center; }
.promotion-page .promo-main .promo-advantages h3 { margin: 24px 16px 14px; text-align: center; }
.promotion-page .promo-main .promo-advantages p { margin: 0 20px; font-size: 16px; }
.promotion-page .promo-number { color: var(--promo-color); font-size: 28px; font-weight: bold; }
.promotion-page .promo-metrics { display: flex; gap: 22px; margin-top: 34px; }
.promotion-page .promo-metrics div { flex: 1; }
.promotion-page .promo-metrics strong { display: block; font-size: 38px; color: var(--promo-color); }
.promotion-page .promo-metrics span { display: block; font-size: 16px; margin-top: 8px; }
/* Reuse the selfMedia big-data diagram's colored nodes and hover rings. */
.promotion-page .promo-service-diagram { padding: 52px 28px 38px; border: 1px solid #e0e0e0; background: #fff; }
.promotion-page .promo-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 72px; position: relative; }
/* Hollow endpoints sit over the lines; side branches share a rounded U-shaped path. */
.promotion-page .promo-flow > article:before { content: ""; position: absolute; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #e6e6e6; border-radius: 50%; background: #fff; left: calc(50% - 5px); bottom: -24px; z-index: 1; pointer-events: none; }
.promotion-page .promo-flow > article:after { content: ""; display: none; position: absolute; width: 2px; height: 54px; background: #e6e6e6; left: calc(50% - 1px); bottom: -72px; pointer-events: none; }
.promotion-page .promo-flow > article:nth-child(2):after { display: block; }
.promotion-page .promo-flow:after { content: ""; position: absolute; height: 54px; box-sizing: border-box; border: 2px solid #e6e6e6; border-top: 0; border-radius: 0 0 20px 20px; left: calc(16.6667% - 9px); right: calc(16.6667% - 9px); bottom: 0; pointer-events: none; }
.promotion-page .promo-flow-node { position: relative; width: 100%; max-width: 280px; margin: 0 auto; text-align: center; outline-offset: 6px; }
.promotion-page .promo-flow-stage-1 { --flow-color: #ff5147; }
.promotion-page .promo-flow-stage-2 { --flow-color: #00b96b; }
.promotion-page .promo-flow-stage-3 { --flow-color: #57aeff; }
.promotion-page .promo-flow-stage-4 { --flow-color: #ffb300; }
.promotion-page .promo-flow-orb { position: relative; width: 140px; height: 140px; margin: 0 auto; }
.promotion-page .promo-flow-ring, .promotion-page .promo-flow-core { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--flow-color); }
.promotion-page .promo-flow-ring-outer { inset: 0; opacity: .06; }
.promotion-page .promo-flow-ring-inner { inset: 15px; opacity: .14; }
.promotion-page .promo-flow-core { inset: 26px; box-shadow: 0 6px 18px #18284112; transition: transform .3s ease; }
.promotion-page .promo-flow-core img { display: block; width: 48px; height: 48px; object-fit: contain; }
.promotion-page .promo-main .promo-flow-node h3 { font-size: 22px; margin: 16px 0 0; }
.promotion-page .promo-flow-index { display: inline-block; margin-right: 8px; color: var(--flow-color); font-size: 16px; }
.promotion-page .promo-flow-node .promo-tags span { position: absolute; top: 14px; width: 66px; box-sizing: border-box; padding: 2px 0; color: #b3b3b3; background: #fff; border: 1px solid #e6e6e6; font-size: 12px; line-height: 20px; border-radius: 20px; transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease; }
.promotion-page .promo-flow-node .promo-tags span:after { content: ""; position: absolute; bottom: -4px; width: 7px; height: 7px; background: inherit; border-bottom: 1px solid; border-color: inherit; }
.promotion-page .promo-flow-node .promo-tags span:nth-child(odd):after { right: 10px; border-right: 1px solid; border-color: inherit; transform: skewY(40deg); }
.promotion-page .promo-flow-node .promo-tags span:nth-child(even):after { left: 10px; border-left: 1px solid; border-color: inherit; transform: skewY(-40deg); }
.promotion-page .promo-flow-node .promo-tags span:nth-child(odd) { left: 0; }
.promotion-page .promo-flow-node .promo-tags span:nth-child(even) { right: 0; }
.promotion-page .promo-flow-node .promo-tags span:nth-child(n+3) { top: 78px; }
.promotion-page .promo-flow-node:hover .promo-tags span, .promotion-page .promo-flow-node:focus .promo-tags span { color: var(--flow-color); border-color: var(--flow-color); transform: translateY(-2px); }
.promotion-page .promo-flow-node:hover .promo-flow-ring-outer, .promotion-page .promo-flow-node:focus .promo-flow-ring-outer { animation: promo-flow-pulse .6s ease-in-out; }
.promotion-page .promo-flow-node:hover .promo-flow-ring-inner, .promotion-page .promo-flow-node:focus .promo-flow-ring-inner { animation: promo-flow-expand .7s ease-in-out; }
.promotion-page .promo-flow-node:hover .promo-flow-core, .promotion-page .promo-flow-node:focus .promo-flow-core { transform: scale(1.06); }
.promotion-page .promo-flow-node:focus-visible { outline: 2px solid var(--flow-color); border-radius: 6px; }
.promotion-page .promo-system { position: relative; margin-top: 48px; text-align: center; }
.promotion-page .promo-system:before { content: ""; position: absolute; top: -49px; left: calc(50% - 1px); height: 42px; width: 2px; background: #e6e6e6; pointer-events: none; }
.promotion-page .promo-system:after { content: ""; position: absolute; top: -12px; left: calc(50% - 5px); width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #e6e6e6; border-radius: 50%; background: #fff; pointer-events: none; }
.promotion-page .promo-main .promo-system p { margin: 22px auto 0; max-width: 760px; font-size: 16px; }
@keyframes promo-flow-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.65); } }
@keyframes promo-flow-expand { 0% { transform: scale(.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .promotion-page .promo-flow-node .promo-tags span, .promotion-page .promo-flow-core { transition: none; }
    .promotion-page .promo-flow-node:hover .promo-flow-ring, .promotion-page .promo-flow-node:focus .promo-flow-ring { animation: none; }
}
/* API services: one expanding visual surface keeps the photo and overlay aligned. */
.promotion-page .promo-api-services { display: grid; grid-template-columns: repeat(3, 346px); gap: 54px; justify-content: center; padding: 50px 0 68px; }
.promotion-page .promo-api-service { position: relative; height: 322px; color: #fff; text-align: center; outline: none; }
.promotion-page .promo-api-service-visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; transition: top .5s ease, bottom .5s ease; }
/* Keep the 440px photo fixed in page space while its clipping window expands. */
.promotion-page .promo-api-service-photo { position: absolute; top: -50px; left: 0; z-index: -1; display: block; width: 100%; height: 440px; object-fit: cover; transition: top .5s ease; }
.promotion-page .promo-api-service:hover .promo-api-service-photo, .promotion-page .promo-api-service:focus-visible .promo-api-service-photo { top: 0; }
.promotion-page .promo-api-service-visual:before { content: ""; position: absolute; inset: 0; background: rgba(9, 20, 34, .48); }
.promotion-page .promo-api-service-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #1f66ce, #4487f6); opacity: 0; transition: opacity .5s; }
.promotion-page .promo-api-service-content { position: absolute; top: 0; left: 0; width: 100%; transition: top .5s; }
.promotion-page .promo-api-service-icon { display: block; width: 80px; height: 80px; margin: 80px auto 0; color: #fff; transition: margin .5s; }
.promotion-page .promo-main .promo-api-service h3 { margin: 50px 0 0; font-size: 23px; line-height: 35px; font-weight: 700; color: #fff; transition: margin .5s; }
.promotion-page .promo-main .promo-api-service p { margin: 34px 0 0; padding: 0 46px; font-size: 18px; line-height: 27px; color: #fff; text-align: left; opacity: 0; transition: opacity .5s; pointer-events: none; }
.promotion-page .promo-api-service:hover .promo-api-service-visual, .promotion-page .promo-api-service:focus-visible .promo-api-service-visual { top: -50px; bottom: -68px; }
.promotion-page .promo-api-service:hover .promo-api-service-visual:after, .promotion-page .promo-api-service:focus-visible .promo-api-service-visual:after { opacity: .88; }
.promotion-page .promo-api-service:hover .promo-api-service-content, .promotion-page .promo-api-service:focus-visible .promo-api-service-content { top: -50px; }
.promotion-page .promo-api-service:hover .promo-api-service-icon, .promotion-page .promo-api-service:focus-visible .promo-api-service-icon { margin-top: 57px; }
.promotion-page .promo-main .promo-api-service:hover h3, .promotion-page .promo-main .promo-api-service:focus-visible h3 { margin-top: 20px; }
.promotion-page .promo-main .promo-api-service:hover p, .promotion-page .promo-main .promo-api-service:focus-visible p { opacity: 1; pointer-events: auto; }
.promotion-page .promo-api-service:focus-visible .promo-api-service-visual { outline: 2px solid #1f66ce; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .promotion-page .promo-api-service-visual, .promotion-page .promo-api-service-photo, .promotion-page .promo-api-service-visual:after, .promotion-page .promo-api-service-content, .promotion-page .promo-api-service-icon, .promotion-page .promo-main .promo-api-service h3, .promotion-page .promo-main .promo-api-service p { transition: none; }
}
/* Cost comparison follows the reference's overlapping 600/750px panels. */
.promotion-page .promo-cost-section { padding: 45px 0 50px; background: #fff; overflow: hidden; }
.promotion-page .promo-cost-section h2 { font-size: 34px; font-weight: 700; color: #111; margin-bottom: 50px; }
.promotion-page .promo-cost-comparison { position: relative; width: 1200px; min-height: 450px; }
.promotion-page .promo-cost-comparison:before { content: ""; position: absolute; width: 308px; height: 308px; box-sizing: border-box; border: 50px solid #f9fafc; border-radius: 50%; left: -123px; top: 0; }
.promotion-page .promo-cost-comparison:after { content: ""; position: absolute; width: 227px; height: 117px; left: 44px; top: 281px; background: radial-gradient(circle, #e0e5ef 2px, transparent 3px) 0 0 / 28px 23px; }
.promotion-page .promo-cost-headings { display: flex; align-items: center; justify-content: space-between; padding: 0 164px 0 129px; position: relative; z-index: 1; }
.promotion-page .promo-cost-headings h3 { display: flex; align-items: center; gap: 10px; font-size: 30px; line-height: 45px; font-weight: 700; color: #707072; margin: 0; }
.promotion-page .promo-cost-headings h3:last-child { color: #0070ef; }
.promotion-page .promo-cost-face { width: 32px; height: 32px; flex: 0 0 32px; }
.promotion-page .promo-cost-panels { position: relative; height: 280px; margin-top: 30px; }
.promotion-page .promo-cost-panel { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; }
.promotion-page .promo-cost-traditional { left: 0; top: 40px; width: 600px; height: 200px; z-index: 2; color: #707072; background: #f7f9fc; border: 1px solid #fff; box-shadow: 0 15px 50px rgba(206, 214, 220, .2); }
.promotion-page .promo-cost-platform { right: 0; top: 0; width: 750px; height: 280px; padding-left: 150px; z-index: 1; color: #fff; background: linear-gradient(rgba(29, 114, 251, .94), rgba(29, 114, 251, .94)), url("api-service-stability.jpg") center / cover no-repeat; }
.promotion-page .promo-cost-metrics { position: relative; margin: 0; padding: 0; font-size: 20px; line-height: 34px; }
.promotion-page .promo-cost-metrics:before { content: ""; position: absolute; left: 5.5px; top: 17px; bottom: 17px; width: 1px; background: currentColor; }
.promotion-page .promo-cost-metrics > div { position: relative; padding-left: 28px; white-space: nowrap; }
.promotion-page .promo-cost-metrics > div:before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 12px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; background: #f7f9fc; }
.promotion-page .promo-cost-platform .promo-cost-metrics > div:before { background: #1d72fb; }
.promotion-page .promo-cost-metrics > div:after { content: ""; position: absolute; left: 4px; top: 15px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.promotion-page .promo-cost-metrics dt, .promotion-page .promo-cost-metrics dd { display: inline; margin: 0; padding: 0; font-weight: 400; }
.promotion-page .promo-cost-metrics dd { font-size: 24px; font-weight: 700; }
.promotion-page .promo-cost-section .promo-cost-label { margin: 16px 0 0; padding: 0 12px; min-width: 216px; height: 34px; box-sizing: border-box; background: #707072; color: #fff; font-size: 14px; line-height: 34px; text-align: center; }
.promotion-page .promo-cost-platform .promo-cost-label { color: #449dfd; background: #fff; }
.promotion-page .promo-cost-section .promo-cost-summary { position: relative; z-index: 1; margin: 60px 0 0; font-size: 22px; font-weight: 700; line-height: 42px; color: #111; text-align: center; }
.promotion-page .promo-cost-summary em { color: #0070ef; font-style: normal; }
.promotion-page .promo-cost-summary strong { color: #ff2020; }
/* Five open columns with circular icons, following the ruan.net reasons layout. */
.promotion-page .promo-reasons-section { box-sizing: border-box; min-height: 490px; padding: 50px 0 48px; background: linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .84)), url("geo-advantage-team-review.jpg") center / cover no-repeat; }
.promotion-page .promo-main .promo-reasons-section h2 { margin-bottom: 30px; color: #1c1e22; }
.promotion-page .promo-reasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 21px; }
.promotion-page .promo-reason { padding-top: 20px; text-align: center; }
.promotion-page .promo-reason-icon { display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; color: var(--promo-color); background: #fff; transition: transform 1s ease-out; }
.promotion-page .promo-reason-icon svg { display: block; width: 56px; height: 56px; }
.promotion-page .promo-reason-icon:hover { transform: scale(1.15); }
.promotion-page .promo-main .promo-reason h3 { position: relative; margin: 0; padding: 20px 0; color: #1c1e22; font-size: 24px; font-weight: 400; line-height: 36px; }
.promotion-page .promo-reason h3:after { content: ""; position: absolute; bottom: 0; left: calc(50% - 16px); width: 32px; height: 4px; border-radius: 2px; background: var(--promo-color); }
.promotion-page .promo-main .promo-reason h4 { margin: 20px 13px 0; color: #666; font-size: 16px; font-weight: 600; line-height: 28px; }
.promotion-page .promo-main .promo-reason p { margin: 0 13px; color: #666; font-size: 16px; line-height: 28px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    .promotion-page .promo-reason-icon { transition: none; }
}
.promotion-page .promo-service-scope { padding: 64px 0 54px; }
.promotion-page .promo-main .promo-service-scope h2 { margin-bottom: 12px; }
.promotion-page .promo-scope-diagram { display: block; width: 1200px; height: 530px; color: var(--promo-color); font-family: inherit; }
.promotion-page .promo-scope-inner-label { font-size: 24px; font-weight: 600; }
.promotion-page .promo-scope-center-label { font-size: 28px; }
.promotion-page .promo-scope-outer-label { font-size: 20px; font-weight: 600; }
.promotion-page .promo-main .promo-service-scope .promo-scope { margin: 0; color: #242a35; font-size: 20px; text-align: center; }
.promotion-page #promotion-contact { scroll-margin-top: 220px; }
.promotion-page #promotion-contact h2 { color: var(--promo-color); }
.promotion-page .promo-contact { display: flex; align-items: center; justify-content: center; gap: 65px; }
.promotion-page .promo-contact img { width: 220px; height: auto; display: block; }
.promotion-page .promo-contact p { font-size: 22px; }
.promotion-page .promo-contact a { color: var(--promo-color); }
.promotion-page .promo-wechat { user-select: text; }
.promotion-page .newfooter { text-shadow: none; }

.promotion-page .promo-main .promo-title { margin-bottom: 40px; }