body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #020617;
            /* slate-950 */
            color: #f8fafc;
        }

        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .text-gradient-gold {
            background: linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bg-gradient-gold {
            background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        }

        .glow-amber:hover {
            box-shadow: 0 0 30px rgba(217, 119, 6, 0.3);
        }

        @keyframes float {
            0% {
                transform: translateY(0px) rotateX(15deg) rotateY(-15deg);
            }

            50% {
                transform: translateY(-20px) rotateX(15deg) rotateY(-15deg);
            }

            100% {
                transform: translateY(0px) rotateX(15deg) rotateY(-15deg);
            }
        }

        .app-mockup {
            transform: rotateX(15deg) rotateY(-15deg);
            animation: float 6s ease-in-out infinite;
            perspective: 1000px;
        }

        .mesh-bg {
            background-image: radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.15) 0, transparent 50%),
                radial-gradient(at 100% 100%, rgba(30, 64, 175, 0.1) 0, transparent 50%);
        }

        .timeline-line {
            height: 0%;
            transition: height 0.5s ease-out;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .bento-item {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .bento-item:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(251, 191, 36, 0.3);
        }

        .icon-float {
            animation: iconPulse 3s ease-in-out infinite;
        }

        @keyframes iconPulse {

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

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

        .logo-glow {
            filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
        }