/* Custom styles to integrate the color palette and enhance design */
body {
    font-family: 'Inter', sans-serif;
    background-color: #111827; /* Dark background for contrast */
    color: #F9FAFB;
}
.color-palette {
    --c1: #6DE1D2; /* Teal */
    --c2: #FFD63A; /* Yellow */
    --c3: #FFA955; /* Orange */
    --c4: #F75A5A; /* Red */
}
.text-c1 { color: var(--c1); }
.bg-c1 { background-color: var(--c1); }
.border-c1 { border-color: var(--c1); }
.hover\:bg-c1-dark:hover { background-color: #58c7b9; }

.text-c2 { color: var(--c2); }
.bg-c2 { background-color: var(--c2); }

.text-c3 { color: var(--c3); }
.bg-c3 { background-color: var(--c3); }

.text-c4 { color: var(--c4); }
.bg-c4 { background-color: var(--c4); }

/* Glassmorphism effect for cards */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animated gradient for hero section */
#hero {
    position: relative;
    overflow: hidden;
}
.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(45deg, var(--c1), var(--c2), var(--c3), var(--c4));
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
    opacity: 0.15;
}
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Scroll-triggered animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom form focus styles */
.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(109, 225, 210, 0.5);
    border-color: var(--c1);
}