/* ===== 3D SERVICE VISUALS — dark aubergine, refined premium finish ===== */
.viz3d{
  --v-green:#7CB342; --v-green-d:#639922; --v-green-l:#B4E38A;
  --v-saffron:#D68A2E; --v-mangal:#E05A3F;
  --v-slate:#9A93A0; --v-line:#3A2F42; --v-au:#2A2130;
  width:100%; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.07);
  background:linear-gradient(158deg,#352A3C 0%, #2A2130 52%, #1D1622 100%);
  box-shadow:0 24px 60px rgba(15,10,20,0.4), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
}
/* refined top status bar */
.viz3d-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; position:relative; z-index:4;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005) 40%, transparent);
}
.viz3d-topbar::after{ content:''; position:absolute; left:20px; right:20px; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,179,66,0.35),transparent); }
.viz3d-eyebrow{ font-family:'Newsreader',Georgia,serif; font-size:16px; font-style:italic; color:#F4F0E8; letter-spacing:0.2px; text-shadow:0 1px 8px rgba(0,0,0,0.3); }
.viz3d-readout{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:2.5px; color:#A79FAD; }
.v3-live{ width:6px; height:6px; border-radius:50%; background:var(--v-green); box-shadow:0 0 10px var(--v-green),0 0 4px var(--v-green); animation:v3blink 2s ease-in-out infinite; }
@keyframes v3blink{ 0%,100%{ opacity:0.35; box-shadow:0 0 4px var(--v-green);} 50%{ opacity:1; box-shadow:0 0 12px var(--v-green);} }

.viz3d-stage{ height:236px; overflow:clip; perspective:1100px; perspective-origin:50% 38%; position:relative; overflow:hidden; }
/* atmospheric depth layers */
.viz3d-grid{
  position:absolute; inset:-40% 0 -12% 0;
  background-image:linear-gradient(rgba(124,179,66,0.09) 1px,transparent 1px),linear-gradient(90deg,rgba(124,179,66,0.09) 1px,transparent 1px);
  background-size:38px 38px; transform:rotateX(68deg) translateZ(-30px) scale(1.6); transform-origin:50% 64%;
  -webkit-mask-image:radial-gradient(120% 90% at 55% 30%, #000 30%, transparent 80%); mask-image:radial-gradient(120% 90% at 55% 30%, #000 30%, transparent 80%); opacity:0.55;
}
.viz3d-glow{ position:absolute; left:52%; top:46%; width:320px; height:300px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(124,179,66,0.16), transparent 62%); pointer-events:none; filter:blur(6px); }
/* subtle scanline atmosphere */
.viz3d-stage::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px); opacity:0.5; }
/* top light wash */
.viz3d-stage::after{ content:''; position:absolute; left:0; right:0; top:0; height:60%; z-index:1; pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,0.05), transparent 70%); }
.viz3d-scene{ position:absolute; inset:0; z-index:2; transform-style:preserve-3d; transform:rotateX(8deg); }

.v3-rail{ position:absolute; left:11%; right:11%; top:50%; height:11px; border-radius:8px;
  background:linear-gradient(90deg,rgba(124,179,66,0.3),rgba(214,138,46,0.28),rgba(124,179,66,0.3));
  transform:translateZ(12px); box-shadow:0 16px 26px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -1px 0 rgba(0,0,0,0.2); }
.v3-rail-glow{ position:absolute; left:11%; right:11%; top:50%; height:11px; border-radius:8px;
  background:linear-gradient(90deg,transparent,rgba(124,179,66,0.55),transparent); transform:translateZ(13px);
  filter:blur(5px); animation:v3railshine 4.5s ease-in-out infinite; }
@keyframes v3railshine{ 0%,100%{ opacity:0.25; transform:translateZ(13px) translateX(-30%);} 50%{ opacity:0.65; transform:translateZ(13px) translateX(30%);} }

.v3-node{ position:absolute; top:50%; transform-style:preserve-3d; }
.v3-n1{ left:13%; } .v3-n2{ left:38%; } .v3-n4{ left:83%; }

.v3-tag{ position:absolute; top:34px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.4px; color:#C4BCCA; white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.v3-tag-alert{ color:var(--v-mangal); } .v3-tag-done{ color:var(--v-green-l); } .v3-tag-hub{ top:52px; color:var(--v-green-l); }
.v3-sub{ position:absolute; top:47px; left:50%; transform:translateX(-50%);
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:10.5px; color:#948C9A; white-space:nowrap; }
.v3-sub-alert{ color:#D88; } .v3-sub-done{ color:#A6D66A; } .v3-sub-hub{ top:65px; color:#A6D66A; }

/* INTAKE stack — crisper edges, layered depth */
.v3-stack{ position:relative; width:30px; height:38px; transform:translate(-50%,-66%) translateZ(24px) rotateY(-24deg) rotateX(4deg); transform-style:preserve-3d; }
.v3-stack span{ position:absolute; width:30px; height:38px; border-radius:5px; background:linear-gradient(155deg,#F6F2EA,#C9C0B5); border:1px solid rgba(0,0,0,0.2); box-shadow:0 8px 16px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.6); }
.v3-stack span:nth-child(2){ transform:translateZ(-6px) translate(4px,-4px); opacity:0.82; }
.v3-stack span:nth-child(3){ transform:translateZ(-12px) translate(8px,-8px); opacity:0.6; }

/* BOTTLENECK jam */
.v3-jam{ position:relative; width:44px; height:36px; transform:translate(-50%,-62%) translateZ(24px); transform-style:preserve-3d; }
.v3-jam span{ position:absolute; width:12px; height:16px; border-radius:3px; background:linear-gradient(155deg,#F6F2EA,#C9C0B5); border:1px solid rgba(0,0,0,0.2); box-shadow:0 5px 11px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.5); }
.v3-jam span:nth-child(1){ left:0; top:2px; } .v3-jam span:nth-child(2){ left:9px; top:14px; } .v3-jam span:nth-child(3){ left:20px; top:0; } .v3-jam span:nth-child(4){ left:26px; top:16px; }
.v3-jam i{ position:absolute; left:12px; top:5px; width:14px; height:18px; border-radius:3px; background:linear-gradient(155deg,#FF4D7A,#E05A3F); border:1px solid rgba(255,120,120,0.6); box-shadow:0 0 18px rgba(224,90,63,0.85),inset 0 1px 0 rgba(255,255,255,0.4); animation:v3jampulse 1.5s ease-in-out infinite; }
@keyframes v3jampulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 14px rgba(224,90,63,0.7);} 50%{ transform:scale(1.15); box-shadow:0 0 24px rgba(224,90,63,0.95);} }

/* OPTIMIZE hub */
.v3-hub{ position:absolute; left:60%; top:50%; width:78px; height:78px; transform:translate(-50%,-50%) translateZ(32px); transform-style:preserve-3d; }
.v3-hub-glow{ position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle,rgba(124,179,66,0.42),transparent 66%); animation:v3pulse 2.6s ease-in-out infinite; }
.v3-hub-ring{ position:absolute; inset:0; border-radius:50%; border:2.5px solid var(--v-green); border-top-color:transparent; border-bottom-color:transparent; animation:v3spin 7s linear infinite; box-shadow:0 0 22px rgba(124,179,66,0.55); }
.v3-hub-ring2{ inset:13px; border:2px solid var(--v-saffron); border-left-color:transparent; border-right-color:transparent; animation:v3spin 4.5s linear infinite reverse; box-shadow:0 0 16px rgba(214,138,46,0.45); }
.v3-hub-core{ position:absolute; inset:29px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#CDEFA8,var(--v-green-d)); box-shadow:0 0 24px rgba(124,179,66,0.8),inset 0 2px 6px rgba(255,255,255,0.7); animation:v3pulse 2.3s ease-in-out infinite; }
@keyframes v3spin{ to{ transform:rotate(360deg);} }
@keyframes v3pulse{ 0%,100%{ transform:scale(0.86); opacity:0.82;} 50%{ transform:scale(1.14); opacity:1;} }

/* DELIVERED */
.v3-out{ position:relative; width:32px; height:40px; transform:translate(-50%,-62%) translateZ(24px) rotateY(-22deg) rotateX(4deg); transform-style:preserve-3d; }
.v3-out b{ position:absolute; inset:0; border-radius:6px; background:linear-gradient(155deg,#F6F2EA,#C9C0B5); border:1.5px solid var(--v-green); box-shadow:0 10px 18px rgba(0,0,0,0.4),0 0 18px rgba(124,179,66,0.35),inset 0 1px 0 rgba(255,255,255,0.6); }
.v3-out i{ position:absolute; left:9px; top:15px; width:13px; height:6px; border-left:2.8px solid var(--v-green-d); border-bottom:2.8px solid var(--v-green-d); transform:rotate(-45deg); }

.v3-unit{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translateZ(20px); }
.v3-u1{ background:var(--v-green-l); box-shadow:0 0 12px var(--v-green); animation:v3flow 4.4s linear infinite; }
.v3-u2{ background:var(--v-saffron); box-shadow:0 0 12px var(--v-saffron); animation:v3flow 4.4s linear infinite 1.5s; }
.v3-u3{ background:var(--v-green-l); box-shadow:0 0 12px var(--v-green); animation:v3flow 4.4s linear infinite 2.9s; }
@keyframes v3flow{ 0%{ left:13%; opacity:0;} 8%{opacity:1;} 40%{ left:38%;} 92%{opacity:1;} 100%{ left:83%; opacity:0;} }

/* probe */
.v3-probe{ position:absolute; left:38%; top:11%; transform:translate(-50%,0) translateZ(52px); animation:v3hover 3.2s ease-in-out infinite; }
.v3-probe-ring{ width:30px; height:30px; border-radius:50%; border:2px solid var(--v-mangal); box-shadow:0 0 18px rgba(224,90,63,0.55),inset 0 0 8px rgba(224,90,63,0.25); }
.v3-probe-lens{ position:absolute; inset:5px; border-radius:50%; background:radial-gradient(circle at 36% 30%,rgba(255,255,255,0.45),rgba(224,90,63,0.12)); }
.v3-probe-handle{ position:absolute; right:-5px; bottom:-5px; width:12px; height:3px; border-radius:2px; background:var(--v-mangal); box-shadow:0 0 6px rgba(224,90,63,0.5); transform:rotate(45deg); }
.v3-probe-beam{ position:absolute; left:38%; top:20%; width:1.5px; height:56px; transform:translate(-50%,0) translateZ(44px); background:linear-gradient(rgba(224,90,63,0.45),transparent); animation:v3beam 3.2s ease-in-out infinite; }
@keyframes v3hover{ 0%,100%{ transform:translate(-50%,0) translateZ(52px);} 50%{ transform:translate(-50%,-8px) translateZ(60px);} }
@keyframes v3beam{ 0%,100%{ opacity:0.4;} 50%{ opacity:0.7;} }

@media (prefers-reduced-motion:reduce){ .v3-hub-ring,.v3-hub-ring2,.v3-hub-core,.v3-hub-glow,.v3-unit,.v3-probe,.v3-jam i,.v3-rail-glow,.v3-live,.v3-probe-beam{ animation:none !important; } }

/* ===== TRANSFORMATION — diagonal migration scene ===== */
.viz3d-transform .tf-glow{ position:absolute; right:20%; top:28%; width:260px; height:240px; transform:translate(50%,-50%);
  background:radial-gradient(circle,rgba(214,138,46,0.16),transparent 62%); filter:blur(6px); pointer-events:none; }

/* OLD system lower-left */
.tf-old{ position:absolute; left:11%; top:56%; transform-style:preserve-3d; }
.tf-rack{ position:relative; width:52px; transform:translateZ(18px) rotateY(16deg); transform-style:preserve-3d; }
.tf-rack span{ display:block; height:11px; margin-bottom:4px; border-radius:3px;
  background:linear-gradient(90deg,#5A5560,#3E3A44); border:1px solid rgba(0,0,0,0.3); box-shadow:0 3px 7px rgba(0,0,0,0.4);
  animation:tf-fade 4s ease-in-out infinite; }
.tf-rack span:nth-child(2){ animation-delay:0.4s; } .tf-rack span:nth-child(3){ animation-delay:0.8s; } .tf-rack span:nth-child(4){ animation-delay:1.2s; }
@keyframes tf-fade{ 0%,100%{ opacity:0.75; } 50%{ opacity:0.35; } }
.tf-rack-new span{ background:linear-gradient(90deg,#8FCB4E,#639922); border-color:rgba(180,227,138,0.4);
  box-shadow:0 3px 9px rgba(0,0,0,0.4),0 0 12px rgba(124,179,66,0.5); animation:tf-boot 4s ease-in-out infinite; }
.tf-rack-new span:nth-child(1){ animation-delay:0s;} .tf-rack-new span:nth-child(2){ animation-delay:0.5s;} .tf-rack-new span:nth-child(3){ animation-delay:1s;} .tf-rack-new span:nth-child(4){ animation-delay:1.5s;}
@keyframes tf-boot{ 0%,100%{ opacity:0.4; box-shadow:0 3px 9px rgba(0,0,0,0.4),0 0 4px rgba(124,179,66,0.3);} 50%{ opacity:1; box-shadow:0 3px 9px rgba(0,0,0,0.4),0 0 16px rgba(124,179,66,0.7);} }

.tf-new{ position:absolute; right:12%; top:26%; transform-style:preserve-3d; }
.tf-rack-new{ transform:translateZ(26px) rotateY(-16deg); }

.tf-tag{ position:absolute; top:64px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.4px; white-space:nowrap; }
.tf-tag-old{ color:#8A8290; } .tf-tag-new{ color:#A6D66A; }
.tf-sub{ position:absolute; top:77px; left:50%; transform:translateX(-50%); font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:10px; color:#7E7684; white-space:nowrap; }
.tf-sub-new{ color:#A6D66A; }

/* diagonal migration bridge */
.tf-bridge{ position:absolute; left:26%; top:38%; width:130px; height:90px; transform:translateZ(20px) rotate(-24deg); }
.tf-stream{ position:absolute; left:0; top:44px; width:100%; height:3px; border-radius:2px;
  background:linear-gradient(90deg,rgba(138,130,144,0.4),rgba(214,138,46,0.6),rgba(124,179,66,0.6)); box-shadow:0 0 10px rgba(214,138,46,0.4); }
.tf-packet{ position:absolute; top:41px; width:9px; height:9px; border-radius:2px; box-shadow:0 0 10px currentColor; }
.tf-p1{ background:#D68A2E; color:#D68A2E; animation:tf-cross 2.4s linear infinite; }
.tf-p2{ background:#E05A3F; color:#E05A3F; animation:tf-cross 2.4s linear infinite 0.6s; }
.tf-p3{ background:#7CB342; color:#7CB342; animation:tf-cross 2.4s linear infinite 1.2s; }
.tf-p4{ background:#D68A2E; color:#D68A2E; animation:tf-cross 2.4s linear infinite 1.8s; }
@keyframes tf-cross{ 0%{ left:0; opacity:0; transform:scale(0.6);} 12%{opacity:1; transform:scale(1);} 88%{opacity:1;} 100%{ left:100%; opacity:0; transform:scale(0.6);} }
.tf-bridge-label{ position:absolute; left:50%; top:8px; transform:translateX(-50%) rotate(24deg); font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:2px; color:#D68A2E; white-space:nowrap; }

/* continuity meter */
.tf-meter{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; z-index:5; }
.tf-meter-label{ font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:1.5px; color:#948C9A; }
.tf-meter-bar{ width:150px; height:6px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
.tf-meter-bar i{ display:block; height:100%; width:100%; border-radius:3px; background:linear-gradient(90deg,#639922,#8FCB4E);
  box-shadow:0 0 10px rgba(124,179,66,0.6); animation:tf-uptime 3s ease-in-out infinite; }
@keyframes tf-uptime{ 0%,100%{ opacity:0.8; } 50%{ opacity:1; } }
.tf-meter-val{ font-family:'JetBrains Mono',monospace; font-size:8px; color:#A6D66A; }

/* ===== MIGRATION — layered stacks + validation gate (refined) ===== */
.viz3d-migration .mg-glow{ position:absolute; left:50%; top:44%; width:300px; height:250px; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(124,179,66,0.13),transparent 62%); filter:blur(8px); pointer-events:none; }

.mg-side{ position:absolute; top:49%; width:116px; transform-style:preserve-3d; }
.mg-source{ left:7%; transform:translateY(-50%) translateZ(14px) rotateY(20deg); }
.mg-target{ right:7%; transform:translateY(-50%) translateZ(26px) rotateY(-20deg); }

.mg-layer{ position:relative; height:23px; margin-bottom:6px; border-radius:5px; display:flex; align-items:center; padding-left:10px;
  font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:1.2px;
  border:1px solid rgba(0,0,0,0.28); box-shadow:0 5px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -1px 0 rgba(0,0,0,0.15); }
.mg-source .mg-layer{ background:linear-gradient(150deg,#524D5A,#38343F); color:#B8B0BE; }
.mg-l1{ animation:mg-dim 6.5s ease-in-out infinite 0s; }
.mg-l2{ animation:mg-dim 6.5s ease-in-out infinite 0.5s; }
.mg-l3{ animation:mg-dim 6.5s ease-in-out infinite 1s; }
.mg-l4{ animation:mg-dim 6.5s ease-in-out infinite 1.5s; }
@keyframes mg-dim{ 0%,38%{ opacity:1; } 58%,100%{ opacity:0.4; } }

.mg-target .mg-layer{ color:#0F1A24; font-weight:600; text-shadow:0 1px 0 rgba(255,255,255,0.25); }
.mg-t1{ background:linear-gradient(150deg,#9BD65E,#639922); animation:mg-light 6.5s ease-in-out infinite 2s; }
.mg-t2{ background:linear-gradient(150deg,#EDAB4E,#D68A2E); animation:mg-light 6.5s ease-in-out infinite 2.5s; }
.mg-t3{ background:linear-gradient(150deg,#EC7BA0,#D4537E); color:#fff; animation:mg-light 6.5s ease-in-out infinite 3s; }
.mg-t4{ background:linear-gradient(150deg,#7CB4D2,#48708A); color:#fff; animation:mg-light 6.5s ease-in-out infinite 3.5s; }
@keyframes mg-light{ 0%,28%{ opacity:0.28; filter:saturate(0.35);} 52%,100%{ opacity:1; filter:saturate(1); box-shadow:0 5px 12px rgba(0,0,0,0.4),0 0 14px rgba(124,179,66,0.28),inset 0 1px 0 rgba(255,255,255,0.3);} }

.mg-base{ margin-top:8px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:2.5px; color:#948C9A; }
.mg-base-new{ color:#A6D66A; }

.mg-gate{ position:absolute; left:50%; top:43%; transform:translate(-50%,-50%) translateZ(44px); text-align:center; }
.mg-gate-ring{ width:50px; height:50px; border-radius:50%; margin:0 auto; border:2.5px solid var(--v-green);
  border-right-color:var(--v-saffron); box-shadow:0 0 24px rgba(124,179,66,0.55),inset 0 0 12px rgba(124,179,66,0.15); animation:v3spin 6s linear infinite; }
.mg-gate-check{ position:absolute; left:50%; top:25px; width:13px; height:6px; transform:translate(-50%,-50%) rotate(-45deg);
  border-left:2.8px solid #CDEFA8; border-bottom:2.8px solid #CDEFA8; }
.mg-gate-label{ margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:1.8px; color:#A6D66A; white-space:nowrap; }

.mg-flow{ position:absolute; top:43%; width:8px; height:8px; border-radius:2px; transform:translateZ(32px); box-shadow:0 0 12px currentColor; }
.mg-f1{ background:#9BD65E; color:#9BD65E; animation:mg-cross 3.2s ease-in-out infinite; }
.mg-f2{ background:#EDAB4E; color:#EDAB4E; animation:mg-cross 3.2s ease-in-out infinite 1.05s; }
.mg-f3{ background:#EC7BA0; color:#EC7BA0; animation:mg-cross 3.2s ease-in-out infinite 2.1s; }
@keyframes mg-cross{ 0%{ left:22%; opacity:0; transform:translateZ(32px) scale(0.6);} 12%{ opacity:1; transform:translateZ(32px) scale(1);} 46%{ left:47%; } 54%{ left:53%; } 88%{ opacity:1;} 100%{ left:78%; opacity:0; transform:translateZ(32px) scale(0.6);} }

/* ===== MIGRATION FLIP CARD ===== */
.viz3d-flip{ width:100%; perspective:1600px; cursor:pointer; outline:none; }
.viz3d-flip-inner{ position:relative; transition:transform 0.8s cubic-bezier(0.4,0.15,0.2,1); transform-style:preserve-3d; }
.viz3d-flip:hover .viz3d-flip-inner,
.viz3d-flip:focus .viz3d-flip-inner,
.viz3d-flip.is-flipped .viz3d-flip-inner{ transform:rotateY(180deg); }
.viz3d-flip-front,.viz3d-flip-back{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.viz3d-flip-back{ position:absolute; inset:0; transform:rotateY(180deg); }
.viz3d-flip-front{ position:relative; }

.viz3d-flip-hint{ padding:11px 20px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.2px;
  color:#9A93A0; border-top:1px solid rgba(255,255,255,0.05); text-align:center;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.02),transparent); }

/* regulated back-side accent tweaks */
.mg-gate-arrow{ position:absolute; left:50%; top:23px; width:0; height:0; transform:translate(-50%,-50%);
  border-left:9px solid var(--v-green); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.viz3d-migration-reg .mg-gate-ring{ border-color:var(--v-green); border-right-color:var(--v-mangal); box-shadow:0 0 22px rgba(224,90,63,0.4); }
.v3-live-reg{ background:var(--v-mangal); box-shadow:0 0 10px var(--v-mangal); }
.mg-glow-reg{ background:radial-gradient(circle,rgba(224,90,63,0.12),transparent 62%) !important; }
.mg-seal{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:5;
  font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:2px; color:#A6D66A;
  padding:4px 12px; border:1px solid rgba(124,179,66,0.3); border-radius:20px; background:rgba(124,179,66,0.08); }

@media (prefers-reduced-motion:reduce){ .viz3d-flip-inner{ transition:none; } }

/* ===== AUTOMATION & AI — neural core, futuristic ===== */
.viz3d-ai .ai-glow{ position:absolute; left:50%; top:46%; width:320px; height:300px; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(214,138,46,0.2),transparent 60%); filter:blur(8px); pointer-events:none; }
/* futuristic scanning sweep */
.ai-scan{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(60% 80% at 50% 45%,#000,transparent 75%); mask-image:radial-gradient(60% 80% at 50% 45%,#000,transparent 75%); }
.ai-scan::before{ content:''; position:absolute; left:-30%; top:0; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(124,179,66,0.10),transparent); animation:ai-sweep 4s linear infinite; }
@keyframes ai-sweep{ 0%{ left:-30%;} 100%{ left:110%;} }

/* neural core */
.ai-neural{ position:absolute; left:50%; top:46%; width:150px; height:150px; transform:translate(-50%,-50%) translateZ(40px); transform-style:preserve-3d; }
.ai-halo{ position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle,rgba(214,138,46,0.35),transparent 62%); animation:ai-breathe 3s ease-in-out infinite; }
.ai-net{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ai-net .ai-synapses line{ stroke-dasharray:3 4; animation:ai-flow 2s linear infinite; }
@keyframes ai-flow{ to{ stroke-dashoffset:-14; } }
.ai-nodes circle{ filter:drop-shadow(0 0 4px rgba(240,192,112,0.8)); }
.ai-nodes circle:nth-child(odd){ animation:ai-nodepulse 2.4s ease-in-out infinite; }
.ai-nodes circle:nth-child(even){ animation:ai-nodepulse 2.4s ease-in-out infinite 1.2s; }
@keyframes ai-nodepulse{ 0%,100%{ opacity:0.6; r:3.5;} 50%{ opacity:1; r:4.5;} }
.ai-pulse-ring{ transform-origin:80px 80px; animation:ai-ring 2.6s ease-out infinite; }
@keyframes ai-ring{ 0%{ r:14; opacity:0.8;} 100%{ r:64; opacity:0; } }
.ai-brain-core{ position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#F4CE8C,#B87418); box-shadow:0 0 30px rgba(214,138,46,0.85),inset 0 2px 6px rgba(255,255,255,0.6); animation:ai-breathe 2.2s ease-in-out infinite; }
@keyframes ai-breathe{ 0%,100%{ transform:scale(0.9); opacity:0.88;} 50%{ transform:scale(1.1); opacity:1;} }
/* signals travelling synapses */
.ai-signal{ position:absolute; width:5px; height:5px; border-radius:50%; background:#7CB342; box-shadow:0 0 8px #7CB342; }
.ai-sig1{ left:50%; top:50%; animation:ai-sig1 2.2s ease-in-out infinite; }
.ai-sig2{ left:50%; top:50%; animation:ai-sig2 2.6s ease-in-out infinite 0.6s; }
.ai-sig3{ left:50%; top:50%; animation:ai-sig3 2.4s ease-in-out infinite 1.2s; }
@keyframes ai-sig1{ 0%{ transform:translate(-2px,-2px); opacity:0;} 15%{opacity:1;} 100%{ transform:translate(-52px,-42px); opacity:0;} }
@keyframes ai-sig2{ 0%{ transform:translate(-2px,-2px); opacity:0;} 15%{opacity:1;} 100%{ transform:translate(52px,38px); opacity:0;} }
@keyframes ai-sig3{ 0%{ transform:translate(-2px,-2px); opacity:0;} 15%{opacity:1;} 100%{ transform:translate(54px,-40px); opacity:0;} }

/* inputs left */
.ai-in{ position:absolute; left:6%; top:46%; transform:translateY(-50%) translateZ(18px); }
.ai-manual{ display:block; width:20px; height:14px; margin-bottom:5px; border-radius:3px; background:linear-gradient(150deg,#5A5560,#3E3A44); border:1px solid rgba(0,0,0,0.3); box-shadow:0 3px 7px rgba(0,0,0,0.35); animation:ai-consume 3s ease-in-out infinite; }
.ai-manual:nth-child(2){ animation-delay:0.5s; } .ai-manual:nth-child(3){ animation-delay:1s; }
@keyframes ai-consume{ 0%,100%{ opacity:0.8; transform:translateX(0);} 50%{ opacity:0.35; transform:translateX(10px);} }

/* outputs right — decision chip + automated actions */
.ai-out{ position:absolute; right:6%; top:46%; transform:translateY(-50%) translateZ(18px); text-align:center; }
.ai-decision{ display:block; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1px; color:#0F1A24; font-weight:600;
  background:linear-gradient(150deg,#9BD65E,#639922); padding:4px 8px; border-radius:4px; margin-bottom:6px;
  box-shadow:0 0 14px rgba(124,179,66,0.5); animation:ai-emit 3s ease-in-out infinite; }
.ai-done{ display:block; width:20px; height:14px; margin:0 auto 5px; border-radius:3px; background:linear-gradient(150deg,#9BD65E,#639922); border:1px solid rgba(180,227,138,0.4); box-shadow:0 3px 9px rgba(0,0,0,0.35),0 0 12px rgba(124,179,66,0.4); animation:ai-emit 3s ease-in-out infinite; }
.ai-done:nth-child(3){ animation-delay:0.5s; }
@keyframes ai-emit{ 0%,100%{ opacity:0.55; transform:translateX(0);} 50%{ opacity:1; transform:translateX(6px);} }

.ai-side-label{ position:absolute; top:58px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:1px; color:#8A8290; white-space:nowrap; }
.ai-side-label-done{ color:#A6D66A; }

/* ===== HR TECHNOLOGY — vertical pipeline + live dashboard ===== */
.viz3d-hr .hr-glow{ position:absolute; right:32%; top:44%; width:280px; height:250px; transform:translate(50%,-50%);
  background:radial-gradient(circle,rgba(212,83,126,0.14),transparent 62%); filter:blur(8px); pointer-events:none; }

/* vertical pipeline left */
.hr-pipe{ position:absolute; left:9%; top:18%; width:120px; height:150px; transform:translateZ(20px); }
.hr-track{ position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(#D4537E,#639922); border-radius:2px; opacity:0.5; }
.hr-stage{ position:relative; display:flex; align-items:center; gap:9px; height:33px; }
.hr-dot{ width:11px; height:11px; border-radius:50%; background:#3E3A44; border:1.5px solid #6E687A; box-shadow:0 2px 5px rgba(0,0,0,0.35); flex-shrink:0; z-index:2; }
.hr-stage span{ font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:1px; color:#948C9A; }
.hr-s1 .hr-dot{ animation:hr-lit 5s ease-in-out infinite 0s; } .hr-s1 span{ animation:hr-littxt 5s ease-in-out infinite 0s; }
.hr-s2 .hr-dot{ animation:hr-lit 5s ease-in-out infinite 1.1s; } .hr-s2 span{ animation:hr-littxt 5s ease-in-out infinite 1.1s; }
.hr-s3 .hr-dot{ animation:hr-lit 5s ease-in-out infinite 2.2s; } .hr-s3 span{ animation:hr-littxt 5s ease-in-out infinite 2.2s; }
.hr-s4 .hr-dot{ animation:hr-lit 5s ease-in-out infinite 3.3s; } .hr-s4 span{ animation:hr-littxt 5s ease-in-out infinite 3.3s; }
@keyframes hr-lit{ 0%,15%{ background:#3E3A44; box-shadow:0 2px 5px rgba(0,0,0,0.35);} 22%,40%{ background:#D4537E; border-color:#EC7BA0; box-shadow:0 0 12px rgba(212,83,126,0.7);} 60%,100%{ background:#3E3A44; } }
@keyframes hr-littxt{ 0%,15%{ color:#948C9A;} 22%,40%{ color:#EC7BA0;} 60%,100%{ color:#948C9A;} }
/* the advancing candidate token */
.hr-candidate{ position:absolute; left:4px; top:8px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#F4A0C0,#D4537E); box-shadow:0 0 12px rgba(212,83,126,0.8); z-index:3;
  animation:hr-advance 5s ease-in-out infinite; }
@keyframes hr-advance{ 0%{ top:8px;} 20%{ top:8px;} 25%{ top:41px;} 45%{ top:41px;} 50%{ top:74px;} 70%{ top:74px;} 75%{ top:107px;} 95%{ top:107px;} 100%{ top:8px; opacity:0;} }

/* data feed */
.hr-feed{ position:absolute; left:36%; top:30%; width:80px; height:80px; transform:translateZ(16px);
  border-left:1px dashed rgba(212,83,126,0.4); border-bottom:1px dashed rgba(212,83,126,0.4); border-bottom-left-radius:12px; opacity:0.6; }

/* dashboard right */
.hr-dash{ position:absolute; right:7%; top:24%; width:180px; padding:12px; border-radius:10px; transform:translateZ(28px);
  background:linear-gradient(160deg,rgba(60,52,68,0.9),rgba(42,33,48,0.9)); border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 14px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.06); }
.hr-dash-head{ display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:1px; color:#C4BCCA; margin-bottom:12px; }
.hr-dash-head span{ width:5px; height:5px; border-radius:50%; background:#7CB342; box-shadow:0 0 6px #7CB342; }
.hr-bars{ display:flex; align-items:flex-end; gap:7px; height:44px; margin-bottom:8px; }
.hr-bar{ flex:1; border-radius:3px 3px 0 0; transform-origin:bottom; }
.hr-b1{ background:linear-gradient(#9BD65E,#639922); animation:hr-grow 3s ease-in-out infinite 0s; }
.hr-b2{ background:linear-gradient(#EDAB4E,#D68A2E); animation:hr-grow 3s ease-in-out infinite 0.3s; }
.hr-b3{ background:linear-gradient(#EC7BA0,#D4537E); animation:hr-grow 3s ease-in-out infinite 0.6s; }
.hr-b4{ background:linear-gradient(#9BD65E,#639922); animation:hr-grow 3s ease-in-out infinite 0.9s; }
.hr-b5{ background:linear-gradient(#7CB4D2,#48708A); animation:hr-grow 3s ease-in-out infinite 1.2s; }
@keyframes hr-grow{ 0%,100%{ transform:scaleY(0.4);} 50%{ transform:scaleY(1);} }
.hr-trend{ width:100%; height:26px; display:block; }
.hr-trend polyline{ stroke-dasharray:160; stroke-dashoffset:160; animation:hr-draw 3s ease-in-out infinite; }
@keyframes hr-draw{ 0%{ stroke-dashoffset:160;} 60%,100%{ stroke-dashoffset:0;} }
.hr-metric{ display:flex; gap:6px; margin-top:8px; }
.hr-metric b{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.12); }
.hr-metric b:nth-child(1){ background:rgba(124,179,66,0.5);} .hr-metric b:nth-child(2){ background:rgba(214,138,46,0.5);}

/* HR refinements */
.viz3d-hr .hr-glow{ filter:blur(10px) !important; }
.hr-candidate::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(212,83,126,0.5); animation:hr-cring 1.6s ease-out infinite; }
@keyframes hr-cring{ 0%{ transform:scale(1); opacity:0.8;} 100%{ transform:scale(2.2); opacity:0;} }
.hr-dash{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.hr-dash-head span{ animation:v3blink 1.8s ease-in-out infinite; }
.hr-bar{ box-shadow:0 0 8px rgba(0,0,0,0.3); }
.hr-trend polyline{ filter:drop-shadow(0 0 3px rgba(124,179,66,0.6)); }

/* ensure visuals never cause page overflow (clip strictly to the panel) */
.viz3d{ contain:layout paint; overflow:clip; }
.viz3d-stage{ overflow:hidden !important; }
.viz3d, .line-viz-3d{ max-width:100%; }

.line-viz-3d{ overflow:clip; }

/* ===== CLINICAL / CSV VALIDATION ===== */
.viz3d-clinical .cl-glow{ position:absolute; left:50%; top:52%; width:280px; height:230px; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(124,179,66,0.14),transparent 62%); filter:blur(8px); pointer-events:none; }
.cl-glow-back{ background:radial-gradient(circle,rgba(214,138,46,0.16),transparent 62%) !important; }

/* FRONT: ascending validation staircase */
.cl-step{ position:absolute; bottom:26%; transform-style:preserve-3d; text-align:center; }
.cl-iq{ left:16%; } .cl-oq{ left:42%; } .cl-pq{ left:68%; }
.cl-block{ width:46px; height:46px; margin:0 auto; border-radius:8px; transform:translateZ(20px) rotateX(6deg);
  background:linear-gradient(155deg,#F1EDE5,#CFC6BB); border:1px solid rgba(0,0,0,0.22);
  box-shadow:0 10px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.5); position:relative; }
.cl-iq .cl-block{ height:40px; } .cl-oq .cl-block{ height:66px; margin-top:-20px; } .cl-pq .cl-block{ height:92px; margin-top:-46px; }
.cl-block::after{ content:''; position:absolute; left:8px; right:8px; top:8px; height:3px; border-radius:2px; background:var(--v-green); opacity:0.6;
  box-shadow:0 7px 0 rgba(99,153,34,0.4),0 14px 0 rgba(99,153,34,0.25); }
.cl-iq .cl-block{ animation:cl-fill 5s ease-in-out infinite 0s; }
.cl-oq .cl-block{ animation:cl-fill 5s ease-in-out infinite 0.6s; }
.cl-pq .cl-block{ animation:cl-fill 5s ease-in-out infinite 1.2s; }
@keyframes cl-fill{ 0%,20%{ border-color:rgba(0,0,0,0.22);} 40%,100%{ border-color:var(--v-green); box-shadow:0 10px 20px rgba(0,0,0,0.4),0 0 16px rgba(124,179,66,0.4),inset 0 1px 0 rgba(255,255,255,0.5);} }
.cl-lbl{ display:block; margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.5px; color:#C4BCCA; }
.cl-sub{ display:block; font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:9px; color:#8A8290; }
/* validated seal top-right */
.cl-seal{ position:absolute; right:12%; top:16%; width:52px; height:52px; transform:translateZ(40px); }
.cl-seal-ring{ position:absolute; inset:0; border-radius:50%; border:2.5px solid var(--v-green); border-right-color:var(--v-saffron); box-shadow:0 0 22px rgba(124,179,66,0.5); animation:v3spin 6s linear infinite; }
.cl-seal-check{ position:absolute; left:50%; top:26px; width:14px; height:7px; transform:translate(-50%,-50%) rotate(-45deg); border-left:3px solid #CDEFA8; border-bottom:3px solid #CDEFA8; }
.cl-seal-label{ position:absolute; right:12%; top:calc(16% + 58px); width:52px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:1.5px; color:#A6D66A; transform:translateZ(40px); }
.cl-riser{ position:absolute; left:16%; bottom:26%; width:56%; height:2px; background:linear-gradient(90deg,var(--v-green),var(--v-saffron)); opacity:0.4; transform:translateZ(10px) rotate(-12deg); transform-origin:left; }

/* BACK: compliance core + orbiting platforms */
.cl-core{ position:absolute; left:50%; top:48%; width:76px; height:76px; transform:translate(-50%,-50%) translateZ(38px); }
.cl-core-halo{ position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle,rgba(214,138,46,0.4),transparent 66%); animation:ai-breathe 3s ease-in-out infinite; }
.cl-core-body{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 38% 32%,#F0C070,#B87418); box-shadow:0 0 28px rgba(214,138,46,0.7),inset 0 2px 6px rgba(255,255,255,0.5);
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; color:#2A2130; letter-spacing:0.5px; }
.cl-ring{ position:absolute; left:50%; top:48%; width:230px; height:230px; margin:-115px 0 0 -115px; border-radius:50%; border:1px dashed rgba(154,147,160,0.35); transform:translateZ(20px) rotateX(70deg); animation:v3spin 20s linear infinite; }
.cl-plat{ position:absolute; left:50%; top:48%; transform-style:preserve-3d;
  font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:0.5px; color:#0F1A24; font-weight:600;
  background:linear-gradient(150deg,#F1EDE5,#D8CFC4); padding:4px 9px; border-radius:20px; white-space:nowrap;
  border:1px solid rgba(0,0,0,0.15); box-shadow:0 4px 10px rgba(0,0,0,0.35); }
.cl-p1{ transform:translate(-50%,-50%) translate(-118px,-30px) translateZ(30px); animation:cl-float 4s ease-in-out infinite 0s; }
.cl-p2{ transform:translate(-50%,-50%) translate(70px,-58px) translateZ(30px); animation:cl-float 4s ease-in-out infinite 0.8s; }
.cl-p3{ transform:translate(-50%,-50%) translate(96px,34px) translateZ(30px); animation:cl-float 4s ease-in-out infinite 1.6s; }
.cl-p4{ transform:translate(-50%,-50%) translate(-104px,52px) translateZ(30px); animation:cl-float 4s ease-in-out infinite 2.4s; }
.cl-p5{ transform:translate(-50%,-50%) translate(-16px,84px) translateZ(30px); animation:cl-float 4s ease-in-out infinite 3.2s; }
@keyframes cl-float{ 0%,100%{ margin-top:0;} 50%{ margin-top:-6px;} }
.v3-live-c{ background:var(--v-saffron); box-shadow:0 0 10px var(--v-saffron); }


/* ===== TALENT VISUALS (refined, staged storytelling) ===== */
.tal-glow{ position:absolute; left:50%; top:48%; width:300px; height:240px; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(124,179,66,0.13),transparent 62%); filter:blur(8px); pointer-events:none; }
.tal-glow-rose{ background:radial-gradient(circle,rgba(212,83,126,0.14),transparent 62%) !important; }
.tal-glow-saffron{ background:radial-gradient(circle,rgba(214,138,46,0.15),transparent 62%) !important; }
/* shared stage tags + captions */
.emp-tag,.agc-tag,.job-tag{ position:absolute; left:50%; top:44px; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:1.2px; color:#C4BCCA; white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.emp-cap,.agc-cap,.job-cap{ position:absolute; left:50%; top:57px; transform:translateX(-50%); font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:10px; color:#8E8694; white-space:nowrap; }
.emp-tag-done,.agc-tag-done,.job-tag-done{ color:#A6D66A; } .emp-cap-done,.agc-cap-done,.job-cap-done{ color:#A6D66A; }
.emp-tag-mid{ color:#EDAB4E; } .emp-cap-mid{ color:#D9A45A; }

/* EMPLOYERS — role -> screened pool -> placed */
.emp-role{ position:absolute; left:13%; top:44%; transform:translate(-50%,-50%) translateZ(28px); }
.emp-role-slot{ width:48px; height:48px; border-radius:10px; border:2px dashed var(--v-green); background:rgba(124,179,66,0.07); box-shadow:0 0 18px rgba(124,179,66,0.3),inset 0 0 12px rgba(124,179,66,0.1); display:flex; align-items:center; justify-content:center; }
.emp-role-inner{ width:16px; height:16px; border-radius:50%; border:1.5px dashed rgba(124,179,66,0.6); animation:v3spin 6s linear infinite; }
.emp-pool{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) translateZ(30px); width:70px; height:70px; }
.emp-cand{ position:absolute; width:15px; height:15px; border-radius:50%; background:linear-gradient(150deg,#6A6570,#46424D); box-shadow:0 3px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15); }
.emp-c1{ left:6px; top:6px; animation:emp-bob 3s ease-in-out infinite 0s; }
.emp-c2{ right:6px; top:2px; animation:emp-bob 3s ease-in-out infinite 0.6s; }
.emp-c3{ left:4px; bottom:6px; animation:emp-bob 3s ease-in-out infinite 1.2s; }
.emp-c4{ right:4px; bottom:8px; animation:emp-bob 3s ease-in-out infinite 1.8s; }
@keyframes emp-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.emp-screen-ring{ position:absolute; left:50%; top:50%; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%; border:1.5px solid rgba(237,171,78,0.5); box-shadow:0 0 16px rgba(237,171,78,0.3); animation:emp-scan 3.5s ease-in-out infinite; }
@keyframes emp-scan{ 0%,100%{ transform:scale(0.9); opacity:0.4;} 50%{ transform:scale(1.05); opacity:0.8;} }
.emp-hire{ position:absolute; right:13%; top:44%; transform:translate(50%,-50%) translateZ(28px); }
.emp-hire-seat{ position:relative; width:48px; height:48px; border-radius:10px; background:linear-gradient(155deg,#9BD65E,#639922); box-shadow:0 8px 18px rgba(0,0,0,0.4),0 0 18px rgba(124,179,66,0.5),inset 0 1px 0 rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; }
.emp-hire-person{ width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#FDF7EC,#D8CFC4); box-shadow:0 2px 5px rgba(0,0,0,0.3); }
.emp-hire-check{ position:absolute; right:-6px; bottom:-6px; width:18px; height:18px; border-radius:50%; background:#2A2130; border:1.5px solid var(--v-green); display:flex; align-items:center; justify-content:center; }
.emp-hire-check::after{ content:''; width:7px; height:4px; border-left:2px solid var(--v-green); border-bottom:2px solid var(--v-green); transform:translateY(-1px) rotate(-45deg); }
.emp-flow{ position:absolute; top:44%; width:9px; height:9px; border-radius:50%; background:var(--v-green); box-shadow:0 0 12px var(--v-green); transform:translateZ(24px); animation:emp-travel 4s ease-in-out infinite; }
@keyframes emp-travel{ 0%{ left:50%; opacity:0;} 20%{opacity:1;} 80%{opacity:1;} 100%{ left:83%; opacity:0;} }

/* AGENCIES — two hubs, two-way exchange, central match node */
.agc-hub{ position:absolute; top:42%; transform:translateY(-50%) translateZ(26px); text-align:center; }
.agc-left{ left:11%; } .agc-right{ right:11%; }
.agc-hub-face{ width:56px; height:52px; border-radius:10px; background:linear-gradient(155deg,#524D5A,#38343F); border:1px solid rgba(255,255,255,0.1); box-shadow:0 8px 18px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; }
.agc-hub-face-r{ border-color:rgba(212,83,126,0.4); box-shadow:0 8px 18px rgba(0,0,0,0.4),0 0 16px rgba(212,83,126,0.3),inset 0 1px 0 rgba(255,255,255,0.12); }
.agc-hub-dots{ display:flex; gap:5px; }
.agc-hub-dots span{ width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#EC7BA0,#D4537E); box-shadow:0 0 6px rgba(212,83,126,0.5); animation:emp-bob 2.6s ease-in-out infinite; }
.agc-hub-dots span:nth-child(2){ animation-delay:0.4s; } .agc-hub-dots span:nth-child(3){ animation-delay:0.8s; }
.agc-hub-slots{ display:flex; gap:5px; }
.agc-hub-slots span{ width:9px; height:9px; border-radius:2px; border:1.5px dashed rgba(124,179,66,0.6); animation:job-pulse 2.6s ease-in-out infinite; }
.agc-hub-slots span:nth-child(2){ animation-delay:0.4s; } .agc-hub-slots span:nth-child(3){ animation-delay:0.8s; }
.agc-bridge{ position:absolute; left:26%; right:26%; top:42%; height:2px; transform:translateZ(14px); background:linear-gradient(90deg,rgba(212,83,126,0.5),rgba(124,179,66,0.5)); }
.agc-packet{ position:absolute; top:42%; width:9px; height:9px; border-radius:50%; transform:translateZ(20px); box-shadow:0 0 10px currentColor; }
.agc-pk1{ background:#EC7BA0; color:#EC7BA0; animation:agc-toright 3s ease-in-out infinite; }
.agc-pk2{ background:#9BD65E; color:#9BD65E; animation:agc-toleft 3s ease-in-out infinite 1.5s; }
.agc-pk3{ background:#EC7BA0; color:#EC7BA0; animation:agc-toright 3s ease-in-out infinite 0.9s; }
@keyframes agc-toright{ 0%{ left:26%; opacity:0;} 15%{opacity:1;} 45%{ left:48%;} 55%{ left:52%;} 85%{opacity:1;} 100%{ left:74%; opacity:0;} }
@keyframes agc-toleft{ 0%{ left:74%; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{ left:26%; opacity:0;} }
.agc-node{ position:absolute; left:50%; top:42%; width:44px; height:44px; margin:-22px 0 0 -22px; transform:translateZ(34px); display:flex; align-items:center; justify-content:center; }
.agc-node-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--v-green); border-right-color:#D4537E; box-shadow:0 0 18px rgba(124,179,66,0.4); animation:v3spin 5s linear infinite; }
.agc-node span{ font-family:'JetBrains Mono',monospace; font-size:6.5px; letter-spacing:1px; color:#CDEFA8; }
.agc-base{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:2px; color:#A6D66A; }

/* JOBSEEKERS — you, prepared -> matched to best-fit roles */
.job-you{ position:absolute; left:15%; top:44%; transform:translate(-50%,-50%) translateZ(30px); text-align:center; }
.job-avatar{ position:relative; width:44px; height:44px; margin:0 auto; border-radius:50%; background:radial-gradient(circle at 38% 32%,#F4CE8C,#B87418); box-shadow:0 0 22px rgba(214,138,46,0.6),inset 0 2px 5px rgba(255,255,255,0.5); }
.job-avatar-ring{ position:absolute; inset:-7px; border-radius:50%; border:1.5px dashed rgba(214,138,46,0.6); animation:v3spin 8s linear infinite; }
.job-beam{ position:absolute; left:22%; top:44%; width:34%; height:2px; transform:translateZ(14px); background:linear-gradient(90deg,rgba(214,138,46,0.7),rgba(124,179,66,0.2)); }
.job-spark{ position:absolute; top:44%; width:7px; height:7px; border-radius:50%; background:var(--v-saffron); box-shadow:0 0 10px var(--v-saffron); transform:translateZ(20px); }
.job-s1{ animation:job-fly 2.4s ease-in-out infinite; } .job-s2{ animation:job-fly 2.4s ease-in-out infinite 1.2s; }
@keyframes job-fly{ 0%{ left:22%; opacity:0;} 20%{opacity:1;} 100%{ left:56%; opacity:0;} }
.job-opps{ position:absolute; right:12%; top:44%; transform:translate(0,-50%) translateZ(28px); }
.job-opp{ position:relative; width:96px; height:26px; margin-bottom:8px; border-radius:6px; display:flex; align-items:center; padding-left:10px;
  background:linear-gradient(150deg,#524D5A,#38343F); border:1px solid rgba(255,255,255,0.08); box-shadow:0 5px 12px rgba(0,0,0,0.35);
  font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:1px; color:#B8B0BE; }
.job-fit{ position:absolute; right:8px; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.15); }
.job-o1{ animation:job-dim 4s ease-in-out infinite 0s; } .job-o3{ animation:job-dim 4s ease-in-out infinite 0.6s; }
@keyframes job-dim{ 0%,100%{ opacity:0.7;} 50%{ opacity:0.9;} }
.job-best{ background:linear-gradient(150deg,#9BD65E,#639922); color:#0F1A24; font-weight:600; border-color:rgba(180,227,138,0.5); box-shadow:0 6px 14px rgba(0,0,0,0.35),0 0 18px rgba(124,179,66,0.5); animation:job-glow 3s ease-in-out infinite; }
.job-best .job-fit{ background:#2A2130; }
.job-best .job-fit::after{ content:''; position:absolute; left:1.5px; top:2.5px; width:4px; height:2px; border-left:1.5px solid #9BD65E; border-bottom:1.5px solid #9BD65E; transform:rotate(-45deg); }
@keyframes job-glow{ 0%,100%{ box-shadow:0 6px 14px rgba(0,0,0,0.35),0 0 12px rgba(124,179,66,0.4);} 50%{ box-shadow:0 6px 14px rgba(0,0,0,0.35),0 0 22px rgba(124,179,66,0.7);} }
.job-tag{ top:52px !important; } .job-tag-done{ position:absolute; left:50%; top:96px; transform:translateX(-50%); font-family:"JetBrains Mono",monospace; font-size:7.5px; letter-spacing:1.2px; color:#A6D66A; white-space:nowrap; }
.job-cap-done{ position:absolute; left:50%; top:108px; transform:translateX(-50%); font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:10px; color:#A6D66A; white-space:nowrap; }

/* ===== ELEVATION PASS — match the hero's refined standard ===== */
/* Dimensional highlight on all circular nodes (glass-orb quality) */
.v3-unit::after, .v3-node::after, .svcb-node::after{
  content:''; position:absolute; left:28%; top:20%; width:30%; height:30%; border-radius:50%;
  background:rgba(255,255,255,0.75); filter:blur(0.5px); pointer-events:none; }
.v3-unit, .v3-node, .svcb-node{ position:relative; }

/* Richer inner shading on cores */
.v3-hub-core, .svcb-core{ box-shadow:0 0 26px rgba(124,179,66,0.8), inset 0 2px 7px rgba(255,255,255,0.75), inset 0 -5px 12px rgba(40,70,10,0.45) !important; }

/* Softer, more refined panel depth */
.v3-panel, .svc-banner{ box-shadow:0 24px 60px rgba(15,10,20,0.42), inset 0 1px 0 rgba(255,255,255,0.07); }

/* Subtle ambient drift behind the scenes (matches hero aurora, cheap) */
.v3-panel::after, .svc-banner::after{
  content:''; position:absolute; top:-25%; right:-12%; width:55%; height:65%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(124,179,66,0.10), transparent 62%); filter:blur(16px);
  animation:v3-ambient 11s ease-in-out infinite; }
@keyframes v3-ambient{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.6;} 50%{ transform:translate(-5%,4%) scale(1.09); opacity:1;} }

/* GPU-friendly: promote animated layers */
.v3-hub-core,.v3-hub-ring,.v3-hub-glow,.svcb-core{ will-change:transform,opacity; }

@media (prefers-reduced-motion:reduce){ .v3-panel::after,.svc-banner::after{ animation:none; } }