/* ── 3D Hologram Avatar ─────────────────────────────────── */
.hero-3d-wrap {
  position: absolute;
  right: -60px; top: 50%; transform: translateY(-50%);
  width: 340px; height: 420px;
  pointer-events: none; z-index: 1;
  transition: opacity .1s, transform .1s;
}
.hero-content { position: relative; z-index: 3; }
#ubt-hero { flex-direction: row; justify-content: space-between; text-align: left; align-items: center; gap: 40px; max-width: 1200px; margin: 0 auto; }
#ubt-hero .hero-ctas { justify-content: flex-start; }
#ubt-hero .hero-typing-wrap { text-align: left; }
#ubt-hero .hero-visual { display: none; }

/* Hologram rings */
.hero-hologram-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px solid;
  transition: transform .1s;
}
.ring-1 { width: 280px; height: 280px; border-color: rgba(0,212,255,.15); animation: ringPulse1 3s ease-in-out infinite; }
.ring-2 { width: 360px; height: 360px; border-color: rgba(42,127,255,.1);  animation: ringPulse1 4s ease-in-out infinite reverse; }
.ring-3 { width: 440px; height: 440px; border-color: rgba(123,92,255,.07); animation: ringPulse1 5s ease-in-out infinite; }
@keyframes ringPulse1 { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* Hologram scan effect */
.hologram-scan {
  position: absolute; left: 10%; width: 80%; height: 2px;
  background: linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity: .4; pointer-events: none;
}
.hologram-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,212,255,.03) 3px,rgba(0,212,255,.03) 4px);
  border-radius: 4px;
}
.hero-avatar-silhouette {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 200px; height: 340px;
  filter: drop-shadow(0 0 20px rgba(0,212,255,.4)) drop-shadow(0 0 40px rgba(42,127,255,.2));
}
.avatar-svg { width: 100%; height: 100%; transition: transform .3s; }
.hero-avatar-glow {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 60px;
  background: radial-gradient(ellipse,rgba(0,212,255,.25),transparent 70%);
  filter: blur(12px);
}
.hologram-grid-floor {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) perspective(200px) rotateX(75deg);
  width: 300px; height: 120px;
  background-image: linear-gradient(rgba(0,212,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.08) 1px,transparent 1px);
  background-size: 24px 24px;
}

/* Floating data tags */
.floating-data-tags { position: absolute; inset: 0; pointer-events: none; }
.data-tag {
  position: absolute; background: rgba(7,11,26,.85); border: 1px solid rgba(0,212,255,.3);
  border-radius: 100px; padding: 5px 14px; font-size: .7rem; font-weight: 600;
  color: var(--cyan); letter-spacing: .06em; white-space: nowrap;
  box-shadow: 0 0 12px rgba(0,212,255,.15);
}
.dt-1 { top: 15%; left: -60px; }
.dt-2 { top: 45%; right: -70px; }
.dt-3 { top: 72%; left: -40px; }

/* Responsive: stack on mobile */
@media(max-width:1024px) {
  #ubt-hero { flex-direction: column; text-align: center; }
  #ubt-hero .hero-ctas { justify-content: center; }
  #ubt-hero .hero-typing-wrap { text-align: center; }
  #ubt-hero .hero-visual { display: block; }
  .hero-3d-wrap { position: relative; right: auto; top: auto; transform: none; margin: 40px auto 0; width: 260px; height: 320px; }
  .ring-1 { width: 200px; height: 200px; }
  .ring-2 { width: 260px; height: 260px; }
  .ring-3 { width: 320px; height: 320px; }
  .dt-1 { left: 0; }
  .dt-2 { right: 0; }
  .dt-3 { left: 10px; }
}
@media(max-width:640px) {
  .hero-3d-wrap { width: 200px; height: 260px; }
  .hero-avatar-silhouette { width: 160px; height: 260px; }
  .floating-data-tags { display: none; }
}