/* Final hero scene overrides. This file is intentionally loaded last. */

/* Exploded PC components with a clearly separated cloud module */
.component-cloud-scene {
  width: 600px;
  height: 540px;
  transform: translate(-50%, -50%);
}
.component-glow {
  top: 58%;
  width: 540px;
  height: 540px;
}
.component-wiring {
  inset: 15% 6% 9%;
  width: 88%;
  height: 76%;
}
.component-cloud {
  top: -35px;
  transform: translateX(-50%) translateZ(110px) rotateX(-5deg) rotateY(10deg);
}
.pc-module {
  width: 180px;
  min-height: 116px;
  border-color: rgba(13, 45, 56, .14);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 50px rgba(31, 58, 64, .13);
}
.pc-module::after {
  position: absolute;
  inset: 0;
  opacity: .45;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.42), transparent 46%);
  content: "";
  pointer-events: none;
}
.module-cpu { left: 50%; top: 132px; width: 146px; transform: translateX(-50%) perspective(700px) rotateY(-7deg); }
.module-board { left: 50%; top: 248px; width: 266px; min-height: 170px; transform: translateX(-50%) perspective(900px) rotateX(2deg); }
.module-gpu { right: -6px; top: 238px; width: 190px; }
.module-ram { left: -6px; top: 242px; width: 162px; transform: perspective(700px) rotateY(7deg); }
.module-ssd { left: -6px; right: auto; bottom: 2px; width: 188px; transform: perspective(700px) rotateY(7deg) rotateX(4deg); }
.component-hub { display: none; }
.module-board .component-art { height: 116px; margin-bottom: 5px; }
.pc-module .component-board {
  width: 226px;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgba(8,127,105,.24);
  border-radius: 8px;
  background: linear-gradient(145deg, #e5f7f1, #a9d7cd);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.42), inset 0 0 24px rgba(8,127,105,.1), 0 9px 20px rgba(20,70,76,.12);
  transform: none;
}
.pc-module .component-board::before {
  opacity: .64;
  background-image: linear-gradient(rgba(8,127,105,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(8,127,105,.2) 1px, transparent 1px);
  background-size: 11px 11px;
}
.component-board i { z-index: 3; }
.component-board i:nth-child(1) { left: 20px; top: 18px; width: 52px; height: 48px; border: 2px solid #477b7b; border-radius: 5px; background: linear-gradient(145deg, #dff8f3, #75bfae); box-shadow: inset 0 0 0 5px rgba(255,255,255,.34); }
.component-board i:nth-child(2) { left: auto; right: 18px; top: 15px; width: 12px; height: 76px; border-radius: 3px; background: repeating-linear-gradient(180deg, #375f68 0 5px, #b8dcd5 5px 8px); }
.component-board i:nth-child(3) { right: auto; left: 84px; bottom: 12px; width: 88px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, #4d777d 0 10px, #d5ebe7 10px 14px); }
.component-board i:nth-child(4) { right: 54px; top: 38px; width: 28px; height: 28px; background: linear-gradient(145deg, #6e9cff, #3b6fe8); box-shadow: 0 0 14px rgba(59,111,232,.4); }
.component-hub span { font-size: 7px; }
.component-hub strong { font-size: 10px; }
.component-hub small { font-size: 6px; }
.pc-module .component-ssd {
  position: relative;
  right: auto;
  bottom: auto;
  width: 140px;
  height: 44px;
  border: 1px solid rgba(8,127,105,.2);
  border-radius: 5px;
  background: linear-gradient(145deg, #f8fffd, #cce5df);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 7px 16px rgba(20,70,76,.12);
  transform: scale(.94);
}
.component-ssd::before {
  position: absolute;
  left: 10px;
  right: 19%;
  top: 9px;
  bottom: 9px;
  border-radius: 3px;
  background: linear-gradient(90deg, #246e69, #3e9285);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
  content: "";
}
.component-ssd i { position: absolute; left: 19px; width: 28px; height: 5px; border-radius: 1px; background: rgba(255,255,255,.56); }
.component-ssd i:nth-child(1) { top: 16px; }
.component-ssd i:nth-child(2) { top: 25px; width: 42px; }
.component-ssd b { position: absolute; top: 8px; right: 9px; width: 17px; height: 28px; border-radius: 2px; background: repeating-linear-gradient(90deg, #8aa7a4 0 1px, transparent 1px 3px), #eef7f5; }

/* Stand racks upright while keeping only the floor isometric */
.compute-matrix {
  width: 540px;
  height: 430px;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}
.matrix-floor {
  inset: auto 7% 4%;
  height: 205px;
  transform: perspective(760px) rotateX(58deg) rotateZ(-38deg);
  transform-origin: center;
}
.rack-cluster { position: absolute; z-index: 5; inset: 0; }
.rack-unit {
  left: calc(50% + var(--x));
  top: var(--y);
  width: 44px;
  height: 112px;
  transform: perspective(620px) rotateY(-10deg) scale(var(--scale, 1));
  transform-origin: center bottom;
  backface-visibility: visible;
}
.rack-1 { --x: -188px; --y: 180px; }
.rack-2 { --x: -92px; --y: 190px; }
.rack-3 { --x: 4px; --y: 198px; }
.rack-4 { --x: 100px; --y: 190px; }
.rack-5 { --x: -144px; --y: 58px; --scale: .79; opacity: .86; }
.rack-6 { --x: -48px; --y: 45px; --scale: .79; opacity: .86; }
.rack-7 { --x: 62px; --y: 45px; --scale: .79; opacity: .86; }
.rack-8 { --x: 158px; --y: 58px; --scale: .79; opacity: .86; }
.compute-core { top: 43%; transform: translate3d(-50%, -50%, 0) rotateY(-8deg); }
.cooling-lines i { height: 220px; opacity: .74; }

@media (max-width: 920px) {
  .component-cloud-scene { transform: translate(-50%, -50%) scale(.84); }
  .compute-matrix { transform: translate(-50%, -50%) scale(.84); }
}
@media (max-width: 640px) {
  .component-cloud-scene { transform: translate(-50%, -50%) scale(.65); }
  .compute-matrix { transform: translate(-50%, -50%) scale(.64); }
}

/* Alternate premium visual: floating cloud portal and resource dashboard */
.cloud-portal-scene { position: absolute; left: 50%; top: 51%; width: 590px; height: 510px; transform: translate(-50%, -50%); transform-style: preserve-3d; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.portal-aura { position: absolute; left: 50%; top: 43%; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(8,127,105,.2), rgba(59,111,232,.1) 42%, transparent 72%); filter: blur(28px); transform: translate(-50%, -50%); animation: portalPulse 5s ease-in-out infinite; }
.portal-orbit { position: absolute; left: 50%; top: 47%; border: 1px solid rgba(8,127,105,.24); border-radius: 50%; transform-style: preserve-3d; }.portal-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(8,127,105,.08), 0 0 16px rgba(8,127,105,.55); }
.portal-orbit-a { width: 420px; height: 174px; animation: portalOrbitA 16s linear infinite; }.portal-orbit-a i { left: 15%; top: 8%; }.portal-orbit-b { width: 352px; height: 132px; border-color: rgba(59,111,232,.24); animation: portalOrbitB 21s linear reverse infinite; }.portal-orbit-b i { right: 8%; bottom: 5%; background: var(--blue); }.portal-orbit-c { width: 486px; height: 210px; border-style: dashed; border-color: rgba(183,124,24,.24); animation: portalOrbitA 27s linear infinite; }.portal-orbit-c i { right: 26%; top: 3%; background: var(--amber); }
.portal-links { position: absolute; z-index: 2; inset: 18% 10% 10%; width: 80%; height: 76%; overflow: visible; }.portal-links path { fill: none; stroke: url(#pipeFlow); stroke-width: .38; stroke-linecap: round; stroke-dasharray: 2 3; opacity: .56; animation: pipeFlow 3.2s linear infinite; }
.cloud-emblem { position: absolute; z-index: 6; left: 50%; top: 68px; width: 265px; height: 154px; transform: translateX(-50%) translateZ(75px); transform-style: preserve-3d; animation: portalFloat 5.2s ease-in-out infinite; }
.cloud-emblem::before { position: absolute; left: 8px; right: 8px; bottom: 12px; height: 76px; border: 1px solid rgba(59,111,232,.22); border-radius: 48px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(202,234,242,.93)); box-shadow: 0 28px 62px rgba(35,81,109,.2), inset 0 0 32px rgba(255,255,255,.62); content: ""; }
.cloud-puff { position: absolute; z-index: 2; border: 1px solid rgba(59,111,232,.2); border-radius: 50%; background: linear-gradient(145deg, #fff, #cfe9ef); box-shadow: inset 0 -10px 22px rgba(61,142,162,.09); }.puff-a { left: 23px; top: 43px; width: 105px; height: 87px; }.puff-b { left: 96px; top: 16px; width: 122px; height: 112px; }.puff-c { right: 14px; top: 51px; width: 92px; height: 76px; }
.cloud-logo { position: absolute; z-index: 5; left: 0; right: 0; bottom: 30px; display: grid; place-items: center; text-align: center; }.cloud-logo span { color: #6f878e; font: 8px var(--mono); letter-spacing: .18em; }.cloud-logo strong { margin: 4px 0; color: var(--blue); font: 700 25px var(--mono); letter-spacing: .04em; }.cloud-logo small { color: #728990; font: 7px var(--mono); letter-spacing: .11em; }
.cloud-flare { position: absolute; z-index: 4; left: 29px; top: 54px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 13px var(--mint); }.cloud-flare::after { position: absolute; left: 49px; top: -13px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); content: ""; }
.portal-chip { position: absolute; z-index: 8; display: grid; min-width: 144px; grid-template-columns: 8px 1fr; align-items: center; gap: 3px 8px; padding: 12px 14px; border: 1px solid rgba(13,45,56,.13); border-radius: 11px; background: rgba(255,255,255,.92); box-shadow: 0 16px 42px rgba(31,58,64,.11); backdrop-filter: blur(12px); animation: portalChipFloat 5.4s ease-in-out infinite; }.portal-chip > i { grid-row: 1 / span 3; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 11px rgba(8,127,105,.55); }.portal-chip span { color: #71858c; font: 8px var(--mono); letter-spacing: .1em; }.portal-chip strong { color: #27424a; font: 500 17px var(--mono); }.portal-chip small { color: #85979b; font-size: 8px; }
.chip-compute { left: 2px; top: 176px; }.chip-network { right: 0; top: 166px; animation-delay: -1.3s; }.chip-storage { left: 16px; bottom: 42px; animation-delay: -2.6s; }.chip-delivery { right: 14px; bottom: 35px; animation-delay: -3.9s; }
.portal-dashboard { position: absolute; z-index: 7; left: 50%; bottom: 12px; width: 360px; height: 148px; overflow: hidden; border: 1px solid rgba(13,45,56,.13); border-radius: 16px; background: rgba(255,255,255,.91); box-shadow: 0 26px 62px rgba(31,58,64,.14); backdrop-filter: blur(16px); transform: translateX(-50%) perspective(800px) rotateX(3deg); }
.portal-dashboard__head { display: flex; align-items: center; gap: 8px; height: 39px; padding: 0 14px; color: #73878d; border-bottom: 1px solid rgba(13,45,56,.08); font: 8px var(--mono); letter-spacing: .1em; }.portal-dashboard__head i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(8,127,105,.55); }.portal-dashboard__head b { margin-left: auto; color: var(--blue); font-weight: 500; }
.portal-dashboard__body { display: grid; grid-template-columns: 122px 1fr; gap: 12px; padding: 13px; }.portal-metrics { display: grid; gap: 8px; }.portal-metrics div { padding: 8px 9px; border: 1px solid rgba(13,45,56,.08); border-radius: 7px; background: #f8fbfa; }.portal-metrics span { display: block; color: #899a9e; font: 7px var(--mono); }.portal-metrics strong { display: block; margin-top: 4px; color: var(--mint); font: 500 14px var(--mono); }
.portal-wave { display: flex; align-items: flex-end; gap: 4px; height: 73px; padding: 10px 8px 4px; border: 1px solid rgba(13,45,56,.08); border-radius: 7px; background: linear-gradient(180deg, #fbfdfd, #eef6f4); }.portal-wave i { flex: 1; height: 25%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--blue), rgba(59,111,232,.12)); animation: portalWave 2.8s ease-in-out infinite; }.portal-wave i:nth-child(2n) { height: 62%; animation-delay: -.4s; }.portal-wave i:nth-child(3n) { height: 88%; animation-delay: -.8s; }.portal-wave i:nth-child(5n) { height: 44%; animation-delay: -1.2s; }
.portal-packet { position: absolute; z-index: 9; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 13px rgba(59,111,232,.85); }.portal-packet-one { animation: portalPacketOne 4.4s ease-in-out infinite; }.portal-packet-two { background: var(--mint); animation: portalPacketTwo 5.2s ease-in-out -.9s infinite; }.portal-packet-three { background: var(--amber); animation: portalPacketThree 5.8s ease-in-out -1.7s infinite; }
@keyframes portalPulse { 0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.94); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.05); } }
@keyframes portalFloat { 0%,100% { transform:translateX(-50%) translateZ(75px) translateY(0); } 50% { transform:translateX(-50%) translateZ(75px) translateY(-12px); } }
@keyframes portalChipFloat { 0%,100% { margin-top:0; } 50% { margin-top:-9px; } }
@keyframes portalOrbitA { from { transform:translate(-50%,-50%) rotateX(66deg) rotateZ(0); } to { transform:translate(-50%,-50%) rotateX(66deg) rotateZ(360deg); } }
@keyframes portalOrbitB { from { transform:translate(-50%,-50%) rotateX(58deg) rotateZ(360deg); } to { transform:translate(-50%,-50%) rotateX(58deg) rotateZ(0); } }
@keyframes portalWave { 0%,100% { opacity:.42; transform:scaleY(.72); } 50% { opacity:1; transform:scaleY(1); } }
@keyframes portalPacketOne { 0%,100% { left:16%; top:60%; opacity:0; } 25% { opacity:1; } 62% { left:50%; top:43%; opacity:1; } 90% { left:82%; top:61%; opacity:0; } }
@keyframes portalPacketTwo { 0%,100% { left:82%; top:35%; opacity:0; } 28% { opacity:1; } 65% { left:50%; top:52%; opacity:1; } 92% { left:18%; top:70%; opacity:0; } }
@keyframes portalPacketThree { 0%,100% { left:50%; top:20%; opacity:0; } 30% { opacity:1; } 68% { left:50%; top:79%; opacity:1; } 92% { opacity:0; } }
@media (max-width: 920px) { .cloud-portal-scene { transform:translate(-50%,-50%) scale(.84); } }
@media (max-width: 640px) { .cloud-portal-scene { transform:translate(-50%,-50%) scale(.64); } .portal-chip { min-width:116px; padding:9px 10px; } }

/* Compute scene: distributed GPU cluster nebula */
.compute-nodes-scene { position: absolute; left: 50%; top: 50%; width: 560px; height: 430px; transform: translate(-50%, -50%); transform-style: preserve-3d; transition: transform .75s cubic-bezier(.22,1,.36,1); }
.compute-aura { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(77,121,242,.2), rgba(74,205,176,.11) 44%, transparent 72%); filter: blur(27px); transform: translate(-50%,-50%); animation: computeAura 5.5s ease-in-out infinite; }
.compute-node-links { position: absolute; z-index: 2; inset: 7%; width: 86%; height: 86%; overflow: visible; }.compute-node-links path { fill: none; stroke: url(#computeLinkGradient); stroke-width: .42; stroke-linecap: round; stroke-dasharray: 2.2 2.8; opacity: .72; animation: pipeFlow 3s linear infinite; filter: drop-shadow(0 0 2px rgba(83,133,244,.35)); }
.compute-energy-ring { position: absolute; z-index: 3; left: 50%; top: 50%; border: 1px solid rgba(59,111,232,.24); border-radius: 50%; }.compute-energy-ring i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(59,111,232,.08), 0 0 14px rgba(59,111,232,.62); }
.compute-energy-ring.ring-a { width: 410px; height: 168px; animation: portalOrbitA 15s linear infinite; }.compute-energy-ring.ring-a i { left: 14%; top: 7%; }.compute-energy-ring.ring-b { width: 338px; height: 126px; border-color: rgba(8,127,105,.27); animation: portalOrbitB 21s linear reverse infinite; }.compute-energy-ring.ring-b i { right: 8%; bottom: 4%; background: var(--mint); }.compute-energy-ring.ring-c { width: 490px; height: 216px; border-style: dashed; border-color: rgba(151,126,244,.24); animation: portalOrbitA 27s linear infinite; }.compute-energy-ring.ring-c i { right: 23%; top: 3%; background: #9a7cf4; }
.compute-core-3d { position: absolute; z-index: 8; left: 50%; top: 50%; width: 142px; height: 142px; transform: translate(-50%,-50%) perspective(700px) rotateX(-8deg) rotateY(14deg); transform-style: preserve-3d; animation: computeCoreFloat 5.2s ease-in-out infinite; }
.core-cube { position: absolute; inset: 10px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.44); border-radius: 31px; background: linear-gradient(145deg, #506fe7, #36c6a8); box-shadow: 0 25px 55px rgba(42,83,145,.25), inset 0 0 30px rgba(255,255,255,.13), 0 0 42px rgba(72,121,235,.14); }.core-cube::before { position: absolute; inset: 15px; border: 1px dashed rgba(255,255,255,.32); border-radius: 22px; content: ""; animation: citySpin 12s linear infinite; }.core-cube span { margin-top: -24px; font: 8px var(--mono); opacity: .75; }.core-cube strong { font: 700 24px var(--mono); letter-spacing: .04em; }.core-cube small { margin-top: -27px; font: 8px var(--mono); letter-spacing: .09em; opacity: .8; }
.core-orbit-line { position: absolute; inset: -15px; border: 1px solid rgba(76,198,177,.32); border-radius: 50%; transform: rotateX(70deg); }.core-orbit-line-a { animation: citySpin 8s linear infinite; }.core-orbit-line-b { inset: -27px; border-color: rgba(94,128,235,.24); animation: citySpin 13s linear infinite reverse; }
.compute-node { position: absolute; z-index: 9; display: grid; min-width: 86px; grid-template-columns: 8px 1fr; gap: 3px 8px; padding: 10px 12px; color: #577078; border: 1px solid rgba(13,45,56,.13); border-radius: 10px; background: rgba(255,255,255,.93); box-shadow: 0 14px 36px rgba(31,58,64,.11); backdrop-filter: blur(12px); animation: portalChipFloat 5s ease-in-out infinite; }.compute-node > i { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 11px rgba(59,111,232,.55); }.compute-node b { font: 9px var(--mono); }.compute-node small { color: #788d94; font: 10px var(--mono); }
.compute-node-a { left: 5%; top: 15%; }.compute-node-b { left: 41%; top: 3%; animation-delay: -.8s; }.compute-node-c { right: 4%; top: 15%; animation-delay: -1.6s; }.compute-node-d { left: 3%; bottom: 12%; animation-delay: -2.4s; }.compute-node-e { left: 41%; bottom: 2%; animation-delay: -3.2s; }.compute-node-f { right: 4%; bottom: 12%; animation-delay: -4s; }.compute-node-b > i, .compute-node-e > i { background: var(--mint); }.compute-node-c > i, .compute-node-f > i { background: #9a7cf4; }
.compute-packet { position: absolute; z-index: 10; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 13px rgba(59,111,232,.85); }.packet-a { animation: computePacketA 4.4s ease-in-out infinite; }.packet-b { background: var(--mint); animation: computePacketB 5.1s ease-in-out -.9s infinite; }.packet-c { background: #9a7cf4; animation: computePacketC 5.7s ease-in-out -1.8s infinite; }
@keyframes computeAura { 0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.94); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.05); } }
@keyframes computeCoreFloat { 0%,100% { transform:translate(-50%,-50%) perspective(700px) rotateX(-8deg) rotateY(14deg) translateY(0); } 50% { transform:translate(-50%,-50%) perspective(700px) rotateX(-8deg) rotateY(14deg) translateY(-10px); } }
@keyframes computePacketA { 0%,100% { left:22%; top:20%; opacity:0; } 25% { opacity:1; } 65% { left:50%; top:50%; opacity:1; } 90% { left:78%; top:20%; opacity:0; } }
@keyframes computePacketB { 0%,100% { left:19%; top:74%; opacity:0; } 28% { opacity:1; } 66% { left:50%; top:50%; opacity:1; } 92% { left:81%; top:74%; opacity:0; } }
@keyframes computePacketC { 0%,100% { left:50%; top:12%; opacity:0; } 30% { opacity:1; } 70% { left:50%; top:88%; opacity:1; } 92% { opacity:0; } }
@media (max-width: 920px) { .compute-nodes-scene { transform:translate(-50%,-50%) scale(.84); } }
@media (max-width: 640px) { .compute-nodes-scene { transform:translate(-50%,-50%) scale(.64); }.compute-node { min-width:72px; padding:7px 8px; }.compute-node small { font-size:8px; } }

/* Data pipeline scene: flowing data river across four processing stations */
.data-river-scene { position: absolute; left: 50%; top: 50%; width: 600px; height: 430px; transform: translate(-50%,-50%); transform-style: preserve-3d; transition: transform .75s cubic-bezier(.22,1,.36,1); }
.data-river-aura { position: absolute; left: 50%; top: 52%; width: 560px; height: 430px; border-radius: 50%; background: radial-gradient(ellipse, rgba(59,111,232,.15), rgba(8,127,105,.08) 48%, transparent 72%); filter: blur(26px); transform: translate(-50%,-50%); animation: riverAura 5.2s ease-in-out infinite; }
.data-river-map { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.river-shadow { fill: none; stroke: rgba(39,91,131,.12); stroke-width: 22; stroke-linecap: round; filter: blur(7px); }
.river-line { fill: none; stroke: url(#riverGradient); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 16 9; filter: drop-shadow(0 0 6px rgba(70,130,235,.32)); animation: riverFlow 3.8s linear infinite; }
.river-branch { fill: none; stroke: rgba(8,127,105,.42); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 5; animation: riverFlow 4.6s linear infinite reverse; }
.branch-b { stroke: rgba(151,120,243,.36); }
.river-router { position: absolute; z-index: 8; left: 50%; top: 49%; display: grid; width: 148px; height: 148px; place-items: center; padding: 18px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,.45); border-radius: 44px; background: linear-gradient(145deg, #3b6fe8, #38c8aa); box-shadow: 0 28px 60px rgba(28,89,111,.24), 0 0 38px rgba(59,111,232,.14); transform: translate(-50%,-50%) rotateY(-9deg); animation: riverRouterFloat 5.4s ease-in-out infinite; }
.river-router::before { position: absolute; inset: 17px; border: 1px dashed rgba(255,255,255,.34); border-radius: 50%; content: ""; animation: citySpin 12s linear infinite; }
.river-router i { position: absolute; width: 59px; height: 59px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }.river-router span { margin-top: -29px; font: 8px var(--mono); opacity: .7; }.river-router strong { font: 600 17px var(--mono); }.river-router small { margin-top: -28px; font: 7px var(--mono); letter-spacing: .06em; opacity: .78; }
.river-stage { position: absolute; z-index: 7; display: grid; min-width: 118px; grid-template-columns: 20px 8px 1fr; align-items: center; gap: 3px 7px; padding: 11px 13px; border: 1px solid rgba(13,45,56,.13); border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 14px 36px rgba(31,58,64,.11); backdrop-filter: blur(12px); animation: portalChipFloat 5s ease-in-out infinite; }.river-stage > span { grid-row: 1 / span 2; color: #91a2a6; font: 7px var(--mono); }.river-stage > i { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(8,127,105,.5); }.river-stage b { font: 9px var(--mono); }.river-stage small { color: #85979c; font-size: 8px; }
.river-ingest { left: 6px; top: 274px; }.river-process { left: 148px; top: 160px; animation-delay: -.9s; }.river-route { right: 128px; top: 205px; animation-delay: -1.8s; }.river-deliver { right: 6px; top: 94px; animation-delay: -2.7s; }
.river-process > i, .river-route > i { background: var(--blue); }.river-deliver > i { background: #9a78f3; }
.river-packet { position: absolute; z-index: 10; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px currentColor; offset-path: path('M52 330 C128 310 116 238 198 220 S318 300 390 245 S500 126 566 142'); offset-rotate: 0deg; animation: riverPacket 4.8s linear infinite; }.river-packet-two { background: var(--blue); animation-delay: -1.6s; animation-duration: 5.6s; }.river-packet-three { background: #9a78f3; animation-delay: -3.1s; animation-duration: 6.2s; }
@keyframes riverFlow { to { stroke-dashoffset: -50; } }
@keyframes riverAura { 0%,100% { opacity:.5; transform:translate(-50%,-50%) scale(.95); } 50% { opacity:.95; transform:translate(-50%,-50%) scale(1.04); } }
@keyframes riverRouterFloat { 0%,100% { transform:translate(-50%,-50%) rotateY(-9deg) translateY(0); } 50% { transform:translate(-50%,-50%) rotateY(-9deg) translateY(-10px); } }
@keyframes riverPacket { from { offset-distance:0%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } to { offset-distance:100%; opacity:0; } }
@media (max-width: 920px) { .data-river-scene { transform:translate(-50%,-50%) scale(.84); } }
@media (max-width: 640px) { .data-river-scene { transform:translate(-50%,-50%) scale(.64); }.river-stage { min-width:86px; padding:8px 9px; }.river-stage small { display:none; } }

/* Professional cloud console preview */
.console-showcase { position: absolute; left: 50%; top: 51%; width: 680px; height: 500px; transform: translate(-50%,-50%); transform-style: preserve-3d; transition: transform .8s cubic-bezier(.16,1,.3,1); perspective: 1100px; }
.console-window { position: absolute; z-index: 3; inset: 18px 12px 28px 12px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9e3e6; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(31,58,64,.16); transform: rotateX(2deg) rotateY(-5deg); }
.console-titlebar { display: flex; height: 42px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 15px; color: #7b8d92; border-bottom: 1px solid #e9eef0; background: #f8fafb; font: 8px var(--mono); letter-spacing: .08em; }.console-dots { display: flex; gap: 5px; }.console-dots i { width: 6px; height: 6px; border-radius: 50%; background: #bdc9cc; }.console-dots i:first-child { background: #e47a67; }.console-dots i:nth-child(2) { background: #d9a43e; }.console-dots i:nth-child(3) { background: #47b88f; }.console-titlebar b { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #2e8c6d; font-weight: 500; }.console-titlebar b i { width: 5px; height: 5px; border-radius: 50%; background: #39b88a; box-shadow: 0 0 0 4px rgba(57,184,138,.1); }
.console-body { display: grid; min-height: 0; flex: 1; grid-template-columns: 125px minmax(0,1fr); }
.console-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 14px 10px; border-right: 1px solid #e7edef; background: #f9fbfb; }.console-mini-logo { display: flex; height: 34px; align-items: flex-end; justify-content: center; gap: 3px; margin-bottom: 10px; }.console-mini-logo i { width: 6px; background: var(--mint); }.console-mini-logo i:first-child { height: 13px; opacity: .55; }.console-mini-logo i:nth-child(2) { height: 21px; }.console-mini-logo i:nth-child(3) { height: 28px; background: var(--blue); }
.console-sidebar a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: #72848a; border-radius: 7px; font-size: 10px; }.console-sidebar a i { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 2px; }.console-sidebar a.is-active { color: #176c8a; background: #eaf4f8; font-weight: 600; }
.console-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 8px; color: #77898f; border-top: 1px solid #e7edef; }.console-user span { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; border-radius: 50%; background: #4b7bc6; font: 8px var(--mono); }.console-user small { font-size: 9px; }
.console-main { min-width: 0; padding: 18px; }.console-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.console-topline small { display: block; color: #86979b; font-size: 9px; }.console-topline strong { display: block; margin-top: 5px; color: #29414a; font-size: 15px; }.console-topline button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px; color: #fff; border: 0; border-radius: 6px; background: #287cc4; font-size: 10px; box-shadow: 0 8px 18px rgba(40,124,196,.16); }.console-topline button i { width: 8px; height: 8px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; }
.console-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 16px; }.console-kpis article { padding: 11px 12px; border: 1px solid #e5ecee; border-radius: 8px; background: #fbfcfc; }.console-kpis span { display: block; color: #87979c; font-size: 8px; }.console-kpis strong { display: block; margin: 7px 0 4px; color: #273f48; font: 600 18px var(--mono); }.console-kpis small { color: #3a9a77; font-size: 8px; }
.console-content-grid { display: grid; grid-template-columns: 1.28fr .72fr; gap: 9px; margin-top: 9px; }.console-card { min-width: 0; padding: 13px; border: 1px solid #e5ecee; border-radius: 8px; background: #fff; }.console-card__head { display: flex; justify-content: space-between; color: #687c83; font-size: 9px; }.console-card__head small { color: #96a5a9; font: 7px var(--mono); }
.console-chart { display: flex; height: 112px; align-items: flex-end; gap: 5px; margin-top: 13px; padding: 8px 5px 0; border-bottom: 1px solid #e5ecee; background-image: linear-gradient(#eff3f4 1px, transparent 1px); background-size: 100% 34px; }.console-chart i { flex: 1; height: 25%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #5da6da, rgba(93,166,218,.15)); animation: consoleBars 2.8s ease-in-out infinite; }.console-chart i:nth-child(2n) { height: 55%; animation-delay: -.5s; }.console-chart i:nth-child(3n) { height: 88%; animation-delay: -1s; }.console-chart i:nth-child(5n) { height: 70%; animation-delay: -1.4s; }.console-axis { display: flex; justify-content: space-between; margin-top: 6px; color: #9aa8ac; font: 7px var(--mono); }
.console-event { display: grid; grid-template-columns: 7px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid #edf1f2; }.console-event:last-child { border-bottom: 0; }.console-event > i { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; }.console-event i.green { background: #36b889; }.console-event i.blue { background: #4a82d5; }.console-event i.amber { background: #d8a23a; }.console-event b { display: block; color: #53686f; font-size: 9px; font-weight: 500; }.console-event small { display: block; margin-top: 3px; color: #9aa8ac; font-size: 7px; }
.console-float { position: absolute; z-index: 8; padding: 13px 15px; border: 1px solid #dce6e8; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 18px 44px rgba(31,58,64,.13); animation: consoleFloat 5s ease-in-out infinite; }.console-float span { display: block; color: #84959a; font-size: 8px; }.console-float strong { display: block; margin: 6px 0 4px; color: #2d4a53; font: 600 18px var(--mono); }.console-float small { color: #3b9b78; font-size: 8px; }.console-float-order { right: -5px; bottom: 4px; }.console-float-node { left: -7px; top: 110px; animation-delay: -2.4s; }.console-float-node > i { position: absolute; left: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #36b889; box-shadow: 0 0 0 4px rgba(54,184,137,.1); }.console-float-node span { padding-left: 13px; }
@keyframes consoleBars { 0%,100% { opacity:.5; transform:scaleY(.72); } 50% { opacity:1; transform:scaleY(1); } }
@keyframes consoleFloat { 0%,100% { margin-top:0; } 50% { margin-top:-9px; } }
@media (max-width: 920px) { .console-showcase { transform:translate(-50%,-50%) scale(.83); } }
@media (max-width: 640px) { .console-showcase { transform:translate(-50%,-50%) scale(.62); }.console-float { display:none; } }

/* Enterprise compute room dashboard */
.compute-ops-panel { position: absolute; left: 50%; top: 50%; width: 620px; height: 430px; overflow: hidden; transform: translate(-50%,-50%); border: 1px solid #d9e3e6; border-radius: 15px; background: #fff; box-shadow: 0 28px 70px rgba(31,58,64,.14); }
.ops-panel-head, .dataflow-head { display: flex; height: 54px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #e7edef; background: #f9fbfb; }.ops-panel-head span, .dataflow-head span { display: block; color: #82949a; font: 8px var(--mono); letter-spacing: .1em; }.ops-panel-head strong, .dataflow-head strong { display: block; margin-top: 4px; color: #2d464f; font-size: 14px; }.ops-panel-head > small, .dataflow-head > small { display: inline-flex; align-items: center; gap: 6px; color: #368e70; font: 8px var(--mono); }.ops-panel-head > small i, .dataflow-head > small i { width: 6px; height: 6px; border-radius: 50%; background: #39b88a; box-shadow: 0 0 0 4px rgba(57,184,138,.08); }
.ops-panel-body { display: grid; height: calc(100% - 54px); grid-template-columns: minmax(0,1fr) 158px; }
.room-view { position: relative; overflow: hidden; padding: 20px 22px; background: #f7fafb; }.room-view::before { position: absolute; inset: 0; opacity: .58; background-image: linear-gradient(rgba(65,105,122,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(65,105,122,.07) 1px, transparent 1px); background-size: 24px 24px; content: ""; }
.room-label { position: relative; z-index: 2; color: #83959a; font: 8px var(--mono); letter-spacing: .1em; }
.rack-row { position: absolute; z-index: 2; left: 50%; display: flex; gap: 13px; transform: translateX(-50%); }.rack-row-back { top: 72px; transform: translateX(-50%) scale(.82); opacity: .72; }.rack-row-front { top: 166px; }
.rack-cabinet { position: relative; display: flex; width: 48px; height: 108px; flex-direction: column; gap: 7px; padding: 9px 7px; border: 1px solid #cfdcdf; border-radius: 4px; background: linear-gradient(90deg, #f7fafb, #dbe6e9 60%, #b5c7cc); box-shadow: 4px 6px 12px rgba(31,58,64,.09); }.rack-cabinet::before { position: absolute; top: -5px; left: -2px; right: -2px; height: 6px; border: 1px solid #c9d8db; border-radius: 3px; background: #e7eff1; content: ""; }.rack-cabinet i { height: 15px; border-radius: 2px; background: repeating-linear-gradient(180deg, #647f88 0 2px, #b8c9cd 2px 4px); }.rack-cabinet i::after { display: block; width: 5px; height: 5px; margin: 4px 0 0 auto; border-radius: 50%; background: #46b68b; box-shadow: 0 0 6px rgba(70,182,139,.3); content: ""; }
.aisle-line { position: absolute; z-index: 1; left: 14%; right: 14%; top: 143px; height: 16px; display: grid; place-items: center; color: #94a4a8; border-top: 1px dashed #cbd9dc; border-bottom: 1px dashed #cbd9dc; font: 7px var(--mono); }
.room-metrics { display: grid; align-content: start; gap: 8px; padding: 14px; border-left: 1px solid #e7edef; }.room-metrics > div { padding: 10px; border: 1px solid #e6edef; border-radius: 7px; background: #fbfcfc; }.room-metrics span { display: block; color: #84959b; font-size: 8px; }.room-metrics strong { display: block; margin: 6px 0 3px; color: #2c4851; font: 600 16px var(--mono); }.room-metrics small { color: #7f9298; font-size: 8px; }.room-status-list { display: grid; grid-template-columns: 6px 1fr; gap: 8px; align-items: center; padding: 6px 2px !important; border: 0 !important; background: transparent !important; }.room-status-list i { width: 6px; height: 6px; border-radius: 50%; background: #39b88a; }.room-status-list span { font-size: 8px; }

/* Enterprise data pipeline workflow */
.dataflow-panel { position: absolute; left: 50%; top: 50%; width: 620px; height: 430px; overflow: hidden; transform: translate(-50%,-50%); border: 1px solid #d9e3e6; border-radius: 15px; background: #fff; box-shadow: 0 28px 70px rgba(31,58,64,.14); }
.dataflow-steps { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: center; padding: 22px 16px 14px; }.flow-step { position: relative; min-width: 0; padding: 12px 10px; border: 1px solid #e2eaec; border-radius: 8px; background: #fbfcfc; }.flow-step > span { color: #9aa9ad; font: 7px var(--mono); }.flow-step > i { display: block; width: 22px; height: 22px; margin: 10px 0; border: 2px solid #8cb9cd; border-radius: 6px; background: #edf5f8; }.flow-step div b { display: block; color: #354f58; font-size: 10px; }.flow-step div small { display: block; margin-top: 4px; color: #8a9ba0; font-size: 7px; }.flow-step em { display: block; margin-top: 10px; color: #3b8d72; font: 8px var(--mono); font-style: normal; }.step-transform > i { border-color: #8fa5df; background: #eef2fd; }.step-route > i { border-color: #d0a758; background: #fbf6e9; }.step-deliver > i { border-color: #5cae9b; background: #edf8f4; }
.flow-connector { position: relative; height: 1px; background: #cddadd; }.flow-connector::after { position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid #8fa9b1; border-right: 1px solid #8fa9b1; content: ""; transform: rotate(45deg); }.flow-connector i { position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #4d85c9; animation: flowDot 3s linear infinite; }
.dataflow-lower { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; padding: 0 16px 16px; }.flow-chart, .flow-log { padding: 13px; border: 1px solid #e4ecee; border-radius: 8px; background: #fbfcfc; }.flow-chart > div:first-child { display: flex; justify-content: space-between; color: #7d9096; font-size: 8px; }.flow-chart strong { color: #31515b; font: 600 12px var(--mono); }.flow-bars { display: flex; height: 94px; align-items: flex-end; gap: 4px; margin-top: 10px; }.flow-bars i { flex: 1; height: 28%; border-radius: 2px 2px 0 0; background: #87b3d2; animation: consoleBars 2.8s ease-in-out infinite; }.flow-bars i:nth-child(2n) { height: 60%; animation-delay: -.5s; }.flow-bars i:nth-child(3n) { height: 88%; animation-delay: -1s; }
.flow-log { display: grid; align-content: start; gap: 3px; }.flow-log > div { display: grid; grid-template-columns: 7px 1fr auto; gap: 7px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf1f2; }.flow-log i { width: 6px; height: 6px; border-radius: 50%; }.flow-log i.green { background: #39b88a; }.flow-log i.blue { background: #4d85c9; }.flow-log i.amber { background: #d8a23a; }.flow-log span { color: #687d84; font-size: 8px; }.flow-log time { color: #97a6aa; font: 7px var(--mono); }
@keyframes flowDot { from { left: 0; opacity: 0; } 15% { opacity: 1; } to { left: calc(100% - 6px); opacity: 0; } }
@media (max-width: 920px) { .compute-ops-panel, .dataflow-panel { transform: translate(-50%,-50%) scale(.84); } }
@media (max-width: 640px) { .compute-ops-panel, .dataflow-panel { transform: translate(-50%,-50%) scale(.64); }.rack-cabinet { width: 43px; }.dataflow-steps { grid-template-columns: repeat(4,1fr); gap: 6px; }.flow-connector { display:none; }.flow-step { padding:9px 7px; }.dataflow-lower { grid-template-columns:1fr; }.flow-log { display:none; } }