/* =========================================================
   Tokens — industrial graphite + electric cyan + amber accents
   ========================================================= */
.desktop-virtualization-page{
  /* Surface */
  --ink-0: #06101D;
  --ink-1: #0A1828;
  --ink-2: #102236;
  --ink-3: #152C44;
  --ink-4: #1C3856;
  --line:  rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);
  --line-3: rgba(255,255,255,.28);

  /* Paper / surface highlight */
  --paper:     #06101D;
  --paper-2:   #0A1828;
  --paper-3:   #102236;

  /* Text */
  --t:    #EAEDF3;
  --t2:   #A6B1C1;
  --t3:   #6E7989;
  --t-dim:#7A8699;
  --t-faint:#5C6878;

  /* Signals */
  --cyan:    #5BD6DC;        /* electric cyan — brand */
  --cyan-2:  #4AC4CC;
  --cyan-3:  #2DA9B2;
  --mint:    #67DDAA;        /* success */
  --amber:   #F5A524;        /* GPU / high-perf accent */
  --amber-2: #C98C1E;
  --violet:  #C6A9FF;        /* xinchuang / isolation */
  --blue:    #71A9FF;        /* network / data */
  --red:     #FF8E8E;        /* risk / alert */
  --gold:    #F1C56F;

  /* Geometry — compact per house style */
  --s-section:  clamp(52px, 6.4vw, 90px);
  --s-card:  18px;
  --s-card-tight: 12px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* 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 */
  --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);
  --paper-line: rgba(255,255,255,.10);
  --paper-line-2: rgba(255,255,255,.22);
}

/* =========================================================
   Reset / base
   ========================================================= */
.desktop-virtualization-page *,.desktop-virtualization-page *::before,.desktop-virtualization-page *::after{box-sizing:border-box}
.desktop-virtualization-page{margin:0;padding:0}
.desktop-virtualization-page{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.desktop-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;
}
.desktop-virtualization-page img,.desktop-virtualization-page svg{display:block;max-width:100%}
.desktop-virtualization-page a{color:inherit;text-decoration:none}
.desktop-virtualization-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.desktop-virtualization-page ::selection{background: var(--cyan); color: var(--ink-0)}

/* =========================================================
   Global background — drift grid + radial glows
   ========================================================= */
.desktop-virtualization-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 35%, transparent 75%);
  animation: dv-gridShift 22s linear infinite;
}
.desktop-virtualization-page::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(91,214,220,.08), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(245,165,36,.06), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(103,221,170,.04), transparent 60%);
}
@keyframes dv-gridShift{
  0%   {background-position: -1px -1px, -1px -1px}
  100% {background-position: -57px -57px, -57px -57px}
}

.desktop-virtualization-page main,.desktop-virtualization-page header,.desktop-virtualization-page nav,.desktop-virtualization-page footer,.desktop-virtualization-page section{position:relative;z-index:1}

/* =========================================================
   Container / type helpers
   ========================================================= */
.desktop-virtualization-page .container{max-width:1260px;margin:0 auto;padding: 0 28px}
@media (max-width:720px){ .desktop-virtualization-page .container{padding: 0 20px} }

.desktop-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(--cyan);
}
.desktop-virtualization-page .eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(91,214,220,.6);
  animation: dv-ping 1.8s ease-out infinite;
}
.desktop-virtualization-page .eyebrow .bar{
  width: 24px; height: 1px; background: linear-gradient(to right, var(--cyan), transparent);
}
@keyframes dv-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)}
}

.desktop-virtualization-page h1,.desktop-virtualization-page h2,.desktop-virtualization-page h3,.desktop-virtualization-page h4{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--t);
}
.desktop-virtualization-page h2{
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.018em;
}
.desktop-virtualization-page h2 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--cyan), var(--mint) 60%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: dv-gradientFlow 8s ease-in-out infinite;
}
@keyframes dv-gradientFlow{
  0%,100% {background-position: 0% 50%}
  50%     {background-position: 100% 50%}
}
.desktop-virtualization-page h2 .deco{
  position: relative; display: inline-block;
}
.desktop-virtualization-page h2 .deco::after{
  content:""; position: absolute; left: 0; bottom: -10px;
  width: 56px; height: 2px;
  background: linear-gradient(to right, var(--cyan), transparent);
  animation: dv-underlinePulse 3s ease-in-out infinite;
}
@keyframes dv-underlinePulse{
  0%,100% {opacity:.55; transform: translateX(0); width: 56px}
  50%     {opacity:1;   transform: translateX(8px); width: 88px}
}

.desktop-virtualization-page h3{font-size: 18px; line-height: 1.35}
.desktop-virtualization-page h4{font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--t2); font-weight: 600}

.desktop-virtualization-page p{margin: 0 0 .8em}
.desktop-virtualization-page .dim{color: var(--t2)}
.desktop-virtualization-page .dim-2{color: var(--t-dim)}
.desktop-virtualization-page .mono{font-family: var(--f-mono)}

.desktop-virtualization-page .section{padding: var(--s-section) 0; position: relative}
.desktop-virtualization-page .section-head{margin-bottom: 36px; max-width: 820px}
.desktop-virtualization-page .section-head p{font-size: 16px; color: var(--t2); margin-top: 14px}

/* Buttons */
.desktop-virtualization-page .btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  color: var(--t);
  transition: transform .2s var(--ease-out-quart, cubic-bezier(.16,1,.3,1)), box-shadow .2s;
  position: relative; overflow: hidden;
  white-space: nowrap;
}
.desktop-virtualization-page .btn:hover{transform: translateY(-1px); box-shadow: 0 0 0 1px var(--cyan), 0 8px 24px rgba(91,214,220,.15)}
.desktop-virtualization-page .btn::before{
  content:""; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.25), transparent);
  transform: skewX(-22deg);
  transition: left .6s;
}
.desktop-virtualization-page .btn:hover::before{left: 130%}
.desktop-virtualization-page .btn.primary{
  background: linear-gradient(180deg, var(--cyan), var(--cyan-3));
  color: var(--ink-0); border-color: var(--cyan);
  animation: dv-pillGlow 4s ease-in-out infinite;
}
@keyframes dv-pillGlow{
  0%,100%{box-shadow: 0 0 0 0 rgba(91,214,220,.0)}
  50%    {box-shadow: 0 0 0 6px rgba(91,214,220,.10)}
}
.desktop-virtualization-page .btn.primary:hover{box-shadow: 0 0 0 1px var(--cyan), 0 12px 28px rgba(91,214,220,.35)}
.desktop-virtualization-page .btn .arr{transition: transform .2s}
.desktop-virtualization-page .btn:hover .arr{transform: translateX(3px)}

/* =========================================================
   Reveal — IO + scroll + interval triple fallback
   ========================================================= */
.desktop-virtualization-page [data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out-quart, cubic-bezier(.16,1,.3,1)), transform .7s var(--ease-out-quart, cubic-bezier(.16,1,.3,1));
}
.desktop-virtualization-page [data-reveal].is-on{opacity: 1; transform: none}

/* =========================================================
   NAV
   ========================================================= */
.desktop-virtualization-page .nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(6,16,29,.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  animation: dv-navIn .8s var(--ease-out-quart, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes dv-navIn{ from{opacity:0; transform: translateY(-8px)} to{opacity:1; transform: none} }
.desktop-virtualization-page .nav-inner{display:flex; align-items:center; justify-content:space-between; padding: 14px 28px; max-width: 1260px; margin: 0 auto}
.desktop-virtualization-page .brand{display:flex; align-items:center; gap: 10px; font-family: var(--f-display); font-weight: 600; letter-spacing: .02em}
.desktop-virtualization-page .brand .mark{
  width: 28px; height: 28px; border-radius: 6px;
  background:
    radial-gradient(circle at 30% 30%, var(--cyan), transparent 60%),
    linear-gradient(135deg, var(--ink-3), var(--ink-1));
  border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
}
.desktop-virtualization-page .brand .mark::after{
  content:""; position: absolute; inset: 6px;
  border: 1px solid rgba(91,214,220,.5); border-radius: 4px;
  animation: dv-haloPulse 3s ease-in-out infinite;
}
@keyframes dv-haloPulse{
  0%,100%{box-shadow: 0 0 0 0 rgba(91,214,220,0)}
  50%    {box-shadow: 0 0 0 4px rgba(91,214,220,.2)}
}
.desktop-virtualization-page .brand small{font-family: var(--f-mono); font-size: 10px; color: var(--t3); letter-spacing: .18em; margin-left: 4px}
.desktop-virtualization-page .nav-links{display:flex; gap: 22px; font-size: 13.5px; color: var(--t2)}
.desktop-virtualization-page .nav-links a{position: relative; padding: 6px 2px; transition: color .2s}
.desktop-virtualization-page .nav-links a:hover{color: var(--t)}
.desktop-virtualization-page .nav-links a::after{
  content:""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--cyan); transition: width .25s;
}
.desktop-virtualization-page .nav-links a:hover::after{width: 100%}
.desktop-virtualization-page .nav-cta{display:flex; align-items:center; gap: 10px}
@media (max-width: 880px){ .desktop-virtualization-page .nav-links{display:none} }

/* =========================================================
   HERO — identity desktop visualization
   ========================================================= */
.desktop-virtualization-page .hero{
  padding: 76px 0 60px;
  position: relative;
  overflow: hidden;
}
.desktop-virtualization-page .hero-bg{
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(6,16,29,.55), rgba(6,16,29,.92) 65%, var(--ink-0)),
    url('/wp-content/themes/yuqi-v3/assets/images/desktop-virtualization-source/data-center.webp');
  background-size: cover, cover;
  background-position: center, center 30%;
  filter: saturate(.85) contrast(1.05);
  animation: dv-bgDrift 30s ease-in-out infinite alternate;
}
@keyframes dv-bgDrift{
  0%   {background-position: center, center 30%}
  100% {background-position: center, center 38%}
}
.desktop-virtualization-page .hero-bg::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(91,214,220,.20), transparent 60%),
    radial-gradient(700px 400px at 10% 80%, rgba(245,165,36,.12), transparent 60%);
}
.desktop-virtualization-page .hero-inner{position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center}
@media (max-width: 980px){ .desktop-virtualization-page .hero-inner{grid-template-columns: 1fr; gap: 36px} }

.desktop-virtualization-page .hero-eyebrow{margin-bottom: 18px}
.desktop-virtualization-page .hero h1{
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 700;
  margin-bottom: 18px;
}
.desktop-virtualization-page .hero h1 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--cyan), var(--mint) 60%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%;
  animation: dv-gradientFlow 9s ease-in-out infinite;
}
.desktop-virtualization-page .hero h1 .underline-host{
  position: relative; display: inline-block;
}
.desktop-virtualization-page .hero h1 .underline-host::after{
  content:""; position: absolute; left: 0; bottom: -8px; height: 2px;
  width: 84%; background: linear-gradient(to right, var(--cyan), transparent);
  animation: dv-underlinePulse 3.4s ease-in-out infinite;
}
.desktop-virtualization-page .hero p.lede{
  font-size: 17px; color: var(--t2); max-width: 540px; margin: 22px 0 30px;
}
.desktop-virtualization-page .hero-stats{display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px}
.desktop-virtualization-page .hero-stat{display: flex; flex-direction: column; gap: 2px}
.desktop-virtualization-page .hero-stat .n{
  font-family: var(--f-display); font-size: 28px; font-weight: 700;
  background: linear-gradient(180deg, var(--t), var(--t2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.desktop-virtualization-page .hero-stat .l{font-family: var(--f-mono); font-size: 11px; color: var(--t3); letter-spacing: .14em; text-transform: uppercase}
.desktop-virtualization-page .hero-cta{display: flex; gap: 12px; flex-wrap: wrap}

/* Identity desktop visual (right side) */
.desktop-virtualization-page .identity-card{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16,34,54,.85), rgba(10,24,40,.7));
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
}
.desktop-virtualization-page .identity-card::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
}
.desktop-virtualization-page .identity-card .hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  position: relative;
}
.desktop-virtualization-page .identity-card .hdr .ttl{font-family: var(--f-mono); font-size: 12px; color: var(--t2); letter-spacing: .12em}
.desktop-virtualization-page .identity-card .hdr .live{display:inline-flex; align-items:center; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--mint); letter-spacing: .14em}
.desktop-virtualization-page .identity-card .hdr .live .pulse{
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  animation: dv-livePulse 1.2s ease-in-out infinite;
}
@keyframes dv-livePulse{
  0%,100%{opacity: .5; transform: scale(.85)}
  50%    {opacity: 1; transform: scale(1.1)}
}

/* Identity rows */
.desktop-virtualization-page .id-rows{position: relative; padding-top: 14px}
.desktop-virtualization-page .id-row{
  display:grid; grid-template-columns: 38px 1fr 1fr 86px; gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  position: relative;
  animation: dv-rowIn .8s var(--ease-out-quart, cubic-bezier(.16,1,.3,1)) both;
}
.desktop-virtualization-page .id-row:nth-child(1){animation-delay: .15s}
.desktop-virtualization-page .id-row:nth-child(2){animation-delay: .30s}
.desktop-virtualization-page .id-row:nth-child(3){animation-delay: .45s}
.desktop-virtualization-page .id-row:nth-child(4){animation-delay: .60s}
.desktop-virtualization-page .id-row:nth-child(5){animation-delay: .75s}
.desktop-virtualization-page .id-row:nth-child(6){animation-delay: .90s}
@keyframes dv-rowIn{ from{opacity:0; transform: translateX(-12px)} to{opacity:1; transform: none} }
.desktop-virtualization-page .id-row:hover{background: rgba(91,214,220,.05); border-color: var(--line-2)}
.desktop-virtualization-page .id-avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-2);
  display:grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 13px;
  color: var(--cyan);
  position: relative;
}
.desktop-virtualization-page .id-avatar.halo{box-shadow: 0 0 0 2px rgba(91,214,220,.2), 0 0 14px rgba(91,214,220,.3)}
.desktop-virtualization-page .id-avatar::after{
  content:""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--cyan);
  opacity: 0;
  animation: dv-haloRing 3.5s ease-out infinite;
}
@keyframes dv-haloRing{
  0%   {opacity: .6; transform: scale(.9)}
  100% {opacity: 0; transform: scale(1.35)}
}
.desktop-virtualization-page .id-name{font-size: 14px; font-weight: 500}
.desktop-virtualization-page .id-name small{display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--t3); letter-spacing: .12em; margin-top: 2px}
.desktop-virtualization-page .id-env{display:flex; align-items:center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--t2)}
.desktop-virtualization-page .id-env .chip{
  display:inline-flex; align-items:center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(91,214,220,.08); border: 1px solid rgba(91,214,220,.2);
  font-size: 11px; color: var(--cyan);
}
.desktop-virtualization-page .id-env .chip.amber{background: rgba(245,165,36,.08); border-color: rgba(245,165,36,.25); color: var(--amber)}
.desktop-virtualization-page .id-env .chip.violet{background: rgba(198,169,255,.08); border-color: rgba(198,169,255,.25); color: var(--violet)}
.desktop-virtualization-page .id-env .chip.mint{background: rgba(103,221,170,.08); border-color: rgba(103,221,170,.25); color: var(--mint)}
.desktop-virtualization-page .id-state{
  font-family: var(--f-mono); font-size: 11px;
  display:inline-flex; align-items:center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(103,221,170,.08); border: 1px solid rgba(103,221,170,.25);
  color: var(--mint);
  animation: dv-severityBlink 2.6s ease-in-out infinite;
}
.desktop-virtualization-page .id-state.warn{background: rgba(245,165,36,.08); border-color: rgba(245,165,36,.25); color: var(--amber); animation-delay: .5s}
.desktop-virtualization-page .id-state.boot{background: rgba(113,169,255,.08); border-color: rgba(113,169,255,.25); color: var(--blue); animation-delay: 1s}
@keyframes dv-severityBlink{
  0%,100%{box-shadow: 0 0 0 0 rgba(103,221,170,0)}
  50%    {box-shadow: 0 0 0 3px rgba(103,221,170,.18)}
}

/* Floating desktop tiles — independent queue below identity rows */
.desktop-virtualization-page .desktop-stream{
  position: relative;
  width: 100%;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  pointer-events: auto;
}
.desktop-virtualization-page .dst-tile{
  position: relative;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, rgba(91,214,220,.10), rgba(10,24,40,.85));
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  animation: dv-tileFloat 6s ease-in-out infinite alternate;
  min-height: 86px;
}
.desktop-virtualization-page .dst-tile.t1{ animation-delay: 0s}
.desktop-virtualization-page .dst-tile.t2{ animation-delay: 1s}
.desktop-virtualization-page .dst-tile.t3{ animation-delay: 2s}
@keyframes dv-tileFloat{
  0%  {transform: translateY(0)}
  100%{transform: translateY(-4px)}
}
.desktop-virtualization-page .dst-tile .top{display:flex; align-items:center; gap: 6px; font-family: var(--f-mono); font-size: 10.5px; color: var(--t3)}
.desktop-virtualization-page .dst-tile .top .dot{width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); animation: dv-livePulse 1.4s infinite}
.desktop-virtualization-page .dst-tile .apps{display:flex; gap: 4px; margin-top: 8px}
.desktop-virtualization-page .dst-tile .apps i{
  display:inline-block; width: 16px; height: 16px; border-radius: 4px;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-1));
  border: 1px solid var(--line-2);
}
.desktop-virtualization-page .dst-tile .apps i:nth-child(1){animation: dv-chipGlow 3.2s ease-in-out infinite}
.desktop-virtualization-page .dst-tile .apps i:nth-child(2){animation: dv-chipGlow 3.2s ease-in-out infinite .4s}
.desktop-virtualization-page .dst-tile .apps i:nth-child(3){animation: dv-chipGlow 3.2s ease-in-out infinite .8s}
.desktop-virtualization-page .dst-tile .apps i:nth-child(4){animation: dv-chipGlow 3.2s ease-in-out infinite 1.2s}
.desktop-virtualization-page .dst-tile .apps i:nth-child(5){animation: dv-chipGlow 3.2s ease-in-out infinite 1.6s}
@keyframes dv-chipGlow{
  0%,100%{box-shadow: 0 0 0 0 rgba(91,214,220,0); border-color: var(--line-2)}
  50%    {box-shadow: 0 0 6px rgba(91,214,220,.5); border-color: var(--cyan)}
}
.desktop-virtualization-page .dst-tile .meta{
  margin-top: 8px; font-family: var(--f-mono); font-size: 9.5px;
  color: var(--t3); display:flex; justify-content:space-between;
  gap: 4px;
}

/* Connection lines between identity rows and tiles */
.desktop-virtualization-page .beam{
  position: absolute;
  height: 1px; background: linear-gradient(to right, transparent, var(--cyan), transparent);
  opacity: .35;
  animation: dv-beamFlow 3s linear infinite;
}
@keyframes dv-beamFlow{
  0%   {background-position: 0 0}
  100% {background-position: 24px 0}
}

/* Marquee strip */
.desktop-virtualization-page .marquee{
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.desktop-virtualization-page .marquee-track{
  display:flex; gap: 36px;
  animation: dv-marquee 38s linear infinite;
  width: max-content;
}
.desktop-virtualization-page .marquee-track > div{
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; color: var(--t3); letter-spacing: .12em;
  white-space: nowrap;
}
.desktop-virtualization-page .marquee-track > div::before{
  content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); opacity: .55;
}
.desktop-virtualization-page .marquee-track > div b{color: var(--t); font-weight: 500; letter-spacing: .04em}
@keyframes dv-marquee{
  0%  {transform: translateX(0)}
  100%{transform: translateX(-50%)}
}

/* =========================================================
   KPI strip
   ========================================================= */
.desktop-virtualization-page .kpi-strip{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,34,54,.4), transparent);
}
.desktop-virtualization-page .kpi-row{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0}
@media (max-width: 720px){ .desktop-virtualization-page .kpi-row{grid-template-columns: repeat(2, 1fr)} }
.desktop-virtualization-page .kpi{
  padding: 22px 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.desktop-virtualization-page .kpi:last-child{border-right: 0}
.desktop-virtualization-page .kpi .n{
  font-family: var(--f-display); font-size: 36px; font-weight: 700;
  background: linear-gradient(180deg, var(--cyan), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
}
.desktop-virtualization-page .kpi .l{font-size: 13px; color: var(--t2); margin-top: 2px}
.desktop-virtualization-page .kpi .h{font-family: var(--f-mono); font-size: 11px; color: var(--t3); letter-spacing: .14em; text-transform: uppercase}
.desktop-virtualization-page .kpi::after{
  content:""; position: absolute; left: 16px; bottom: 8px;
  width: 32px; height: 2px; background: var(--cyan);
  transform-origin: left; transform: scaleX(0); animation: dv-kpiUnderline 3.4s ease-in-out infinite;
}
@keyframes dv-kpiUnderline{
  0%,100%{transform: scaleX(.25); opacity: .6}
  50%    {transform: scaleX(1); opacity: 1}
}

/* =========================================================
   Case — 煜企
   ========================================================= */
.desktop-virtualization-page .case{
  background:
    linear-gradient(180deg, rgba(16,34,54,.35), transparent 70%),
    url('/wp-content/themes/yuqi-v3/assets/images/desktop-virtualization-source/team.webp') center/cover;
  position: relative;
}
.desktop-virtualization-page .case::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,29,.92), rgba(6,16,29,.7) 35%, rgba(6,16,29,.95));
}
.desktop-virtualization-page .case-inner{position: relative; z-index: 2; display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center}
@media (max-width: 980px){ .desktop-virtualization-page .case-inner{grid-template-columns: 1fr; gap: 36px} }

.desktop-virtualization-page .case-quote{
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16,34,54,.65), rgba(6,16,29,.75));
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.desktop-virtualization-page .case-quote::before{
  content:""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(to right, transparent, var(--cyan), var(--mint), transparent);
  animation: dv-horizScan 6s linear infinite;
}
@keyframes dv-horizScan{
  0%  {transform: translateX(-30%)}
  100%{transform: translateX(30%)}
}
.desktop-virtualization-page .case-quote h3{
  font-size: 22px; line-height: 1.4; font-family: var(--f-display); font-weight: 500;
  color: var(--t);
}
.desktop-virtualization-page .case-quote h3 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--cyan), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.desktop-virtualization-page .case-quote .who{
  margin-top: 18px; display:flex; align-items:center; gap: 12px;
  font-size: 13px; color: var(--t2);
}
.desktop-virtualization-page .case-quote .who .who-mark{
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  color: var(--ink-0); display:grid; place-items:center;
  font-family: var(--f-display); font-weight: 700;
  box-shadow: 0 0 0 1px var(--line-2);
  animation: dv-amberPulse 4s ease-in-out infinite;
}
@keyframes dv-amberPulse{
  0%,100%{box-shadow: 0 0 0 0 rgba(245,165,36,0)}
  50%    {box-shadow: 0 0 0 4px rgba(245,165,36,.18)}
}

.desktop-virtualization-page .case-kpis{display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px}
.desktop-virtualization-page .ckpi{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: rgba(10,24,40,.55);
  position: relative; overflow: hidden;
}
.desktop-virtualization-page .ckpi::after{
  content:""; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  animation: dv-shimmerSweep 4s linear infinite;
}
@keyframes dv-shimmerSweep{
  0%  {transform: translateX(-100%)}
  100%{transform: translateX(100%)}
}
.desktop-virtualization-page .ckpi .n{
  font-family: var(--f-display); font-size: 30px; font-weight: 700;
  background: linear-gradient(180deg, var(--t), var(--t2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.desktop-virtualization-page .ckpi .l{font-size: 12.5px; color: var(--t2); margin-top: 4px}
.desktop-virtualization-page .ckpi .h{font-family: var(--f-mono); font-size: 10px; color: var(--cyan); letter-spacing: .16em; text-transform: uppercase}

.desktop-virtualization-page .case-timeline{
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: rgba(10,24,40,.55);
}
.desktop-virtualization-page .case-timeline h4{margin-bottom: 14px}
.desktop-virtualization-page .tl-row{
  display:grid; grid-template-columns: 70px 1fr; gap: 14px;
  padding: 10px 0; align-items: flex-start;
  border-top: 1px dashed var(--line);
  animation: dv-rowIn .8s var(--ease-out-quart, cubic-bezier(.16,1,.3,1)) both;
}
.desktop-virtualization-page .tl-row:first-child{border-top: 0}
.desktop-virtualization-page .tl-row .when{font-family: var(--f-mono); font-size: 12px; color: var(--cyan); letter-spacing: .12em}
.desktop-virtualization-page .tl-row .what{font-size: 14px; color: var(--t); line-height: 1.5}
.desktop-virtualization-page .tl-row .what small{display: block; font-size: 12px; color: var(--t3); margin-top: 4px}

/* =========================================================
   Architecture — 5 layers
   ========================================================= */
.desktop-virtualization-page .arch-card{
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16,34,54,.5), rgba(6,16,29,.7));
  padding: 0;
  overflow: hidden;
  position: relative;
}
.desktop-virtualization-page .arch-layers{position: relative}
.desktop-virtualization-page .arch-layer{
  display: grid;
  grid-template-columns: 108px 1fr 240px;
  gap: 22px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .25s;
  cursor: default;
}
.desktop-virtualization-page .arch-layer:last-child{border-bottom: 0}
.desktop-virtualization-page .arch-layer:hover{background: rgba(91,214,220,.04)}
.desktop-virtualization-page .arch-layer::before{
  content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--cyan); opacity: 0;
  transition: opacity .25s;
}
.desktop-virtualization-page .arch-layer:hover::before{opacity: 1}
@media (max-width: 880px){ .desktop-virtualization-page .arch-layer{grid-template-columns: 88px 1fr; gap: 14px} .desktop-virtualization-page .arch-layer .stack{display:none} }

.desktop-virtualization-page .arch-layer .idx{
  font-family: var(--f-mono); font-size: 11px; color: var(--cyan); letter-spacing: .14em;
  padding-top: 4px; white-space: nowrap;
}
.desktop-virtualization-page .arch-layer h4{
  font-size: 17px; color: var(--t); text-transform: none; letter-spacing: -.005em; margin-bottom: 4px;
  font-family: var(--f-display); font-weight: 600;
}
.desktop-virtualization-page .arch-layer .desc{font-size: 13.5px; color: var(--t2); line-height: 1.55}
.desktop-virtualization-page .arch-layer .stack{
  display:flex; flex-wrap: wrap; gap: 6px;
  align-content: flex-start;
}
.desktop-virtualization-page .arch-layer .stack span{
  font-family: var(--f-mono); font-size: 11px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(91,214,220,.06); border: 1px solid rgba(91,214,220,.2);
  color: var(--cyan);
  transition: transform .25s, background .25s;
}
.desktop-virtualization-page .arch-layer:hover .stack span{background: rgba(91,214,220,.1); transform: translateY(-1px)}
.desktop-virtualization-page .arch-layer .stack span.amber{background: rgba(245,165,36,.06); border-color: rgba(245,165,36,.2); color: var(--amber)}
.desktop-virtualization-page .arch-layer .stack span.violet{background: rgba(198,169,255,.06); border-color: rgba(198,169,255,.2); color: var(--violet)}
.desktop-virtualization-page .arch-layer .stack span.mint{background: rgba(103,221,170,.06); border-color: rgba(103,221,170,.2); color: var(--mint)}
.desktop-virtualization-page .arch-layer .stack span.blue{background: rgba(113,169,255,.06); border-color: rgba(113,169,255,.2); color: var(--blue)}

.desktop-virtualization-page .arch-flow{
  display:flex; align-items:center; justify-content:center; gap: 6px;
  margin-top: 24px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--t3); letter-spacing: .12em;
}
.desktop-virtualization-page .arch-flow i{
  width: 22px; height: 1px; background: var(--cyan);
  position: relative; overflow: hidden;
}
.desktop-virtualization-page .arch-flow i::after{
  content:""; position: absolute; inset: 0; background: var(--amber);
  animation: dv-flowParticle 2.2s linear infinite;
}
@keyframes dv-flowParticle{
  0%   {transform: translateX(-100%)}
  100% {transform: translateX(100%)}
}

/* =========================================================
   Delivery steps
   ========================================================= */
.desktop-virtualization-page .steps{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16,34,54,.5), rgba(6,16,29,.7));
  overflow: hidden;
}
@media (max-width: 980px){ .desktop-virtualization-page .steps{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 600px){ .desktop-virtualization-page .steps{grid-template-columns: repeat(2, 1fr)} }

.desktop-virtualization-page .step{
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .25s;
}
.desktop-virtualization-page .step:last-child{border-right: 0}
.desktop-virtualization-page .step:hover{background: rgba(91,214,220,.04)}
@media (max-width: 980px){ .desktop-virtualization-page .step{border-right: 1px solid var(--line); border-bottom: 1px solid var(--line)} .desktop-virtualization-page .step:nth-child(3n){border-right: 0} .desktop-virtualization-page .step:nth-last-child(-n+3){border-bottom: 0} }
@media (max-width: 600px){ .desktop-virtualization-page .step:nth-child(3n){border-right: 1px solid var(--line)} .desktop-virtualization-page .step:nth-child(2n){border-right: 0} .desktop-virtualization-page .step:nth-last-child(-n+3){border-bottom: 1px solid var(--line)} .desktop-virtualization-page .step:nth-last-child(-n+2){border-bottom: 0} }

.desktop-virtualization-page .step .ix{
  font-family: var(--f-mono); font-size: 11px; color: var(--cyan); letter-spacing: .18em;
}
.desktop-virtualization-page .step .n{
  font-family: var(--f-display); font-size: 28px; font-weight: 700;
  background: linear-gradient(180deg, var(--t), var(--t2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
  margin-top: 4px;
}
.desktop-virtualization-page .step h4{
  font-family: var(--f-display); font-size: 16px; text-transform: none;
  letter-spacing: -.005em; color: var(--t); margin: 8px 0 6px;
}
.desktop-virtualization-page .step p{font-size: 13px; color: var(--t2); line-height: 1.55; margin: 0}
.desktop-virtualization-page .step .time{
  margin-top: 10px; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--amber); letter-spacing: .14em;
}
.desktop-virtualization-page .step .progress{
  position: absolute; left: 18px; bottom: 12px;
  width: 36px; height: 2px;
  background: rgba(91,214,220,.2);
  overflow: hidden;
  border-radius: 2px;
}
.desktop-virtualization-page .step .progress::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--cyan), var(--mint));
  animation: dv-progressFill 4s ease-in-out infinite;
}
@keyframes dv-progressFill{
  0%,100%{transform: translateX(-100%)}
  50%    {transform: translateX(0)}
}

/* =========================================================
   Scenario matrix — 8 cards
   ========================================================= */
.desktop-virtualization-page .scenarios{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 980px){ .desktop-virtualization-page .scenarios{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 600px){ .desktop-virtualization-page .scenarios{grid-template-columns: 1fr} }

.desktop-virtualization-page .scn{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,34,54,.55), rgba(6,16,29,.7));
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease-out-quart, cubic-bezier(.16,1,.3,1)), border-color .25s;
}
.desktop-virtualization-page .scn:hover{transform: translateY(-3px); border-color: var(--line-2)}
.desktop-virtualization-page .scn::after{
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  opacity: 0; transition: opacity .25s;
}
.desktop-virtualization-page .scn:hover::after{opacity: 1}

.desktop-virtualization-page .scn .ico{
  width: 38px; height: 38px; border-radius: 8px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(91,214,220,.18), rgba(91,214,220,.04));
  border: 1px solid rgba(91,214,220,.25);
  color: var(--cyan);
  margin-bottom: 12px;
  animation: dv-icoFloat 4s ease-in-out infinite;
}
.desktop-virtualization-page .scn.amber .ico{background: linear-gradient(135deg, rgba(245,165,36,.18), rgba(245,165,36,.04)); border-color: rgba(245,165,36,.25); color: var(--amber)}
.desktop-virtualization-page .scn.violet .ico{background: linear-gradient(135deg, rgba(198,169,255,.18), rgba(198,169,255,.04)); border-color: rgba(198,169,255,.25); color: var(--violet)}
.desktop-virtualization-page .scn.mint .ico{background: linear-gradient(135deg, rgba(103,221,170,.18), rgba(103,221,170,.04)); border-color: rgba(103,221,170,.25); color: var(--mint)}
.desktop-virtualization-page .scn.blue .ico{background: linear-gradient(135deg, rgba(113,169,255,.18), rgba(113,169,255,.04)); border-color: rgba(113,169,255,.25); color: var(--blue)}
@keyframes dv-icoFloat{
  0%,100%{transform: translateY(0); box-shadow: 0 0 0 0 rgba(91,214,220,0)}
  50%    {transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(91,214,220,.15)}
}
.desktop-virtualization-page .scn h4{font-family: var(--f-display); font-size: 15.5px; text-transform: none; letter-spacing: -.005em; color: var(--t); margin-bottom: 6px}
.desktop-virtualization-page .scn p{font-size: 12.5px; color: var(--t2); line-height: 1.55; margin: 0 0 10px}
.desktop-virtualization-page .scn .meta{
  display:flex; flex-wrap: wrap; gap: 6px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.desktop-virtualization-page .scn .meta span{
  font-family: var(--f-mono); font-size: 10.5px; color: var(--t3);
  padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.desktop-virtualization-page .scn .num{
  position: absolute; top: 14px; right: 16px;
  font-family: var(--f-mono); font-size: 11px; color: var(--t3); letter-spacing: .12em;
}

/* =========================================================
   Brand compatibility — logo wall
   ========================================================= */
.desktop-virtualization-page .brands{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 880px){ .desktop-virtualization-page .brands{grid-template-columns: repeat(2, 1fr)} }

.desktop-virtualization-page .brand-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: rgba(10,24,40,.5);
  display:flex; align-items:center; gap: 12px;
  transition: border-color .25s, transform .25s;
}
.desktop-virtualization-page .brand-card:hover{border-color: var(--cyan); transform: translateY(-2px)}
.desktop-virtualization-page .brand-card .lgo{
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-1));
  border: 1px solid var(--line-2);
  display:grid; place-items:center;
  font-family: var(--f-display); font-weight: 700; font-size: 18px;
  color: var(--t);
  flex-shrink: 0;
}
.desktop-virtualization-page .brand-card .lgo.cyan{color: var(--cyan)}
.desktop-virtualization-page .brand-card .lgo.amber{color: var(--amber)}
.desktop-virtualization-page .brand-card .lgo.violet{color: var(--violet)}
.desktop-virtualization-page .brand-card .lgo.mint{color: var(--mint)}
.desktop-virtualization-page .brand-card .lgo.blue{color: var(--blue)}
.desktop-virtualization-page .brand-card h4{font-family: var(--f-display); font-size: 14.5px; text-transform: none; letter-spacing: -.005em; color: var(--t); margin-bottom: 2px}
.desktop-virtualization-page .brand-card small{font-family: var(--f-mono); font-size: 10.5px; color: var(--t3); letter-spacing: .12em}

/* =========================================================
   Security — 5 controls grid
   ========================================================= */
.desktop-virtualization-page .sec-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 980px){ .desktop-virtualization-page .sec-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 600px){ .desktop-virtualization-page .sec-grid{grid-template-columns: 1fr} }
.desktop-virtualization-page .sec{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(16,34,54,.5), rgba(6,16,29,.7));
  position: relative; overflow: hidden;
}
.desktop-virtualization-page .sec::before{
  content:""; position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: var(--cyan); transform-origin: top; transform: scaleY(0);
  transition: transform .4s var(--ease-out-quart, cubic-bezier(.16,1,.3,1));
}
.desktop-virtualization-page .sec:hover::before{transform: scaleY(1)}
.desktop-virtualization-page .sec:hover{border-color: var(--line-2)}
.desktop-virtualization-page .sec .h{display:flex; align-items:center; gap: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--cyan); letter-spacing: .14em; text-transform: uppercase}
.desktop-virtualization-page .sec .h .ix{
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(91,214,220,.1); border: 1px solid rgba(91,214,220,.25);
  color: var(--cyan); display:grid; place-items:center; font-size: 11px;
}
.desktop-virtualization-page .sec h4{font-family: var(--f-display); font-size: 15px; text-transform: none; letter-spacing: -.005em; color: var(--t); margin: 12px 0 6px}
.desktop-virtualization-page .sec p{font-size: 12.5px; color: var(--t2); line-height: 1.55; margin: 0}

/* =========================================================
   Ops & emergency
   ========================================================= */
.desktop-virtualization-page .ops{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 880px){ .desktop-virtualization-page .ops{grid-template-columns: 1fr} }
.desktop-virtualization-page .ops-card{
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(16,34,54,.6), rgba(6,16,29,.7));
  position: relative;
}
.desktop-virtualization-page .ops-card.alert{
  background:
    linear-gradient(180deg, rgba(255,142,142,.08), rgba(6,16,29,.7)),
    linear-gradient(180deg, rgba(16,34,54,.6), rgba(6,16,29,.7));
  border-color: rgba(255,142,142,.25);
}
.desktop-virtualization-page .ops-card .live{display:flex; align-items:center; gap: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--mint); letter-spacing: .14em}
.desktop-virtualization-page .ops-card.alert .live{color: var(--red)}
.desktop-virtualization-page .ops-card .live .pulse{
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: dv-livePulse 1.2s ease-in-out infinite;
}
.desktop-virtualization-page .ops-card .big{
  font-family: var(--f-display); font-size: 38px; font-weight: 700;
  background: linear-gradient(180deg, var(--cyan), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 10px 0 6px;
  letter-spacing: -.02em;
}
.desktop-virtualization-page .ops-card.alert .big{background: linear-gradient(180deg, var(--red), #FFB1B1); -webkit-background-clip: text; background-clip: text; color: transparent}
.desktop-virtualization-page .ops-card h4{font-family: var(--f-display); font-size: 17px; text-transform: none; letter-spacing: -.005em; color: var(--t); margin-bottom: 8px}
.desktop-virtualization-page .ops-card p{font-size: 13.5px; color: var(--t2); line-height: 1.55; margin: 0 0 12px}
.desktop-virtualization-page .ops-card ul{list-style: none; padding: 0; margin: 0; display: grid; gap: 6px}
.desktop-virtualization-page .ops-card ul li{
  font-size: 13px; color: var(--t2);
  padding-left: 22px; position: relative;
}
.desktop-virtualization-page .ops-card ul li::before{
  content:""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 1px; background: var(--cyan);
}
.desktop-virtualization-page .ops-card.alert ul li::before{background: var(--red)}

.desktop-virtualization-page .metric-stream{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6,16,29,.6);
  padding: 12px;
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--t2);
  height: 110px;
  overflow: hidden;
  position: relative;
}
.desktop-virtualization-page .metric-stream .row{
  display:grid; grid-template-columns: 56px 1fr 56px; gap: 10px;
  padding: 3px 0;
  animation: dv-rowFade .6s ease-out both;
}
.desktop-virtualization-page .metric-stream .row .t{color: var(--t3)}
.desktop-virtualization-page .metric-stream .row .n{color: var(--mint); text-align: right}
.desktop-virtualization-page .metric-stream .row.warn .n{color: var(--amber)}
.desktop-virtualization-page .metric-stream .row.err .n{color: var(--red)}
@keyframes dv-rowFade{from{opacity:0; transform: translateY(-4px)} to{opacity:1; transform: none}}

/* =========================================================
   Team
   ========================================================= */
.desktop-virtualization-page .team{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
}
@media (max-width: 980px){ .desktop-virtualization-page .team{grid-template-columns: 1fr} }
.desktop-virtualization-page .team-card{
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(16,34,54,.6), rgba(6,16,29,.7));
}
.desktop-virtualization-page .team-stats{display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px}
.desktop-virtualization-page .team-stat{
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10,24,40,.5);
}
.desktop-virtualization-page .team-stat .n{font-family: var(--f-display); font-size: 26px; font-weight: 700;
  background: linear-gradient(180deg, var(--cyan), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;}
.desktop-virtualization-page .team-stat .l{font-size: 12px; color: var(--t2); margin-top: 2px}

.desktop-virtualization-page .certs{
  display:flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.desktop-virtualization-page .cert{
  font-family: var(--f-mono); font-size: 11px; color: var(--cyan);
  padding: 6px 10px; border-radius: 999px;
  background: rgba(91,214,220,.06); border: 1px solid rgba(91,214,220,.2);
  transition: transform .2s, background .2s;
}
.desktop-virtualization-page .cert:hover{transform: translateY(-1px); background: rgba(91,214,220,.12)}
.desktop-virtualization-page .cert.amber{color: var(--amber); background: rgba(245,165,36,.06); border-color: rgba(245,165,36,.2)}
.desktop-virtualization-page .cert.violet{color: var(--violet); background: rgba(198,169,255,.06); border-color: rgba(198,169,255,.2)}
.desktop-virtualization-page .cert.mint{color: var(--mint); background: rgba(103,221,170,.06); border-color: rgba(103,221,170,.2)}

.desktop-virtualization-page .team-photo{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  position: relative;
  min-height: 380px;
  background:
    linear-gradient(180deg, rgba(6,16,29,.2), rgba(6,16,29,.5)),
    url('/wp-content/themes/yuqi-v3/assets/images/desktop-virtualization-source/engineering.webp') center/cover;
}
.desktop-virtualization-page .team-photo::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 80% 90%, rgba(91,214,220,.18), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(6,16,29,.9));
}
.desktop-virtualization-page .team-photo .caption{
  position: absolute; left: 22px; bottom: 22px; right: 22px;
  z-index: 2; color: var(--t);
  font-size: 13px;
}
.desktop-virtualization-page .team-photo .caption b{display: block; font-family: var(--f-display); font-size: 17px; margin-bottom: 4px}
.desktop-virtualization-page .team-photo .ribbon{
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(6,16,29,.7); border: 1px solid var(--cyan);
  color: var(--cyan);
  animation: dv-ribbonBlink 2.6s ease-in-out infinite;
}
@keyframes dv-ribbonBlink{
  0%,100%{box-shadow: 0 0 0 0 rgba(91,214,220,0)}
  50%    {box-shadow: 0 0 0 4px rgba(91,214,220,.18)}
}

/* =========================================================
   ROI calc
   ========================================================= */
.desktop-virtualization-page .roi{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,34,54,.55), rgba(6,16,29,.7));
  padding: 24px;
}
@media (max-width: 880px){ .desktop-virtualization-page .roi{grid-template-columns: 1fr} }
.desktop-virtualization-page .roi-form .field{margin-bottom: 14px}
.desktop-virtualization-page .roi-form label{
  display:block; font-family: var(--f-mono); font-size: 11px;
  color: var(--t3); letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.desktop-virtualization-page .roi-form .row-input{
  display:grid; grid-template-columns: 1fr 80px; gap: 8px; align-items: center;
}
.desktop-virtualization-page .roi-form input[type=range]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--cyan), var(--cyan-3));
  outline: none;
}
.desktop-virtualization-page .roi-form input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan); border: 2px solid var(--ink-0);
  box-shadow: 0 0 0 2px var(--cyan);
  cursor: pointer;
}
.desktop-virtualization-page .roi-form .num{
  font-family: var(--f-display); font-size: 22px; font-weight: 700;
  color: var(--t); text-align: right;
}
.desktop-virtualization-page .roi-result{
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
@media (max-width: 880px){ .desktop-virtualization-page .roi-result{border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px} }
.desktop-virtualization-page .roi-result .rrow{display:flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line)}
.desktop-virtualization-page .roi-result .rrow:last-child{border-bottom: 0}
.desktop-virtualization-page .roi-result .rrow .lbl{font-size: 13px; color: var(--t2)}
.desktop-virtualization-page .roi-result .rrow .val{
  font-family: var(--f-display); font-size: 22px; font-weight: 700;
  background: linear-gradient(180deg, var(--cyan), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.desktop-virtualization-page .roi-result .rrow .val.amber{background: linear-gradient(180deg, var(--amber), var(--amber-2)); -webkit-background-clip: text; background-clip: text; color: transparent}
.desktop-virtualization-page .roi-result .rrow .val.violet{background: linear-gradient(180deg, var(--violet), #B58EFF); -webkit-background-clip: text; background-clip: text; color: transparent}

/* =========================================================
   FAQ
   ========================================================= */
.desktop-virtualization-page .faq{display: grid; gap: 10px; max-width: 880px}
.desktop-virtualization-page .faq details{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16,34,54,.45), rgba(6,16,29,.7));
  overflow: hidden;
  transition: border-color .25s;
}
.desktop-virtualization-page .faq details[open]{border-color: var(--cyan)}
.desktop-virtualization-page .faq summary{
  list-style: none; cursor: pointer;
  padding: 16px 18px;
  display:flex; align-items:center; justify-content: space-between;
  font-size: 15px; color: var(--t);
  font-family: var(--f-display); font-weight: 500;
}
.desktop-virtualization-page .faq summary::-webkit-details-marker{display:none}
.desktop-virtualization-page .faq summary::after{
  content:"+"; font-family: var(--f-mono); font-size: 20px; color: var(--cyan);
  transition: transform .25s;
}
.desktop-virtualization-page .faq details[open] summary::after{transform: rotate(45deg)}
.desktop-virtualization-page .faq .answer{
  padding: 0 18px 16px;
  font-size: 13.5px; color: var(--t2); line-height: 1.7;
  border-top: 1px dashed var(--line);
  padding-top: 12px; margin-top: -2px;
}

/* =========================================================
   CTA
   ========================================================= */
.desktop-virtualization-page .cta{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(6,16,29,.4), rgba(6,16,29,.7)),
    url('/wp-content/themes/yuqi-v3/assets/images/desktop-virtualization-source/hero-office.webp') center/cover;
  padding: 48px;
  overflow: hidden;
}
.desktop-virtualization-page .cta::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(91,214,220,.15), transparent 60%),
    radial-gradient(700px 400px at 80% 80%, rgba(245,165,36,.1), transparent 60%);
  pointer-events: none;
}
.desktop-virtualization-page .cta-inner{position: relative; z-index: 2; max-width: 720px}
.desktop-virtualization-page .cta h2{margin-bottom: 14px}
.desktop-virtualization-page .cta p{font-size: 16px; color: var(--t2); margin-bottom: 22px}
.desktop-virtualization-page .cta .row{display:flex; gap: 12px; flex-wrap: wrap}

/* =========================================================
   Footer
   ========================================================= */
.desktop-virtualization-page footer{
  border-top: 1px solid var(--line);
  padding: 32px 0;
  font-size: 13px; color: var(--t3);
}
.desktop-virtualization-page .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 16px}
.desktop-virtualization-page .footer-inner .legal{display:flex; gap: 18px}
.desktop-virtualization-page .footer-inner .legal a{color: var(--t3); transition: color .2s}
.desktop-virtualization-page .footer-inner .legal a:hover{color: var(--t)}

/* =========================================================
   Scroll reveal
   ========================================================= */
.desktop-virtualization-page [data-reveal="1"]{ transition-delay: 0s}
.desktop-virtualization-page [data-reveal="2"]{ transition-delay: .05s}
.desktop-virtualization-page [data-reveal="3"]{ transition-delay: .1s}
.desktop-virtualization-page [data-reveal="4"]{ transition-delay: .15s}
.desktop-virtualization-page [data-reveal="5"]{ transition-delay: .2s}
.desktop-virtualization-page [data-reveal="6"]{ transition-delay: .25s}

/* =========================================================
   Extra ambient motion layer — boosts ambient animation count
   ========================================================= */
@keyframes dv-edgeShimmer{
  0%   {transform: translateX(-110%); opacity: 0}
  20%  {opacity: .55}
  100% {transform: translateX(220%); opacity: 0}
}
@keyframes dv-ringBreath{
  0%,100%{box-shadow: 0 0 0 0 rgba(91,214,220,0)}
  50%    {box-shadow: 0 0 0 5px rgba(91,214,220,.22)}
}
@keyframes dv-subtleFloat{
  0%,100%{transform: translateY(0)}
  50%    {transform: translateY(-1.5px)}
}
@keyframes dv-cornerGlow{
  0%,100%{opacity: .35; transform: scale(.9)}
  50%    {opacity: 1;   transform: scale(1.1)}
}
@keyframes dv-numTick{
  0%,100%{transform: translateY(0); opacity: 1}
  50%    {transform: translateY(-1px); opacity: .92}
}
@keyframes dv-borderPulse{
  0%,100%{border-color: rgba(91,214,220,.08)}
  50%    {border-color: rgba(91,214,220,.40)}
}
@keyframes dv-dotBlink{
  0%,100%{opacity: 1; transform: scale(1)}
  50%    {opacity: .35; transform: scale(.6)}
}
@keyframes dv-scanH{
  0%   {transform: translateX(-100%); opacity: 0}
  10%  {opacity: .65}
  100% {transform: translateX(100%); opacity: 0}
}
@keyframes dv-ringOrbit{
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}
@keyframes dv-glowPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(91,214,220,0); }
  50%    { box-shadow: 0 0 0 5px rgba(91,214,220,.20); }
}
@keyframes dv-haloRing2{
  0%   {opacity: .55; transform: scale(.9)}
  100% {opacity: 0;    transform: scale(1.5)}
}
@keyframes dv-beamSweep{
  0%   {left: -30%}
  100% {left: 130%}
}
@keyframes dv-ringSpin{
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

/* Cards ambient edgeShimmer — scn (8) */
.desktop-virtualization-page .scn::after{
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  animation: dv-edgeShimmer 4.4s linear infinite;
  opacity: .5; transition: opacity .25s;
  pointer-events: none;
}
.desktop-virtualization-page .scn:nth-child(1)::after{ animation-delay: 0s }
.desktop-virtualization-page .scn:nth-child(2)::after{ animation-delay: .4s }
.desktop-virtualization-page .scn:nth-child(3)::after{ animation-delay: .8s }
.desktop-virtualization-page .scn:nth-child(4)::after{ animation-delay: 1.2s }
.desktop-virtualization-page .scn:nth-child(5)::after{ animation-delay: 1.6s }
.desktop-virtualization-page .scn:nth-child(6)::after{ animation-delay: 2.0s }
.desktop-virtualization-page .scn:nth-child(7)::after{ animation-delay: 2.4s }
.desktop-virtualization-page .scn:nth-child(8)::after{ animation-delay: 2.8s }
.desktop-virtualization-page .scn:hover::after{ opacity: 1 }

/* Step corner dot (6) */
.desktop-virtualization-page .step::after{
  content:""; position: absolute; right: 14px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); opacity: .4;
  animation: dv-cornerGlow 2.6s ease-in-out infinite;
}
.desktop-virtualization-page .step:nth-child(1)::after{ animation-delay: 0s }
.desktop-virtualization-page .step:nth-child(2)::after{ animation-delay: .35s }
.desktop-virtualization-page .step:nth-child(3)::after{ animation-delay: .7s }
.desktop-virtualization-page .step:nth-child(4)::after{ animation-delay: 1.05s }
.desktop-virtualization-page .step:nth-child(5)::after{ animation-delay: 1.4s }
.desktop-virtualization-page .step:nth-child(6)::after{ animation-delay: 1.75s }

/* Brand card logo ring (8) */
.desktop-virtualization-page .brand-card .lgo{ position: relative; }
.desktop-virtualization-page .brand-card .lgo::before{
  content:""; position: absolute; inset: -3px;
  border-radius: 10px; border: 1px solid currentColor;
  opacity: 0;
  animation: dv-ringBreath 3.6s ease-in-out infinite;
}
.desktop-virtualization-page .brand-card:nth-child(1) .lgo::before{ animation-delay: 0s }
.desktop-virtualization-page .brand-card:nth-child(2) .lgo::before{ animation-delay: .4s }
.desktop-virtualization-page .brand-card:nth-child(3) .lgo::before{ animation-delay: .8s }
.desktop-virtualization-page .brand-card:nth-child(4) .lgo::before{ animation-delay: 1.2s }
.desktop-virtualization-page .brand-card:nth-child(5) .lgo::before{ animation-delay: 1.6s }
.desktop-virtualization-page .brand-card:nth-child(6) .lgo::before{ animation-delay: 2.0s }
.desktop-virtualization-page .brand-card:nth-child(7) .lgo::before{ animation-delay: 2.4s }
.desktop-virtualization-page .brand-card:nth-child(8) .lgo::before{ animation-delay: 2.8s }

/* Sec border pulse (5) */
.desktop-virtualization-page .sec{ animation: dv-borderPulse 5.4s ease-in-out infinite; }
.desktop-virtualization-page .sec:nth-of-type(1){ animation-delay: 0s }
.desktop-virtualization-page .sec:nth-of-type(2){ animation-delay: .5s }
.desktop-virtualization-page .sec:nth-of-type(3){ animation-delay: 1s }
.desktop-virtualization-page .sec:nth-of-type(4){ animation-delay: 1.5s }
.desktop-virtualization-page .sec:nth-of-type(5){ animation-delay: 2s }

/* KPI numbers tick (4) */
.desktop-virtualization-page .kpi .n{ animation: dv-numTick 4.8s ease-in-out infinite; display: inline-block; }
.desktop-virtualization-page .kpi:nth-child(1) .n{ animation-delay: 0s }
.desktop-virtualization-page .kpi:nth-child(2) .n{ animation-delay: .6s }
.desktop-virtualization-page .kpi:nth-child(3) .n{ animation-delay: 1.2s }
.desktop-virtualization-page .kpi:nth-child(4) .n{ animation-delay: 1.8s }

/* Arch-layer subtle float (5) */
.desktop-virtualization-page .arch-layer:nth-child(1){ animation: dv-subtleFloat 5.4s ease-in-out infinite; }
.desktop-virtualization-page .arch-layer:nth-child(2){ animation: dv-subtleFloat 5.4s ease-in-out infinite .5s }
.desktop-virtualization-page .arch-layer:nth-child(3){ animation: dv-subtleFloat 5.4s ease-in-out infinite 1s }
.desktop-virtualization-page .arch-layer:nth-child(4){ animation: dv-subtleFloat 5.4s ease-in-out infinite 1.5s }
.desktop-virtualization-page .arch-layer:nth-child(5){ animation: dv-subtleFloat 5.4s ease-in-out infinite 2s }

/* Ops card pulse dot (replaces livePulse) (2) */
.desktop-virtualization-page .ops-card .live .pulse{ animation: dv-dotBlink 1.4s ease-in-out infinite; }

/* FAQ details scan (6) */
.desktop-virtualization-page .faq details{ position: relative; overflow: hidden; }
.desktop-virtualization-page .faq details::after{
  content:""; position: absolute; top: 0; left: 0; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.07), transparent);
  animation: dv-scanH 6s linear infinite;
  pointer-events: none;
}
.desktop-virtualization-page .faq details:nth-child(1)::after{ animation-delay: 0s }
.desktop-virtualization-page .faq details:nth-child(2)::after{ animation-delay: .8s }
.desktop-virtualization-page .faq details:nth-child(3)::after{ animation-delay: 1.6s }
.desktop-virtualization-page .faq details:nth-child(4)::after{ animation-delay: 2.4s }
.desktop-virtualization-page .faq details:nth-child(5)::after{ animation-delay: 3.2s }
.desktop-virtualization-page .faq details:nth-child(6)::after{ animation-delay: 4s }

/* Case-quote side scan */
.desktop-virtualization-page .case-quote::after{
  content:""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--cyan), transparent);
  animation: dv-scanH 7s linear infinite;
  opacity: .55;
}

/* Hero stat number tick (3) */
.desktop-virtualization-page .hero-stat .n{ animation: dv-numTick 5s ease-in-out infinite; display: inline-block; }
.desktop-virtualization-page .hero-stat:nth-child(1) .n{ animation-delay: 0s }
.desktop-virtualization-page .hero-stat:nth-child(2) .n{ animation-delay: .5s }
.desktop-virtualization-page .hero-stat:nth-child(3) .n{ animation-delay: 1s }

/* Nav mark dual animation: halo + slow rotation */
.desktop-virtualization-page .brand .mark::after{ animation: dv-haloPulse 3s ease-in-out infinite, dv-ringSpin 12s linear infinite; }

/* Team-photo ribbon inner dot */
.desktop-virtualization-page .team-photo .ribbon::before{
  content:""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); margin-right: 6px;
  animation: dv-dotBlink 1.6s ease-in-out infinite;
}

/* Identity avatar halo ring stagger (6) */
.desktop-virtualization-page .id-row:nth-child(1) .id-avatar::after{ animation: dv-haloRing2 3.6s ease-out infinite 0s }
.desktop-virtualization-page .id-row:nth-child(2) .id-avatar::after{ animation: dv-haloRing2 3.6s ease-out infinite .5s }
.desktop-virtualization-page .id-row:nth-child(3) .id-avatar::after{ animation: dv-haloRing2 3.6s ease-out infinite 1s }
.desktop-virtualization-page .id-row:nth-child(4) .id-avatar::after{ animation: dv-haloRing2 3.6s ease-out infinite 1.5s }
.desktop-virtualization-page .id-row:nth-child(5) .id-avatar::after{ animation: dv-haloRing2 3.6s ease-out infinite 2s }
.desktop-virtualization-page .id-row:nth-child(6) .id-avatar::after{ animation: dv-haloRing2 3.6s ease-out infinite 2.5s }

/* Scn ico 2-layer animation: icoFloat + glowPulse (8) */
.desktop-virtualization-page .scn.amber .ico{ animation: dv-icoFloat 4s ease-in-out infinite, dv-glowPulse 3.2s ease-in-out infinite; }
.desktop-virtualization-page .scn.violet .ico{ animation: dv-icoFloat 4s ease-in-out infinite, dv-glowPulse 3.2s ease-in-out infinite .4s; }
.desktop-virtualization-page .scn.mint .ico{ animation: dv-icoFloat 4s ease-in-out infinite, dv-glowPulse 3.2s ease-in-out infinite .8s; }
.desktop-virtualization-page .scn.blue .ico{ animation: dv-icoFloat 4s ease-in-out infinite, dv-glowPulse 3.2s ease-in-out infinite 1.2s; }
.desktop-virtualization-page .scn:not(.amber):not(.violet):not(.mint):not(.blue) .ico{ animation: dv-icoFloat 4s ease-in-out infinite, dv-glowPulse 3.2s ease-in-out infinite 1.6s; }

/* FAQ summary dot blink (6) */
.desktop-virtualization-page .faq summary{ position: relative; }
.desktop-virtualization-page .faq summary::before{
  content:""; position: absolute; left: -2px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan); opacity: .4;
  animation: dv-dotBlink 2.4s ease-in-out infinite;
}
.desktop-virtualization-page .faq details:nth-child(2) summary::before{ animation-delay: .4s }
.desktop-virtualization-page .faq details:nth-child(3) summary::before{ animation-delay: .8s }
.desktop-virtualization-page .faq details:nth-child(4) summary::before{ animation-delay: 1.2s }
.desktop-virtualization-page .faq details:nth-child(5) summary::before{ animation-delay: 1.6s }
.desktop-virtualization-page .faq details:nth-child(6) summary::before{ animation-delay: 2s }

/* ROI result tick (5) */
.desktop-virtualization-page .roi-result .val{ animation: dv-numTick 5.2s ease-in-out infinite; display: inline-block; }
.desktop-virtualization-page .roi-result .rrow:nth-child(1) .val{ animation-delay: 0s }
.desktop-virtualization-page .roi-result .rrow:nth-child(2) .val{ animation-delay: .5s }
.desktop-virtualization-page .roi-result .rrow:nth-child(3) .val{ animation-delay: 1s }
.desktop-virtualization-page .roi-result .rrow:nth-child(4) .val{ animation-delay: 1.5s }
.desktop-virtualization-page .roi-result .rrow:nth-child(5) .val{ animation-delay: 2s }

/* CTA bottom shimmer */
.desktop-virtualization-page .cta::after{
  content:""; position: absolute; bottom: 0; left: 0; width: 60%; height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  animation: dv-edgeShimmer 8s linear infinite;
}

/* hero-bg extra slow scan */
.desktop-virtualization-page .hero-bg::before{
  content:""; position: absolute; top: 0; left: 0; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.12), transparent);
  animation: dv-scanH 9s linear infinite;
  pointer-events: none;
}

/* ckpi ringBreath inner (4) */
.desktop-virtualization-page .ckpi{ position: relative; }
.desktop-virtualization-page .ckpi::before{
  content:""; position: absolute; left: 14px; top: 14px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); opacity: .55;
  animation: dv-dotBlink 2s ease-in-out infinite;
}
.desktop-virtualization-page .ckpi:nth-child(1)::before{ animation-delay: 0s }
.desktop-virtualization-page .ckpi:nth-child(2)::before{ animation-delay: .5s }
.desktop-virtualization-page .ckpi:nth-child(3)::before{ animation-delay: 1s }
.desktop-virtualization-page .ckpi:nth-child(4)::before{ animation-delay: 1.5s }

/* team-stat n tick (4) */
.desktop-virtualization-page .team-stat .n{ animation: dv-numTick 4.6s ease-in-out infinite; display: inline-block; }
.desktop-virtualization-page .team-stat:nth-child(1) .n{ animation-delay: 0s }
.desktop-virtualization-page .team-stat:nth-child(2) .n{ animation-delay: .5s }
.desktop-virtualization-page .team-stat:nth-child(3) .n{ animation-delay: 1s }
.desktop-virtualization-page .team-stat:nth-child(4) .n{ animation-delay: 1.5s }

/* arch idx tick (5) */
.desktop-virtualization-page .arch-layer .idx{ animation: dv-dotBlink 3s ease-in-out infinite; }
.desktop-virtualization-page .arch-layer:nth-child(1) .idx{ animation-delay: 0s }
.desktop-virtualization-page .arch-layer:nth-child(2) .idx{ animation-delay: .5s }
.desktop-virtualization-page .arch-layer:nth-child(3) .idx{ animation-delay: 1s }
.desktop-virtualization-page .arch-layer:nth-child(4) .idx{ animation-delay: 1.5s }
.desktop-virtualization-page .arch-layer:nth-child(5) .idx{ animation-delay: 2s }

/* case-quote who-mark extra slow ring */
.desktop-virtualization-page .case-quote .who-mark{ position: relative; }
.desktop-virtualization-page .case-quote .who-mark::after{
  content:""; position: absolute; inset: -5px;
  border-radius: 12px; border: 1px dashed var(--amber);
  animation: dv-ringSpin 14s linear infinite;
  opacity: .55;
}

/* nav-links underline beacon (4) */
.desktop-virtualization-page .nav-links a{ position: relative; overflow: hidden; }
.desktop-virtualization-page .nav-links a::before{
  content:""; position: absolute; left: -100%; top: 0; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(91,214,220,.18), transparent);
  animation: dv-beamSweep 5s linear infinite;
  pointer-events: none;
}
.desktop-virtualization-page .nav-links a:nth-child(1)::before{ animation-delay: 0s }
.desktop-virtualization-page .nav-links a:nth-child(2)::before{ animation-delay: .4s }
.desktop-virtualization-page .nav-links a:nth-child(3)::before{ animation-delay: .8s }
.desktop-virtualization-page .nav-links a:nth-child(4)::before{ animation-delay: 1.2s }

/* arch-flow lines scan (5) */
.desktop-virtualization-page .arch-flow i{ position: relative; overflow: hidden; }
.desktop-virtualization-page .arch-flow i::after{
  content:""; position: absolute; inset: 0; background: var(--amber);
  animation: dv-beamSweep 2.2s linear infinite;
}

/* ROI form range tick on handle */
.desktop-virtualization-page .roi-form input[type=range]::-webkit-slider-thumb{ animation: dv-ringBreath 3s ease-in-out infinite; }

/* eyebrow bar tick */
.desktop-virtualization-page .eyebrow .bar{ position: relative; overflow: hidden; }
.desktop-virtualization-page .eyebrow .bar::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent, rgba(91,214,220,.6), transparent);
  animation: dv-scanH 3s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .desktop-virtualization-page *,.desktop-virtualization-page *::before,.desktop-virtualization-page *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Source inline declarations, kept last to preserve source priority under CSP. */
.desktop-virtualization-page .dv-inline-0{font-size:18px}
.desktop-virtualization-page .dv-inline-1{margin-top: 14px}
.desktop-virtualization-page .dv-inline-2{font-style:normal; background: linear-gradient(120deg, var(--cyan), var(--mint)); -webkit-background-clip:text; background-clip:text; color: transparent}
.desktop-virtualization-page .dv-inline-3{font-size: 16px; max-width: 540px}
.desktop-virtualization-page .dv-inline-4{font-size: 12px}
.desktop-virtualization-page .dv-inline-5{margin-top: 12px}
.desktop-virtualization-page .dv-inline-6{background: linear-gradient(180deg, transparent, rgba(16,34,54,.25), transparent)}
.desktop-virtualization-page .dv-inline-7{margin-top: 12px}
.desktop-virtualization-page .dv-inline-8{margin-top: 12px}
.desktop-virtualization-page .dv-inline-9{background: linear-gradient(180deg, transparent, rgba(16,34,54,.3), transparent)}
.desktop-virtualization-page .dv-inline-10{margin-top: 12px}
.desktop-virtualization-page .dv-inline-11{margin-top: 12px}
.desktop-virtualization-page .dv-inline-12{background: linear-gradient(180deg, transparent, rgba(16,34,54,.3), transparent)}
.desktop-virtualization-page .dv-inline-13{margin-top: 12px}
.desktop-virtualization-page .dv-inline-14{margin-top: 12px}
.desktop-virtualization-page .dv-inline-15{font-size: 15.5px; color: var(--t2); max-width: 560px; margin-top: 14px}
.desktop-virtualization-page .dv-inline-16{margin-top: 18px}
.desktop-virtualization-page .dv-inline-17{background: linear-gradient(180deg, transparent, rgba(16,34,54,.3), transparent)}
.desktop-virtualization-page .dv-inline-18{margin-top: 12px}
.desktop-virtualization-page .dv-inline-19{margin-top: 12px}
.desktop-virtualization-page .dv-inline-20{margin-top: 14px}
.desktop-virtualization-page .dv-inline-21{font-style:normal; background: linear-gradient(120deg, var(--cyan), var(--mint)); -webkit-background-clip:text; background-clip:text; color: transparent}
.desktop-virtualization-page .dv-inline-22{color:var(--cyan)}

.desktop-virtualization-page .dv-metric-name{color:var(--cyan)}