:root {
   --primary: 262 83% 58%;
   --primary-foreground: 210 40% 98%;
   --secondary: 32 98% 54%;
   --accent: 199 89% 48%;
   --background: 226 50% 98%;
   --foreground: 222 47% 11%;
   --border: 214 32% 91%;
 }

 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Nunito', sans-serif;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Fredoka', sans-serif;
 }

 .text-gradient {
   background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--secondary)));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   display: inline-block;
 }

 .glass-card {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.4);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
 }

 .blob-shape {
   position: absolute;
   filter: blur(80px);
   z-index: -1;
   opacity: 0.5;
   border-radius: 50%;
   pointer-events: none;
 }

 .reveal-up,
 .reveal-left,
 .reveal-right,
 .reveal-scale {
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
   will-change: transform, opacity;
 }

 .reveal-up {
   transform: translateY(30px);
 }

 .reveal-left {
   transform: translateX(-40px);
 }

 .reveal-right {
   transform: translateX(40px);
 }

 .reveal-scale {
   transform: scale(0.9);
 }

 .active {
   opacity: 1 !important;
   transform: translate(0) scale(1) !important;
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0) scale(1);
   }

   50% {
     transform: translateY(-20px) scale(1.05);
   }
 }

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

 .animate-float-fast {
   animation: float 4s ease-in-out infinite;
   animation-delay: 1s;
 }

 ::-webkit-scrollbar {
   width: 8px;
 }

 ::-webkit-scrollbar-track {
   background: #f1f1f1;
 }

 ::-webkit-scrollbar-thumb {
   background: hsl(var(--primary));
   border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #9333ea;
 }