/* Base styles for Founder template */
body {
    background-color: #0a0a0f;
    color: #ffffff;
}

/* Custom styles for gradients and complex animations */
.gradient-fire {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffa559 100%);
}

.gradient-fire-text {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffa559 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-stacker {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

.gradient-stacker-text {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-card {
    background: linear-gradient(145deg, #1a1a24 0%, #12121a 100%);
}

.hero-bg {
    background: radial-gradient(ellipse at 20% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255, 140, 66, 0.1) 0%, transparent 50%), linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
}

.stacker-bg {
    background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
}

.shadow-fire {
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.3);
}

.shadow-fire-lg {
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.3);
}

.shadow-stacker {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

/* Particle animations with different delays */
.particle-1 {
    animation-delay: 0s;
}

.particle-2 {
    animation-delay: 2s;
}

.particle-3 {
    animation-delay: 4s;
}

.particle-4 {
    animation-delay: 1s;
}

.particle-5 {
    animation-delay: 3s;
}

.particle-6 {
    animation-delay: 5s;
}

.particle-7 {
    animation-delay: 2.5s;
}

.particle-8 {
    animation-delay: 1.5s;
}

/* Animation classes for scroll reveal */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

    .animate-on-scroll.animate-in {
        opacity: 1;
        transform: translateY(0);
    }

.animate-from-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease;
}

    .animate-from-left.animate-in {
        opacity: 1;
        transform: translateX(0);
    }

.animate-from-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease 0.2s;
}

    .animate-from-right.animate-in {
        opacity: 1;
        transform: translateX(0);
    }

/* Initial hero animations */
.hero-animate-1 {
    animation: fadeInUp 0.6s ease forwards;
}

.hero-animate-2 {
    animation: fadeInUp 0.6s ease 0.1s forwards;
    opacity: 0;
}

.hero-animate-3 {
    animation: fadeInUp 0.6s ease 0.2s forwards;
    opacity: 0;
}

.hero-animate-4 {
    animation: fadeInUp 0.6s ease 0.3s forwards;
    opacity: 0;
}

.hero-animate-5 {
    animation: fadeInUp 0.6s ease 0.4s forwards;
    opacity: 0;
}

.hero-animate-6 {
    animation: fadeInUp 0.6s ease 0.5s forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Service card top border animation */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffa559 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before,
.service-card.featured::before {
    opacity: 1;
}

/* Stacker card top border */
.stacker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

/* Form select arrow */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238888a0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Code syntax colors */
.code-keyword {
    color: #c678dd;
}

.code-string {
    color: #98c379;
}

.code-value {
    color: #ff6b35;
}