/* ===== AI 网关两类解决方案 · 页面级 UI 合同 ===== */
.solution-page {
  --solution-accent: var(--accent-enterprise);
  --solution-accent-on: var(--accent-enterprise-on);
  --solution-soft: var(--enterprise-soft);
  --solution-border: var(--enterprise-border);
  --solution-glow: var(--enterprise-glow);
  --solution-readable: calc(17px * var(--font-scale));
  --fs-small: var(--solution-readable);
  --fs-caption: var(--solution-readable);
  --fs-micro: var(--solution-readable);
}

.solution-page.is-operations {
  --solution-accent: var(--accent-operations);
  --solution-accent-on: var(--accent-operations-on);
  --solution-soft: var(--operations-soft);
  --solution-border: var(--operations-border);
  --solution-glow: var(--operations-glow);
}

.solution-hero {
  --product-accent: var(--solution-accent);
  --product-border: var(--solution-border);
  --product-soft: var(--solution-soft);
  --product-hero-soft: var(--solution-soft);
  --product-hero-glow: var(--solution-glow);
}

.solution-page section[id] { scroll-margin-top: 88px; }
.solution-page .section-tag { color: var(--solution-accent); background: var(--solution-soft); border-color: var(--solution-border); }
.solution-page .btn-cta,
.solution-page .btn-submit { background: var(--solution-accent); color: var(--solution-accent-on); }
.solution-page .btn-cta:hover,
.solution-page .btn-submit:hover { box-shadow: 0 10px 28px var(--solution-glow); filter: brightness(1.06); }
.solution-page .btn-outline:hover { color: var(--solution-accent); border-color: var(--solution-border); background: var(--solution-soft); }

/* 企业方案 Hero：企业版能力底座，核心网关占据唯一视觉中心 */
.enterprise-foundation { position: relative; display: grid; gap: 0; padding: 12px 18px; background: transparent; }
.enterprise-audience,
.enterprise-spaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.enterprise-audience span,
.enterprise-spaces span { display: flex; align-items: center; justify-content: center; min-height: 46px; color: var(--text-secondary); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-align: center; }
.enterprise-audience span { border-bottom: 2px solid var(--enterprise-border); }
.enterprise-spaces span { border: 1px solid var(--enterprise-border); border-radius: 10px; background: var(--card-bg); color: var(--text); }
.enterprise-connector { position: relative; width: 76%; height: 34px; margin: 0 auto; }
.enterprise-connector::before,
.enterprise-connector::after { content: ''; position: absolute; background: var(--enterprise-border); }
.enterprise-connector::before { top: 0; left: 50%; width: 1px; height: 100%; }
.enterprise-connector::after { top: 50%; right: 12%; left: 12%; height: 1px; }
.enterprise-connector i { position: absolute; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--solution-accent); opacity: .45; animation: enterpriseSignal 1.5s ease-out both; }
.enterprise-connector i:nth-child(1) { left: 12%; }
.enterprise-connector i:nth-child(2) { left: calc(50% - 3px); animation-delay: .14s; }
.enterprise-connector i:nth-child(3) { right: 12%; animation-delay: .28s; }
.enterprise-core { position: relative; overflow: hidden; padding: 26px; border: 1px solid var(--enterprise-border); border-left: 7px solid var(--solution-accent); border-radius: 18px; background: linear-gradient(135deg, var(--enterprise-soft), var(--card-bg) 54%); box-shadow: 0 30px 70px rgba(0, 0, 0, .2), 0 0 58px var(--enterprise-glow); }
.enterprise-core::after { content: '企业版'; position: absolute; top: -15px; right: -8px; color: var(--enterprise-soft); font-size: 86px; font-weight: var(--fw-extrabold); line-height: 1; pointer-events: none; }
.enterprise-core-heading { position: relative; z-index: 1; text-align: center; }
.enterprise-core-heading > span { color: var(--solution-accent); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.enterprise-core-heading > strong { display: block; margin: 8px 0; color: var(--text); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.enterprise-core-heading b { display: inline-block; margin-left: 8px; padding: 4px 9px; border-radius: 6px; background: var(--solution-accent); color: var(--solution-accent-on); font-size: var(--fs-small); vertical-align: middle; }
.enterprise-core-heading p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }
.enterprise-core-features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 22px; }
.enterprise-core-features span { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 11px; border: 1px solid var(--enterprise-border); border-radius: 9px; background: var(--bg-elev); color: var(--text); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.enterprise-core-features i { color: var(--solution-accent); font-style: normal; font-weight: var(--fw-bold); }
.enterprise-model-boundary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; color: var(--text-secondary); font-size: var(--fs-small); }
.enterprise-model-boundary span { padding-top: 12px; border-top: 1px solid var(--border); }
.enterprise-model-boundary span:last-child { text-align: right; }
.enterprise-model-boundary strong { padding: 6px 10px; border-radius: 999px; background: var(--enterprise-soft); color: var(--solution-accent); font-size: var(--fs-small); }

@keyframes enterpriseSignal {
  from { opacity: 0; transform: scale(.45); }
  to { opacity: .75; transform: scale(1); }
}

/* 运营方案 Hero：经营指标与收入曲线，区别于系统架构图 */
.operations-dashboard { overflow: hidden; border: 1px solid var(--operations-border); border-radius: 22px; background: linear-gradient(155deg, var(--operations-soft), var(--card-bg) 48%); box-shadow: 0 30px 75px rgba(0, 0, 0, .23), 0 0 68px var(--operations-glow); }
.operations-dashboard-head { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 20px; border-bottom: 1px solid var(--solution-border); }
.operations-dashboard-head span { color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.operations-dashboard-head strong { color: var(--solution-accent); font-size: var(--fs-small); }
.operations-dashboard-body { padding: 22px; }
.operations-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.operations-kpis article { padding: 16px; border: 1px solid var(--operations-border); border-radius: 14px; background: var(--bg-elev); }
.operations-kpis span,
.operations-chart span { display: block; color: var(--text-secondary); font-size: var(--fs-small); }
.operations-kpis strong { display: block; margin-top: 8px; color: var(--solution-accent); font-size: var(--fs-h3); }
.operations-kpis b { font: inherit; }
.operations-chart { margin: 12px 0; padding: 18px 18px 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elev); }
.operations-chart > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.operations-chart strong { color: var(--text); font-size: var(--fs-small); }
.operations-chart svg { display: block; width: 100%; height: 126px; margin-top: 10px; overflow: visible; }
.operations-chart-line { fill: none; stroke: var(--solution-accent); stroke-width: 4; stroke-linecap: round; }
.operations-chart-area { fill: var(--operations-soft); }
.operations-ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.operations-ledger span { padding: 11px 8px; border-bottom: 3px solid var(--solution-accent); background: var(--bg-elev); color: var(--text-secondary); font-size: var(--fs-small); text-align: center; }

.solution-shift-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.solution-shift-list article { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.solution-shift-list > article > span { color: var(--solution-accent); font-family: var(--font-mono); font-size: var(--fs-caption); }
.solution-shift-list small { display: block; color: var(--text-muted); font-size: var(--fs-caption); }
.solution-shift-list strong { display: block; margin-top: 5px; color: var(--text); font-size: var(--fs-body); }
.solution-shift-list > article > i { color: var(--solution-accent); font-style: normal; }

.solution-architecture { overflow: hidden; border: 1px solid var(--solution-border); border-radius: 16px; background: var(--card-bg); }
.solution-arch-entry { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.solution-arch-entry span { padding: 15px 10px; border-right: 1px solid var(--border); color: var(--text-secondary); text-align: center; font-size: var(--fs-caption); }
.solution-arch-entry span:last-child { border-right: 0; }
.solution-arch-core { display: grid; grid-template-columns: 220px 1fr; }
.solution-arch-brand { display: flex; flex-direction: column; justify-content: center; padding: 28px; border-right: 1px solid var(--solution-border); background: var(--solution-soft); }
.solution-arch-brand small { color: var(--solution-accent); font-size: var(--fs-caption); }
.solution-arch-brand strong { margin: 10px 0; color: var(--text); font-size: var(--fs-h3); }
.solution-arch-brand p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }
.solution-arch-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.solution-arch-grid article { min-height: 150px; padding: 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.solution-arch-grid article:nth-child(2n) { border-right: 0; }
.solution-arch-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.solution-arch-grid span { color: var(--solution-accent); font-size: var(--fs-caption); }
.solution-arch-grid h3 { margin: 9px 0 8px; color: var(--text); font-size: var(--fs-h4); }
.solution-arch-grid p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }
.solution-arch-output { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding: 15px 20px; border-top: 1px solid var(--solution-border); background: var(--solution-soft); color: var(--text-secondary); font-size: var(--fs-caption); }

.solution-tabs { display: grid; grid-template-columns: 230px 1fr; min-height: 390px; overflow: hidden; border: 1px solid var(--solution-border); border-radius: 16px; background: var(--card-bg); }
.solution-tab-list { display: flex; flex-direction: column; padding: 12px; border-right: 1px solid var(--border); background: var(--bg-elev); }
.solution-tab-list button { position: relative; width: 100%; padding: 15px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer; }
.solution-tab-list button[aria-selected="true"] { background: var(--solution-soft); color: var(--solution-accent); font-weight: var(--fw-bold); }
.solution-tab-list button:focus-visible { outline: 2px solid var(--solution-accent); outline-offset: 2px; }
.solution-tab-panels { padding: 34px; }
.solution-tab-panel { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(250px, .88fr); gap: 38px; }
.solution-tab-panel[hidden] { display: none; }
.solution-tab-panel small { color: var(--solution-accent); font-size: var(--fs-caption); }
.solution-tab-panel h3 { margin: 9px 0 12px; color: var(--text); font-size: var(--fs-h3); }
.solution-tab-panel p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }
.solution-tab-panel ul { margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--solution-border); list-style: none; }
.solution-tab-panel li { position: relative; padding: 8px 0 8px 18px; color: var(--text-secondary); font-size: var(--fs-small); }
.solution-tab-panel li::before { content: ''; position: absolute; top: 15px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--solution-accent); }

.pain-category-map { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 22px; }
.pain-category-map span,
.pain-detail-grid article { --pain-color: var(--cat-color-1); --pain-soft: var(--cat-soft-1); --pain-border: var(--cat-border-1); }
.pain-category-map [data-cat="2"], .pain-detail-grid [data-cat="2"] { --pain-color: var(--cat-color-2); --pain-soft: var(--cat-soft-2); --pain-border: var(--cat-border-2); }
.pain-category-map [data-cat="3"], .pain-detail-grid [data-cat="3"] { --pain-color: var(--cat-color-3); --pain-soft: var(--cat-soft-3); --pain-border: var(--cat-border-3); }
.pain-category-map [data-cat="4"], .pain-detail-grid [data-cat="4"] { --pain-color: var(--cat-color-4); --pain-soft: var(--cat-soft-4); --pain-border: var(--cat-border-4); }
.pain-category-map [data-cat="5"], .pain-detail-grid [data-cat="5"] { --pain-color: var(--cat-color-5); --pain-soft: var(--cat-soft-5); --pain-border: var(--cat-border-5); }
.pain-category-map [data-cat="6"], .pain-detail-grid [data-cat="6"] { --pain-color: var(--cat-color-6); --pain-soft: var(--cat-soft-6); --pain-border: var(--cat-border-6); }
.pain-category-map [data-cat="7"], .pain-detail-grid [data-cat="7"] { --pain-color: var(--cat-color-7); --pain-soft: var(--cat-soft-7); --pain-border: var(--cat-border-7); }
.pain-category-map span { padding: 13px 6px; border: 1px solid var(--pain-border); border-radius: 9px; background: var(--pain-soft); color: var(--text-secondary); text-align: center; font-size: var(--fs-small); }
.pain-category-map strong { display: block; margin-bottom: 4px; color: var(--pain-color); font-family: var(--font-mono); font-size: var(--fs-h4); }
.pain-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pain-detail-grid article { min-height: 250px; padding: 20px; border: 1px solid var(--pain-border); border-top: 4px solid var(--pain-color); border-radius: 12px; background: linear-gradient(145deg, var(--pain-soft), var(--card-bg) 40%); }
.pain-detail-grid span { color: var(--pain-color); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.pain-detail-grid h3 { margin: 12px 0 9px; color: var(--text); font-size: var(--fs-h4); }
.pain-detail-grid p { margin: 0 0 14px; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }
.pain-detail-grid strong { display: block; padding-top: 12px; border-top: 1px solid var(--pain-border); color: var(--text); font-size: var(--fs-small); line-height: var(--lh-base); }

.deployment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.deployment-card { position: relative; padding: 26px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.deployment-card.is-recommended { border-color: var(--solution-border); box-shadow: 0 0 42px var(--solution-glow); }
.deployment-card > span { display: inline-block; color: var(--solution-accent); font-size: var(--fs-caption); }
.deployment-card h3 { margin: 10px 0 16px; color: var(--text); font-size: var(--fs-h4); }
.deployment-card dl { margin: 0; }
.deployment-card dl div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.deployment-card dt { color: var(--text-muted); font-size: var(--fs-caption); }
.deployment-card dd { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }

.solution-tool-grid,
.solution-audience-grid,
.solution-delivery-grid { display: grid; gap: 14px; }
.solution-tool-grid { grid-template-columns: repeat(4, 1fr); }
.solution-audience-grid { grid-template-columns: repeat(3, 1fr); }
.solution-delivery-grid { grid-template-columns: repeat(3, 1fr); }
.solution-card-simple { min-height: 170px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.solution-card-simple > span { color: var(--solution-accent); font-family: var(--font-mono); font-size: var(--fs-caption); }
.solution-card-simple h3 { margin: 13px 0 8px; color: var(--text); font-size: var(--fs-h4); }
.solution-card-simple p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }

.business-loop { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--solution-border); border-radius: 16px; background: var(--card-bg); }
.business-loop article { position: relative; min-height: 190px; padding: 24px 20px; border-right: 1px solid var(--border); }
.business-loop article:last-child { border-right: 0; }
.business-loop article:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -8px; z-index: 1; color: var(--solution-accent); transform: translateY(-50%); }
.business-loop span { color: var(--solution-accent); font-family: var(--font-mono); font-size: var(--fs-caption); }
.business-loop h3 { margin: 15px 0 9px; color: var(--text); font-size: var(--fs-body); }
.business-loop p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }

.revenue-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.revenue-flow article { min-height: 150px; padding: 20px; border-top: 3px solid var(--solution-accent); border-radius: 0 0 12px 12px; background: var(--card-bg); }
.revenue-flow small { color: var(--text-muted); font-size: var(--fs-caption); }
.revenue-flow strong { display: block; margin: 12px 0 7px; color: var(--text); font-size: var(--fs-body); }
.revenue-flow span { color: var(--solution-accent); font-size: var(--fs-caption); }

.solution-final .cta-box { display: grid; grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr); align-items: start; gap: 56px; padding: 44px; border-color: var(--solution-border); background: linear-gradient(135deg, var(--solution-soft), var(--card-bg) 50%); text-align: left; }
.solution-cta-copy h2 { margin: 14px 0; color: var(--text); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.solution-cta-copy p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }
.solution-contact { padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.solution-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); }
.solution-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.solution-form-actions a { color: var(--c-link); font-size: var(--fs-small); }
.solution-form-status { min-height: 22px; margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }

@media (max-width: 1100px) {
  .solution-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .business-loop { grid-template-columns: repeat(3, 1fr); }
  .business-loop article:nth-child(3) { border-right: 0; }
  .business-loop article:nth-child(n+4) { border-top: 1px solid var(--border); }
  .revenue-flow { grid-template-columns: repeat(3, 1fr); }
  .solution-final .cta-box { grid-template-columns: minmax(0, .8fr) minmax(450px, 1.2fr); gap: 34px; }
}

@media (max-width: 900px) {
  .solution-arch-core { grid-template-columns: 1fr; }
  .solution-arch-brand { border-right: 0; border-bottom: 1px solid var(--solution-border); }
  .solution-tabs { grid-template-columns: 1fr; min-height: 0; }
  .solution-tab-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .solution-tab-list button { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .solution-tab-panel { grid-template-columns: 1fr; gap: 24px; }
  .solution-tab-panel ul { padding: 18px 0 0; border-top: 1px solid var(--solution-border); border-left: 0; }
  .deployment-grid { grid-template-columns: 1fr; }
  .solution-audience-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-delivery-grid { grid-template-columns: repeat(2, 1fr); }
  .pain-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-final .cta-box { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .solution-shift-list article { grid-template-columns: 34px 1fr; gap: 10px 14px; }
  .solution-shift-list article > div { grid-column: 2; }
  .solution-shift-list article > i { grid-column: 2; transform: rotate(90deg); }
  .solution-arch-entry { grid-template-columns: repeat(2, 1fr); }
  .solution-arch-entry span:nth-child(2) { border-right: 0; }
  .solution-arch-entry span:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .pain-category-map { grid-template-columns: repeat(2, 1fr); }
  .pain-detail-grid { grid-template-columns: 1fr; }
  .business-loop,
  .revenue-flow { grid-template-columns: 1fr; }
  .business-loop article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .business-loop article:nth-child(n+4) { border-top: 0; }
  .business-loop article:last-child { border-bottom: 0; }
  .business-loop article:not(:last-child)::after { content: '↓'; top: auto; right: auto; bottom: -13px; left: 50%; transform: translateX(-50%); }
  .solution-final .cta-box { padding: 30px 22px; }
  .solution-contact { padding: 18px; }
}

@media (max-width: 560px) {
  .enterprise-audience,
  .enterprise-spaces,
  .enterprise-core-features,
  .operations-kpis,
  .operations-ledger,
  .solution-arch-grid,
  .solution-tool-grid,
  .solution-audience-grid,
  .solution-delivery-grid { grid-template-columns: 1fr; }
  .solution-arch-grid article,
  .solution-arch-grid article:nth-child(2n),
  .solution-arch-grid article:nth-last-child(-n+2) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .solution-arch-grid article:last-child { border-bottom: 0; }
  .solution-tab-panels { padding: 24px 18px; }
  .solution-form-actions { align-items: stretch; flex-direction: column; }
  .solution-form-actions a { text-align: center; }
  .enterprise-foundation { padding: 8px 0; }
  .enterprise-connector { width: 60%; }
  .enterprise-model-boundary { grid-template-columns: 1fr; }
  .enterprise-model-boundary span:last-child { text-align: left; }
  .enterprise-model-boundary strong { justify-self: start; }
  .operations-chart > div { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .enterprise-connector i { animation: none; opacity: .75; }
}