class CustomFeatures extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .feature-card {
                    transition: all 0.3s ease;
                }
                .feature-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
                }
            </style>
            <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 space-bg">
                <div class="max-w-7xl mx-auto">
                    <div class="text-center mb-16">
                        <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    <span class="gradient-text">Cosmic Capabilities</span>
                        </h2>
                        <p class="text-gray-400 max-w-2xl mx-auto">
                            Harness the power of artificial general intelligence with features that transcend traditional AI boundaries.
                        </p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="feature-card glass-card p-8 rounded-xl hover-scale">
                            <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
                                <i data-feather="brain" class="text-primary-500 w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Advanced Reasoning</h3>
                            <p class="text-gray-400">
                                Multi-step logical reasoning with contextual understanding that mimics human thought processes.
                            </p>
                        </div>
                        <div class="feature-card glass-card p-8 rounded-xl hover-scale">
                            <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
                                <i data-feather="layers" class="text-primary-500 w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Multi-Modal Processing</h3>
                            <p class="text-gray-400">
                                Simultaneous processing of text, images, audio, and video with unified understanding.
                            </p>
                        </div>
                        <div class="feature-card glass-card p-8 rounded-xl hover-scale">
                            <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
                                <i data-feather="database" class="text-primary-500 w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Infinite Context</h3>
                            <p class="text-gray-400">
                                Handle conversations and documents of any length with our extended context window technology.
                            </p>
                        </div>
                        <div class="feature-card glass-card p-8 rounded-xl hover-scale">
                            <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
                                <i data-feather="shield" class="text-primary-500 w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Quantum Security</h3>
                            <p class="text-gray-400">
                                Advanced encryption protocols that ensure your data remains secure against even quantum attacks.
                            </p>
                        </div>
                        <div class="feature-card glass-card p-8 rounded-xl hover-scale">
                            <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
                                <i data-feather="globe" class="text-primary-500 w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Global Deployment</h3>
                            <p class="text-gray-400">
                                Deploy across multiple regions with automatic load balancing and intelligent resource allocation.
                            </p>
                        </div>
                        <div class="feature-card glass-card p-8 rounded-xl hover-scale">
                            <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
                                <i data-feather="code" class="text-primary-500 w-6 h-6"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Developer SDK</h3>
                            <p class="text-gray-400">
                                Comprehensive tools and APIs for seamless integration into your existing applications and workflows.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
`;
    }
}
customElements.define('custom-features', CustomFeatures);