/* From landing.html block 1 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

        * {
            font-family: 'Fredoka', sans-serif;
        }

        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        @keyframes float-slow {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
            50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
        }

        @keyframes slide-up {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes bounce-in {
            0% { transform: scale(0); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .float { animation: float 3s ease-in-out infinite; }
        .float-slow { animation: float-slow 4s ease-in-out infinite; }
        .float-delay-1 { animation-delay: 0.5s; }
        .float-delay-2 { animation-delay: 1s; }
        .float-delay-3 { animation-delay: 1.5s; }
        .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
        .slide-up { animation: slide-up 0.6s ease-out forwards; }
        .bounce-in { animation: bounce-in 0.5s ease-out forwards; }

        /* Gradient backgrounds */
        .gradient-hero {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
        }

        .gradient-features {
            background: linear-gradient(180deg, #f8fafc 0%, #dbeafe 100%);
        }

        .gradient-cta {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }

        /* Block styles matching the app */
        .block-motion { background-color: #4C97FF; }
        .block-looks { background-color: #9966FF; }
        .block-control { background-color: #FFAB19; }
        .block-events { background-color: #FFBF00; }
        .block-sensing { background-color: #5CB1D6; }
        .block-console { background-color: #10B981; }
        .block-data { background-color: #FF8C1A; }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #60a5fa; }

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

        /* Feature card hover */
        .feature-card {
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        /* Button hover effects */
        .btn-primary {
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        /* Floating blocks decoration */
        .floating-block {
            position: absolute;
            padding: 8px 16px;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

/* From landing.html block 2 */
@keyframes cookieSlide{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Cookie consent banner (extracted from inline styles for CSP compliance) */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: #111827; border-top: 1px solid #374151;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); padding: 1rem 0;
    animation: cookieSlide .3s ease-out;
}
.cookie-banner-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.cookie-learn-more { color: #A78BFA; text-decoration: underline; }
.cookie-btn {
    padding: .5rem 1.25rem; border-radius: .5rem;
    font-size: .8125rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.cookie-btn-reject {
    border: 1px solid #374151; background: transparent; color: #9CA3AF;
}
.cookie-btn-accept {
    border: none; background: #8B5CF6; color: #fff;
}

.hero-canvas-dots {
    background-image: radial-gradient(#3b82f6 1px, transparent 1px);
    background-size: 15px 15px;
}