/* ==========================================================================
   WITS CORE BRAND VARIABLES & TYPOGRAPHY
   ========================================================================== */
:root {
  /* Core Brand Colors */
  --wits-purple: #7B0680;
  --wits-purple-hover: #630467;
  --wits-purple-light: #F8EBF9;
  --wits-green: #28B438;
  --wits-green-hover: #21992E;
  --wits-green-light: #EBF8EC;

  /* Neutrals & Light Backgrounds */
  --wits-navy: #0F172A;
  --wits-text-muted: #64748B;
  --wits-border-light: #E2E8F0;
  --wits-bg-light: #F8FAFC;
}

/* Global Font Override: Plus Jakarta Sans */
body, button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .brand-font {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   HERO SECTION LIGHT MESH & AMBIENT BLOBS
   ========================================================================== */
.whatsapp-hero-light-mix {
  background: linear-gradient(120deg, #FAF4FC 0%, #FFFFFF 50%, #F2FAF3 100%);
  position: relative;
  overflow: hidden;
}

/* Floating Light Glow Blobs */
.brand-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
}

.blob-purple {
  width: 400px;
  height: 400px;
  background: var(--wits-purple);
  top: -10%;
  left: -5%;
}

.blob-green {
  width: 420px;
  height: 420px;
  background: var(--wits-green);
  bottom: -15%;
  right: -5%;
}

/* ==========================================================================
   UTILITY CLASSES & BRAND BUTTONS
   ========================================================================== */
.tracking-wider { letter-spacing: 0.08em; }
.fs-7 { font-size: 0.8rem; }
.fs-8 { font-size: 0.725rem; }
.gap-2-5 { gap: 0.625rem !important; }

/* Color Utilities */
.text-brand-purple { color: var(--wits-purple) !important; }
.text-brand-green { color: var(--wits-green) !important; }
.bg-brand-purple { background-color: var(--wits-purple) !important; }
.bg-brand-green { background-color: var(--wits-green) !important; }
.bg-brand-purple-subtle { background-color: var(--wits-purple-light) !important; }
.bg-brand-green-subtle { background-color: var(--wits-green-light) !important; }

.border-brand-purple-subtle { border-color: rgba(123, 6, 128, 0.25) !important; }
.border-brand-green-subtle { border-color: rgba(40, 180, 56, 0.25) !important; }

/* Primary Purple Button */


.btn-brand-purple {
  background-color: var(--wits-purple) !important;
  border-color: var(--wits-purple) !important;
  color: #ffffff !important;
  transition: all 0.25s ease;
}

/* Ensure inline-flex display for side-by-side alignment */
.btn-brand-purple,
.btn-outline-brand-purple {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important; /* Prevents full-width stretch */
  white-space: nowrap;    /* Prevents awkward text wrapping */
}

.btn-brand-purple:hover {
  background-color: var(--wits-purple-hover) !important;
  border-color: var(--wits-purple-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(123, 6, 128, 0.2) !important;
}

/* Outline Purple Button */
.btn-outline-brand-purple {
  border-color: var(--wits-purple) !important;
  color: var(--wits-purple) !important;
  background-color: #ffffff !important;
  transition: all 0.25s ease;
}

.btn-outline-brand-purple:hover {
  background-color: var(--wits-purple) !important;
  border-color: var(--wits-purple) !important;
  color: #ffffff !important;
}

/* Status Indicator Dot */
.pulse-dot-green {
  width: 8px;
  height: 8px;
  background-color: var(--wits-green);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(40, 180, 56, 0.6);
  animation: waPulseGreen 1.6s infinite;
}

@keyframes waPulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(40, 180, 56, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(40, 180, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 180, 56, 0); }
}

.shadow-xs {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Prevent line wrapping for metric blocks */
.text-nowrap {
  white-space: nowrap !important;
}

/* Ensure small text is crisp and upper-cased */
.fs-8 {
  font-size: 0.725rem !important;
}


/* ==========================================================================
   DYNAMIC LIGHT BACKGROUND & RAG ORBIT STYLES
   ========================================================================== */

/* Multi-layered Soft Light Gradient Background */
.rag-dynamic-bg {
  background: radial-gradient(circle at 10% 20%, #fbe5e5 0%, #ddd5d5 45%, #9ad1a0 90%) !important;
}

/* Orbit Canvas Box Shadow & Transitions */
#ragCanvasCard {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rag-orbit-container {
  width: 280px;
  height: 280px;
}

/* Orbit Path Circle */
.rag-orbit-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(123, 6, 128, 0.25);
  border-radius: 50%;
  animation: orbitRotate 22s linear infinite;
  transition: border-color 0.4s ease;
}

/* Fast Speed Pulse Class when switching sources */
.rag-orbit-ring.fast-spin {
  animation-duration: 4s;
  border-color: var(--wits-green, #28B438) !important;
}

/* Central WITS Core */
.wits-central-node {
  width: 105px;
  height: 105px;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 25px rgba(123, 6, 128, 0.22) !important;
  transition: transform 0.3s ease, background-color 0.4s ease;
}

.wits-central-node:hover {
  transform: scale(1.08);
}

/* Orbiting Model Nodes */
.orbit-node {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid var(--wits-border-light, #E2E8F0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 3;
}

.orbit-node.active-node {
  border-color: var(--wits-purple, #7B0680) !important;
  box-shadow: 0 0 0 6px rgba(123, 6, 128, 0.15) !important;
  transform: scale(1.2) !important;
}

/* Positioning Around Circle */
.node-openai { top: 0; left: 50%; transform: translate(-50%, -50%); color: var(--wits-purple, #7B0680); }
.node-gemini { top: 50%; right: 0; transform: translate(50%, -50%); color: var(--wits-green, #28B438); }
.node-bio { bottom: 0; left: 50%; transform: translate(-50%, 50%); color: var(--wits-purple, #7B0680); }
.node-llama { top: 50%; left: 0; transform: translate(-50%, -50%); color: var(--wits-navy, #0F172A); }

@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

   /* Gen AI Feature Card Hover Effects */
.gen-card {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
}

.gen-card:hover {
  transform: translateY(-6px);
  border-color: rgba(123, 6, 128, 0.3) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

/* Tab Active Transitions */
#genIndustryTabs button {
  transition: all 0.25s ease;
}



/* ==========================================================================
   ENTERPRISE SOLUTIONS (DARK THEME & TERMINAL)
   ========================================================================== */

/* Dark Outer Background */
.bg-dark-solutions {
  background-color: #0A0D14 !important;
}

.bg-dark-card {
  background-color: #121824 !important;
}

.border-dark-subtle {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.text-slate-300 { color: #CBD5E1 !important; }
.text-slate-400 { color: #94A3B8 !important; }

/* Selector Items Hover & Active State */
.dark-solution-item {
  transition: all 0.25s ease;
}

.dark-solution-item:hover {
  background-color: #161F30 !important;
  border-color: rgba(123, 6, 128, 0.4) !important;
  transform: translateX(4px);
}

.dark-solution-item.active-solution {
  background-color: #182032 !important;
  border-color: var(--wits-purple, #7B0680) !important;
  box-shadow: 0 4px 20px rgba(123, 6, 128, 0.15) !important;
}

/* Terminal Console Styling */
.bg-terminal {
  background-color: #080A0F !important;
}

.bg-terminal-bar {
  background-color: #111520 !important;
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background-color: #FF5F56; }
.dot-yellow { background-color: #FFBD2E; }
.dot-green { background-color: #27C93F; }

.gap-1-5 { gap: 0.375rem !important; }


/* Final CTA Card Hover Lift */
#closing-cta .rounded-5 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#closing-cta .rounded-5:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(123, 6, 128, 0.08) !important;
}

.max-w-xl {
  max-width: 540px;
}