/* ===================================
   home.css — Hero & Home-specific
   =================================== */

/* ── Hero ───────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
  padding: var(--space-8) var(--space-6);
}

#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding-block: var(--space-20);
}

/* Badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-medium);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

/* Headline */
.hero__headline {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}
.hero__name {
  display: block;
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__separator { color: var(--color-text-tertiary); }

.hero__typing-wrap {
  display: block;
  font-size: clamp(var(--text-xl), 3vw, var(--text-4xl));
  font-weight: var(--font-light);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  min-height: 1.4em;
}
.hero__typing {
  color: var(--color-text-secondary);
}
.hero__cursor {
  display: inline-block;
  color: var(--color-accent);
  animation: blink 0.8s step-end infinite;
  font-weight: var(--font-light);
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Subtitle */
.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
  line-height: var(--leading-relaxed);
}

/* CTAs */
.hero__cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

/* Scroll indicator */
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  animation: float-up 2s ease infinite;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--color-accent) 0%, transparent 100%);
}
@keyframes float-up {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-8px); opacity: 0.6; }
}

/* Floating badges */
.hero__floats { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.float-badge {
  position: absolute;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-md);
  animation: float-drift 6s ease-in-out infinite;
}
.float-badge--1 { top: 20%; left: 5%; animation-delay: 0s; }
.float-badge--2 { top: 30%; right: 6%; animation-delay: 1s; }
.float-badge--3 { bottom: 30%; left: 8%; animation-delay: 2s; }
.float-badge--4 { top: 65%; right: 4%; animation-delay: 0.5s; }
.float-badge--5 { bottom: 20%; left: 20%; animation-delay: 1.5s; }

@keyframes float-drift {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-0.5deg); }
}

/* ── Stats ─────────────────────────── */
.stats { background: var(--color-bg-secondary); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}
.stat-item { padding: var(--space-6); }
.stat-number {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-1);
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

/* Responsive */
@media (max-width: 768px) {
  .hero__floats { display: none; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: center; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}