/* Base styles and utilities */

/* Hide scrollbars */
::-webkit-scrollbar {
    display: none;
}
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom gradient backgrounds - Brighter, more vibrant */
.gradient-hero {
    background: #FAFBFF;
    position: relative;
    overflow: hidden;
}

.gradient-contact {
    background: linear-gradient(135deg, #00D9FF 0%, #4C6EF5 50%, #7C3AED 100%);
}

/* Cloud gradient blob */
.cloud-gradient {
    position: absolute;
    width: 120%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.3) 0%, rgba(249, 72, 146, 0.3) 40%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
}

.cloud-gradient::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 100%;
    top: -20%;
    left: -10%;
    background: radial-gradient(ellipse at center, rgba(249, 72, 146, 0.4) 0%, transparent 60%);
    filter: blur(80px);
    transform: rotate(-20deg);
}

.cloud-gradient::after {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    bottom: -30%;
    right: -20%;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.4) 0%, transparent 60%);
    filter: blur(100px);
    transform: rotate(15deg);
}

/* Brighter accent colors */
.text-accent {
    color: #00D9FF;
}

.bg-accent {
    background-color: #00D9FF;
}

/* Animated Gradient Text */
.gradient-text-animated {
    background: linear-gradient(-45deg, #00D9FF, #4C6EF5, #7C3AED, #F94892, #00D9FF);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 16s ease-in-out infinite;
}

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