.product-selector { margin-bottom: 26px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.product-tab { min-height: 104px; padding: 16px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; color: var(--muted-light); background: var(--ink-soft); border: 1px solid var(--line-light); border-radius: 12px; cursor: pointer; text-align: left; transition: color .3s, background .3s, border-color .3s, transform .3s; }
.product-tab:hover { transform: translateY(-3px); color: var(--white); border-color: rgba(255,112,64,.4); }
.product-tab.active { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.product-tab > span { grid-row: 1 / 3; color: var(--orange-bright); font: 600 12px/1 var(--display); }
.product-tab.active > span { color: var(--red); }
.product-tab strong { align-self: end; font: 600 14px/1 var(--display); white-space: nowrap; }
.product-tab small { align-self: start; margin-top: 7px; font-size: 12px; }
.product-panel { padding: 52px; color: var(--ink); background: var(--paper); border-radius: 28px; }
.product-panel[hidden] { display: none; }
.panel-header { display: grid; grid-template-columns: 1fr 180px; align-items: center; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.status-row { margin-bottom: 23px; display: flex; flex-wrap: wrap; gap: 8px; }
.status { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.status-current, .status-solution { color: #456744; background: #dfeada; }
.status-poc { color: #785c22; background: #f3e5bc; }
.status-engineering, .status-research { color: #8f3a23; background: #f1d7ca; }
.status-partner { color: #655590; background: #e7e0f2; }
.product-overline { margin: 0 0 10px; color: var(--orange); font: 600 12px/1 var(--display); letter-spacing: .13em; }
.panel-header h3 { margin: 0; font: 700 clamp(38px, 4.5vw, 62px)/1 var(--display); letter-spacing: -.045em; }
html[lang="zh-CN"] .panel-header h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.14; letter-spacing: -.035em; }
.panel-lead { max-width: 920px; margin: 20px 0 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.product-emblem { position: relative; width: 155px; height: 155px; display: flex; align-items: center; justify-content: center; color: var(--white); background: var(--ink); border-radius: 50%; overflow: hidden; box-shadow: 0 22px 45px rgba(28,18,14,.16); }
.product-emblem::before, .product-emblem::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.product-emblem::before { inset: 13px; }
.product-emblem::after { inset: 28px; border-style: dashed; animation: orbitRotate 18s linear infinite; }
.product-emblem span, .product-emblem strong { position: relative; z-index: 2; font: 700 40px/1 var(--display); }
.product-emblem span { color: var(--orange-bright); }
.product-emblem i { position: absolute; width: 120px; height: 1px; background: var(--gold); transform: rotate(-35deg); }
.emblem-si span, .emblem-si strong { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 32px; }
.emblem-x strong { margin-left: 4px; font-size: 21px; }
.panel-value-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.panel-value-grid > div { min-height: 208px; padding: 26px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.panel-value-grid > div:last-child { border-right: 0; }
.panel-value-grid span { color: var(--orange); font-size: 12px; }
.panel-value-grid strong { margin: auto 0 10px; font: 600 18px/1.35 var(--display); }
.panel-value-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.m2-metrics { margin-top: 26px; padding: 30px; color: var(--white); background: var(--ink); border-radius: 18px; }
.metric-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.metric-head span { color: var(--orange-bright); font-size: 12px; letter-spacing: .1em; }
.metric-head h4 { margin: 8px 0 0; font: 600 24px/1.1 var(--display); }
.metric-head p { max-width: 440px; margin: 0; color: var(--muted-light); font-size: 12px; text-align: right; }
.tier-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tier-card { min-width: 0; padding: 20px; background: var(--ink-soft); border: 1px solid var(--line-light); border-radius: 12px; }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier-top strong { font: 600 13px/1 var(--display); }
.tier-top span { color: var(--muted-light); font-size: 12px; }
.tier-bar { height: 3px; margin: 16px 0 19px; background: rgba(255,255,255,.08); }
.tier-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width 1.2s ease; }
.product-panel.active .tier-bar i { width: var(--tier); }
.tier-card dl { margin: 0; }
.tier-card dl div { padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-light); }
.tier-card dt { color: var(--muted-light); font-size: 12px; }
.tier-card dd { margin: 0; font: 600 12px/1 var(--display); }
.tier-card > small { min-height: 43px; margin-top: 14px; display: block; color: var(--gold); font-size: 12px; }
.evidence-note { margin: 22px 0 0; color: var(--muted-light); font-size: 12px; }
.delivery-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.delivery-grid > div, .feature-grid.compact > div { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.delivery-grid span { color: var(--orange); font: 600 12px/1 var(--display); }
.delivery-grid h4, .feature-grid h4 { margin: 28px 0 9px; font: 600 17px/1.2 var(--display); }
.delivery-grid p, .feature-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.boundary { margin-top: 26px; padding: 20px 23px; display: grid; grid-template-columns: 105px 1fr; gap: 20px; background: #e8dfd3; border-left: 3px solid var(--orange); }
.boundary strong { color: var(--orange); font-size: 13px; }
.boundary p { margin: 0; color: var(--muted); font-size: 13px; }
.m5-flow, .si-workflow, .rag-architecture { margin-top: 28px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; }
.m5-flow > div, .si-workflow > div, .rag-architecture > div { flex: 1; display: flex; flex-direction: column; }
.m5-flow > div span, .si-workflow > div span { color: var(--orange); font: 600 12px/1 var(--display); }
.m5-flow > div strong, .si-workflow > div strong, .rag-architecture > div span { margin-top: 7px; font-size: 13px; }
.si-workflow > div small, .rag-architecture > div small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.m5-flow > i, .si-workflow > i, .rag-architecture > i { width: 23px; height: 1px; flex: 0 0 auto; background: var(--orange); }
.number-showcase { margin-top: 18px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.number-showcase > div { min-height: 145px; padding: 24px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.number-showcase > div > span { color: var(--muted); font-size: 12px; }
.number-showcase > div > strong { margin: auto 0 8px; color: var(--orange); font: 600 22px/1 var(--display); overflow-wrap: anywhere; }
.number-showcase > div > small { color: var(--muted); font-size: 12px; }
.number-primary { grid-row: span 3; color: var(--white); background: var(--orange) !important; border-color: var(--orange) !important; }
.number-primary > span, .number-primary > small { color: rgba(255,255,255,.74) !important; }
.number-primary > strong { color: var(--white) !important; font-size: clamp(32px, 4vw, 55px) !important; }
.use-bound-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.use-list { padding: 25px; color: var(--white); background: var(--ink); border-radius: 12px; }
.use-list.muted { background: var(--ink-soft); }
.use-list h4 { margin: 0 0 18px; color: var(--gold); font: 600 14px/1 var(--display); }
.use-list ul { margin: 0; padding: 0; list-style: none; }
.use-list li { position: relative; padding: 7px 0 7px 16px; color: var(--muted-light); border-bottom: 1px solid var(--line-light); font-size: 12px; }
.use-list li::before { content: ""; position: absolute; top: 14px; left: 0; width: 5px; height: 5px; background: var(--orange-bright); border-radius: 50%; }
.trust-layers { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trust-layers article { min-height: 178px; padding: 20px; display: flex; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.trust-layers article > span { width: 37px; height: 37px; flex: 0 0 auto; display: grid; place-items: center; color: var(--white); background: var(--orange); border-radius: 50%; font: 700 13px/1 var(--display); }
.trust-layers article div { display: flex; flex-direction: column; }
.trust-layers strong { font: 600 13px/1.2 var(--display); }
.trust-layers p { margin: auto 0 0; color: var(--muted); font-size: 12px; }
.feature-grid.compact { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.feature-grid.compact h4 { margin-top: 0; }
.standard-stack { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.standard-stack article { min-height: 155px; padding: 20px; display: flex; flex-direction: column; color: var(--white); background: var(--ink); border-radius: 12px; }
.standard-stack span { color: var(--orange-bright); font-size: 12px; }
.standard-stack strong { margin: 18px 0 8px; font: 600 17px/1 var(--display); }
.standard-stack p { margin: auto 0 0; color: var(--muted-light); font-size: 12px; }
.pqc-products, .xclaw-packages { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pqc-products > div, .xclaw-packages article { min-height: 180px; padding: 23px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.pqc-products span, .xclaw-packages span { color: var(--orange); font: 600 12px/1 var(--display); }
.pqc-products h4, .xclaw-packages h4 { margin: 27px 0 9px; font: 600 15px/1.2 var(--display); }
.pqc-products p, .xclaw-packages p { margin: 0; color: var(--muted); font-size: 12px; }
.principle-row { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.principle-row div { min-height: 110px; padding: 18px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.principle-row div:last-child { border-right: 0; }
.principle-row strong { font-size: 13px; }
.principle-row span { margin-top: auto; color: var(--muted); font-size: 12px; }
.rag-architecture { color: var(--white); background: var(--ink); border: 0; }
.rag-architecture > div span { color: var(--gold); }
.rag-architecture > div small { color: var(--muted-light); }
.rag-architecture > i { background: var(--orange-bright); }
.security-invariants { margin-top: 18px; padding: 26px; color: var(--white); background: var(--orange); border-radius: 12px; }
.security-invariants h4 { margin: 0 0 17px; font: 600 16px/1.2 var(--display); }
.security-invariants > div { display: flex; flex-wrap: wrap; gap: 7px; }
.security-invariants span { padding: 7px 10px; color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 12px; }
html[lang="zh-CN"] .panel-value-grid strong { font-size: 17px; }
html[lang="zh-CN"] .metric-head h4 { font-size: 21px; line-height: 1.2; }
html[lang="zh-CN"] .delivery-grid h4, html[lang="zh-CN"] .feature-grid h4, html[lang="zh-CN"] .standard-stack strong { font-size: 16px; line-height: 1.3; }
html[lang="zh-CN"] .use-list h4 { font-size: 13px; }
html[lang="zh-CN"] .pqc-products h4, html[lang="zh-CN"] .xclaw-packages h4, html[lang="zh-CN"] .security-invariants h4 { font-size: 14px; line-height: 1.3; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .product-panel { animation: none !important; } }
@media (max-width: 640px) { .product-panel.panel-animating { animation-duration: .35s; } }
@media (max-width: 920px) { .metric-head { align-items: flex-start; flex-direction: column; } .metric-head p { text-align: left; } .panel-value-grid > div { border-right: 0; border-bottom: 1px solid var(--line); } .panel-value-grid > div:last-child { border-bottom: 0; } }
@media (max-width: 640px) { .boundary { grid-template-columns: 1fr; gap: 8px; } }

.product-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (max-width: 1100px) { .product-selector { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 8px; } .product-tab { min-width: 150px; flex: 0 0 150px; } }