body {
    font-family: 'Inter', 'Sarabun', sans-serif;
}

.hero-gradient {
    background: radial-gradient(circle at 10% 20%, rgba(240, 253, 244, 1) 0%, rgba(255, 255, 255, 1) 90%);
}

html.dark .hero-gradient {
    background: radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 0.95) 0%, rgba(2, 6, 23, 1) 90%);
}

html.dark .ai-grid-overlay {
    background-image:
        linear-gradient(rgba(74, 222, 128, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 222, 128, 0.16) 1px, transparent 1px);
}

/* AI scanner animations (copied from processing page) */
.ai-scanner-line {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #16a34a;
    box-shadow: 0 0 15px 4px rgba(22, 163, 74, 0.45);
    top: 0;
    left: 0;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
}

.ai-scanning .ai-scanner-line {
    opacity: 1;
    animation: scan-move 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scan-move {
    0% {
        top: 0%;
    }

    50% {
        top: calc(100% - 3px);
    }

    100% {
        top: 0%;
    }
}

.ai-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.14) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ai-scanning .ai-grid-overlay {
    opacity: 1;
}

.scan-status {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    opacity: 0;
    transition: opacity .2s ease;
}

.ai-scanning .scan-status {
    opacity: 1;
}

/* Headline AI text animation */
.ai-animated {
    display: inline-block;
    background: linear-gradient(90deg, #22c55e 0%, #15803d 25%, #06b6d4 50%, #15803d 75%, #22c55e 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.12;
    /* give extra vertical space for combining marks */
    padding-bottom: 0.04em;
    /* small padding to avoid diacritic clipping */
    vertical-align: middle;
    -webkit-text-stroke: 0.01px transparent;
    /* help subpixel rendering for overlapping marks */
    animation: ai-shimmer 2.6s linear infinite, ai-pop 3s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, background-position;
}

@keyframes ai-shimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes ai-pop {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.6px);
    }
}