<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CryptoPulse — Bloomberg-Grade Crypto Intelligence</title>
    <meta name="description" content="Real-time crypto dashboard with advanced trading signals. RSI, MACD, Bollinger Bands & more. See where the market is going.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/landing.css">
</head>
<body>

    <!-- ===== NAVBAR ===== -->
    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <a href="#" class="nav-logo">
                <span class="logo-icon">◈</span>
                <span class="logo-text">CryptoPulse</span>
            </a>
            <ul class="nav-menu" id="navMenu">
                <li><a href="#features" class="nav-link">Features</a></li>
                <li><a href="#pricing" class="nav-link">Pricing</a></li>
                <li><a href="#faq" class="nav-link">FAQ</a></li>
            </ul>
            <a href="app/index.php" class="nav-cta">Get Started</a>
            <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
                <span></span><span></span><span></span>
            </button>
        </div>
    </nav>

    <!-- ===== LIVE TICKER TAPE ===== -->
    <div class="ticker-tape">
        <div class="ticker-track" id="tickerTrack">
            <div class="ticker-content" id="tickerContent"></div>
        </div>
    </div>

    <!-- ===== HERO ===== -->
    <section class="hero" id="hero">
        <div class="hero-particles"></div>
        <div class="hero-orbs">
            <div class="orb orb-1"></div>
            <div class="orb orb-2"></div>
            <div class="orb orb-3"></div>
        </div>
        <div class="container">
            <div class="hero-content" data-animate="fade-up">
                <div class="hero-badge">
                    <span class="badge-dot"></span>
                    Live Market Data — Powered by Binance
                </div>
                <h1 class="hero-title">
                    See Where The<br>
                    <span class="gradient-text">Market Is Going</span>
                </h1>
                <p class="hero-subtitle">
                    Bloomberg-grade crypto intelligence. Real-time data, advanced signals,
                    institutional-level indicators — all in one powerful dashboard.
                </p>
                <div class="hero-actions">
                    <a href="app/index.php" class="btn btn-primary">
                        Start Free
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </a>
                    <a href="#preview" class="btn btn-outline">Watch Demo</a>
                </div>
            </div>
            <div class="hero-dashboard" data-animate="fade-up" data-delay="200">
                <div class="dashboard-mockup">
                    <div class="mockup-header">
                        <div class="mockup-dots">
                            <span></span><span></span><span></span>
                        </div>
                        <span class="mockup-title">CryptoPulse Terminal</span>
                    </div>
                    <div class="mockup-body">
                        <div class="mockup-sidebar">
                            <div class="mockup-coin active">
                                <span class="coin-name">BTC/USDT</span>
                                <span class="coin-price" id="mockBtcPrice">—</span>
                            </div>
                            <div class="mockup-coin">
                                <span class="coin-name">ETH/USDT</span>
                                <span class="coin-price" id="mockEthPrice">—</span>
                            </div>
                            <div class="mockup-coin">
                                <span class="coin-name">SOL/USDT</span>
                                <span class="coin-price" id="mockSolPrice">—</span>
                            </div>
                            <div class="mockup-coin">
                                <span class="coin-name">BNB/USDT</span>
                                <span class="coin-price" id="mockBnbPrice">—</span>
                            </div>
                        </div>
                        <div class="mockup-chart">
                            <div class="chart-placeholder" id="miniChart"></div>
                            <div class="mockup-signals">
                                <div class="signal-item signal-buy">RSI: BUY</div>
                                <div class="signal-item signal-neutral">MACD: NEUTRAL</div>
                                <div class="signal-item signal-buy">MA: BUY</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mockup-glow"></div>
            </div>
        </div>
    </section>

    <!-- ===== TRUSTED BY LOGOS ===== -->
    <section class="logos-section">
        <div class="logos-label">Trusted by traders at</div>
        <div class="logos-track" id="logosTrack">
            <div class="logo-item">◆ Binance</div>
            <div class="logo-item">◆ Coinbase</div>
            <div class="logo-item">◆ Kraken</div>
            <div class="logo-item">◆ OKX</div>
            <div class="logo-item">◆ Bybit</div>
            <div class="logo-item">◆ Bitfinex</div>
            <div class="logo-item">◆ KuCoin</div>
            <div class="logo-item">◆ Gate.io</div>
            <div class="logo-item">◆ Binance</div>
            <div class="logo-item">◆ Coinbase</div>
            <div class="logo-item">◆ Kraken</div>
            <div class="logo-item">◆ OKX</div>
            <div class="logo-item">◆ Bybit</div>
            <div class="logo-item">◆ Bitfinex</div>
            <div class="logo-item">◆ KuCoin</div>
            <div class="logo-item">◆ Gate.io</div>
        </div>
    </section>

    <!-- ===== SOCIAL PROOF / STATS ===== -->
    <section class="stats-bar">
        <div class="container">
            <div class="stats-grid" data-animate="fade-up">
                <div class="stat-item">
                    <span class="stat-number" data-count="10000">0</span>
                    <span class="stat-suffix">+</span>
                    <span class="stat-label">Active Traders</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                    <span class="stat-number" data-count="500">0</span>
                    <span class="stat-suffix">+</span>
                    <span class="stat-label">Trading Pairs</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                    <span class="stat-number" data-count="99">0</span>
                    <span class="stat-suffix">.9%</span>
                    <span class="stat-label">Uptime SLA</span>
                </div>
                <div class="stat-divider"></div>
                <div class="stat-item">
                    <span class="stat-number" data-count="1">0</span>
                    <span class="stat-suffix">s</span>
                    <span class="stat-label">Data Latency</span>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== FEATURES ===== -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-header" data-animate="fade-up">
                <span class="section-tag">Features</span>
                <h2 class="section-title">Everything You Need to<br><span class="gradient-text">Trade Smarter</span></h2>
                <p class="section-desc">Professional-grade tools that were once reserved for Wall Street, now in your browser.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card" data-animate="fade-up" data-delay="0">
                    <div class="feature-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="url(#grad1)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="grad1" x1="3" y1="2" x2="21" y2="22"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#7b2ff7"/></linearGradient></defs></svg>
                    </div>
                    <h3>Real-Time Streaming</h3>
                    <p>Harga crypto update setiap detik langsung dari Binance WebSocket. Tanpa delay, tanpa refresh.</p>
                </div>
                <div class="feature-card" data-animate="fade-up" data-delay="100">
                    <div class="feature-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3 3v18h18" stroke="url(#grad2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 16l4-8 4 4 5-9" stroke="url(#grad2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="grad2" x1="3" y1="3" x2="21" y2="21"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#7b2ff7"/></linearGradient></defs></svg>
                    </div>
                    <h3>Candlestick Charts</h3>
                    <p>TradingView-powered charts dengan 6 timeframe: 1m, 5m, 15m, 1h, 4h, 1d. Zoom, pan, crosshair.</p>
                </div>
                <div class="feature-card" data-animate="fade-up" data-delay="200">
                    <div class="feature-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 100 20 10 10 0 000-20z" stroke="url(#grad3)" stroke-width="1.5"/><path d="M12 6v6l4 2" stroke="url(#grad3)" stroke-width="1.5" stroke-linecap="round"/><defs><linearGradient id="grad3" x1="2" y1="2" x2="22" y2="22"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#7b2ff7"/></linearGradient></defs></svg>
                    </div>
                    <h3>Smart Signals</h3>
                    <p>RSI, MACD, Moving Average, Bollinger Bands — semua dihitung otomatis. Sinyal BUY/SELL/NEUTRAL instan.</p>
                </div>
                <div class="feature-card" data-animate="fade-up" data-delay="0">
                    <div class="feature-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="url(#grad4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.73 21a2 2 0 01-3.46 0" stroke="url(#grad4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="grad4" x1="3" y1="2" x2="21" y2="22"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#7b2ff7"/></linearGradient></defs></svg>
                    </div>
                    <h3>Price Alerts</h3>
                    <p>Set alert untuk harga atau indikator. Notifikasi browser + suara langsung saat target tercapai.</p>
                </div>
                <div class="feature-card" data-animate="fade-up" data-delay="100">
                    <div class="feature-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5" stroke="url(#grad5)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 15l8-8m0 0h-5m5 0v5" stroke="url(#grad5)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="grad5" x1="4" y1="4" x2="20" y2="20"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#7b2ff7"/></linearGradient></defs></svg>
                    </div>
                    <h3>Custom Watchlist</h3>
                    <p>Pantau coin favorit Anda dalam satu tampilan. Tambah, hapus, dan atur urutan sesuka hati.</p>
                </div>
                <div class="feature-card" data-animate="fade-up" data-delay="200">
                    <div class="feature-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="14" rx="2" stroke="url(#grad6)" stroke-width="1.5"/><path d="M8 21h8m-4-4v4" stroke="url(#grad6)" stroke-width="1.5" stroke-linecap="round"/><defs><linearGradient id="grad6" x1="2" y1="3" x2="22" y2="21"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#7b2ff7"/></linearGradient></defs></svg>
                    </div>
                    <h3>Bloomberg Dark UI</h3>
                    <p>Tampilan terminal profesional khas Bloomberg. Dark theme, monospace font, data density tinggi.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== DASHBOARD PREVIEW ===== -->
    <section class="preview" id="preview">
        <div class="container">
            <div class="section-header" data-animate="fade-up">
                <span class="section-tag">Preview</span>
                <h2 class="section-title">Your Command Center<br><span class="gradient-text">for Crypto Markets</span></h2>
            </div>
            <div class="preview-window" data-animate="fade-up" data-delay="100">
                <div class="preview-frame">
                    <div class="preview-bar">
                        <div class="preview-dots"><span></span><span></span><span></span></div>
                        <span class="preview-url">app.cryptopulse.io/dashboard</span>
                    </div>
                    <div class="preview-body">
                        <div class="preview-grid">
                            <div class="preview-panel preview-chart-panel">
                                <div class="panel-title">BTC/USDT — 4H</div>
                                <div class="panel-chart">
                                    <svg viewBox="0 0 400 120" class="chart-svg">
                                        <defs>
                                            <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
                                                <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.3"/>
                                                <stop offset="100%" stop-color="#00d4ff" stop-opacity="0"/>
                                            </linearGradient>
                                        </defs>
                                        <path d="M0,80 Q20,75 40,70 T80,55 T120,60 T160,45 T200,50 T240,35 T280,40 T320,25 T360,30 T400,15" fill="none" stroke="#00d4ff" stroke-width="2"/>
                                        <path d="M0,80 Q20,75 40,70 T80,55 T120,60 T160,45 T200,50 T240,35 T280,40 T320,25 T360,30 T400,15 V120 H0 Z" fill="url(#chartGrad)"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="preview-panel preview-signals-panel">
                                <div class="panel-title">Signals</div>
                                <div class="panel-signal"><span>RSI (14)</span><span class="sig-buy">72.4 — OVERBOUGHT</span></div>
                                <div class="panel-signal"><span>MACD</span><span class="sig-buy">BULLISH CROSS</span></div>
                                <div class="panel-signal"><span>MA (99)</span><span class="sig-buy">ABOVE — BUY</span></div>
                                <div class="panel-signal"><span>BB</span><span class="sig-neutral">MID BAND</span></div>
                                <div class="panel-verdict">OVERALL: <span class="sig-buy">STRONG BUY</span></div>
                            </div>
                            <div class="preview-panel preview-watchlist-panel">
                                <div class="panel-title">Watchlist</div>
                                <div class="panel-row"><span>BTC</span><span>$96,420</span><span class="sig-buy">+2.4%</span></div>
                                <div class="panel-row"><span>ETH</span><span>$3,842</span><span class="sig-buy">+1.8%</span></div>
                                <div class="panel-row"><span>SOL</span><span>$187.5</span><span class="sig-sell">-0.6%</span></div>
                                <div class="panel-row"><span>XRP</span><span>$2.34</span><span class="sig-buy">+5.1%</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="preview-glow"></div>
            </div>
        </div>
    </section>

    <!-- ===== HOW IT WORKS ===== -->
    <section class="how-it-works">
        <div class="container">
            <div class="section-header" data-animate="fade-up">
                <span class="section-tag">How It Works</span>
                <h2 class="section-title">Start in <span class="gradient-text">3 Simple Steps</span></h2>
            </div>
            <div class="steps-grid">
                <div class="step-card" data-animate="fade-up" data-delay="0">
                    <div class="step-number">01</div>
                    <div class="step-line"></div>
                    <h3>Sign Up</h3>
                    <p>Buat akun dalam 10 detik. Tanpa kartu kredit, langsung akses dashboard.</p>
                </div>
                <div class="step-card" data-animate="fade-up" data-delay="150">
                    <div class="step-number">02</div>
                    <div class="step-line"></div>
                    <h3>Customize</h3>
                    <p>Pilih coin, atur watchlist, set alert. Dashboard Anda, aturan Anda.</p>
                </div>
                <div class="step-card" data-animate="fade-up" data-delay="300">
                    <div class="step-number">03</div>
                    <div class="step-line"></div>
                    <h3>Trade Smarter</h3>
                    <p>Lihat sinyal real-time, baca indikator, ambil keputusan dengan percaya diri.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PRICING ===== -->
    <section class="pricing" id="pricing">
        <div class="container">
            <div class="section-header" data-animate="fade-up">
                <span class="section-tag">Pricing</span>
                <h2 class="section-title">Simple, Transparent <span class="gradient-text">Pricing</span></h2>
                <p class="section-desc">No hidden fees. Cancel anytime. Start for free.</p>
            </div>
            <div class="pricing-grid">
                <div class="pricing-card" data-animate="fade-up" data-delay="0">
                    <div class="pricing-header">
                        <h3>Free</h3>
                        <div class="pricing-price">
                            <span class="price-amount">$0</span>
                            <span class="price-period">/forever</span>
                        </div>
                    </div>
                    <ul class="pricing-features">
                        <li><span class="check">✓</span> Real-time price streaming</li>
                        <li><span class="check">✓</span> 5 watchlist coins</li>
                        <li><span class="check">✓</span> Basic candlestick chart</li>
                        <li><span class="check">✓</span> RSI indicator</li>
                        <li class="disabled"><span class="cross">×</span> Advanced indicators</li>
                        <li class="disabled"><span class="cross">×</span> Price alerts</li>
                    </ul>
                    <a href="app/index.php" class="btn btn-outline btn-full">Get Started</a>
                </div>
                <div class="pricing-card pricing-featured" data-animate="fade-up" data-delay="100">
                    <div class="pricing-badge">Most Popular</div>
                    <div class="pricing-header">
                        <h3>Pro</h3>
                        <div class="pricing-price">
                            <span class="price-amount">$29</span>
                            <span class="price-period">/month</span>
                        </div>
                    </div>
                    <ul class="pricing-features">
                        <li><span class="check">✓</span> Everything in Free</li>
                        <li><span class="check">✓</span> Unlimited watchlist</li>
                        <li><span class="check">✓</span> Advanced charts (6 timeframes)</li>
                        <li><span class="check">✓</span> RSI, MACD, MA, Bollinger Bands</li>
                        <li><span class="check">✓</span> Unlimited price alerts</li>
                        <li><span class="check">✓</span> BUY/SELL signal panel</li>
                    </ul>
                    <a href="app/index.php" class="btn btn-primary btn-full">Start Free Trial</a>
                </div>
                <div class="pricing-card" data-animate="fade-up" data-delay="200">
                    <div class="pricing-header">
                        <h3>Enterprise</h3>
                        <div class="pricing-price">
                            <span class="price-amount">Custom</span>
                        </div>
                    </div>
                    <ul class="pricing-features">
                        <li><span class="check">✓</span> Everything in Pro</li>
                        <li><span class="check">✓</span> Multi-exchange data</li>
                        <li><span class="check">✓</span> API access</li>
                        <li><span class="check">✓</span> Custom indicators</li>
                        <li><span class="check">✓</span> Priority support</li>
                        <li><span class="check">✓</span> White-label option</li>
                    </ul>
                    <a href="app/index.php" class="btn btn-outline btn-full">Contact Sales</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== TESTIMONIALS ===== -->
    <section class="testimonials">
        <div class="container">
            <div class="section-header" data-animate="fade-up">
                <span class="section-tag">Testimonials</span>
                <h2 class="section-title">Trusted by <span class="gradient-text">Traders Worldwide</span></h2>
            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card" data-animate="fade-up" data-delay="0">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"Finally a crypto dashboard that feels like a real terminal. The signals saved me from a bad trade last week. Worth every penny."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">AR</div>
                        <div>
                            <div class="author-name">Alex Rodriguez</div>
                            <div class="author-role">Day Trader, 5+ years</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card" data-animate="fade-up" data-delay="100">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"I cancelled my $200/mo TradingView subscription. CryptoPulse gives me everything I need — real-time data, indicators, alerts. All in one place."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">SK</div>
                        <div>
                            <div class="author-name">Sarah Kim</div>
                            <div class="author-role">Crypto Analyst, Fund Manager</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card" data-animate="fade-up" data-delay="200">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"The Bloomberg-style UI is incredible. I feel like a professional trader. The RSI and MACD signals are incredibly accurate."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">MJ</div>
                        <div>
                            <div class="author-name">Marco Jensen</div>
                            <div class="author-role">Swing Trader, BTC Maximalist</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== FAQ ===== -->
    <section class="faq" id="faq">
        <div class="container">
            <div class="section-header" data-animate="fade-up">
                <span class="section-tag">FAQ</span>
                <h2 class="section-title">Frequently Asked <span class="gradient-text">Questions</span></h2>
            </div>
            <div class="faq-list" data-animate="fade-up">
                <div class="faq-item">
                    <button class="faq-question">
                        <span>Where does the market data come from?</span>
                        <svg class="faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="faq-answer">
                        <p>All real-time price data streams directly from Binance via WebSocket — the world's largest crypto exchange by volume. Market data like market cap and volume comes from CoinGecko's public API.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">
                        <span>How accurate are the trading signals?</span>
                        <svg class="faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="faq-answer">
                        <p>Signals are based on standard technical indicators (RSI, MACD, MA, Bollinger Bands) used by professional traders worldwide. They are tools to support your decision-making — not financial advice.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">
                        <span>Do I need to install anything?</span>
                        <svg class="faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="faq-answer">
                        <p>No. CryptoPulse runs entirely in your web browser. No downloads, no plugins, no extensions. Works on desktop, tablet, and mobile.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">
                        <span>Can I cancel my subscription anytime?</span>
                        <svg class="faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="faq-answer">
                        <p>Absolutely. No contracts, no commitments. Cancel anytime from your account settings. Your data stays safe for 30 days after cancellation.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">
                        <span>Is my data secure?</span>
                        <svg class="faq-arrow" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="faq-answer">
                        <p>CryptoPulse never asks for your exchange API keys or wallet access. Your watchlist and alerts are stored locally in your browser. We don't collect or sell any personal data.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== FINAL CTA ===== -->
    <section class="final-cta">
        <div class="cta-orbs">
            <div class="orb orb-4"></div>
            <div class="orb orb-5"></div>
        </div>
        <div class="container">
            <div class="cta-content" data-animate="fade-up">
                <h2 class="section-title">Ready to See the Market<br><span class="gradient-text">Clearly?</span></h2>
                <p class="section-desc">Join thousands of traders who made the switch to institutional-grade crypto intelligence.</p>
                <a href="app/index.php" class="btn btn-primary btn-lg">
                    Get Started — It's Free
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </a>
            </div>
        </div>
    </section>

    <!-- ===== FOOTER ===== -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="#" class="nav-logo">
                        <span class="logo-icon">◈</span>
                        <span class="logo-text">CryptoPulse</span>
                    </a>
                    <p class="footer-tagline">Bloomberg-grade crypto intelligence for everyone.</p>
                </div>
                <div class="footer-col">
                    <h4>Product</h4>
                    <a href="#features">Features</a>
                    <a href="#pricing">Pricing</a>
                    <a href="#faq">FAQ</a>
                    <a href="#">Changelog</a>
                </div>
                <div class="footer-col">
                    <h4>Company</h4>
                    <a href="#">About</a>
                    <a href="#">Blog</a>
                    <a href="#">Careers</a>
                    <a href="#">Contact</a>
                </div>
                <div class="footer-col">
                    <h4>Legal</h4>
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                    <a href="#">Disclaimer</a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 CryptoPulse. All rights reserved.</p>
                <div class="footer-socials">
                    <a href="#" aria-label="Twitter">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                    </a>
                    <a href="#" aria-label="Discord">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
                    </a>
                    <a href="#" aria-label="GitHub">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/landing.js"></script>
</body>
</html>
