#hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 6% 60px; overflow: hidden;
}

#hero-canvas {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

.hero-ov {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at center, rgba(204,0,0,.08) 0%, rgba(8,8,8,.62) 68%);
}

.hero-inner {
  position: relative; z-index: 3; max-width: 840px;
}


.eyebrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: .78rem; letter-spacing: 3px; color: var(--red);
  margin-bottom: 1.1rem; display: inline-block;
  animation: fadeDown .7s ease .2s both;
}
.eyebrow::before { content: '> '; color: var(--red-b); }


.hero-logo-img {
  width: 82px; height: 82px; border-radius: 50%;
  border: 2px solid var(--border-b); object-fit: cover;
  box-shadow: 0 0 32px var(--red-glow), 0 0 70px rgba(204,0,0,.1);
  margin-bottom: 1.5rem;
  animation: heroLogoIn .8s var(--transition) .3s both, float 4s ease-in-out 1.2s infinite;
  animation: heroLogoIn .8s cubic-bezier(.22,1,.36,1) .3s both;
}
.hero-logo-img.floating {
  animation: heroLogoIn .8s cubic-bezier(.22,1,.36,1) .3s both, float 4s ease-in-out 1.2s infinite;
}


.hero-title {
  font-family: 'Orbitron', monospace; font-weight: 900;
  font-size: clamp(2.8rem, 9vw, 7rem); line-height: 1; letter-spacing: -2px;
  color: var(--white); position: relative; display: inline-block;
  animation: fadeDown .8s ease .4s both, glow 3.5s ease-in-out 1.8s infinite;
}
.hero-title span { color: var(--red-b); }


.hero-title::before,
.hero-title::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; right: 0;
  font-family: 'Orbitron', monospace; font-weight: 900;
  font-size: inherit; line-height: 1; letter-spacing: -2px;
  pointer-events: none;
}
.hero-title::before {
  color: rgba(255, 32, 32, .55);
  animation: glitch1 7s infinite step-start 1s;
}
.hero-title::after {
  color: rgba(0, 200, 255, .35);
  animation: glitch2 7s infinite step-start 1.6s;
}


.hero-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(.78rem, 1.8vw, 1rem); color: var(--gray);
  margin: 1.3rem 0 2.8rem; line-height: 1.7; min-height: 1.6em;
  animation: fadeUp .8s ease .6s both;
}
#typing-text { color: var(--white); }
.cursor-blink {
  display: inline-block; width: 2px; height: .95em;
  background: var(--red-b); vertical-align: middle; margin-left: 2px;
  animation: blink .75s step-end infinite;
}


.btns {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  animation: fadeUp .8s ease .75s both;
}

.btn-red {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: .95rem; letter-spacing: 2px; text-transform: uppercase;
  background: var(--red); color: #fff; text-decoration: none;
  padding: 13px 32px; transition: all .2s;
  display: inline-flex; align-items: center; gap: 9px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  position: relative; overflow: hidden;
}
.btn-red::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.12); transform: translateX(-100%); transition: transform .3s;
}
.btn-red:hover::before { transform: translateX(0); }
.btn-red:hover {
  background: var(--red-b); transform: translateY(-2px);
  box-shadow: 0 0 34px var(--red-glow), 0 8px 20px rgba(204,0,0,.2);
}

.btn-ghost {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: .95rem; letter-spacing: 2px; text-transform: uppercase;
  background: transparent; color: var(--white); text-decoration: none;
  padding: 12px 32px; border: 1px solid var(--border-b); transition: all .2s;
  display: inline-flex; align-items: center; gap: 9px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.btn-ghost:hover {
  background: var(--red-dim); border-color: var(--red-b);
  transform: translateY(-2px); box-shadow: 0 0 20px rgba(204,0,0,.12);
}


.live-bar {
  position: relative; z-index: 3;
  display: flex; gap: 3.5rem; margin-top: 4.5rem;
  flex-wrap: wrap; justify-content: center;
  animation: fadeUp .8s ease .9s both;
}
.live-stat { text-align: center; position: relative; }
.live-stat + .live-stat::before {
  content: ''; position: absolute; left: -1.75rem; top: 15%; bottom: 15%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-b), transparent);
}
.live-num {
  font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1.8rem;
  color: var(--red-b); display: block;
  animation: statCount .6s var(--transition) 1s both;
}
.live-lbl {
  font-family: 'Share Tech Mono', monospace; font-size: .62rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gray-d); margin-top: 3px;
}


.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: .3; animation: bob 2.2s ease-in-out infinite;
}
.scroll-hint span {
  font-family: 'Share Tech Mono', monospace; font-size: .6rem; letter-spacing: 2px; color: var(--gray);
}
.scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--red), transparent); }