<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BlockZone Lab - Premium Crypto Edutainment</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="BlockZone Lab - Professional gaming tournaments with real USDC prizes and comprehensive blockchain education. FREE first game daily, $0.25 per game or $2.50 day pass until 11pm EST.">
    <meta name="keywords" content="blockchain gaming, USDC prizes, crypto education, skill-based games, neon drop, tournaments">
    
    <!-- Professional Design System CSS -->
    <link rel="stylesheet" href="assets/css/design-system.css">
    <link rel="stylesheet" href="shared/hero-shared.css">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="public/favicon.svg">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#00ff41">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <style>
        /* CRITICAL RENDERING PATH - Minimal styles for instant visual feedback */
        :root {
            --primary: #00ff41;
            --bg-primary: #0a0a0a;
            --bg-secondary: #0a0a0a;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            
            /* Neon Drop Color Palette */
            --neon-cyan: #00d4ff;
            --neon-green: #00ff00;
            --neon-red: #ff6b6b;
            --neon-gold: #ffd700;
            --dark-blue-1: #1a1a2e;
            --dark-blue-2: #16213e;
            --dark-blue-3: #0f3460;
            
            /* Neutral Grays */
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --gray-800: #343a40;
            --gray-900: #212529;
        }
        
        /* CRITICAL NAVIGATION */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-100%);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .navbar.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        
        .navbar-container {
            width: 100%;
            margin: 0;
            padding: 0 2rem;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            height: 32px;
        }
        
        .navbar-nav {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            transform: translateY(-10px);
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            font-size: 0.9rem;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: var(--primary);
        }
        
        /* NEW CARD-BASED LAYOUT */
        .main-content {
            background: #0a0a0a;
            min-height: 100vh;
            padding: 2rem 0;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* YELLOW BANNER - Moved up and restyled */
        .yellow-banner {
            background: linear-gradient(135deg, var(--neon-gold) 0%, #ffed4e 100%);
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem 0 4rem 0;
            text-align: center;
            box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
            border: 2px solid var(--neon-gold);
        }
        
        .yellow-banner h2 {
            color: #000;
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }
        
        .yellow-banner p {
            color: #333;
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        
        .banner-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .banner-btn {
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .banner-btn.primary {
            background: #000;
            color: var(--neon-gold);
            border-color: #000;
        }
        
        .banner-btn.primary:hover {
            background: transparent;
            color: #000;
        }
        
        .banner-btn.secondary {
            background: transparent;
            color: #000;
            border-color: #000;
        }
        
        .banner-btn.secondary:hover {
            background: #000;
            color: var(--neon-gold);
        }
        
        /* CENTRAL HUB CARD */
        .central-hub {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--neon-cyan);
            border-radius: 20px;
            padding: 3rem;
            margin: 4rem 0;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .central-hub:hover {
            box-shadow: 0 0 50px rgba(0, 212, 255, 0.4);
            transform: translateY(-5px);
        }
        
        .central-hub h2 {
            color: var(--neon-cyan);
            font-size: 2.8rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        }
        
        .central-hub p {
            color: var(--text-secondary);
            font-size: 1.3rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .telegram-link {
            display: inline-block;
            background: linear-gradient(135deg, var(--neon-cyan), #0099cc);
            color: #000;
            padding: 15px 30px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 2px solid var(--neon-cyan);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
        }
        
        .telegram-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
        }
        
        /* SATELLITE CARDS GRID - ACTUAL PLAYING CARD PROPORTIONS (2:3 RATIO) - 75% SIZE */
        .satellite-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin: 4rem 0;
            max-width: 75%;
            margin-left: auto;
            margin-right: auto;
        }
        
        .satellite-card {
            background: rgba(255, 255, 255, 0.03);
            border: 2px solid var(--gray-700);
            border-radius: 16px;
            padding: 2rem 1rem;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            aspect-ratio: 2/3;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .satellite-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s ease;
        }
        
        .satellite-card:hover::before {
            left: 100%;
        }
        
        .satellite-card:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
            transform: translateY(-5px);
        }
        
        .satellite-card h3 {
            color: var(--neon-cyan);
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }
        
        .satellite-card p {
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.5;
        }
        
        /* CARD-SPECIFIC NEON COLORS - ALL BLUE FOR MAIN LANDING */
        .card-gaming {
            border-color: var(--neon-cyan);
        }
        
        .card-gaming:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }
        
        .card-gaming h3 {
            color: var(--neon-cyan);
        }
        
        .card-technology {
            border-color: var(--neon-cyan);
        }
        
        .card-technology:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }
        
        .card-technology h3 {
            color: var(--neon-cyan);
        }
        
        .card-education {
            border-color: var(--neon-cyan);
        }
        
        .card-education:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }
        
        .card-education h3 {
            color: var(--neon-cyan);
        }
        
        .card-rewards {
            border-color: var(--neon-cyan);
        }
        
        .card-rewards:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }
        
        .card-rewards h3 {
            color: var(--neon-cyan);
        }
        
        .card-decentralized {
            border-color: var(--neon-cyan);
        }
        
        .card-decentralized:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }
        
        .card-decentralized h3 {
            color: var(--neon-cyan);
        }
        
        .card-community {
            border-color: var(--neon-cyan);
        }
        
        .card-community:hover {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }
        
        .card-community h3 {
            color: var(--neon-cyan);
        }
        
        /* MINI LOGO AT BOTTOM - 1/10th size of main logo */
        .mini-logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 3rem 0;
            background: transparent;
        }
        
        .mini-logo {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.9px; /* 3x bigger (was 0.3px) */
        }
        
        .mini-logo-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px; /* 3x bigger (was 6px) */
            height: 18px; /* 3x bigger (was 6px) */
            border-radius: 0.9px; /* 3x bigger (was 0.3px) */
            font-size: 23.4px; /* 3x bigger (was 7.8px) */
            font-weight: bold;
            color: #000;
            background: #00ff41;
            border: 0.6px solid #ff4444; /* 3x bigger (was 0.2px) */
            box-shadow: none;
            transition: all 0.3s ease;
            font-family: 'Minion Pro', 'Minion Pro Bold', 'Times New Roman', serif;
        }
        
        .mini-logo-letter:nth-child(6) {
            /* The "Z" - make it look like the favicon */
            background: #FFFF00;
            border: 0.6px solid #ff4444;
            color: #ff4444;
            box-shadow: none;
            font-size: 25.2px; /* 3x bigger (was 8.4px) */
        }
        
        .mini-logo-letter:nth-child(10) {
            /* The space - make it green like the others */
            background: #00ff41;
            border: 0.6px solid #ff4444;
            box-shadow: none;
            width: 18px; /* 3x bigger (was 6px) */
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .satellite-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .satellite-card {
                padding: 1.5rem 0.8rem;
            }
            
            .central-hub {
                padding: 2rem;
            }
            
            .central-hub h2 {
                font-size: 2.2rem;
            }
            
            .yellow-banner h2 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .satellite-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .satellite-card {
                padding: 1.2rem 0.6rem;
            }
            
            .central-hub {
                padding: 1.5rem;
            }
            
            .central-hub h2 {
                font-size: 1.8rem;
            }
            
            .yellow-banner h2 {
                font-size: 1.6rem;
            }
        }
    </style>
</head>

<body class="landing-page">
    <!-- Navigation - Fixed and Optimized -->
    <nav class="navbar" id="navbar">
        <div class="navbar-container">
            <ul class="navbar-nav">
                <li><a href="/" class="nav-link active">Home</a></li>
                <li><a href="/games/" class="nav-link">Games</a></li>
                <li><a href="/academy/" class="nav-link">Academy</a></li>
                <li><a href="/pages/business-model.html" class="nav-link">Business</a></li>
                <li><a href="/pages/whitepaper.html" class="nav-link">Whitepaper</a></li>
                <li><a href="/pages/user-profile.html" class="nav-link">Support</a></li>
                <li><a href="/pages/profile.html" class="nav-link">Profile</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section - Critical Content First -->
    <section class="hero-section" id="heroSection">
        <div class="hero-content">
            <!-- Large Hero Brand with Proper Word Spacing -->
            <div class="hero-brand">
                <span class="hero-brand-letter">B</span>
                <span class="hero-brand-letter">l</span>
                <span class="hero-brand-letter">o</span>
                <span class="hero-brand-letter">c</span>
                <span class="hero-brand-letter">k</span>
                <span class="hero-brand-letter">Z</span>
                <span class="hero-brand-letter">o</span>
                <span class="hero-brand-letter">n</span>
                <span class="hero-brand-letter">e</span>
                <span class="hero-brand-letter"> </span>
                <span class="hero-brand-letter">L</span>
                <span class="hero-brand-letter">a</span>
                <span class="hero-brand-letter">b</span>
            </div>
            <div class="hero-subtitle">
                <span>PREMIUM</span>
                <span>CRYPTO</span>
                <span>EDUTAINMENT</span>
            </div>
        </div>
    </section>

    <!-- Main Content - New Card-Based Layout -->
    <main class="main-content">
        <div class="container">
            <!-- Yellow Banner - Moved up and restyled -->
            <section class="yellow-banner">
                <h2>🎮 Ready to Play?</h2>
                <p>Start with a FREE game daily, then compete for real USDC prizes in our skill-based tournaments.</p>
                <div class="banner-buttons">
                    <a href="/games/" class="banner-btn primary">🎯 Play Now - FREE Game</a>
                    <a href="/academy/" class="banner-btn secondary">📚 Learn Blockchain</a>
                </div>
            </section>

            <!-- Central Hub Card -->
            <section class="central-hub">
                <h2>Welcome to Black Zone Labs</h2>
                <p>Where Classic Gaming Meets Web3 Innovation</p>
                <p>At Black Zone Labs, we're building more than just a gaming platform – we're creating a decentralized community where nostalgic arcade classics come alive with cutting-edge blockchain technology.</p>
                <a href="https://t.me/blockzonelab" target="_blank" class="telegram-link">💬 Chat with us</a>
            </section>

            <!-- Satellite Cards Grid -->
            <div class="satellite-grid">
                <!-- Gaming Card -->
                <div class="satellite-card card-gaming">
                    <h3>🎮 Gaming</h3>
                    <p>Daily Tournaments, Real Rewards. Step into beautifully crafted arcade game tournaments that run every day. For $0.25 per game, compete for prize pools where champions take home 30% of the pot.</p>
                </div>

                <!-- Technology Card -->
                <div class="satellite-card card-technology">
                    <h3>⚡ Technology</h3>
                    <p>Built on Lightning-Fast Sonic Labs – Andrei Cronje's revolutionary upgrade to Fantom – delivering over 10,000 transactions per second with sub-second finality. That's over 500 times faster than Ethereum.</p>
                </div>

                <!-- Education Card -->
                <div class="satellite-card card-education">
                    <h3>📚 Education</h3>
                    <p>Learn While You Play. Beyond the competition lies a comprehensive pathway to Web3 mastery. Our self-paced curriculum guides you from blockchain fundamentals through advanced programming.</p>
                </div>

                <!-- Rewards Card -->
                <div class="satellite-card card-rewards">
                    <h3>💰 Rewards</h3>
                    <p>Every quarter spent has the potential to 2X minimum. The economics speak for themselves: while Ethereum transactions cost around $0.35-$0.65, Sonic transactions run approximately $0.0004.</p>
                </div>

                <!-- Decentralized Card -->
                <div class="satellite-card card-decentralized">
                    <h3>🔗 Decentralized</h3>
                    <p>Experience Web3 as it was intended: community-owned, transparently operated, built on principles of digital sovereignty. Every tournament, every lesson demonstrates decentralized gaming and education in harmony.</p>
                </div>

                <!-- Community Card -->
                <div class="satellite-card card-community">
                    <h3>🌟 Community</h3>
                    <p>See what's happening in our vibrant community. Join the conversation, share strategies, and connect with fellow gamers. Play and learn about what's under the hood together!</p>
                </div>
            </div>
        </div>
    </main>

    <!-- Mini Logo at Bottom - 1/10th size of main logo -->
    <div class="mini-logo-container">
        <div class="mini-logo">
            <span class="mini-logo-letter">B</span>
            <span class="mini-logo-letter">l</span>
            <span class="mini-logo-letter">o</span>
            <span class="mini-logo-letter">c</span>
            <span class="mini-logo-letter">k</span>
            <span class="mini-logo-letter">Z</span>
            <span class="mini-logo-letter">o</span>
            <span class="mini-logo-letter">n</span>
            <span class="mini-logo-letter">e</span>
            <span class="mini-logo-letter"> </span>
            <span class="mini-logo-letter">L</span>
            <span class="mini-logo-letter">a</span>
            <span class="mini-logo-letter">b</span>
        </div>
    </div>

    <!-- Scripts -->
    <script src="shared/core/event-bus.js"></script>
    <script>
        // Navbar animation
        const navbar = document.getElementById('navbar');
        setTimeout(() => navbar.classList.add('loaded'), 100);
        
        // Hero section animation
        const heroSection = document.getElementById('heroSection');
        setTimeout(() => heroSection.classList.add('loaded'), 300);
    </script>
</body>
</html>
