/* ═══════════════════════════════════════
   CHARGEX — Hero Section CSS
════════════════════════════════════════ */

/* ── Canvas backdrop ── */
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ── Hero wrapper ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px 48px 140px;
}

/* ── BG radial glows ── */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(124,58,237,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% 20%, rgba(0,229,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 20% 75%, rgba(0,229,255,0.08) 0%, transparent 55%);
  pointer-events: none;
}

/* Grid lines */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* ── Hero content ── */
.hero-inner {
  position: relative; z-index: 3;
  max-width: 900px;
  display: flex; flex-direction: column;
  align-items: center;
}

/* ── Live badge ── */
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(0,229,255,0.07);
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: 30px; padding: 7px 18px;
  margin-bottom: 38px;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.35; transform:scale(0.75); }
}

/* ── Main headline ── */
.hero-h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  font-weight: 900; letter-spacing: -0.035em;
  line-height: 1.04; margin-bottom: 10px;
}

.hero-h1-sub {
  font-size: clamp(1.1rem, 2.2vw, 1.65rem);
  font-weight: 600; color: var(--muted);
  letter-spacing: 0.01em; margin-bottom: 28px;
}

/* ── Desc ── */
.hero-desc {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--muted); line-height: 1.78;
  max-width: 640px; margin-bottom: 48px;
}

/* ── CTA row ── */
.hero-btns {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: 72px;
}

/* ── Stats strip ── */
.hero-stats {
  display: flex; gap: 56px;
  flex-wrap: wrap; justify-content: center;
  padding-top: 44px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  font-size: 2rem; font-weight: 900;
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: block; margin-bottom: 6px;
}
.hero-stat-label {
  font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Scroll indicator ── */
.hero-scroll {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span {
  font-size: 0.64rem; color: var(--muted);
  letter-spacing: 0.15em; text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { transform: scaleY(0); transform-origin: top; opacity:1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity:1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity:0; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero { padding: 100px 24px 120px; }
  .hero-stats { gap: 30px; }
}