/* Make hero-banner provide perspective for the equity card */
.hero-banner {
  perspective: 1600px !important;
  perspective-origin: 30% 50% !important;
  overflow: visible !important;
}

/* ===== EQUITY CARD — premium standalone 3D floating panel ===== */
.hero-banner .hero-stat {
  /* Glassmorphism + layered gradients */
  background:
    /* Top holographic shimmer band */
    linear-gradient(135deg,
      rgba(34,197,94,0.08) 0%,
      rgba(124,92,252,0.06) 30%,
      rgba(56,189,248,0.05) 60%,
      rgba(34,197,94,0.08) 100%
    ),
    /* Deep base with depth gradient */
    linear-gradient(165deg,
      rgba(24,32,42,0.85) 0%,
      rgba(12,16,24,0.92) 40%,
      rgba(6,10,16,0.96) 100%
    ) !important;

  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;

  /* Premium border with gradient effect */
  border: 1px solid rgba(34,197,94,0.25) !important;
  border-top-color: rgba(255,255,255,0.15) !important;
  border-bottom-color: rgba(0,0,0,0.5) !important;
  border-radius: 20px !important;

  /* Premium multi-layer shadow stack */
  box-shadow:
    /* Inner top highlight (reflective surface) */
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 2px 0 rgba(255,255,255,0.06) inset,
    /* Inner bottom darkness */
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 -12px 24px -10px rgba(0,0,0,0.6) inset,
    /* Outer floating shadow stack */
    0 2px 0 rgba(255,255,255,0.02),
    0 6px 12px -2px rgba(0,0,0,0.5),
    0 16px 32px -8px rgba(0,0,0,0.6),
    0 32px 60px -16px rgba(0,0,0,0.7),
    /* Green ambient glow */
    0 24px 50px -20px rgba(34,197,94,0.5),
    /* Purple highlight halo */
    0 -8px 36px -16px rgba(124,92,252,0.35) !important;

  /* Generous padding for premium feel */
  padding: 22px 28px !important;
  min-width: 280px !important;

  /* 3D positioning & animation */
  position: relative !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transform:
    perspective(1200px)
    rotateX(var(--eq-ry, 0deg))
    rotateY(var(--eq-rx, 0deg))
    translateZ(0) !important;
  transition: transform 0.32s cubic-bezier(.22,.61,.36,1), box-shadow 0.32s !important;
  animation: equityFloat 8s ease-in-out infinite !important;

  overflow: hidden !important;
  isolation: isolate !important;
  text-align: right !important;
}

@keyframes equityFloat {
  0%, 100% {
    transform: perspective(1200px) rotateX(var(--eq-ry, 0deg)) rotateY(var(--eq-rx, 0deg)) translateY(0) translateZ(0);
  }
  50% {
    transform: perspective(1200px) rotateX(var(--eq-ry, 0deg)) rotateY(var(--eq-rx, 0deg)) translateY(-6px) translateZ(8px);
  }
}

/* Hover state — paused float, deeper depth */
.hero-banner .hero-stat:hover,
.hero-banner .hero-stat.eq-tilting {
  animation-play-state: paused !important;
  transform:
    perspective(1200px)
    rotateX(var(--eq-ry, 0deg))
    rotateY(var(--eq-rx, 0deg))
    translateZ(40px)
    translateY(-8px) !important;
  border-color: rgba(34,197,94,0.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 -14px 28px -10px rgba(0,0,0,0.7) inset,
    0 8px 16px -2px rgba(0,0,0,0.55),
    0 24px 44px -8px rgba(0,0,0,0.65),
    0 48px 80px -16px rgba(0,0,0,0.75),
    0 40px 80px -24px rgba(34,197,94,0.7),
    0 0 60px -12px rgba(124,92,252,0.45) !important;
}

/* === Animated background grid (4K feel) === */
.hero-banner .hero-stat > .eq-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,197,94,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  animation: eqGridShift 20s linear infinite;
}
@keyframes eqGridShift {
  0%   { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}

/* === Animated holographic gradient overlay === */
.hero-banner .hero-stat > .eq-holo {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 40%,
    rgba(34,197,94,0.10) 48%,
    rgba(167,139,250,0.12) 50%,
    rgba(34,197,94,0.10) 52%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 250%;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  mix-blend-mode: screen;
  animation: eqHoloSweep 9s ease-in-out infinite;
}
@keyframes eqHoloSweep {
  0%   { background-position: -100% 0%; }
  100% { background-position: 200% 0%; }
}

/* === Floating particle dots === */
.hero-banner .hero-stat > .eq-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}
.hero-banner .hero-stat > .eq-particles::before,
.hero-banner .hero-stat > .eq-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(34,197,94,0.7);
  box-shadow: 0 0 12px rgba(34,197,94,0.9), 0 0 24px rgba(34,197,94,0.4);
}
.hero-banner .hero-stat > .eq-particles::before {
  top: 20%; left: 12%;
  animation: eqParticleFloat1 5s ease-in-out infinite;
}
.hero-banner .hero-stat > .eq-particles::after {
  bottom: 25%; right: 8%;
  width: 3px; height: 3px;
  background: rgba(167,139,250,0.7);
  box-shadow: 0 0 10px rgba(167,139,250,0.9);
  animation: eqParticleFloat2 6.5s ease-in-out infinite;
}
@keyframes eqParticleFloat1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.7; }
  50%      { transform: translate(15px, -8px); opacity: 1; }
}
@keyframes eqParticleFloat2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.6; }
  50%      { transform: translate(-12px, 10px); opacity: 1; }
}

/* === Top-corner accent — like a status indicator === */
.hero-banner .hero-stat > .eq-corner-accent {
  position: absolute;
  top: 14px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 5;
  pointer-events: none;
}
.hero-banner .hero-stat > .eq-corner-accent .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e, 0 0 18px #22c55e;
  animation: eqLiveBlink 1.6s ease-in-out infinite;
}
.hero-banner .hero-stat > .eq-corner-accent .txt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #22c55e;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(34,197,94,0.6);
}
@keyframes eqLiveBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* === Top glowing accent bar === */
.hero-banner .hero-stat::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(34,197,94,0.5) 20%,
    rgba(34,197,94,1) 50%,
    rgba(124,92,252,1) 70%,
    rgba(124,92,252,0.5) 80%,
    transparent
  ) !important;
  box-shadow:
    0 0 12px rgba(34,197,94,0.8),
    0 0 24px rgba(34,197,94,0.5),
    0 0 40px rgba(124,92,252,0.4) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  animation: eqTopBarPulse 3.5s ease-in-out infinite !important;
  filter: saturate(1.4);
}
@keyframes eqTopBarPulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* === Bottom subtle reflection === */
.hero-banner .hero-stat::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 30% !important;
  right: 30% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(34,197,94,0.4) 50%,
    transparent
  ) !important;
  box-shadow: 0 0 8px rgba(34,197,94,0.4) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* === Label "ACCOUNT EQUITY" — premium typography === */
.hero-banner .hero-stat .lbl {
  position: relative;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.32em !important;
  color: rgba(196,253,206,0.75) !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  text-shadow: 0 0 10px rgba(34,197,94,0.3);
  transform: translateZ(15px);
  transition: transform 0.3s;
}

/* === The big equity number — 4K HERO display === */
.hero-banner .hero-stat .val {
  position: relative;
  z-index: 3;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: "zero" 1, "tnum" 1 !important;
  font-variant-numeric: slashed-zero tabular-nums !important;
  background: linear-gradient(135deg,
    #4ade80 0%,
    #22c55e 35%,
    #16a34a 70%,
    #22c55e 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter:
    drop-shadow(0 0 16px rgba(34,197,94,0.6))
    drop-shadow(0 0 32px rgba(34,197,94,0.3))
    drop-shadow(0 4px 8px rgba(0,0,0,0.4)) !important;
  transform: translateZ(40px);
  transition: transform 0.3s, filter 0.3s;
  animation: eqValShimmer 6s ease-in-out infinite;
  display: inline-block;
}

/* === 4K metallic SILVER equity number (overrides the green gradient above) === */
.hero-banner .hero-stat .val.eq-silver-4k {
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e9eef5 16%,
    #c3cdd9 34%,
    #9aa6b4 50%,
    #cfd8e3 64%,
    #f3f7fc 82%,
    #b3bdca 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  /* Cool highlight + dark depth instead of the green glow */
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,0.35))
    drop-shadow(0 2px 6px rgba(0,0,0,0.55))
    drop-shadow(0 0 22px rgba(200,214,235,0.35)) !important;
  /* Gentle brushed-metal sheen sweep */
  animation: eqSilverSheen 6s ease-in-out infinite !important;
}
@keyframes eqSilverSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes eqValShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-banner .hero-stat:hover .val,
.hero-banner .hero-stat.eq-tilting .val {
  transform: translateZ(60px);
  filter:
    drop-shadow(0 0 24px rgba(34,197,94,0.9))
    drop-shadow(0 0 48px rgba(34,197,94,0.5))
    drop-shadow(0 6px 12px rgba(0,0,0,0.5)) !important;
}

/* === Sub label "Total P&L" === */
.hero-banner .hero-stat .sub {
  position: relative;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: rgba(196,253,206,0.65) !important;
  margin-top: 10px !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 6px rgba(34,197,94,0.2);
  transform: translateZ(22px);
  transition: transform 0.3s;
}

/* === Risk widget bottom section === */
.hero-banner .hero-stat #heroRiskWidget {
  position: relative;
  z-index: 3;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(34,197,94,0.18) !important;
  transform: translateZ(20px);
  transition: transform 0.3s;
}

.hero-banner .hero-stat #heroRiskAmt {
  font-size: 17px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(248,113,113,0.5), 0 0 24px rgba(248,113,113,0.25);
}

.hero-banner .hero-stat #heroRiskPct {
  background: rgba(124,92,252,0.18) !important;
  border-color: rgba(124,92,252,0.45) !important;
  color: #C4B5FD !important;
  box-shadow: 0 0 8px rgba(124,92,252,0.3);
}

/* === Mobile: scale gracefully === */
@media (max-width: 760px) {
  .hero-banner .hero-stat {
    animation: none !important;
    transform: none !important;
    padding: 18px 20px !important;
    min-width: 0 !important;
    margin-top: 14px !important;
  }
  .hero-banner .hero-stat .val {
    font-size: 32px !important;
  }
  .hero-banner .hero-stat .lbl {
    text-align: left !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }
  .hero-banner .hero-stat .sub,
  .hero-banner .hero-stat #heroRiskWidget {
    text-align: left !important;
  }
  .hero-banner .hero-stat > .eq-corner-accent {
    top: 12px;
    left: 14px;
  }
  .hero-banner .hero-stat > .eq-bg-grid,
  .hero-banner .hero-stat > .eq-particles {
    opacity: 0.4 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner .hero-stat,
  .hero-banner .hero-stat .val,
  .hero-banner .hero-stat > .eq-bg-grid,
  .hero-banner .hero-stat > .eq-holo,
  .hero-banner .hero-stat > .eq-particles::before,
  .hero-banner .hero-stat > .eq-particles::after,
  .hero-banner .hero-stat > .eq-corner-accent .dot,
  .hero-banner .hero-stat::before {
    animation: none !important;
  }
}