/* ── HERO ───────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 100px;
  position: relative;
  overflow: hidden;
}

/* Rotating conic spotlight */
.spotlight {
  position: absolute;
  width: 900px;
  height: 900px;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(124, 92, 252, 0)    0deg,
    rgba(124, 92, 252, .15)  60deg,
    rgba(79, 158, 255, .12)  120deg,
    rgba(124, 92, 252, 0)    180deg,
    rgba(244, 114, 182, .1)  240deg,
    rgba(124, 92, 252, 0)    360deg
  );
  border-radius: 50%;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  animation: spinLight 20s linear infinite;
  pointer-events: none;
}
@keyframes spinLight {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* Soft radial glow */
.hero-glow {
  position: absolute;
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(124, 92, 252, .18) 0%, transparent 70%);
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(40px);
}

/* Particle container */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  background: var(--glass2);
  backdrop-filter: blur(10px);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 500;
  margin-bottom: 36px;
  animation: fadeSlideUp .9s ease forwards;
}

.badge-pill {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
}

/* Title */
.hero-title {
  font-size: clamp(2.8rem, 7.5vw, 6.8rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.04em;
  margin-bottom: 24px;
  max-width: 1000px;
}

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) rotateX(-20deg);
  animation: wordIn .6s var(--ease-out) forwards;
}
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Sub */
.hero-sub {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: var(--muted2);
  max-width: 520px;
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 44px;
  opacity: 0;
  animation: fadeSlideUp .8s .5s ease forwards;
}

/* Actions */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeSlideUp .8s .7s ease forwards;
}

/* Scroll indicator */
.scroll-ind {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeSlideUp 1s 1.2s ease forwards;
  font-family: 'Geist Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--violet), transparent);
  animation: lineGrow 2s 1.5s ease infinite;
}
@keyframes lineGrow {
  0%, 100% { height: 20px; opacity: .2; }
  50%       { height: 40px; opacity: .8; }
}