@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
        
        body {
            background-color: #0B0C10;
            color: #e5e7eb;
            font-family: 'Inter', system_ui, sans-serif;
            overflow-x: hidden;
        }
        .heading { font-family: 'Space Grotesk', sans-serif; }
        
        .glass {
            background: rgba(5, 10, 31, 0.65);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(0, 240, 255, 0.15);
        }
        
        .hero-bg {
            background: radial-gradient(circle at 50% 30%, rgba(0, 240, 255, 0.12) 0%, transparent 60%);
        }
        
        .parallax {
            transition: transform 0.1s linear;
        }
        
        .glow-cyan { text-shadow: 0 0 30px #00F0FF; }
        .glow-purple { text-shadow: 0 0 30px #B829EA; }
        
        .card-hover:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 0 60px -10px rgb(0 240 255 / 0.4);
        }
        
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 4s infinite;
        }
        /* FAQ Item Active State */
.faq-item.active {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 30px -10px rgba(0, 240, 255, 0.2);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: #00F0FF;
}

/* Smooth max-height transition */
.faq-content {
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-content {
    max-height: 1000px; /* Large enough to fit content */
    transition: max-height 0.8s cubic-bezier(1, 0, 1, 0);
}
        /* Add this inside your existing <style> tag */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.animate-marquee-left {
    display: inline-flex;
    animation: scroll-left 40s linear infinite;
}

.animate-marquee-right {
    display: inline-flex;
    animation: scroll-right 40s linear infinite;
}

/* Pause the scrolling when the user hovers over the cards */
.animate-marquee-left:hover, .animate-marquee-right:hover {
    animation-play-state: paused;
}

.zodiac-icon {
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.2));
    transition: all 0.3s ease;
}
.zodiac-icon:hover {
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8));
    transform: scale(1.1) translateY(-5px);
}
.glass{
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

@keyframes floatPhone{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-18px);
    }
}

@keyframes floatSlow{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-12px);
    }
}

@keyframes floatReverse{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(12px);
    }
}

.animate-floatPhone{
    animation: floatPhone 6s ease-in-out infinite;
}

.animate-floatSlow{
    animation: floatSlow 7s ease-in-out infinite;
}

.animate-floatReverse{
    animation: floatReverse 8s ease-in-out infinite;
}

.animate-spin-slow{
    animation: spin 60s linear infinite;
}

.floating-card{
    animation: floatSlow 8s ease-in-out infinite;
}

/* HEIGHT-BASED RESPONSIVE */

@media (max-height: 800px){

    .hero-compact-hide{
        display:none !important;
    }

    .hero-title{
        line-height:0.95;
    }

    .hero-section{
        padding-top:7rem;
        padding-bottom:4rem;
    }

}

/* MOBILE */

@media (max-width: 1024px){

    .hero-section{
        text-align:center;
    }

    .hero-section .max-w-xl{
        margin-left:auto;
        margin-right:auto;
    }

}

/* REDUCE MOTION FOR PERFORMANCE */

@media (prefers-reduced-motion: reduce){

    .animate-floatPhone,
    .animate-floatSlow,
    .animate-floatReverse,
    .animate-spin-slow{
        animation:none !important;
    }

}