/* VMware server virtualization source design, page-scoped. */

/* =========================================================
   Tokens
   ========================================================= */
#vmware-server-virtualization-page{
  /* Surface — 近黑深蓝（硬核终端 · 更深底 + 荧光描边） */
  --ink-0: #03070E;
  --ink-1: #060D18;
  --ink-2: #0A1420;
  --ink-3: #0E1B2A;
  --ink-4: #132436;
  --line:  rgba(91,214,220,.12);
  --line-2: rgba(91,214,220,.24);
  --line-3: rgba(91,214,220,.42);

  /* Paper — blueprint band（同步加深） */
  --paper:     #03070E;
  --paper-2:   #060D18;
  --paper-3:   #0A1420;
  --paper-line: rgba(91,214,220,.14);
  --paper-line-2: rgba(91,214,220,.30);

  /* Text */
  --t:        #EAEDF3;
  --t2:       #A6B1C1;
  --t3:       #6E7989;
  --t-paper:  #FFFFFF;
  --t-paper-2:#B8C4D4;

  /* Signals */
  --lime:    #5BD6DC;
  --lime-2:  #4AC4CC;
  --mint:    #67DDAA;
  --mint-2:  #4FC89A;
  --amber:   #F1C56F;
  --amber-2: #C99A4A;
  --violet:  #C6A9FF;
  --violet-2:#A88DF0;
  --blue:    #71A9FF;
  --red:     #FF8E8E;

  /* Geometry — 终端方角（去掉大圆角，改用 2-4px 微圆角） */
  --s-section: clamp(54px, 6.5vw, 92px);
  --s-card: 18px;
  --s-card-tight: 12px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  /* Typography */
  --f-display: "Space Grotesk", "Noto Sans SC", system-ui, sans-serif;
  --f-body:    "Noto Sans SC", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, "Courier New", monospace;

  /* Shadows — whisper not shout */
  --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px var(--line);
  --sh-2: 0 0 0 1px var(--line-2), 0 14px 40px rgba(0,0,0,.35);
  --sh-paper: 0 0 0 1px var(--paper-line), 0 14px 40px rgba(255,255,255,.10);
}

/* =========================================================
   Reset / base
   ========================================================= */
#vmware-server-virtualization-page *,#vmware-server-virtualization-page *::before,#vmware-server-virtualization-page *::after{box-sizing:border-box}
#vmware-server-virtualization-page,#vmware-server-virtualization-page{margin:0;padding:0}
#vmware-server-virtualization-page{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
#vmware-server-virtualization-page{
  background: var(--ink-0);
  color: var(--t);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .01em;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
#vmware-server-virtualization-page img,#vmware-server-virtualization-page svg{display:block;max-width:100%}
#vmware-server-virtualization-page a{color:inherit;text-decoration:none}
#vmware-server-virtualization-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#vmware-server-virtualization-page ::selection{background: var(--lime); color: var(--ink-0)}

/* Global background — 终端荧光网格 + CRT 扫描线 */
#vmware-server-virtualization-page::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(91,214,220,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91,214,220,.055) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 25%, #000 30%, transparent 78%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift{
  0%{ background-position: -1px -1px}
  100%{ background-position: 33px 33px}
}
/* CRT 扫描线：1px 亮 / 3px 暗 的重复横纹 + 顶部荧光晕 */
#vmware-server-virtualization-page::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(91,214,220,.028) 0px, rgba(91,214,220,.028) 1px, transparent 1px, transparent 3px),
    radial-gradient(1000px 620px at 78% -12%, rgba(91,214,220,.09), transparent 62%),
    radial-gradient(900px 600px at 0% 112%, rgba(198,169,255,.07), transparent 60%);
  animation: scanlineRoll 8s linear infinite;
}
@keyframes scanlineRoll{
  0%{ background-position: 0 0, 0 0, 0 0}
  100%{ background-position: 0 3px, 0 0, 0 0}
}

#vmware-server-virtualization-page main,#vmware-server-virtualization-page header,#vmware-server-virtualization-page nav,#vmware-server-virtualization-page footer,#vmware-server-virtualization-page section{position:relative;z-index:1}

#vmware-server-virtualization-page .container{max-width:1240px;margin:0 auto;padding: 0 28px}
@media (max-width:720px){ #vmware-server-virtualization-page .container{padding: 0 20px} }

/* Type helpers */
#vmware-server-virtualization-page .eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime);
  position: relative;
  padding-left: 18px;
}
/* 终端提示符 $ （在 eyebrow 文本最前，绝对定位） */
#vmware-server-virtualization-page .eyebrow::after{
  content:"$";
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  font-weight: 700;
  color: var(--mint);
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{
  0%,49%{ opacity: 1}
  50%,100%{ opacity: .35}
}
#vmware-server-virtualization-page .eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(91,214,220,.6);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping{
  0%   {box-shadow: 0 0 0 0 rgba(91,214,220,.6)}
  70%  {box-shadow: 0 0 0 10px rgba(91,214,220,0)}
  100% {box-shadow: 0 0 0 0 rgba(91,214,220,0)}
}
#vmware-server-virtualization-page .eyebrow.dim{color: #FFFFFF}
#vmware-server-virtualization-page .eyebrow.dim .dot{background: var(--lime); box-shadow: 0 0 0 0 rgba(91,214,220,.6); animation-name: ping}
@keyframes ping2{
  0%   {box-shadow: 0 0 0 0 rgba(166,177,193,.6)}
  70%  {box-shadow: 0 0 0 10px rgba(166,177,193,0)}
  100% {box-shadow: 0 0 0 0 rgba(166,177,193,0)}
}

#vmware-server-virtualization-page h1,#vmware-server-virtualization-page h2,#vmware-server-virtualization-page h3,#vmware-server-virtualization-page h4{font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.14; margin:0; color: var(--t)}
#vmware-server-virtualization-page h2{ font-size: clamp(28px, 3.4vw, 44px); line-height: 1.16}
#vmware-server-virtualization-page h3{ font-size: clamp(20px, 2vw, 26px); line-height: 1.22}
#vmware-server-virtualization-page h4{ font-size: 16px; font-weight: 600; letter-spacing: .01em}
#vmware-server-virtualization-page p{ margin: 0}

#vmware-server-virtualization-page .mono{font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--t2)}
#vmware-server-virtualization-page .dim{color: var(--t2)}
#vmware-server-virtualization-page .dim2{color: var(--t3)}

/* =========================================================
   Reveal (with three-layer fallback per house rule)
   ========================================================= */
#vmware-server-virtualization-page .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.16,.84,.34,1), transform .8s cubic-bezier(.16,.84,.34,1);
}
#vmware-server-virtualization-page .reveal.is-on{ opacity: 1; transform: none }
#vmware-server-virtualization-page .reveal.d1{transition-delay:.05s}
#vmware-server-virtualization-page .reveal.d2{transition-delay:.12s}
#vmware-server-virtualization-page .reveal.d3{transition-delay:.2s}
#vmware-server-virtualization-page .reveal.d4{transition-delay:.28s}
#vmware-server-virtualization-page .reveal.d5{transition-delay:.36s}
#vmware-server-virtualization-page .reveal.d6{transition-delay:.44s}

@media (prefers-reduced-motion: reduce){
  #vmware-server-virtualization-page *,#vmware-server-virtualization-page *::before,#vmware-server-virtualization-page *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important}
  #vmware-server-virtualization-page .reveal{ opacity:1; transform: none}
}

/* =========================================================
   Nav
   ========================================================= */
#vmware-server-virtualization-page .nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(6,16,29,.66);
  border-bottom: 1px solid var(--line);
}
#vmware-server-virtualization-page .nav-inner{
  display: flex; align-items: center; gap: 28px;
  height: 60px;
}
#vmware-server-virtualization-page .brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  letter-spacing: .02em;
}
#vmware-server-virtualization-page .brand .mark{
  width: 22px; height: 22px; position: relative;
  display: inline-block;
}
#vmware-server-virtualization-page .brand .mark svg{width: 100%; height: 100%}
#vmware-server-virtualization-page .brand b{color: var(--lime)}
#vmware-server-virtualization-page .brand .sub{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3); margin-left: 10px;
  padding-left: 10px; border-left: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .nav-links{
  display: flex; gap: 24px; margin-left: auto; font-size: 13.5px; color: var(--t2);
}
#vmware-server-virtualization-page .nav-links a{
  position: relative; padding: 6px 0;
  transition: color .2s;
}
#vmware-server-virtualization-page .nav-links a:hover{ color: var(--t)}
#vmware-server-virtualization-page .nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height: 1px; width: 0;
  background: var(--lime);
  transition: width .25s ease-out;
}
#vmware-server-virtualization-page .nav-links a:hover::after{ width: 100%}
#vmware-server-virtualization-page .nav-cta{
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: 999px;
  background: var(--lime); color: var(--ink-0);
  font-family: var(--f-display); font-weight: 600; font-size: 13px;
  transition: transform .15s, box-shadow .25s;
}
#vmware-server-virtualization-page .nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 30px rgba(91,214,220,.3)}
#vmware-server-virtualization-page .nav-cta .arr{transition: transform .2s}
#vmware-server-virtualization-page .nav-cta:hover .arr{ transform: translateX(3px)}
@media (max-width: 980px){
  #vmware-server-virtualization-page .nav-links{ display: none}
  #vmware-server-virtualization-page .brand .sub{ display: none}
}

/* =========================================================
   Hero
   ========================================================= */
#vmware-server-virtualization-page .hero{
  position: relative;
  padding: clamp(64px, 9vw, 132px) 0 clamp(56px, 8vw, 120px);
  overflow: hidden;
}
#vmware-server-virtualization-page .hero::before{
  /* Background photo (server rack) — bottom layer */
  content:""; position: absolute; inset: 0;
  z-index: 0;
  background-image: url('../images/vmware-server-virtualization/bg-data-center.jpg');
  background-size: cover; background-position: center 40%;
  filter: grayscale(.6) contrast(1.1) brightness(.32) saturate(.45);
  opacity: .45;
}
#vmware-server-virtualization-page .hero::after{
  /* Vignette + signal glow — MUST stay below the content, otherwise it dims the text */
  content:""; position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 70% at 32% 50%, rgba(6,16,29,.92) 0%, rgba(6,16,29,.55) 55%, rgba(6,16,29,.15) 90%),
    linear-gradient(180deg, rgba(6,16,29,.45) 0%, rgba(6,16,29,.15) 35%, rgba(6,16,29,.55) 100%),
    radial-gradient(900px 600px at 86% 25%, rgba(91,214,220,.22), transparent 60%),
    radial-gradient(800px 600px at 18% 88%, rgba(198,169,255,.12), transparent 60%);
}
/* Hero content sits above the bg + veil layers */
#vmware-server-virtualization-page .hero .container.hero-grid{ position: relative; z-index: 2}
#vmware-server-virtualization-page .hero-scroll-cue{ z-index: 2}

#vmware-server-virtualization-page .hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 1080px){
  #vmware-server-virtualization-page .hero-grid{ grid-template-columns: 1fr; gap: 40px}
}

#vmware-server-virtualization-page .hero-text{
  position: relative;
  max-width: 640px;
}

#vmware-server-virtualization-page .hero h1{
  font-size: clamp(34px, 4.8vw, 62px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.024em;
  color: #FFFFFF;
}
#vmware-server-virtualization-page .hero h1 em{
  font-style: normal;
  color: #FFFFFF;
  font-weight: 600;
}
#vmware-server-virtualization-page .hero h1 .accent{
  color: var(--lime);
  position: relative;
}
#vmware-server-virtualization-page .hero h1 .accent::after{
  content:"";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, var(--lime), transparent);
}
#vmware-server-virtualization-page .hero-sub{
  margin-top: 24px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,.82);
  max-width: 56ch;
  line-height: 1.65;
}
#vmware-server-virtualization-page .hero-actions{
  margin-top: 32px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
#vmware-server-virtualization-page .btn{
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: 14px;
  transition: transform .15s, background .25s, box-shadow .25s, color .25s;
}
#vmware-server-virtualization-page .btn-primary{
  background: var(--lime); color: var(--ink-0);
  box-shadow: 0 0 0 1px rgba(91,214,220,.6), 0 8px 32px rgba(91,214,220,.25);
}
#vmware-server-virtualization-page .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(91,214,220,.8), 0 14px 40px rgba(91,214,220,.35)}
#vmware-server-virtualization-page .btn-ghost{
  background: transparent; color: var(--t);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
#vmware-server-virtualization-page .btn-ghost:hover{ background: rgba(255,255,255,.05)}
#vmware-server-virtualization-page .btn .arr{ transition: transform .2s}
#vmware-server-virtualization-page .btn:hover .arr{ transform: translateX(3px)}

#vmware-server-virtualization-page .hero-meta{
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0;
  font-family: var(--f-mono); font-size: 12px; color: var(--t2);
  padding: 18px 0 0;
  border-top: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .hero-meta > div{
  padding: 0 18px; border-right: 1px dashed var(--line-2);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
#vmware-server-virtualization-page .hero-meta > div:last-child{ border-right: none}
#vmware-server-virtualization-page .hero-meta > div::before{
  content:""; position: absolute; left: 0; top: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 6px var(--mint);
  animation: pulseDot 1.4s ease-in-out infinite;
}
#vmware-server-virtualization-page .hero-meta > div:nth-child(2)::before{ background: var(--lime); box-shadow: 0 0 6px var(--lime); animation-delay: .3s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(3)::before{ background: var(--amber); box-shadow: 0 0 6px var(--amber); animation-delay: .6s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(4)::before{ background: var(--violet); box-shadow: 0 0 6px var(--violet); animation-delay: .9s}
#vmware-server-virtualization-page .hero-meta b{
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--f-mono); font-weight: 700;
  font-size: 26px; color: #FFFFFF; letter-spacing: -0.02em;
  line-height: 1;
}
#vmware-server-virtualization-page .hero-meta b::after{
  content: attr(data-unit);
  font-size: 11px; font-weight: 500; color: var(--t3); letter-spacing: .04em;
}
#vmware-server-virtualization-page .hero-meta span{ color: var(--t3); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase}

/* Hero right visual — floating topology + ticker (no box) */
#vmware-server-virtualization-page .hero-visual{
  position: relative;
  display: flex; flex-direction: column;
  gap: 36px;
}

/* ============ 终端窗口外壳（硬核科技） ============ */
#vmware-server-virtualization-page .term-shell{
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(10,20,32,.9) 0%, rgba(3,7,14,.95) 100%);
  box-shadow: 0 0 0 1px rgba(91,214,220,.06), 0 24px 60px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(91,214,220,.03);
  overflow: hidden;
}
#vmware-server-virtualization-page .term-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: rgba(91,214,220,.05);
  border-bottom: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .term-dots{ display: inline-flex; gap: 6px}
#vmware-server-virtualization-page .term-dots i{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-3);
  display: block;
}
#vmware-server-virtualization-page .term-dots i:first-child{ background: rgba(255,142,142,.55); animation: severityBlink 2.2s ease-in-out infinite}
#vmware-server-virtualization-page .term-dots i:nth-child(2){ background: rgba(241,197,111,.55); animation: severityBlink 2.6s ease-in-out infinite .4s}
#vmware-server-virtualization-page .term-dots i:last-child{ background: rgba(103,221,170,.55); animation: severityBlink 3s ease-in-out infinite .8s}
#vmware-server-virtualization-page .term-title{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--t2); flex: 1;
}
#vmware-server-virtualization-page .term-badge{
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  color: var(--mint);
  padding: 3px 8px; border-radius: 2px;
  border: 1px solid rgba(103,221,170,.4);
  background: rgba(103,221,170,.08);
  animation: pulseDot 1.8s ease-in-out infinite;
}
#vmware-server-virtualization-page .term-body{
  position: relative;
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 22px;
}
/* 终端内扫描光带（缓慢下移） */
#vmware-server-virtualization-page .term-body::before{
  content:""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(91,214,220,.055), transparent);
  animation: termScan 5.5s linear infinite;
}
@keyframes termScan{
  0%{ transform: translateY(-90px)}
  100%{ transform: translateY(620px)}
}

#vmware-server-virtualization-page .hero-topology{
  position: relative;
}
#vmware-server-virtualization-page .hero-topology svg{ width: 100%; height: auto; display: block}
#vmware-server-virtualization-page .hero-topology text{ font-family: var(--f-mono); font-size: 9.5px; fill: var(--t2); letter-spacing: .04em}
#vmware-server-virtualization-page .hero-topology .host rect{ fill: rgba(10,26,46,.6); stroke: var(--line-2); stroke-width: 1}
#vmware-server-virtualization-page .hero-topology .host.is-active rect{ stroke: var(--lime); filter: drop-shadow(0 0 6px rgba(91,214,220,.4))}
#vmware-server-virtualization-page .hero-topology .vcenter rect{ fill: rgba(15,34,56,.7); stroke: var(--lime); stroke-width: 1.4}
#vmware-server-virtualization-page .hero-topology .vcenter text{ fill: var(--lime)}
#vmware-server-virtualization-page .hero-topology .vm{ fill: var(--lime); opacity: .85}
#vmware-server-virtualization-page .hero-topology .vm.dim{ fill: var(--t3); opacity: .45}
#vmware-server-virtualization-page .hero-topology .link{ fill: none; stroke: var(--lime); stroke-opacity: .4; stroke-width: 1}
#vmware-server-virtualization-page .hero-topology .link.faint{ stroke: var(--line-2); stroke-dasharray: 2 3; stroke-opacity: .8}
#vmware-server-virtualization-page .hero-topology .pkt{ fill: var(--mint); filter: drop-shadow(0 0 4px var(--mint))}

#vmware-server-virtualization-page .hero-statusbar{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
#vmware-server-virtualization-page .hero-statusbar b{
  color: var(--lime); font-weight: 600;
  text-transform: none; letter-spacing: .02em;
}
#vmware-server-virtualization-page .hero-statusbar i{
  font-style: normal; color: rgba(255,255,255,.85);
}

#vmware-server-virtualization-page .hero-ticker{
  display: flex; flex-direction: column;
}
#vmware-server-virtualization-page .hero-ticker h5{
  margin: 0 0 10px;
  font-family: var(--f-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint);
  display: flex; align-items: center; gap: 8px;
}
#vmware-server-virtualization-page .hero-ticker h5 .livedot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 6px var(--mint);
  animation: pulseDot 1.2s ease-in-out infinite;
}

#vmware-server-virtualization-page .event{
  padding: 7px 10px;
  border-left: 2px solid var(--line-2);
  color: rgba(255,255,255,.82);
  line-height: 1.45;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s, transform .35s, border-color .35s;
  font-family: var(--f-mono); font-size: 11.5px;
}
#vmware-server-virtualization-page .event.is-new{
  opacity: 1; transform: none;
}
#vmware-server-virtualization-page .event.ok{ border-color: var(--mint-2); color: #FFFFFF}
#vmware-server-virtualization-page .event.info{ border-color: var(--blue); color: #FFFFFF}
#vmware-server-virtualization-page .event.warn{ border-color: var(--amber); color: #FFFFFF}
#vmware-server-virtualization-page .event.crit{ border-color: var(--red); color: #FFFFFF}
#vmware-server-virtualization-page .event .t{ display: inline; color: rgba(255,255,255,.5); font-size: 10.5px; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line-2)}

/* Hero scan beam */
#vmware-server-virtualization-page .scan-beam{
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(91,214,220,.65), 0 0 24px rgba(91,214,220,.4);
  opacity: .85;
  animation: scan 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes pulseDot{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)}}
@keyframes scan{
  0%, 100%{ top: 4%; opacity: .25}
  50%{ top: 96%; opacity: .95}
}

/* h2 em 文字硬核感：em 末尾加闪烁光标 */
#vmware-server-virtualization-page h2 em::after{
  content:"_";
  font-weight: 400;
  color: var(--lime);
  margin-left: 2px;
  animation: caretBlink 1s steps(2) infinite;
}
#vmware-server-virtualization-page .paper h2 em::after{ color: var(--ink-0)}

#vmware-server-virtualization-page .hero-scroll-cue{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 18px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--t3); text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#vmware-server-virtualization-page .hero-scroll-cue .bar{
  width: 1px; height: 30px; background: linear-gradient(180deg, var(--lime), transparent);
  position: relative; overflow: hidden;
}
#vmware-server-virtualization-page .hero-scroll-cue .bar::after{
  content:""; position: absolute; left: 0; right: 0; height: 8px;
  background: var(--lime);
  animation: scroll 1.8s ease-in-out infinite;
}
@keyframes scroll{ 0%{ top: -8px} 100%{ top: 30px}}

/* =========================================================
   Section primitives
   ========================================================= */
#vmware-server-virtualization-page section{ padding: var(--s-section) 0 }
#vmware-server-virtualization-page .sec-head{ display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: 40px}
#vmware-server-virtualization-page .sec-head h2 em{ font-style: normal; color: var(--lime)}
#vmware-server-virtualization-page .sec-head .lead{ font-size: 16.5px; color: var(--t2); line-height: 1.7; max-width: 62ch}
#vmware-server-virtualization-page .sec-head .meta-line{
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t3);
}
#vmware-server-virtualization-page .sec-head .meta-line i{ font-style: normal; color: var(--t2)}
#vmware-server-virtualization-page .sec-head .meta-line .sep{ color: var(--t3)}

/* Section paper variant */
#vmware-server-virtualization-page .paper{ background: var(--paper); color: var(--t-paper)}
#vmware-server-virtualization-page .paper h2,#vmware-server-virtualization-page .paper h3{ color: var(--t-paper)}
#vmware-server-virtualization-page .paper .eyebrow{ color: var(--lime)}
#vmware-server-virtualization-page .paper .eyebrow .dot{ background: var(--ink-2); box-shadow: 0 0 0 0 rgba(255,255,255,.55); animation-name: pingInk}
@keyframes pingInk{
  0%{box-shadow: 0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow: 0 0 0 10px rgba(91,214,220,0)}
  100%{box-shadow: 0 0 0 0 rgba(91,214,220,0)}
}

/* =========================================================
   Animation library — 多动效库（≥30 个 keyframes）
   ========================================================= */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(91,214,220,.55)}70%{box-shadow:0 0 0 14px rgba(91,214,220,0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes driftX{0%{transform:translateX(0)}100%{transform:translateX(48px)}}
@keyframes driftY{0%{transform:translateY(0)}100%{transform:translateY(36px)}}
@keyframes flow{0%{stroke-dashoffset:24}100%{stroke-dashoffset:0}}
@keyframes flowR{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-24}}
@keyframes rotate360{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spin12{from{transform:rotate(0)}to{transform:rotate(12deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}
@keyframes wobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes slideRight{from{transform:translateX(-12px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes underlineSweep{0%{transform:scaleX(0);transform-origin:left}50%,100%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes counterUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes glowLime{0%,100%{filter:drop-shadow(0 0 0 rgba(91,214,220,0))}50%{filter:drop-shadow(0 0 6px rgba(91,214,220,.65))}}
@keyframes glowAmber{0%,100%{filter:drop-shadow(0 0 0 rgba(241,197,111,0))}50%{filter:drop-shadow(0 0 6px rgba(241,197,111,.6))}}
@keyframes glowMint{0%,100%{filter:drop-shadow(0 0 0 rgba(103,221,170,0))}50%{filter:drop-shadow(0 0 6px rgba(103,221,170,.6))}}
@keyframes glowViolet{0%,100%{filter:drop-shadow(0 0 0 rgba(198,169,255,0))}50%{filter:drop-shadow(0 0 6px rgba(198,169,255,.6))}}
@keyframes tickerSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes gridShift{0%{background-position:0 0}100%{background-position:48px 48px}}
@keyframes cornerBlink{0%,100%{opacity:.85}50%{opacity:.35}}
@keyframes dotPulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
@keyframes scaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes arrowSlide{0%{transform:translateX(-3px);opacity:.6}50%{transform:translateX(3px);opacity:1}100%{transform:translateX(-3px);opacity:.6}}
@keyframes numberTick{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}75%{transform:translateY(2px)}}
@keyframes severityBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.08)}}
@keyframes fadeInRight{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes statusBlink{0%,100%{background:var(--lime)}50%{background:rgba(91,214,220,.25)}}
@keyframes markerPulse{0%{r:3;opacity:1}100%{r:12;opacity:0}}
@keyframes verticalScan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes horizScan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes ringFill{0%{stroke-dashoffset:213.6}100%{stroke-dashoffset:0}}
@keyframes underlinePulse{0%,100%{transform:scaleX(1);opacity:.7}50%{transform:scaleX(.6);opacity:1}}
@keyframes shimmerSweep{0%{transform:translateX(-100%) skewX(-12deg)}100%{transform:translateX(200%) skewX(-12deg)}}
@keyframes tagHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pillGlow{0%,100%{box-shadow:0 0 0 0 rgba(91,214,220,0)}50%{box-shadow:0 0 12px 1px rgba(91,214,220,.45)}}
@keyframes diagDash{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-32}}
@keyframes iconRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#vmware-server-virtualization-page .paper .lead{ color: var(--t-paper-2)}
#vmware-server-virtualization-page .paper .mono{ color: var(--t-paper-2)}
#vmware-server-virtualization-page .paper .dim{ color: var(--t-paper-2)}

/* Section divider — a thin signal line with annotation */
#vmware-server-virtualization-page .divider{
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em;
  color: var(--t3); text-transform: uppercase;
  margin: 28px 0 14px;
}
#vmware-server-virtualization-page .divider::before,#vmware-server-virtualization-page .divider::after{
  content:""; flex: 1; height: 1px;
  background: var(--line);
}
#vmware-server-virtualization-page .paper .divider{ color: rgba(255,255,255,.45)}
#vmware-server-virtualization-page .paper .divider::before,#vmware-server-virtualization-page .paper .divider::after{ background: var(--paper-line-2)}

/* =========================================================
   Misconception — the 5 traps
   ========================================================= */
#vmware-server-virtualization-page .mis-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* ===== 误区诊断：红 ✕ → 绿 ✓ 对仗卡（本 section 独有视觉语言）===== */
#vmware-server-virtualization-page .mis{
  position: relative;
  padding: 18px 16px 16px;
  background: var(--ink-1);
  display: flex; flex-direction: column; gap: 10px;
  transition: background .3s;
}
#vmware-server-virtualization-page .mis:hover{ background: var(--ink-2)}

/* 大编号水印 */
#vmware-server-virtualization-page .mis-num{
  position: absolute; top: -6px; right: 10px;
  font-family: var(--f-mono); font-size: 46px; font-weight: 700;
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(91,214,220,.16);
  pointer-events: none;
}

/* ✕ 误区 — 红色、带删除线 */
#vmware-server-virtualization-page .mis-wrong{
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--red);
  background: linear-gradient(90deg, rgba(255,142,142,.09), transparent 70%);
}
#vmware-server-virtualization-page .mis-mark{
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 50%;
}
#vmware-server-virtualization-page .mis-mark-x{
  color: var(--red);
  border: 1px solid var(--red);
  background: rgba(255,142,142,.12);
  animation: misShake 3.4s ease-in-out infinite;
}
@keyframes misShake{
  0%,88%,100%{ transform: rotate(0)}
  90%{ transform: rotate(-12deg)}
  94%{ transform: rotate(12deg)}
  98%{ transform: rotate(-6deg)}
}
#vmware-server-virtualization-page .mis-quote{
  font-size: 14.5px; color: var(--t2); line-height: 1.5; font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: rgba(255,142,142,.75);
  text-decoration-thickness: 2px;
}

/* → 流动箭头 */
#vmware-server-virtualization-page .mis-flow{
  height: 14px; position: relative; overflow: hidden;
  margin: -2px 0;
}
#vmware-server-virtualization-page .mis-flow::before{
  content:""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--line-3) 0 3px, transparent 3px 7px);
}
#vmware-server-virtualization-page .mis-flow i{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 6px var(--lime);
  animation: misFlowTravel 2.8s linear infinite;
}
#vmware-server-virtualization-page .mis-flow i:nth-child(2){ animation-delay: .9s; background: var(--mint); box-shadow: 0 0 6px var(--mint)}
#vmware-server-virtualization-page .mis-flow i:nth-child(3){ animation-delay: 1.8s; background: var(--violet); box-shadow: 0 0 6px var(--violet)}
@keyframes misFlowTravel{
  0%{ left: -4px; opacity: 0}
  12%{ opacity: 1}
  85%{ opacity: 1}
  100%{ left: 100%; opacity: 0}
}

/* ✓ 正解 — 绿色 */
#vmware-server-virtualization-page .mis-right{
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--mint);
  background: linear-gradient(90deg, rgba(103,221,170,.08), transparent 70%);
}
#vmware-server-virtualization-page .mis-mark-v{
  color: var(--mint);
  border: 1px solid var(--mint);
  background: rgba(103,221,170,.12);
  animation: misCheck 2.6s ease-in-out infinite;
}
@keyframes misCheck{
  0%,100%{ transform: scale(1)}
  50%{ transform: scale(1.14); box-shadow: 0 0 8px rgba(103,221,170,.5)}
}
#vmware-server-virtualization-page .mis-fix{
  font-size: 12.5px; color: var(--t); line-height: 1.6;
}
#vmware-server-virtualization-page .mis-fix strong{ color: var(--mint); font-weight: 600}

@media (max-width: 720px){ #vmware-server-virtualization-page .mis-num{ font-size: 34px} }

#vmware-server-virtualization-page .mis-callout{
  margin-top: 28px;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 24px; align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(91,214,220,.08), rgba(198,169,255,.06));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
@media (max-width: 720px){ #vmware-server-virtualization-page .mis-callout{ grid-template-columns: 1fr}}
#vmware-server-virtualization-page .mis-callout p{ font-size: 15px; color: var(--t); line-height: 1.6}
#vmware-server-virtualization-page .mis-callout p b{ color: var(--lime)}
#vmware-server-virtualization-page .mis-callout .stat{
  font-family: var(--f-display); font-weight: 700; font-size: 26px;
  color: var(--lime);
  letter-spacing: -0.02em;
  text-align: right;
}
#vmware-server-virtualization-page .mis-callout .stat span{ display: block; font-family: var(--f-mono); font-size: 11px; color: var(--t3); letter-spacing: .12em; margin-top: 2px}

/* =========================================================
   Assess — paper band, 6 evaluation items
   ========================================================= */
#vmware-server-virtualization-page .assess{
  background: var(--paper);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
}
#vmware-server-virtualization-page .assess::before{
  /* blueprint grid */
  content:""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 18%, #000 82%, rgba(0,0,0,0) 100%);
}
#vmware-server-virtualization-page .assess::after{
  /* corner crosshairs (blueprint) */
  content:""; position: absolute; inset: 22px; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,.38) 0 14px, transparent 14px) top left/14px 1px no-repeat,
    linear-gradient(to right, rgba(255,255,255,.38) 0 14px, transparent 14px) bottom right/14px 1px no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,.38) 0 14px, transparent 14px) top left/1px 14px no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,.38) 0 14px, transparent 14px) bottom right/1px 14px no-repeat;
}

#vmware-server-virtualization-page .assess-top{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px; align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 900px){ #vmware-server-virtualization-page .assess-top{ grid-template-columns: 1fr; gap: 24px}}

#vmware-server-virtualization-page .assess-list{
  display: block;
  margin-top: 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-1);
  overflow: hidden;
  box-shadow: 0 24px 60px -36px rgba(0,0,0,.6);
}
@media (max-width: 900px){ #vmware-server-virtualization-page .assess-list{ grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 560px){ #vmware-server-virtualization-page .assess-list{ grid-template-columns: 1fr}}

/* ===== assess：工程检查清单表格（6 行，水平节奏 — 区别于其他卡）===== */
#vmware-server-virtualization-page .assess-list{
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-1);
  overflow: hidden;
}
#vmware-server-virtualization-page .assess-row{
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0,1fr) 200px;
  gap: 24px;
  align-items: stretch;
  padding: 22px 24px;
  border-top: 1px solid var(--line-2);
  transition: background .3s;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
#vmware-server-virtualization-page .assess-row > *{ min-width: 0}
#vmware-server-virtualization-page .assess-row:first-child{ border-top: 0}
#vmware-server-virtualization-page .assess-row:hover{ background: var(--ink-2)}
#vmware-server-virtualization-page .assess-row:hover .ar-num{ color: var(--lime); -webkit-text-stroke-color: rgba(91,214,220,.6)}

#vmware-server-virtualization-page .ar-num{
  font-family: var(--f-mono); font-size: 56px; font-weight: 700;
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(91,214,220,.25);
  align-self: start;
  transition: -webkit-text-stroke-color .3s, color .3s;
}
#vmware-server-virtualization-page .ar-main{ display: flex; flex-direction: column; gap: 10px; min-width: 0}
#vmware-server-virtualization-page .ar-title{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap}
#vmware-server-virtualization-page .ar-name{
  font-size: 19px; font-weight: 600; color: var(--t);
  letter-spacing: -.01em;
}
#vmware-server-virtualization-page .ar-ascii-tag{
  font-family: var(--f-mono); font-size: 11px;
  color: var(--lime); letter-spacing: .12em;
  padding: 1px 6px;
  border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(91,214,220,.04);
}
#vmware-server-virtualization-page .ar-q{
  font-size: 13.5px; color: var(--lime);
  font-weight: 500; line-height: 1.5;
}
#vmware-server-virtualization-page .ar-q::before{ content: "Q · "; color: var(--t3); font-family: var(--f-mono); font-weight: 400}
#vmware-server-virtualization-page .ar-p{
  font-size: 12.5px; color: var(--t2); line-height: 1.65;
}
#vmware-server-virtualization-page .ar-p strong{ color: var(--mint); font-weight: 600}

#vmware-server-virtualization-page .ar-tags{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px}
#vmware-server-virtualization-page .ar-check{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--t2);
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: rgba(91,214,220,.02);
}
#vmware-server-virtualization-page .ar-check i{
  width: 12px; height: 12px;
  border: 1px solid var(--mint); border-radius: 2px;
  position: relative; flex-shrink: 0;
}
#vmware-server-virtualization-page .ar-check i::after{
  content:""; position: absolute; left: 2px; top: 1px;
  width: 6px; height: 8px;
  border-right: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(45deg) scale(0); transform-origin: center;
  animation: checkTick 2.6s ease-in-out infinite;
}
#vmware-server-virtualization-page .assess-row:nth-child(2) .ar-check i::after{ animation-delay: .2s}
#vmware-server-virtualization-page .assess-row:nth-child(3) .ar-check i::after{ animation-delay: .4s}
#vmware-server-virtualization-page .assess-row:nth-child(4) .ar-check i::after{ animation-delay: .6s}
#vmware-server-virtualization-page .assess-row:nth-child(5) .ar-check i::after{ animation-delay: .8s}
#vmware-server-virtualization-page .assess-row:nth-child(6) .ar-check i::after{ animation-delay: 1s}
#vmware-server-virtualization-page .assess-row:nth-child(7) .ar-check i::after{ animation-delay: 1.2s}
@keyframes checkTick{
  0%,30%{ transform: rotate(45deg) scale(0)}
  45%,100%{ transform: rotate(45deg) scale(1)}
}

#vmware-server-virtualization-page .ar-bar{
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  border-left: 1px dashed var(--line-2);
  padding-left: 20px;
}
#vmware-server-virtualization-page .ar-bar-track{
  position: relative; height: 28px;
  border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(91,214,220,.04);
  overflow: hidden;
}
#vmware-server-virtualization-page .ar-bar-fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--bar-color, var(--lime)), transparent);
  opacity: .35;
  transition: width 1.6s cubic-bezier(.16,.84,.34,1);
}
#vmware-server-virtualization-page .reveal.is-on .ar-bar-fill{ width: var(--pct, 0%)}
#vmware-server-virtualization-page .ar-bar-fill::after{
  content:""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 80%;
  background: var(--bar-color, var(--lime));
  box-shadow: 0 0 8px var(--bar-color, var(--lime));
  animation: barEdgePulse 1.6s ease-in-out infinite;
}
@keyframes barEdgePulse{
  0%,100%{ opacity: 1}
  50%{ opacity: .35}
}
#vmware-server-virtualization-page .ar-bar-pct{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 14px; font-weight: 700;
  color: var(--bar-color, var(--lime));
  z-index: 2;
  text-shadow: 0 0 8px rgba(91,214,220,.4);
}
#vmware-server-virtualization-page .ar-bar-pct i{ font-style: normal; font-size: 10px; opacity: .7; margin-left: 1px}
#vmware-server-virtualization-page .ar-bar-label{
  font-family: var(--f-mono); font-size: 10.5px; color: var(--t3);
  letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
#vmware-server-virtualization-page .ar-bar-label::before{
  content:""; width: 4px; height: 4px; background: var(--bar-color, var(--lime));
  border-radius: 50%; box-shadow: 0 0 4px var(--bar-color, var(--lime));
}

@media (max-width: 980px){
  #vmware-server-virtualization-page .assess-row{ grid-template-columns: 60px 1fr; }
  #vmware-server-virtualization-page .ar-bar{ grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--line-2); padding-left: 0; padding-top: 16px}
}
#vmware-server-virtualization-page .assess-foot{
  margin-top: 36px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  background: rgba(10,26,46,.5);
  overflow: hidden;
}
#vmware-server-virtualization-page .assess-foot b{ color: var(--lime); font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; flex: 0 0 100%}
#vmware-server-virtualization-page .assess-foot .sep{ display: none}
#vmware-server-virtualization-page .assess-foot > span:not(.sep):not(b){
  display: inline-flex; align-items: center;
}
#vmware-server-virtualization-page .assess-foot > span:not(.sep):not(b)::before{
  content: "·"; margin-right: 10px; color: rgba(255,255,255,.38);
}
#vmware-server-virtualization-page .assess-foot > span:not(.sep):not(b):first-of-type::before{ content: none}

/* assess-foot 内部：rep-bar（面包屑栏）+ af-body（标签栏）两层结构 */
#vmware-server-virtualization-page .assess-foot .af-body{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 18px 22px;
  font-size: 13px;
  color: var(--t);
  border-top: 1px dashed var(--line-2);
}
#vmware-server-virtualization-page .assess-foot .af-body > b{
  flex: 0 0 auto; flex-shrink: 0;
  font-size: 13px; color: var(--t);
  margin-right: 6px;
  font-family: var(--f-display);
}
#vmware-server-virtualization-page .assess-foot .af-body .dchip{
  font-size: 11px; padding: 5px 11px;
}

/* =========================================================
   Architecture — layered platform diagram (超大图 + 下方 6 卡片)
   ========================================================= */
#vmware-server-virtualization-page .arch-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: stretch;
}

#vmware-server-virtualization-page .arch-diagram{
  position: relative;
  background: linear-gradient(180deg, rgba(10,26,46,.55) 0%, rgba(6,16,29,.0) 60%);
  border: none;
  border-radius: 0;
  padding: 36px 28px 32px;
  overflow: hidden;
  min-height: 0;
}
/* blueprint fine grid + corner glow */
#vmware-server-virtualization-page .arch-diagram::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(91,214,220,.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(91,214,220,.045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(800px 460px at 18% 8%, rgba(91,214,220,.10), transparent 60%),
    radial-gradient(720px 480px at 88% 92%, rgba(198,169,255,.10), transparent 60%);
}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-tl,#vmware-server-virtualization-page .arch-diagram > .arch-frame-tr,#vmware-server-virtualization-page .arch-diagram > .arch-frame-bl,#vmware-server-virtualization-page .arch-diagram > .arch-frame-br{
  position: absolute; width: 28px; height: 28px; z-index: 3;
  border: 1.5px solid var(--lime); opacity: .85;
}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-tl{ top: 14px; left: 14px; border-right: none; border-bottom: none}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-tr{ top: 14px; right: 14px; border-left: none; border-bottom: none}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-bl{ bottom: 14px; left: 14px; border-right: none; border-top: none}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-br{ bottom: 14px; right: 14px; border-left: none; border-top: none}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em;
  color: var(--t3); margin-bottom: 18px;
}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .left{ display: flex; gap: 18px; align-items: center}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .left .pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(91,214,220,.08); border: 1px solid rgba(91,214,220,.32);
  color: var(--lime);
}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .left .pill::before{
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px rgba(91,214,220,.6);
  animation: pulseDot 1.6s ease-in-out infinite;
}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .right{ color: var(--t3); font-size: 10.5px}
#vmware-server-virtualization-page .arch-diagram svg{ width: 100%; height: auto; position: relative; z-index: 1}
/* 缩小 SVG 文字，与动效更协调（用户反馈） */
#vmware-server-virtualization-page .arch-diagram svg text{ font-size: 7.6px !important}
#vmware-server-virtualization-page .arch-diagram svg text[font-weight="600"]{ font-size: 9px !important; letter-spacing: .04em}

#vmware-server-virtualization-page .arch-side{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){
  #vmware-server-virtualization-page .arch-side{ grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 620px){
  #vmware-server-virtualization-page .arch-side{ grid-template-columns: 1fr}
}
#vmware-server-virtualization-page .arch-pillar{
  position: relative;
  padding: 18px 18px 20px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid; grid-template-columns: 44px 1fr;
  gap: 14px; align-items: start;
  transition: border-color .25s, transform .25s, background .25s;
}
#vmware-server-virtualization-page .arch-pillar:hover{ transform: translateY(-2px); border-color: rgba(91,214,220,.42); background: linear-gradient(180deg, rgba(10,26,46,.85), rgba(15,34,56,.65))}
#vmware-server-virtualization-page .arch-pillar .ic{
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(91,214,220,.18), rgba(198,169,255,.06));
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--lime);
}
#vmware-server-virtualization-page .arch-pillar .ic svg{ width: 24px; height: 24px}
#vmware-server-virtualization-page .arch-pillar h4{ color: var(--t); font-size: 15px; margin-bottom: 4px}
#vmware-server-virtualization-page .arch-pillar p{ color: var(--t2); font-size: 12.5px; line-height: 1.6}
#vmware-server-virtualization-page .arch-pillar .ix{
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--lime); margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
#vmware-server-virtualization-page .arch-pillar .ix::before{
  content:""; width: 12px; height: 1px; background: var(--lime); opacity: .55;
}

/* Decision tree */
/* =========================================================
   Migration — 7-step timeline
   ========================================================= */
#vmware-server-virtualization-page .timeline-wrap{
  position: relative;
  display: grid; gap: 18px;
}
#vmware-server-virtualization-page .timeline{
  position: relative;
  padding: 28px 0 22px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
/* 主轨道：2px 厚、青绿信号底 + 渐入虚线装饰 */
#vmware-server-virtualization-page .timeline::before{
  content:""; position: absolute;
  left: 28px; right: 28px; top: 80px; height: 2px;
  background: linear-gradient(90deg,
    rgba(91,214,220,.05) 0%,
    rgba(91,214,220,.4) 8%,
    rgba(91,214,220,.4) 92%,
    rgba(91,214,220,.05) 100%);
  border-radius: 2px;
  z-index: 1;
}
/* 进度填充：lime → mint 渐变 + 发光 */
#vmware-server-virtualization-page .timeline .fill{
  position: absolute; left: 28px; top: 80px; height: 2px;
  background: linear-gradient(90deg, var(--lime), var(--mint) 70%, var(--violet));
  width: 0;
  border-radius: 2px;
  transition: width 1.8s cubic-bezier(.16,.84,.34,1) .3s;
  box-shadow: 0 0 12px rgba(91,214,220,.55), 0 0 24px rgba(91,214,220,.25);
  z-index: 2;
}
#vmware-server-virtualization-page .timeline.is-on .fill{ width: calc(100% - 56px)}

/* 轨道上的刻度（每 step 下方一根 1px 短竖线 + 顶部一个小方块） */
#vmware-server-virtualization-page .timeline .step::before{
  content:""; position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 66px; width: 1px; height: 14px;
  background: linear-gradient(180deg, rgba(91,214,220,.5), transparent);
  z-index: 1;
}
#vmware-server-virtualization-page .timeline .step::after{
  content:""; position: absolute;
  left: 50%; top: 79px; transform: translateX(-50%);
  width: 8px; height: 4px;
  background: rgba(91,214,220,.25);
  border-radius: 1px;
  z-index: 1;
}
#vmware-server-virtualization-page .timeline.is-on .step::after{
  background: rgba(91,214,220,.7);
  box-shadow: 0 0 6px rgba(91,214,220,.6);
}

#vmware-server-virtualization-page .step{
  position: relative;
  padding-top: 112px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  padding-left: 8px; padding-right: 8px;
}
#vmware-server-virtualization-page .step .pin{
  position: absolute; top: 22px; left: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1.5px solid var(--line-3);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--t3);
  transition: background .5s, border-color .5s, color .5s, transform .5s, box-shadow .5s;
  z-index: 3;
}
#vmware-server-virtualization-page .step .pin::after{
  content:""; position: absolute; inset: -5px;
  border-radius: 50%; border: 1.5px solid var(--lime);
  opacity: 0; transform: scale(.6);
  transition: opacity .5s, transform .5s;
}
#vmware-server-virtualization-page .timeline.is-on .step .pin{
  background: var(--lime); border-color: var(--lime); color: var(--ink-0);
  box-shadow: 0 0 12px rgba(91,214,220,.5);
  transform: scale(1.05);
}
#vmware-server-virtualization-page .timeline.is-on .step .pin::after{
  opacity: .5; transform: scale(1.1);
}
#vmware-server-virtualization-page .step .ix{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--t3); text-transform: uppercase}
#vmware-server-virtualization-page .step h4{ color: var(--t); font-size: 14.5px; font-weight: 600}
#vmware-server-virtualization-page .step p{ color: var(--t2); font-size: 12.5px; line-height: 1.55}
@media (max-width: 980px){
  #vmware-server-virtualization-page .timeline{ grid-template-columns: 1fr; gap: 18px}
  #vmware-server-virtualization-page .timeline::before,#vmware-server-virtualization-page .timeline .fill{ display: none}
  #vmware-server-virtualization-page .step{ padding-top: 0; padding-left: 36px}
  #vmware-server-virtualization-page .step .pin{ top: 0; left: 0}
}

/* Tools row */
#vmware-server-virtualization-page .tools{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 28px;
}
@media (max-width: 900px){ #vmware-server-virtualization-page .tools{ grid-template-columns: repeat(3, 1fr)}}
#vmware-server-virtualization-page .tool{
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-1);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .2s, transform .2s;
}
#vmware-server-virtualization-page .tool:hover{ border-color: var(--line-3); transform: translateY(-2px)}
#vmware-server-virtualization-page .tool .name{ font-family: var(--f-display); font-weight: 600; color: var(--t); font-size: 14px}
#vmware-server-virtualization-page .tool .role{ font-family: var(--f-mono); font-size: 10.5px; color: var(--t3); letter-spacing: .06em}

/* =========================================================
   Benefits — KPI Dashboard (5 unique visualizations)
   ========================================================= */
#vmware-server-virtualization-page .benefits-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-rows: auto;
  gap: 18px;
  margin-top: 36px;
}
#vmware-server-virtualization-page .benefits-grid .ben.kpi-ha,#vmware-server-virtualization-page .benefits-grid .ben.kpi-clock,#vmware-server-virtualization-page .benefits-grid .ben.kpi-tco{
  grid-column: span 1;
}
@media (max-width: 1080px){ #vmware-server-virtualization-page .benefits-grid{ grid-template-columns: 1fr 1fr}}
@media (max-width: 720px){ #vmware-server-virtualization-page .benefits-grid{ grid-template-columns: 1fr}}

#vmware-server-virtualization-page .ben{
  position: relative;
  padding: 22px 22px 24px;
  border-radius: var(--r-md);
  background: var(--ink-1);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s, transform .25s;
  min-width: 0;
}
#vmware-server-virtualization-page .ben:hover{ border-color: var(--line-3); transform: translateY(-2px)}

/* 通用顶部 tag：编号 + 类目 + 状态箭头 */
#vmware-server-virtualization-page .kpi-tag{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--t3);
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(91,214,220,.18);
}
#vmware-server-virtualization-page .kpi-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid rgba(91,214,220,.4);
  border-radius: 2px;
  color: var(--lime);
  font-weight: 700;
  font-size: 11px;
  background: rgba(91,214,220,.06);
}
#vmware-server-virtualization-page .kpi-tag span{ color: var(--t2); font-weight: 500}
#vmware-server-virtualization-page .kpi-tag em{
  margin-left: auto; font-style: normal;
  color: var(--lime);
  font-family: var(--f-mono); font-size: 13px;
}
#vmware-server-virtualization-page .kpi-bolt::before{ content:"\\26A1"; }
#vmware-server-virtualization-page .ben h3{
  font-size: 19px; color: var(--t);
  line-height: 1.25;
  font-family: var(--f-display); font-weight: 600;
}
#vmware-server-virtualization-page .ben p{
  color: var(--t2); font-size: 13.5px; line-height: 1.65;
}
#vmware-server-virtualization-page .ben p strong{ color: var(--lime); font-weight: 600}
#vmware-server-virtualization-page .kpi-meta{
  display: flex; gap: 8px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--t3);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(91,214,220,.15);
}
#vmware-server-virtualization-page .kpi-meta span{
  padding: 3px 8px; border-radius: 2px;
  background: rgba(91,214,220,.04);
  border: 1px solid rgba(91,214,220,.12);
}
#vmware-server-virtualization-page .kpi-meta b{ color: var(--lime); font-weight: 700; margin-right: 4px}

/* 01 环形刻度盘 */
#vmware-server-virtualization-page .ben.kpi-gauge{
  grid-row: span 2;
  min-height: 480px;
}
#vmware-server-virtualization-page .gauge{
  display: block; width: 100%; max-width: 360px;
  margin: 8px auto 4px;
  height: auto;
}
#vmware-server-virtualization-page .gauge-num{
  font-family: var(--f-mono); font-size: 44px; font-weight: 700;
  fill: var(--lime);
}
#vmware-server-virtualization-page .gauge-pct{
  font-family: var(--f-mono); font-size: 18px; fill: var(--t3); font-weight: 400;
}
#vmware-server-virtualization-page .gauge-indicator{
  filter: drop-shadow(0 0 4px #67DDAA);
  animation: indiPulse 1.6s ease-in-out infinite;
}
@keyframes indiPulse{
  0%,100%{ opacity: 1}
  50%{ opacity: .4}
}
#vmware-server-virtualization-page .gauge-lbl{ font-family: var(--f-mono); font-size: 11px; fill: var(--t2); letter-spacing: .12em}
#vmware-server-virtualization-page .gauge-lbl-sm{ font-family: var(--f-mono); font-size: 10px; fill: var(--t3); letter-spacing: .08em}
#vmware-server-virtualization-page .gauge-fill{
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.0,.2,1) .2s;
}
#vmware-server-virtualization-page .reveal.is-on .gauge-fill{ stroke-dashoffset: 113 }
#vmware-server-virtualization-page .gauge-ticks line{ animation: tickFade 2s ease-in-out infinite}
@keyframes tickFade{
  0%,100%{ opacity: .35}
  50%{ opacity: 1}
}

/* 02 终端日志 mock */
#vmware-server-virtualization-page .ben.kpi-console{ min-height: 480px}
#vmware-server-virtualization-page .console-mock{
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #02060C;
  overflow: hidden;
  font-family: var(--f-mono);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.6);
}
#vmware-server-virtualization-page .cm-bar{
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(91,214,220,.05), transparent);
  border-bottom: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .cm-dot{
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
#vmware-server-virtualization-page .cm-dot-r{ background: #FF6F6F; box-shadow: 0 0 4px rgba(255,111,111,.5)}
#vmware-server-virtualization-page .cm-dot-y{ background: #F1C56F; box-shadow: 0 0 4px rgba(241,197,111,.5)}
#vmware-server-virtualization-page .cm-dot-g{ background: #67DDAA; box-shadow: 0 0 4px rgba(103,221,170,.5); animation: dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{ 0%,100%{ opacity: 1} 50%{ opacity: .4}}
#vmware-server-virtualization-page .cm-title{
  margin-left: auto;
  font-size: 10px; color: var(--t3); letter-spacing: .1em;
}
#vmware-server-virtualization-page .cm-body{ padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 96px}
#vmware-server-virtualization-page .cm-line{
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--t);
  opacity: 0;
  animation: cmLineIn .5s ease-out forwards;
}
#vmware-server-virtualization-page .cm-line:nth-child(1){ animation-delay: .1s}
#vmware-server-virtualization-page .cm-line:nth-child(2){ animation-delay: .4s}
#vmware-server-virtualization-page .cm-line:nth-child(3){ animation-delay: .7s}
#vmware-server-virtualization-page .cm-line:nth-child(4){ animation-delay: 1.0s}
@keyframes cmLineIn{
  from{ opacity: 0; transform: translateX(-6px)}
  to{ opacity: 1; transform: translateX(0)}
}
#vmware-server-virtualization-page .cm-prompt{ color: var(--lime); font-weight: 700}
#vmware-server-virtualization-page .cm-txt{ color: var(--t)}
#vmware-server-virtualization-page .cm-cursor{
  width: 6px; height: 12px; background: var(--lime);
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink{ 50%{ opacity: 0}}
#vmware-server-virtualization-page .cm-tag-mint{ color: var(--mint); padding: 1px 6px; border: 1px solid rgba(103,221,170,.3); border-radius: 2px; font-size: 10.5px}
#vmware-server-virtualization-page .cm-tag-violet{ color: var(--violet); padding: 1px 6px; border: 1px solid rgba(198,169,255,.3); border-radius: 2px; font-size: 10.5px}
#vmware-server-virtualization-page .cm-tag-amber{ color: var(--amber); padding: 1px 6px; border: 1px solid rgba(241,197,111,.3); border-radius: 2px; font-size: 10.5px}
#vmware-server-virtualization-page .cm-dim{ color: var(--t3); font-size: 10.5px; margin-left: auto}

/* 03 HA 故障转移跑道 */
#vmware-server-virtualization-page .ben.kpi-ha{ min-height: 240px}
#vmware-server-virtualization-page .ha-track{
  position: relative;
  padding: 14px 4px 6px;
}
#vmware-server-virtualization-page .ha-rail{
  position: relative;
  height: 86px;
}
#vmware-server-virtualization-page .ha-label{
  position: absolute; top: 0;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--t3);
}
#vmware-server-virtualization-page .ha-label-before{ left: 0; color: var(--red)}
#vmware-server-virtualization-page .ha-label-after{ right: 0; color: var(--mint)}
#vmware-server-virtualization-page .ha-bars{
  position: absolute; top: 24px; left: 0; right: 0; bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
#vmware-server-virtualization-page .ha-bar{
  position: relative;
  height: 22px;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--t);
  display: flex; align-items: center;
  padding: 0 10px;
}
#vmware-server-virtualization-page .ha-bar i{
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 2px;
}
#vmware-server-virtualization-page .ha-bar-1 i{ width: 95%; background: linear-gradient(90deg, rgba(255,142,142,.15), rgba(255,142,142,.4)); box-shadow: 0 0 8px rgba(255,142,142,.2)}
#vmware-server-virtualization-page .ha-bar-2 i{ width: 18%; background: linear-gradient(90deg, rgba(103,221,170,.3), rgba(91,214,220,.5)); box-shadow: 0 0 10px rgba(91,214,220,.4)}
#vmware-server-virtualization-page .ha-bar-1{ animation: haBarShake 3.6s ease-in-out infinite}
@keyframes haBarShake{
  0%,100%{ transform: translateX(0)}
  50%{ transform: translateX(2px)}
}

/* 04 时钟 */
#vmware-server-virtualization-page .ben.kpi-clock{ min-height: 320px}
#vmware-server-virtualization-page .clock-mock{
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
#vmware-server-virtualization-page .clock-mock > svg{ width: 140px; height: 140px; display: block}
#vmware-server-virtualization-page .clock-big{
  font-family: var(--f-mono); font-size: 36px; font-weight: 700;
  fill: var(--mint);
}
#vmware-server-virtualization-page .clock-unit{ font-family: var(--f-mono); font-size: 13px; fill: var(--t2); letter-spacing: .12em}
#vmware-server-virtualization-page .clock-cap{ font-family: var(--f-mono); font-size: 10px; fill: var(--t3); letter-spacing: .14em}
#vmware-server-virtualization-page .clock-ticks line{ animation: tickFade 2.4s ease-in-out infinite}
#vmware-server-virtualization-page .clock-ticks line:nth-child(2){ animation-delay: .2s}
#vmware-server-virtualization-page .clock-ticks line:nth-child(3){ animation-delay: .4s}
#vmware-server-virtualization-page .clock-ticks line:nth-child(4){ animation-delay: .6s}
#vmware-server-virtualization-page .clock-seal{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--t2);
  padding: 5px 10px;
  border: 1px solid rgba(103,221,170,.3);
  border-radius: 999px;
  background: rgba(103,221,170,.05);
}
#vmware-server-virtualization-page .clock-seal i{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint);
  display: inline-block;
  animation: sealDot 1.4s ease-in-out infinite;
}
#vmware-server-virtualization-page .clock-seal i:nth-child(2){ animation-delay: .2s}
#vmware-server-virtualization-page .clock-seal i:nth-child(3){ animation-delay: .4s}
@keyframes sealDot{ 0%,100%{ opacity: .3} 50%{ opacity: 1}}

/* 05 TCO 柱状图 */
#vmware-server-virtualization-page .ben.kpi-tco{ min-height: 320px}
#vmware-server-virtualization-page .tco-chart{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 12px 4px 6px;
  border-bottom: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .tco-chart::before{
  content:""; position: absolute; left: 0; right: 0; bottom: 28px;
  height: 1px; background: var(--line-2);
}
#vmware-server-virtualization-page .tco-year{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#vmware-server-virtualization-page .tco-bar{
  width: 100%;
  position: relative;
  height: 120px;
  display: flex; align-items: flex-end;
}
#vmware-server-virtualization-page .tco-bar i{
  width: 70%;
  margin: 0 auto;
  display: block;
  border-radius: 2px 2px 0 0;
  position: relative;
}
#vmware-server-virtualization-page .tco-bar b{
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 14px; font-weight: 700;
  color: var(--t);
}
#vmware-server-virtualization-page .tco-bar-1 i{ height: 95%; background: linear-gradient(180deg, rgba(255,142,142,.5), rgba(255,142,142,.15)); box-shadow: 0 0 12px rgba(255,142,142,.15)}
#vmware-server-virtualization-page .tco-bar-2 i{ height: 80%; background: linear-gradient(180deg, rgba(241,197,111,.6), rgba(241,197,111,.18)); box-shadow: 0 0 12px rgba(241,197,111,.18)}
#vmware-server-virtualization-page .tco-bar-3 i{ height: 70%; background: linear-gradient(180deg, rgba(103,221,170,.7), rgba(91,214,220,.25)); box-shadow: 0 0 14px rgba(91,214,220,.3)}
#vmware-server-virtualization-page .tco-bar-1 b{ color: var(--red)}
#vmware-server-virtualization-page .tco-bar-2 b{ color: var(--amber)}
#vmware-server-virtualization-page .tco-bar-3 b{ color: var(--mint)}
#vmware-server-virtualization-page .tco-year label{
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--t3);
}
#vmware-server-virtualization-page .tco-axis{
  position: absolute; right: 0; top: 6px;
  display: flex; flex-direction: column; gap: 32px;
  font-family: var(--f-mono); font-size: 9px;
  color: var(--t3);
}
#vmware-server-virtualization-page .tco-axis span{ padding-right: 2px}
#vmware-server-virtualization-page .tco-bar i::after{
  content:""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(91,214,220,.6);
  animation: barShimmer 2s ease-in-out infinite;
}
@keyframes barShimmer{
  0%,100%{ opacity: .3}
  50%{ opacity: 1}
}
/* =========================================================
   Software band — why industry software delivery needs VMware
   ========================================================= */
#vmware-server-virtualization-page .software{
  background:
    linear-gradient(180deg, rgba(6,16,29,0) 0%, rgba(15,34,56,.4) 100%),
    radial-gradient(900px 600px at 80% 10%, rgba(198,169,255,.10), transparent 60%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#vmware-server-virtualization-page .software-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: stretch;   /* 让左侧 .ph 与右侧 .sw-side 同高 */
}
@media (max-width: 980px){ #vmware-server-virtualization-page .software-grid{ grid-template-columns: 1fr; gap: 32px; align-items: start}}

#vmware-server-virtualization-page .sw-side{
  display: flex; flex-direction: column; gap: 16px;
}

/* 代码编辑器 */
#vmware-server-virtualization-page .sw-editor{
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: #02060C;
  overflow: hidden;
  font-family: var(--f-mono);
  box-shadow: 0 16px 36px -20px rgba(0,0,0,.6);
}
#vmware-server-virtualization-page .sw-ed-head{
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(91,214,220,.06), transparent);
  border-bottom: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .sw-dot{
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
}
#vmware-server-virtualization-page .sw-dot-r{ background: #FF6F6F; box-shadow: 0 0 5px rgba(255,111,111,.4)}
#vmware-server-virtualization-page .sw-dot-y{ background: #F1C56F; box-shadow: 0 0 5px rgba(241,197,111,.4)}
#vmware-server-virtualization-page .sw-dot-g{ background: #67DDAA; box-shadow: 0 0 5px rgba(103,221,170,.4); animation: dotPulse 1.6s ease-in-out infinite}
#vmware-server-virtualization-page .sw-ed-file{
  margin-left: 14px;
  font-size: 11px; color: var(--t2);
  letter-spacing: .04em;
}
#vmware-server-virtualization-page .sw-ed-branch{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  color: var(--mint);
  padding: 2px 8px;
  border: 1px solid rgba(103,221,170,.3);
  border-radius: 2px;
  background: rgba(103,221,170,.06);
}
#vmware-server-virtualization-page .sw-ed-branch i{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 4px var(--mint);
  animation: dotPulse 1.4s ease-in-out infinite;
}
#vmware-server-virtualization-page .sw-ed-body{
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
#vmware-server-virtualization-page .sw-ed-ln{
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; line-height: 1.6;
  color: var(--t);
  padding: 2px 6px;
  border-radius: 2px;
  transition: background .2s;
}
#vmware-server-virtualization-page .sw-ed-ln:hover{ background: rgba(91,214,220,.04)}
#vmware-server-virtualization-page .sw-ln-num{
  font-family: var(--f-mono); font-size: 11px;
  color: var(--t3);
  min-width: 18px; text-align: right;
  user-select: none;
}
#vmware-server-virtualization-page .sw-ln-tag{ color: var(--violet); font-weight: 600}
#vmware-server-virtualization-page .sw-ln-val{ color: var(--mint); font-weight: 500}
#vmware-server-virtualization-page .sw-ln-key{ color: var(--t2)}
#vmware-server-virtualization-page .sw-ln-str{ color: var(--amber); font-style: italic}
#vmware-server-virtualization-page .sw-ln-num2{ color: var(--lime); font-weight: 700}
#vmware-server-virtualization-page .sw-ln-cmt{ color: var(--t3); font-style: italic; opacity: .65}
#vmware-server-virtualization-page .sw-ln-active{ background: rgba(91,214,220,.06); border-left: 2px solid var(--lime); padding-left: 4px}
#vmware-server-virtualization-page .sw-ln-cursor{
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--lime);
  margin-left: 4px;
  animation: caretBlink 1s steps(2) infinite;
}

/* 提交列表 */
#vmware-server-virtualization-page .sw-list{
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-1);
  overflow: hidden;
}
#vmware-server-virtualization-page .sw-item{
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px dashed var(--line-2);
  transition: background .2s;
  min-width: 0;
}
#vmware-server-virtualization-page .sw-item:first-child{ border-top: 0}
#vmware-server-virtualization-page .sw-item:hover{ background: rgba(91,214,220,.03)}
#vmware-server-virtualization-page .sw-i{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
}
#vmware-server-virtualization-page .sw-git{
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime) 30%, transparent 70%);
  border: 1px solid var(--lime);
  box-shadow: 0 0 6px var(--lime);
  flex-shrink: 0;
}
#vmware-server-virtualization-page .sw-commit{
  font-size: 10.5px; letter-spacing: .04em;
  color: var(--lime);
  font-weight: 700;
}
#vmware-server-virtualization-page .sw-bd{ min-width: 0}
#vmware-server-virtualization-page .sw-fn{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--t3);
  margin-bottom: 4px;
}
#vmware-server-virtualization-page .sw-fn b{
  color: var(--t2); font-weight: 700;
}
#vmware-server-virtualization-page .sw-fn span{
  color: var(--lime);
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(91,214,220,.08);
  border: 1px solid rgba(91,214,220,.18);
}
#vmware-server-virtualization-page .sw-fn em{
  font-style: normal;
  color: var(--amber);
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(241,197,111,.08);
  border: 1px solid rgba(241,197,.28);
  font-weight: 600;
  letter-spacing: .08em;
}
#vmware-server-virtualization-page .sw-bd h4{
  color: var(--t); font-size: 14.5px; font-weight: 600;
  margin-bottom: 4px;
}
#vmware-server-virtualization-page .sw-bd p{
  color: var(--t2); font-size: 12.5px; line-height: 1.55;
}
#vmware-server-virtualization-page .sw-bd p strong{ color: var(--lime); font-weight: 600}
#vmware-server-virtualization-page .sw-v{
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
  color: var(--lime);
  padding: 4px 10px;
  border: 1px solid rgba(91,214,220,.3);
  border-radius: 2px;
  background: rgba(91,214,220,.06);
  white-space: nowrap;
}

/* =========================================================
   Team
   ========================================================= */
#vmware-server-virtualization-page .team-head{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: end;
  margin-bottom: 36px;
}
@media (max-width: 900px){ #vmware-server-virtualization-page .team-head{ grid-template-columns: 1fr; gap: 18px}}

#vmware-server-virtualization-page .team-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 980px){ #vmware-server-virtualization-page .team-grid{ grid-template-columns: 1fr}}

#vmware-server-virtualization-page .team-photo{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 420px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .team-photo img{ width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) brightness(.85) saturate(.9)}
#vmware-server-virtualization-page .team-photo::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,16,29,.85) 100%);
}
#vmware-server-virtualization-page .team-photo .tags{
  position: absolute; left: 22px; bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 80%;
  z-index: 2;
}
#vmware-server-virtualization-page .team-photo .tag{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--t); padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6,16,29,.6); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
}
#vmware-server-virtualization-page .team-photo .photo-tag{
  position: absolute; top: 22px; right: 22px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: rgba(6,16,29,.55); border: 1px solid var(--line-2);
  border-radius: 999px;
}
#vmware-server-virtualization-page .team-photo .photo-tag .pulse{
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  animation: pulseDot 1.4s ease-in-out infinite;
}

#vmware-server-virtualization-page .team-side{ display: flex; flex-direction: column; gap: 14px}

/* 新结构：头像 + 名称 + 统计 + 技能条 */
#vmware-server-virtualization-page .team-card{
  position: relative;
  padding: 18px 20px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  min-width: 0;
  overflow: hidden;
}
#vmware-server-virtualization-page .team-card::before{
  content:""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--av, var(--lime)), transparent);
  opacity: .6;
}
#vmware-server-virtualization-page .team-card:hover{
  transform: translateY(-2px);
  border-color: var(--av, var(--line-3));
  box-shadow: 0 16px 36px -16px rgba(91,214,220,.25);
}

#vmware-server-virtualization-page .tc-top{
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
}
#vmware-server-virtualization-page .tc-avatar{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--av) 30%, transparent), color-mix(in srgb, var(--av) 5%, transparent));
  border: 1px solid var(--av);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 18px; font-weight: 700;
  color: var(--av);
  position: relative;
  text-shadow: 0 0 8px color-mix(in srgb, var(--av) 50%, transparent);
}
#vmware-server-virtualization-page .tc-avatar::before{
  content:""; position: absolute; inset: -3px;
  border: 1px dashed color-mix(in srgb, var(--av) 40%, transparent);
  border-radius: 50%;
  animation: avatarSpin 14s linear infinite;
}
@keyframes avatarSpin{
  to{ transform: rotate(360deg)}
}

#vmware-server-virtualization-page .tc-id{ min-width: 0}
#vmware-server-virtualization-page .tc-role{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--av, var(--lime));
  margin-bottom: 4px;
}
#vmware-server-virtualization-page .tc-id h4{
  color: var(--t); font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#vmware-server-virtualization-page .tc-stat{
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
  font-family: var(--f-mono);
}
#vmware-server-virtualization-page .tc-stat b{
  display: inline-block;
  color: var(--av, var(--lime));
  font-size: 14px; font-weight: 700;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--av) 40%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--av) 8%, transparent);
}
#vmware-server-virtualization-page .tc-stat i{
  font-style: normal;
  font-size: 9.5px; color: var(--t3); letter-spacing: .08em;
}

#vmware-server-virtualization-page .team-card p{
  color: var(--t2); font-size: 12.5px; line-height: 1.55;
}
#vmware-server-virtualization-page .team-card p strong{ color: var(--av, var(--lime)); font-weight: 600}

#vmware-server-virtualization-page .tc-bars{
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
#vmware-server-virtualization-page .tc-bar{
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
}
#vmware-server-virtualization-page .tc-bar span{ color: var(--t2); letter-spacing: .04em}
#vmware-server-virtualization-page .tc-bar em{
  font-style: normal;
  color: var(--av, var(--lime)); font-weight: 700;
  font-size: 10px;
}
#vmware-server-virtualization-page .tc-bar i{
  position: relative;
  height: 6px;
  background: rgba(91,214,220,.06);
  border-radius: 999px;
  overflow: hidden;
}
#vmware-server-virtualization-page .tc-bar i::after{
  content:""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--v, 0%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--av) 30%, transparent), var(--av));
  box-shadow: 0 0 6px color-mix(in srgb, var(--av) 40%, transparent);
  border-radius: 999px;
  animation: tcBarFill 1.6s cubic-bezier(.4,.0,.2,1) forwards;
}
@keyframes tcBarFill{
  from{ width: 0}
}

#vmware-server-virtualization-page .platforms{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
@media (max-width: 980px){ #vmware-server-virtualization-page .platforms{ grid-template-columns: repeat(4, 1fr)}}
@media (max-width: 560px){ #vmware-server-virtualization-page .platforms{ grid-template-columns: repeat(2, 1fr)}}
#vmware-server-virtualization-page .plat{
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-1);
  text-align: center;
  transition: border-color .2s, transform .2s;
}
#vmware-server-virtualization-page .plat:hover{ border-color: var(--lime-2); transform: translateY(-2px)}
#vmware-server-virtualization-page .plat .name{
  font-family: var(--f-display); font-weight: 600; font-size: 14.5px;
  color: var(--t);
}
#vmware-server-virtualization-page .plat .level{
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--t3); letter-spacing: .12em;
  margin-top: 4px;
  display: flex; align-items: center; gap: 4px; justify-content: center;
}
#vmware-server-virtualization-page .plat .level b{ color: var(--lime); font-weight: 500}

/* =========================================================
   Break-fix
   ========================================================= */
#vmware-server-virtualization-page .bf-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
}
@media (max-width: 980px){ #vmware-server-virtualization-page .bf-grid{ grid-template-columns: 1fr}}

#vmware-server-virtualization-page .bf-rail{
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-1);
  overflow: hidden;
  min-width: 0;
}

#vmware-server-virtualization-page .bf-row{
  position: relative;
  display: grid;
  grid-template-columns: 4px 80px minmax(0, 1fr) 110px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "stripe tag track clock"
    "stripe text text text";
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  padding: 18px 22px 22px;
  border-top: 1px dashed var(--line-2);
  min-width: 0;
}
#vmware-server-virtualization-page .bf-row:first-child{ border-top: 0}
#vmware-server-virtualization-page .bf-row > *{ min-width: 0}
#vmware-server-virtualization-page .bf-stripe{ grid-area: stripe; align-self: stretch}
#vmware-server-virtualization-page .bf-tag{ grid-area: tag}
#vmware-server-virtualization-page .bf-track{ grid-area: track}
#vmware-server-virtualization-page .bf-clock{ grid-area: clock}
#vmware-server-virtualization-page .bf-text{ grid-area: text}

#vmware-server-virtualization-page .bf-stripe{
  position: relative; width: 3px; height: 100%;
  background: var(--sev, var(--lime));
  box-shadow: 0 0 8px var(--sev, var(--lime));
}

#vmware-server-virtualization-page .bf-tag{
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--sev);
  border-radius: 2px;
  background: color-mix(in srgb, var(--sev) 8%, transparent);
}
#vmware-server-virtualization-page .bf-rank{
  font-family: var(--f-mono);
  font-size: 18px; font-weight: 700;
  color: var(--sev);
  line-height: 1;
}
#vmware-server-virtualization-page .bf-cap{
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: .12em;
  color: var(--sev);
  opacity: .75;
}

#vmware-server-virtualization-page .bf-track{
  position: relative;
  height: 32px;
  background: rgba(91,214,220,.03);
  border: 1px solid rgba(91,214,220,.1);
  border-radius: 999px;
  overflow: hidden;
}
#vmware-server-virtualization-page .bf-track-bg{
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 6px,
    rgba(91,214,220,.06) 6px,
    rgba(91,214,220,.06) 12px
  );
}
#vmware-server-virtualization-page .bf-track-fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, transparent, var(--fill, var(--lime)));
  box-shadow: 0 0 10px var(--fill, var(--lime));
  opacity: .35;
  transition: width 1.6s cubic-bezier(.4,.0,.2,1);
}
#vmware-server-virtualization-page .bf-runner{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sev, var(--lime));
  box-shadow: 0 0 12px var(--sev, var(--lime)), 0 0 0 4px rgba(91,214,220,.06);
  z-index: 2;
}
#vmware-server-virtualization-page .bf-runner::before{
  content:""; position: absolute; inset: -4px;
  border: 1px solid var(--sev, var(--lime));
  border-radius: 50%;
  opacity: .5;
  animation: runnerRing 1.4s ease-out infinite;
}
@keyframes runnerRing{
  0%{ transform: scale(.6); opacity: .8}
  100%{ transform: scale(2.2); opacity: 0}
}
#vmware-server-virtualization-page .bf-runner-1{ left: 5%;  animation: runnerMove1 4s ease-in-out infinite}
#vmware-server-virtualization-page .bf-runner-2{ left: 17%; animation: runnerMove2 6s ease-in-out infinite}
#vmware-server-virtualization-page .bf-runner-3{ left: 35%; animation: runnerMove3 8s ease-in-out infinite}
#vmware-server-virtualization-page .bf-runner-4{ left: 60%; animation: runnerMove4 12s ease-in-out infinite}
@keyframes runnerMove1{
  0%{ left: 4%} 50%{ left: 22%} 100%{ left: 4%}
}
@keyframes runnerMove2{
  0%{ left: 16%} 50%{ left: 38%} 100%{ left: 16%}
}
@keyframes runnerMove3{
  0%{ left: 34%} 50%{ left: 58%} 100%{ left: 34%}
}
@keyframes runnerMove4{
  0%{ left: 58%} 50%{ left: 80%} 100%{ left: 58%}
}

#vmware-server-virtualization-page .bf-clock{
  display: flex; flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border: 1px dashed rgba(91,214,220,.25);
  border-radius: 2px;
  background: rgba(0,0,0,.2);
}
#vmware-server-virtualization-page .bf-time{
  font-family: var(--f-mono);
  font-size: 20px; font-weight: 700;
  color: var(--sev, var(--lime));
  letter-spacing: .04em;
  text-shadow: 0 0 6px color-mix(in srgb, var(--sev, var(--lime)) 50%, transparent);
}
#vmware-server-virtualization-page .bf-lbl{
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: .12em;
  color: var(--t3);
  text-transform: uppercase;
}

#vmware-server-virtualization-page .bf-text h4{
  color: var(--t);
  font-size: 14.5px; font-weight: 600;
  margin-bottom: 4px;
}
#vmware-server-virtualization-page .bf-text p{
  color: var(--t2); font-size: 12.5px; line-height: 1.6;
}
#vmware-server-virtualization-page .bf-text strong{ color: var(--lime); font-weight: 600}

#vmware-server-virtualization-page .bf-row:hover{ background: rgba(91,214,220,.03)}
#vmware-server-virtualization-page .bf-row:hover .bf-runner{ animation-play-state: paused}

/* severity badge breathing */
#vmware-server-virtualization-page .bf-row.s1 .bf-tag{ animation: severityBlink 1.4s ease-in-out infinite}
#vmware-server-virtualization-page .bf-row.s2 .bf-tag{ animation: severityBlink 1.8s ease-in-out infinite .3s}
#vmware-server-virtualization-page .bf-row.s3 .bf-tag{ animation: severityBlink 2.4s ease-in-out infinite .6s}
#vmware-server-virtualization-page .bf-row.s4 .bf-tag{ animation: severityBlink 3s ease-in-out infinite .9s}

@media (max-width: 1080px){
  #vmware-server-virtualization-page .bf-row{ grid-template-columns: 4px 76px 1fr 96px; }
}
@media (max-width: 600px){
  #vmware-server-virtualization-page .bf-row{ grid-template-columns: 4px 70px 1fr; grid-template-areas: "stripe tag clock" "stripe track track" "stripe text text";}
}
#vmware-server-virtualization-page .bf-side{
  display: flex; flex-direction: column;
  gap: 14px;
}
#vmware-server-virtualization-page .bf-feature{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px; align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-1);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
#vmware-server-virtualization-page .bf-feature .icon{
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  color: var(--lime);
  background: rgba(91,214,220,.04);
  transition: border-color .25s, color .25s;
}
#vmware-server-virtualization-page .bf-feature h4{
  color: var(--t); font-size: 14.5px; font-weight: 600;
  margin-bottom: 4px;
}
#vmware-server-virtualization-page .bf-feature p{
  color: var(--t2); font-size: 13px; line-height: 1.65;
}
#vmware-server-virtualization-page .bf-feature p strong{ color: var(--lime); font-weight: 600}

/* =========================================================
   Break-fix — 4-step 应急流程 (报障 → 响应 → 处理 → 闭环)
   ========================================================= */
#vmware-server-virtualization-page .bf-flow{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 36px;
  padding: 22px 22px 26px;
  background: linear-gradient(180deg, rgba(10,26,46,.55), rgba(15,34,56,.32));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
#vmware-server-virtualization-page .bf-flow::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(91,214,220,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(91,214,220,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(420px 220px at 12% 0%, rgba(91,214,220,.10), transparent 60%),
    radial-gradient(420px 220px at 88% 100%, rgba(198,169,255,.10), transparent 60%);
  animation: gridShift 12s linear infinite;
}
#vmware-server-virtualization-page .bf-flow::after{
  content:""; position: absolute; left: 4%; right: 4%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(91,214,220,.6) 50%, transparent 100%);
  animation: horizScan 5s linear infinite;
}
#vmware-server-virtualization-page .bf-step{
  position: relative; padding: 6px 18px 6px 22px;
  display: flex; flex-direction: column; gap: 8px;
  border-left: 1px dashed var(--line-2);
}
#vmware-server-virtualization-page .bf-step:first-child{ border-left: 0; padding-left: 4px}
#vmware-server-virtualization-page .bf-step .ix-row{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--t3); text-transform: uppercase;
}
#vmware-server-virtualization-page .bf-step .ix-row .num{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(91,214,220,.10); border: 1px solid rgba(91,214,220,.4);
  color: var(--lime); font-weight: 700;
  animation: halo 2.4s ease-out infinite;
}
#vmware-server-virtualization-page .bf-step .ix-row .num em{
  font-style: normal; font-size: 11px;
}
#vmware-server-virtualization-page .bf-step .ix-row .tag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(91,214,220,.08); border: 1px solid rgba(91,214,220,.28);
  color: var(--lime); font-size: 10.5px; letter-spacing: .12em;
}
#vmware-server-virtualization-page .bf-step .ix-row .tag::before{
  content:""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lime); animation: dotPulse 1.4s ease-in-out infinite;
}
#vmware-server-virtualization-page .bf-step h4{
  color: var(--t); font-size: 18px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.2;
}
#vmware-server-virtualization-page .bf-step h4 em{
  font-style: normal; color: var(--lime);
}
#vmware-server-virtualization-page .bf-step p{
  color: var(--t2); font-size: 12.5px; line-height: 1.6;
}
#vmware-server-virtualization-page .bf-step ul{
  list-style: none; padding: 0; margin: 4px 0 0;
  display: grid; gap: 5px;
}
#vmware-server-virtualization-page .bf-step ul li{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--t2);
  display: flex; align-items: center; gap: 8px;
}
#vmware-server-virtualization-page .bf-step ul li::before{
  content:""; width: 12px; height: 1px; background: var(--lime); opacity: .55;
  flex: 0 0 auto;
}
#vmware-server-virtualization-page .bf-step ul li b{ color: var(--t); font-weight: 600}
#vmware-server-virtualization-page .bf-step .meta{
  margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-family: var(--f-mono); font-size: 10.5px; color: var(--t3);
  letter-spacing: .08em; line-height: 1.6;
}
#vmware-server-virtualization-page .bf-step .meta b{ color: var(--lime); font-weight: 600}

/* step connector arrow between cards (visual flow) */
#vmware-server-virtualization-page .bf-step::after{
  content:"→"; position: absolute; right: -10px; top: 26px;
  font-family: var(--f-mono); font-size: 16px; color: var(--lime);
  z-index: 2; opacity: .6;
  animation: arrowSlide 2.6s ease-in-out infinite;
}
#vmware-server-virtualization-page .bf-step:last-child::after{ display: none}
@media (max-width: 980px){
  #vmware-server-virtualization-page .bf-flow{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0}
  #vmware-server-virtualization-page .bf-step:nth-child(2)::after{ display: none}
  #vmware-server-virtualization-page .bf-step:nth-child(2n)::after{ display: none}
  #vmware-server-virtualization-page .bf-step{ padding: 8px 14px; border-left: 0; border-top: 1px dashed var(--line-2)}
  #vmware-server-virtualization-page .bf-step:nth-child(1),#vmware-server-virtualization-page .bf-step:nth-child(2){ border-top: 0}
}
@media (max-width: 560px){
  #vmware-server-virtualization-page .bf-flow{ grid-template-columns: 1fr}
  #vmware-server-virtualization-page .bf-step{ border-top: 1px dashed var(--line-2); padding: 14px 4px}
  #vmware-server-virtualization-page .bf-step:first-child{ border-top: 0}
  #vmware-server-virtualization-page .bf-step::after{ display: none !important}
}

/* =========================================================
   Deliverables
   ========================================================= */
#vmware-server-virtualization-page .deliv-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ #vmware-server-virtualization-page .deliv-grid{ grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 560px){ #vmware-server-virtualization-page .deliv-grid{ grid-template-columns: 1fr}}

/* ===== deliverables：左侧文件目录树 + 右侧文件预览 ===== */
#vmware-server-virtualization-page .deliv-grid{
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 16px;
  min-height: 540px;
}
@media (max-width: 980px){
  #vmware-server-virtualization-page .deliv-grid{ grid-template-columns: 1fr}
}

#vmware-server-virtualization-page .deliv-tree{
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--f-mono);
  position: relative;
}
#vmware-server-virtualization-page .deliv-tree::before{
  content:""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  animation: horizScan 5s linear infinite;
  opacity: .5;
}
#vmware-server-virtualization-page .tree-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(91,214,220,.04);
  font-size: 12px;
}
#vmware-server-virtualization-page .tree-path{ color: var(--t2); display: inline-flex; align-items: center; gap: 0}
#vmware-server-virtualization-page .tree-prompt{
  color: var(--lime); font-weight: 700;
  margin-left: 2px;
  animation: caretBlink 1s steps(2) infinite;
}
#vmware-server-virtualization-page .tree-branch{
  font-size: 10.5px; letter-spacing: .12em;
  color: var(--mint);
  padding: 1px 6px;
  border: 1px solid rgba(103,221,170,.4); border-radius: 2px;
  background: rgba(103,221,170,.06);
}
#vmware-server-virtualization-page .tree-row{
  display: grid;
  grid-template-columns: 26px 16px auto 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--t2);
  border-bottom: 1px dashed rgba(91,214,220,.08);
  cursor: pointer;
  transition: background .2s, color .2s;
  position: relative;
}
#vmware-server-virtualization-page .tree-row:last-child{ border-bottom: 0}
#vmware-server-virtualization-page .tree-row:hover{ background: rgba(91,214,220,.06); color: var(--t)}
#vmware-server-virtualization-page .tree-row.active{
  background: linear-gradient(90deg, rgba(91,214,220,.12), transparent);
  color: var(--t);
}
#vmware-server-virtualization-page .tree-row.active::before{
  content:""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
#vmware-server-virtualization-page .tree-row.active .tree-name{ color: var(--lime)}
#vmware-server-virtualization-page .tree-indent{ color: var(--t3); font-size: 11px; opacity: .55}
#vmware-server-virtualization-page .tree-icon{ display: inline-block; width: 14px; height: 14px; position: relative}
#vmware-server-virtualization-page .tree-icon::before{
  content:""; position: absolute; inset: 0;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, currentColor);
  opacity: .15;
}
#vmware-server-virtualization-page .tree-icon-graph::after{
  content:""; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px;
  border: 1.2px solid currentColor; border-radius: 50%;
}
#vmware-server-virtualization-page .tree-icon-chart::after{
  content:""; position: absolute; left: 3px; right: 3px; bottom: 3px;
  border-left: 1.2px solid currentColor; border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor;
}
#vmware-server-virtualization-page .tree-icon-shield::after{
  content:""; position: absolute; left: 4px; bottom: 2px;
  width: 6px; height: 8px; border: 1.2px solid currentColor; border-radius: 1px 1px 3px 3px;
}
#vmware-server-virtualization-page .tree-icon-book::after{
  content:""; position: absolute; left: 3px; top: 2px; bottom: 2px; right: 3px;
  border-left: 1.2px solid currentColor; border-right: 1.2px solid currentColor;
}
#vmware-server-virtualization-page .tree-icon-server::after{
  content:""; position: absolute; left: 2px; right: 2px; top: 3px; bottom: 3px;
  border-top: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
}
#vmware-server-virtualization-page .tree-icon-arrow::after{
  content:""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.2px;
  background: currentColor;
  box-shadow: -2px -3px 0 -1px currentColor, 4px -1px 0 -1px currentColor;
}
#vmware-server-virtualization-page .tree-icon-eye::after{
  content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 5px; border: 1.2px solid currentColor; border-radius: 50%;
}
#vmware-server-virtualization-page .tree-name{
  font-weight: 600; letter-spacing: .04em;
  color: var(--lime);
  transition: color .2s;
}
#vmware-server-virtualization-page .tree-fname{ color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
#vmware-server-virtualization-page .tree-size{ color: var(--t3); font-size: 10.5px; letter-spacing: .04em; white-space: nowrap}
#vmware-server-virtualization-page .tree-size i{ font-style: normal; opacity: .65; margin-left: 4px}

#vmware-server-virtualization-page .deliv-stage{
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
#vmware-server-virtualization-page .stage-pane{ display: none; padding: 24px 26px; min-height: 540px; flex-direction: column}
#vmware-server-virtualization-page .stage-pane.active{ display: flex}
#vmware-server-virtualization-page .stage-pane::before{
  content:""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--lime);
  opacity: .4;
  animation: horizScan 5s linear infinite;
}
#vmware-server-virtualization-page .stage-pane-head{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px;
  margin-bottom: 18px;
}
#vmware-server-virtualization-page .stage-tag{
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  letter-spacing: .12em;
  font-weight: 600;
}
#vmware-server-virtualization-page .stage-path{
  color: var(--t3); letter-spacing: .04em;
  font-family: var(--f-mono); font-size: 11px;
}
#vmware-server-virtualization-page .stage-name{
  font-size: 26px; font-weight: 600;
  color: var(--t); letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: 14px;
}
#vmware-server-virtualization-page .stage-desc{ color: var(--t2); font-size: 14px; line-height: 1.7}
#vmware-server-virtualization-page .stage-desc strong{ color: var(--mint); font-weight: 600}
#vmware-server-virtualization-page .stage-meta{
  margin-top: auto;
  display: flex; gap: 16px;
  padding-top: 24px;
  border-top: 1px dashed var(--line-2);
}
#vmware-server-virtualization-page .stage-stat{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--t3);
  display: inline-flex; align-items: center; gap: 6px;
}
#vmware-server-virtualization-page .stage-stat b{
  color: var(--mint); font-weight: 600;
  animation: caretSoftBlink 2.6s ease-in-out infinite;
}
#vmware-server-virtualization-page .stage-stat:nth-child(2) b{ color: var(--lime); animation-delay: .4s}
#vmware-server-virtualization-page .stage-stat:nth-child(3) b{ color: var(--violet); animation-delay: .8s}
#vmware-server-virtualization-page .sla{
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px){ #vmware-server-virtualization-page .sla{ grid-template-columns: 1fr}}
#vmware-server-virtualization-page .sla-row{
  padding: 18px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
}
#vmware-server-virtualization-page .sla-row .l h4{ color: var(--t); font-size: 14px; font-weight: 600}
#vmware-server-virtualization-page .sla-row .l p{ color: var(--t2); font-size: 12.5px; line-height: 1.5; margin-top: 4px}
#vmware-server-virtualization-page .sla-row .v{
  font-family: var(--f-display); font-weight: 700;
  font-size: 22px; color: var(--lime);
  letter-spacing: -0.02em;
}
#vmware-server-virtualization-page .sla-row .v span{ display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--t3); letter-spacing: .08em; margin-top: 2px; font-weight: 400}

/* =========================================================
   真实配图（misconception / migration / deliverables）
   ========================================================= */
/* 公用 figure 容器 */
#vmware-server-virtualization-page .mis-figure,#vmware-server-virtualization-page .mig-figure,#vmware-server-virtualization-page .deliv-figure{
  position: relative;
  margin-top: 28px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--ink-1);
  isolation: isolate;
}
#vmware-server-virtualization-page .mis-figure img,#vmware-server-virtualization-page .mig-figure img,#vmware-server-virtualization-page .deliv-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6.5;
  object-fit: cover;
  filter: contrast(1.05) brightness(.78) saturate(.92);
  transition: transform 1.2s cubic-bezier(.16,.84,.34,1);
}
/* 内嵌官方架构图（vSphere in the Enterprise）浅底图加白框，aspect-ratio 5/3 限制图过高，max-width 78% 让图偏小居中 */
#vmware-server-virtualization-page .mis-figure img.iso-svg,#vmware-server-virtualization-page .mig-figure img.iso-svg,#vmware-server-virtualization-page .deliv-figure img.iso-svg{
  aspect-ratio: 5 / 3;
  object-fit: contain;
  background: #f4f7fa;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 14px;
  filter: none;
  display: block;
  width: auto;
  max-width: 78%;
  max-height: 540px;
  margin: 0 auto;
}
/* SVG 版 iso-svg（自绘线条拓扑图，自带深色底，不需 object-fit/浅底） */
#vmware-server-virtualization-page .mis-figure svg.iso-svg,#vmware-server-virtualization-page .mig-figure svg.iso-svg,#vmware-server-virtualization-page .deliv-figure svg.iso-svg{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 0;
}
/* 让 iso-fig（架构图）跟上方 callout-box 同宽：
   callout-box 是在 .container (1240px, padding 0 28px, 内容 1184) 内的，
   iso-fig 在 section 直接子元素位置，原本撑满 1440px。
   这里限宽到 1240 + auto 居中 = 跟 .container 外缘对齐 */
#vmware-server-virtualization-page .mis-figure.iso-fig{
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#vmware-server-virtualization-page .mis-figure:hover img,#vmware-server-virtualization-page .mig-figure:hover img,#vmware-server-virtualization-page .deliv-figure:hover img{
  transform: scale(1.04);
}
/* 图片暗化覆盖层（让 caption 更易读） */
#vmware-server-virtualization-page .mis-figure::after,#vmware-server-virtualization-page .mig-figure::after,#vmware-server-virtualization-page .deliv-figure::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,29,.05) 0%, rgba(6,16,29,.55) 70%, rgba(6,16,29,.85) 100%);
  z-index: 1;
}
/* 角章（浮动标签） */
#vmware-server-virtualization-page .mis-figure figcaption,#vmware-server-virtualization-page .mig-figure figcaption,#vmware-server-virtualization-page .deliv-figure figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 26px 22px;
  display: flex; align-items: flex-start; gap: 14px;
  z-index: 2;
}
#vmware-server-virtualization-page .mis-figure .cap-tag,#vmware-server-virtualization-page .mig-figure .cap-tag,#vmware-server-virtualization-page .deliv-figure .cap-tag{
  flex-shrink: 0;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  padding: 5px 10px; border-radius: 4px;
  background: rgba(91,214,220,.12);
  border: 1px solid rgba(91,214,220,.45);
  color: var(--lime);
  align-self: flex-start;
  animation: pulseDot 2.6s ease-in-out infinite;
}
#vmware-server-virtualization-page .mig-figure .cap-tag{ background: rgba(198,169,255,.12); border-color: rgba(198,169,255,.45); color: #C6A9FF}
#vmware-server-virtualization-page .deliv-figure .cap-tag{ background: rgba(103,221,170,.12); border-color: rgba(103,221,170,.45); color: #67DDAA}
#vmware-server-virtualization-page .mis-figure .cap-body,#vmware-server-virtualization-page .mig-figure .cap-body,#vmware-server-virtualization-page .deliv-figure .cap-body{
  font-size: 14px; color: var(--t); line-height: 1.55; font-weight: 400;
}
#vmware-server-virtualization-page .mis-figure .cap-body strong,#vmware-server-virtualization-page .mig-figure .cap-body strong,#vmware-server-virtualization-page .deliv-figure .cap-body strong{ color: var(--lime); font-weight: 600}
#vmware-server-virtualization-page .mig-figure .cap-body strong{ color: #C6A9FF}
#vmware-server-virtualization-page .deliv-figure .cap-body strong{ color: #67DDAA}

/* iso-svg 图（内嵌 SVG / 官方图）caption 改为静态流，做成"独立段"而不是脚注 */
#vmware-server-virtualization-page .mis-figure.iso-fig{ background: transparent; border: 0}
#vmware-server-virtualization-page .mis-figure.iso-fig::after{ display: none}
#vmware-server-virtualization-page .mis-figure.iso-fig figcaption{
  position: static;
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, rgba(91,214,220,.05) 0%, rgba(91,214,220,.02) 100%);
  border: 1px solid var(--line-2);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  margin-top: 0;
  display: flex; flex-direction: column; gap: 10px;
}
#vmware-server-virtualization-page .mis-figure.iso-fig .cap-tag{
  align-self: flex-start;
  background: rgba(91,214,220,.14);
  border-color: rgba(91,214,220,.55);
  font-size: 11px; padding: 6px 12px;
}
#vmware-server-virtualization-page .mis-figure.iso-fig .cap-body{
  font-size: 14.5px; line-height: 1.7; color: var(--t);
}
#vmware-server-virtualization-page .mis-figure.iso-fig .cap-body strong{
  color: var(--lime); font-weight: 600;
}

/* migration 配图特殊样式：右侧浮动 tag */
#vmware-server-virtualization-page .mig-figure .mig-fig-img{
  position: relative; overflow: hidden;
}
#vmware-server-virtualization-page .mig-figure .mig-fig-overlay{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, transparent 55%, rgba(6,16,29,.55) 75%, rgba(6,16,29,.85) 100%);
}
#vmware-server-virtualization-page .mig-figure .mig-fig-tag{
  position: absolute; top: 18px; right: 18px; z-index: 3;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  padding: 5px 10px; border-radius: 4px;
  background: rgba(6,16,29,.7);
  border: 1px solid rgba(198,169,255,.55);
  color: #C6A9FF;
  animation: pulseDot 2.6s ease-in-out infinite;
}
#vmware-server-virtualization-page .mig-figure figcaption{ flex-direction: column; gap: 4px; max-width: 60%}

/* (18b) 配图 reveal scale + caption slide-up */
@keyframes figRevealScale{ 0%{ transform: scale(.96); opacity: 0} 100%{ transform: scale(1); opacity: 1}}
@keyframes figCapUp{ 0%{ transform: translateY(16px); opacity: 0} 100%{ transform: translateY(0); opacity: 1}}
#vmware-server-virtualization-page .mis-figure.reveal,#vmware-server-virtualization-page .mig-figure.reveal,#vmware-server-virtualization-page .deliv-figure.reveal{
  opacity: 0;
  animation: figRevealScale .9s cubic-bezier(.16,.84,.34,1) forwards;
}
#vmware-server-virtualization-page .mis-figure.reveal figcaption,#vmware-server-virtualization-page .mig-figure.reveal figcaption,#vmware-server-virtualization-page .deliv-figure.reveal figcaption{
  opacity: 0;
  animation: figCapUp .7s cubic-bezier(.16,.84,.34,1) forwards;
  animation-delay: .35s;
}

/* (18c) 配图 hover: 角章加速呼吸 */
#vmware-server-virtualization-page .mis-figure:hover .cap-tag,#vmware-server-virtualization-page .mig-figure:hover .mig-fig-tag,#vmware-server-virtualization-page .deliv-figure:hover .cap-tag{ animation-duration: 1.4s}

/* (18d) CTA 区主标题文字流光 + h2 描边 */
@keyframes ctaTextGlow{ 0%,100%{ text-shadow: 0 0 0 rgba(91,214,220,0)} 50%{ text-shadow: 0 0 18px rgba(91,214,220,.45)}}
#vmware-server-virtualization-page .cta-band h2{ animation: ctaTextGlow 4.2s ease-in-out infinite}
#vmware-server-virtualization-page .cta-band h2 em{ animation: gradientFlow 6s linear infinite; background-size: 200% 100%}

/* CTA section 背景图 */
#vmware-server-virtualization-page .cta-bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../images/vmware-server-virtualization/bg-cta-network.jpg');
  background-size: cover; background-position: center;
  filter: brightness(.32) saturate(.6) hue-rotate(-12deg);
  opacity: .55;
  animation: ctaDrift 22s ease-in-out infinite alternate;
}
@keyframes ctaDrift{
  0%{ transform: scale(1.05) translate(0, 0)}
  100%{ transform: scale(1.12) translate(-2%, -1.5%)}
}
#vmware-server-virtualization-page .cta-band > .cta-grid{ position: relative; z-index: 1}

/* =========================================================
   CTA
   ========================================================= */
#vmware-server-virtualization-page .cta-band{
  position: relative;
  margin-top: 36px;
  padding: clamp(28px, 3.5vw, 48px) 28px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(91,214,220,.15), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line-2);
  overflow: hidden;
}
#vmware-server-virtualization-page .cta-band::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, #000 30%, transparent 80%);
}
#vmware-server-virtualization-page .cta-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px; align-items: center;
}
@media (max-width: 900px){ #vmware-server-virtualization-page .cta-grid{ grid-template-columns: 1fr}}
#vmware-server-virtualization-page .cta-band h2{ font-size: clamp(28px, 3.4vw, 40px)}
#vmware-server-virtualization-page .cta-band h2 em{ font-style: normal; color: var(--lime)}
#vmware-server-virtualization-page .cta-band p{ color: var(--t2); font-size: 16px; line-height: 1.65; margin-top: 14px; max-width: 52ch}
#vmware-server-virtualization-page .cta-band .actions{ margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap}
#vmware-server-virtualization-page .cta-side{
  display: grid; gap: 12px;
}
/* CTA terminal command line */
#vmware-server-virtualization-page .cta-term{
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: #02060C;
  font-family: var(--f-mono);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 32px -16px rgba(91,214,220,.4);
  position: relative;
  overflow: hidden;
}
#vmware-server-virtualization-page .cta-term::before{
  content:""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.08), transparent);
  animation: ctaTermScan 3.6s linear infinite;
}
@keyframes ctaTermScan{
  to{ left: 100%}
}
#vmware-server-virtualization-page .cta-prompt{
  color: var(--lime); font-weight: 700;
  font-size: 16px;
  text-shadow: 0 0 8px var(--lime);
}
#vmware-server-virtualization-page .cta-cmd{
  color: var(--t); font-size: 14px;
  letter-spacing: .02em;
}
#vmware-server-virtualization-page .cta-cursor{
  display: inline-block;
  width: 9px; height: 16px;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: caretBlink 1s steps(2) infinite;
}
#vmware-server-virtualization-page .cta-blink{
  color: var(--mint);
  margin-left: auto;
  font-size: 16px; font-weight: 700;
  animation: blinkSoft 2.4s ease-in-out infinite;
}
@keyframes blinkSoft{
  0%,100%{ opacity: .3}
  50%{ opacity: 1}
}

#vmware-server-virtualization-page .cta-info{
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.2);
  transition: border-color .25s, transform .25s, background .25s;
  min-width: 0;
}
#vmware-server-virtualization-page .cta-info:hover{
  border-color: var(--lime);
  background: rgba(91,214,220,.04);
  transform: translateX(4px);
}
#vmware-server-virtualization-page .cta-i-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(91,214,220,.4);
  border-radius: 2px;
  color: var(--lime);
  background: rgba(91,214,220,.08);
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
}
#vmware-server-virtualization-page .cta-arrow{
  color: var(--lime);
  font-size: 18px; font-weight: 600;
  font-family: var(--f-mono);
  transition: transform .25s;
}
#vmware-server-virtualization-page .cta-info:hover .cta-arrow{
  transform: translateX(6px);
}
#vmware-server-virtualization-page .cta-info .ic{ color: var(--lime)}
#vmware-server-virtualization-page .cta-info .lbl{
  font-family: var(--f-mono); font-size: 10.5px; color: var(--t3);
  letter-spacing: .12em; text-transform: uppercase;
}
#vmware-server-virtualization-page .cta-info .val{ color: var(--t); font-size: 13.5px; font-family: var(--f-mono); font-weight: 500; margin-top: 2px}

/* =========================================================
   Footer
   ========================================================= */
#vmware-server-virtualization-page .foot{
  padding: 36px 0 28px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--t3);
  letter-spacing: .08em;
}
#vmware-server-virtualization-page .foot-inner{
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
#vmware-server-virtualization-page .foot .left{ display: flex; align-items: center; gap: 14px}
#vmware-server-virtualization-page .foot .left .brand{ color: var(--t)}
#vmware-server-virtualization-page .foot .right{ margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap}
#vmware-server-virtualization-page .foot .right a{ color: var(--t3); transition: color .2s}
#vmware-server-virtualization-page .foot .right a:hover{ color: var(--t)}

/* =========================================================
   动效补充层 —— 让整页"动起来"
   ========================================================= */

/* (1) 章节 eyebrow 圆点发光环 + 持续呼吸 */
#vmware-server-virtualization-page .eyebrow .dot{
  animation: halo 2.4s ease-out infinite, pulseDot 1.6s ease-in-out infinite;
}
/* (2) 章节标题 em 高亮文字持续流光 */
#vmware-server-virtualization-page .sec-head h2 em,#vmware-server-virtualization-page .hero h1 em,#vmware-server-virtualization-page .cta h2 em{
  background: linear-gradient(90deg, var(--lime) 0%, #B8F0F2 50%, var(--lime) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientFlow 4s linear infinite;
}
/* (3) 所有 h2 标题底部一道持续流光细线 */
#vmware-server-virtualization-page .sec-head{ position: relative}
#vmware-server-virtualization-page .sec-head::after{
  content:""; position: absolute; left: 0; bottom: -14px;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--lime) 0%, transparent 100%);
  animation: underlinePulse 2.8s ease-in-out infinite;
}
/* (4) 错误陷阱卡 hover — 图标呼吸 + 卡片抬升 */
#vmware-server-virtualization-page .mis .ix{ transition: color .25s}
#vmware-server-virtualization-page .mis:hover .ix{ color: var(--lime)}
#vmware-server-virtualization-page .mis .num{ transition: transform .35s ease, text-shadow .35s ease}
#vmware-server-virtualization-page .mis:hover .num{ transform: scale(1.08) rotate(-3deg); text-shadow: 0 0 8px rgba(91,214,220,.5)}

/* (5) 评估进度条 — 持续流光 (不只是 reveal 时填充) */
#vmware-server-virtualization-page .assess-item .pb .bar i::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  animation: shimmerSweep 2.6s ease-in-out infinite;
}
/* (6) 评估 item 卡 — hover 抬升 + 边框扫光 */
#vmware-server-virtualization-page .assess-item{
  transition: border-color .3s, transform .3s, background .3s, box-shadow .3s;
}
#vmware-server-virtualization-page .assess-item:hover{
  border-color: rgba(91,214,220,.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -16px rgba(91,214,220,.55);
}

/* (7) 架构图 arch-frame 角标 — 持续呼吸 */
#vmware-server-virtualization-page .arch-diagram > .arch-frame-tl,#vmware-server-virtualization-page .arch-diagram > .arch-frame-tr,#vmware-server-virtualization-page .arch-diagram > .arch-frame-bl,#vmware-server-virtualization-page .arch-diagram > .arch-frame-br{ animation: cornerBlink 3.2s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-tr{ animation-delay: .8s}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-bl{ animation-delay: 1.6s}
#vmware-server-virtualization-page .arch-diagram > .arch-frame-br{ animation-delay: 2.4s}

/* (9) 架构图 SVG 内连接箭头 — 持续虚线流动 */
#vmware-server-virtualization-page .arch-diagram svg path[stroke-dasharray]{ animation: flow 3s linear infinite}

/* (9.1) 架构图 SVG 内 — vCenter / NSX / vSAN / Veeam 关键组件呼吸描边 */
@keyframes archBoxPulse{
  0%,100%{ stroke-opacity: .85; filter: drop-shadow(0 0 0 rgba(91,214,220,0))}
  50%{ stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(91,214,220,.65))}
}
@keyframes archBoxPulseViolet{
  0%,100%{ stroke-opacity: .85; filter: drop-shadow(0 0 0 rgba(198,169,255,0))}
  50%{ stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(198,169,255,.65))}
}
@keyframes archBoxPulseMint{
  0%,100%{ stroke-opacity: .85; filter: drop-shadow(0 0 0 rgba(103,221,170,0))}
  50%{ stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(103,221,170,.65))}
}
@keyframes archBoxPulseAmber{
  0%,100%{ stroke-opacity: .85; filter: drop-shadow(0 0 0 rgba(241,197,111,0))}
  50%{ stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(241,197,111,.65))}
}
#vmware-server-virtualization-page .arch-diagram svg .box-vc{ animation: archBoxPulse 2.4s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg .box-nsx{ animation: archBoxPulseViolet 2.6s ease-in-out infinite; animation-delay: .3s}
#vmware-server-virtualization-page .arch-diagram svg .box-vsan{ animation: archBoxPulseMint 2.8s ease-in-out infinite; animation-delay: .6s}
#vmware-server-virtualization-page .arch-diagram svg .box-veeam{ animation: archBoxPulseAmber 3s ease-in-out infinite; animation-delay: .9s}

/* (9.2) vCenter 上方"心跳"小圆点 */
#vmware-server-virtualization-page .arch-diagram svg .vc-dot{ animation: pulseDot 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box}
#vmware-server-virtualization-page .arch-diagram svg .vc-dot:nth-of-type(2){ animation-delay: .3s}
#vmware-server-virtualization-page .arch-diagram svg .vc-dot:nth-of-type(3){ animation-delay: .6s}

/* (9.3) 应用层 tag chip 错位呼吸 — 提示业务流量 */
#vmware-server-virtualization-page .arch-diagram svg .app-chip{ animation: breathe 3s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(2){ animation-delay: .4s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(3){ animation-delay: .8s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(4){ animation-delay: 1.2s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(5){ animation-delay: 1.6s}

/* (9.4) 物理资源层硬件"心跳"状态灯 */
#vmware-server-virtualization-page .arch-diagram svg .hw-led{
  animation: severityBlink 1.4s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
#vmware-server-virtualization-page .arch-diagram svg .hw-led:nth-of-type(2){ animation-delay: .3s}
#vmware-server-virtualization-page .arch-diagram svg .hw-led:nth-of-type(3){ animation-delay: .6s}
#vmware-server-virtualization-page .arch-diagram svg .hw-led:nth-of-type(4){ animation-delay: .9s}
#vmware-server-virtualization-page .arch-diagram svg .hw-led:nth-of-type(5){ animation-delay: 1.2s}

/* (9.5) 管理层小标签错位呼吸 */
#vmware-server-virtualization-page .arch-diagram svg .mgmt-chip{ animation: dotPulse 2.4s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg .mgmt-chip:nth-of-type(2){ animation-delay: .3s}
#vmware-server-virtualization-page .arch-diagram svg .mgmt-chip:nth-of-type(3){ animation-delay: .6s}
#vmware-server-virtualization-page .arch-diagram svg .mgmt-chip:nth-of-type(4){ animation-delay: .9s}
#vmware-server-virtualization-page .arch-diagram svg .mgmt-chip:nth-of-type(5){ animation-delay: 1.2s}
#vmware-server-virtualization-page .arch-diagram svg .mgmt-chip:nth-of-type(6){ animation-delay: 1.5s}

/* (9.5b) vSphere 关键 box 描边流动 — 像扫描仪一样 */
@keyframes borderScanLime{ 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-48}}
@keyframes borderScanViolet{ 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-48}}
@keyframes borderScanMint{ 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-48}}
@keyframes borderScanAmber{ 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-48}}
#vmware-server-virtualization-page .arch-diagram svg .box-vc{ stroke-dasharray: 6 2; animation: archBoxPulse 2.4s ease-in-out infinite, borderScanLime 4s linear infinite}
#vmware-server-virtualization-page .arch-diagram svg .box-nsx{ stroke-dasharray: 6 2; animation: archBoxPulseViolet 2.6s ease-in-out infinite, borderScanViolet 4.5s linear infinite; animation-delay: .3s, .3s}
#vmware-server-virtualization-page .arch-diagram svg .box-vsan{ stroke-dasharray: 6 2; animation: archBoxPulseMint 2.8s ease-in-out infinite, borderScanMint 5s linear infinite; animation-delay: .6s, .6s}
#vmware-server-virtualization-page .arch-diagram svg .box-veeam{ stroke-dasharray: 6 2; animation: archBoxPulseAmber 3s ease-in-out infinite, borderScanAmber 5.5s linear infinite; animation-delay: .9s, .9s}

/* (9.5c) chip 文本微闪 — 像 LCD 像素 */
@keyframes chipTextFlicker{ 0%,100%{opacity:1} 50%{opacity:.78}}
#vmware-server-virtualization-page .arch-diagram svg .app-chip + text{ animation: chipTextFlicker 2.8s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(2) + text{ animation-delay: .35s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(3) + text{ animation-delay: .7s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(4) + text{ animation-delay: 1.05s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(5) + text{ animation-delay: 1.4s}
#vmware-server-virtualization-page .arch-diagram svg .app-chip:nth-of-type(6) + text{ animation-delay: 1.75s}

/* (9.5d) 数据流注释行 — 像终端扫描 */
@keyframes annotScan{
  0%,100%{ opacity: .85}
  50%{ opacity: 1; filter: drop-shadow(0 0 4px currentColor)}
}
#vmware-server-virtualization-page .arch-diagram svg text[font-family*="JetBrains"]{ animation: annotScan 2.4s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg text[font-family*="JetBrains"]:nth-of-type(2){ animation-delay: .4s}
#vmware-server-virtualization-page .arch-diagram svg text[font-family*="JetBrains"]:nth-of-type(3){ animation-delay: .8s}
#vmware-server-virtualization-page .arch-diagram svg text[font-family*="JetBrains"]:nth-of-type(4){ animation-delay: 1.2s}

/* (9.5e) 连接箭头 marker — 脉动描边 */
@keyframes arrowPulse{
  0%,100%{ opacity: .55}
  50%{ opacity: 1; filter: drop-shadow(0 0 3px #C6A9FF)}
}
#vmware-server-virtualization-page .arch-diagram svg g[stroke="#C6A9FF"][opacity]{ animation: arrowPulse 2s ease-in-out infinite}

/* (9.5f) layer 容器描边 — 像栅栏被风吹 */
@keyframes layerBorderWave{
  0%,100%{ stroke-opacity: .14}
  50%{ stroke-opacity: .36}
}
#vmware-server-virtualization-page .arch-diagram svg .lyr > rect:first-child{ animation: layerBorderWave 4s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg .lyr:nth-of-type(2) > rect:first-child{ animation-delay: 1s}
#vmware-server-virtualization-page .arch-diagram svg .lyr:nth-of-type(3) > rect:first-child{ animation-delay: 2s}
#vmware-server-virtualization-page .arch-diagram svg .lyr:nth-of-type(4) > rect:first-child{ animation-delay: 3s}

/* (9.5g) layer 标题文字 — 慢呼吸 */
@keyframes titleBreath{ 0%,100%{opacity:.88} 50%{opacity:1}}
#vmware-server-virtualization-page .arch-diagram svg text[font-weight="600"]{ animation: titleBreath 3.4s ease-in-out infinite}
#vmware-server-virtualization-page .arch-diagram svg text[font-weight="600"]:nth-of-type(2){ animation-delay: 1.1s}
#vmware-server-virtualization-page .arch-diagram svg text[font-weight="600"]:nth-of-type(3){ animation-delay: 2.2s}

/* ====================================================================
   ★ 硬核终端化强化 v2 — term-card / term-bar / LED / 打字机 / 数据流
   ==================================================================== */

/* (T1) 终端窗口外壳 — 复用给架构图 / breakfix / deliverables */
#vmware-server-virtualization-page .rep-shell{
  position: relative;
  background: linear-gradient(180deg, rgba(8,16,28,.94) 0%, rgba(3,7,14,.97) 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(91,214,220,.06), 0 30px 70px -34px rgba(0,0,0,.9), inset 0 0 80px rgba(91,214,220,.025);
}
#vmware-server-virtualization-page .rep-shell > .rep-bar{ position: relative; z-index: 3}
#vmware-server-virtualization-page .rep-shell > .rep-scan{ z-index: 1}
#vmware-server-virtualization-page .rep-shell > .cross-mark{ z-index: 4}
#vmware-server-virtualization-page .rep-shell > *:not(.rep-bar):not(.rep-scan):not(.cross-mark){ position: relative; z-index: 2}
/* (T21) mis-callout bar — 与 rep-bar 类似但属于 mis-callout */
#vmware-server-virtualization-page .mc-bar{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(91,214,220,.04);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  position: relative;
}
#vmware-server-virtualization-page .mc-bar::before{
  content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  width: 30%; animation: horizScan 5.5s linear infinite; opacity: .4;
}
#vmware-server-virtualization-page .mc-bar .rep-title{ color: var(--t2)}
#vmware-server-virtualization-page .mc-bar .rep-title b{ color: var(--lime)}

/* mis-callout 内部布局 */
#vmware-server-virtualization-page .mis-callout{
  display: block;
  position: relative;
}
#vmware-server-virtualization-page .mis-callout .callout-body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 0;
}
#vmware-server-virtualization-page .mis-callout .callout-body > p{
  grid-column: 1 / -1;
  font-size: 14.5px; color: var(--t); line-height: 1.65;
}
#vmware-server-virtualization-page .mis-callout .callout-body > .ascii-divider{
  grid-column: 1 / -1;
}
#vmware-server-virtualization-page .mis-callout .callout-body > .callout-foot{
  grid-column: 1 / -1;
}

#vmware-server-virtualization-page .rep-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .08em;
  background: linear-gradient(180deg, rgba(91,214,220,.06), transparent);
  position: relative;
}
#vmware-server-virtualization-page .rep-bar::before{
  content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  width: 40%; animation: horizScan 6s linear infinite;
  opacity: .35;
}
#vmware-server-virtualization-page .rep-bar .rep-dots{ display: inline-flex; gap: 5px}
#vmware-server-virtualization-page .rep-bar .rep-dots i{
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(91,214,220,.18); border: 1px solid rgba(91,214,220,.4);
}
#vmware-server-virtualization-page .rep-bar .rep-dots i:nth-child(1){ background: rgba(255,142,142,.4); border-color: rgba(255,142,142,.6); animation: severityBlink 2.2s ease-in-out infinite}
#vmware-server-virtualization-page .rep-bar .rep-dots i:nth-child(2){ background: rgba(241,197,111,.4); border-color: rgba(241,197,111,.6)}
#vmware-server-virtualization-page .rep-bar .rep-dots i:nth-child(3){ background: rgba(103,221,170,.4); border-color: rgba(103,221,170,.6)}
#vmware-server-virtualization-page .rep-bar .rep-title{ color: var(--t2)}
#vmware-server-virtualization-page .rep-bar .rep-title b{ color: var(--lime); font-weight: 600}
#vmware-server-virtualization-page .rep-bar .rep-meta{ margin-left: auto; color: var(--t3); display: inline-flex; gap: 14px; align-items: center}
#vmware-server-virtualization-page .rep-bar .rep-meta .rep-live{
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--mint);
}
#vmware-server-virtualization-page .rep-bar .rep-meta .rep-live i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 6px var(--mint);
  animation: pulseDot 1.4s ease-in-out infinite;
}

/* (T2) 终端感扫描光带 — 在 rep-shell 内缓慢下移 */
#vmware-server-virtualization-page .rep-scan{
  position: absolute; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, transparent 0%, rgba(91,214,220,.06) 50%, transparent 100%);
  pointer-events: none; z-index: 0;
  animation: repScanMove 5.5s linear infinite;
}
@keyframes repScanMove{
  0%{ transform: translateY(-90px)}
  100%{ transform: translateY(720px)}
}

/* (T3) 卡片左上 / 右下角十字定位标记 */
#vmware-server-virtualization-page .cross-mark{
  position: absolute; width: 10px; height: 10px;
  pointer-events: none; z-index: 2;
}
#vmware-server-virtualization-page .cross-mark::before,#vmware-server-virtualization-page .cross-mark::after{
  content:""; position: absolute; background: var(--lime);
  opacity: .55;
}
#vmware-server-virtualization-page .cross-mark::before{ left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%)}
#vmware-server-virtualization-page .cross-mark::after{ top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%)}
#vmware-server-virtualization-page .cross-mark.cm-tl{ top: 6px; left: 6px}
#vmware-server-virtualization-page .cross-mark.cm-tr{ top: 6px; right: 6px}
#vmware-server-virtualization-page .cross-mark.cm-bl{ bottom: 6px; left: 6px}
#vmware-server-virtualization-page .cross-mark.cm-br{ bottom: 6px; right: 6px}
#vmware-server-virtualization-page .cross-mark.cm-tr::before,#vmware-server-virtualization-page .cross-mark.cm-tr::after{ background: var(--violet); opacity: .5}
#vmware-server-virtualization-page .cross-mark.cm-bl::before,#vmware-server-virtualization-page .cross-mark.cm-bl::after{ background: var(--mint); opacity: .5}

/* (T4) LED 状态点 — 用在卡片左上 */
#vmware-server-virtualization-page .led-dot{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 6px var(--lime);
  animation: severityBlink 1.6s ease-in-out infinite;
  vertical-align: middle;
}
#vmware-server-virtualization-page .led-dot.led-mint{ background: var(--mint); box-shadow: 0 0 6px var(--mint)}
#vmware-server-virtualization-page .led-dot.led-amber{ background: var(--amber); box-shadow: 0 0 6px var(--amber); animation-duration: 2s}
#vmware-server-virtualization-page .led-dot.led-violet{ background: var(--violet); box-shadow: 0 0 6px var(--violet); animation-duration: 2.4s; animation-delay: .5s}
#vmware-server-virtualization-page .led-dot.led-red{ background: var(--red); box-shadow: 0 0 6px var(--red); animation-duration: 1.4s}

/* (T5) 终端化卡顶部 — 替换 .ix 为带编号 + LED + 操作码 */
#vmware-server-virtualization-page .term-card-head{
  display: grid; grid-template-columns: auto auto 1fr auto;
  grid-column: 1 / -1;
  align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--t3);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
  text-transform: uppercase;
  min-width: 0;
}
#vmware-server-virtualization-page .term-card-head .tch-num{ color: var(--red); font-weight: 600}
#vmware-server-virtualization-page .term-card-head .tch-op{ color: var(--t2)}
#vmware-server-virtualization-page .term-card-head .tch-time{ margin-left: auto; color: var(--lime)}
#vmware-server-virtualization-page .term-card-head .tch-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--lime); background: rgba(91,214,220,.05);
}
#vmware-server-virtualization-page .term-card-head .tch-tag.tch-tag-mint{ color: var(--mint); border-color: rgba(103,221,170,.4); background: rgba(103,221,170,.05)}
#vmware-server-virtualization-page .term-card-head .tch-tag.tch-tag-amber{ color: var(--amber); border-color: rgba(241,197,111,.4); background: rgba(241,197,111,.05)}
#vmware-server-virtualization-page .term-card-head .tch-tag.tch-tag-violet{ color: var(--violet); border-color: rgba(198,169,255,.4); background: rgba(198,169,255,.05)}

/* (T6) 打字机光标 — 给段落逐字显示 */
#vmware-server-virtualization-page .t-cursor::after{
  content:"_"; color: var(--lime);
  font-family: var(--f-mono); font-weight: 700;
  margin-left: 2px;
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretSoftBlink{ 0%,100%{opacity:1} 50%{opacity:.25}}

/* (T7) ASCII 装饰横线 */
#vmware-server-virtualization-page .ascii-divider{
  height: 14px; line-height: 14px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .15em;
  color: var(--t3); opacity: .55;
  white-space: nowrap; overflow: hidden;
  margin: 14px 0 10px;
  position: relative;
}
#vmware-server-virtualization-page .ascii-divider::before{
  content:"— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —";
  display: inline-block;
  background: linear-gradient(90deg, var(--lime) 0%, var(--t3) 40%, var(--t3) 60%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: asciiDrift 28s linear infinite;
}
@keyframes asciiDrift{
  0%{ transform: translateX(0)}
  100%{ transform: translateX(-50%)}
}

/* (T8) 数据点 chip — 强化型 chip（带 LED） */
#vmware-server-virtualization-page .dchip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(91,214,220,.04);
  color: var(--lime);
  text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: background .25s, border-color .25s, transform .2s;
}
#vmware-server-virtualization-page .dchip::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.18), transparent);
  transform: translateX(-100%);
  animation: shimmerSweep 5.5s linear infinite;
}
#vmware-server-virtualization-page .dchip:hover{ background: rgba(91,214,220,.1); border-color: rgba(91,214,220,.55); transform: translateY(-1px)}
#vmware-server-virtualization-page .dchip .dchip-led{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor}
#vmware-server-virtualization-page .dchip.dc-mint{ color: var(--mint); background: rgba(103,221,170,.05); border-color: rgba(103,221,170,.3)}
#vmware-server-virtualization-page .dchip.dc-amber{ color: var(--amber); background: rgba(241,197,111,.05); border-color: rgba(241,197,111,.3)}
#vmware-server-virtualization-page .dchip.dc-violet{ color: var(--violet); background: rgba(198,169,255,.05); border-color: rgba(198,169,255,.3)}
#vmware-server-virtualization-page .dchip.dc-red{ color: var(--red); background: rgba(255,142,142,.05); border-color: rgba(255,142,142,.3)}

/* (T9) 数据计数器跳 — 数字脚标 */
#vmware-server-virtualization-page .num-counter{
  display: inline-block; font-family: var(--f-mono); font-weight: 700;
  color: var(--lime);
  text-shadow: 0 0 10px rgba(91,214,220,.45);
  animation: numberTick 3.6s ease-in-out infinite;
}

/* (T10) 终端 sparkline / 折线动画 */
#vmware-server-virtualization-page .t-spark{ position: relative; height: 30px; overflow: hidden}
#vmware-server-virtualization-page .t-spark svg{ width: 100%; height: 100%}
#vmware-server-virtualization-page .t-spark path{ stroke: var(--lime); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3}
#vmware-server-virtualization-page .t-spark path.s2{ stroke: var(--violet); animation-delay: .6s}
#vmware-server-virtualization-page .t-spark path.s3{ stroke: var(--mint); animation-delay: 1.2s}
#vmware-server-virtualization-page .t-spark .fill{ fill: rgba(91,214,220,.08); stroke: none}
#vmware-server-virtualization-page .t-spark .fill.amber{ fill: rgba(241,197,111,.08)}
#vmware-server-virtualization-page .t-spark .fill.violet{ fill: rgba(198,169,255,.08)}

/* (T11) 终端化横向 stat 列表（带闪烁值） */
#vmware-server-virtualization-page .t-stat-row{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; color: var(--t2);
  padding: 4px 0;
  border-bottom: 1px dashed var(--line-2);
}
#vmware-server-virtualization-page .t-stat-row:last-child{ border-bottom: 0}
#vmware-server-virtualization-page .t-stat-row .k{ color: var(--t3); min-width: 78px}
#vmware-server-virtualization-page .t-stat-row .v{ color: var(--lime); font-weight: 600}
#vmware-server-virtualization-page .t-stat-row .v.amber{ color: var(--amber)}
#vmware-server-virtualization-page .t-stat-row .v.mint{ color: var(--mint)}
#vmware-server-virtualization-page .t-stat-row .v.violet{ color: var(--violet)}
#vmware-server-virtualization-page .t-stat-row .bar-track{
  flex: 1; height: 4px; background: rgba(91,214,220,.08); border-radius: 1px; overflow: hidden;
  position: relative;
}
#vmware-server-virtualization-page .t-stat-row .bar-fill{
  display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--mint));
  position: relative; transform-origin: left; transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.16,.84,.34,1);
}
#vmware-server-virtualization-page .t-stat-row.is-on .bar-fill{ transform: scaleX(var(--pb, 0.5))}
#vmware-server-virtualization-page .t-stat-row .bar-fill::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: shimmerSweep 2.6s linear infinite;
}
/* (T11b) 触发：reveal.is-on 后自动填充（无需 JS） */
#vmware-server-virtualization-page .reveal.is-on .t-stat-row .bar-fill{ transform: scaleX(var(--pb, 0.5))}
#vmware-server-virtualization-page .reveal.is-on .t-stat-row{ animation: tStatFadeIn .6s ease both}
@keyframes tStatFadeIn{ 0%{ opacity: 0; transform: translateX(-6px)} 100%{ opacity: 1; transform: translateX(0)}}
/* (T11c) cross-mark 角标 - 进页面就有 */
#vmware-server-virtualization-page .cross-mark{ animation: cornerBlink 2.6s ease-in-out infinite}
#vmware-server-virtualization-page .cross-mark.cm-tr{ animation-delay: .7s}
#vmware-server-virtualization-page .cross-mark.cm-bl{ animation-delay: 1.3s}
#vmware-server-virtualization-page .cross-mark.cm-br{ animation-delay: 1.9s}
/* (T11d) rep-shell 默认扫描更明显 */
#vmware-server-virtualization-page .rep-shell{ position: relative}
#vmware-server-virtualization-page .rep-shell::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(91,214,220,.04), transparent 60%);
}

/* (T12) 数据包粒子流（横向） */
#vmware-server-virtualization-page .t-particle-flow{
  position: relative; height: 18px; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.06), transparent);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
#vmware-server-virtualization-page .t-particle-flow i{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 6px var(--lime);
  animation: particleTravel 4s linear infinite;
}
#vmware-server-virtualization-page .t-particle-flow i:nth-child(2){ animation-delay: .8s; background: var(--mint); box-shadow: 0 0 6px var(--mint)}
#vmware-server-virtualization-page .t-particle-flow i:nth-child(3){ animation-delay: 1.6s; background: var(--violet); box-shadow: 0 0 6px var(--violet)}
#vmware-server-virtualization-page .t-particle-flow i:nth-child(4){ animation-delay: 2.4s; background: var(--amber); box-shadow: 0 0 6px var(--amber)}
@keyframes particleTravel{
  0%{ left: -8px; opacity: 0}
  10%{ opacity: 1}
  90%{ opacity: 1}
  100%{ left: calc(100% + 8px); opacity: 0}
}

/* (T13) ASCII 装饰 — ▣ ◆ — 标签用 */
#vmware-server-virtualization-page .ascii-tag{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--lime); text-transform: uppercase;
  position: relative; padding-left: 16px;
}
#vmware-server-virtualization-page .ascii-tag::before{
  content:"▣"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--lime); font-size: 11px;
  animation: caretSoftBlink 2.4s ease-in-out infinite;
}
#vmware-server-virtualization-page .ascii-tag.as-tag-violet{ color: var(--violet)}
#vmware-server-virtualization-page .ascii-tag.as-tag-violet::before{ color: var(--violet)}
#vmware-server-virtualization-page .ascii-tag.as-tag-mint{ color: var(--mint)}
#vmware-server-virtualization-page .ascii-tag.as-tag-mint::before{ color: var(--mint)}
#vmware-server-virtualization-page .ascii-tag.as-tag-amber{ color: var(--amber)}
#vmware-server-virtualization-page .ascii-tag.as-tag-amber::before{ color: var(--amber)}

/* (T14) 边框扫描 — 给非 SVG 卡片 */
#vmware-server-virtualization-page .card-border-scan{ position: relative}
#vmware-server-virtualization-page .card-border-scan::before{
  content:""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background-size: 200% 100%;
  animation: borderSweep 3.6s linear infinite;
  pointer-events: none;
}
@keyframes borderSweep{
  0%{ background-position: -100% 0}
  100%{ background-position: 200% 0}
}

/* (T15) 数据矩阵小格 — 用在 stats / kpi */
#vmware-server-virtualization-page .matrix-grid{
  display: grid; gap: 2px;
  font-family: var(--f-mono); font-size: 9.5px;
}
#vmware-server-virtualization-page .matrix-grid i{
  display: block; aspect-ratio: 1; border-radius: 1px;
  background: rgba(91,214,220,.08);
  position: relative;
  animation: matrixShine 4s ease-in-out infinite;
}
#vmware-server-virtualization-page .matrix-grid i:nth-child(3n){ background: rgba(198,169,255,.08); animation-delay: .4s}
#vmware-server-virtualization-page .matrix-grid i:nth-child(5n){ background: rgba(103,221,170,.08); animation-delay: .8s}
#vmware-server-virtualization-page .matrix-grid i:nth-child(7n){ background: rgba(91,214,220,.14); animation-delay: 1.2s}
@keyframes matrixShine{
  0%,100%{ opacity: .5}
  50%{ opacity: 1; box-shadow: 0 0 4px currentColor}
}

/* (T16) 终端字符输出（伪打字） */
#vmware-server-virtualization-page .t-out{
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
#vmware-server-virtualization-page .t-out::after{
  content:""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
  animation: tCursor 1s steps(2) infinite;
}
@keyframes tCursor{ 0%,49%{opacity:1} 50%,100%{opacity:0}}

/* (T17) 持续旋转的小齿轮装饰（给 .sec-head 右上角） */
#vmware-server-virtualization-page .gear-deco{
  display: inline-block;
  animation: rotate360 14s linear infinite;
  color: var(--t3); opacity: .35;
}
#vmware-server-virtualization-page .gear-deco.slow{ animation-duration: 24s}
#vmware-server-virtualization-page .gear-deco.rev{ animation-direction: reverse; animation-duration: 18s}

/* (T18) 容器四周扫描角线（四角各一道移动光） */
#vmware-server-virtualization-page .scan-corner{ position: relative}
#vmware-server-virtualization-page .scan-corner > i{
  position: absolute; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  height: 1px; width: 30%;
  animation: scanCorner 5s linear infinite;
}
#vmware-server-virtualization-page .scan-corner > i.t{ top: 0; left: 0; animation-delay: 0s}
#vmware-server-virtualization-page .scan-corner > i.r{ top: 0; right: 0; width: 1px; height: 30%; background: linear-gradient(180deg, transparent, var(--lime), transparent); animation-delay: 1.25s}
#vmware-server-virtualization-page .scan-corner > i.b{ bottom: 0; right: 0; animation-delay: 2.5s}
#vmware-server-virtualization-page .scan-corner > i.l{ bottom: 0; left: 0; width: 1px; height: 30%; background: linear-gradient(0deg, transparent, var(--lime), transparent); animation-delay: 3.75s}
@keyframes scanCorner{
  0%{ opacity: 0; transform: scaleX(.6)}
  20%{ opacity: 1}
  80%{ opacity: 1; transform: scaleX(1)}
  100%{ opacity: 0; transform: scaleX(.6)}
}

/* (T19) 微脉冲气泡 */
#vmware-server-virtualization-page .bubble-pulse{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--line-2); border-radius: 99px;
  background: rgba(91,214,220,.04);
  color: var(--lime);
}
#vmware-server-virtualization-page .bubble-pulse i{
  width: 5px; height: 5px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
  animation: pulseDot 1.4s ease-in-out infinite;
}

/* (T20) scan-line 横向扫描条（给卡片叠一层） */
#vmware-server-virtualization-page .scan-line-overlay{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  z-index: 1;
}
#vmware-server-virtualization-page .scan-line-overlay::after{
  content:""; position: absolute; left: -30%; right: -30%; height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(91,214,220,.5) 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(91,214,220,.6);
  animation: scanLineVertical 5s ease-in-out infinite;
}
@keyframes scanLineVertical{
  0%, 100%{ top: 0%; opacity: 0}
  10%{ opacity: 1}
  90%{ opacity: 1}
  95%, 0%{ top: 100%; opacity: 0}
}
/* ====================================================================
   ★ 终端化强化 v3 — 高密度动效与装饰
   ==================================================================== */

/* (T22) hero KPI 数字脚标 — 加闪烁下划线 */
#vmware-server-virtualization-page .hero-meta b{
  position: relative; display: inline-block;
  padding-bottom: 2px;
}
#vmware-server-virtualization-page .hero-meta b::before{
  content:""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: underlineSweep 4s ease-in-out infinite;
}
#vmware-server-virtualization-page .hero-meta > div:nth-child(1) b::before{ animation-delay: 0s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(2) b::before{ animation-delay: 1s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(3) b::before{ animation-delay: 2s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(4) b::before{ animation-delay: 3s}

/* (T23) hero KPI 数字 — 加数字跳动 */
#vmware-server-virtualization-page .hero-meta b{ animation: numberTick 3.6s ease-in-out infinite}
#vmware-server-virtualization-page .hero-meta > div:nth-child(2) b{ animation-delay: .9s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(3) b{ animation-delay: 1.8s}
#vmware-server-virtualization-page .hero-meta > div:nth-child(4) b{ animation-delay: 2.7s}

/* (T24) hero section 整体 — 加 corner marks */
#vmware-server-virtualization-page .hero{ position: relative}
#vmware-server-virtualization-page .hero::before,#vmware-server-virtualization-page .hero::after{
  content:""; position: absolute; width: 16px; height: 16px;
  pointer-events: none; z-index: 1;
}
#vmware-server-virtualization-page .hero::before{ top: 12px; left: 12px; border-top: 2px solid var(--lime); border-left: 2px solid var(--lime); animation: caretSoftBlink 2.6s ease-in-out infinite}
#vmware-server-virtualization-page .hero::after{ bottom: 12px; right: 12px; border-bottom: 2px solid var(--violet); border-right: 2px solid var(--violet); animation: caretSoftBlink 2.6s ease-in-out infinite; animation-delay: 1.3s}

/* (T25) 各 section eyebrow 加跑马灯效果 */
#vmware-server-virtualization-page .eyebrow{
  position: relative; overflow: hidden;
}
#vmware-server-virtualization-page .eyebrow::before{
  content:""; position: absolute; top: 0; bottom: 0; left: -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.18), transparent);
  animation: scanLineSweep 7s linear infinite;
  pointer-events: none;
}
@keyframes scanLineSweep{ 0%{ left: -30%} 100%{ left: 100%}}

/* (T26) 全局 chip 与按钮 hover 强化 */
#vmware-server-virtualization-page .tag,#vmware-server-virtualization-page .plat,#vmware-server-virtualization-page .tool,#vmware-server-virtualization-page .sla-row .num,#vmware-server-virtualization-page .sla-row .v,#vmware-server-virtualization-page .cta-card .v,#vmware-server-virtualization-page .stat b{
  transition: all .25s ease;
}
#vmware-server-virtualization-page .tag:hover,#vmware-server-virtualization-page .plat:hover{
  border-color: var(--lime) !important; color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime), 0 0 12px -2px rgba(91,214,220,.4);
}

/* (T27) 各 section 顶部加横向 dashed scan line */
#vmware-server-virtualization-page section > .container{ position: relative}
#vmware-server-virtualization-page section > .container > .sec-head::after{
  content:""; position: absolute; left: 0; right: 0; bottom: -16px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-3) 0 4px, transparent 4px 8px);
  opacity: .5;
}

/* (T28) h2 加 LED 前缀 */
#vmware-server-virtualization-page h2{
  position: relative;
}
#vmware-server-virtualization-page h2::before{
  content:""; position: absolute; left: -16px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: pulseDot 1.6s ease-in-out infinite;
}

/* (T29) 各 .lead 段落加左侧竖线 */
#vmware-server-virtualization-page .lead{
  position: relative; padding-left: 12px;
}
#vmware-server-virtualization-page .lead::before{
  content:""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--lime), transparent);
  border-radius: 1px;
}

/* (T30) nav bar 加底扫描线 */
#vmware-server-virtualization-page .nav::after{
  content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime) 30%, var(--violet) 70%, transparent);
  animation: horizScan 5s linear infinite;
}

/* (T31) nav 链接 — 终端标签风 */
#vmware-server-virtualization-page .nav-links a{
  position: relative;
}
#vmware-server-virtualization-page .nav-links a::before{
  content:">"; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  color: var(--lime); opacity: 0;
  transition: opacity .25s, transform .25s;
}
#vmware-server-virtualization-page .nav-links a:hover::before{ opacity: 1; transform: translateY(-50%) translateX(2px)}

/* (T32) 各 mis / ben / deliv / team-card / assess-item / bf-row 卡片 hover — 整体边框呼吸 */
#vmware-server-virtualization-page .mis:hover,#vmware-server-virtualization-page .assess-item:hover,#vmware-server-virtualization-page .deliv:hover,#vmware-server-virtualization-page .ben:hover,#vmware-server-virtualization-page .team-card:hover,#vmware-server-virtualization-page .bf-row:hover{
  box-shadow: 0 0 0 1px rgba(91,214,220,.4), 0 12px 30px -16px rgba(91,214,220,.5);
}

/* (T33) 各 num 编号加 LED 装饰 */
#vmware-server-virtualization-page .assess-item .num{ position: relative}
#vmware-server-virtualization-page .assess-item .num::before{
  content:""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 6px var(--lime);
  animation: pulseDot 1.8s ease-in-out infinite;
}

/* (T34) timeline 节点 dot — 加额外光环 */
#vmware-server-virtualization-page .timeline .step .dot{
  position: relative;
}
#vmware-server-virtualization-page .timeline .step .dot::before{
  content:""; position: absolute; inset: -4px;
  border: 1px solid currentColor;
  border-radius: 50%; opacity: .5;
  animation: markerPulse 2s ease-out infinite;
}

/* (T35) cta-bg 全局加强 */
#vmware-server-virtualization-page .cta-bg{
  filter: brightness(.55) contrast(1.15) saturate(.85);
}
#vmware-server-virtualization-page .cta-bg-wrap::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,7,14,.5) 0%, rgba(3,7,14,.3) 60%, rgba(3,7,14,.85) 100%);
  pointer-events: none; z-index: 1;
}

/* (T36) 全局 img 慢漂移 —— 只对 cta-bg 应用，figure img 由 .figure.reveal 单独负责 reveal */
#vmware-server-virtualization-page .cta-bg{
  animation: ctaDrift 22s ease-in-out infinite alternate;
}

/* (T37) 各 .pill — 终端化加强 */
#vmware-server-virtualization-page .arch-title-strip .pill,#vmware-server-virtualization-page .term-bar .term-title,#vmware-server-virtualization-page .rep-bar .rep-title{
  font-family: var(--f-mono) !important;
  letter-spacing: .1em !important;
}

/* (T38) 流程图/迁移 timeline 节点 — 加滴答效果 */
#vmware-server-virtualization-page .timeline .step .pin{ position: relative; overflow: visible}
#vmware-server-virtualization-page .timeline .step .pin::before{
  content:""; position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: markerPulse 2.2s ease-out infinite;
}

/* (T39) 表格 / 列表 终端化 */
#vmware-server-virtualization-page table,#vmware-server-virtualization-page .assess-foot,#vmware-server-virtualization-page .sla-row{
  border-collapse: separate;
  border-spacing: 0;
}

/* (T40) 最终微调 — kbd-like 字符装饰 */
#vmware-server-virtualization-page .kbd-tip{
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 2px;
  background: rgba(91,214,220,.04);
  color: var(--lime);
  text-transform: uppercase;
}


/* (9.6) 顶层 PLATFORM TOPOLOGY pill 呼吸光环 */
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .pill{ position: relative}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .pill::after{
  content:""; position: absolute; inset: -2px;
  border-radius: 999px;
  border: 1px solid rgba(91,214,220,.5);
  animation: halo 2.8s ease-out infinite;
  pointer-events: none;
}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .pill:nth-child(2)::after{ animation-delay: .5s}
#vmware-server-virtualization-page .arch-diagram .arch-title-strip .pill:nth-child(3)::after{ animation-delay: 1s}

/* (10) arch-pillar 数字 ix 横线 — 已删除（用户反馈突兀，悬停扫描线与边框太像） */
/* .arch-pillar .ix::after{
  content:""; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.arch-pillar:hover .ix::after{ transform: translateX(0)} */

/* (11) 迁移 timeline 节点 — 持续脉冲 */
#vmware-server-virtualization-page .timeline .step .dot{
  animation: pulseDot 1.8s ease-in-out infinite;
}
#vmware-server-virtualization-page .timeline .step:nth-child(2n) .dot{ animation-delay: .3s}
#vmware-server-virtualization-page .timeline .step:nth-child(3n) .dot{ animation-delay: .6s}
/* (12) timeline 横线扫描 — 移动光点 */
#vmware-server-virtualization-page .timeline::after{
  content:""; position: absolute;
  top: 78px;
  width: 14px; height: 6px;
  background: radial-gradient(circle, var(--lime) 0%, var(--mint) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(91,214,220,.8), 0 0 18px rgba(91,214,220,.4);
  animation: timelineScan 5s cubic-bezier(.4,.0,.6,1) infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes timelineScan{
  0%{ left: 28px; opacity: 0}
  8%{ opacity: 1}
  92%{ opacity: 1}
  100%{ left: calc(100% - 42px); opacity: 0}
}

/* (13) 客户收益卡 — hover 图标呼吸 + 描边闪光 */
#vmware-server-virtualization-page .benefit{
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
#vmware-server-virtualization-page .benefit:hover{
  border-color: rgba(91,214,220,.5);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -18px rgba(91,214,220,.55);
}
#vmware-server-virtualization-page .benefit .sparkline path{ stroke-dasharray: 4 4; animation: flow 2.4s linear infinite}

/* (14) 技术团队卡 — hover 抬升 */
#vmware-server-virtualization-page .team-card{
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
#vmware-server-virtualization-page .team-card:hover{
  border-color: rgba(91,214,220,.5);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -20px rgba(91,214,220,.55);
}
/* (15) team 头像呼吸光环 */
#vmware-server-virtualization-page .team-card .avatar{
  position: relative;
}
#vmware-server-virtualization-page .team-card .avatar::after{
  content:""; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(91,214,220,.45);
  animation: halo 2.6s ease-out infinite;
  pointer-events: none;
}

/* (16) 平台能力 chip — 持续微浮 */
#vmware-server-virtualization-page .platforms li{ transition: transform .25s, background .25s, border-color .25s}
#vmware-server-virtualization-page .platforms li:hover{ transform: translateY(-2px); background: rgba(91,214,220,.12); border-color: rgba(91,214,220,.5)}
#vmware-server-virtualization-page .platforms li .ic{ animation: breathe 3s ease-in-out infinite}
#vmware-server-virtualization-page .platforms li:nth-child(2n) .ic{ animation-delay: .6s}
#vmware-server-virtualization-page .platforms li:nth-child(3n) .ic{ animation-delay: 1.2s}

/* (18) bf-flow 步骤数字 halo */
#vmware-server-virtualization-page .bf-step .ix-row .num{ animation: halo 2.4s ease-out infinite, breathe 3s ease-in-out infinite}
#vmware-server-virtualization-page .bf-step:nth-child(2) .ix-row .num{ animation-delay: .4s}
#vmware-server-virtualization-page .bf-step:nth-child(3) .ix-row .num{ animation-delay: .8s}
#vmware-server-virtualization-page .bf-step:nth-child(4) .ix-row .num{ animation-delay: 1.2s}

/* (19) bf-feature 图标 — hover 旋转 + 发光 */
#vmware-server-virtualization-page .bf-feature{ transition: border-color .25s, transform .25s, box-shadow .25s}
#vmware-server-virtualization-page .bf-feature:hover{
  border-color: rgba(91,214,220,.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -16px rgba(91,214,220,.5);
}
#vmware-server-virtualization-page .bf-feature:hover .icon{ animation: glowLime 1.4s ease-in-out infinite; border-color: rgba(91,214,220,.55)}

/* (20) 交付清单 deliv 卡 — hover 抬升 */
#vmware-server-virtualization-page .deliv{
  transition: border-color .3s, transform .3s, background .3s, box-shadow .3s;
}
#vmware-server-virtualization-page .deliv:hover{
  border-color: rgba(91,214,220,.5);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(10,26,46,.85), rgba(15,34,56,.55));
  box-shadow: 0 10px 24px -16px rgba(91,214,220,.5);
}
#vmware-server-virtualization-page .deliv .ix b{ display: inline-flex; align-items: center; gap: 6px}
#vmware-server-virtualization-page .deliv .ix b::after{
  content:""; width: 16px; height: 1px;
  background: var(--lime);
  animation: underlinePulse 2.4s ease-in-out infinite;
}

/* (21) SLA 行 — hover 描边动效 */
#vmware-server-virtualization-page .sla-row{
  transition: background .25s, border-color .25s, transform .25s;
}
#vmware-server-virtualization-page .sla-row:hover{
  background: linear-gradient(90deg, rgba(91,214,220,.06) 0%, transparent 100%);
  border-color: rgba(91,214,220,.4);
  transform: translateX(2px);
}

/* (22) 按钮 — hover 流光扫过 */
#vmware-server-virtualization-page .btn{ position: relative; overflow: hidden}
#vmware-server-virtualization-page .btn::before{
  content:""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .8s ease;
  pointer-events: none;
}
#vmware-server-virtualization-page .btn:hover::before{ left: 130%}
/* primary btn 持续呼吸光晕 */
#vmware-server-virtualization-page .btn-primary{ animation: pillGlow 3s ease-in-out infinite}

/* (23) 顶部 logo — 持续呼吸 */
#vmware-server-virtualization-page header .logo{ animation: breathe 3.6s ease-in-out infinite}

/* (24) 顶部 nav 链接 — hover 下划线扫光 */
#vmware-server-virtualization-page .nav a{ position: relative}
#vmware-server-virtualization-page .nav a::after{
  content:""; position: absolute; left: 50%; bottom: -4px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
#vmware-server-virtualization-page .nav a:hover::after{ transform: translateX(-50%) scaleX(1)}

/* (25) hero 拓扑节点 — 让多个 host 持续点亮 */
#vmware-server-virtualization-page .hero-topology .host rect{ transition: filter .3s}
#vmware-server-virtualization-page .hero-topology .host.is-active rect{ animation: glowLime 2s ease-in-out infinite}
#vmware-server-virtualization-page .hero-topology .host:nth-of-type(2) rect{ animation-delay: .5s}
#vmware-server-virtualization-page .hero-topology .host:nth-of-type(3) rect{ animation-delay: 1s}
#vmware-server-virtualization-page .hero-topology .host:nth-of-type(4) rect{ animation-delay: 1.5s}
#vmware-server-virtualization-page .hero-topology .host:nth-of-type(5) rect{ animation-delay: 2s}

/* (26) hero 状态条圆点 — 持续呼吸 */
#vmware-server-virtualization-page .hero-topology .status .dot::before{
  content:""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 6px rgba(91,214,220,.6);
  margin-right: 8px; vertical-align: middle;
  animation: severityBlink 1.6s ease-in-out infinite;
}

/* (27) hero KPI 数字 — 持续轻微抖动 */
#vmware-server-virtualization-page .hero-meta b{ animation: numberTick 3.6s ease-in-out infinite; display: inline-block}
#vmware-server-virtualization-page .hero-meta div:nth-child(2) b{ animation-delay: .9s}
#vmware-server-virtualization-page .hero-meta div:nth-child(3) b{ animation-delay: 1.8s}
#vmware-server-virtualization-page .hero-meta div:nth-child(4) b{ animation-delay: 2.7s}

/* (28) header CTA 按钮 — 持续脉冲 */
#vmware-server-virtualization-page header .btn-primary{ animation: pillGlow 3s ease-in-out infinite}

/* (29) 全局背景 — 大幅网格缓慢漂移 */
#vmware-server-virtualization-page::before{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(91,214,220,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,214,220,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridShift 24s linear infinite;
  opacity: .8;
}

/* (30) section 顶部扫描光 — 已删除（用户反馈突兀） */
/* section > .container::before{
  content:""; position: absolute; top: -10px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  width: 50%;
  animation: horizScan 8s linear infinite;
  pointer-events: none;
  opacity: .35;
} */

/* (31) 标签 chip — hover 扫光 */
#vmware-server-virtualization-page .tag,#vmware-server-virtualization-page .chip{
  position: relative; overflow: hidden;
  transition: background .2s, color .2s, border-color .2s;
}
#vmware-server-virtualization-page .tag:hover,#vmware-server-virtualization-page .chip:hover{ background: rgba(91,214,220,.15); color: var(--lime); border-color: rgba(91,214,220,.45)}

/* (32) 软件交付卡 — hover 抬升 */
#vmware-server-virtualization-page .swp{ transition: border-color .3s, transform .3s, box-shadow .3s}
#vmware-server-virtualization-page .swp:hover{ border-color: rgba(91,214,220,.5); transform: translateY(-3px); box-shadow: 0 10px 24px -16px rgba(91,214,220,.5)}

/* (33) hero 滚动提示 — 持续呼吸 */
#vmware-server-virtualization-page .hero-scroll-cue{ animation: breathe 2.4s ease-in-out infinite}

/* (34) "EYEBROW" 文字持续微闪 */
#vmware-server-virtualization-page .eyebrow{ position: relative}
/* (35) cases/casestudy 卡 hover */
#vmware-server-virtualization-page .case-card{ transition: border-color .3s, transform .3s, box-shadow .3s}
#vmware-server-virtualization-page .case-card:hover{ border-color: rgba(91,214,220,.5); transform: translateY(-3px); box-shadow: 0 10px 24px -16px rgba(91,214,220,.5)}

/* (36) 行业软件开发 — 步骤节点持续脉冲 */
#vmware-server-virtualization-page .swp-step .num{ animation: pulseDot 1.8s ease-in-out infinite}

/* (37) footer logo 持续呼吸 */
#vmware-server-virtualization-page .foot .logo{ animation: breathe 4s ease-in-out infinite}

/* (39) Hero 顶部 logo 旁边一条"心跳"细线 */
#vmware-server-virtualization-page header .container{ position: relative}
#vmware-server-virtualization-page header .container::after{
  content:""; position: absolute; bottom: -1px; left: 50%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  transform: translateX(-50%);
  animation: underlinePulse 3.6s ease-in-out infinite;
  opacity: .5;
}

/* (40) hero 节点状态文字 — 闪烁 */
#vmware-server-virtualization-page .hero-topology .host text:last-of-type{ fill: var(--lime) !important; animation: blink 1.6s ease-in-out infinite}

/* (41) hero 背景扫描线持续向下 */
#vmware-server-virtualization-page .hero::after{
  /* 在第 7 轮修复中已用 z-index, 这里只追加一个内层扫光 */
}
#vmware-server-virtualization-page .hero::before{ animation: scan 6s ease-in-out infinite}

/* (42) cta-band 中心 CTA — 持续呼吸光晕 */
#vmware-server-virtualization-page .cta-band{ position: relative; overflow: hidden}
#vmware-server-virtualization-page .cta-band::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 300px at 50% 50%, rgba(91,214,220,.12), transparent 70%);
  animation: breathe 4s ease-in-out infinite;
}

/* (43) 计数器 number 浮入动画 */
#vmware-server-virtualization-page [data-c]{ display: inline-block; animation: counterUp 1.2s ease-out backwards}

/* (44) 顶部 / 底部分隔线扫光 */
#vmware-server-virtualization-page .divider{ position: relative; overflow: hidden}
#vmware-server-virtualization-page .divider::before,#vmware-server-virtualization-page .divider::after{
  background: linear-gradient(90deg, transparent 0%, var(--line-3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
}

/* (45) hero h1 在 background photo 上叠加斜向扫光 */
#vmware-server-virtualization-page .hero h1{
  background-image: linear-gradient(90deg, #fff 0%, #fff 60%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 6s ease-in-out infinite;
  background-size: 200% 100%;
}
@keyframes shine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* (46) section eyebrow 内文字本身持续流光 */
#vmware-server-virtualization-page .eyebrow{
  background: linear-gradient(90deg, var(--lime) 0%, #B8F0F2 50%, var(--lime) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientFlow 5s linear infinite;
  font-weight: 600;
}

/* (47) 卡片 ix 编号前缀持续呼吸 */
#vmware-server-virtualization-page .arch-pillar .ix{ transition: transform .25s}
#vmware-server-virtualization-page .arch-pillar:hover .ix{ transform: translateX(4px)}

/* (48) 平台能力 chip — 数字悬浮 */
#vmware-server-virtualization-page .platforms li .num{ animation: numberTick 3.2s ease-in-out infinite}

/* (49) hero topology vCenter — 持续旋转光环 */
#vmware-server-virtualization-page .hero-topology .vcenter rect{ animation: glowLime 2s ease-in-out infinite}
#vmware-server-virtualization-page .hero-topology .vcenter::after{
  content:""; position: absolute; inset: -4px;
  border: 1px solid rgba(91,214,220,.5);
  border-radius: inherit;
  animation: halo 2.4s ease-out infinite;
}

/* (50) 案例卡角标 — hover 抬升 */
#vmware-server-virtualization-page .case-card .badge{ transition: transform .25s, background .25s}
#vmware-server-virtualization-page .case-card:hover .badge{ transform: translateY(-2px); background: rgba(91,214,220,.18)}

/* (51) 评估 tag 流光扫过 */
#vmware-server-virtualization-page .assess-item .tags .tag{ position: relative; overflow: hidden}
#vmware-server-virtualization-page .assess-item .tags .tag::before{
  content:""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(91,214,220,.18) 50%, transparent 100%);
  transition: left .6s ease;
}
#vmware-server-virtualization-page .assess-item .tags .tag:hover::before{ left: 100%}

/* (52) timeline fill 内部扫光 */
#vmware-server-virtualization-page .timeline .fill::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  animation: shimmerSweep 3s ease-in-out infinite;
}

/* (53) 客户收益图标 — hover 旋转 + 描边发光 */
#vmware-server-virtualization-page .benefit .ic{ transition: transform .35s ease, background .25s}
#vmware-server-virtualization-page .benefit:hover .ic{ animation: iconRotate 2.4s linear infinite; background: rgba(91,214,220,.18); border-color: rgba(91,214,220,.55)}

/* (55) 顶部 btn 文字箭头 — 持续呼吸 */
#vmware-server-virtualization-page .btn .arr{ display: inline-block; animation: arrowSlide 2s ease-in-out infinite}

/* (56) "查看平台架构" 副 CTA 描边扫光 */
#vmware-server-virtualization-page .btn-ghost{ position: relative}
#vmware-server-virtualization-page .btn-ghost::after{
  content:""; position: absolute; inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(91,214,220,.35) 50%, transparent 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shimmer 3.6s linear infinite;
  pointer-events: none;
}

/* (57) section title 下方流光分隔线 — 已在 .sec-head::after 处理 */

/* (59) hardware-rack-card / swp-card 头部横线流光 */
#vmware-server-virtualization-page .swp h5::after,#vmware-server-virtualization-page .team-card h4::after{
  content:""; display: block; width: 28px; height: 1px; margin-top: 8px;
  background: linear-gradient(90deg, var(--lime) 0%, transparent 100%);
  transition: width .35s ease;
}
#vmware-server-virtualization-page .swp:hover h5::after,#vmware-server-virtualization-page .team-card:hover h4::after{ width: 100%}

/* (60) 全局: 当 prefers-reduced-motion 时停掉所有自定义动效 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
   Reduced motion fallback for hero animations
   ========================================================= */

/* =========================================================
   [已下线] 用户要求移除的两个模块 —— 集中在此，便于一键恢复
   1) .assess-foot          评估交付物整段（面包屑 + 6 个 dchip）
   2) .mis-figure.iso-fig figcaption  VMware 官方架构图下方 caption 整段
   恢复方法：删除下面两条规则即可
   ========================================================= */
#vmware-server-virtualization-page .assess-foot{ display: none !important}
#vmware-server-virtualization-page .mis-figure.iso-fig figcaption{ display: none !important}

/* =========================================================
   [HERO-V4 · 全出血真实大图]
   用户反馈「这个界面可以重做吗」+ 选「Hero 全出血真实大图 + 巨幅标题」。
   设计方向：
   - 删掉终端窗口 + SVG 拓扑图 + 事件流 ticker（V3 那套用户已不满）
   - 换成一张深色数据中心大图作全出血背景
     （Pixabay 真实机房纵深走廊：暗色调 + 顶部 LED 灯带 + 机柜蓝色 LED）
   - 巨幅标题压在画面左侧中下，避开右侧人物
   - 左暗右亮的渐变暗化层，保证文字可读又不破坏图
   - 极克制动效：h1 shine 流光 + metric 数字跳动 + 背景图轻微缩放
     （无任何扫描线/光束/位移装饰）
   - 100vh 严格全屏
   还原方法：删除本区块 [HERO-V4] 全部规则即可恢复 V3
   ========================================================= */

/* 1. 全屏背景 + 渐变暗化层（左暗 → 右亮） */
#vmware-server-virtualization-page .hero{
  position: relative !important;
  height: 100vh !important;
  min-height: 640px !important;
  overflow: hidden !important;
  background-color: #06101D !important;
  /* ★ 内联背景图（WebP q88 / 1920×672 / 43KB → base64）
     原图：Pixabay 真实数据中心机柜走廊
     原图已经解码并作为主题本地资源随页面发布。 */
  background-image: url('../images/vmware-server-virtualization/hero-rack.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;        /* 改 flex 为 block，配合 absolute 布局 */
  padding: 0 !important;
}
/* 暗化覆盖层（绝对定位，子元素用 z-index 浮在上面） */
#vmware-server-virtualization-page .hero::before{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 70% 80% at 25% 50%, rgba(6,16,29,.92) 0%, rgba(6,16,29,.6) 55%, rgba(6,16,29,.25) 90%) !important,
    linear-gradient(180deg, rgba(6,16,29,.5) 0%, rgba(6,16,29,.15) 40%, rgba(6,16,29,.7) 100%) !important;
  z-index: 1 !important;
}
/* 背景图缓慢缩放（极克制） */
#vmware-server-virtualization-page .hero::after{
  content:"" !important;
  position: absolute !important;
  inset: -4% !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 0 !important;
  animation: heroDrift 24s ease-in-out infinite alternate !important;
}
@keyframes heroDrift{
  0%{ transform: scale(1.02) translate(1%, -.5%)}
  100%{ transform: scale(1.08) translate(-1.5%, 1%)}
}
@media (max-height: 720px){
  #vmware-server-virtualization-page .hero{ height: auto !important; min-height: 100vh !important}
}

/* 2. hero-grid 用 padding 让内容顶部对齐 nav 下方 */
#vmware-server-virtualization-page .hero-grid{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: clamp(96px, 11vh, 124px) clamp(20px, 4vw, 48px) clamp(40px, 5vh, 64px) !important;
}

/* 3. hero-text 普通流（不被 grid 拉成两栏） */
#vmware-server-virtualization-page .hero-text{
  position: relative !important;
  z-index: 2 !important;
  max-width: 880px !important;
  margin: 0 !important;
}
/* 4. 巨幅 h1 —— 戏剧性 + 极紧 */
#vmware-server-virtualization-page .hero h1{
  font-size: clamp(40px, 5.6vw, 84px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  margin-top: 18px !important;
  color: #FFFFFF !important;
}
#vmware-server-virtualization-page .hero h1 em{ color: #FFFFFF !important; font-style: normal !important; font-weight: 600 !important}
#vmware-server-virtualization-page .hero h1 .accent{
  color: var(--lime) !important;
  position: relative !important;
}
#vmware-server-virtualization-page .hero h1 .accent::after{
  content:"" !important;
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: -6px !important; height: 4px !important;
  background: linear-gradient(90deg, var(--lime), transparent) !important;
}

/* 5. 副文：克制的白字 */
#vmware-server-virtualization-page .hero-sub{
  margin-top: 28px !important;
  font-size: clamp(15px, 1.25vw, 19px) !important;
  line-height: 1.6 !important;
  max-width: 56ch !important;
  color: rgba(255,255,255,.85) !important;
}
#vmware-server-virtualization-page .hero-sub strong{ color: #FFFFFF !important; font-weight: 600 !important}

/* 6. 按钮：更高更大 */
#vmware-server-virtualization-page .hero-actions{
  margin-top: 36px !important;
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
#vmware-server-virtualization-page .hero-actions .btn{
  height: 56px !important;
  padding: 0 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* 7. metric 底部横条 —— 绝对定位在 hero 底部（与 nav padding 协调） */
#vmware-server-virtualization-page .hero-meta{
  position: absolute !important;
  left: clamp(20px, 4vw, 48px) !important;
  right: clamp(20px, 4vw, 48px) !important;
  bottom: clamp(32px, 4vh, 48px) !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid rgba(91,214,220,.35) !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
#vmware-server-virtualization-page .hero-meta > div{
  padding: 0 !important;
  border-right: 1px solid rgba(91,214,220,.15) !important;
  border-radius: 0 !important;
}
#vmware-server-virtualization-page .hero-meta > div:last-child{ border-right: 0 !important}
#vmware-server-virtualization-page .hero-meta > div b{
  display: block !important;
  font-size: clamp(26px, 2.8vw, 40px) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-family: var(--f-display) !important;
  text-shadow: 0 0 16px rgba(91,214,220,.45) !important;
}
#vmware-server-virtualization-page .hero-meta > div span{
  display: block !important;
  margin-top: 6px !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-family: var(--f-mono) !important;
}

/* 8. 删除已不存在的 hero-visual（保留节点不报错） */
#vmware-server-virtualization-page .hero-visual{ display: none !important}
/* 9. 删除 scan-beam（V3 遗留） */
#vmware-server-virtualization-page .scan-beam{ display: none !important}

/* 10. eyebrow 暗背景上需要更强的对比 + 入场 */
#vmware-server-virtualization-page .hero .eyebrow{
  background: linear-gradient(90deg, var(--lime) 0%, #B8F0F2 50%, var(--lime) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: gradientFlow 5s linear infinite, heroEyebrowIn 1s ease-out both !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(91,214,220,.4) !important;
  border-radius: 999px !important;
}
#vmware-server-virtualization-page .hero .eyebrow .dot{
  background: var(--lime) !important;
  box-shadow: 0 0 8px var(--lime) !important;
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  animation: pulseDot 1.6s ease-in-out infinite !important;
}
@keyframes heroEyebrowIn{ 0%{ opacity:0; transform: translateY(-6px)} 100%{ opacity:1; transform:none}}

/* 11. h1/sub/actions/meta 入场（错峰 0/0.2/0.4/0.7s） */
#vmware-server-virtualization-page .hero h1{ animation: heroTitleIn .9s cubic-bezier(.16,.84,.34,1) .15s both}
@keyframes heroTitleIn{ 0%{ opacity:0; transform: translateY(14px)} 100%{ opacity:1; transform:none}}
#vmware-server-virtualization-page .hero-sub{ animation: heroSubIn .9s cubic-bezier(.16,.84,.34,1) .35s both}
@keyframes heroSubIn{ 0%{ opacity:0; transform: translateY(10px)} 100%{ opacity:1; transform:none}}
#vmware-server-virtualization-page .hero-actions{ animation: heroActIn .9s cubic-bezier(.16,.84,.34,1) .55s both}
@keyframes heroActIn{ 0%{ opacity:0; transform: translateY(10px)} 100%{ opacity:1; transform:none}}
#vmware-server-virtualization-page .hero-meta{ animation: heroMetaIn .9s cubic-bezier(.16,.84,.34,1) .85s both}
@keyframes heroMetaIn{ 0%{ opacity:0; transform: translateY(10px)} 100%{ opacity:1; transform:none}}

/* =========================================================
   [HERO-TEXT-MOTION] 文字层 —— 常驻生命感 + 强化入场
   用户反馈「这些文字，跟动图真没招了是吧？」——
   原先所有动效都是一次性 fade-in，播完即静。现改造为：
     A. 整段 h1 持续呼吸（text-shadow 缓脉冲）
     B. h1 字符错峰入场（JS 包 .hchar，每个字 blur+slide）
     C. em 强调词（物理机房 / 可编排）—— 持续流光高亮
     D. accent 资源池 —— 持续流光 + 下划线 sweep + drop-shadow 呼吸
     E. eyebrow dot —— 外圈 halo 扩散环
     F. 副文 —— 末尾闪烁光标（终端打字机）
     G. 主按钮 —— 持续光晕呼吸
     H. metric 数字 —— 0 → 原值 计数入场（JS 驱动）
   不使用任何「线持续位移」类扫描光——遵循已建立的[关闭扫描线]约定
   ========================================================= */

/* A. h1 持续呼吸（叠加在原有 heroTitleIn 之上）
   同时清掉老 shine 残留的 bg-image / clip:text / transparent color */
#vmware-server-virtualization-page .hero h1{
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #FFFFFF !important;
  animation:
    heroTitleIn .9s cubic-bezier(.16,.84,.34,1) .15s both,
    heroBreathe 4.4s ease-in-out 1.1s infinite !important;
}
@keyframes heroBreathe{
  0%, 100%{ text-shadow: 0 0 0 rgba(91,214,220,0), 0 0 0 rgba(91,214,220,0)}
  50%     { text-shadow: 0 0 18px rgba(91,214,220,.22), 0 0 38px rgba(91,214,220,.08)}
}

/* B. h1 字符错峰入场（JS 自动把每字包成 .hchar） */
#vmware-server-virtualization-page .hero h1 .hchar{
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em) scale(.92);
  filter: blur(6px);
  animation: charIn .75s cubic-bezier(.16,.84,.34,1) var(--hchar-delay, .35s) forwards;
}
@keyframes charIn{
  0%   { opacity: 0; transform: translateY(.35em) scale(.92); filter: blur(6px)}
  55%  { opacity: 1; filter: blur(0)}
  100% { opacity: 1; transform: none; filter: blur(0)}
}

/* C. em 强调词（物理机房 / 可编排）—— 纯色 + color 脉冲
   ⚠️ 不用 background-clip:text 渐变文字：Safari/旧 WebKit 对 inline-block
   子元素的 clip:text 渲染失败，会把整段渐变当成实色填充（用户截图的白色块）。
   改用纯色 + animation 动 color，避免浏览器兼容陷阱。*/
#vmware-server-virtualization-page .hero h1 em{
  color: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
#vmware-server-virtualization-page .hero h1 em .hchar{
  color: #B8F0F2 !important;
  -webkit-text-fill-color: #B8F0F2 !important;
  animation:
    emPulse 3.8s ease-in-out infinite,
    charIn .75s cubic-bezier(.16,.84,.34,1) var(--hchar-delay, .35s) forwards !important;
}
@keyframes emPulse{
  0%, 100%{ color: #B8F0F2; text-shadow: 0 0 0 rgba(184,240,242,0)}
  50%     { color: #FFFFFF; text-shadow: 0 0 14px rgba(184,240,242,.35)}
}

/* D. accent（资源池）—— 纯色 + drop-shadow 呼吸 + 下划线 sweep */
#vmware-server-virtualization-page .hero h1 .accent{
  color: inherit !important;
}
#vmware-server-virtualization-page .hero h1 .accent .hchar{
  color: #5BD6DC !important;
  -webkit-text-fill-color: #5BD6DC !important;
  animation:
    accentPulseColor 3.4s ease-in-out infinite,
    charIn .75s cubic-bezier(.16,.84,.34,1) var(--hchar-delay, .35s) forwards !important;
}
#vmware-server-virtualization-page .hero h1 .accent::after{
  background: linear-gradient(90deg, #5BD6DC, #B8F0F2, transparent) !important;
  background-size: 200% 100% !important;
  height: 4px !important;
  bottom: -8px !important;
  filter: drop-shadow(0 0 4px rgba(91,214,220,.6)) !important;
  animation: accentUnderlineSweep 3.6s ease-in-out infinite !important;
}
@keyframes accentPulseColor{
  0%, 100%{ color: #5BD6DC; text-shadow: 0 0 0 rgba(91,214,220,0)}
  50%     { color: #B8F0F2; text-shadow: 0 0 12px rgba(91,214,220,.55)}
}
@keyframes accentPulse{
  0%, 100%{ filter: drop-shadow(0 0 0 rgba(91,214,220,0))}
  50%     { filter: drop-shadow(0 0 12px rgba(91,214,220,.55))}
}
@keyframes accentUnderlineSweep{
  0%  { background-position: 0% 0%; transform: scaleX(.55); transform-origin: left}
  50% { background-position: 100% 0%; transform: scaleX(1);  transform-origin: left}
  100%{ background-position: 0% 0%; transform: scaleX(.55); transform-origin: right}
}

/* E. eyebrow dot —— halo 扩散环（外圈光环外扩+消失） */
#vmware-server-virtualization-page .hero .eyebrow .dot{
  position: relative !important;
  overflow: visible !important;
}
#vmware-server-virtualization-page .hero .eyebrow .dot::after{
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1px solid var(--lime) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: dotHalo 2.2s ease-out infinite !important;
}
@keyframes dotHalo{
  0%  { transform: scale(.5); opacity: .85}
  100%{ transform: scale(2.6); opacity: 0}
}

/* F. 副文 —— 末尾闪烁光标 */
#vmware-server-virtualization-page .hero-sub{
  position: relative !important;
}
#vmware-server-virtualization-page .hero-sub::after{
  content: "_" !important;
  display: inline-block !important;
  margin-left: 4px !important;
  color: var(--lime) !important;
  font-weight: 700 !important;
  font-family: var(--f-mono) !important;
  animation: caretBlink 1.05s steps(1) infinite !important;
}
@keyframes caretBlink{
  0%, 50%  { opacity: 1}
  51%, 100%{ opacity: 0}
}

/* G. 主按钮 —— 持续光晕呼吸 */
#vmware-server-virtualization-page .hero-actions a.btn-primary,#vmware-server-virtualization-page .hero-actions .btn-primary{
  position: relative !important;
  z-index: 0 !important;
}
#vmware-server-virtualization-page .hero-actions a.btn-primary::before,#vmware-server-virtualization-page .hero-actions .btn-primary::before{
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 999px !important;
  background: rgba(91,214,220,.45) !important;
  filter: blur(12px) !important;
  z-index: -1 !important;
  animation: btnHalo 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes btnHalo{
  0%, 100%{ opacity: .22; transform: scale(.95)}
  50%     { opacity: .65; transform: scale(1.06)}
}

/* H. metric 数字 —— 入场时 0→原值计数（由 JS 改 textContent，
   numberTick 仅做轻微 wobble，不影响数字显示） */
#vmware-server-virtualization-page .hero-meta > div b.is-counting{
  font-variant-numeric: tabular-nums !important;
}

/* 兜底：用户开启了 prefers-reduced-motion 时，全部常驻动画 0.01s */
@media (prefers-reduced-motion: reduce){
  #vmware-server-virtualization-page .hero h1{ animation: none !important; text-shadow: none !important}
  #vmware-server-virtualization-page .hero h1 .hchar{ animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important}
  #vmware-server-virtualization-page .hero h1 em, #vmware-server-virtualization-page .hero h1 .accent{ animation: none !important}
  #vmware-server-virtualization-page .hero h1 .accent::after{ animation: none !important}
  #vmware-server-virtualization-page .hero .eyebrow .dot::after{ display: none !important}
  #vmware-server-virtualization-page .hero-sub::after{ animation: none !important}
  #vmware-server-virtualization-page .hero-actions a.btn-primary::before,
  #vmware-server-virtualization-page .hero-actions .btn-primary::before{ display: none !important}
}

/* =========================================================
   [关闭扫描线] 用户反馈：「为什么一定要弄跟线一直上下移动？」
   根因：这些是我按「终端化设计模式」惯例叠加的 CRT 扫描线装饰，
   为了凑科技感而加，不是功能必需，反而干扰阅读。已全部关闭。
   关闭范围：所有持续位移的扫描线（垂直 + 横向）
   保留：LED 呼吸 / 数字跳动 / 数据流 pkt / hover 反馈 / 图片漂移
        （这些是状态指示或内容，不是无意义的装饰线）
   恢复方法：删除本区块即可
   ========================================================= */
/* 垂直上下移动（最干扰） */
#vmware-server-virtualization-page .scan-beam{ display: none !important}          /* hero 全屏 2px 发光线，4s 来回 */
#vmware-server-virtualization-page .term-body::before{ display: none !important}   /* 终端内扫描光带 termScan */
#vmware-server-virtualization-page .rep-scan{ display: none !important}            /* rep-shell 内扫描光带 repScanMove */
/* 横向左右移动 */
#vmware-server-virtualization-page .bf-flow::after{ display: none !important}
#vmware-server-virtualization-page .deliv-tree::before{ display: none !important}
#vmware-server-virtualization-page .stage-pane::before{ display: none !important}
#vmware-server-virtualization-page .mc-bar::before{ display: none !important}
#vmware-server-virtualization-page .rep-bar::before{ display: none !important}
#vmware-server-virtualization-page .nav::after{ display: none !important}
#vmware-server-virtualization-page .eyebrow::before{ display: none !important}     /* eyebrow 内流光 scanLineSweep */
#vmware-server-virtualization-page .cta-term::before{ display: none !important}    /* CTA 终端框内横扫 ctaTermScan */
/* 全站 CRT 扫描线层：停掉滚动但保留静态纹理（不整块删，避免丢失质感） */
#vmware-server-virtualization-page::after{ animation: none !important}
#vmware-server-virtualization-page .hero::before{ animation: none !important}      /* hero 背景图上下扫描 */
/* SVG 虚线边框流动 */
#vmware-server-virtualization-page .arch-diagram svg .box-vc{ animation: archBoxPulse 2.4s ease-in-out infinite !important}
#vmware-server-virtualization-page .arch-diagram svg .box-nsx{ animation: archBoxPulseViolet 2.6s ease-in-out infinite !important}
#vmware-server-virtualization-page .arch-diagram svg .box-vsan{ animation: archBoxPulseMint 2.8s ease-in-out infinite !important}
#vmware-server-virtualization-page .arch-diagram svg .box-veeam{ animation: archBoxPulseAmber 3s ease-in-out infinite !important}

/* Source design values moved out of inline attributes for the production CSP. */
#vmware-server-virtualization-page .vmware-inline-86de7ac63a { margin-top:18px }
#vmware-server-virtualization-page .vmware-inline-7ecf32739a { color:var(--t) }
#vmware-server-virtualization-page .vmware-inline-6d00061700 { margin-left:auto }
#vmware-server-virtualization-page .vmware-inline-1dae29e48b { display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap }
#vmware-server-virtualization-page .vmware-inline-6157e89086 { display:flex;gap:6px;flex-wrap:wrap }
#vmware-server-virtualization-page .vmware-inline-d6f2af6e0a { margin-top:14px }
#vmware-server-virtualization-page .vmware-inline-6704e89e1c { color:var(--ink-0); font-style:normal }
#vmware-server-virtualization-page .vmware-inline-575ebbc634 { --pct:92%; --bar-color:#5BD6DC; }
#vmware-server-virtualization-page .vmware-inline-68ffb1a9cf { --pct:88%; --bar-color:#F1C56F; }
#vmware-server-virtualization-page .vmware-inline-e2228bbb74 { --pct:84%; --bar-color:#67DDAA; }
#vmware-server-virtualization-page .vmware-inline-5b9bf65548 { --pct:78%; --bar-color:#C6A9FF; }
#vmware-server-virtualization-page .vmware-inline-0afeccbff7 { --pct:90%; --bar-color:#67DDAA; }
#vmware-server-virtualization-page .vmware-inline-39852702a7 { --pct:75%; --bar-color:#71A9FF; }
#vmware-server-virtualization-page .vmware-inline-f3b0925721 { margin-left:auto;font-size:9.5px }
#vmware-server-virtualization-page .vmware-inline-7c261257b7 { --pb:75% }
#vmware-server-virtualization-page .vmware-inline-63b911859a { padding: 12px 6px 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#vmware-server-virtualization-page .vmware-inline-99e4545c73 { font-size:13px; color: var(--t); }
#vmware-server-virtualization-page .vmware-inline-0546222f70 { animation-delay:.5s }
#vmware-server-virtualization-page .vmware-inline-6928734d55 { font-style:normal;color:var(--lime) }
#vmware-server-virtualization-page .vmware-inline-16f3203c5a { border-radius:var(--r-lg); overflow:hidden; height:100%; min-height:560px; position:relative }
#vmware-server-virtualization-page .vmware-inline-ac67af7b8d { width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:contrast(1.05) brightness(.85) }
#vmware-server-virtualization-page .vmware-inline-f0d1db1dbb { position:absolute;left:22px;bottom:22px;right:22px;display:flex;flex-wrap:wrap;gap:8px }
#vmware-server-virtualization-page .vmware-inline-8d66d15273 { position:static }
#vmware-server-virtualization-page .vmware-inline-96722b7d98 { font-family:var(--f-mono);font-size:11px;color:var(--t);padding:5px 10px;border-radius:999px;background:rgba(6,16,29,.6);border:1px solid var(--line-2) }
#vmware-server-virtualization-page .vmware-inline-97b0a1e388 { --av:#5BD6DC }
#vmware-server-virtualization-page .vmware-inline-9404a34208 { --v:96% }
#vmware-server-virtualization-page .vmware-inline-8441270404 { --v:92% }
#vmware-server-virtualization-page .vmware-inline-1cf36d4733 { --v:88% }
#vmware-server-virtualization-page .vmware-inline-879a81ae8d { --v:80% }
#vmware-server-virtualization-page .vmware-inline-ec04b9daaa { --v:75% }
#vmware-server-virtualization-page .vmware-inline-851766d0fc { --av:#F1C56F }
#vmware-server-virtualization-page .vmware-inline-e03d3748f4 { --v:94% }
#vmware-server-virtualization-page .vmware-inline-92ff22861a { --v:90% }
#vmware-server-virtualization-page .vmware-inline-b876fe61fc { --v:85% }
#vmware-server-virtualization-page .vmware-inline-8336f2433b { --v:82% }
#vmware-server-virtualization-page .vmware-inline-7dc25b8942 { --v:78% }
#vmware-server-virtualization-page .vmware-inline-c7d2d6c6b9 { --av:#C6A9FF }
#vmware-server-virtualization-page .vmware-inline-3b6a059f82 { --v:72% }
#vmware-server-virtualization-page .vmware-inline-73ee037315 { --av:#67DDAA }
#vmware-server-virtualization-page .vmware-inline-ea05a56954 { --v:84% }
#vmware-server-virtualization-page .vmware-inline-3a19d379e9 { --sev:#FF6F6F }
#vmware-server-virtualization-page .vmware-inline-4567bd642c { --pct:6%; --fill:#FF6F6F }
#vmware-server-virtualization-page .vmware-inline-85635be099 { --sev:#F1C56F }
#vmware-server-virtualization-page .vmware-inline-77d741f66d { --pct:18%; --fill:#F1C56F }
#vmware-server-virtualization-page .vmware-inline-822b0e0172 { --sev:#5BD6DC }
#vmware-server-virtualization-page .vmware-inline-9ef84c9e19 { --pct:36%; --fill:#5BD6DC }
#vmware-server-virtualization-page .vmware-inline-d5380237c2 { --sev:#67DDAA }
#vmware-server-virtualization-page .vmware-inline-6e70d8a72d { --pct:62%; --fill:#67DDAA }
#vmware-server-virtualization-page .vmware-inline-edb3b5babd { color:#5BD6DC }
#vmware-server-virtualization-page .vmware-inline-c76eca3152 { color:#F1C56F }
#vmware-server-virtualization-page .vmware-inline-567c8529c0 { color:#C6A9FF }
#vmware-server-virtualization-page .vmware-inline-9ca30a1fb1 { color:#67DDAA }
#vmware-server-virtualization-page .vmware-inline-af0220f013 { color:#5BD6DC;border-color:#5BD6DC }
#vmware-server-virtualization-page .vmware-inline-39d4da0f08 { color:#F1C56F;border-color:#F1C56F }
#vmware-server-virtualization-page .vmware-inline-3fcb1dd1ba { color:#C6A9FF;border-color:#C6A9FF }
#vmware-server-virtualization-page .vmware-inline-fa0c0d67dd { color:#67DDAA;border-color:#67DDAA }
#vmware-server-virtualization-page .vmware-inline-0018c3e9f2 { color:var(--lime) }

/* CSP-safe stagger values for the preserved hero character animation. */

/* CSP-safe stagger values for the preserved hero character animation. */
#vmware-server-virtualization-page .hero h1 .hchar-i-0 { --hchar-delay: 0.350s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-1 { --hchar-delay: 0.395s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-2 { --hchar-delay: 0.440s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-3 { --hchar-delay: 0.485s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-4 { --hchar-delay: 0.530s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-5 { --hchar-delay: 0.575s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-6 { --hchar-delay: 0.620s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-7 { --hchar-delay: 0.665s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-8 { --hchar-delay: 0.710s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-9 { --hchar-delay: 0.755s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-10 { --hchar-delay: 0.800s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-11 { --hchar-delay: 0.845s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-12 { --hchar-delay: 0.890s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-13 { --hchar-delay: 0.935s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-14 { --hchar-delay: 0.980s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-15 { --hchar-delay: 1.025s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-16 { --hchar-delay: 1.070s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-17 { --hchar-delay: 1.115s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-18 { --hchar-delay: 1.160s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-19 { --hchar-delay: 1.205s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-20 { --hchar-delay: 1.250s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-21 { --hchar-delay: 1.295s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-22 { --hchar-delay: 1.340s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-23 { --hchar-delay: 1.385s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-24 { --hchar-delay: 1.430s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-25 { --hchar-delay: 1.475s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-26 { --hchar-delay: 1.520s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-27 { --hchar-delay: 1.565s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-28 { --hchar-delay: 1.610s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-29 { --hchar-delay: 1.655s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-30 { --hchar-delay: 1.700s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-31 { --hchar-delay: 1.745s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-32 { --hchar-delay: 1.790s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-33 { --hchar-delay: 1.835s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-34 { --hchar-delay: 1.880s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-35 { --hchar-delay: 1.925s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-36 { --hchar-delay: 1.970s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-37 { --hchar-delay: 2.015s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-38 { --hchar-delay: 2.060s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-39 { --hchar-delay: 2.105s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-40 { --hchar-delay: 2.150s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-41 { --hchar-delay: 2.195s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-42 { --hchar-delay: 2.240s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-43 { --hchar-delay: 2.285s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-44 { --hchar-delay: 2.330s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-45 { --hchar-delay: 2.375s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-46 { --hchar-delay: 2.420s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-47 { --hchar-delay: 2.465s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-48 { --hchar-delay: 2.510s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-49 { --hchar-delay: 2.555s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-50 { --hchar-delay: 2.600s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-51 { --hchar-delay: 2.645s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-52 { --hchar-delay: 2.690s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-53 { --hchar-delay: 2.735s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-54 { --hchar-delay: 2.780s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-55 { --hchar-delay: 2.825s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-56 { --hchar-delay: 2.870s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-57 { --hchar-delay: 2.915s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-58 { --hchar-delay: 2.960s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-59 { --hchar-delay: 3.005s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-60 { --hchar-delay: 3.050s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-61 { --hchar-delay: 3.095s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-62 { --hchar-delay: 3.140s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-63 { --hchar-delay: 3.185s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-64 { --hchar-delay: 3.230s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-65 { --hchar-delay: 3.275s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-66 { --hchar-delay: 3.320s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-67 { --hchar-delay: 3.365s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-68 { --hchar-delay: 3.410s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-69 { --hchar-delay: 3.455s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-70 { --hchar-delay: 3.500s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-71 { --hchar-delay: 3.545s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-72 { --hchar-delay: 3.590s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-73 { --hchar-delay: 3.635s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-74 { --hchar-delay: 3.680s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-75 { --hchar-delay: 3.725s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-76 { --hchar-delay: 3.770s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-77 { --hchar-delay: 3.815s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-78 { --hchar-delay: 3.860s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-79 { --hchar-delay: 3.905s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-80 { --hchar-delay: 3.950s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-81 { --hchar-delay: 3.995s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-82 { --hchar-delay: 4.040s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-83 { --hchar-delay: 4.085s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-84 { --hchar-delay: 4.130s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-85 { --hchar-delay: 4.175s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-86 { --hchar-delay: 4.220s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-87 { --hchar-delay: 4.265s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-88 { --hchar-delay: 4.310s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-89 { --hchar-delay: 4.355s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-90 { --hchar-delay: 4.400s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-91 { --hchar-delay: 4.445s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-92 { --hchar-delay: 4.490s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-93 { --hchar-delay: 4.535s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-94 { --hchar-delay: 4.580s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-95 { --hchar-delay: 4.625s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-96 { --hchar-delay: 4.670s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-97 { --hchar-delay: 4.715s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-98 { --hchar-delay: 4.760s; }
#vmware-server-virtualization-page .hero h1 .hchar-i-99 { --hchar-delay: 4.805s; }