.hero-agent { position: absolute; right: 5px; top: 126px; width: min(31vw, 430px); aspect-ratio: 6 / 5; pointer-events: none; z-index: 0; isolation: isolate; }
.hero-agent::before { content: ''; position: absolute; inset: 12% 8% 1%; border-radius: 50%; background: radial-gradient(circle, rgba(0,242,255,.2), rgba(143,107,255,.09) 45%, transparent 72%); filter: blur(22px); }
.hero-agent::after { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(0,242,255,.22); border-radius: 50%; transform: rotateX(70deg) rotateZ(-17deg); box-shadow: 0 0 34px rgba(0,242,255,.12), inset 0 0 30px rgba(143,107,255,.08); }
.hero-agent img { width: 100%; height: 100%; object-fit: contain; position: relative; filter: drop-shadow(0 0 40px rgba(0,242,255,.16)); animation: agentFloat 7s ease-in-out infinite; }
.hero-agent-label { position: absolute; bottom: 0; left: 10%; padding: 7px 11px; border: 1px solid rgba(0,242,255,.35); border-radius: 999px; color: #bff9ff; background: rgba(4,8,17,.82); font: 10px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 0 24px rgba(0,242,255,.13); }
@keyframes agentFloat { 50% { transform: translateY(-12px); } }