<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudySmart - EPIC 3D Learning Platform</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(45deg, #000000, #FF8C00, #ffffff);
            background-size: 400% 400%;
            animation: gradientShift 8s ease infinite;
            overflow-x: hidden;
            perspective: 1000px;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* FIXED HEADER - TRANSPARENT WITH GLASS EFFECT */
        .navbar-3d {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(20px);
            border-bottom: 3px solid #FF8C00;
            transform-style: preserve-3d;
            transition: all 0.5s;
        }
        
        .navbar-3d.scrolled {
            background: rgba(0,0,0,0.9);
            transform: translateZ(50px);
            box-shadow: 0 20px 40px rgba(255,140,0,0.3);
        }
        
        .logo-3d {
            display: flex;
            align-items: center;
            gap: 15px;
            transform-style: preserve-3d;
        }
        
        .logo-3d:hover {
            transform: rotateY(20deg) translateZ(20px);
        }
        
        .logo-img {
            width: 50px;
            height: 50px;
            animation: logoFloat 3s ease-in-out infinite;
            filter: brightness(1.2) contrast(1.2);
        }
        
        @keyframes logoFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }
        
        .logo-text {
            font-size: 2rem;
            font-weight: 900;
            color: #FF8C00;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .nav-link-3d {
            color: white !important;
            font-weight: 600;
            margin: 0 15px;
            position: relative;
            transition: all 0.3s;
        }
        
        .nav-link-3d::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: #FF8C00;
            transition: width 0.3s;
        }
        
        .nav-link-3d:hover::after {
            width: 100%;
        }
        
        .nav-link-3d:hover {
            transform: translateY(-3px) translateZ(10px);
            color: #FF8C00 !important;
        }
        
        /* EPIC HERO SECTION */
        .hero-3d {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            transform-style: preserve-3d;
        }
        
        .hero-content {
            transform: translateZ(100px);
            animation: heroFloat 6s ease-in-out infinite;
        }
        
        @keyframes heroFloat {
            0%, 100% { transform: translateZ(100px) translateY(0); }
            50% { transform: translateZ(100px) translateY(-20px); }
        }
        
        .hero-title {
            font-size: 4.5rem;
            font-weight: 900;
            color: white;
            text-shadow: 0 10px 30px rgba(0,0,0,0.7);
            margin-bottom: 30px;
            animation: titleGlow 2s ease-in-out infinite alternate;
        }
        
        @keyframes titleGlow {
            from { text-shadow: 0 10px 30px rgba(0,0,0,0.7); }
            to { text-shadow: 0 10px 30px rgba(255,140,0,0.5), 0 0 50px rgba(255,140,0,0.3); }
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            color: rgba(255,255,255,0.9);
            margin-bottom: 40px;
            line-height: 1.6;
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .btn-epic {
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: 700;
            border: none;
            border-radius: 50px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            transform-style: preserve-3d;
            position: relative;
            overflow: hidden;
        }
        
        .btn-epic::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        
        .btn-epic:hover::before {
            left: 100%;
        }
        
        .btn-primary-epic {
            background: linear-gradient(45deg, #FF8C00, #FF4500);
            color: white;
            box-shadow: 0 10px 30px rgba(255,140,0,0.4);
        }
        
        .btn-primary-epic:hover {
            transform: translateY(-8px) translateZ(20px) scale(1.05);
            box-shadow: 0 20px 40px rgba(255,140,0,0.6);
            color: white;
        }
        
        .btn-outline-epic {
            background: transparent;
            color: white;
            border: 3px solid rgba(255,255,255,0.5);
            backdrop-filter: blur(10px);
        }
        
        .btn-outline-epic:hover {
            background: rgba(255,255,255,0.1);
            border-color: #FF8C00;
            transform: translateY(-8px) translateZ(20px) scale(1.05);
            color: white;
        }
        
        .hero-visual {
            text-align: center;
            transform: translateZ(80px);
        }
        
        .hero-icon {
            font-size: 20rem;
            color: #FF8C00;
            filter: drop-shadow(0 20px 40px rgba(255,140,0,0.4));
            animation: iconPulse 3s ease-in-out infinite;
        }
        
        @keyframes iconPulse {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.1) rotate(5deg); }
        }
        
        /* EPIC FEATURES */
        .features-3d {
            padding: 100px 0;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(20px);
        }
        
        .section-title {
            text-align: center;
            font-size: 3.5rem;
            font-weight: 800;
            color: white;
            margin-bottom: 80px;
            text-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        
        .feature-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255,140,0,0.3);
            border-radius: 25px;
            padding: 40px 30px;
            text-align: center;
            margin-bottom: 30px;
            transform-style: preserve-3d;
            transition: all 0.5s;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,140,0,0.2), transparent);
            transition: left 0.6s;
        }
        
        .feature-card:hover::before {
            left: 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-25px) translateZ(30px);
            box-shadow: 0 30px 60px rgba(0,0,0,0.4);
            border-color: #FF8C00;
        }
        
        .feature-icon {
            font-size: 4rem;
            color: #FF8C00;
            margin-bottom: 25px;
            animation: iconFloat 3s ease-in-out infinite;
        }
        
        @keyframes iconFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        .feature-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            margin-bottom: 20px;
        }
        
        .feature-desc {
            color: rgba(255,255,255,0.8);
            line-height: 1.6;
            font-size: 1.1rem;
        }
        
        /* EPIC STATS */
        .stats-3d {
            padding: 80px 0;
            background: rgba(0,0,0,0.5);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .stat-number {
            font-size: 4rem;
            font-weight: 900;
            color: #FF8C00;
            text-shadow: 0 5px 15px rgba(0,0,0,0.3);
            margin-bottom: 15px;
            animation: statBounce 2s ease-in-out infinite;
        }
        
        @keyframes statBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .stat-label {
            font-size: 1.3rem;
            color: white;
            font-weight: 600;
        }
        
        /* EPIC CTA */
        .cta-3d {
            padding: 100px 0;
            background: rgba(255,140,0,0.1);
            text-align: center;
        }
        
        .cta-title {
            font-size: 4rem;
            font-weight: 900;
            color: white;
            margin-bottom: 30px;
            text-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .cta-desc {
            font-size: 1.4rem;
            color: rgba(255,255,255,0.9);
            margin-bottom: 50px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* EPIC FOOTER */
        .footer-3d {
            background: #000000;
            color: white;
            padding: 60px 0 30px;
            border-top: 3px solid #FF8C00;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .footer-logo img {
            width: 40px;
            height: 40px;
            filter: brightness(1.2) contrast(1.2);
        }
        
        .footer-logo span {
            font-size: 1.5rem;
            font-weight: 700;
            color: #FF8C00;
        }
        
        .footer-section h5 {
            color: #FF8C00;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .footer-section ul {
            list-style: none;
            padding: 0;
        }
        
        .footer-section ul li {
            margin-bottom: 10px;
        }
        
        .footer-section ul li a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-section ul li a:hover {
            color: #FF8C00;
        }
        
        .social-links a {
            color: white;
            margin-right: 15px;
            font-size: 1.2rem;
            transition: color 0.3s;
        }
        
        .social-links a:hover {
            color: #FF8C00;
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255,140,0,0.3);
            padding-top: 20px;
            margin-top: 30px;
        }
        
        /* FLOATING ELEMENTS */
        .floating {
            position: absolute;
            pointer-events: none;
            animation: float 6s ease-in-out infinite;
            opacity: 0.6;
        }
        
        .floating:nth-child(1) { animation-delay: 0s; }
        .floating:nth-child(2) { animation-delay: 2s; }
        .floating:nth-child(3) { animation-delay: 4s; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(10deg); }
        }
        
        /* RESPONSIVE */
        @media (max-width: 768px) {
            .hero-title { font-size: 3rem; }
            .hero-subtitle { font-size: 1.2rem; }
            .hero-buttons { flex-direction: column; align-items: center; }
            .hero-icon { font-size: 12rem; }
            .section-title { font-size: 2.5rem; }
            .cta-title { font-size: 2.5rem; }
        }
        
        /* SCROLL ANIMATIONS */
        .fade-in {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- FIXED HEADER - TRANSPARENT WITH GLASS EFFECT -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-3d fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <div class="logo-3d">
                    <img src="WhatsApp_Image_2025-08-16_at_09.16.01_9301e0c4-removebg-preview.png" alt="StudySmart" class="logo-img">
                    <span class="logo-text">StudySmart</span>
                </div>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link nav-link-3d" href="#features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-3d" href="#stats">Stats</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-3d" href="#cta">Get Started</a>
                    </li>
                    <li class="nav-item">
                        <a class="simple-btn simple-btn-login" href="login.php" onclick="console.log('Login button clicked');">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="simple-btn simple-btn-join" href="register.php">Join Now</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- EPIC HERO SECTION -->
    <section class="hero-3d" id="hero">
        <!-- Floating Elements -->
        <div class="floating" style="top: 20%; left: 10%; font-size: 4rem; color: rgba(255,140,0,0.4);">
            <i class="fas fa-graduation-cap"></i>
        </div>
        <div class="floating" style="top: 60%; right: 15%; font-size: 3rem; color: rgba(255,140,0,0.4);">
            <i class="fas fa-book"></i>
        </div>
        <div class="floating" style="top: 80%; left: 20%; font-size: 2.5rem; color: rgba(255,140,0,0.4);">
            <i class="fas fa-laptop-code"></i>
        </div>
        
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content">
                        <h1 class="hero-title">
                            REVOLUTIONIZE YOUR <span style="color: #FF8C00;">LEARNING</span>
                    </h1>
                        <p class="hero-subtitle">
                            Experience the FUTURE of education with our EPIC 3D online tutoring platform. 
                            Connect with expert lecturers, access immersive materials, and transform your academic journey!
                        </p>
                        <div class="hero-buttons">
                            <a href="register.php" class="simple-btn simple-btn-join">
                                START LEARNING NOW
                            </a>
                            <a href="#features" class="simple-btn simple-btn-login">
                                WATCH DEMO
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="hero-visual">
                        <i class="fas fa-brain hero-icon"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- EPIC FEATURES -->
    <section class="features-3d" id="features">
        <div class="container">
            <h2 class="section-title fade-in">WHY CHOOSE STUDYSMART?</h2>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in">
                        <i class="fas fa-users feature-icon"></i>
                        <h3 class="feature-title">Expert Lecturers</h3>
                        <p class="feature-desc">Learn from industry professionals and experienced educators who are passionate about your success.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in">
                        <i class="fas fa-video feature-icon"></i>
                        <h3 class="feature-title">Interactive Sessions</h3>
                        <p class="feature-desc">Engage in real-time video sessions with interactive whiteboards and collaborative tools.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in">
                        <i class="fas fa-chart-line feature-icon"></i>
                        <h3 class="feature-title">Progress Tracking</h3>
                        <p class="feature-desc">Monitor your learning progress with detailed analytics and personalized insights.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in">
                        <i class="fas fa-mobile-alt feature-icon"></i>
                        <h3 class="feature-title">Mobile First</h3>
                        <p class="feature-desc">Access your courses anywhere, anytime with our responsive mobile-optimized platform.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in">
                        <i class="fas fa-shield-alt feature-icon"></i>
                        <h3 class="feature-title">Secure Learning</h3>
                        <p class="feature-desc">Your data and learning materials are protected with enterprise-grade security.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in">
                        <i class="fas fa-clock feature-icon"></i>
                        <h3 class="feature-title">24/7 Access</h3>
                        <p class="feature-desc">Learn at your own pace with round-the-clock access to resources and materials.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- EPIC STATS -->
    <section class="stats-3d" id="stats">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="1000">0</div>
                        <div class="stat-label">Happy Students</div>
                            </div>
                        </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="50">0</div>
                        <div class="stat-label">Expert Lecturers</div>
                            </div>
                        </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="100">0</div>
                        <div class="stat-label">Courses Available</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number" data-count="95">0</div>
                        <div class="stat-label">Success Rate</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- EPIC CTA -->
    <section class="cta-3d" id="cta">
        <div class="container">
            <h2 class="cta-title">READY TO TRANSFORM YOUR LEARNING?</h2>
            <p class="cta-desc">
                Join thousands of students who have already revolutionized their education with StudySmart. 
                Start your journey today and unlock your full potential!
            </p>
            <div class="hero-buttons">
                <a href="register.php" class="simple-btn simple-btn-join">
                    CREATE FREE ACCOUNT
                </a>
                <a href="login.php" class="simple-btn simple-btn-login">
                    SIGN IN
                </a>
            </div>
        </div>
    </section>

    <!-- EPIC FOOTER -->
    <footer class="footer-3d">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <div class="footer-logo">
                        <img src="WhatsApp_Image_2025-08-16_at_09.16.01_9301e0c4-removebg-preview.png" alt="StudySmart">
                        <span>StudySmart</span>
                    </div>
                    <p class="text-white-50">Revolutionizing education through technology and innovation. Join the future of learning today!</p>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <div class="footer-section">
                        <h5>Platform</h5>
                        <ul>
                            <li><a href="#features">Features</a></li>
                            <li><a href="#stats">Statistics</a></li>
                            <li><a href="login.php">Login</a></li>
                            <li><a href="register.php">Register</a></li>
                        </ul>
                            </div>
                        </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <div class="footer-section">
                        <h5>Support</h5>
                        <ul>
                            <li><a href="#">Help Center</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Documentation</a></li>
                        </ul>
                    </div>
                            </div>
                <div class="col-lg-4 mb-4">
                    <div class="footer-section">
                        <h5>Stay Connected</h5>
                        <p class="text-white-50">Get the latest updates and learning tips delivered to your inbox.</p>
                        <div class="input-group">
                            <input type="email" class="form-control" placeholder="Enter your email">
                            <button class="btn btn-primary" type="button" style="background: #FF8C00; border-color: #FF8C00;">Subscribe</button>
                        </div>
                        <div class="social-links mt-3">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
            <div class="row align-items-center">
                <div class="col-md-6">
                        <p class="mb-0 text-white-50">&copy; 2025 StudySmart. All rights reserved.</p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <a href="#" class="text-white-50 me-3">Privacy Policy</a>
                        <a href="#" class="text-white-50 me-3">Terms of Service</a>
                        <a href="#" class="text-white-50">Cookie Policy</a>
                </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // EPIC 3D ANIMATIONS (NO MOUSE TRACKING)
        document.addEventListener('DOMContentLoaded', function() {
            // Navbar scroll effect
            window.addEventListener('scroll', function() {
                const navbar = document.querySelector('.navbar-3d');
                if (window.scrollY > 100) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });

            // Scroll animations
            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.fade-in').forEach(el => {
                observer.observe(el);
            });

            // Counter animations
            const counters = document.querySelectorAll('.stat-number');
            counters.forEach(counter => {
                const target = parseInt(counter.getAttribute('data-count'));
                const increment = target / 100;
                let current = 0;
                
                const updateCounter = () => {
                    if (current < target) {
                        current += increment;
                        counter.textContent = Math.ceil(current);
                        requestAnimationFrame(updateCounter);
                    } else {
                        counter.textContent = target;
                    }
                };
                
                const counterObserver = new IntersectionObserver(function(entries) {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            updateCounter();
                            counterObserver.unobserve(entry.target);
                        }
                    });
                });
                
                counterObserver.observe(counter);
            });

            // Smooth scrolling for internal page links only
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // Ensure external links work properly
            document.querySelectorAll('a[href*=".php"]').forEach(link => {
                link.addEventListener('click', function(e) {
                    // Allow normal navigation for PHP files
                    console.log('Navigating to:', this.href);
                });
            });
        });
    </script>
</body>
</html>