<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeyondBrain.org - Future of Intelligence</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">

    <script>
        // Check if the device is mobile
        // Check screen size and show message if screen is too small
        function checkScreenSize() {
    if (window.innerWidth < 768) {
        document.body.innerHTML = '<div style="text-align: center; font-family: Arial, sans-serif; padding: 20px; color: white;"><h1>Desktop Only</h1><p>This website can only be accessed on a desktop computer.</p></div>';
    }
}

window.onload = checkScreenSize;
window.addEventListener('resize', checkScreenSize);






        // // Disable right click
        // document.addEventListener('contextmenu', function(e) {
        //     e.preventDefault();
        // });

        // // Disable keyboard shortcuts that could be used to view source or save page
        // document.addEventListener('keydown', function(e) {
        //     if (
        //         // Ctrl+S, Ctrl+U, Ctrl+Shift+I, F12
        //         (e.ctrlKey && (e.keyCode === 83 || e.keyCode === 85)) || 
        //         (e.ctrlKey && e.shiftKey && e.keyCode === 73) ||
        //         e.keyCode === 123
        //     ) {
        //         e.preventDefault();
        //     }
        // });
    </script>

    <style>
        :root {
            --primary: #6366f1;
            --secondary: #a855f7;
            --accent: #2dd4bf;
            --background: #0f172a;
            --text: #f8fafc;
            --card: #1e293b;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Space Grotesk', sans-serif;
        }

        body {
            background: var(--background);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .gradient-bg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at top right, 
                rgba(99, 102, 241, 0.15) 0%,
                rgba(168, 85, 247, 0.15) 25%,
                rgba(45, 212, 191, 0.15) 50%,
                transparent 70%);
            z-index: -1;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
            position: relative;
        }

        .slide {
            display: none;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 2rem;
            background: var(--card);
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 4rem;
        }

        .slide.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        h1 {
            font-size: 4.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 2rem;
            position: relative;
            font-weight: 800;
            letter-spacing: -0.05em;
            line-height: 1.1;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: -1rem;
            left: 0;
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 2px;
        }

        h2 {
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 2rem;
            position: relative;
            font-weight: 800;
            letter-spacing: -0.05em;
            line-height: 1.1;

            /* color: var(--accent);
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            margin-bottom: 2rem;
            font-weight: 700; */
        }
        h6 {
           color: var(--accent);
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            margin-bottom: 2rem;
            font-weight: 700;
        }

        p, li {
            font-size: 1.25rem;
            line-height: 1.8;
            color: var(--text);
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

        ul {
            list-style: none;
            padding-left: 0;
        }

        li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1.5rem;
        }

        li::before {
            content: "›";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }

        button {
            background: rgba(99, 102, 241, 0.1);
            border: 2px solid var(--primary);
            color: var(--text);
            padding: 1rem 2rem;
            font-size: 1rem;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 600;
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            backdrop-filter: blur(12px);
        }

        button:hover {
            background: var(--primary);
            box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
            transform: translateY(-2px);
        }

        .slide-counter {
            position: fixed;
            top: 2rem;
            right: 2rem;
            font-size: 1.2rem;
            color: var(--text);
            background: rgba(30, 41, 59, 0.8);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            backdrop-filter: blur(8px);
        }

        .glitch {
            position: relative;
            display: inline-block;
        }

        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--card);
            clip: rect(0, 900px, 0, 0);
        }

        .glitch::before {
            left: 2px;
            text-shadow: -1px 0 var(--accent);
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }

        .glitch::after {
            left: -2px;
            text-shadow: 2px 0 var(--primary);
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim-1 {
            0% { clip: rect(20px, 900px, 28px, 0); }
            20% { clip: rect(51px, 900px, 18px, 0); }
            40% { clip: rect(42px, 900px, 80px, 0); }
            60% { clip: rect(62px, 900px, 32px, 0); }
            80% { clip: rect(27px, 900px, 89px, 0); }
            100% { clip: rect(14px, 900px, 56px, 0); }
        }

        @keyframes glitch-anim-2 {
            0% { clip: rect(25px, 900px, 99px, 0); }
            20% { clip: rect(48px, 900px, 44px, 0); }
            40% { clip: rect(65px, 900px, 37px, 0); }
            60% { clip: rect(10px, 900px, 92px, 0); }
            80% { clip: rect(87px, 900px, 11px, 0); }
            100% { clip: rect(31px, 900px, 77px, 0); }
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }


        li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

        li strong {
            position: relative;
            color: var(--accent);
            font-weight: 500;
        }

        @keyframes textGlitch {
            0% {
                opacity: 1;
                transform: translate(0);
                text-shadow: 0 0 0 var(--accent);
            }
            2% {
                opacity: 0.9;
                transform: translate(-2px, 1px);
                text-shadow: -1px 0 0 var(--primary), 1px 0 0 var(--secondary);
            }
            4% {
                opacity: 0.95;
                transform: translate(2px, -1px);
                text-shadow: 1px 0 0 var(--primary), -1px 0 0 var(--secondary);
            }
            6% {
                opacity: 1;
                transform: translate(0);
                text-shadow: 0 0 0 var(--accent);
            }
            100% {
                opacity: 1;
                transform: translate(0);
                text-shadow: 0 0 0 var(--accent);
            }
        }

        li strong::before {
            content: attr(data-text);
            position: absolute;
            left: -2px;
            text-shadow: 2px 0 var(--primary);
            top: 0;
            color: var(--accent);
            background: var(--card);
            overflow: hidden;
            clip: rect(0, 900px, 0, 0);
            /* animation: glitch-two 8s ease infinite alternate-reverse; */
        }

        li strong::after {
            content: attr(data-text);
            position: absolute;
            left: 2px;
            text-shadow: -2px 0 var(--secondary);
            top: 0;
            color: var(--accent);
            background: var(--card);
            overflow: hidden;
            clip: rect(0, 900px, 0, 0);
            /* animation: glitch-three 8.5s ease infinite alternate-reverse; */
        }

        @keyframes glitch-two {
            0% {
                clip: rect(74px, 900px, 76px, 0);
            }
            20% {
                clip: rect(25px, 900px, 99px, 0);
            }
            40% {
                clip: rect(96px, 900px, 78px, 0);
            }
            60% {
                clip: rect(12px, 900px, 34px, 0);
            }
            80% {
                clip: rect(87px, 900px, 45px, 0);
            }
            100% {
                clip: rect(20px, 900px, 56px, 0);
            }
        }

        @keyframes glitch-three {
            0% {
                clip: rect(65px, 900px, 89px, 0);
            }
            20% {
                clip: rect(15px, 900px, 87px, 0);
            }
            40% {
                clip: rect(54px, 900px, 43px, 0);
            }
            60% {
                clip: rect(89px, 900px, 55px, 0);
            }
            80% {
                clip: rect(23px, 900px, 67px, 0);
            }
            100% {
                clip: rect(43px, 900px, 78px, 0);
            }
        }

    </style>
</head>
<body>
    <div class="gradient-bg"></div>
    <canvas class="particles"></canvas>
    
    <div class="container">
        <div class="slide active" id="slide1" data-aos="fade-up">
            <h1 class="glitch" data-text="Pitch Deck">Pitch Deck</h1>
            <h2 >Making humanity smarter and paving the path to <br> Artificial General Intelligence (AGI)</h2>
            <p></p>
            <p>beyondbrain.org</p>
        </div>

        <div class="slide" id="slide2" data-aos="fade-up">
            <h1 class="glitch" data-text="The Problem">The Problem  <h1>With current AI systems like chatGPT and Claude</h1></h1> 
            <ul>
                <li><strong data-text="Cognitive Limitations:">Cognitive Limitations:</strong> Current systems fail to enhance human memory, reasoning, and creativity effectively.</li>
                <li><strong data-text="Data Scarcity:">Data Scarcity:</strong> Insufficient knowledge pathways hinder the holistic development of human intelligence.</li>
                <li><strong data-text="AGI Readiness:">AGI Readiness:</strong> The disconnect between human intelligence and advancing machine intelligence could create societal imbalances.</li>
                <li><strong data-text="The Future:">The Future:</strong> Imagine a future where machines surpass human thinking without ensuring humans are equally empowered. BeyondBrain aims to bridge this gap.</li>
            </ul>
        </div>

        <div class="slide" id="slide3" data-aos="fade-up">
            <h1 class="glitch" data-text="The Solution-">The Solution-</h1> <br>
            <h1>"Make humanity Smarter"</h1>
           
        </div>

        <div class="slide" id="slide4" data-aos="fade-up">
            <h1 class="glitch" data-text="BeyondBrain's Promise">BeyondBrain's Promise</h1>
            <ul>
                <li><strong data-text="Empowering Human Intelligence:">Empowering Human Intelligence:</strong> Tools to expand human cognition and creativity.</li>
                <li><strong data-text="Memory Enhancement:">Memory Enhancement:</strong> Techniques for better retention and recall to match AGI capabilities.</li>
                <li><strong data-text="Human-Machine Synergy:">Human-Machine Synergy:</strong> Developing smarter humans to align with smarter machines.</li>
            </ul>
        </div>

        <div class="slide" id="slide5" data-aos="fade-up">
            <h1 class="glitch" data-text="Enabling Smarter Humanity">Enabling Smarter Humanity</h1>
            <ul>
                <li><strong data-text="Cognitive Enhancement:">Cognitive Enhancement:</strong> AI-driven tools to improve reasoning, problem-solving, and creativity.</li>
                <li><strong data-text="Memory Optimization:">Memory Optimization:</strong> Personalized strategies for long-term retention.</li>
                <li><strong data-text="Collaborative Intelligence:">Collaborative Intelligence:</strong> Platforms for collective problem-solving and knowledge sharing.</li>
                <li><strong data-text="Progress Insights:">Progress Insights:</strong> Real-time analytics to track intellectual growth.</li>
            </ul>
        </div>

        <div class="slide" id="slide6" data-aos="fade-up">
            <h1 class="glitch" data-text="Let's Talk Business">Let's Talk Business</h1>
           
        </div>
        <div class="slide" id="slide7" data-aos="fade-up">
            <h1 class="glitch" data-text="A World of Opportunity">A World of Opportunity</h1>
            <ul>
                <li><strong data-text="AI & Human Development Sector:">AI & Human Development Sector:</strong> Growing focus on cognitive enhancement technologies.</li>
                <li><strong data-text="Global Demand:">Global Demand:</strong> Expanding interest in tools that complement machine intelligence.</li>
                <li><strong data-text="Target Audience:">Target Audience:</strong> Individuals, organizations, and governments aiming for intellectual empowerment.</li>
                <li><strong data-text="Geographic Focus:">Geographic Focus:</strong> Scalable solutions designed for a global audience.</li>
            </ul>
        </div>
        
        <div class="slide" id="slide8" data-aos="fade-up">
            <h1 class="glitch" data-text="Navigating Challenges and Opportunities">Navigating Challenges and Opportunities</h1>
            <ul>
                <li><strong data-text="Competitive Analysis:">Competitive Analysis:</strong> Differentiation from traditional AI and cognitive enhancement solutions.</li>
                <li><strong data-text="Potential Risks:">Potential Risks:</strong> Ethical considerations, data privacy concerns, and scalability challenges.</li>
                <li><strong data-text="Opportunities:">Opportunities:</strong> Leadership in AGI-human synergy, creating a smarter global workforce.</li>
            </ul>
        </div>
        
        <div class="slide" id="slide9" data-aos="fade-up">
            <h1 class="glitch" data-text="Building a Sustainable Future">Building a Sustainable Future</h1>
            <ul>
                <li><strong data-text="Individual Plans:">Individual Plans:</strong> Subscription-based cognitive enhancement tools.</li>
                <li><strong data-text="Enterprise Solutions:">Enterprise Solutions:</strong> Custom platforms for organizations and governments.</li>
                <li><strong data-text="Collaborative Intelligence:">Collaborative Intelligence:</strong> Peer-driven knowledge platforms.</li>
                <li><strong data-text="Research Partnerships:">Research Partnerships:</strong> Collaborations for AGI alignment and ethical AI development.</li>
            </ul>
        </div>
        

        
        <div class="slide" id="slide10" data-aos="fade-up">
            <h1 class="glitch" data-text="The Road Ahead">The Road Ahead</h1>
            <ul>
                <li><strong data-text="Milestone 1:">Milestone 1:</strong> Develop and launch core cognitive enhancement platform.</li>
                <li><strong data-text="Milestone 2:">Milestone 2:</strong> Scale with partnerships and expand feature set.</li>
                <li><strong data-text="Milestone 3:">Milestone 3:</strong> Establish global presence with millions of users.</li>
                <li><strong data-text="Milestone 4:">Milestone 4:</strong> Achieve alignment with leading AGI research efforts.</li>
            </ul>
        </div>
        
        <div class="slide" id="slide11" data-aos="fade-up">
            <h1 class="glitch" data-text="Meet the Visionaries">Meet the Visionaries</h1>
            <ul>
                <li><strong data-text="Founder & CEO:">Founder & CEO:</strong> Visionary in AGI and human intelligence enhancement.</li>
                <li><strong data-text="CTO:">CTO:</strong> Expert in AI systems and cognitive technologies.</li>
                <li><strong data-text="Advisors:">Advisors:</strong> Leaders in neuroscience, AI ethics, and global intelligence development.</li>
            </ul>
        </div>
        
        <div class="slide" id="slide12" data-aos="fade-up">
            <h1 class="glitch" data-text="Join Us in Shaping the Future">Join Us in Shaping the Future</h1>
            <ul>
                <li><strong data-text="Investment Goal:">Investment Goal:</strong> X Million $  to accelerate innovation and expansion.</li>
                <li><strong data-text="Usage of Funds:">Usage of Funds:</strong> Platform development, global scaling, and ethical AGI alignment.</li>
                <li><strong data-text="Urgency:">Urgency:</strong> The time to act is now—join us in empowering humanity to shape a smarter future.</li>
                <li><strong data-text="Contact:">Contact:</strong> www.beyondbrain.org | contact@beyondbrain.org</li>
            </ul>
        </div>

        <div class="slide" id="slide13" data-aos="fade-up">
            <h1 class="glitch" data-text="Thank You">Thank You</h1>
            <h2>
                "The best way to predict the future is to create it." – Peter Drucker
            </h2>
           
        </div>



        <div class="nav-buttons">
            <button onclick="changeSlide(-1)">Previous</button>
            <button onclick="changeSlide(1)">Next</button>
        </div>

        <div class="slide-counter">
            Slide <span id="current-slide">1</span> / <span id="total-slides">11</span>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });

        let currentSlide = 1;
        const totalSlides = document.querySelectorAll('.slide').length;
        document.getElementById('total-slides').textContent = totalSlides;

        function changeSlide(direction) {
            const currentSlideElement = document.querySelector(`#slide${currentSlide}`);
            currentSlideElement.classList.remove('active');
            
            currentSlide += direction;
            if (currentSlide > totalSlides) currentSlide = 1;
            if (currentSlide < 1) currentSlide = totalSlides;
            
            const nextSlideElement = document.querySelector(`#slide${currentSlide}`);
            nextSlideElement.classList.add('active');
            
            document.getElementById('current-slide').textContent = currentSlide;
        }

        // Particle animation
        const canvas = document.querySelector('.particles');
        const ctx = canvas.getContext('2d');
        let particles = [];

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 2;
                this.speedX = Math.random() * 0.5 - 0.25;
                this.speedY = Math.random() * 0.5 - 0.25;
                this.color = `rgba(99, 102, 241, ${Math.random() * 0.5})`;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                if (this.x > canvas.width) this.x = 0;
                if (this.x < 0) this.x = canvas.width;
                if (this.y > canvas.height) this.y = 0;
                if (this.y < 0) this.y = canvas.height;
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function initParticles() {
            particles = [];
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle());
            }
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });
            
            requestAnimationFrame(animateParticles);
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        initParticles();
        animateParticles();
    </script>
</body>
</html>