@charset "utf-8";
:root { --product-primary: #2576fb; --product-text: #1e293b; --product-muted: #64748b; }
/*主题色由栏目模板注入；仅维护一个颜色，即可推导整页的深浅层级与光影。*/
.product-page-theme { --product-primary-light: color-mix(in srgb, var(--product-primary) 56%, #fff 44%); --product-primary-dark: color-mix(in srgb, var(--product-primary) 78%, #071b50 22%); --product-primary-deep: color-mix(in srgb, var(--product-primary) 62%, #061337 38%); --product-primary-soft: color-mix(in srgb, var(--product-primary) 8%, #fff 92%); --product-primary-pale: color-mix(in srgb, var(--product-primary) 14%, #fff 86%); --product-primary-line: color-mix(in srgb, var(--product-primary) 20%, #dfe8f5 80%); --product-primary-hero: color-mix(in srgb, var(--product-primary) 14%, #fff 86%); --product-deep: var(--product-primary-deep); --product-soft: var(--product-primary-soft); }
.product-hub-hero { position: relative; min-height: 27rem; overflow: hidden; padding: 2rem 0 3.5rem; background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--product-primary) 18%, transparent), transparent 19rem),
    radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--product-primary) 12%, transparent), transparent 16rem),
    linear-gradient(135deg, #fff 0%, var(--product-primary-hero) 52%, #fff 100%); }
.product-hub-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.product-hub-orb-one { width: 26.25rem; height: 26.25rem; top: -13.75rem; right: 8%; background: color-mix(in srgb, var(--product-primary) 16%, transparent); }
.product-hub-orb-two { width: 17.5rem; height: 17.5rem; left: -7.5rem; bottom: -9.375rem; background: color-mix(in srgb, var(--product-primary-light) 24%, transparent); }
.product-hub-hero .common-breadcrumb { margin-bottom: 2.25rem; }
.product-hub-kicker, .product-section-label { display: inline-flex; align-items: center; gap: .5rem; color: var(--product-primary); font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.product-hub-hero h1 { margin: 1.25rem 0 1.375rem; color: var(--product-text); font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -.04em; }
.product-hub-hero p { max-width: 40rem; margin-bottom: 2rem; color: var(--product-muted); font-size: 1.16rem; line-height: 1.9; }
.product-hub-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.product-hub-actions .btn { min-width: 8.25rem; padding: 0.75rem 1.5rem; border-radius: 62.438rem; font-weight: 600; }
.product-primary-btn { background: linear-gradient(135deg, var(--product-primary-light), var(--product-primary) 58%, var(--product-primary-dark)); color: #fff; box-shadow: 0 .625rem 1.5rem color-mix(in srgb, var(--product-primary) 28%, transparent); }
.product-primary-btn:hover { background: var(--product-primary-dark); color: #fff; transform: translateY(-0.125rem); }
.product-secondary-btn { border: 1px solid var(--product-primary-line); background: rgba(255,255,255,.7); color: var(--product-deep); }
.product-secondary-btn:hover { border-color: var(--product-primary); color: var(--product-primary); }
.product-hub-visual { position: relative; width: min(21rem, 86vw); aspect-ratio: 1; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--product-primary) 12%, transparent); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.96) 0 32%, rgba(255,255,255,.28) 33% 58%, transparent 59%); }
.product-hub-visual::before, .product-hub-visual::after { content: ''; position: absolute; inset: 17%; border: 1px dashed color-mix(in srgb, var(--product-primary) 28%, transparent); border-radius: 50%; }
.product-hub-visual::after { inset: 3%; border-color: color-mix(in srgb, var(--product-primary) 12%, transparent); }
.visual-core { position: absolute; inset: 50% auto auto 50%; z-index: 2; display: flex; width: 8.75rem; height: 8.75rem; transform: translate(-50%, -50%); flex-direction: column; align-items: center; justify-content: center; border-radius: 2.375rem; background: linear-gradient(145deg, var(--product-primary-light), var(--product-primary) 55%, var(--product-primary-dark)); color: #fff; box-shadow: 0 1.5rem 3.125rem color-mix(in srgb, var(--product-primary) 30%, transparent); }
.visual-core i { margin-bottom: 0.5rem; font-size: 2rem; }
.visual-core span { font-weight: 600; }
.visual-chip { position: absolute; z-index: 3; min-width: 4.75rem; padding: 0.625rem 1rem; border: 1px solid color-mix(in srgb, var(--product-primary) 12%, transparent); border-radius: 0.875rem; background: #fff; color: var(--product-deep); text-align: center; font-size: .88rem; font-weight: 600; box-shadow: 0 .625rem 1.875rem color-mix(in srgb, var(--product-primary) 14%, transparent); }
.chip-one { top: 10%; left: 10%; }
.chip-two { top: 19%; right: 2%; }
.chip-three { bottom: 15%; left: 0; }
.chip-four { right: 10%; bottom: 7%; }
.product-groups-section { padding: 5rem 0 5.5rem; background: #fff; }
.product-group-stack { display: grid; gap: 4.25rem; }
.product-section-heading.product-directory-heading { display: block; width: 100%; margin-bottom: 4rem; text-align: center; }
.product-directory-heading > div { width: 100%; margin-inline: auto; }
.product-directory-heading h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); letter-spacing: -.04em; }
.product-section-heading.product-directory-heading p { display: block; line-height: 1.9; }
.product-category-section { display: grid; grid-template-columns: minmax(19rem, .82fr) minmax(0, 2.18fr); align-items: stretch; gap: 2rem; scroll-margin-top: 6.25rem; }
.product-category-intro { position: relative; min-width: 0; min-height: 25rem; overflow: hidden; padding: 2.25rem 2.25rem 13rem; border: 1px solid var(--product-primary-line); border-radius: 1.25rem; background: radial-gradient(ellipse at 85% 88%, color-mix(in srgb, var(--product-primary) 20%, transparent), transparent 58%), linear-gradient(155deg, #fff 7%, var(--product-primary-soft)); box-shadow: 0 1rem 2.5rem rgba(38,63,115,.075); isolation: isolate; }
.product-category-intro::before { position: absolute; z-index: -1; right: -3rem; bottom: -4rem; width: 18rem; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 1.3rem, color-mix(in srgb, var(--product-primary) 9%, transparent) 1.34rem 1.4rem); content: ''; }
.product-category-title-row { position: relative; z-index: 1; display: flex; align-items: center; gap: .8rem; }
.product-category-title-row > div { min-width: 0; }
.product-category-symbol { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; place-items: center; border: 1px solid var(--product-primary-line); border-radius: 1rem; background: linear-gradient(145deg, #fff, var(--product-primary-soft)); color: var(--product-primary); font-size: 1.65rem; }
.product-category-intro .product-section-label { font-size: .7rem; letter-spacing: .08em; }
.product-category-intro h3 { margin: .35rem 0 0; color: var(--product-text); font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.3; font-weight: 700; }
.product-category-intro p { position: relative; z-index: 1; margin: 1.35rem 0 0; color: var(--product-text); font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.product-category-artwork { position: absolute; z-index: 0; right: -.35rem; bottom: -.25rem; width: min(98%, 23rem); height: 13rem; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 .8rem 1.2rem rgba(36,107,253,.12)); pointer-events: none; }
.product-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 1rem; }
.product-category-grid .product-category-card { min-height: 8.75rem; height: auto; gap: .85rem; padding: 1rem 2.5rem 1rem 1.1rem; border-radius: .95rem; background: linear-gradient(145deg, #fff 8%, color-mix(in srgb, var(--product-primary) 4%, #fff)); }
.product-category-card .product-card-icon { width: 2.7rem; height: 2.7rem; flex-basis: 2.7rem; border-radius: .75rem; font-size: 1.25rem; }
.product-category-card .product-card-icon img { width: 2.25rem; height: 2.25rem; }
.product-category-card .product-card-title { flex-wrap: wrap; font-size: 1rem; line-height: 1.6; }
.product-category-card .product-card-desc { margin-top: .5rem; font-size: .8rem; line-height: 1.75; }
.product-category-card .product-card-arrow { top: 1.45rem; right: 1rem; font-size: .9rem; }
.product-category-card.is-disabled { opacity: .6; cursor: default; box-shadow: none; }
.product-category-card.is-disabled:hover { transform: none; border-color: var(--product-primary-line); box-shadow: none; }
@media (max-width: 1399.98px) {
  .product-category-section { grid-template-columns: minmax(17rem, .85fr) minmax(0, 2.15fr); gap: 1.5rem; }
  .product-category-intro { padding: 1.75rem 1.5rem 13rem; }
  .product-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .product-category-section { grid-template-columns: 1fr; gap: 1rem; }
  .product-category-intro { min-height: 15rem; padding: 1.5rem 48% 1.5rem 1.5rem; }
  .product-category-artwork { width: 46%; height: 13rem; }
}
@media (max-width: 575.98px) {
  .product-group-stack { gap: 2.5rem; }
  .product-category-intro { min-height: 20rem; padding: 1.5rem 1.5rem 10rem; }
  .product-category-intro p { font-size: .875rem; }
  .product-category-artwork { width: 62%; height: 10rem; }
  .product-category-grid { grid-template-columns: 1fr; gap: .75rem; }
  .product-category-grid .product-category-card { min-height: 7rem; }
}
/*产品与服务区只保留卡片容器，避免外层大面板与内层卡片重复套框。*/
.product-group-section { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-margin-top: 6.25rem; }
.product-group-services { padding-top: 3.5rem; border-top: 1px solid var(--product-primary-line); }
.product-group-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.product-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 2.125rem; }
.product-group-section .product-section-heading { margin-bottom: 1.75rem; }
.product-section-heading h2 { margin: 0.563rem 0 0; color: var(--product-text); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; }
.product-section-heading p { margin: 0.625rem 0 0; color: var(--product-muted); }
.product-count { padding: 0.438rem 0.813rem; border-radius: 62.438rem; background: var(--product-soft); color: var(--product-primary); font-size: .82rem; }
.product-hub-card { position: relative; display: flex; min-height: 7.25rem; height: 100%; align-items: flex-start; gap: 1.063rem; padding: 1.563rem 3.25rem 1.5rem 1.5rem; border: 1px solid var(--product-primary-line); border-radius: 1.125rem; background: #fff; color: var(--product-text); box-shadow: 0 .5rem 1.75rem rgba(51, 79, 118, .06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.product-hub-card:hover { transform: translateY(-0.375rem); border-color: color-mix(in srgb, var(--product-primary) 42%, #dfe8f5 58%); color: var(--product-text); box-shadow: 0 1.125rem 2.625rem color-mix(in srgb, var(--product-primary) 16%, transparent); }
.product-hub-card:focus-visible { outline: .2rem solid color-mix(in srgb, var(--product-primary) 42%, transparent); outline-offset: .2rem; }
.product-card-icon { display: inline-flex; width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; align-items: center; justify-content: center; border-radius: 0.875rem; background: var(--product-primary-pale); color: var(--product-primary); font-size: 1.45rem; }
.product-card-icon img { width: 2.625rem; height: 2.625rem; object-fit: contain; }
.product-card-content { min-width: 0; }
.product-card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; font-weight: 650; }
.product-card-title em { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: #fff0ec; color: #f04b32; font-size: .65rem; font-style: normal; font-weight: 600; }
.product-card-desc { display: block; margin-top: 0.563rem; color: var(--product-muted); font-size: .86rem; line-height: 1.65; }
.product-card-arrow { position: absolute; top: 1.625rem; right: 1.5rem; color: #b0bdd0; transition: color .2s, transform .2s; }
.product-hub-card:hover .product-card-arrow { color: var(--product-primary); transform: translate(0.125rem, -0.125rem); }
.product-empty { padding: 5rem 1.25rem; color: #94a3b8; text-align: center; }
.product-empty i { font-size: 2.5rem; }
.product-empty p { margin: 0.75rem 0 0; }
.product-value-section { padding: 6rem 0; background: var(--product-soft); }
.product-value-section .product-section-heading { margin-bottom: 2.625rem; }
.product-value-card { height: 100%; padding: 2.125rem; border: 1px solid color-mix(in srgb, var(--product-primary) 10%, transparent); border-radius: 1.25rem; background: rgba(255,255,255,.82); }
.product-value-card i { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 0.875rem; background: var(--product-primary-pale); color: var(--product-primary); font-size: 1.35rem; }
.product-value-card h3 { margin: 1.375rem 0 0.75rem; color: var(--product-text); font-size: 1.1rem; font-weight: 650; }
.product-value-card p { margin: 0; color: var(--product-muted); font-size: .9rem; line-height: 1.8; }
.product-service-cta { padding: 5.375rem 0; background: #fff; scroll-margin-top: 6.25rem; }
.product-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; padding: 3rem 3.5rem; border-radius: 1.625rem; background: linear-gradient(120deg, var(--product-primary-deep), var(--product-primary) 58%, var(--product-primary-light)); color: #fff; box-shadow: 0 1.5rem 3.375rem color-mix(in srgb, var(--product-primary) 26%, transparent); }
.product-cta-inner span { opacity: .78; font-size: .9rem; }
.product-cta-inner h2 { margin: 0.563rem 0 0; font-size: clamp(1.55rem, 3vw, 2.3rem); font-weight: 650; }
.product-cta-inner .btn { flex-shrink: 0; padding: 0.75rem 1.563rem; border-radius: 62.438rem; background: #fff; color: var(--product-primary); font-weight: 600; }
.product-cta-inner .btn:hover { transform: translateY(-0.125rem); box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.12); }
/*页脚沿用当前栏目的主题色，保证产品中心从首屏到收口的视觉一致性。*/
@media (max-width: 991.98px) {
  .product-hub-hero { min-height: auto; padding-bottom: 3.5rem; }
  .product-hub-hero .common-breadcrumb { margin-bottom: 2rem; }
  .product-hub-visual { width: min(19rem, 82vw); margin-top: 1.125rem; }
  .visual-core { width: 7.375rem; height: 7.375rem; border-radius: 2rem; }
  .product-groups-section, .product-value-section { padding-top: 4.5rem; }
  .product-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .product-hub-hero { padding-top: 1.75rem; }
  .product-hub-hero h1 { font-size: 2.5rem; }
  .product-hub-hero p,
  .product-section-heading p { display: none; }
  .product-section-heading { align-items: flex-start; }
  .product-count { display: none; }
  .product-group-services { padding-top: 2.75rem; }
  .product-group-list { grid-template-columns: 1fr; }
  .product-hub-card { min-height: 7rem; padding: 1.25rem 2.875rem 1.25rem 1.188rem; }
  .product-card-icon { width: 2.875rem; height: 2.875rem; flex-basis: 2.875rem; }
  .product-card-icon img { width: 2.25rem; height: 2.25rem; }
  .product-cta-inner { flex-direction: column; align-items: flex-start; padding: 2.125rem 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .product-hub-card, .product-primary-btn, .product-cta-inner .btn { transition: none; }
}
/** 大屏适配（原 channel_highres.css 本页专属部分；置于文件末尾以保持最后的覆盖顺序）*/
@media (min-width: 1400px) {
  .product-hub-hero > .container,
  .product-groups-section > .container,
  .product-value-section > .container,
  .product-service-cta > .container { width: calc(100% - (var(--tncms-channel-gutter) * 2)); max-width: var(--tncms-channel-wide); }
}