.card.hero-left{
  position:relative;
  padding:26px 22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(59,130,246,.25) 0%, rgba(59,130,246,0) 60%),
    radial-gradient(700px 320px at 90% 10%, rgba(239,68,68,.16) 0%, rgba(239,68,68,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:
    0 26px 70px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  text-align:center;
  transform:translateY(0);
  animation:heroPop .75s cubic-bezier(.2,.9,.2,1) both;
}
.card.hero-left::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    conic-gradient(from 210deg,
      rgba(59,130,246,.00),
      rgba(59,130,246,.35),
      rgba(147,197,253,.15),
      rgba(239,68,68,.18),
      rgba(59,130,246,.00));
  filter:blur(18px);
  opacity:.55;
  animation:heroGlow 5.2s linear infinite;
  pointer-events:none;
}
.card.hero-left::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.card.hero-left > *{position:relative; z-index:1}

.card.hero-left .kicker{
  margin:0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(59,130,246,.16);
  border:1px solid rgba(59,130,246,.32);
  color:#bfdbfe;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  animation:kickerFloat 2.8s ease-in-out infinite;
}
.card.hero-left .kicker i{
  font-size:14px;
  color:#93c5fd;
  animation:iconPulse 1.35s ease-in-out infinite;
}

.card.hero-left h1{
  margin:16px auto 12px;
  max-width:28ch;
  font-size:clamp(22px,3.2vw,40px);
  line-height:1.06;
  letter-spacing:-.3px;
  background:linear-gradient(90deg,#ffffff, rgba(255,255,255,.82));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:titleSlide .75s .08s cubic-bezier(.2,.9,.2,1) both;
}
.card.hero-left p{
  margin:0 auto;
  max-width:62ch;
  color:rgba(229,231,235,.82);
  line-height:1.62;
  font-size:14px;
  animation:textFade .75s .14s cubic-bezier(.2,.9,.2,1) both;
}
.card.hero-left p b{
  color:#fff;
  font-weight:900;
}

.card.hero-left .stats{
  margin-top:18px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  animation:statsUp .75s .2s cubic-bezier(.2,.9,.2,1) both;
}
.card.hero-left .stat{
  flex:1;
  min-width:170px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
  transform:translateY(0);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  animation:statPop .8s cubic-bezier(.2,.9,.2,1) both;
}
.card.hero-left .stat:nth-child(1){animation-delay:.24s}
.card.hero-left .stat:nth-child(2){animation-delay:.30s}
.card.hero-left .stat:nth-child(3){animation-delay:.36s}

.card.hero-left .stat::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 20% 10%, rgba(59,130,246,.22), rgba(59,130,246,0) 60%),
    radial-gradient(240px 140px at 80% 0%, rgba(147,197,253,.16), rgba(147,197,253,0) 55%);
  opacity:.95;
  pointer-events:none;
}
.card.hero-left .stat::after{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width:220px;height:220px;
  background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  transform:rotate(25deg);
  opacity:.55;
  pointer-events:none;
}

.card.hero-left .stat:hover{
  transform:translateY(-3px);
  border-color:rgba(59,130,246,.28);
  background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(0,0,0,.18));
}
.card.hero-left .stat > *{position:relative; z-index:1}

.card.hero-left .stat .v{
  font-size:18px;
  font-weight:1000;
  color:#fff;
  letter-spacing:.2px;
  animation:numGlow 2.6s ease-in-out infinite;
}
.card.hero-left .stat .k{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:rgba(156,163,175,.92);
  letter-spacing:.2px;
}

.card.hero-left .stat .v#statTotal,
.card.hero-left .stat .v#statLive{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.card.hero-left .stats .stat:nth-child(3) .v{
  background:linear-gradient(90deg, rgba(59,130,246,.95), rgba(147,197,253,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding:0;
  border:none;
  box-shadow:none;
}

@keyframes heroPop{
  0%{opacity:0; transform:translateY(10px) scale(.985)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes heroGlow{
  0%{transform:rotate(0deg); opacity:.45}
  50%{opacity:.62}
  100%{transform:rotate(360deg); opacity:.45}
}
@keyframes kickerFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}
@keyframes iconPulse{
  0%{transform:scale(.96); opacity:.85}
  50%{transform:scale(1.08); opacity:1}
  100%{transform:scale(.96); opacity:.85}
}
@keyframes titleSlide{
  0%{opacity:0; transform:translateY(10px)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes textFade{
  0%{opacity:0; transform:translateY(8px)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes statsUp{
  0%{opacity:0; transform:translateY(10px)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes statPop{
  0%{opacity:0; transform:translateY(10px) scale(.985)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes numGlow{
  0%{filter:drop-shadow(0 0 0 rgba(59,130,246,0))}
  50%{filter:drop-shadow(0 10px 22px rgba(59,130,246,.22))}
  100%{filter:drop-shadow(0 0 0 rgba(59,130,246,0))}
}

@media(max-width:980px){
  .card.hero-left h1{max-width:32ch}
  .card.hero-left .stat{min-width:220px}
}
@media(max-width:640px){
  .card.hero-left{padding:20px 16px}
  .card.hero-left .stats{gap:12px}
  .card.hero-left .stat{min-width:100%}
}