.glass-effect {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .tilt-neon {
      font-family: "Tilt Neon", sans-serif;
      font-variation-settings: "XROT" 15, "YROT" -10;
    }


    .gradient-text {
      background: linear-gradient(135deg, #22d3ee, #0891b2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .morphism-card {
      background: linear-gradient(145deg, #ffffff, #f0f4f8);
      box-shadow: 20px 20px 40px #d1d9e6, -20px -20px 40px #ffffff;
    }

    .gradient-bg {
      background: linear-gradient(135deg, #0eb2d0 0%, #06afce 100%);
    }

    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .floating-shapes .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    .floating-shapes .shape:nth-child(1) {
      width: 80px;
      height: 80px;
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .floating-shapes .shape:nth-child(2) {
      width: 60px;
      height: 60px;
      top: 60%;
      right: 15%;
      animation-delay: 2s;
    }

    .floating-shapes .shape:nth-child(3) {
      width: 100px;
      height: 100px;
      bottom: 20%;
      left: 20%;
      animation-delay: 4s;
    }
    
    
    
    /* -------------------------------
   COLORS (you can use these as variables)
--------------------------------*/
:root {
  --color-primary-50: #f0fdff;
  --color-primary-100: #ccfbf1;
  --color-primary-200: #99f6e4;
  --color-primary-300: #5eead4;
  --color-primary-400: #22d3ee;
  --color-primary-500: #06b6d4;
  --color-primary-600: #0891b2;
  --color-primary-700: #0e7490;
  --color-primary-800: #155e75;
  --color-primary-900: #164e63;

  --color-primary-dark: #0891b2;
  --color-custom-cyan: #06B6D4;

  --font-raleway: 'Raleway', sans-serif;
  --font-tilt-neon: 'Tilt Neon', sans-serif;
  --font-tilt-warp: 'Tilt Warp', sans-serif;
}

/* -------------------------------
   ANIMATIONS
--------------------------------*/

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

/* Fade in */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glowing box */
@keyframes glowing {
  0% {
    box-shadow: 0 0 5px #06afce, 0 0 10px #06afce, 0 0 15px #06afce;
  }
  50% {
    box-shadow: 0 0 15px #06afce, 0 0 25px #06afce, 0 0 35px #06afce;
  }
  100% {
    box-shadow: 0 0 5px #06afce, 0 0 10px #06afce, 0 0 15px #06afce;
  }
}

/* Glowing text */
@keyframes glow-text {
  0% {
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.5),
                 0 0 30px rgba(34, 211, 238, 0.5),
                 0 0 40px rgba(34, 211, 238, 0.5);
  }
  100% {
    text-shadow: 0 0 30px rgba(34, 211, 238, 0.8),
                 0 0 40px rgba(34, 211, 238, 0.8),
                 0 0 50px rgba(34, 211, 238, 0.8);
  }
}

/* Glowing box variation */
@keyframes glow-box {
  0% {
    box-shadow: 0 0 5px #06AFCE, 0 0 10px #06AFCE, 0 0 15px #06AFCE;
  }
  50% {
    box-shadow: 0 0 15px #06AFCE, 0 0 25px #06AFCE, 0 0 35px #06AFCE;
  }
  100% {
    box-shadow: 0 0 5px #06AFCE, 0 0 10px #06AFCE, 0 0 15px #06AFCE;
  }
}

/* Slide-in (bottom) */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide-in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -------------------------------
   ANIMATION CLASSES (Tailwind equivalents)
--------------------------------*/

.float {
  animation: float 6s ease-in-out infinite;
}

.pulse-slow {
  animation: pulse 3s infinite;
}

.fade-in {
  animation: fadeIn 1s ease-out;
}

.glowing {
  animation: glowing 1.8s infinite ease-in-out;
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

.glow-text {
  animation: glow-text 2s ease-in-out infinite alternate;
}

.glow-box {
  animation: glow-box 1.8s infinite ease-in-out;
}

.slide-in {
  animation: slideIn 0.5s ease-out forwards;
}

/* -------------------------------
   FONT CLASSES (optional helpers)
--------------------------------*/
.font-raleway {
  font-family: var(--font-raleway);
}
.font-tilt-neon {
  font-family: var(--font-tilt-neon);
}
.font-tilt-warp {
  font-family: var(--font-tilt-warp);
}