/* =============================================================
   Bot It AI — botit-hero.css
   Hero section + tsParticles styles
   ============================================================= */

/* ── Hero Section ─────────────────────────────────────────────── */
.botit-hero {
  min-height: 100vh;
  background: var(--bi-bg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 8rem 0 5rem;
}
#tsparticles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  z-index: 0;
}
.botit-hero-content { position: relative; z-index: 1; }
.botit-hero-badge {
  display: inline-block;
  background: rgba(0,245,255,0.1);
  border: 1px solid rgba(0,245,255,0.3);
  color: var(--bi-cyan);
  padding: 0.35rem 1rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
.botit-hero-headline {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.botit-hero-sub {
  font-size: 1.15rem;
  color: var(--bi-muted);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 2.5rem;
}
.botit-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.botit-hero-ctas .btn { min-width: 160px; justify-content: center; }

/* ── Hero Mockup ──────────────────────────────────────────────── */
.botit-hero-mockup { position: relative; height: 420px; }
.botit-mockup-card {
  background: var(--bi-surface);
  border: 1px solid var(--bi-border);
  border-radius: 16px;
  padding: 1.25rem;
  position: absolute;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: float 4s ease-in-out infinite;
}
.botit-mockup-card--main  { width: 280px; top: 40px; left: 20px; animation-delay: 0s; }
.botit-mockup-card--badge {
  top: 20px; right: 0;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: var(--bi-cyan);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  animation-delay: 0.5s;
}
.botit-mockup-card--stat  { bottom: 60px; right: 10px; text-align: center; animation-delay: 1s; }
.botit-mockup-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  background: var(--bi-grad-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.botit-mockup-stat-label { font-size: 0.75rem; color: var(--bi-muted); }
.botit-mockup-product {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.75rem;
}
.botit-mockup-product-img {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--bi-grad-primary);
  flex-shrink: 0;
}
.botit-mockup-line {
  height: 10px;
  border-radius: 4px;
  background: var(--bi-surface-2);
  margin-bottom: 6px;
}
.botit-mockup-line--title { width: 80%; }
.botit-mockup-line--sub   { width: 55%; }
.botit-mockup-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.botit-score-label { font-size: 0.72rem; color: var(--bi-muted); }
.botit-score-value { font-weight: 700; font-size: 1.1rem; }
.botit-mockup-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bi-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.botit-mockup-badge-icon { font-size: 1rem; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@media (max-width: 991.98px) {
  .botit-hero { padding: 6rem 0 4rem; min-height: auto; }
}