@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');

:root {
  /* Colors */
  --color-primary: #6B46C1;         /* Deep Purple */
  --color-primary-glow: rgba(107, 70, 193, 0.25);
  --color-secondary: #0F172A;       /* Deep Black/Slate */
  --color-accent: #8B5CF6;          /* Bright Purple */
  
  /* Theme Colors (Light Default) */
  --bg-main: #FFFFFF;
  --bg-sub: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-navbar: rgba(255, 255, 255, 0.9);
  --text-main: #0B0A19;             /* Black text */
  --text-muted: #64748B;           /* Grey text */
  --border-color: rgba(107, 70, 193, 0.12);
  --glass-shadow: 0 10px 30px -10px rgba(107, 70, 193, 0.08);
  
  /* Font Families */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', 'Noto Sans Arabic', serif;
}

.dark {
  --bg-main: #0F172A;
  --bg-sub: #020617;
  --bg-card: #0F172A;
  --bg-navbar: rgba(15, 23, 42, 0.9);
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --border-color: rgba(139, 92, 246, 0.2);
  --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  
  --color-secondary: #F8FAFC;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
  position: relative;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-sub);
  color: var(--text-main);
  overflow-x: hidden !important;
  min-height: 100vh;
}

[dir="rtl"] {
  font-family: var(--font-urdu), var(--font-sans);
  line-height: 1.8;
}

[dir="rtl"] body {
  font-family: var(--font-urdu), var(--font-sans);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-sub);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}

/* Clean Panels */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow);
}

.glass-nav {
  background: var(--bg-navbar);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 20px -10px rgba(107, 70, 193, 0.05);
}

/* Text Gradients */
.text-gradient-purple-black {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Draggable handle utility */
.drag-handle {
  cursor: move;
}

/* Highlight card effect */
.highlight-pulse {
  animation: pulse-border 1.5s infinite;
  border-width: 2px;
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--color-primary); box-shadow: 0 0 10px rgba(107, 70, 193, 0.2); }
  50% { border-color: #EC4899; box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); }
}

/* Buttons */
.btn-primary {
  background: var(--color-primary);
  color: white;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #5B21B6;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(107, 70, 193, 0.2);
}

.btn-secondary {
  background: var(--color-secondary);
  color: white;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #1E293B;
  transform: translateY(-1px);
}

/* Custom inputs */
.custom-input {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 0.75rem;
}

.custom-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* --- Draggable Robot Container --- */
.chatbot-container {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 160;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  height: auto;
  padding-bottom: 15px;
  /* Smooth walking travel transitions */
  transition: left 1.5s cubic-bezier(0.25, 1, 0.5, 1), top 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.robot-head, .robot-torso, .robot-leg-left, .robot-leg-right, .robot-arm-left, .robot-arm-right {
  flex-shrink: 0;
}

.chatbot-container.dragged {
  bottom: auto !important;
  right: auto !important;
  transition: none !important;
}

/* ==========================================================================
   FUTURISTIC 3D CYBER AI ORB COMPANION (Apple / Sci-Fi AI Aesthetic)
   ========================================================================== */

/* Head & Helmet Pod */
.robot-head {
  width: 86px !important;
  height: 76px !important;
  background: radial-gradient(circle at 35% 30%, #f3e8ff 0%, #b55fe6 30%, #8C2EE1 65%, #430d78 100%) !important;
  border-radius: 50% !important;
  border: 2px.5 solid rgba(243, 232, 255, 0.95) !important;
  box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.95), 0 16px 36px rgba(140, 46, 225, 0.55), 0 0 24px rgba(34, 211, 238, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10 !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.chatbot-container:hover .robot-head {
  transform: scale(1.08) rotate(4deg) !important;
}

/* Cyber Visor Faceplate */
.robot-face {
  width: 68px !important;
  height: 60px !important;
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%) !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(34, 211, 238, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 0 10px !important;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.95), 0 0 14px rgba(34, 211, 238, 0.45) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Concentric Glowing Blue Eyes */
.robot-eye {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 3.5px solid #22D3EE !important;
  box-shadow: 0 0 15px #22D3EE, inset 0 0 8px #22D3EE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: transform 0.1s ease-out !important;
}

.robot-eye::after {
  content: '' !important;
  position: absolute !important;
  width: 5px !important;
  height: 5px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #22D3EE !important;
}

/* Mini Mouth Expression Bar */
.robot-mouth {
  position: absolute !important;
  bottom: 9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 14px !important;
  height: 4px !important;
  background: #22D3EE !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 8px #22D3EE !important;
  opacity: 0.85 !important;
}

/* Antennae */
.robot-antenna-left, .robot-antenna-right {
  position: absolute !important;
  width: 4px !important;
  height: 20px !important;
  background: linear-gradient(to top, #8C2EE1, #f3e8ff) !important;
  border-radius: 2px !important;
  top: -16px !important;
}
.robot-antenna-left { left: 19px !important; transform: rotate(-10deg) !important; }
.robot-antenna-right { right: 19px !important; transform: rotate(10deg) !important; }

.robot-antenna-left::before, .robot-antenna-right::before {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22d3ee !important;
  box-shadow: 0 0 10px #22d3ee, 0 0 20px #22d3ee !important;
}

/* Torso Orb & Core */
.robot-torso-orb {
  width: 64px !important;
  height: 52px !important;
  background: radial-gradient(circle at 35% 30%, #f3e8ff 0%, #b55fe6 40%, #8C2EE1 75%, #430d78 100%) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(243, 232, 255, 0.95) !important;
  box-shadow: inset 0 3px 7px rgba(255, 255, 255, 0.85), 0 11px 26px rgba(140, 46, 225, 0.45) !important;
}

/* Concentric Core Glow */
.robot-screen {
  width: 32px !important;
  height: 32px !important;
  background: radial-gradient(circle, #0f172a 0%, #020617 100%) !important;
  border-radius: 50% !important;
  border: 1.5px solid #8C2EE1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85) !important;
}

.robot-core-glow {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 2px solid #22D3EE !important;
  box-shadow: 0 0 11px #22D3EE, inset 0 0 6px #22D3EE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: core-pulse 1.5s ease-in-out infinite alternate !important;
}

.robot-core-center {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22D3EE !important;
  box-shadow: 0 0 8px #22D3EE !important;
}

@keyframes core-pulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* Floating Cyber Wings */
.cyber-wing-left, .cyber-wing-right {
  position: absolute !important;
  width: 18px !important;
  height: 32px !important;
  background: linear-gradient(135deg, rgba(140, 46, 225, 0.85) 0%, rgba(59, 130, 246, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 13px 4px 13px 4px !important;
  top: 9px !important;
  box-shadow: 0 5px 14px rgba(140, 46, 225, 0.35) !important;
}

.cyber-wing-left { left: -16px !important; transform: rotate(-15deg) !important; }
.cyber-wing-right { right: -16px !important; transform: rotate(15deg) scaleX(-1) !important; }

/* Holographic Gyroscope Orbit Ring */
.cyber-orbit-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 114px !important;
  height: 114px !important;
  margin-top: -57px !important;
  margin-left: -57px !important;
  border: 1.5px solid rgba(34, 211, 238, 0.55) !important;
  border-top-color: #8C2EE1 !important;
  border-bottom-color: #22d3ee !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  transform: rotateX(72deg) rotateY(15deg) !important;
  animation: orbit-spin 6s linear infinite !important;
  box-shadow: 0 0 16px rgba(140, 46, 225, 0.45) !important;
}

@keyframes orbit-spin {
  0% { transform: rotateX(72deg) rotateY(15deg) rotateZ(0deg); }
  100% { transform: rotateX(72deg) rotateY(15deg) rotateZ(360deg); }
}

/* Anti-Gravity Thruster Energy Plasma Glow */
.thruster-glow {
  width: 36px !important;
  height: 14px !important;
  background: radial-gradient(ellipse at top, #22d3ee 0%, #8C2EE1 60%, transparent 100%) !important;
  border-radius: 50% !important;
  filter: blur(2px) !important;
  box-shadow: 0 6px 20px #22d3ee, 0 10px 28px #8C2EE1 !important;
  animation: thruster-pulse 1.2s ease-in-out infinite alternate !important;
}

/* Full-Body Robot Limbs: Arms, Hands, Legs & Feet */
.robot-arm-left, .robot-arm-right {
  position: absolute !important;
  top: 85px !important;
  width: 12px !important;
  height: 38px !important;
  background: linear-gradient(180deg, #a855f7 0%, #6366f1 100%) !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.4) !important;
  z-index: 5 !important;
}
.robot-arm-left { left: 4px !important; transform: rotate(18deg); transform-origin: top center; }
.robot-arm-right { right: 4px !important; transform: rotate(-18deg); transform-origin: top center; }

.robot-hand {
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 10px !important;
  height: 10px !important;
  background: #06b6d4 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #06b6d4 !important;
}

.robot-legs-container {
  display: flex !important;
  justify-content: space-between !important;
  width: 44px !important;
  margin-top: -6px !important;
  position: relative !important;
  z-index: 4 !important;
}

.robot-leg-left, .robot-leg-right {
  width: 14px !important;
  height: 34px !important;
  background: linear-gradient(180deg, #7c3aed 0%, #4c1d95 100%) !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.5) !important;
}

.robot-foot-left, .robot-foot-right {
  position: absolute !important;
  bottom: -8px !important;
  left: -2px !important;
  width: 18px !important;
  height: 10px !important;
  background: #06b6d4 !important;
  border-radius: 6px 10px 4px 4px !important;
  box-shadow: 0 0 10px #06b6d4 !important;
}

.jet-flame {
  position: absolute !important;
  bottom: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #38bdf8 0%, #a855f7 70%, transparent 100%) !important;
  border-radius: 50% !important;
  filter: blur(1px) !important;
  animation: thruster-pulse 0.4s ease-in-out infinite alternate !important;
}

/* Flying Cyber Spaceship Animation Keyframes */
@keyframes spaceshipFlySwoop {
  0% {
    transform: translate(120vw, -30vh) scale(0.4) rotate(-20deg);
    opacity: 0;
  }
  35% {
    transform: translate(40vw, 20vh) scale(1.1) rotate(5deg);
    opacity: 1;
  }
  65% {
    transform: translate(-10vw, -10vh) scale(1) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: translate(-60vw, 40vh) scale(0.6) rotate(15deg);
    opacity: 0;
  }
}

.animate-spaceship-swoop {
  animation: spaceshipFlySwoop 3.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes popUpCardDrop {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(-10deg);
    opacity: 0;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.05) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-card-drop {
  animation: popUpCardDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes thruster-pulse {
  0% { opacity: 0.6; transform: scaleX(0.8) translateY(0); }
  100% { opacity: 1; transform: scaleX(1.2) translateY(3px); }
}

/* --- CSS Animation Keyframes for Robot --- */

/* Idle floating */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.chatbot-container:not(.walking) {
  animation: float 4s ease-in-out infinite;
}

/* Walking animations */
@keyframes walk-lean {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}
.chatbot-container.walking {
  animation: walk-lean 0.4s ease-in-out infinite alternate;
}

@keyframes walk-leg-left {
  0%, 100% { transform: rotate(-25deg); }
  50% { transform: rotate(25deg); }
}
@keyframes walk-leg-right {
  0%, 100% { transform: rotate(25deg); }
  50% { transform: rotate(-25deg); }
}
@keyframes walk-arm-left {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(-30deg); }
}
@keyframes walk-arm-right {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(30deg); }
}

.chatbot-container.walking .robot-leg-left {
  animation: walk-leg-left 0.4s linear infinite;
}
.chatbot-container.walking .robot-leg-right {
  animation: walk-leg-right 0.4s linear infinite;
}
.chatbot-container.walking .robot-arm-left {
  animation: walk-arm-left 0.4s linear infinite;
}
.chatbot-container.walking .robot-arm-right {
  animation: walk-arm-right 0.4s linear infinite;
}

/* Presenting Pose: Right arm raised pointing to floating item by default (for mobile/fallback) */
.chatbot-container.presenting .robot-arm-right {
  animation: wave-arm-right 1.2s ease-in-out infinite;
  transition: transform 0.4s ease-out;
}

/* Presenting Right Pose: Left arm raised pointing and waving left (for desktop right side stand) */
.chatbot-container.presenting-right .robot-arm-right {
  animation: none;
  transform: rotate(0deg);
}

.chatbot-container.presenting-right .robot-arm-left {
  animation: wave-arm-left 1.2s ease-in-out infinite;
  transition: transform 0.4s ease-out;
}

@keyframes wave-arm-left {
  0%, 100% { transform: rotate(130deg); }
  50% { transform: rotate(110deg); }
}

@keyframes wave-arm-right {
  0%, 100% { transform: rotate(-130deg); }
  50% { transform: rotate(-110deg); }
}

/* Position speech bubble centered above robot when presenting */
.chatbot-container.presenting .speech-bubble {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  bottom: 155px;
}

.chatbot-container.presenting .speech-bubble::after {
  right: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* --- Floating Speech Bubble (Cyber AI Interactive Panel Style) --- */
.speech-bubble {
  position: absolute;
  bottom: 175px;
  right: -65px;
  width: 240px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(140, 46, 225, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 12px 14px;
  border-radius: 20px;
  box-shadow: 0 15px 35px -5px rgba(140, 46, 225, 0.35), 0 4px 15px rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: #0F172A;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto !important;
  transform: translateY(10px);
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.35s;
}

.dark .speech-bubble {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(168, 85, 247, 0.5);
  color: #F8FAFC;
  box-shadow: 0 15px 35px -5px rgba(124, 58, 237, 0.5), 0 4px 20px rgba(0, 0, 0, 0.5);
}

[dir="rtl"] .speech-bubble {
  right: auto;
  left: -50px;
}

.speech-bubble.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 70px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-right: 1.5px solid var(--color-primary);
  border-bottom: 1.5px solid var(--color-primary);
  transform: rotate(45deg);
}

/* --- Flying tool item animations --- */
.flying-tool-item {
  position: fixed;
  z-index: 120;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #EC4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 20px rgba(107, 70, 193, 0.3);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s, left 1.2s cubic-bezier(0.25, 1, 0.5, 1), top 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Presenting Modal Frame card in front of user */
.present-card-modal {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 150;
  width: 320px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 2px solid var(--color-primary);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 25px 50px -12px rgba(107, 70, 193, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s, visibility 0.3s, background-color 0.2s ease;
  text-align: center;
}

.present-card-modal.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.present-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.present-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Circular 3D Logo Hover Animation */
.logo-circle-container {
  perspective: 1000px;
  position: relative;
}
.logo-circle-container::before,
.logo-circle-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(0, 210, 255, 0.15) 60%, transparent 100%);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.logo-circle-container::before {
  animation: ripplePulse 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.logo-circle-container::after {
  animation: ripplePulse 4s cubic-bezier(0.25, 1, 0.5, 1) infinite 2s;
}

.logo-circle-3d {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease, border-color 0.6s ease;
  transform-style: preserve-3d;
  animation: portalWave 8s ease-in-out infinite;
}
.logo-circle-container:hover .logo-circle-3d {
  transform: rotateX(15deg) rotateY(-15deg) translateZ(15px) scale(1.08);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.4), 0 0 35px rgba(0, 210, 255, 0.7);
  border-color: #00d2ff;
}
.logo-circle-3d img {
  transform: translateZ(25px);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.logo-circle-container:hover .logo-circle-3d img {
  transform: translateZ(35px);
}

/* Unique Sonar Ripples & Energetic Portal Wave Animations */
@keyframes ripplePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0;
  }
}

@keyframes portalWave {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) rotateY(-15deg);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.35), inset 0 0 15px rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
  }
  25% {
    transform: translateY(-8px) rotate(3deg) rotateY(0deg) scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.5), inset 0 0 20px rgba(0, 210, 255, 0.25);
    border-color: #00d2ff;
  }
  50% {
    transform: translateY(0px) rotate(0deg) rotateY(15deg);
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.5), inset 0 0 25px rgba(236, 72, 153, 0.25);
    border-color: #ec4899;
  }
  75% {
    transform: translateY(8px) rotate(-3deg) rotateY(0deg) scale(0.97);
    box-shadow: 0 5px 25px rgba(139, 92, 246, 0.45), inset 0 0 20px rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
  }
}

/* Chatbot Widget Speech Bubble Dark Mode Overrides */
.dark .speech-bubble {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.dark .speech-bubble::after {
  background: var(--bg-card);
  border-right: 1.5px solid var(--border-color);
  border-bottom: 1.5px solid var(--border-color);
}

/* Dark Mode Utility Overrides for Legacy Light Classes */
.dark .bg-white:not([class*="dark:bg-"]) {
  background-color: var(--bg-card) !important;
}
.dark .bg-slate-50:not([class*="dark:bg-"]) {
  background-color: var(--bg-sub) !important;
}
.dark .border-slate-200:not([class*="dark:border-"]) {
  border-color: var(--border-color) !important;
}
.dark .border-purple-100:not([class*="dark:border-"]) {
  border-color: var(--border-color) !important;
}
.dark .text-slate-900:not([class*="dark:text-"]) {
  color: var(--text-main) !important;
}
.dark .text-slate-800:not([class*="dark:text-"]) {
  color: var(--text-main) !important;
}
.dark .text-slate-700:not([class*="dark:text-"]) {
  color: var(--text-muted) !important;
}
.dark .text-slate-655:not([class*="dark:text-"]),
.dark .text-slate-600:not([class*="dark:text-"]) {
  color: var(--text-muted) !important;
}
.dark .text-slate-500:not([class*="dark:text-"]) {
  color: var(--text-muted) !important;
}
.dark .text-slate-400:not([class*="dark:text-"]) {
  color: var(--text-muted) !important;
}
.dark .text-purple-600:not([class*="dark:text-"]) {
  color: var(--color-accent) !important;
}
.dark .hover\:text-purple-700:hover {
  color: var(--color-accent) !important;
}
.dark .hover\:bg-purple-50\/30:hover {
  background-color: rgba(139, 92, 246, 0.1) !important;
}

/* Animated Fluid Wave Silhouette */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

/* --- Banner Mascot Animations --- */

/* Floating animation for banner container */
@keyframes float-banner {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}
.animate-float-banner {
  animation: float-banner 5s ease-in-out infinite;
}

/* Core pulsing animation */
@keyframes core-pulse-banner {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); }
}
.robot-full-body .robot-core-glow {
  animation: core-pulse-banner 2s ease-in-out infinite;
}

/* Head bobbing/tilting animation */
@keyframes head-tilt-banner {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.robot-full-body .robot-head {
  animation: head-tilt-banner 3s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Antenna wobble animation */
@keyframes antenna-wobble-left-banner {
  0%, 100% { transform: rotate(-8deg) scaleY(1); }
  50% { transform: rotate(-13deg) scaleY(1.08); }
}
@keyframes antenna-wobble-right-banner {
  0%, 100% { transform: rotate(8deg) scaleY(1); }
  50% { transform: rotate(13deg) scaleY(1.08); }
}
.robot-full-body .robot-antenna-left {
  animation: antenna-wobble-left-banner 2.5s ease-in-out infinite;
  transform-origin: bottom right;
}
.robot-full-body .robot-antenna-right {
  animation: antenna-wobble-right-banner 2.5s ease-in-out infinite;
  transform-origin: bottom left;
}

/* Unique welcoming wave/pointing animation for arms in banner */
@keyframes arm-wave-left-banner {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(5deg); }
}
@keyframes arm-wave-right-banner {
  0%, 100% { transform: rotate(-120deg); }
  50% { transform: rotate(-95deg); }
}
.robot-full-body .robot-arm-left {
  animation: arm-wave-left-banner 3s ease-in-out infinite alternate;
  transform-origin: top center;
}
.robot-full-body .robot-arm-right {
  animation: arm-wave-right-banner 1.5s ease-in-out infinite alternate;
  transform-origin: top center;
}

/* --- 3D AI Core Mascot --- */

.ai-core-3d-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 380px;
  height: 380px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.ai-core-3d {
  position: relative;
  width: 320px;
  height: 320px;
  transform-style: preserve-3d;
  animation: float-banner 5s ease-in-out infinite;
}

.core-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #22D3EE, #8B5CF6 60%, #4C1D95);
  box-shadow: 0 0 70px rgba(34, 211, 238, 0.85), inset 0 0 25px rgba(255, 255, 255, 0.6);
  animation: core-pulse 2s ease-in-out infinite;
}

@keyframes core-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 60px rgba(34, 211, 238, 0.75); }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 85px rgba(34, 211, 238, 1); }
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.ring-1 {
  width: 230px;
  height: 230px;
  margin-top: -115px;
  margin-left: -115px;
  border: 2.5px solid rgba(34, 211, 238, 0.45);
  transform: rotateX(65deg) rotateY(10deg);
  animation: spin-orbit-1 6s linear infinite;
}

.ring-2 {
  width: 280px;
  height: 280px;
  margin-top: -140px;
  margin-left: -140px;
  border: 2.5px solid rgba(139, 92, 246, 0.5);
  transform: rotateX(50deg) rotateY(-25deg);
  animation: spin-orbit-2 9s linear infinite;
}

.ring-3 {
  width: 330px;
  height: 330px;
  margin-top: -165px;
  margin-left: -165px;
  border: 2.5px solid rgba(34, 211, 238, 0.4);
  transform: rotateX(30deg) rotateY(40deg);
  animation: spin-orbit-3 12s linear infinite;
}

.orbit-node {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
}

.node-1 {
  background: #22D3EE;
  box-shadow: 0 0 12px #22D3EE, 0 0 25px #22D3EE;
}

.node-2 {
  background: #C084FC;
  box-shadow: 0 0 12px #C084FC, 0 0 25px #C084FC;
}

.node-3 {
  background: #22D3EE;
  box-shadow: 0 0 12px #22D3EE, 0 0 25px #22D3EE;
}

@keyframes spin-orbit-1 {
  from { transform: rotateX(65deg) rotateY(10deg) rotateZ(0deg); }
  to { transform: rotateX(65deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes spin-orbit-2 {
  from { transform: rotateX(50deg) rotateY(-25deg) rotateZ(360deg); }
  to { transform: rotateX(50deg) rotateY(-25deg) rotateZ(0deg); }
}

@keyframes spin-orbit-3 {
  from { transform: rotateX(30deg) rotateY(40deg) rotateZ(0deg); }
  to { transform: rotateX(30deg) rotateY(40deg) rotateZ(360deg); }
}

@keyframes float-banner {
  0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(5deg); }
  50% { transform: translateY(-12px) rotateY(15deg) rotateX(-5deg); }
}

/* Hover Acceleration & Core Reactivity */
.ai-core-3d-container:hover .core-sphere {
  background: radial-gradient(circle at 30% 30%, #F472B6, #8B5CF6 60%, #4C1D95);
  box-shadow: 0 0 60px rgba(244, 114, 182, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.6);
  transform: scale(1.15);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.ai-core-3d-container:hover .ring-1 {
  animation-duration: 2.5s;
  border-color: rgba(244, 114, 182, 0.6);
  transition: border-color 0.5s ease;
}

.ai-core-3d-container:hover .ring-2 {
  animation-duration: 4s;
  border-color: rgba(139, 92, 246, 0.7);
  transition: border-color 0.5s ease;
}

.ai-core-3d-container:hover .ring-3 {
  animation-duration: 5s;
  border-color: rgba(244, 114, 182, 0.5);
  transition: border-color 0.5s ease;
}

.core-sphere {
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}


/* --- Category Bubbles (Orbiting UI Nodes) --- */

.category-bubble {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(107, 70, 193, 0.15);
  box-shadow: 0 10px 30px rgba(107, 70, 193, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 25;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.dark .category-bubble {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.bubble-dev {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.bubble-image {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.bubble-text {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.bubble-seo {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Hover effects */
.category-bubble:hover {
  transform: scale(1.2) !important;
  z-index: 40;
}

.bubble-dev:hover {
  border-color: #22D3EE;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.bubble-image:hover {
  border-color: #A855F7;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.bubble-text:hover {
  border-color: #6366F1;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.bubble-seo:hover {
  border-color: #10B981;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Floating animation variants for bubbles to look fluid and natural */
@keyframes float-bubble-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}
@keyframes float-bubble-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-6deg); }
}
@keyframes float-bubble-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(6px) rotate(-4deg); }
}
@keyframes float-bubble-4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(6deg); }
}

.animate-float-bubble-1 {
  animation: float-bubble-1 4s ease-in-out infinite alternate;
}
.animate-float-bubble-2 {
  animation: float-bubble-2 4.5s ease-in-out infinite alternate;
}
.animate-float-bubble-3 {
  animation: float-bubble-3 5s ease-in-out infinite alternate;
}
.animate-float-bubble-4 {
  animation: float-bubble-4 3.5s ease-in-out infinite alternate;
}

/* Step Number Badge styling and animation */
.step-number-badge {
  background-color: #A855F7 !important;
  transform: translate(-50%, 0) scale(1) !important;
  box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.25), 0 4px 6px -4px rgba(168, 85, 247, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.step-number-badge:hover {
  transform: translate(-50%, -6px) scale(1.15) !important;
  box-shadow: 0 15px 30px rgba(168, 85, 247, 0.6) !important;
}

/* --- Testimonial Carousel --- */
.testimonial-card {
  position: relative;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(34, 211, 238, 0.2)) border-box;
  border: 1.5px solid transparent;
  border-radius: 24px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--glass-shadow);
}

.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.12), 0 0 25px rgba(34, 211, 238, 0.08) !important;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(34, 211, 238, 0.5)) border-box;
}

.testimonial-card:hover .testimonial-avatar {
  transform: scale(1.1);
}

.testimonial-avatar {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Star Shimmer Animation */
@keyframes star-shimmer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

.shimmer-star {
  color: #FBBF24;
  display: inline-block;
}

.shimmer-star:nth-child(1) { animation: star-shimmer 2.5s infinite ease-in-out 0.1s; }
.shimmer-star:nth-child(2) { animation: star-shimmer 2.5s infinite ease-in-out 0.3s; }
.shimmer-star:nth-child(3) { animation: star-shimmer 2.5s infinite ease-in-out 0.5s; }
.shimmer-star:nth-child(4) { animation: star-shimmer 2.5s infinite ease-in-out 0.7s; }
.shimmer-star:nth-child(5) { animation: star-shimmer 2.5s infinite ease-in-out 0.9s; }

/* Active dot transition */
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(168, 85, 247, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.carousel-dot.active {
  width: 24px;
  border-radius: 4px;
  background-color: #A855F7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* --- Premium Unified Global Header Styles --- */
.global-nav-pill {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.92), rgba(79, 70, 229, 0.92)) padding-box,
              linear-gradient(135deg, rgba(224, 242, 254, 0.3), rgba(168, 85, 247, 0.3)) border-box;
  border: 1.5px solid transparent !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.dark .global-nav-pill {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.92), rgba(49, 46, 129, 0.92)) padding-box,
              linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(168, 85, 247, 0.35)) border-box;
}

.logo-outer-circle {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 35px rgba(168, 85, 247, 0.35), 0 0 25px rgba(34, 211, 238, 0.25);
  border: 3px solid rgba(168, 85, 247, 0.35) !important;
}

.logo-outer-circle:hover {
  transform: scale(1.08) rotate(8deg);
  box-shadow: 0 16px 45px rgba(168, 85, 247, 0.45), 0 0 35px rgba(34, 211, 238, 0.4);
  border-color: rgba(34, 211, 238, 0.7) !important;
}

header#global-nav-header {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

header#global-nav-header.scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

header#global-nav-header.scrolled .global-nav-pill {
  box-shadow: 0 12px 30px rgba(109, 40, 217, 0.25);
  background-color: rgba(109, 40, 217, 0.95) !important;
}

.dark header#global-nav-header.scrolled .global-nav-pill {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  background-color: rgba(88, 28, 135, 0.9) !important;
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #A855F7, #22D3EE);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.header-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* --- Solid Purple Footer Styles --- */
#footer {
  background-color: #581c87 !important;
  color: #ffffff !important;
  box-shadow: 0 -10px 30px rgba(88, 28, 135, 0.4);
}

#footer a {
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

#footer ul li a i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

#footer ul li a:hover i {
  color: #ffffff !important;
  transform: translateX(4px) scale(1.15);
}

/* Floating animation for decorative icons */
@keyframes footer-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(6deg); }
}

#footer .animate-bounce {
  animation: footer-float 3s ease-in-out infinite;
}

/* Toast container style transition */
.footer-toast {
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(100px);
}

/* --- Premium Ultra-Luxury Tool Card Design Upgrade --- */
.tool-card {
  position: relative !important;
  border-radius: 1.5rem !important;
  padding: 1.6rem !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease, background 0.35s ease !important;
  border: 1.5px solid rgba(140, 46, 225, 0.15) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  box-shadow: 0 12px 32px -10px rgba(140, 46, 225, 0.1), inset 0 1.5px 0 rgba(255, 255, 255, 0.9) !important;
  overflow: hidden !important;
}

.dark .tool-card {
  border: 1.5px solid rgba(140, 46, 225, 0.25) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Neon Top Glow Accent Bar */
.tool-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #8C2EE1, #3b82f6, #22d3ee, #ec4899) !important;
  opacity: 0.4 !important;
  transition: opacity 0.35s ease, height 0.35s ease !important;
}

/* Premium Hover effects */
.tool-card:hover {
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: 0 25px 50px -12px rgba(140, 46, 225, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(140, 46, 225, 0.5) !important;
}

.tool-card:hover::before {
  opacity: 1 !important;
  height: 4px !important;
}

.dark .tool-card:hover {
  box-shadow: 0 30px 55px -15px rgba(140, 46, 225, 0.4), 0 0 30px rgba(34, 211, 238, 0.2), inset 0 1.5px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(34, 211, 238, 0.5) !important;
}

/* 3D Glass Icon Pod Hover Animations */
.tool-card .w-10, .tool-card .w-12 {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important;
}

.tool-card:hover .w-10, .tool-card:hover .w-12 {
  transform: scale(1.12) rotate(6deg) !important;
  box-shadow: 0 10px 24px rgba(140, 46, 225, 0.35) !important;
}

/* Shine overlay effect on hover */
.tool-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
  z-index: 5;
  pointer-events: none;
}

.tool-card:hover::after {
  left: 150%;
  transition: all 0.75s ease-in-out;
}

.dark .tool-card::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
}

/* Category indicator upgrade */
.tool-card span.text-xs, .tool-card span.text-\[10px\] {
  transition: all 0.3s ease;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Tool name underline trace on hover */
.tool-card h3 {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

/* Arrow translation on card hover */
.tool-card:hover .fa-arrow-right {
  transform: translateX(5px) !important;
  color: #8C2EE1 !important;
}

.dark .tool-card:hover .fa-arrow-right {
  color: #22D3EE !important;
}

/* --- 3D Glassmorphic AI Dashboard Styles --- */

.perspective-container {
  perspective: 1200px;
}

.hero-3d-card {
  transform: rotateY(-8deg) rotateX(6deg) translateZ(0);
  box-shadow: 
    0 25px 50px -12px rgba(107, 70, 193, 0.2),
    0 0 30px rgba(139, 92, 246, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.hero-3d-card:hover {
  transform: rotateY(-2deg) rotateX(2deg) scale(1.02) translateZ(10px);
  box-shadow: 
    0 35px 60px -15px rgba(107, 70, 193, 0.35),
    0 0 45px rgba(139, 92, 246, 0.3),
    inset 0 1px 3px rgba(255, 255, 255, 0.8);
}

.dark .hero-3d-card {
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.7),
    0 0 35px rgba(139, 92, 246, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.dark .hero-3d-card:hover {
  box-shadow: 
    0 35px 65px -15px rgba(139, 92, 246, 0.4),
    0 0 50px rgba(34, 211, 238, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

/* Floating Badge Animations */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

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

.animate-float-slow {
  animation: float-slow 4.5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 5.5s ease-in-out infinite 0.8s;
}

/* Equalizer Bars Live Keyframes */
@keyframes eq-bar-1 { 0%, 100% { height: 25%; } 50% { height: 90%; } }
@keyframes eq-bar-2 { 0%, 100% { height: 75%; } 50% { height: 30%; } }
@keyframes eq-bar-3 { 0%, 100% { height: 40%; } 50% { height: 100%; } }
@keyframes eq-bar-4 { 0%, 100% { height: 95%; } 50% { height: 45%; } }
@keyframes eq-bar-5 { 0%, 100% { height: 60%; } 50% { height: 85%; } }

.animate-eq-1 { animation: eq-bar-1 1.2s ease-in-out infinite; }
.animate-eq-2 { animation: eq-bar-2 1.5s ease-in-out infinite 0.2s; }
.animate-eq-3 { animation: eq-bar-3 1.1s ease-in-out infinite 0.4s; }
.animate-eq-4 { animation: eq-bar-4 1.4s ease-in-out infinite 0.1s; }
.animate-eq-5 { animation: eq-bar-5 1.3s ease-in-out infinite 0.3s; }

/* ==========================================================================
   Comprehensive Mobile Responsiveness & Fluid Layout Enhancements
   ========================================================================== */

/* Universal fluid container & overflow protection */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure images and media never breach viewport width */
img, video, canvas, iframe, svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* Prevent any horizontal overflow */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Header Pill Mobile Styling */
  #global-nav-header {
    top: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .global-nav-pill {
    height: 3.5rem !important;
    padding-left: 4.8rem !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  [dir="rtl"] .global-nav-pill {
    padding-right: 4.8rem !important;
    padding-left: 0.5rem !important;
  }

  .logo-outer-circle {
    width: 4.5rem !important;
    height: 4.5rem !important;
    left: -0.25rem !important;
  }

  [dir="rtl"] .logo-outer-circle {
    right: -0.25rem !important;
    left: auto !important;
  }

  .logo-outer-circle img {
    height: 2.75rem !important;
  }

  /* Utility Buttons Mobile Spacing */
  #global-nav-header .space-x-3 > :not([hidden]) ~ :not([hidden]),
  #global-nav-header .space-x-4 > :not([hidden]) ~ :not([hidden]),
  #global-nav-header .space-x-6 > :not([hidden]) ~ :not([hidden]),
  #global-nav-header .space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0.25rem !important;
  }

  /* Adjust hero section padding on mobile to provide generous vertical space below header */
  section.relative.pt-48,
  section.relative.pt-32,
  section.relative.pt-20,
  section.relative.pt-24,
  section.relative.pt-28,
  section.relative.pt-40,
  section.relative.pt-44 {
    padding-top: 6.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* Tool main workspace mobile padding */
  main {
    padding-top: 5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cards & Inputs Mobile Responsiveness */
  .glass-panel, .tool-card, .glass-card {
    border-radius: 1.25rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  input[type="text"], input[type="url"], input[type="search"], select, textarea {
    font-size: 13px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Specific left-padding for inputs with left search icons */
  #directory-search-input,
  #search-input,
  #spotlight-search-input {
    padding-left: 2.75rem !important;
    padding-right: 1rem !important;
  }

  /* Mobile Tables & Codeblocks Touch Scrolling */
  table, .codeblock-content, pre {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mobile Typography scaling */
  h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  h2 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  p {
    font-size: 0.8125rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Mobile Cyber Bot Widget Scaling */
  .cyber-bot-widget {
    bottom: 12px !important;
    right: 12px !important;
    transform: scale(0.72) !important;
    transform-origin: bottom right !important;
    z-index: 100 !important;
  }
  .cyber-bot-widget:hover {
    transform: scale(0.78) !important;
  }

  /* Tool action buttons and tabs responsive wrap */
  .format-tab, .calc-tab, .tool-tab {
    font-size: 12px !important;
    padding: 0.45rem 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .global-nav-pill {
    height: 3.35rem !important;
    padding-left: 4.2rem !important;
    padding-right: 0.35rem !important;
  }

  [dir="rtl"] .global-nav-pill {
    padding-right: 4.2rem !important;
    padding-left: 0.35rem !important;
  }

  .logo-outer-circle {
    width: 3.85rem !important;
    height: 3.85rem !important;
    left: -0.2rem !important;
  }

  [dir="rtl"] .logo-outer-circle {
    right: -0.2rem !important;
    left: auto !important;
  }

  .logo-outer-circle img {
    height: 2.35rem !important;
  }

  #lang-toggle {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    font-size: 9px !important;
  }

  .glass-panel, .tool-card, .glass-card {
    padding: 0.875rem !important;
  }

  main {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    padding-top: 4.75rem !important;
  }
}

/* ==========================================================================
   MASTER EYE-SATISFYING TOOL CARD DESIGN (Premium Glass & Soft Glow)
   ========================================================================== */
.tool-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(147, 51, 234, 0.28) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px -10px rgba(147, 51, 234, 0.12), 0 4px 12px -2px rgba(147, 51, 234, 0.05) !important;
}

.tool-card.hidden,
.tool-card[style*="display: none"] {
  display: none !important;
}

.dark .tool-card {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 10px 35px -10px rgba(147, 51, 234, 0.25), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.tool-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  border-color: rgba(147, 51, 234, 0.65) !important;
  box-shadow: 0 20px 45px -12px rgba(147, 51, 234, 0.25), 0 0 0 1px rgba(147, 51, 234, 0.1) !important;
}

/* Hide cluttery background corner blobs */
.tool-card > .absolute.top-0.right-0 {
  display: none !important;
}

/* Rich Gradient Icon Box */
.tool-card .w-12.h-12 {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 1rem !important;
  font-size: 1.15rem !important;
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px -4px rgba(147, 51, 234, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tool-card .w-12.h-12 i {
  color: #ffffff !important;
}

.tool-card:hover .w-12.h-12 {
  transform: scale(1.12) rotate(4deg) !important;
  box-shadow: 0 12px 20px -4px rgba(147, 51, 234, 0.5) !important;
}

/* Title Styling - Crystal Clear Slate with Purple Hover Glow */
.tool-card h3 {
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
  color: #0f172a !important;
  transition: color 0.2s ease !important;
}

.tool-card:hover h3 {
  color: #9333ea !important;
}

.dark .tool-card h3 {
  color: #f8fafc !important;
}

.dark .tool-card:hover h3 {
  color: #c084fc !important;
}

/* Description styling */
.tool-card p {
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.dark .tool-card p {
  color: #94a3b8 !important;
}

/* Footer CTA Alignment & Arrow Animation */
.tool-card .mt-6 {
  margin-top: 1.25rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.dark .tool-card .mt-6 {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.tool-card .fa-arrow-right {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tool-card:hover .fa-arrow-right {
  transform: translateX(5px) !important;
}

.dark .tool-card p {
  color: #94a3b8 !important;
}

/* Footer CTA Alignment */
.tool-card .mt-6 {
  margin-top: 1.25rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.dark .tool-card .mt-6 {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.tool-card .fa-arrow-right {
  transition: transform 0.3s ease !important;
}

/* ==========================================================================
   DUAL INFINITE MARQUEE TESTIMONIAL LAYERS (100+ Reviews Showcase)
   ========================================================================== */
@keyframes marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee-left {
  display: flex !important;
  width: max-content !important;
  animation: marquee-left 90s linear infinite !important;
}

.animate-marquee-right {
  display: flex !important;
  width: max-content !important;
  animation: marquee-right 90s linear infinite !important;
}

.testimonial-card-item {
  width: 380px !important;
  flex-shrink: 0 !important;
  background: var(--bg-card) !important;
  border: 1.5px solid rgba(140, 46, 225, 0.2) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

.testimonial-card-item:hover {
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(140, 46, 225, 0.6) !important;
  box-shadow: 0 15px 35px -8px rgba(140, 46, 225, 0.25) !important;
}

.dark .testimonial-card-item {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}

/* ==========================================================================
   INTERACTIVE 3D SPOTLIGHT SEARCH SYSTEM & ANIMATED RESULTS DROPDOWN
   ========================================================================== */

/* Fullscreen Spotlight Dimmed Glass Backdrop (Disabled blur to keep screen crystal clear) */
#spotlight-backdrop {
  display: none !important;
}

/* Elevated Search Bar Container with 3D Flying Animation */
.spotlight-parent-active {
  position: relative !important;
  z-index: 999990 !important;
}

.spotlight-focused-wrapper {
  position: relative !important;
  z-index: 999999 !important;
  animation: search-fly-front 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes search-fly-front {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.06) translateY(-10px); }
  100% { transform: scale(1.035) translateY(-5px); }
}

.spotlight-focused-input {
  box-shadow: 0 20px 50px -5px rgba(140, 46, 225, 0.45), 0 0 30px rgba(34, 211, 238, 0.35) !important;
  border-color: rgba(140, 46, 225, 0.9) !important;
  outline: none !important;
}

.dark .spotlight-focused-input {
  border-color: rgba(34, 211, 238, 0.9) !important;
  box-shadow: 0 25px 60px -5px rgba(140, 46, 225, 0.55), 0 0 35px rgba(34, 211, 238, 0.45) !important;
}

.spotlight-focused-wrapper {
  position: relative !important;
  z-index: 1000000 !important;
}

.spotlight-parent-active,
section.spotlight-parent-active,
section:has(.spotlight-results-modal.show) {
  position: relative !important;
  z-index: 100000 !important;
  overflow: visible !important;
}

/* 3D Glassmorphic Results Dropdown Panel */
.spotlight-results-modal {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999999 !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1.5px solid rgba(140, 46, 225, 0.45) !important;
  border-radius: 1.5rem !important;
  padding: 1rem !important;
  box-shadow: 0 35px 80px -15px rgba(140, 46, 225, 0.45), 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 1.5px 0 rgba(255, 255, 255, 0.9) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
}

.dark .spotlight-results-modal {
  background: rgba(11, 15, 25, 0.98) !important;
  border-color: rgba(140, 46, 225, 0.55) !important;
  box-shadow: 0 40px 90px -15px rgba(140, 46, 225, 0.55), 0 0 40px rgba(34, 211, 238, 0.3), inset 0 1.5px 0 rgba(255, 255, 255, 0.15) !important;
}

.spotlight-results-modal.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

/* Individual Search Result Item 3D Micro-Interactions */
.spotlight-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.85rem 1rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: 1rem !important;
  background: rgba(248, 250, 252, 0.8) !important;
  border: 1px solid rgba(140, 46, 225, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  animation: spotlight-item-enter 0.35s ease forwards !important;
}

.dark .spotlight-item {
  background: rgba(17, 24, 39, 0.7) !important;
  border-color: rgba(140, 46, 225, 0.2) !important;
}

.spotlight-item:hover, .spotlight-item.active-nav {
  transform: translateX(6px) scale(1.015) !important;
  background: rgba(140, 46, 225, 0.1) !important;
  border-color: rgba(140, 46, 225, 0.5) !important;
  box-shadow: 0 8px 20px -4px rgba(140, 46, 225, 0.25) !important;
}

.dark .spotlight-item:hover, .dark .spotlight-item.active-nav {
  background: rgba(140, 46, 225, 0.22) !important;
  border-color: rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 8px 24px -4px rgba(34, 211, 238, 0.3) !important;
}

.spotlight-item .fa-arrow-right {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.spotlight-item:hover .fa-arrow-right {
  transform: translateX(5px) scale(1.2) !important;
  color: #8C2EE1 !important;
}

.dark .spotlight-item:hover .fa-arrow-right {
  color: #22D3EE !important;
}

@keyframes spotlight-item-enter {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SUPER PREMIUM MODERN PURPLE TOOL CARD DESIGN SYSTEM (2026 EDITION)
   ========================================================================== */
.tool-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 1.25rem !important;
  padding: 1.25rem !important;
  background: linear-gradient(135deg, rgba(140, 46, 225, 0.08) 0%, rgba(99, 102, 241, 0.12) 100%), #ffffff !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(140, 46, 225, 0.22) !important;
  box-shadow: 0 10px 30px -10px rgba(140, 46, 225, 0.1) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  min-width: 0 !important;
}

.tool-card > div:first-of-type {
  min-width: 0 !important;
  width: 100% !important;
}

.dark .tool-card {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.5) !important;
}

/* Hover Glowing Purple Aura & 3D Lift */
.tool-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 20px 45px -10px rgba(140, 46, 225, 0.35), inset 0 0 15px rgba(168, 85, 247, 0.15) !important;
}

.dark .tool-card:hover {
  border-color: rgba(192, 132, 252, 0.7) !important;
  box-shadow: 0 25px 55px -10px rgba(168, 85, 247, 0.45), inset 0 0 20px rgba(192, 132, 252, 0.2) !important;
}

/* Top Accent Glow Bar */
.tool-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #A855F7 0%, #6366F1 50%, #38BDF8 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.tool-card:hover::before {
  opacity: 1 !important;
  z-index: 10 !important;
}

/* Background Ambient Purple Glow Ball */
.tool-card-glow-bg {
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  width: 110px !important;
  height: 110px !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(99, 102, 241, 0.15) 60%, transparent 80%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  transition: transform 0.5s ease, opacity 0.5s ease !important;
  opacity: 0.7 !important;
}

.tool-card:hover .tool-card-glow-bg {
  transform: scale(1.7) !important;
  opacity: 1 !important;
}

/* Icon Box Styling */
.tool-card-icon-box {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(135deg, #8C2EE1 0%, #6366F1 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  box-shadow: 0 6px 16px -2px rgba(140, 46, 225, 0.35) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  flex-shrink: 0 !important;
}

.tool-card:hover .tool-card-icon-box {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 10px 22px -2px rgba(140, 46, 225, 0.5) !important;
}

/* Badge Styles */
.tool-card-badge {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: 9999px !important;
  background: rgba(140, 46, 225, 0.12) !important;
  color: #8C2EE1 !important;
  border: 1px solid rgba(140, 46, 225, 0.25) !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: 55% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dark .tool-card-badge {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #E9D5FF !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.tool-card:hover .tool-card-badge {
  background: linear-gradient(90deg, #8C2EE1, #6366F1) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(140, 46, 225, 0.35) !important;
}

/* Clean Compact Tool Name */
.tool-card-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
  transition: color 0.3s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.dark .tool-card-title {
  color: #F8FAFC !important;
}

.tool-card:hover .tool-card-title {
  color: #8C2EE1 !important;
}

.dark .tool-card:hover .tool-card-title {
  color: #C084FC !important;
}

/* Card Description */
.tool-card-desc {
  font-size: 0.78rem !important;
  color: #64748B !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  margin-bottom: 0.5rem !important;
  min-width: 0 !important;
}

.dark .tool-card-desc {
  color: #CBD5E1 !important;
}

/* Card Footer & 3D Rotating Arrow Button */
.tool-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
  margin-top: auto !important;
}

.dark .tool-card-footer {
  border-top-color: rgba(147, 51, 234, 0.25) !important;
}

.tool-card-cta-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #8C2EE1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.dark .tool-card-cta-text {
  color: #C084FC !important;
}

/* 3D Rotating Arrow Button */
.tool-card-arrow-btn {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 9999px !important;
  background: rgba(140, 46, 225, 0.12) !important;
  color: #8C2EE1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  border: 1px solid rgba(140, 46, 225, 0.25) !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  perspective: 1000px !important;
}

.dark .tool-card-arrow-btn {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #E9D5FF !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}

/* 3D Around Movement on Hover */
.tool-card:hover .tool-card-arrow-btn {
  background: linear-gradient(135deg, #8C2EE1 0%, #6366F1 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: rotate3d(1, 1, 1, 360deg) scale(1.2) !important;
  box-shadow: 0 0 16px rgba(140, 46, 225, 0.6) !important;
}

/* ==========================================================================
   INFINITE CYBER MARQUEE SEATBELT ANIMATIONS
   ========================================================================== */
@keyframes marqueeLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee-left {
  display: flex !important;
  width: max-content !important;
  animation: marqueeLeft 30s linear infinite !important;
}

.animate-marquee-right {
  display: flex !important;
  width: max-content !important;
  animation: marqueeRight 30s linear infinite !important;
}

.animate-marquee-left:hover,
.animate-marquee-right:hover {
  animation-play-state: paused !important;
}


/* ==========================================================================
   GLOBAL COMMAND PALETTE (CTRL + K) MODAL
   ========================================================================== */
.command-palette-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.8) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 12vh !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease !important;
}

.command-palette-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.command-palette-modal {
  width: 100% !important;
  max-width: 42rem !important;
  background: #0F172A !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 25px 60px -15px rgba(140, 46, 225, 0.45) !important;
  overflow: hidden !important;
  transform: scale(0.95);
  transition: transform 0.2s ease !important;
}

.command-palette-backdrop.open .command-palette-modal {
  transform: scale(1) !important;
}

/* ==========================================================================
   FAQ ACCORDION STYLES
   ========================================================================== */
.faq-accordion-item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-accordion-item.open {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 10px 30px -10px rgba(140, 46, 225, 0.2) !important;
}

.faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease !important;
}

.faq-accordion-item.open .faq-answer {
  max-height: 250px !important;
  opacity: 1 !important;
  padding-top: 0.75rem !important;
}

.faq-accordion-item .faq-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.faq-accordion-item.open .faq-icon {
  transform: rotate(180deg) !important;
  color: #C084FC !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE & TOUCH UTILITIES
   ========================================================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

@media (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Responsive AI Robot companion on small mobile screens */
  .chatbot-container:not(.dragged) {
    bottom: 12px !important;
    right: 8px !important;
    transform: scale(0.65) !important;
    transform-origin: bottom right !important;
    z-index: 40 !important;
  }

  .speech-bubble {
    display: none !important;
  }

  /* Remove blue tap highlight on mobile tap */
  button, input, select, textarea, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Prevent code blocks and text pre from overflowing mobile layout */
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-x: auto !important;
  }

  /* Responsive tables */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Full-Screen Pop-Up Search Modal Backdrop & Shadow */
#global-popup-search-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  background-color: rgba(10, 15, 30, 0.97) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
}

.dark #global-popup-search-modal {
  background-color: rgba(5, 8, 20, 0.98) !important;
}

/* ==========================================================================
   GLOBAL FAVORITE BUTTON & TOAST NOTIFICATION STYLES
   ========================================================================== */
.favorite-toggle-btn {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.favorite-toggle-btn:hover {
  transform: scale(1.15) !important;
  background-color: rgba(236, 72, 153, 0.15) !important;
  color: #ec4899 !important;
  border-color: rgba(236, 72, 153, 0.4) !important;
}

.favorite-toggle-btn.is-favorite {
  background: rgba(236, 72, 153, 0.18) !important;
  color: #ec4899 !important;
  border-color: rgba(236, 72, 153, 0.5) !important;
}

.favorite-toggle-btn.is-favorite i {
  color: #ec4899 !important;
  font-weight: 900 !important;
}

/* Global Favorite Toast Alert */
#fav-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99999;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(100px) scale(0.9);
  opacity: 0;
  pointer-events: none;
}

#fav-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   CUTE CYBER AI COMPANION (ASTRO / EVE BOT AESTHETIC - NO ORBIT RING)
   ========================================================================== */
.cyber-bot-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 160;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cyber-bot-widget:hover {
  transform: scale(1.1) translateY(-4px);
}

/* Floating Animation */
@keyframes bot-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.cyber-bot-floating {
  animation: bot-float 3.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Head Capsule */
.cyber-bot-head {
  width: 76px;
  height: 66px;
  background: radial-gradient(circle at 35% 30%, #f3e8ff 0%, #d8b4fe 30%, #a855f7 70%, #7e22ce 100%);
  border-radius: 50% / 46%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.6), inset 0 3px 8px rgba(255, 255, 255, 0.95);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Antennae */
.cyber-bot-antenna-l,
.cyber-bot-antenna-r {
  position: absolute;
  top: -18px;
  width: 3.5px;
  height: 20px;
  background: linear-gradient(to top, #a855f7, #38bdf8);
  border-radius: 4px;
  z-index: 1;
}

.cyber-bot-antenna-l {
  left: 20px;
  transform: rotate(-18deg);
}

.cyber-bot-antenna-r {
  right: 20px;
  transform: rotate(18deg);
}

.cyber-bot-antenna-l::after,
.cyber-bot-antenna-r::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  background: #00f0ff;
  border-radius: 50%;
  box-shadow: 0 0 12px #00f0ff, 0 0 22px #00f0ff;
  border: 1.5px solid #ffffff;
}

/* Dark Screen Faceplate */
.cyber-bot-screen {
  width: 56px;
  height: 48px;
  background: radial-gradient(circle at center, #0b1120 0%, #030712 100%);
  border-radius: 50% / 48%;
  border: 1.5px solid rgba(34, 211, 238, 0.45);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.95), 0 0 14px rgba(34, 211, 238, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
  position: relative;
}

/* Dual Glowing Concentric Ring Eyes */
.cyber-bot-eyes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 40px;
  margin-top: 2px;
}

.cyber-bot-eye {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #00f0ff;
  box-shadow: 0 0 10px #00f0ff, inset 0 0 6px #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cyber-bot-eye::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff, 0 0 10px #00f0ff;
}

/* Cute Smile / Mouth */
.cyber-bot-mouth {
  width: 10px;
  height: 3px;
  background: #00f0ff;
  border-radius: 9999px;
  margin-top: 4px;
  box-shadow: 0 0 6px #00f0ff;
}

/* Torso Orb */
.cyber-bot-torso {
  width: 52px;
  height: 42px;
  background: radial-gradient(circle at 35% 30%, #f3e8ff 0%, #d8b4fe 35%, #a855f7 70%, #7e22ce 100%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.85);
  margin-top: -6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

/* Concentric Core Chest Ring */
.cyber-bot-core {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #020617 0%, #0f172a 100%);
  border: 2px solid #00f0ff;
  box-shadow: 0 0 12px #00f0ff, inset 0 0 6px #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-bot-core-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  border: 1px solid #ffffff;
}

/* Floating Capsule Hands */
.cyber-bot-hand-l,
.cyber-bot-hand-r {
  position: absolute;
  top: 6px;
  width: 15px;
  height: 28px;
  background: radial-gradient(circle at 30% 30%, #e9d5ff 0%, #a855f7 60%, #6366f1 100%);
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
  z-index: 9;
}

.cyber-bot-hand-l {
  left: -13px;
  transform: rotate(18deg);
}

.cyber-bot-hand-r {
  right: -13px;
  transform: rotate(-18deg);
}

/* Jet Thruster Glow */
.cyber-bot-thruster {
  width: 34px;
  height: 10px;
  background: radial-gradient(ellipse at center, #00f0ff 0%, #a855f7 60%, transparent 90%);
  border-radius: 50%;
  filter: blur(2px);
  box-shadow: 0 0 16px #00f0ff, 0 0 24px #a855f7;
  margin-top: 3px;
}







/* Universal Hero & Directory Search Input Padding */
.hero-search-input {
  padding-left: 3.25rem !important;
}