/* ═══════════════════════════════════════════════════════════
   THE BOT ARCHITECTS — style.css
   ═══════════════════════════════════════════════════════════ */


/* ── Base ────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: #050816;
  color: #F1F5F9;
}

::selection {
  background: rgba(37, 99, 235, 0.3);
  color: #F1F5F9;
}


/* ── Scrollbar ───────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #050816;
}

::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563EB;
}


/* ── Dot Grid Background ────────────────────────────────── */

.dot-grid {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}


/* ── Blue Glow Effect ────────────────────────────────────── */

.blue-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  z-index: 0;
}

.blue-glow-sm {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}


/* ── Gradient Text ───────────────────────────────────────── */

.gradient-text {
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Scroll Reveal Animation ─────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ── Navbar Blur ─────────────────────────────────────────── */

.nav-scrolled {
  background: rgba(5, 8, 22, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(30, 41, 59, 0.5);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}


/* ── Card Hover Glow (top edge) ──────────────────────────── */

.card-glow {
  position: relative;
  overflow: hidden;
}

.card-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.5), transparent);
  opacity: 0;
  transition: opacity 300ms ease;
}

.card-glow:hover::before {
  opacity: 1;
}


/* ── Pulse Dot (green status indicator) ──────────────────── */

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}


/* ── Chat Message Animations (for demo / chatbot) ────────── */

@keyframes chat-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message-enter {
  animation: chat-fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes chat-typing-dots {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #94A3B8;
  border-radius: 50%;
  animation: chat-typing-dots 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chat-widget-open {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.chat-widget-enter {
  animation: chat-widget-open 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ── Hero Chat Mockup Message Animation ──────────────────── */

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-animate {
  opacity: 0;
  animation: messageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ── Counter Number Animation ────────────────────────────── */

@keyframes count-up-fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter-animate {
  animation: count-up-fade 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ── FAQ Accordion ───────────────────────────────────────── */

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer.open {
  max-height: 500px;
}

.faq-icon {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-chevron {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: #3B82F6;
}

.faq-item.active {
  border-color: rgba(37, 99, 235, 0.3);
}


/* ── Section Divider ─────────────────────────────────────── */

.section-divider {
  border-top: 1px solid rgba(30, 41, 59, 0.5);
}


/* ── Mobile Menu ─────────────────────────────────────────── */

@keyframes mobile-menu-open {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-enter {
  animation: mobile-menu-open 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ── Hamburger → X Animation ─────────────────────────────── */

.menu-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-open .hamburger-line:nth-child(3) {
  width: 24px;
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Mobile Nav Link Stagger ─────────────────────────────── */

@keyframes mobile-link-enter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-link {
  opacity: 0;
}

.mobile-menu-visible .mobile-nav-link {
  animation: mobile-link-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mobile-menu-visible .mobile-nav-link:nth-child(1) { animation-delay:  50ms; }
.mobile-menu-visible .mobile-nav-link:nth-child(2) { animation-delay: 100ms; }
.mobile-menu-visible .mobile-nav-link:nth-child(3) { animation-delay: 150ms; }
.mobile-menu-visible .mobile-nav-link:nth-child(4) { animation-delay: 200ms; }
.mobile-menu-visible .mobile-nav-link:nth-child(5) { animation-delay: 250ms; }