body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    letter-spacing: normal;
    word-spacing: normal;
}

/* Ensure all text elements render properly */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
button,
li,
div {
    font-family: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-rendering: inherit;
}

.hero-gradient {
    background: radial-gradient(circle at 50% 0%, rgba(240, 249, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
}

.dark .hero-gradient {
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(16, 185, 129, 0.15) 0%, rgba(59, 130, 246, 0.08) 30%, transparent 70%);
}

.mock-scroll::-webkit-scrollbar {
    width: 6px;
}

.mock-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mock-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 20px;
}

@keyframes drag-path {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    60% {
        transform: translate(240px, 50px) scale(1.05);
        opacity: 1;
    }

    80% {
        transform: translate(240px, 50px) scale(1);
        opacity: 0;
    }

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

@keyframes drop-zone-pulse {

    0%,
    55% {
        border-color: rgb(229, 231, 235);
        background-color: rgb(249, 250, 251);
        transform: scale(1);
    }

    65% {
        border-color: #10b981;
        background-color: rgba(16, 185, 129, 0.05);
        transform: scale(1.02);
    }

    75% {
        border-color: rgb(229, 231, 235);
        background-color: rgb(249, 250, 251);
        transform: scale(1);
    }
}

@keyframes drop-zone-pulse-dark {

    0%,
    55% {
        border-color: rgb(55, 65, 81);
        background-color: rgb(30, 41, 59);
        transform: scale(1);
    }

    65% {
        border-color: #10b981;
        background-color: rgba(16, 185, 129, 0.1);
        transform: scale(1.02);
    }

    75% {
        border-color: rgb(55, 65, 81);
        background-color: rgb(30, 41, 59);
        transform: scale(1);
    }
}

.animate-drag {
    animation: drag-path 6s infinite ease-in-out;
    animation-delay: 1s;
}

.animate-drop-zone {
    animation: drop-zone-pulse 6s infinite ease-in-out;
    animation-delay: 1s;
}

.dark .animate-drop-zone {
    animation-name: drop-zone-pulse-dark;
}

/* Fix gradient text display */
.bg-clip-text {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
    position: relative;
}

/* Ensure gradient text is visible and not just selectable */
.bg-clip-text::selection {
    -webkit-text-fill-color: transparent;
    background-color: rgba(99, 102, 241, 0.3);
}

/* Force gradient to render properly - use explicit colors */
span.bg-clip-text.bg-gradient-to-r {
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Specific fixes for hero gradient - slate colors */
h1 .bg-clip-text.bg-gradient-to-r.from-slate-700.to-slate-900 {
    background-image: linear-gradient(to right, #334155, #0f172a) !important;
    line-height: 1.2;
    padding: 0.1em 0;
    display: inline-block;
}

.dark h1 .bg-clip-text.bg-gradient-to-r.from-slate-100.to-slate-400 {
    background-image: linear-gradient(to right, #f1f5f9, #94a3b8) !important;
    line-height: 1.2;
    padding: 0.1em 0;
    display: inline-block;
}

/* Prevent text clipping in hero */
h1 {
    overflow: visible;
    line-height: 1.1;
}

/* Mobile menu animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

/* Specific fixes for CTA section gradient - emerald to blue */
h2 .bg-clip-text.bg-gradient-to-r.from-emerald-400.to-blue-500 {
    background-image: linear-gradient(to right, #34d399, #3b82f6) !important;
}

/* Fallback for any gradient text */
.bg-clip-text.bg-gradient-to-r {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}