/* GoTask Design System */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #f59e0b;
    --background-light: #ffffff;
    --background-dark: #0f172a;
}

/* Custom Tailwind Config (handled via CDN but extra styles here) */
.text-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Base resets or extras if needed */
body {
    scroll-behavior: smooth;
}

/* Pricing Toggle Animation */
#pricing-toggle span {
    transition: transform 0.2s ease-in-out;
}

/* Infinite Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Fade gradients on the edges of the marquee */
.marquee-container::before,
.marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Dark mode adjustments for fade gradients */
.dark .marquee-container::before {
    background: linear-gradient(to right, #0f0f23 0%, rgba(15, 15, 35, 0) 100%);
}

.dark .marquee-container::after {
    background: linear-gradient(to left, #0f0f23 0%, rgba(15, 15, 35, 0) 100%);
}