@keyframes colorShift {
            0% {
                color: #0099ff;
                text-shadow: 0 0 10px #0099ff, 0 0 20px #0099ff, 0 0 30px #0099ff;
            }
            50% {
                color: #00ffa6;
                text-shadow: 0 0 10px #00ffa6, 0 0 20px #00ffa6, 0 0 30px #00ffa6;
            }
            100% {
                color: #0099ff;
                text-shadow: 0 0 10px #0099ff, 0 0 20px #0099ff, 0 0 30px #0099ff;
            }
        }

        @keyframes pulse {
            0%, 100% {
                color: #0099ff;
                transform: scale(1);
            }
            50% {
                color: #00ffa6;
                transform: scale(1.05);
            }
        }

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

        .animate-color {
            animation: colorShift 4s ease-in-out infinite;
        }

        .animate-pulse-custom {
            animation: pulse 2s ease-in-out infinite;
        }

        .gradient-text {
            background: linear-gradient(90deg, #0099ff, #00ffa6, #0099ff, #00ffa6);
            background-size: 300% 300%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease infinite;
font-size: 80px;
        }


  @keyframes v-eat {
            0% { transform: translateY(-300px); opacity: 0; }
            20% { opacity: 1; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(180px); }
            60% { opacity: 0; transform: translateY(220px); }
            100% { opacity: 0; transform: translateY(220px); }
        }
        @keyframes v-shake-heavy {
            0%, 100% { transform: translate(0,0); }
            50% { transform: translate(1.5px, 1px) rotate(0.8deg); }
        }
        .v-anim-resume { animation: v-eat 3s ease-in-out forwards; }
        .v-anim-machine { animation: v-shake-heavy 0.1s infinite; }
        .v-logo-pop { 
            position: absolute; width: 52px; height: 52px; background: #fff; border-radius: 12px; 
            display: flex; align-items: center; justify-content: center; z-index: 10; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.15); border: 2px solid #f0f0f0;
            transition: opacity 0.4s;
        }

.split-card {
  position: relative;
  z-index: 1;
}

/* Glow layer */
.split-glow {
  position: absolute;
  inset: -3px;
  border-radius: 1.75rem;
  filter: blur(24px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

/* Show glow on hover */
.split-card:hover .split-glow {
  opacity: 0.45;
}

/* Glow colors */
.split-glow.blue {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.split-glow.green {
  background: linear-gradient(135deg, #16a34a, #4ade80);
}

/* Ensure card content stays above glow */
.split-card > *:not(.split-glow) {
  position: relative;
  z-index: 1;
}

/* ===============================
   Metrics Section Dot Animation
   =============================== */

.metrics-section {
  position: relative;
  overflow: hidden;
}

.metrics-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.metrics-section .container {
  position: relative;
  z-index: 1;
}

.metrics-particle {
  position: absolute;
  border-radius: 50%;
  animation: metrics-float ease-in-out infinite;
}

@keyframes metrics-float {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-14px);
    opacity: 1;
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .metrics-particle {
    animation: none;
  }
}

.footer {
  position: relative;
  background: radial-gradient(
      900px 400px at 20% 20%,
      rgba(30, 136, 229, 0.12),
      transparent 60%
    ),
    radial-gradient(
      800px 350px at 80% 70%,
      rgba(0, 230, 118, 0.12),
      transparent 60%
    ),
    linear-gradient(180deg, #020617, #000000);
  color: #e5e7eb;
  padding: 80px 0 40px;
  overflow: hidden;
}

/* Soft glow overlay */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(30,136,229,0.05),
      rgba(0,230,118,0.05),
      rgba(30,136,229,0.05)
    );
  opacity: 0.6;
  pointer-events: none;
}

/* Footer headings */
.footer h4 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Footer links */
.footer-links a,
.footer-legal a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-legal a:hover {
  color: #60a5fa; /* blue accent */
}

/* Brand text */
.footer-brand p {
  color: #a7f3d0;
  margin-top: 10px;
}

/* Social icon */
.footer-social .social-link {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: #60a5fa;
  transition: all 0.3s ease;
}

.footer-social .social-link:hover {
  background: rgba(96,165,250,0.2);
  color: #93c5fd;
  transform: translateY(-3px);
}

/* Footer bottom */
.footer-bottom {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  color: #9ca3af;
  font-size: 14px;
}

.ftl{margin-left: -20px;}
@media (max-width: 768px) {
  .ftl {
    margin-left: 0px;
  }
}

 @media (max-width: 768px) {
  .gradient-text {
    font-size: 42px !important;
    line-height: 1.1;
  }

  .hero-container {
    flex-direction: column;
    text-align: center;
  }

  .hero-animation {
    display: none;
  }
}
     .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  height: 45px; /* adjust if needed */
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* Main Title */
.brand-title {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(90deg, #1E6FD9, #2BB6A3, #6BCF3A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tagline */
.brand-tagline {
  font-size: 10.8px;
  color: #8A8FC6;; /* blue from logo */
  font-weight: 500;
}

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    background:white;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    border-radius:6px;
    display:none;
    flex-direction:column;
    min-width:280px;
}

.dropdown-menu a{
    padding:10px 15px;
    text-decoration:none;
    color:#333;
    display:block;
}

.dropdown-menu a:hover{
    background:#ffffff;
    color:#000000;
}

.dropdown:hover .dropdown-menu{
    display:flex;
}

@media(max-width:768px){

   
    
    .dropdown-menu{
        position:static;
        box-shadow:none;
    }

    .dropdown-menu.show{
        display:flex;
    }
}   /* ========================================