/* ponytail: 当前文案的本地字体子集；新增文案后更新子集，缺字由中文字体回退。 */
@font-face {
  font-family: "Noto Sans SC";
  src: url("assets/noto-sans-sc.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("assets/noto-sans-sc-gallery.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+6C5F, U+957F;
}

:root {
  --blue: #1e4d8c;
  --blue-dark: #13345b;
  --green: #147d45;
  --ink: #182d42;
  --muted: #5b6b7a;
  --surface: #f3f7fa;
  --line: #dce5eb;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; color: var(--ink); background: #fff; font: 400 16px/1.8 "Noto Sans SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
::selection { color: var(--blue-dark); background: #d9eddd; }
h1, h2, h3, p, figure, dl { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.3vw, 64px); line-height: 1.32; letter-spacing: -.045em; }
h2 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.45; letter-spacing: -.035em; }
h3 { font-size: 23px; line-height: 1.5; letter-spacing: -.025em; }
.container { width: min(calc(100% - 80px), var(--container)); margin-inline: auto; }
.section { padding-block: 96px; }
.home-nic-summary, .about-section { padding-block: 80px; }
.eyebrow { color: var(--blue); font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.8; margin-bottom: 18px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20; background: var(--blue-dark); color: white; padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 79px; gap: 32px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand-wordmark { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: .09em; color: var(--blue-dark); }
.brand-wordmark small { display: block; font-size: 8px; font-weight: 500; letter-spacing: .14em; margin-top: 8px; color: var(--muted); }
.footer-brand small { display: flex; justify-content: space-between; letter-spacing: 0; }
.site-header .brand { min-width: 0; flex-shrink: 1; padding-block: 8px; }
.site-header .brand img { flex-shrink: 0; width: 44px; height: 44px; }
.site-header .brand-wordmark { display: grid; min-width: 0; font-size: 20px; line-height: 1.2; letter-spacing: .01em; text-align: justify; text-align-last: justify; word-break: keep-all; overflow-wrap: anywhere; }
.site-header .brand-wordmark small { font-family: Arial, sans-serif; font-size: .6em; font-weight: 400; line-height: 1.4; letter-spacing: 0; margin-top: 2px; color: inherit; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 79px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .18s ease; }
.site-nav a::after { content: ""; position: absolute; height: 2px; bottom: 16px; left: 0; right: 0; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .nav-contact { justify-content: center; min-width: 96px; min-height: 44px; padding: 7px 14px; color: #baf5d1; background: #8de5b30a; border: 1px solid #639e8a; border-radius: 3px; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.site-nav .nav-contact::after { display: none; }
.site-nav .nav-contact:hover { color: #d7f9e5; background: #174337; border-color: #8de5b3; }
.site-nav .nav-contact[aria-current="page"] { color: #08291d; background: #8de5b3; border-color: #8de5b3; }
.nav-toggle { display: none; flex-shrink: 0; color: var(--blue-dark); background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 8px 12px; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; }
.menu-lines, .menu-lines::after { width: 16px; height: 1.5px; background: currentColor; display: block; }
.menu-lines::after { content: ""; transform: translateY(5px); }
.menu-lines { transform: translateY(-2.5px); }
.hero-description { font-size: 17px; line-height: 1.95; color: var(--muted); margin-top: 25px; }
.button-row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 12px 24px; border-radius: 3px; font-size: 14px; font-weight: 500; transition: background .2s ease, box-shadow .2s ease; }
.button-primary { color: #fff; background: var(--blue); }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 5px 15px #173d6726; }
.button span { font-size: 20px; line-height: 1; }
.text-link { display: inline-flex; align-items: center; gap: 22px; color: var(--blue); font-size: 14px; font-weight: 500; min-height: 44px; }
.text-link:hover { color: var(--green); }
.capability-strip { border-bottom: 1px solid var(--line); }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 25px; }
.strip-grid > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; padding-inline: 32px; border-right: 1px solid var(--line); }
.strip-grid > div:first-child { padding-left: 0; }
.strip-grid > div:last-child { border-right: 0; }
.strip-grid strong { font-size: 16px; font-weight: 500; }
.strip-grid > div > span:last-child { grid-column: 2; font-size: 11px; color: var(--muted); margin-top: 3px; }
.strip-index { font-size: 11px; color: var(--green); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 42px; }
.business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.business-card { --card-accent: #24679a; display: flex; flex-direction: column; border: 1px solid var(--line); padding: 28px 26px 22px; border-radius: 4px; background: #fbfcfd; box-shadow: 0 6px 18px #183e5b04; transition: border-color .22s ease, box-shadow .22s ease, translate .22s ease; }
.business-card:focus-visible { border-color: var(--card-accent); box-shadow: 0 14px 30px #183e5b14; }
.card-number { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.card-visual { height: 190px; margin-block: 14px 22px; display: flex; align-items: center; justify-content: center; position: relative; }
.network-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center 85%; mix-blend-mode: multiply; transform: rotate(-4deg); }
.card-compute { background: #f7f9fc; }
.compute-visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px #183e5b14); }
.card-ip { --card-accent: #24744e; background: #f7faf7; }
.business-card h3 { font-size: 22px; }
.business-card p { color: var(--muted); font-size: 14px; margin-top: 13px; line-height: 1.9; }
.card-link { margin-top: auto; padding-top: 26px; font-size: 13px; font-weight: 500; color: var(--blue); display: flex; justify-content: space-between; }
.card-link > span { transition: translate .22s ease; }
.business-card:focus-visible .card-link > span { translate: 3px -3px; }
.business-illustration { display: block; width: 100%; height: 100%; max-width: 340px; overflow: visible; }
.card-chip-title { fill: var(--card-accent); font: 500 34px/1 Consolas, monospace; letter-spacing: .02em; }
.card-chip-caption { fill: #526d82; font: 8px/1 Consolas, monospace; letter-spacing: .15em; }
.card-circuit { stroke: var(--card-accent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.card-circuit-point { fill: var(--card-accent); opacity: .65; }
.card-module-side { fill: #bed7c7; stroke: #8cb198; }
.card-module rect { fill: #f4fbf6; stroke: #8cb198; }
.card-module text { fill: #32654a; font-size: 12px; font-weight: 500; }
.card-signal { stroke: var(--card-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 12 88; stroke-dashoffset: 100; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .business-card:hover { translate: 0 -4px; border-color: var(--card-accent); box-shadow: 0 14px 30px #183e5b14; }
  .business-card:hover .card-link > span { translate: 3px -3px; }
  .business-card:is(:hover, :focus-visible) .card-signal { animation: card-signal-pass .95s ease-out both; }
}
@keyframes card-signal-pass { 0% { opacity: 0; stroke-dashoffset: 100; } 15%, 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
.feature-section { background: var(--surface); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 56px; align-items: start; }
.feature-heading { grid-column: 2; grid-row: 1; }
.feature-copy { grid-column: 2; grid-row: 2; min-width: 0; }
.feature-visual { grid-column: 1; grid-row: 1 / 3; align-self: center; min-width: 0; }
.feature-image { padding-block: 12px; background: radial-gradient(ellipse at 50% 72%, #dfe9ef80, transparent 68%); }
.feature-image-stage { position: relative; aspect-ratio: 1280 / 550; overflow: hidden; }
.feature-image-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transform: translateX(24px) scale(.985); transition: opacity .14s ease-in, transform .14s ease-in; }
.feature-image-stage img.is-leaving { transform: translateX(-12px) scale(.985); }
.feature-image-stage img.is-selected { opacity: 1; transform: none; transition: opacity .44s ease-out .12s, transform .44s cubic-bezier(.2,.65,.25,1) .12s; }
.feature-image-caption { text-align: center; color: var(--muted); font-size: 11px; margin-top: 12px; }
.feature-playback-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.feature-playback-row > p { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.feature-image-index { font: 11px/1.8 Consolas, monospace; letter-spacing: .08em; }
.feature-playback { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 100px; min-height: 44px; padding: 8px 12px; border: 1px solid #b6c8d7; border-radius: 3px; background: transparent; color: var(--blue); font-size: 12px; transition: background .16s ease, border-color .16s ease; }
.feature-playback[hidden] { display: none; }
.feature-playback:hover { background: #fff; border-color: var(--blue); }
.feature-playback:disabled { cursor: default; color: var(--muted); }
.feature-playback-icon { width: 10px; height: 11px; border-inline: 3px solid currentColor; }
.feature-playback.is-paused .feature-playback-icon { height: 0; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.feature-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.feature-tab { position: relative; display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 14px 16px; border: 1px solid #cbd9e2; border-radius: 4px; color: var(--muted); transition: color .16s ease, background .16s ease, border-color .16s ease; }
.feature-tab-thumb { flex: 0 0 80px; }
.feature-tab-thumb img { width: 100%; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.feature-tab-copy strong, .feature-tab-copy small { display: block; }
.feature-tab-copy strong { font-size: 15px; font-weight: 600; }
.feature-tab-copy small { margin-top: 2px; font-size: 11px; }
.feature-tab:hover { color: var(--blue); background: #ffffff80; }
.feature-tab.is-selected { color: var(--blue); background: #fff; border-color: var(--blue); }
.feature-progress { position: absolute; bottom: -1px; left: -1px; right: -1px; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.feature-load-status { margin-top: 12px; color: var(--muted); font-size: 12px; }
/* 两份内容共用网格单元并参与尺寸计算，切换及字体放大时均不撑动后续栏目。 */
.feature-details { display: grid; }
.feature-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .12s ease-in, transform .12s ease-in, visibility 0s .12s; }
.feature-panel.is-selected { visibility: visible; opacity: 1; transform: none; transition: opacity .24s ease-out .16s, transform .24s ease-out .16s, visibility 0s; }
.feature-panel h3 { color: var(--blue-dark); font-size: 24px; }
.feature-panel > p { color: var(--muted); font-size: 14px; margin-block: 12px 22px; }
.mini-specs { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: end; margin-bottom: 28px; }
.mini-specs dt { font-size: 12px; color: var(--muted); }
.mini-specs dd { margin: 4px 0 0; color: var(--blue-dark); font-size: 18px; font-weight: 500; }
.mini-specs .feature-rate dd { font-size: 36px; letter-spacing: -.04em; line-height: 1.4; }
.feature-rate small { font-size: 14px; letter-spacing: 0; margin-left: 8px; }
.feature-common-spec { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font-size: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.feature-common-spec strong { color: var(--blue-dark); font-weight: 500; margin-left: 8px; }
.feature-product-link { min-height: 48px; padding: 10px 20px; gap: 30px; transition: background .16s ease, box-shadow .16s ease; }
.feature-product-link > span { transition: translate .16s ease; }
.feature-product-link:is(:hover, :focus-visible) > span { translate: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .has-js #network-products:not(.is-entered) .feature-image-stage img.is-selected { opacity: 0; transform: translate(0, 14px) scale(.985); }
}
.about-section { background: var(--surface); }
.about-grid { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); gap: 40px 64px; align-items: start; }
.about-heading h2 { color: var(--blue-dark); font-size: clamp(36px, 3vw, 40px); line-height: 1.35; }
.about-copy { min-width: 0; max-width: 700px; }
.about-intro { color: var(--muted); font-size: 18px; line-height: 1.9; text-align: left; }
.about-copy .text-link { margin-top: 20px; }
.about-copy .text-link, .about-copy .text-link > span { transition: color .16s ease, translate .16s ease; }
.about-copy .text-link:is(:hover, :focus-visible) > span { translate: 3px; }
.about-businesses { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-business { display: flex; flex-direction: column; min-width: 0; min-height: 240px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: border-color .18s ease; }
.about-business:is(:hover, :focus-visible, :focus-within) { border-color: var(--blue); }
.about-business-heading { display: flex; align-items: center; gap: 12px; }
.about-index { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; color: var(--green); background: #edf6f0; border-radius: 6px; font: 12px/1.5 Consolas, monospace; letter-spacing: .04em; }
.about-business h3 { color: var(--blue-dark); font-size: 20px; font-weight: 600; }
.about-business p { color: #4f6171; font-size: 16px; line-height: 1.75; margin-top: 16px; text-align: left; }
.about-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.about-tags li { padding: 3px 8px; border-radius: 3px; background: #eaf0f5; color: #466177; font-size: 12px; line-height: 1.5; }
.about-card-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; color: var(--blue); font-size: 14px; font-weight: 500; }
.about-card-link > span { transition: translate .18s ease; }
.about-business--network { position: relative; }
.about-business--network .about-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.about-business--network .about-card-link:focus-visible { outline: none; }
.about-business--network .about-card-link:focus-visible::after { outline: 3px solid var(--green); outline-offset: 5px; }
.about-tags .about-tag-upcoming { position: relative; z-index: 2; display: flex; padding: 0; background: #f2f2f2; color: #666; }
.about-upcoming-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; cursor: help; }
.about-upcoming-trigger:focus-visible { outline-offset: 2px; }
.about-upcoming-trigger svg { flex-shrink: 0; }
.about-status-tooltip { position: fixed; inset: auto; width: max-content; max-width: min(280px, calc(100vw - 32px)); margin: 0; padding: 10px 12px; border: 0; border-radius: 6px; background: var(--blue-dark); color: #fff; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 20px #0e243a26; }
.about-business:is(:hover, :focus-visible) .about-card-link > span { translate: 3px -3px; }
@media (min-width: 1101px) {
  /* 共用四行轨道，对齐标题、说明、标签和业务入口。 */
  .about-businesses { row-gap: 0; }
  .about-business { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .about-card-link { min-height: 64px; }
}
.contact-band { background: var(--blue-dark); color: #fff; padding-block: 49px; }
.contact-band > div { display: flex; gap: 30px; justify-content: space-between; align-items: center; }
.contact-band .eyebrow { color: #c2d8dc; margin-bottom: 10px; }
.contact-band h2 { font-size: 30px; }
.button-white { background: #fff; color: var(--blue-dark); }
.button-white:hover { background: #e2efe9; }
.site-footer { background: #fff; }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding-block: 48px 38px; }
.footer-main > p { font-size: 13px; line-height: 1.9; }
.footer-top-link { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 12px; min-height: 44px; }
/* 使用完整系统字库，避免字体子集缺字造成页脚字形不一致。 */
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 20px; color: var(--muted); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 10px; }
.footer-bottom a { margin-inline-start: 12px; }
.breadcrumb { display: flex; gap: 13px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 44px; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb > span { color: #a0adb8; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 45px; }
.product-card { padding: 26px; border: 1px solid var(--line); border-radius: 4px; transition: border-color .18s ease-out; }
.product-card-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.product-card img { height: 230px; width: 100%; object-fit: contain; margin-block: 15px 28px; }
.product-card h3 { font-size: 22px; }
.product-card p { font-size: 13px; color: var(--muted); margin-top: 12px; }
.product-card .product-card-subtitle { color: var(--blue); font-size: 14px; margin-top: 6px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.table-hint { display: none; }
.spec-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 14px; min-width: 650px; }
.spec-table caption { text-align: left; padding: 20px 25px; font-size: 18px; font-weight: 500; color: var(--ink); }
.spec-table th, .spec-table td { border-top: 1px solid var(--line); padding: 17px 25px; }
.spec-table thead th { font-size: 13px; font-weight: 500; background: #edf3f7; color: var(--blue-dark); }
.spec-table tbody th { font-weight: 400; color: var(--muted); width: 25%; }
.spec-table tbody td { width: 37.5%; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.section-number { font-size: 11px; color: var(--green); letter-spacing: .12em; }
.capability-grid h3 { margin-block: 20px 13px; }
.capability-grid p { font-size: 14px; color: var(--muted); }
.gallery-main { padding: 32px; border: 1px solid var(--line); border-radius: 4px; }
.gallery-image-stage { --gallery-image-height: 330px; position: relative; height: var(--gallery-image-height); overflow: hidden; }
.gallery-image-stage > img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 18px; }
.gallery-thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.gallery-thumb { padding: 12px 15px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: #fff; transition: border-color .18s ease, background .18s ease; }
.gallery-thumb:hover { border-color: #8ea6bc; }
.gallery-thumb.is-selected { border-color: var(--blue); background: #f5f8fc; color: var(--blue); }
.gallery-thumb-image { --gallery-image-height: 83px; display: block; position: relative; height: var(--gallery-image-height); overflow: hidden; }
.gallery-thumb-image > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* 千兆俯视图按网卡主体中心定位，避免把底部留白计入居中范围。 */
.gallery-image-stage > img[src$="nic-1g-top.webp"],
.gallery-thumb-image > img[src$="nic-1g-top.webp"] { position: absolute; left: 50%; top: 50%; width: min(100%, calc(var(--gallery-image-height) * 2.07)); max-width: none; height: auto; transform: translate(-50%, -30.75%); }
.gallery-thumb > span { font-size: 11px; }
.supply-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.supply-card { border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 3px; padding: 32px; background-color: #fff; transition: background-color .18s ease-out; }
.supply-card:focus-within { background-color: var(--surface); }
.supply-card h3 { font-size: 27px; margin-top: 21px; }
.supply-card .text-link { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .18s ease-out; }
.motherboards-page .supply-card .text-link { margin-top: 16px; }
.supply-card .text-link > span { transition: translate .18s ease-out; }
.supply-card .text-link:is(:focus-visible, :active) { color: var(--green); text-decoration-line: underline; }
.supply-card .text-link:focus-visible > span { translate: 3px; }
@media (hover: hover) and (pointer: fine) {
  .supply-card:hover { background-color: var(--surface); }
  .supply-card .text-link:hover { color: var(--green); text-decoration-line: underline; }
  .supply-card .text-link:hover > span { translate: 3px; }
}
.green-supply { border-top-color: var(--green); }
.related-links { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.related-links a { display: flex; justify-content: space-between; padding: 27px 0; border-top: 1px solid var(--line); color: var(--blue); font-size: 20px; gap: 12px; }
.development-section, .working-together { padding-block: 80px; }
.development-section .section-heading, .working-together .section-heading { display: block; margin-bottom: 36px; }
.development-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.development-summary { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.large-index { font-size: 44px; line-height: 1; color: var(--blue); font-weight: 500; letter-spacing: -.04em; }
.development-summary h3 { margin-top: 20px; font-size: 22px; }
.development-summary p { color: var(--muted); font-size: 16px; margin-top: 12px; }
.development-summary .text-link { margin-top: 16px; }
.development-summary .text-link, .process-footer .text-link { font-size: 15px; gap: 16px; }
.development-items article { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-block: 28px; }
.development-items article:last-child { border-bottom: 1px solid var(--line); }
.development-items h3 { font-size: 22px; }
.development-items p { color: var(--muted); font-size: 16px; }
.process-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; margin: 0; }
.process-list li { position: relative; min-width: 0; }
.process-list li::before { content: ""; position: absolute; top: 18px; left: 0; right: -40px; height: 1px; background: #c5d5df; }
.process-list li:last-child::before { display: none; }
.process-list li > span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #9dbca9; border-radius: 50%; background: var(--surface); color: var(--green); font: 500 13px/1 Consolas, monospace; }
.process-list li:nth-child(2) { --process-delay: .08s; }
.process-list li:nth-child(3) { --process-delay: .16s; }
.process-list h3 { margin-top: 20px; font-size: 22px; }
.process-list p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.process-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.process-footer p { color: var(--muted); font-size: 16px; }
.process-footer .text-link { flex-shrink: 0; }
.contact-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.contact-company h2 { color: var(--blue-dark); font-size: clamp(32px, 3vw, 40px); font-weight: 500; line-height: 1.5; }
.contact-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 28px; margin: 0; }
.contact-method { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.contact-method dt { color: var(--muted); font-size: 13px; line-height: 1.7; }
.contact-method dd { margin: 8px 0 0; color: var(--ink); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.contact-method dd > span, .contact-method a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.contact-method a { color: var(--blue); border-radius: 2px; transition: color .18s ease-out; }
.contact-method a:is(:hover, :focus-visible, :active) { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.contact-method-phone { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
.contact-method-phone a { min-height: 56px; font-size: clamp(34px, 3.2vw, 44px); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.contact-method-address { grid-column: 1 / -1; }
.contact-guidance { margin-top: 64px; padding-top: 40px; }
.contact-guidance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.contact-guidance article { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 24px; }
.contact-guidance article > span { color: var(--green); font-size: 11px; letter-spacing: .1em; }
.contact-guidance h3 { margin-top: 16px; font-size: 22px; }
.contact-guidance .text-link { margin-top: auto; padding-top: 16px; font-size: 14px; transition: color .18s ease-out; }
.contact-guidance .text-link:is(:hover, :focus-visible, :active) { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.contact-guidance .text-link > span { transition: translate .18s ease-out; }
.contact-guidance .text-link:focus-visible > span { translate: 3px; }
@media (hover: hover) and (pointer: fine) {
  .contact-guidance .text-link:hover > span { translate: 3px; }
}

@media (max-width: 1100px) {
  .feature-grid { column-gap: 40px; }
  .feature-tab { gap: 12px; padding-inline: 12px; }
  .feature-tab-thumb { flex-basis: 56px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-businesses { grid-template-columns: 1fr; gap: 16px; }
  .about-business { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 24px; min-height: 0; }
  .about-business-heading { grid-column: 1; grid-row: 1 / 4; }
  .about-business p { margin-top: 0; }
  .about-tags { grid-column: 2; margin-top: 0; }
  .about-card-link { grid-column: 2; margin-top: 0; padding-top: 4px; }
  .contact-overview { gap: 48px; }
  .contact-guidance-grid { gap: 28px; }
  .business-grid { gap: 17px; }
  .business-card { padding: 22px 20px; }
  .business-card h3 { font-size: 19px; }
}

@media (max-width: 1024px) {
  .header-inner { min-height: 76px; flex-wrap: wrap; gap: 0; }
  .has-js .header-inner { flex-wrap: nowrap; }
  .site-header .brand img { width: 40px; height: 40px; }
  .site-nav { flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: 0 24px; border-top: 1px solid var(--line); }
  .site-nav a { min-height: 44px; padding-block: 8px; }
  .has-js .nav-toggle { display: inline-flex; }
  .has-js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; background: #0b2438; border-color: #53778d; border-bottom: 1px solid #53778d; box-shadow: 0 16px 22px #213a4b12; padding: 10px 24px; max-height: calc(100dvh - 77px); overflow-y: auto; }
  .has-js .site-nav.is-open { display: flex; animation: menu-enter .2s ease both; }
  .has-js .site-nav a { padding: 13px 3px; }
  .has-js .site-nav .nav-contact { margin-block: 6px; padding: 9px 14px; }
  .site-nav a::after { display: none; }
}

@media (max-width: 860px) {
  .container { width: calc(100% - 48px); }
  .brand-wordmark { font-size: 21px; }
  .brand-wordmark small { font-size: 7px; margin-top: 6px; }
  .brand img { width: 40px; height: 40px; }
  .section { padding-block: 68px; }
  .business-grid { grid-template-columns: 1fr; gap: 20px; }
  .business-card { display: grid; grid-template-columns: .7fr 1fr; column-gap: 35px; padding: 25px; }
  .business-card .card-number { grid-column: 2; }
  .business-card .card-visual { grid-column: 1; grid-row: 1 / 5; height: 190px; margin: 0; }
  .business-card h3, .business-card p, .business-card .card-link { grid-column: 2; }
  .business-card h3 { margin-top: 10px; font-size: 23px; }
  .business-card .card-link { padding-top: 16px; }
  .feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .feature-heading { grid-column: 1; grid-row: 1; }
  .feature-visual { grid-column: 1; grid-row: 2; }
  .feature-copy { grid-column: 1; grid-row: 3; }
  .feature-image { padding-block: 0; }
  .feature-image-stage { max-width: 640px; margin-inline: auto; }
  .feature-heading h2 { font-size: 30px; }
  .about-grid { gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 5px; }
  .product-card h3 { font-size: 18px; }
  .product-card img { height: 190px; }
  .capability-grid { gap: 25px; }
  .capability-grid h3 { font-size: 20px; }
  .development-section, .working-together { padding-block: 64px; }
  .development-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .development-summary { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 24px; padding: 24px; }
  .development-summary h3 { margin-top: 0; }
  .contact-overview { grid-template-columns: 1fr; gap: 36px; }
  .contact-guidance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header .brand-wordmark { font-size: clamp(12px, 3.5vw, 16px); }
  .site-header .brand img { width: 36px; height: 36px; }
  .container { width: calc(100% - 40px); }
  h1 { font-size: 38px; }
  h2 { font-size: 29px; }
  h3 { font-size: 21px; }
  .section { padding-block: 55px; }
  .header-inner { min-height: 72px; }
  .brand { gap: 9px; }
  .brand-wordmark { font-size: 20px; }
  .brand img { width: 36px; height: 36px; }
  .eyebrow { font-size: 10px; margin-bottom: 15px; }
  .hero-description { font-size: 15px; margin-top: 20px; }
  .button-row { gap: 15px 24px; margin-top: 27px; }
  .button { font-size: 13px; padding-inline: 20px; gap: 26px; min-height: 48px; }
  .strip-grid { padding-block: 18px; }
  .strip-grid > div { display: block; padding-inline: 12px; }
  .strip-index { display: block; font-size: 9px; }
  .strip-grid strong { display: block; font-size: 12px; margin-top: 5px; }
  .strip-grid > div > span:last-child { display: block; font-size: 8px; line-height: 1.7; }
  .section-heading { display: block; margin-bottom: 30px; }
  .business-card { display: flex; padding: 25px; }
  .business-card .card-visual { height: 180px; width: 100%; margin-block: 18px 22px; }
  .business-card h3 { font-size: 23px; }
  .supply-grid { grid-template-columns: 1fr; gap: 33px; }
  .feature-heading h2 { font-size: 29px; }
  .feature-panel h3 { font-size: 22px; }
  .feature-tab { gap: 10px; padding: 12px 10px; min-height: 76px; }
  .feature-tab-thumb { flex-basis: 44px; }
  .feature-tab-copy strong { font-size: 13px; }
  .mini-specs { gap: 16px; }
  .mini-specs .feature-rate dd { font-size: 32px; }
  .about-heading h2 { font-size: 30px; }
  .about-intro { font-size: 16px; }
  .about-business { display: flex; gap: 0; padding: 20px; }
  .about-business p { margin-top: 16px; }
  .about-tags { margin-top: 16px; }
  .about-card-link { padding-top: 20px; }
  .contact-band { padding-block: 38px; }
  .contact-band > div { flex-direction: column; align-items: start; gap: 23px; }
  .contact-band h2 { font-size: 25px; }
  .contact-band .eyebrow { font-size: 8px; }
  .footer-main { flex-wrap: wrap; padding-block: 35px 25px; gap: 25px; }
  .footer-main > p { order: 3; width: 100%; }
  .footer-top-link { font-size: 10px; }
  .footer-bottom { font-size: 9px; padding-block: 18px; }
  .breadcrumb { margin-bottom: 32px; font-size: 10px; }
  .product-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .product-card { padding: 23px; }
  .product-card h3 { font-size: 20px; }
  .product-card img { height: 185px; margin-block: 15px 20px; }
  .spec-table { font-size: 12px; min-width: 540px; }
  .table-hint { display: block; color: var(--muted); font-size: 11px; margin-bottom: 12px; }
  .spec-table caption { font-size: 16px; padding: 17px; }
  .spec-table th, .spec-table td { padding: 15px 17px; }
  .spec-table thead th { font-size: 12px; }
  .capability-grid { grid-template-columns: 1fr; gap: 28px; }
  .capability-grid article { border-top: 1px solid var(--line); padding-top: 18px; }
  .capability-grid h3 { margin-top: 10px; }
  .capability-grid p { font-size: 13px; }
  .gallery-main { padding: 20px 12px; }
  .gallery-image-stage { --gallery-image-height: 170px; }
  .gallery-main figcaption { font-size: 10px; }
  .gallery-thumbnails { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
  .gallery-thumb { padding: 8px 10px; }
  .gallery-thumb-image { --gallery-image-height: 65px; }
  .gallery-thumb > span { font-size: 10px; }
  .supply-card { padding: 25px; }
  .supply-card h3 { font-size: 24px; }
  .related-links { grid-template-columns: 1fr; gap: 0; margin-top: 25px; }
  .related-links a { font-size: 18px; padding-block: 23px; }
  .development-section, .working-together { padding-block: 56px; }
  .development-section .section-heading, .working-together .section-heading { margin-bottom: 28px; }
  .development-layout { gap: 28px; }
  .development-summary { grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .large-index { font-size: 32px; }
  .development-summary h3, .development-items h3, .process-list h3 { font-size: 21px; }
  .development-items article { display: block; padding-block: 22px; }
  .development-items p { margin-top: 8px; }
  .process-list { grid-template-columns: 1fr; gap: 0; }
  .process-list li { padding: 2px 0 28px 56px; }
  .process-list li:last-child { padding-bottom: 0; }
  .process-list li::before { top: 18px; bottom: -18px; left: 18px; right: auto; width: 1px; height: auto; }
  .process-list li > span { position: absolute; top: 0; left: 0; }
  .process-list h3 { margin-top: 0; }
  .process-list p { margin-top: 8px; }
  .process-footer { display: block; margin-top: 28px; padding-top: 20px; }
  .process-footer .text-link { margin-top: 12px; }
  .contact-company h2 { font-size: 28px; }
  .contact-methods { gap: 20px; }
  .contact-method-phone a { min-height: 48px; font-size: 32px; }
  .contact-guidance { margin-top: 48px; padding-top: 28px; }
  .contact-guidance-grid { gap: 24px; margin-top: 24px; }
  .contact-guidance article { padding-top: 20px; }
}

@media (max-width: 360px) {
  .site-header .header-inner { width: calc(100% - 20px); }
  .site-header .brand { gap: 6px; }
  .site-header .nav-toggle { padding-inline: 6px; gap: 6px; }
}

/* 应用拓扑以设备为阅读主体，网卡以主机内高亮模块标示。 */
[hidden] { display: none !important; }
.device-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.advantage-card { display: flex; flex-direction: column; padding: 30px 24px; background: #fff; transition: background-color .18s ease-out; }
.advantage-card + .advantage-card { border-left: 1px solid var(--line); }
.advantage-index { color: var(--green); font: 10px/1.6 Consolas, monospace; letter-spacing: .04em; }
.advantage-card h3 { font-size: 22px; margin-block: 28px 18px; transition: color .18s ease-out; }
.advantage-card p { color: var(--muted); font-size: 13px; line-height: 1.95; }
.specifications-section { padding-top: 0; }
.specification-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.specification-guides .text-link { min-width: 0; min-height: 64px; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 16px; line-height: 1.6; transition: color .18s ease-out, border-color .18s ease-out; }
.specification-guides .text-link > span:first-child { min-width: 0; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.specification-guides .text-link > [aria-hidden] { flex-shrink: 0; font-size: 18px; line-height: 1; }
.specification-guides .text-link:is(:focus-visible, :active) { color: var(--blue-dark); border-color: var(--blue); }
.specification-guides .text-link:is(:focus-visible, :active) > span:first-child { text-decoration-line: underline; }
.spec-table .spec-group th { background: #eef4f8; color: var(--blue); font-size: 12px; letter-spacing: .06em; padding-block: 12px; }
.spec-table tbody tr:not(.spec-group) > * { transition: background-color .1s ease-out; }
@media (hover: hover) and (pointer: fine) {
  #advantages .advantage-card:hover { background-color: var(--surface); }
  #advantages .advantage-card:hover h3 { color: var(--blue); }
  #specifications .product-card:hover { border-color: var(--blue); }
  #specifications .spec-table tbody tr:not(.spec-group):hover > * { background-color: #edf3f7; }
  .specification-guides .text-link:hover { color: var(--blue-dark); border-color: var(--blue); }
  .specification-guides .text-link:hover > span:first-child { text-decoration-line: underline; }
}
.application-section { --topology-header-height: 80px; padding-block: 0; background: #081b2c; scroll-margin-top: calc(var(--topology-header-height) - 112px); }
.topology-explorer { --topology-play-state: running; --topology-blue: #6ab5f1; --topology-green: #86dfb5; --topology-amber: #e1b775; --topology-muted: #aec5d7; background: radial-gradient(ellipse at 50% 56%, #174b675c, transparent 66%), #081b2c; scroll-margin-top: calc(var(--topology-header-height) - 112px); }
.topology-container { width: min(calc(100% - 96px), 1664px); margin-inline: auto; }
.scenario-navigation { background: #f5f8fa; color: var(--ink); }
.scenario-navigation > .topology-container { display: flex; align-items: center; gap: 24px; }
.application-heading { flex-shrink: 0; padding-right: 28px; border-right: 1px solid #dce5eb; }
.application-heading .eyebrow { font-size: 10px; margin-bottom: 3px; letter-spacing: .13em; }
.application-heading h2 { color: var(--blue-dark); font-size: 24px; line-height: 1.4; white-space: nowrap; }
.scenario-tabs { display: grid; flex: 1; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scenario-tabs a { position: relative; display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 14px 12px; color: #52677b; transition: color .2s; }
.scenario-tabs a::after { content: ""; position: absolute; bottom: 16px; left: calc(50% - 18px); width: 36px; height: 3px; background: var(--green); opacity: 0; transform: scaleX(.4); transition: opacity .2s, transform .2s; }
.scenario-tab-copy { min-width: 0; }
.scenario-tab-copy strong { font-size: 19px; line-height: 1.4; font-weight: 500; }
.scenario-tab-short { display: none; }
.scenario-tabs a:hover { color: var(--green); }
.scenario-tabs a[aria-selected="true"] { color: var(--blue-dark); }
.scenario-tabs a[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); }
.scenario-tabs a[aria-selected="true"] strong { font-weight: 600; }
.scenario-tabs a:focus-visible { outline-offset: -5px; }
.scenario-panel { position: relative; padding-block: 20px 10px; color: #edf4fb; }
.scenario-panel:focus-visible { outline-offset: -4px; }
.is-enhanced .scenario-panel { animation: topology-scene-in .26s ease both; }
.scenario-content { display: grid; grid-template-rows: auto auto auto; gap: 14px; }
.scenario-intro { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.scenario-title { display: flex; align-items: center; gap: 14px; }
.scenario-eyebrow { color: #8de1b2; font: 13px/1.5 Consolas, monospace; letter-spacing: .08em; }
.scenario-intro h3 { color: #f1f6fc; font-size: 32px; line-height: 1.4; letter-spacing: -.025em; }
.scenario-actions { flex-shrink: 0; }
.scenario-tag { color: #c4daeb; font-size: 13px; white-space: nowrap; }
.playback-toolbar { display: contents; }
.playback-toolbar[hidden] { display: none; }
.playback-controls { display: flex; margin-left: 4px; }
.playback-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 0; border-radius: 3px; padding: 9px 10px; background: transparent; color: #aec5d7; font-size: 13px; transition: color .18s, background .18s; }
.playback-controls button:hover { background: #18394e; color: #a9efc8; }
.playback-controls button[aria-pressed="true"] { color: #bdf2d3; }
.playback-toggle[aria-pressed="false"] .play-icon, .playback-toggle[aria-pressed="true"] .pause-icon { display: none; }
.scenario-panel :is(a, button, [tabindex]):focus-visible { outline-color: #a9efc8; }
.topology-stage { position: relative; height: var(--stage-height); min-height: 0; isolation: isolate; }
.topology-stage::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(#86b9d508 1px, transparent 1px), linear-gradient(90deg, #86b9d508 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse, #0009, transparent 74%); pointer-events: none; }
.topology-links { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.topology-path { color: var(--topology-blue); }
.storage-link { color: var(--topology-green); }
.optional-link { color: var(--topology-amber); }
.link-base, .link-signal { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.link-base { stroke: currentColor; stroke-width: 1.8; opacity: .76; }
.optional-link .link-base { stroke-dasharray: 5 5; }
.link-signal { stroke: currentColor; stroke-width: 3.4; stroke-dasharray: 9 100; opacity: 0; filter: drop-shadow(0 0 5px currentColor); }
.topology-explorer.is-paused, .topology-explorer.is-suspended { --topology-play-state: paused; }
.is-playing .link-signal { animation: topology-flow 6.4s linear infinite both; animation-delay: calc(.35s + var(--step) * .6s); animation-play-state: var(--topology-play-state); }
.topology-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 216px; padding: 4px; text-align: center; }
.device-graphic { display: block; width: 188px; height: 157px; max-width: 100%; margin: 0 auto; filter: drop-shadow(0 16px 14px #010d1b66); }
.topology-node h4 { margin: 6px 0 0; color: #e1eff9; font-size: 17px; font-weight: 500; line-height: 1.5; text-wrap: balance; }
.topology-node p { margin-top: 3px; color: var(--topology-muted); font-size: 13px; line-height: 1.65; text-wrap: balance; }
.host-node { width: 292px; padding: 12px; background: radial-gradient(ellipse, #23564c60, transparent 72%); }
.host-heading { display: flex; align-items: center; gap: 12px; text-align: left; }
.host-heading .device-graphic { width: 120px; height: 100px; flex-shrink: 0; }
.host-heading h4 { margin: 0; font-weight: 600; }
.host-name-unit { display: inline-block; }
.host-heading p { font-size: 13px; }
.pcie-connection { display: block; margin-top: 6px; color: #b6d3cf; font: 12px/1.6 Consolas, monospace; text-align: center; }
.nic-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 0 6px; border-radius: 6px; background: linear-gradient(90deg, #1b594700, #1b5947b3, #1b594700); color: #b7f2d0; font-size: 15px; font-weight: 500; }
.nic-badge .device-graphic { width: 108px; height: 90px; margin: 0; filter: drop-shadow(0 0 10px #86dfb518); }
.is-playing .nic-badge { animation: topology-nic-pulse 6.4s ease infinite; animation-play-state: var(--topology-play-state); }
.nic-ports { display: grid; gap: 5px; margin-top: 6px; }
.nic-port { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; color: #d9eaf5; font-size: 13px; line-height: 1.7; }
.nic-port b { color: #9ed1fa; font: 600 13px/1.7 Consolas, monospace; }
.port-unused { color: var(--topology-muted); font-size: 12px; }
.nic-ports:has(.port-unused) { position: relative; grid-template-columns: 1fr max-content 1fr; text-align: left; }
.nic-ports:has(.port-unused) > * { grid-column: 2; }
.nic-ports:has(.port-unused) .nic-port { position: static; justify-content: flex-start; }
.nic-ports:has(.port-unused) .port-anchor { top: .85em; }
.port-anchor { position: absolute; display: block; width: 8px; height: 8px; transform: translate(-50%, -50%); border: 2px solid var(--topology-blue); border-radius: 50%; background: #0c263c; }
.nic-port .port-anchor { left: calc(100% + 12px); top: 50%; }
.dual-host .nic-ports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dual-host .nic-port { flex-direction: column; gap: 0; }
.dual-host .nic-port:first-child .port-anchor { left: -12px; }
.hpc-host .nic-port:last-child .port-anchor { border-color: var(--topology-green); }
.hpc-host .nic-port:last-child b { color: var(--topology-green); }
.anchor-left { left: 0; top: 50%; }
.anchor-right { left: 100%; top: 50%; }
.anchor-top { left: 50%; top: 0; }
.anchor-bottom { left: 50%; top: 100%; }
.anchor-upper { top: 36%; }
.anchor-lower { top: 70%; }
.anchor-quarter { left: 28%; }
.anchor-three-quarter { left: 72%; }
.storage-node .port-anchor { border-color: var(--topology-green); }
.field-node .device-graphic { width: 158px; height: 132px; }
.stage-hpc :is(.compute-node, .storage-node) { width: 200px; }
.stage-hpc .hpc-host { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; width: min(420px, 36%); }
.hpc-host .host-heading { grid-column: 1; grid-row: 1; }
.hpc-host .host-heading .device-graphic { width: 84px; height: 70px; }
.hpc-host .nic-badge { grid-column: 2; grid-row: 1; flex-direction: column; gap: 2px; margin: 0; padding: 0; font-size: 14px; }
.hpc-host .nic-badge .device-graphic { width: 84px; height: 70px; }
.hpc-host .pcie-connection { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; grid-row: 2; margin: 0; }
.hpc-host .pcie-connection::before, .hpc-host .pcie-connection::after { content: ""; flex: 1; height: 1px; background: #6c9e914d; }
.hpc-host .nic-ports { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; }
.hpc-host .nic-port { flex-direction: row; gap: 5px; }
.optional-node h4 { color: #edc88f; }
.stage-defense .optional-node { width: min(190px, 18%); }
.optional-node .device-graphic { width: 158px; height: 132px; }
.optional-node .port-anchor, .custom-inlet .port-anchor { border-color: var(--topology-amber); }
.custom-inlet { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #c9a46b66; color: #edc88f; font-size: 12px; }
.mobile-label, .mobile-network-note { display: none; }
.scenario-footer { display: grid; gap: 14px; padding-block: 8px 16px; }
.scenario-tools { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.scenario-links { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.scenario-links .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #cce5fa; font-size: 14px; }
.scenario-links .text-link:hover { color: #a9efc8; }
.scenario-links .button { min-height: 44px; padding: 10px 18px; border-color: #8de1b2; border-radius: 3px; background: #8de1b2; color: #092d29; font-size: 14px; }
.scenario-links .button:hover { background: #b0efca; border-color: #b0efca; }
.topology-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; color: var(--topology-muted); font-size: 13px; }
.topology-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { display: inline-block; width: 22px; height: 2px; background: var(--topology-blue); }
.legend-storage { background: var(--topology-green); }
.legend-optional { background: repeating-linear-gradient(90deg, var(--topology-amber) 0 5px, transparent 5px 9px); }
.legend-nic { width: 14px; height: 9px; border-radius: 2px; background: #58aa86; }
.topology-description { color: var(--topology-muted); font-size: 12px; line-height: 1.8; }
.is-enhanced .topology-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes topology-scene-in { from { opacity: .85; } to { opacity: 1; } }
@keyframes topology-flow { 0% { opacity: 0; stroke-dashoffset: 109; } 2%, 14% { opacity: 1; } 18%, 100% { opacity: 0; stroke-dashoffset: -9; } }
@keyframes topology-nic-pulse { 0%, 22%, 100% { filter: brightness(1); } 9% { filter: brightness(1.16); } }
@media (hover: hover) and (pointer: fine) {
  .topology-node:hover > .device-graphic { filter: drop-shadow(0 16px 14px #010d1b66) brightness(1.12); }
}
@media (min-width: 1180px) and (min-height: 760px) {
  .is-enhanced.topology-explorer { display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100svh - var(--topology-header-height)); }
  .is-enhanced .scenario-panel { min-height: 0; }
  .is-enhanced .scenario-content { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
  .is-enhanced .topology-stage { height: auto; }
}
@media (min-width: 1180px) and (max-height: 840px) {
  .scenario-tabs a { min-height: 80px; padding-block: 10px; }
  .scenario-panel { padding-block: 12px 8px; }
  .scenario-content { gap: 10px; }
  .scenario-intro h3 { font-size: 28px; }
  .topology-node { width: 192px; }
  .device-graphic { width: 140px; height: 117px; }
  .topology-node h4 { font-size: 16px; }
  .topology-node p { font-size: 12px; }
  .host-node { width: 264px; }
  .host-heading .device-graphic { width: 100px; height: 84px; }
  .nic-badge .device-graphic { width: 92px; height: 76px; }
  .field-node .device-graphic, .optional-node .device-graphic { width: 128px; height: 107px; }
  .stage-hpc :is(.compute-node, .storage-node) { width: 184px; }
}
@media (max-width: 1179px) {
  .topology-container { width: calc(100% - 48px); }
  .scenario-navigation > .topology-container { display: block; }
  .application-heading { padding: 20px 0 8px; border-right: 0; }
  .application-heading h2 { font-size: 28px; }
  .scenario-tabs a { min-height: 80px; }
  .scenario-intro { align-items: start; }
  .scenario-intro h3 { font-size: 28px; }
  .topology-node { width: 154px; }
  .device-graphic { width: 128px; height: 107px; }
  .topology-node h4 { font-size: 16px; }
  .host-node { width: 236px; }
  .host-heading { gap: 8px; }
  .host-heading .device-graphic { width: 84px; height: 70px; }
  .nic-badge { gap: 5px; font-size: 14px; }
  .nic-badge .device-graphic { width: 76px; height: 64px; }
  .field-node .device-graphic, .optional-node .device-graphic { width: 118px; height: 99px; }
  .stage-hpc .compute-node { left: 12%; width: 154px; }
  .stage-hpc .storage-node { left: var(--x); width: 154px; }
}
@media (max-width: 960px) and (min-width: 701px) {
  .topology-node { width: 138px; }
  .host-node { width: 206px; }
  .host-heading .device-graphic { width: 60px; height: 50px; }
  .nic-badge .device-graphic { width: 56px; height: 48px; }
  .topology-node h4 { font-size: 15px; }
  .topology-node p { font-size: 12px; }
  .stage-hpc :is(.compute-node, .storage-node) { width: 138px; }
  .stage-hpc .storage-node { width: min(138px, 18%); }
  .stage-hpc .hpc-host { width: 32%; }
  .hpc-host .host-heading { flex-direction: column; gap: 4px; text-align: center; }
  .hpc-host .host-heading .device-graphic { width: 42px; height: 36px; }
  .hpc-host .nic-badge .device-graphic { width: 60px; height: 50px; }
  .hpc-host .nic-port, .hpc-host .nic-port b { font-size: 12px; }
  .scenario-tools { flex-direction: column; align-items: start; gap: 12px; }
  .scenario-intro { flex-direction: column; gap: 12px; }
}
@media (max-width: 700px) {
  .topology-container { width: calc(100% - 32px); }
  .application-heading { padding-block: 24px 8px; }
  .application-heading h2 { font-size: 25px; }
  .scenario-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-tabs a { min-height: 64px; padding: 12px 8px; }
  .scenario-tabs a::after { bottom: 8px; }
  .scenario-tab-full { display: none; }
  .scenario-tab-short { display: inline; }
  .scenario-tab-copy strong { font-size: 16px; }
  .scenario-panel { padding-block: 24px 14px; }
  .scenario-content { gap: 20px; }
  .scenario-intro { flex-direction: column; align-items: start; gap: 16px; }
  .scenario-title { gap: 10px; }
  .scenario-intro h3 { font-size: 25px; }
  .topology-stage { height: var(--mobile-height); }
  .topology-node { left: var(--mx); top: var(--my); width: min(124px, 40%); padding: 6px; }
  .topology-node .device-graphic { width: 88px; height: 74px; }
  .topology-node h4 { font-size: 14px; }
  .topology-node p { font-size: 12px; }
  .host-node { width: min(156px, 47%); padding: 12px; }
  .host-heading { gap: 5px; }
  .host-heading .device-graphic { width: 42px; height: 36px; }
  .host-heading h4 { font-size: 14px; }
  .host-heading p { font-size: 12px; }
  .pcie-connection { margin-top: 8px; font-size: 12px; }
  .nic-badge { gap: 3px; padding: 4px 0; font-size: 12px; }
  .nic-badge .device-graphic { width: 44px; height: 38px; flex-shrink: 0; }
  .nic-port, .nic-port b, .port-unused { font-size: 12px; }
  .nic-port { gap: 4px; }
  .field-node { width: 31%; padding: 4px; }
  .field-node .device-graphic { width: 72px; height: 60px; }
  .field-node h4 { font-size: 13px; }
  .stage-industrial > .topology-node:not(.host-node):not(.field-node) { width: min(116px, 38%); }
  .stage-hpc .hpc-host { display: block; width: 216px; }
  .hpc-host .host-heading { flex-direction: row; text-align: left; }
  .hpc-host .nic-badge { flex-direction: row; margin-top: 6px; padding: 4px 0; font-size: 12px; }
  .hpc-host .pcie-connection { display: block; margin-top: 8px; }
  .hpc-host .pcie-connection::before, .hpc-host .pcie-connection::after { display: none; }
  .hpc-host .nic-ports { margin-top: 6px; }
  .hpc-host .nic-port { flex-direction: column; gap: 0; }
  .stage-hpc .compute-node, .stage-hpc .storage-node { left: var(--mx); width: min(124px, 40%); }
  .hpc-host .host-heading .device-graphic { width: 64px; height: 54px; }
  .hpc-host .nic-badge .device-graphic { width: 64px; height: 54px; }
  .hpc-host .nic-port:first-child .port-anchor, .hpc-host .nic-port:last-child .port-anchor { left: 50%; top: calc(100% + 12px); }
  .desktop-node, .desktop-path, .desktop-anchor, .desktop-label { display: none; }
  .stage-hpc .desktop-node { display: none; }
  .mobile-label { display: inline; }
  .mobile-network-note { display: block; position: absolute; left: 0; top: 80%; width: 48%; color: var(--topology-muted); text-align: center; font-size: 12px; line-height: 1.9; }
  .defense-host { width: min(168px, 55%); }
  .stage-defense .optional-node { width: min(94px, 32%); }
  .stage-defense .optional-node .device-graphic { width: 60px; height: 50px; }
  .stage-defense .optional-node h4 { font-size: 13px; }
  .stage-defense .optional-node p { font-size: 12px; }
  .mobile-hmi-port { left: 85%; top: 100%; }
  .mobile-hmi-in { left: 85%; top: 0; }
  .mobile-io-port { left: 97%; }
  .mobile-top { left: 50%; top: 0; }
  .mobile-right { left: 100%; top: 50%; }
  .mobile-left { left: 0; top: 50%; }
  .mobile-bottom { left: 50%; top: 100%; }
  .mobile-bottom-left { left: 28%; top: 100%; }
  .mobile-bottom-right { left: 72%; top: 100%; }
  .scenario-tools { flex-direction: column; align-items: stretch; gap: 16px; }
  .scenario-links { justify-content: space-between; gap: 12px; width: 100%; }
  .scenario-links .text-link, .scenario-links .button { font-size: 13px; }
  .topology-legend { gap: 8px 16px; font-size: 12px; }
  .scenario-footer { gap: 18px; padding-bottom: 10px; }
}
@media (max-width: 360px) {
  .host-heading .device-graphic { width: 30px; height: 28px; }
  .nic-badge .device-graphic { width: 36px; height: 32px; }
  .stage-defense .topology-node:not(.host-node) .device-graphic { width: 54px; height: 46px; }
  .stage-defense .topology-node h4 { font-size: 13px; }
  .playback-controls button { padding-inline: 10px; }
}

.home-nic-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.home-nic-heading h2 { color: var(--blue-dark); }
.home-nic-heading > .text-link { flex-shrink: 0; margin-bottom: 4px; }
.home-advantage-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.home-capability { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.home-capability-index { display: block; color: var(--green); font: 500 11px/1.5 Consolas, monospace; }
.home-capability h3 { color: var(--blue-dark); font-size: 20px; margin-top: 16px; }
.home-capability p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-top: 8px; }
.home-applications { margin-top: 32px; border-radius: 4px; background: #f6f8fa; overflow: hidden; }
.home-scenario-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-scenario-links a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 20px 24px; color: var(--blue); font-size: 16px; font-weight: 500; line-height: 1.5; transition: color .2s ease, background-color .2s ease; }
.home-scenario-links a + a::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.home-scenario-links a::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--green); opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .22s ease, opacity .22s ease; }
.home-scenario-links a:is(:hover, :focus-visible) { color: var(--green); background: #edf5f0; }
.home-scenario-links a:is(:hover, :focus-visible)::after { opacity: 1; transform: scaleX(1); }
.home-scenario-links a:focus-visible { outline-offset: -4px; }
.home-scenario-links a:active { background: #eaf3ed; }
.home-scenario-links a > span:first-child { min-width: 0; text-wrap: balance; }
.home-scenario-links a > span:first-child > span { display: inline-block; }
.home-scenario-arrow { flex-shrink: 0; font-size: 18px; transition: translate .2s ease; }
.home-scenario-links a:is(:hover, :focus-visible) .home-scenario-arrow { translate: 3px -3px; }
.gallery-image-stage.is-switching { animation: gallery-switch .26s ease both; }
.button:active, .playback-controls button:active { filter: brightness(.94); }
.motion-ready .reveal { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.65,.25,1); transition-delay: var(--reveal-delay, 0s); }
.motion-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .development-section .reveal, .motion-ready .development-layout.reveal, .motion-ready .working-together .reveal { transition-duration: .4s; transition-delay: 0s; }
  .motion-ready .development-section .reveal:not(.is-visible), .motion-ready .development-layout.reveal:not(.is-visible), .motion-ready .working-together .reveal:not(.is-visible) { transform: translateY(8px); }
  .motion-ready .working-together .process-list > li.reveal { transition-delay: var(--process-delay, 0s); }
  .motion-ready .development-layout.reveal:focus-within { opacity: 1; transform: none; transition: none; }
}
.motion-ready .contact-layout.reveal { transition-duration: .35s; transition-delay: 0s; }
.motion-ready .contact-layout.reveal:not(.is-visible) { transform: translateY(8px); }
.motion-ready .contact-layout.reveal:focus-within { opacity: 1; transform: none; transition: none; }
.motion-ready .supply-card.reveal { transition: background-color .18s ease-out, opacity .65s ease, transform .65s cubic-bezier(.2,.65,.25,1); transition-delay: 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s); }
.motion-ready .supply-card.reveal:focus-within { opacity: 1; transform: none; transition: background-color .18s ease-out; }
.motion-ready #advantages .advantage-card.reveal { transition: background-color .18s ease-out, opacity .65s ease, transform .65s cubic-bezier(.2,.65,.25,1); transition-delay: 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s); }
.motion-ready #nic-capabilities .reveal { transition-duration: .4s; transition-delay: 0s; }
.motion-ready #nic-capabilities .reveal:not(.is-visible) { transform: translateY(6px); }
.motion-ready #nic-capabilities .home-capability:nth-child(2) { transition-delay: .05s; }
.motion-ready #nic-capabilities .home-capability:nth-child(3) { transition-delay: .1s; }
.motion-ready #nic-capabilities .home-capability:nth-child(4) { transition-delay: .15s; }
.motion-ready #nic-capabilities .reveal:focus-within { opacity: 1; transform: none; transition: none; }
.motion-ready #about .reveal { transition-duration: .45s; transition-delay: 0s; }
.motion-ready #about .reveal:not(.is-visible) { transform: translateY(12px); }
.motion-ready #about .about-heading.reveal { transition-duration: .5s; }
.motion-ready #about .about-copy.reveal { transition-delay: .08s; }
.motion-ready #about .about-business.reveal { transition: border-color .18s ease, opacity .42s ease, transform .42s cubic-bezier(.2,.65,.25,1); transition-delay: 0s, var(--about-card-delay, 0s), var(--about-card-delay, 0s); }
.motion-ready #about .about-business.reveal:nth-child(2) { --about-card-delay: .07s; }
.motion-ready #about .about-business.reveal:nth-child(3) { --about-card-delay: .14s; }
.motion-ready #about .about-copy.reveal:focus-within { opacity: 1; transform: none; transition: none; }
.motion-ready #about .about-business.reveal:focus-within { opacity: 1; transform: none; transition: border-color .18s ease; }
/* 悬停位移独立于滚动入场的 transform，避免两者相互覆盖。 */
.motion-ready .business-card.reveal { transition: border-color .22s ease, box-shadow .22s ease, translate .22s ease, opacity .65s ease, transform .65s cubic-bezier(.2,.65,.25,1); transition-delay: 0s, 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s); }
@keyframes gallery-switch { from { opacity: .45; } to { opacity: 1; } }
@keyframes menu-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .motion-ready #about .about-business.reveal:nth-child(n) { --about-card-delay: 0s; }
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }
  .advantage-card:nth-child(3) { border-left: 0; }
  .advantage-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .home-advantage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .home-scenario-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-scenario-links a:nth-child(3)::before { display: none; }
}
@media (max-width: 860px) {
  .home-nic-heading { align-items: start; flex-direction: column; gap: 16px; }
  .home-nic-heading > .text-link { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .specification-guides { grid-template-columns: 1fr; }
  .specification-guides .text-link { font-size: 15px; }
  .advantages-grid { grid-template-columns: 1fr; }
  .advantage-card { padding: 25px; }
  .advantage-card + .advantage-card { border-left: 0; border-top: 1px solid var(--line); }
  .advantage-card h3 { margin-block: 14px; }
  .home-nic-heading { margin-bottom: 28px; }
  .home-advantage-strip { gap: 24px 20px; }
  .home-capability h3 { font-size: 18px; }
  .home-capability p { font-size: 14px; }
  .home-scenario-links a { gap: 8px; min-height: 68px; padding: 16px 12px; font-size: 15px; }
  .home-scenario-arrow { font-size: 14px; }
}
@media (max-width: 359px) {
  .home-advantage-strip, .home-scenario-links { grid-template-columns: 1fr; }
  .home-scenario-links a:nth-child(n+2)::before { display: block; inset: 0 16px auto; width: auto; height: 1px; }
  .home-capability { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px 12px; padding-top: 16px; }
  .home-capability-index { align-self: center; }
  .home-capability h3, .home-capability p { margin-top: 0; }
  .home-capability p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .motion-ready .reveal:not(.is-visible), .motion-ready #about .reveal:not(.is-visible), .motion-ready #nic-capabilities .reveal:not(.is-visible), .motion-ready .contact-layout.reveal:not(.is-visible) { opacity: 1; transform: none; }
  .link-signal { display: none !important; }
  .business-card, .business-card .card-link > span, .feature-product-link > span, .about-copy .text-link > span, .about-card-link > span, .home-scenario-arrow, .supply-card .text-link > span, .contact-guidance .text-link > span { translate: none !important; }
}

/* 首屏共用舞台与播放状态，业务场景分别构图。 */
.site-header { background: #081b2cf5; border-bottom-color: #a1c2dd24; }
.site-header .brand-wordmark { color: #f1f7fc; }
.site-header .brand img { background: #fff; padding: 3px; border-radius: 3px; }
.site-header :is(a, button):focus-visible { outline-color: #b2f3cd; }
.site-nav a { color: #c2d5e5; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #8de5b3; }
.site-nav a::after { background: #8de5b3; }
.immersive-hero { --hero-accent: #8de5b3; --hero-play-state: paused; --scene-x: 0px; --scene-y: 0px; --scroll-shift: 0px; position: relative; isolation: isolate; overflow: hidden; color: #f2f7fc; background: #081b2c; }
.immersive-hero > .container { position: relative; z-index: 2; }
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 83% 44%, #17596680, transparent 52%), radial-gradient(ellipse at 55% 100%, #103d5d80, transparent 65%); }
.hero-atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#8cb0c5 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent 35%, #000); }
.hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 25px; color: #a5bfd1; font: 10px/1.7 Consolas, "Noto Sans SC", monospace; letter-spacing: .12em; }
.immersive-hero .breadcrumb { margin: 0; color: #aec5d7; font-size: 11px; letter-spacing: .03em; }
.immersive-hero .breadcrumb a:hover { color: var(--hero-accent); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: clamp(602px, calc(100svh - 223px), 862px); padding-block: 45px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { font-size: clamp(48px, 5.15vw, 78px); line-height: 1.24; letter-spacing: -.055em; font-weight: 600; }
.hero-copy h1 > span { color: var(--hero-accent); }
.immersive-hero .hero-description { max-width: 470px; margin-top: 28px; color: #b7cddd; font-size: 15px; line-height: 2; }
.immersive-hero .button-row { margin-top: 34px; gap: 18px 30px; }
.immersive-hero .button-primary { background: #92e4b4; color: #08291d; border-radius: 2px; box-shadow: 0 0 32px #8de5b310; }
.immersive-hero .button-primary:hover { background: #b2f3cd; box-shadow: 0 0 34px #8de5b325; }
.immersive-hero .text-link { color: #e0edf5; }
.immersive-hero .text-link:hover { color: var(--hero-accent); }
.immersive-hero :is(a, button):focus-visible { outline-color: #b2f3cd; }
.hero-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 83px; border-top: 1px solid #a1c2dd30; }
.hero-business-links { display: flex; flex-wrap: wrap; gap: 16px 35px; }
.hero-business-links a, .hero-scroll-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: #d5e4ef; font-size: 12px; }
.hero-business-links a:hover, .hero-scroll-link:hover { color: var(--hero-accent); }
.hero-business-links a > span:first-child { color: #8fb09f; font: 10px/1.5 Consolas, monospace; }
.hero-business-links a > span:last-child { color: #8de5b3; }
.hero-motion-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid #83a5ba66; border-radius: 2px; color: #d3e5f1; background: #0b2338c9; font-size: 11px; }
.hero-motion-toggle:hover { border-color: #a6d9b7; background: #173a49; }
.hero-motion-toggle:disabled { cursor: default; opacity: .75; }
.motion-icon { width: 9px; height: 11px; border-inline: 2px solid currentColor; }
[aria-pressed="true"] > .motion-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid #8de5b3; border-right: 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 30px; color: #b7cddd; font-size: 11px; }
.signal-dot { display: inline-block; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #8de5b3; box-shadow: 0 0 15px #8de5b3; }
.hero-art { position: relative; width: 118%; margin-left: -8%; min-width: 0; }
.scene-depth { position: relative; width: 100%; aspect-ratio: 4 / 3; transform: translate3d(var(--scene-x), calc(var(--scene-y) + var(--scroll-shift)), 0); transition: transform .6s cubic-bezier(.2,.65,.25,1); }
.hero-art > figcaption { position: relative; text-align: center; color: #a2bdce; font: 9px/1.8 Consolas, "Noto Sans SC", monospace; letter-spacing: .12em; }
.hero-art > figcaption > span { margin-inline: 10px; color: #77c69e; }
.scene-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.wire-base { stroke: #3b8b9866; stroke-width: 1; }
.wire-flow { stroke: #8de5b3; stroke-width: 2; stroke-dasharray: 12 290; stroke-dashoffset: 0; }
.wire-points { fill: #8de5b3; stroke: #8de5b355; stroke-width: 8; }
.scene-orbit { position: absolute; left: 6%; top: 17%; width: 90%; height: 64%; border: 1px solid #61b79b30; border-radius: 50%; transform: rotate(-23deg); }
.orbit-wide::after { content: ""; position: absolute; inset: 15%; border: 1px dashed #8bb8cf26; border-radius: 50%; }
.orbit-near { width: 70%; height: 40%; top: 28%; left: 16%; border-color: #6e9ab638; transform: rotate(19deg); }
.product-float { position: absolute; z-index: 2; top: 35%; left: -1%; width: 103%; transform: rotate(-13deg); filter: drop-shadow(0 24px 18px #0008) drop-shadow(0 0 24px #81c9c226); }
/* 按实拍外轮廓裁切白色背景，保留原图中的器件与接口。 */
.product-cutout { width: 100%; height: auto; clip-path: polygon(9% 0,37% 0,36.6% 5%,53.5% 5%,53.5% 1%,56.2% 1%,56.5% 5%,62% 5%,62% 1%,66% 1%,66.1% 5%,67.8% 5%,67.8% 2%,70% 2%,70% 5%,89% 5%,91% 9%,100% 69%,99.5% 73%,57.5% 77%,57.5% 93%,56.5% 98%,42.4% 98%,41.9% 94%,42% 85%,41.2% 83%,41% 94%,40.2% 98%,33% 98%,32.3% 96%,32.1% 83%,30.5% 82%,29% 90%,27% 92%,25% 90%,24% 85%,12% 85%,10.5% 92%,8% 94%,1.5% 94%,.2% 89%,.2% 86%,4.9% 60%,1.4% 60%,.8% 55%,.2% 43%,3.5% 26%,6.8% 25.5%,6.2% 15%); }
.scene-nic .hero-copy h1 { font-size: clamp(44px, 4.65vw, 68px); }
.art-nic { width: 127%; }
.art-nic .product-float { top: 32%; width: 112%; left: -4%; transform: rotate(-16deg); }
.product-halo { position: absolute; inset: 12% 0; border-radius: 50%; background: radial-gradient(ellipse, #3d778f4d, #12405724 45%, transparent 70%); }
.product-callout { position: absolute; z-index: 3; font-size: 12px; color: #e0eef4; padding-top: 12px; border-top: 1px solid #86d9c280; }
.product-callout small { display: block; margin-top: 6px; font: 9px/1.6 Consolas, monospace; color: #a5c6d8; }
.callout-port { left: 10%; top: 15%; }
.callout-pcie { left: 59%; top: 76%; }
.scene-cpu .hero-copy h1, .scene-ip .hero-copy h1 { font-size: clamp(39px, 4.3vw, 64px); }
.scene-cpu .art-cpu { width: 134%; max-width: 760px; margin-left: -15%; }
.art-cpu .motherboard-stage { display: grid; place-items: center; }
.art-cpu .product-callout, .art-nic .product-callout { font-size: 20px; }
.art-cpu .product-callout small, .art-nic .product-callout small { font: 14px/1.7 "Noto Sans SC", sans-serif; }
.art-nic .callout-port { left: 0; top: 6%; }
.art-nic .callout-pcie { left: 74%; top: auto; bottom: 4%; white-space: nowrap; }
.cpu-callout-platform { left: 2%; top: 8%; }
.cpu-callout-io { right: 4%; bottom: -3%; }
.motherboard-floor { position: absolute; left: 7%; right: 2%; bottom: 17%; height: 24%; border: 1px solid #6aafab35; border-radius: 50%; background: radial-gradient(ellipse, #528d852b, transparent 70%); transform: rotate(-9deg); }
.motherboard-float { position: relative; z-index: 2; top: -8px; left: -40px; width: 94%; }
.motherboard-hero-image { width: 100%; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 26px 22px #0007); }
.motherboard-platforms { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 16px; }
.brand-node { min-width: 0; padding-left: 16px; border-left: 1px solid #6bb59766; }
.brand-node small { display: block; color: #9dbdcd; font: 8px/1.7 Consolas, monospace; letter-spacing: .08em; }
.brand-node strong { display: block; color: #e2f2f7; font-size: 20px; line-height: 1.4; font-weight: 500; margin-top: 5px; }
.brand-phytium strong, .brand-rockchip strong { color: #a1e2b9; }
.motherboards-page #cpu-products { padding-block: 72px 64px; }
.motherboards-page .supply-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.motherboards-page .supply-card { padding: 26px 24px; }
.motherboards-page .supply-card h3 { font-size: 24px; }
.motherboard-gallery { padding-top: 0; }
.motherboard-gallery .gallery-main { padding: 36px 40px 28px; background: linear-gradient(155deg, #f1f6f9, #fff 75%); }
.motherboard-gallery .gallery-image-stage { --gallery-image-height: 440px; }
.motherboard-gallery .gallery-main figcaption { margin-top: 20px; color: var(--blue-dark); font-size: 18px; font-weight: 500; letter-spacing: .015em; }
.motherboard-gallery .gallery-thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.motherboard-gallery .gallery-thumb { padding: 14px 12px 12px; }
.motherboard-gallery .gallery-thumb-image { --gallery-image-height: 112px; }
.motherboard-gallery .gallery-thumb-image img { mix-blend-mode: normal; }
.motherboard-gallery .gallery-thumb > span:last-child { display: block; margin-top: 10px; font-size: 12px; }
.gallery-mobile-hint { display: none; }
.scene-ip { --hero-accent: #a1e2b9; }
.scene-ip .hero-atmosphere { background: radial-gradient(ellipse at 82% 45%, #1c685d66, transparent 55%); }
.scene-ip .art-ip { width: min(100%, 720px); margin: 0 auto; container: ip-art / inline-size; }
.art-ip .scene-depth { aspect-ratio: 36 / 29; }
.art-ip .ip-scene { display: block; width: 100%; height: auto; }
.art-ip .ip-floor { fill: none; stroke: #46716d; stroke-width: .7; opacity: .3; }
.art-ip .ip-solids { stroke-width: 1; stroke-linejoin: round; }
.art-ip .ip-shadow { fill: #020f1b; opacity: .7; }
.art-ip .ip-guide { fill: none; stroke: #679c90; stroke-width: 1; opacity: .75; }
.art-ip .ip-route { fill: none; stroke: #5eaa97; stroke-width: 1.3; stroke-linejoin: round; opacity: .62; }
.art-ip .ip-signal { fill: none; stroke: var(--hero-accent); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .045 .955; opacity: 0; }
.hero-motion-ready .ip-signal { animation: ip-signal 9s linear infinite; animation-delay: var(--ip-delay, 0s); animation-play-state: var(--hero-play-state); }
.art-ip .ip-port { fill: var(--hero-accent); stroke: #173d3b; stroke-width: 2; }
.art-ip .ip-label { fill: #e2f0ec; font-size: 24px; font-weight: 500; text-anchor: middle; paint-order: stroke; stroke: #081b2c; stroke-width: 5px; stroke-linejoin: round; }
.art-ip .ip-main-label { font-size: 34px; fill: var(--hero-accent); }
.art-ip .ip-sub-label { fill: #b7cece; font-size: 16px; font-weight: 400; stroke-width: 4px; }
.art-ip .ip-stamp { fill: #cef5dd; stroke: none; font: 500 63px Consolas, monospace; text-anchor: middle; }
.scene-ip .art-ip > figcaption { font-size: 12px; letter-spacing: .02em; }
@container ip-art (max-width: 520px) {
  .art-ip .ip-sub-label { display: none; }
  .art-ip .ip-label { font-size: 34px; }
  .art-ip .ip-main-label { font-size: 42px; }
}
@keyframes ip-signal { 0% { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 16% { stroke-dashoffset: .02; opacity: 1; } 17%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.scene-contact { background: #081b2c; }
.scene-contact > .container { z-index: 3; }
.scene-contact .hero-layout { grid-template-columns: 1fr; }
.scene-contact .hero-copy { max-width: 850px; }
.scene-contact .hero-copy h1 { font-size: clamp(48px, 5.8vw, 88px); }
.scene-contact .hero-copy h1 > span { color: #fff; }
.contact-backdrop { position: absolute; z-index: 0; inset: 0; width: 108%; height: 100%; margin: 0 0 0 -8%; }
.contact-backdrop .scene-depth { width: 104%; height: 108%; margin: -2% -2%; aspect-ratio: auto; }
.contact-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.scene-contact::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #051827ed 0%, #071c2bce 37%, #08213445 78%), linear-gradient(0deg, #071c2be0, transparent 40%); }
.hero-contact-links { display: flex; flex-wrap: wrap; gap: 24px 45px; margin-top: 38px; }
.hero-contact-links a { position: relative; display: block; min-height: 76px; padding: 14px 30px 8px 0; border-top: 1px solid #b3d3e380; }
.hero-contact-links small { display: block; color: #c0d5e1; font-size: 10px; letter-spacing: .05em; }
.hero-contact-links strong { display: block; color: #fff; font: 25px/1.9 Consolas, monospace; letter-spacing: -.03em; }
.hero-contact-links a > span { position: absolute; right: 0; top: 18px; color: #abefc8; }
.hero-contact-links a:hover strong { color: #abefc8; }
.hero-motion-ready:not(.hero-entered) .hero-copy > * { animation: hero-intro .95s cubic-bezier(.2,.65,.25,1) both; }
.hero-motion-ready:not(.hero-entered) .hero-copy h1 { animation-delay: .1s; }
.hero-motion-ready:not(.hero-entered) .hero-description { animation-delay: .22s; }
.hero-motion-ready:not(.hero-entered) :is(.button-row, .hero-contact-links) { animation-delay: .32s; }
.hero-motion-ready:not(.hero-entered) .hero-art { animation: hero-intro 1.45s cubic-bezier(.2,.65,.25,1) .1s both; }
.hero-motion-ready:not(.hero-entered) .wire-base { stroke-dasharray: 1800; animation: hero-draw 1.5s ease both; }
.hero-motion-ready .wire-flow > use { animation: hero-signal 9s linear infinite; animation-delay: var(--flow-delay, 0s); animation-play-state: var(--hero-play-state); }
.hero-motion-ready .product-halo { animation: hero-glow 9s ease-in-out infinite alternate; animation-play-state: var(--hero-play-state); }
.hero-motion-ready .motherboard-float { animation: motherboard-float 8s ease-in-out infinite; animation-play-state: var(--hero-play-state); }
.hero-motion-ready .contact-photo { animation: building-push 22s ease-in-out infinite alternate; animation-play-state: var(--hero-play-state); }
.hero-static *, .hero-static *::before, .hero-static *::after { animation: none !important; }
.hero-static .scene-depth { transform: none; transition: none; }
@keyframes hero-intro { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-draw { from { stroke-dashoffset: 1800; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes hero-signal { to { stroke-dashoffset: -1208; } }
@keyframes hero-glow { from { opacity: .7; } to { opacity: 1; } }
@keyframes motherboard-float { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
@keyframes building-push { from { transform: scale(1); } to { transform: scale(1.055); } }
@media (min-width: 1700px) {
  .site-header, .immersive-hero { --container: 1450px; }
}
@media (min-width: 861px) {
  /* 底部横线留在首屏下沿，入口与播放控制滚动后呈现。 */
  .scene-home .hero-layout { min-height: calc(100svh - 98px); }
  .scene-contact .hero-layout, .scene-nic .hero-layout, .scene-cpu .hero-layout, .scene-ip .hero-layout { min-height: calc(100svh - 168px); }
  /* 主视觉等比适应可用高度，避免宽屏图片撑高首屏。 */
  .art-nic { max-width: calc((100svh - 274px) * 4 / 3); }
  .scene-cpu .art-cpu { max-width: calc((100svh - 280px) * 4 / 3); }
  .scene-ip .art-ip { width: min(118%, 840px); margin-inline: 0; justify-self: center; max-width: calc((100svh - 280px) * 36 / 29); }
  .art-nic .product-float { top: 28%; left: -8%; }
}
@media (min-width: 861px) and (max-width: 1439px) {
  .scene-cpu .art-cpu { width: 120%; margin-left: -12%; }
  .art-cpu .product-callout, .art-nic .product-callout { font-size: 18px; }
  .art-cpu .product-callout small, .art-nic .product-callout small { font-size: 13px; }
}
@media (max-width: 1100px) {
  .hero-copy h1 { font-size: 56px; }
  .scene-nic .hero-copy h1 { font-size: 48px; }
  .scene-cpu .hero-copy h1, .scene-ip .hero-copy h1 { font-size: 45px; }
  .hero-layout { min-height: 582px; }
  .hero-business-links { gap: 10px 20px; }
  .hero-business-links a { font-size: 11px; gap: 9px; }
  .hero-art { width: 113%; }
  .art-nic { width: 121%; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  /* 图注的 48px 留白计入高度上限，避免窄桌面撑高首屏。 */
  .scene-cpu .art-cpu { max-width: calc((100svh - 328px) * 4 / 3); }
  .art-cpu .cpu-callout-platform { left: 0; top: -4%; }
  .art-cpu .cpu-callout-io { right: 0; bottom: -11%; }
  .scene-cpu .art-cpu > figcaption { margin-top: 48px; }
}
@media (max-width: 860px) {
  .hero-topline { padding-block: 21px; font-size: 9px; }
  .hero-layout { grid-template-columns: 1fr; min-height: 0; gap: 12px; padding-block: 47px 30px; }
  .hero-copy { max-width: 650px; }
  .hero-copy h1, .scene-nic .hero-copy h1 { font-size: 66px; }
  .scene-cpu .hero-copy h1, .scene-ip .hero-copy h1 { font-size: 56px; }
  .immersive-hero .hero-description { max-width: 540px; }
  .hero-art, .art-nic { width: min(100%, 680px); margin: -10px auto 0 -8%; }
  .scene-depth { transform: none; }
  .scene-cpu .art-cpu { width: 100%; max-width: 680px; margin: 8px auto 0; }
  .art-cpu .motherboard-stage { aspect-ratio: auto; gap: clamp(32px, 6vw, 48px); }
  .motherboard-float { top: 0; left: 0; width: 95%; }
  .art-cpu .motherboard-hero-image { transform: rotate(-8deg) scale(1.05); }
  /* 保持原标注行高，放大字体不撑高移动首屏。 */
  .art-cpu .product-callout { position: static; line-height: 25.2px; }
  .art-cpu .product-callout small { line-height: 18.7px; }
  .art-cpu .product-callout, .art-nic .product-callout { font-size: 16px; }
  .art-cpu .product-callout small, .art-nic .product-callout small { font-size: 12px; }
  .scene-home .art-home { margin-top: 24px; }
  .art-nic .callout-port { left: 8%; top: 4%; }
  .art-nic .callout-pcie { bottom: -4%; }
  .art-nic > figcaption { margin-top: 24px; }
  .cpu-callout-platform { justify-self: start; }
  .cpu-callout-io { justify-self: end; }
  .scene-cpu .art-cpu > figcaption { margin-top: 16px; }
  .motherboard-platforms { gap: 16px; }
  .brand-node { padding-left: 10px; }
  .brand-node strong { font-size: 17px; }
  .motherboards-page .supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motherboard-gallery .gallery-thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .motherboard-gallery .gallery-image-stage { --gallery-image-height: 360px; }
  .hero-bottom { padding-block: 16px; min-height: 78px; }
  .hero-business-links { gap: 4px 24px; }
  .hero-contact-links { gap: 24px 40px; }
  .scene-contact .hero-layout { min-height: 650px; padding-block: 60px; }
  .scene-contact .hero-copy h1 { font-size: 72px; }
  .contact-backdrop { position: absolute; width: 108%; margin: 0 0 0 -8%; }
  .scene-contact::after { background: linear-gradient(90deg, #061b2ce8, #071e30a3 70%), linear-gradient(0deg, #071b2bd9, transparent 70%); }
  .contact-photo { object-position: 68% center; }
}
@media (max-width: 600px) {
  .hero-topline { padding-block: 17px; font-size: 8px; letter-spacing: .06em; }
  .immersive-hero .breadcrumb { font-size: 10px; }
  .hero-layout { padding-block: 36px 25px; gap: 7px; }
  .hero-copy h1, .scene-nic .hero-copy h1 { font-size: clamp(34px, 10.4vw, 56px); }
  .scene-cpu .hero-copy h1, .scene-ip .hero-copy h1 { font-size: clamp(28px, 8.6vw, 45px); }
  .immersive-hero .hero-description { font-size: 13px; line-height: 1.95; margin-top: 22px; }
  .immersive-hero .button-row { margin-top: 25px; gap: 12px 22px; }
  .immersive-hero .button { font-size: 12px; padding-inline: 16px; gap: 17px; }
  .immersive-hero .text-link { font-size: 12px; gap: 12px; }
  .hero-art { margin-top: 3px; }
  .hero-art > figcaption { font-size: 7px; letter-spacing: .05em; }
  .hero-art > figcaption > span { margin-inline: 5px; }
  .product-callout { padding-top: 8px; font-size: 9px; }
  .product-callout small { font-size: 7px; margin-top: 3px; }
  .art-nic .callout-port { left: 4%; }
  .scene-cpu .hero-bottom { flex-wrap: wrap; justify-content: flex-end; }
  .motherboard-platforms { flex-basis: 100%; gap: 8px; padding-block: 8px; }
  .brand-node { padding-left: 6px; }
  .brand-node small { font-size: 7px; letter-spacing: .04em; }
  .brand-node strong { font-size: 14px; margin-top: 4px; }
  .motherboards-page #cpu-products { padding-block: 48px; }
  .motherboards-page #cpu-products .section-heading { margin-bottom: 28px; }
  .motherboards-page .supply-grid { gap: 12px; }
  .motherboards-page .supply-card { padding: 18px 16px; }
  .motherboards-page .supply-card h3 { font-size: 20px; margin-top: 14px; }
  .motherboards-page .supply-card .text-link { gap: 6px; font-size: 12px; }
  .motherboard-gallery .gallery-main { padding: 24px 16px 20px; }
  .motherboard-gallery .gallery-image-stage { --gallery-image-height: 230px; }
  .motherboard-gallery .gallery-main figcaption { margin-top: 16px; font-size: 16px; }
  .motherboard-gallery .gallery-thumbnails { display: flex; gap: 12px; overflow-x: auto; margin-top: 8px; padding: 8px 8px 16px; scroll-snap-type: x proximity; scroll-padding-inline: 8px; }
  .motherboard-gallery .gallery-thumb { flex: 0 0 152px; scroll-snap-align: start; }
  .motherboard-gallery .gallery-thumb-image { --gallery-image-height: 88px; }
  .gallery-mobile-hint { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; }
  .hero-bottom { flex-wrap: wrap; gap: 8px 18px; padding-block: 12px; }
  .hero-business-links { width: 100%; justify-content: space-between; gap: 4px 8px; }
  .hero-business-links a { font-size: 10px; gap: 5px; }
  .hero-business-links a > span:first-child { font-size: 8px; }
  .hero-motion-toggle { font-size: 10px; min-height: 44px; padding: 8px 10px; }
  .hero-scroll-link { font-size: 10px; gap: 10px; }
  .hero-facts { font-size: 9px; gap: 5px 16px; }
  .scene-contact .hero-layout { min-height: 610px; padding-block: 45px; }
  .scene-contact .hero-copy h1 { font-size: clamp(37px, 11.5vw, 58px); }
  .hero-contact-links { display: grid; gap: 14px; margin-top: 32px; max-width: 320px; }
  .hero-contact-links a { min-height: 73px; padding-top: 12px; }
  .hero-contact-links strong { font-size: 24px; }
  .hero-contact-links small { font-size: 9px; }
}

@media (max-width: 359px) {
  .motherboard-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .motherboards-page .supply-card { padding-inline: 12px; }
  .motherboards-page .supply-card h3 { font-size: 18px; }
}

/* 两类实拍共用固定舞台，切换不影响左侧文案与首屏布局。 */
.home-product-slider .home-slider-halo { position: absolute; inset: 12% -5% 3%; background: radial-gradient(ellipse, #4e9c9829, transparent 67%); pointer-events: none; }
.home-product-slider .home-slider-halo::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 10%; height: 27%; border: 1px solid #7db5b529; border-radius: 50%; transform: rotate(-12deg); }
.home-product-slider .home-slider-viewport { position: absolute; inset: 0 0 calc(56px - 9px * 1.8); overflow: hidden; touch-action: pan-y pinch-zoom; }
.home-product-slider .home-slider-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.home-product-slider .home-slider-slide { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; flex: 0 0 100%; min-width: 0; height: 100%; padding: 3% 4% 2%; }
.home-product-slider #home-slide-cpu { row-gap: 4px; }
.home-product-slider .home-slider-heading { position: relative; z-index: 2; justify-self: start; padding-left: 16px; border-left: 2px solid var(--hero-accent); }
.home-product-slider .home-slider-heading strong { display: block; color: #eef6fa; font-size: clamp(18px, 1.65vw, 25px); font-weight: 500; line-height: 1.5; letter-spacing: .02em; }
.home-product-slider .home-slider-heading > span { display: block; margin-top: 7px; color: #afc7d4; font-size: 12px; line-height: 1.7; }
.home-product-slider .home-slider-heading > .home-slider-compact-copy { display: none; }
.home-product-slider .home-slider-index { position: absolute; top: 5%; right: 4%; color: #e3efe9; font: 12px/1.5 Consolas, monospace; letter-spacing: .08em; pointer-events: none; }
.home-product-slider .home-slider-index > span { color: #9db6c5; }
.home-product-slider .home-slider-product { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; filter: drop-shadow(0 24px 20px #0007); }
.home-product-slider .home-slider-nic img { display: block; width: auto; height: auto; max-width: 100%; max-height: 60%; transform: rotate(-12deg); }
.home-product-slider .home-slider-cpu { margin-inline: 4%; }
.home-product-slider .home-slider-cpu img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.home-product-slider .home-slider-capability { justify-self: end; min-width: 0; padding-top: 10px; border-top: 1px solid #8de5b380; text-align: right; }
.home-product-slider .home-slider-capability strong { display: block; color: #dfefe9; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; }
.home-product-slider .home-slider-capability > span { display: block; margin-top: 4px; color: #afc7d4; font-size: 12px; line-height: 1.6; }
/* 控制条沿用原图注的占高，避免新增控件推动首屏的其他内容。 */
.home-product-slider > .home-slider-controls { display: flex; align-items: center; gap: 28px; min-height: 56px; margin: calc(9px * 1.8 - 56px) 0 0; text-align: left; font: inherit; letter-spacing: normal; }
.home-product-slider .home-slider-tabs { display: flex; flex: 1; min-width: 0; gap: 28px; }
.home-product-slider .home-slider-tab { position: relative; display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 52px; padding: 12px 0; border: 0; border-top: 1px solid #83a5ba66; color: #b4cbd8; background: transparent; text-align: left; transition: color .2s, border-color .2s; }
.home-product-slider .home-slider-tab strong { font-size: 14px; font-weight: 500; white-space: nowrap; }
.home-product-slider .home-slider-tab-number { color: #9db8c8; font: 10px/1.5 Consolas, monospace; }
.home-product-slider .home-slider-tab:hover, .home-product-slider .home-slider-tab.is-selected { color: #c6f4d9; border-color: #8de5b3a6; }
.home-product-slider .home-slider-progress { position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--hero-accent); transform: scaleX(0); transform-origin: left; visibility: hidden; }
.home-product-slider .home-slider-tab.is-selected .home-slider-progress { visibility: visible; }
.home-product-slider .home-slider-actions { display: flex; flex-shrink: 0; gap: 6px; }
.home-product-slider :is(.home-slider-arrow, .home-slider-playback) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #83a5ba66; border-radius: 50%; color: #d4e5ef; background: #0b233859; transition: color .2s, border-color .2s, background .2s; }
.home-product-slider :is(.home-slider-arrow, .home-slider-playback):hover { color: #c6f4d9; border-color: #8de5b3a6; background: #20464b; }
.home-product-slider :is(.home-slider-arrow, .home-slider-playback):active { background: #315c5b; }
.home-product-slider .home-slider-playback:disabled { cursor: default; opacity: .65; }
.home-product-slider .home-slider-status { margin-top: 12px; color: #f1d3b3; font-size: 12px; }
@media (max-width: 1100px) {
  .home-product-slider .home-slider-slide { grid-template-rows: auto minmax(0, 1fr); }
  .home-product-slider .home-slider-heading > .home-slider-desktop-copy, .home-product-slider .home-slider-capability { display: none; }
  .home-product-slider .home-slider-heading > .home-slider-compact-copy { display: block; }
  .home-product-slider .home-slider-nic img { width: 100%; max-height: none; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .home-product-slider .home-slider-tab-number { display: none; }
}
@media (max-width: 860px) {
  .scene-home .home-product-slider { width: min(100%, 680px); margin-inline: auto; }
  .home-product-slider .home-slider-viewport { bottom: 0; }
  .home-product-slider > .home-slider-controls { min-height: calc(40px + 9px * 1.8); margin-top: 0; }
  .home-product-slider .home-slider-heading strong { font-size: 22px; }
}
@media (max-width: 600px) {
  .home-product-slider .home-slider-slide { gap: 12px; padding: 0 1%; }
  .home-product-slider .home-slider-heading { padding-left: 12px; }
  .home-product-slider .home-slider-heading strong { font-size: 17px; }
  .home-product-slider .home-slider-heading > span { margin-top: 4px; font-size: 11px; }
  .home-product-slider .home-slider-index { top: 2%; right: 1%; font-size: 10px; }
  .home-product-slider .home-slider-nic { margin-inline: 3%; }
  .home-product-slider > .home-slider-controls { gap: 12px; min-height: calc(40px + 7px * 1.8); }
  .home-product-slider .home-slider-tabs { gap: 14px; }
  .home-product-slider .home-slider-tab { gap: 0; }
  .home-product-slider .home-slider-tab strong { font-size: 12px; }
  .home-product-slider .home-slider-tab-number { display: none; }
  .home-product-slider .home-slider-actions { gap: 0; }
}
@media (max-width: 359px) {
  .home-product-slider .home-slider-tab { padding-block: 8px; }
  .home-product-slider .home-slider-tab strong { min-width: 0; white-space: normal; line-height: 1.4; text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) {
  .home-product-slider .home-slider-track { transition: none; }
  .home-product-slider .home-slider-tab.is-selected .home-slider-progress { transform: scaleX(1); }
}

/* 产品详情页共用导航与窄屏信息表；网卡两张实拍并排展示。 */
:is(.nic-detail-page, .motherboard-detail-page) .site-nav a[aria-current="location"] { color: #8de5b3; }
:is(.nic-detail-page, .motherboard-detail-page) .site-nav a[aria-current="location"]::after { transform: scaleX(1); }
:is(.nic-detail-page, .motherboard-detail-page) .spec-table { min-width: 0; }
:is(.nic-detail-page, .motherboard-detail-page) .spec-table tbody th { width: 36%; }
:is(.nic-detail-page, .motherboard-detail-page) .spec-table tbody td { width: 64%; }
.nic-detail-page .gallery-thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 千兆电口与万兆光口外形不同，按千兆实拍单独保留器件轮廓。 */
.nic-detail-gigabit .product-cutout { clip-path: polygon(0.00% 86.68%,2.27% 74.49%,2.34% 42.89%,6.48% 24.15%,6.72% 23.48%,8.28% 23.48%,8.36% 15.12%,11.95% 0.00%,20.23% 0.45%,20.70% 1.58%,21.25% 9.71%,31.48% 9.71%,31.64% 11.74%,31.80% 9.71%,32.03% 9.71%,32.11% 11.74%,32.27% 9.71%,32.97% 9.71%,33.05% 11.51%,33.28% 9.71%,33.52% 9.71%,33.59% 11.29%,33.75% 9.71%,34.30% 9.71%,34.53% 11.51%,34.69% 9.71%,35.00% 11.51%,35.08% 9.71%,35.70% 9.71%,35.86% 11.51%,36.02% 9.71%,36.17% 9.48%,36.25% 11.29%,36.41% 9.71%,37.03% 9.71%,37.27% 12.19%,37.34% 9.71%,37.66% 11.51%,37.73% 9.71%,38.36% 9.71%,38.52% 11.51%,38.75% 9.48%,38.98% 11.51%,39.06% 9.71%,39.69% 9.71%,39.92% 11.51%,40.08% 9.48%,40.31% 11.29%,40.47% 9.71%,41.02% 9.71%,41.25% 11.51%,41.33% 9.48%,41.56% 9.48%,41.64% 11.29%,41.72% 9.71%,42.34% 9.71%,42.58% 11.29%,42.81% 9.48%,42.97% 11.29%,43.05% 9.48%,53.13% 9.48%,53.28% 7.45%,55.31% 7.45%,55.55% 9.48%,61.25% 9.71%,61.48% 6.77%,64.61% 6.77%,65.00% 9.71%,66.72% 9.71%,66.95% 7.90%,68.52% 7.90%,68.83% 9.71%,87.58% 9.93%,88.13% 10.84%,88.91% 14.67%,89.30% 15.35%,89.38% 16.93%,89.69% 17.16%,89.84% 19.19%,90.16% 19.41%,90.78% 23.70%,91.09% 23.93%,91.80% 28.44%,92.19% 29.12%,92.34% 31.15%,99.92% 68.17%,99.92% 68.17%,99.38% 71.78%,98.44% 72.23%,98.13% 76.75%,95.55% 78.33%,92.03% 78.78%,72.27% 77.65%,60.00% 78.10%,58.83% 79.68%,58.59% 93.68%,57.34% 97.97%,56.41% 98.42%,44.84% 98.87%,43.59% 97.74%,42.81% 95.26%,42.42% 96.84%,41.25% 97.07%,39.92% 99.10%,34.77% 99.10%,33.98% 97.74%,33.13% 94.13%,32.89% 86.23%,31.56% 87.13%,30.00% 92.55%,28.28% 94.36%,26.72% 94.13%,25.86% 92.78%,25.39% 90.97%,23.91% 89.39%,17.58% 89.16%,13.20% 90.29%,10.23% 94.58%,8.52% 95.71%,4.38% 95.71%,1.56% 94.58%,0.39% 90.29%,0.00% 87.36%); }