/* ═══════════════════════════════════════════════════════════
   pages/index.css  —  Homepage hero + stats  (PaphTech theme)
   ═══════════════════════════════════════════════════════════ */

#hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 80px) var(--gutter) 80px;
  background: var(--bg);
}

/* Dot grid */
.hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(31,232,247,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,232,247,.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 20%, transparent 78%);
}

/* Glow blob */
.hero__glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,232,247,.1) 0%, transparent 68%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: pulse-glow 5s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}

.hero__content { position: relative; z-index: 1; max-width: 860px; width: 100%; }

/* Live badge */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(31,232,247,.08); border: 1px solid rgba(31,232,247,.22);
  border-radius: 30px; padding: 7px 18px;
  font-size: .72rem; font-weight: 600; color: var(--accent);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 28px; animation: fadeUp .65s ease both;
}
.hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: blink 1.4s ease-in-out infinite;
}

/* Heading */
#hero h1 {
  font-family: var(--font-h);
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  animation: fadeUp .7s .08s ease both;
}

.hero__sub {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 300; color: var(--muted);
  max-width: 540px; margin: 22px auto 0; line-height: 1.75;
  animation: fadeUp .7s .16s ease both;
}

.hero__actions {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-top: 36px;
  animation: fadeUp .7s .24s ease both;
}

/* Stats bar */
.hero__stats {
  display: flex; justify-content: center; gap: 48px;
  flex-wrap: wrap; margin-top: 60px; padding-top: 52px;
  border-top: 1px solid var(--border);
  animation: fadeUp .7s .34s ease both;
}
.stat-item { text-align: center; }
.stat__num {
  font-family: var(--font-h); font-size: 2rem; font-weight: 800;
  letter-spacing: -.04em; color: var(--text);
  display: block; line-height: 1;
}
.stat__num em { color: var(--accent); font-style: normal; }
.stat__label {
  font-size: .7rem; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 5px; display: block;
}

@media (max-width: 600px) {
  .hero__stats   { gap: 28px; padding-top: 36px; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}