/* S16 Chinese unified communications architecture. Scoped to the page owner. */
.yuqi-hpc-hybrid.s16-unified-communications-cn {
	--s16-bg: #03050a;
	--s16-panel: #060a14;
	--s16-panel-2: #0a1322;
	--s16-surface: #0c1626;
	--s16-text: #e9eff7;
	--s16-muted: #a3b6ca;
	--s16-faint: #71869b;
	--s16-accent: #5fd3e6;
	--s16-accent-soft: rgba(95, 211, 230, .12);
	--s16-line: rgba(132, 164, 200, .16);
	--s16-line-strong: rgba(140, 170, 200, .32);
	background: var(--s16-bg);
	color: var(--s16-text);
	font-family: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
	line-height: 1.7;
	overflow: hidden;
}

.s16-unified-communications-cn *,
.s16-unified-communications-cn *::before,
.s16-unified-communications-cn *::after { box-sizing: border-box; }
.s16-unified-communications-cn a { color: inherit; text-decoration: none; }
.s16-unified-communications-cn figure,
.s16-unified-communications-cn h1,
.s16-unified-communications-cn h2,
.s16-unified-communications-cn h3,
.s16-unified-communications-cn p,
.s16-unified-communications-cn ul,
.s16-unified-communications-cn ol { margin: 0; }
.s16-unified-communications-cn ul,
.s16-unified-communications-cn ol { padding: 0; }
.s16-unified-communications-cn img { display: block; max-width: 100%; }
.s16-unified-communications-cn :focus-visible { outline: 2px solid #b7f0f5; outline-offset: 3px; }

.s16-shell { width: min(1360px, calc(100% - 80px)); margin-inline: auto; }
.s16-content { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.s16-section { padding: 80px 0; }
.s16-section:nth-of-type(even) { background: var(--s16-panel); }

.s16-hero {
	position: relative;
	min-height: calc(100svh - var(--f-header-height, 72px));
	isolation: isolate;
	overflow: hidden;
}
.s16-hero-media,
.s16-hero-scrim { position: absolute; inset: 0; }
.s16-hero-media { z-index: -2; }
.s16-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; filter: brightness(.38) saturate(.72); }
.s16-hero-scrim { z-index: -1; background: linear-gradient(90deg, rgba(3, 5, 10, .98), rgba(3, 5, 10, .84) 43%, rgba(3, 5, 10, .24)), linear-gradient(0deg, rgba(3, 5, 10, .96), transparent 68%); }
.s16-hero-inner { min-height: inherit; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; padding: 140px 0 58px; }
.s16-hero-copy { max-width: 820px; }
.s16-eyebrow {
	color: var(--s16-accent);
	font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.s16-hero .s16-eyebrow { display: flex; align-items: center; gap: 10px; }
.s16-hero .s16-eyebrow > span:first-child { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--s16-accent); box-shadow: 0 0 0 5px rgba(95, 211, 230, .13); }
.s16-eyebrow-no { display: inline-block; margin-right: 11px; color: #8fa7ba; }
.s16-hero h1 { display: grid; gap: 2px; margin-top: 28px; color: #f5f8fc; font-size: clamp(58px, 6.6vw, 92px); font-weight: 700; letter-spacing: -.055em; line-height: 1.02; }
.s16-hero h1 span { display: block; }
.s16-hero-lead { max-width: 760px; margin-top: 28px !important; color: #c4d2df; font-size: 20px; line-height: 1.82; }
.s16-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 27px; }
.s16-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 21px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.s16-button--primary { background: #69c2cf !important; color: #09232d !important; }
.s16-button--primary:hover, .s16-button--primary:focus-visible { background: #8bdae4 !important; transform: translateY(-2px); }
.s16-button--quiet { border-color: rgba(233, 239, 247, .32); color: #eef5fb; }
.s16-button--quiet:hover, .s16-button--quiet:focus-visible { border-color: var(--s16-accent); color: var(--s16-accent); }
.s16-hero-meta { margin-top: 20px !important; color: #9bb0c2; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }
.s16-hero-note { max-width: 230px; padding-left: 16px; border-left: 1px solid rgba(95, 211, 230, .6); color: #a9becf; font-size: 13px; line-height: 1.7; }

/* The global service guard raises generic paragraphs to 16px. The compact
 * metadata scale is intentional for S16's Hero and section eyebrows. */
.s16-unified-communications-cn p.s16-eyebrow { font-size: 11px !important; line-height: 1.6 !important; }
.s16-unified-communications-cn .s16-hero p.s16-hero-meta { font-size: 11px !important; line-height: 1.7 !important; }

.s16-section-head { max-width: 760px; }
.s16-section-head h2 { margin-top: 18px; color: #f1f5fa; font-size: clamp(32px, 4vw, 42px); font-weight: 650; letter-spacing: -.045em; line-height: 1.16; }
.s16-section-head > p:last-child { margin-top: 22px; color: var(--s16-muted); font-size: 17px; line-height: 1.85; }
.s16-section-head--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); align-items: end; gap: 60px; max-width: none; }
.s16-section-head--split > p:last-child { margin-top: 0; }
.s16-section-head--wide { max-width: 830px; }

.s16-two-column { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 80px; align-items: end; }
.s16-boundary { padding: 25px 26px; border-left: 2px solid var(--s16-accent); background: linear-gradient(135deg, rgba(95, 211, 230, .08), transparent 70%); }
.s16-boundary strong { display: block; color: var(--s16-text); font-size: 18px; line-height: 1.4; }
.s16-boundary p { margin-top: 12px; color: var(--s16-muted); font-size: 15px; line-height: 1.8; }
.s16-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 58px; border-top: 1px solid var(--s16-line); }
.s16-reason-card { min-height: 190px; padding: 23px 24px 20px 0; border-bottom: 1px solid var(--s16-line); }
.s16-reason-card + .s16-reason-card { padding-left: 24px; border-left: 1px solid var(--s16-line); }
.s16-reason-card > span, .s16-service-card > span { color: var(--s16-accent); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }
.s16-reason-card h3 { margin-top: 40px; color: var(--s16-text); font-size: 21px; font-weight: 600; line-height: 1.35; }
.s16-reason-card p { margin-top: 12px; color: var(--s16-muted); font-size: 15px; line-height: 1.82; }

.s16-diagram { margin-top: 44px; padding: 20px; border: 1px solid var(--s16-line); background: #07101d; }
.s16-diagram-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--s16-line); }
.s16-diagram-bar p { display: flex; align-items: center; gap: 10px; color: var(--s16-muted); font-size: 13px; font-weight: 650; letter-spacing: .04em; }
.s16-diagram-bar p span { width: 8px; height: 8px; border-radius: 50%; background: var(--s16-accent); box-shadow: 0 0 0 5px rgba(95, 211, 230, .12); }
.s16-diagram-bar button { padding: 8px 12px; border: 1px solid rgba(95, 211, 230, .45); border-radius: 5px; background: transparent; color: var(--s16-text); font: inherit; font-size: 12px; cursor: pointer; }
.s16-diagram-bar button:hover, .s16-diagram-bar button:focus-visible { border-color: var(--s16-accent); color: var(--s16-accent); }
.s16-flow-canvas { position: relative; min-height: 500px; margin-top: 24px; padding: 28px 20px 32px; overflow: hidden; }
.s16-flow-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s16-flow-lines path { fill: none; stroke: var(--s16-accent); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; marker-end: url(#s16-arrow); }
.s16-flow-lines path[data-s16-path="signaling"] { stroke: #a3b6ca; stroke-dasharray: 4 6; marker-end: none; }
.s16-flow-lines path[data-s16-path="edge"], .s16-flow-lines path[data-s16-path="branch"] { stroke: #8da9bd; }
.s16-flow-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(210px, .9fr) minmax(230px, 1.05fr) minmax(280px, 1.3fr); grid-template-rows: auto 140px; align-items: center; gap: 42px 56px; min-height: 440px; }
.s16-terminal-cluster, .s16-access, .s16-control, .s16-edge, .s16-branch { position: relative; border: 1px solid var(--s16-line-strong); background: rgba(10, 19, 34, .96); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.s16-terminal-cluster { grid-column: 1; grid-row: 1; padding: 21px; }
.s16-access { grid-column: 2; grid-row: 1; min-height: 142px; padding: 22px; }
.s16-control { grid-column: 3; grid-row: 1; min-height: 190px; padding: 22px; }
.s16-edge { grid-column: 1 / 3; grid-row: 2; justify-self: center; width: min(100%, 430px); padding: 19px 22px; }
.s16-branch { grid-column: 3; grid-row: 2; padding: 19px 22px; }
.s16-node-index { display: block; color: var(--s16-accent); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }
.s16-terminal-cluster > strong, .s16-access > strong, .s16-control > strong, .s16-edge > strong, .s16-branch > strong { display: block; margin-top: 21px; color: var(--s16-text); font-size: 18px; font-weight: 600; line-height: 1.35; }
.s16-terminal-cluster > strong { margin-top: 18px; }
.s16-access > small, .s16-control > small, .s16-edge > small, .s16-branch > small { display: block; margin-top: 9px; color: var(--s16-muted); font-size: 13px; line-height: 1.6; }
.s16-terminal-list { display: grid; gap: 8px; margin-top: 18px; }
.s16-terminal-list span { padding: 9px 11px; border-left: 2px solid var(--s16-accent); background: rgba(95, 211, 230, .06); color: #d3e0ea; font-size: 13px; }
.s16-control-lanes { display: grid; gap: 8px; margin-top: 17px; }
.s16-control-lanes span { display: block; padding: 8px 10px; border-left: 2px solid var(--s16-accent); background: rgba(95, 211, 230, .07); color: #c4d2df; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.s16-control-lanes span + span { border-left-color: #a3b6ca; background: rgba(163, 182, 202, .06); }
.s16-diagram-note { margin-top: 18px !important; color: var(--s16-muted); font-size: 14px; line-height: 1.75; }
.s16-diagram-note strong { color: var(--s16-text); }
.s16-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.s16-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 54px; border-top: 1px solid var(--s16-line); }
.s16-service-card { min-height: 220px; padding: 25px 24px 25px 0; border-bottom: 1px solid var(--s16-line); }
.s16-service-card:nth-child(3n + 2), .s16-service-card:nth-child(3n + 3) { padding-left: 24px; border-left: 1px solid var(--s16-line); }
.s16-service-card h3 { margin-top: 36px; color: var(--s16-text); font-size: 19px; font-weight: 600; line-height: 1.4; }
.s16-service-card p { margin-top: 10px; color: var(--s16-muted); font-size: 15px; line-height: 1.8; }

.s16-delivery { background: var(--s16-panel); }
.s16-delivery-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 78px; align-items: start; }
.s16-delivery-copy h2 { margin-top: 18px; color: var(--s16-text); font-size: clamp(32px, 4vw, 42px); letter-spacing: -.045em; line-height: 1.16; }
.s16-delivery-copy > p:not(.s16-eyebrow) { margin-top: 22px; color: var(--s16-muted); font-size: 16px; line-height: 1.9; }
.s16-delivery-copy a { color: var(--s16-accent); text-decoration: underline; text-decoration-color: rgba(95, 211, 230, .42); text-underline-offset: 3px; }
.s16-delivery-copy ul { display: grid; gap: 12px; margin-top: 26px; list-style: none; }
.s16-delivery-copy li { position: relative; padding-left: 21px; color: #c8d7e3; font-size: 15px; line-height: 1.7; }
.s16-delivery-copy li::before { position: absolute; top: .75em; left: 0; width: 7px; height: 1px; background: var(--s16-accent); content: ''; }
.s16-delivery-media { align-self: start; width: 100%; max-width: 560px; margin: 0; padding: 10px; border: 1px solid var(--s16-line); background: #07101d; box-sizing: border-box; }
.s16-delivery-media img { display: block; width: 100%; height: auto !important; max-height: 400px; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
.s16-delivery-media figcaption { padding: 13px 5px 3px; color: var(--s16-muted); font-size: 13px; line-height: 1.65; }

.s16-operations { position: relative; isolation: isolate; overflow: hidden; background: var(--s16-bg); }
.s16-operations-backdrop, .s16-operations-scrim { position: absolute; inset: 0; }
.s16-operations-backdrop { z-index: -2; background: url('../images/s16-unified-communications/unified-communications-detail.webp') center / cover; filter: grayscale(1); opacity: .14; }
.s16-operations-scrim { z-index: -1; background: linear-gradient(90deg, rgba(3, 5, 10, .98), rgba(3, 5, 10, .76) 60%, rgba(3, 5, 10, .9)); }
.s16-operations-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: 80px; align-items: end; }
.s16-operations-callout { padding: 24px 26px; border: 1px solid rgba(95, 211, 230, .3); background: rgba(6, 10, 20, .7); }
.s16-operations-callout strong { display: block; color: #dff7fb; font-size: 17px; line-height: 1.4; }
.s16-operations-callout p { margin-top: 10px; color: var(--s16-muted); font-size: 15px; line-height: 1.8; }

.s16-faq { padding-top: 64px; }
.s16-faq-list { margin-top: 36px; border-top: 1px solid var(--s16-line); }
.s16-faq-list details { border-bottom: 1px solid var(--s16-line); }
.s16-faq-list summary { position: relative; padding: 21px 42px 21px 0; color: var(--s16-text); font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.s16-faq-list summary::-webkit-details-marker { display: none; }
.s16-faq-list summary::after { position: absolute; top: 20px; right: 5px; color: var(--s16-accent); content: '+'; font-size: 22px; font-weight: 400; line-height: 1; }
.s16-faq-list details[open] summary::after { content: '−'; }
.s16-faq-list details p { max-width: 840px; padding: 0 45px 22px 0; color: var(--s16-muted); font-size: 15px; line-height: 1.85; }

.s16-contact { padding: 80px 0 96px; border-top: 1px solid var(--s16-line); background: var(--s16-panel-2); }
.s16-contact-inner { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.s16-contact h2 { margin-top: 18px; color: var(--s16-text); font-size: clamp(32px, 4vw, 48px); letter-spacing: -.05em; line-height: 1.1; }
.s16-contact p:last-child { max-width: 680px; margin-top: 19px; color: var(--s16-muted); font-size: 16px; line-height: 1.8; }
.s16-contact .s16-button { flex: 0 0 auto; }

.s16-unified-communications-cn.s16-motion-ready [data-s16-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.s16-unified-communications-cn.s16-motion-ready [data-s16-reveal].is-visible,
.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero [data-s16-reveal] { opacity: 1; transform: none; }
.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero [data-s16-reveal]:nth-child(2) { transition-delay: .08s; }
.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero [data-s16-reveal]:nth-child(3) { transition-delay: .14s; }
.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero [data-s16-reveal]:nth-child(4) { transition-delay: .2s; }
.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero [data-s16-reveal]:nth-child(5) { transition-delay: .25s; }
.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero-note { transition-delay: .3s; }

.s16-unified-communications-cn.s16-motion-ready .s16-diagram.is-looping .s16-flow-lines path { animation: s16-path-loop 8.4s ease-in-out infinite; animation-play-state: paused; }
.s16-unified-communications-cn.s16-motion-ready .s16-diagram.is-looping.is-flow-running .s16-flow-lines path { animation-play-state: running; }
.s16-unified-communications-cn.s16-motion-ready .s16-diagram.is-looping .s16-flow-lines path[data-s16-path="media"] { animation-delay: .1s; }
.s16-unified-communications-cn.s16-motion-ready .s16-diagram.is-looping .s16-flow-lines path[data-s16-path="signaling"] { animation-delay: .18s; }
.s16-unified-communications-cn.s16-motion-ready .s16-diagram.is-looping .s16-flow-lines path[data-s16-path="edge"],
.s16-unified-communications-cn.s16-motion-ready .s16-diagram.is-looping .s16-flow-lines path[data-s16-path="branch"] { animation-delay: .28s; }
@keyframes s16-path-loop {
	0%, 8% { stroke-dashoffset: 100; opacity: .35; }
	34%, 68% { stroke-dashoffset: 0; opacity: 1; }
	88%, 100% { stroke-dashoffset: 100; opacity: .35; }
}

@media (max-width: 800px) {
	.s16-shell, .s16-content { width: min(100% - 40px, 720px); }
	.s16-hero { min-height: 0; }
	.s16-hero-inner { min-height: 0; display: block; padding: 90px 0 44px; }
	.s16-hero-copy { max-width: none; }
	.s16-hero h1 { margin-top: 24px; font-size: 48px; line-height: 1.06; }
	.s16-hero-lead { margin-top: 22px !important; font-size: 17px; line-height: 1.78; }
	.s16-hero-note { display: none; }
	.s16-section { padding: 48px 0; }
	.s16-section-head--split, .s16-two-column, .s16-delivery-grid, .s16-operations-inner { display: block; }
	.s16-section-head--split > p:last-child { margin-top: 20px; }
	.s16-section-head h2, .s16-delivery-copy h2 { margin-top: 18px; font-size: 32px; }
	.s16-section-head > p:last-child, .s16-delivery-copy > p:not(.s16-eyebrow), .s16-contact p:last-child { margin-top: 18px; font-size: 15px; line-height: 1.82; }
	.s16-boundary { margin-top: 32px; }
	.s16-reason-grid { grid-template-columns: 1fr; margin-top: 38px; }
	.s16-reason-card, .s16-reason-card + .s16-reason-card { min-height: 0; padding: 20px 0; border-left: 0; }
	.s16-reason-card h3 { margin-top: 24px; font-size: 19px; }
	.s16-diagram { margin-top: 32px; padding: 14px; }
	.s16-diagram-bar { align-items: flex-start; flex-direction: column; gap: 14px; }
	.s16-diagram-bar button { width: 100%; }
	.s16-flow-canvas { min-height: 0; padding: 22px 5px 24px; }
	.s16-flow-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; min-height: 0; }
	.s16-terminal-cluster { grid-column: 1 / -1; grid-row: 1; width: 100%; }
	.s16-access { grid-column: 1 / -1; grid-row: 2; width: 100%; }
	.s16-control { grid-column: 1 / -1; grid-row: 3; width: 100%; }
	.s16-edge, .s16-branch { width: 100%; min-width: 0; padding: 15px; }
	.s16-edge { grid-column: 1; grid-row: 4; }
	.s16-branch { grid-column: 2; grid-row: 4; }
	.s16-terminal-cluster, .s16-access, .s16-control { padding: 18px; }
	.s16-flow-lines { z-index: 0; }
	.s16-terminal-cluster > strong, .s16-access > strong, .s16-control > strong { margin-top: 15px; font-size: 17px; }
	.s16-edge > strong, .s16-branch > strong { margin-top: 14px; font-size: 16px; }
	.s16-control-lanes { margin-top: 14px; }
	.s16-service-grid { grid-template-columns: 1fr; margin-top: 34px; }
	.s16-service-card, .s16-service-card:nth-child(3n + 2), .s16-service-card:nth-child(3n + 3) { min-height: 0; padding: 21px 0; border-left: 0; }
	.s16-service-card h3 { margin-top: 25px; font-size: 18px; }
	.s16-delivery-grid { display: flex; flex-direction: column; gap: 30px; }
	.s16-delivery-media { width: 100%; max-width: none; }
	.s16-operations-callout { margin-top: 30px; }
	.s16-faq { padding-top: 48px; }
	.s16-contact { padding: 56px 0 72px; }
	.s16-contact-inner { display: block; }
	.s16-contact .s16-button { margin-top: 28px; }
}

@media (max-width: 430px) {
	.s16-shell, .s16-content { width: calc(100% - 32px); }
	.s16-hero h1 { font-size: 46px; }
	.s16-flow-canvas { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.s16-unified-communications-cn *,
	.s16-unified-communications-cn *::before,
	.s16-unified-communications-cn *::after { animation: none !important; transition: none !important; }
	.s16-unified-communications-cn.s16-motion-ready [data-s16-reveal],
	.s16-unified-communications-cn.s16-motion-ready.s16-hero-visible .s16-hero [data-s16-reveal] { opacity: 1; transform: none; }
	.s16-flow-lines path { stroke-dashoffset: 0; }
}

/* If JavaScript is unavailable, no opacity or transform gate is introduced. */
.flow-batch-diagram[data-flow-diagram] {
	width: 100%;
	margin: 32px 0 0;
	border-radius: 16px;
	overflow: hidden;
}

.flow-batch-diagram__link {
	display: block;
	border-radius: inherit;
}

.flow-batch-diagram img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: inherit;
}