.services-content { padding-top: 28px; }
.services-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 34px; border: 1px solid #dfe6ee; border-radius: 10px; background: linear-gradient(115deg, #fff 0%, #fffaf3 62%, #fff4df 100%); box-shadow: 0 5px 16px rgba(29,34,38,.04); }
.services-hero h1 { margin: 10px 0 9px; color: var(--tro-ink); font-size: clamp(29px, 3vw, 40px); }
.services-hero h1 em { font-size: .54em; color: #41505f; font-style: normal; letter-spacing: .08em; }
.services-hero p { max-width: 680px; margin: 0; color: #41505f; font-size: 12px; line-height: 1.8; }
.services-hero-note { min-width: 150px; padding-left: 24px; border-left: 1px solid #ecdcbf; }
.services-hero-note strong, .services-hero-note span, .services-hero-note small { display: block; }
.services-hero-note strong { color: var(--tro-orange-ink); font: 700 42px/1 'DM Sans'; }
.services-hero-note span { margin-top: 5px; color: #4e5b67; font-size: 12px; font-weight: 700; }
.services-hero-note small { margin-top: 7px; color: #76654d; font-size: 10px; }
.services-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border: 1px solid #e8e4da; border-radius: 10px; background: #fff; }
.services-stats div { padding: 14px 18px; border-right: 1px solid #eee9df; text-align: center; }
.services-stats div:last-child { border-right: 0; }
.services-stats strong, .services-stats span { display: block; }
.services-stats strong { color: var(--poa-page-title-color, #ff9900); font: 700 20px/1 'DM Sans'; }
.services-stats span { margin-top: 5px; color: var(--poa-page-title-color, #ff9900); font-size: 10px; }
.platform-section { margin-top: 27px; }
.platform-section { padding: 21px 0 24px; border-top: 1px solid #d7e0e8; border-bottom: 1px solid #d7e0e8; }
.platform-section .section-heading { margin-bottom: 14px; }
.section-caption { color: #41505f; font-size: 10px; }
.platform-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.platform-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; height: 60px; overflow: hidden; padding: 6px 12px 6px 14px; border: 1px solid #e4e7ec; border-radius: 8px; color: #42566b; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 2px 6px rgba(29,34,38,.04); transition: border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; }
.platform-card:hover { z-index: 1; border-color: #f0b06a; color: #172c42; background: #fff; box-shadow: 0 8px 18px rgba(30,49,69,.12); transform: translateY(-2px); }
.platform-card:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(11,28,45,.12); }
.platform-card:focus-visible { z-index: 2; outline: 2px solid #f39a22; outline-offset: 2px; }
.platform-card.active { border-color: #ff9b22; color: var(--tro-accent-text); background: #fff8ec; box-shadow: 0 0 0 3px rgba(255,155,34,.15), 0 6px 14px rgba(247,144,9,.12); transform: none; }
.platform-card.active::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 28%, rgba(255,155,34,.18) 48%, transparent 68%); transform: translateX(-120%); animation: platform-glint 3.8s ease-in-out infinite; }
.platform-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: transparent; transition: transform .22s ease, filter .22s ease; }
.platform-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.platform-card:hover .platform-icon { transform: scale(1.06); }
.platform-card.active .platform-icon { filter: drop-shadow(0 2px 5px rgba(31,45,61,.16)); }
.platform-label { min-width: 0; }
.platform-label strong, .platform-label small { display: block; overflow: hidden; color: currentColor; text-overflow: ellipsis; white-space: nowrap; }
.platform-label strong { font-size: 12px; }
.platform-label small { margin-top: 3px; color: #41505f; font-size: 10px; }
/* 选中态：左侧品牌橙竖条（与侧边栏工具卡、最近案件行同一语言） */
.platform-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; z-index: -1; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ffb033, #ff8a00); opacity: 0; transform: scaleY(.35); transition: opacity .22s ease, transform .22s ease; }
.platform-card.active::before { opacity: 1; transform: scaleY(1); }
.platform-card.active .platform-label strong { font-weight: 800; }
@keyframes platform-glint { 0%, 62% { transform: translateX(-120%); } 84%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .platform-card, .platform-icon { transition: none; } .platform-card.active::after { animation: none; } }
.service-advantages, .service-flow, .service-promises, .service-contact-cta { margin-top: 42px; }
.advantage-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.advantage-grid article { display: flex; gap: 13px; padding: 19px 20px; border: 1px solid #e5e4df; border-radius: 8px; background: #fff; }
.advantage-grid article > span, .promise-grid article > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #935b16; background: #fff1da; font: 700 10px 'DM Sans'; }
.advantage-grid h3 { margin: 1px 0 6px; color: #364754; font-size: 13px; }
.advantage-grid p { margin: 0; color: #41505f; font-size: 10px; line-height: 1.75; }
.service-flow { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.82fr); gap: 38px; align-items: center; padding: 32px 34px; border: 1px solid #e3e6e5; border-radius: 9px; background: #fff; }
.service-flow .section-heading { margin-bottom: 0; }
.service-flow-intro { margin: 7px 0 13px; color: #41505f; font-size: 11px; line-height: 1.8; }
.service-flow ol { margin: 0; padding: 0; list-style: none; }
.service-flow li { display: flex; gap: 13px; padding: 12px 0; border-top: 1px solid #eef0ee; }
.service-flow li > span { color: #915b18; font: 700 10px 'DM Sans'; }
.service-flow li strong { color: #45545f; font-size: 11px; }
.service-flow li p { margin: 4px 0 0; color: #41505f; font-size: 10px; line-height: 1.6; }
.service-flow-visual { position: relative; height: 330px; margin: 0; overflow: hidden; background: #162738; }
.service-flow-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,27,43,.72), rgba(13,27,43,.04) 70%); }
.service-flow-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-flow-visual figcaption { position: absolute; z-index: 1; left: 19px; bottom: 17px; color: #fff; }
.service-flow-visual figcaption strong, .service-flow-visual figcaption span { display: block; }
.service-flow-visual figcaption strong { font-size: 15px; }
.service-flow-visual figcaption span { margin-top: 6px; color: #ffc76b; font: 700 9px 'DM Sans'; letter-spacing: .15em; }
.service-promises { padding: 30px 34px 34px; background: #142438; }
.service-promises .section-heading h2 { color: #fff; }
.promise-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
.promise-grid article { min-height: 128px; padding: 18px 20px; border: 1px solid rgba(255,196,86,.48); background: rgba(255,255,255,.06); }
.promise-grid article.promise-primary { color: #142438; background: linear-gradient(120deg, #ffb229, #ff8e16); border-color: transparent; }
.promise-grid article.promise-primary > span { color: #8b5418; background: rgba(255,255,255,.55); }
.promise-grid h3 { margin: 17px 0 7px; color: #fff; font-size: 18px; }
.promise-primary h3 { color: #142438; }
.promise-grid p { margin: 0; color: #b3c0cc; font-size: 10px; line-height: 1.7; }
.promise-primary p { color: #65481f; }
.service-contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 27px 30px; border-radius: 9px; background: linear-gradient(110deg, #f79009, #ffb22d); }
.service-contact-cta h2 { margin: 0 0 5px; color: #17293d; font-size: 22px; }
.service-contact-cta p { margin: 0; color: #6f4d20; font-size: var(--poa-module-copy-size, 13px); }
.service-contact-cta .primary-action { width: auto; min-width: 120px; margin: 0; color: #fff; background: #17293d; box-shadow: none; }
.service-contact-cta .primary-action:hover { background: #263e57; }
/* 中等宽度下 6 张卡偏窄，收紧图标与间距，避免平台名被截断 */
@media (max-width: 1320px) {
  .platform-card { grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding-left: 12px; }
  .platform-icon { width: 32px; height: 32px; }
  .platform-label strong { font-size: 11px; }
}

@media (max-width: 900px) { .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 2px 0 8px; scroll-snap-type: none; } .platform-card { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 6px 7px; } .platform-icon { width: 30px; height: 30px; } .platform-label strong { font-size: 10px; } .platform-label small { font-size: 9px; } }
@media (max-width: 760px) { .services-hero { display: block; padding: 24px 20px; } .services-hero-note { margin-top: 20px; padding: 15px 0 0; border-top: 1px solid #ecdcbf; border-left: 0; } .services-stats { grid-template-columns: repeat(2, 1fr); } .services-stats div:nth-child(2) { border-right: 0; } .services-stats div { padding: 12px 14px; border-bottom: 1px solid #eee9df; } .services-stats div:nth-child(3), .services-stats div:nth-child(4) { border-bottom: 0; } .section-caption { display: none; } .advantage-grid, .promise-grid { grid-template-columns: 1fr; } .service-flow { grid-template-columns: 1fr; padding: 23px 20px; gap: 23px; } .service-flow-visual { height: 240px; } .service-promises { padding: 24px 20px; } .service-contact-cta { display: block; padding: 24px 20px; } .service-contact-cta .primary-action { margin-top: 17px; } }