/* ===========================================================
   hero.css — Hero section + 2D SVG floating pill (replaces
              the old 3D transform pill that broke on zoom)
   =========================================================== */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 160px 0 80px;
}
.hero-inner { position: relative; z-index: 3; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border-2);
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .03em;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}
.hero-tag .hero-tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: blink 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Headline */
.hero h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .word {
  display: inline-block;
  transform: translateY(110%);
  animation: revealUp .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero h1 .word:nth-child(2) { animation-delay: .12s; }
.hero h1 .word:nth-child(3) { animation-delay: .22s; }

/* Animated gradient text */
.gradient-text {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, var(--rose) 55%, var(--violet) 85%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Subtitle */
.hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 1s ease .55s forwards;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s ease .75s forwards;
}

/* Floating pill — 2D SVG, no 3D transforms (robust on zoom) */
.pill-scene {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.pill-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(244,63,94,0.25));
  animation: floatPill 8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes floatPill {
  0%, 100% { transform: translateY(0)    rotate(-4deg); }
  25%      { transform: translateY(-18px) rotate(-2deg); }
  50%      { transform: translateY(-8px)  rotate( 2deg); }
  75%      { transform: translateY(-22px) rotate( 0deg); }
}

/* Orbiting dots */
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.orbit-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}
.orbit-dot:nth-child(1) { top: 6%; left: 50%; }
.orbit-dot:nth-child(2) {
  bottom: 8%; right: 18%;
  background: var(--violet); box-shadow: 0 0 14px var(--violet);
}
.orbit-dot:nth-child(3) {
  top: 40%; left: 4%;
  background: var(--rose); box-shadow: 0 0 14px var(--rose);
}

/* Stats strip */
.hero-stats {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  opacity: 0;
  animation: fadeUp 1s ease .95s forwards;
}
.stat {
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.stat .num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  display: block;
  line-height: 1;
}
.stat .num .accent { color: var(--rose); }
.stat .lbl {
  font-size: 12px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 8px;
  display: block;
}