.mesh-bg {
    background-color: #0A0A1A;
    background-image: 
        radial-gradient(at 10% 20%, rgba(233, 69, 96, 0.08) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(26, 26, 46, 0.9) 0px, transparent 50%),
        radial-gradient(at 50% 10%, rgba(233, 69, 96, 0.05) 0px, transparent 40%);
    background-size: 200% 200%;
    animation: meshAnimation 15s ease infinite;
}

@keyframes meshAnimation {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/* Custom styles and marquee animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

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

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Custom scroll bar for neatness fully matched with warm light theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F5F5F4;
}
::-webkit-scrollbar-thumb {
  background: #2C2C2A;
  border: 1px solid #D6D6D4;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #EA580C;
}

/* Custom styles to handle speech bubble arrows */
.speech-arrow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff; /* Matches card background */
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.06));
    z-index: 10;
}

/* Speech arrow shadow helper */
.speech-arrow-border {
    position: absolute;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-bottom: 21px solid #f1f5f9; /* Matches card border color */
    z-index: 9;
}