<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skyrain - Next-Gen Game Server Hosting</title>
    <link rel="stylesheet" href="style.css">
    <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@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="noise-overlay"></div>
    
    <nav class="navbar">
        <div class="container">
            <div class="logo">
                <i class="fas fa-cloud"></i> Skyrain<span class="gradient-dot"></span>
            </div>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#locations">Locations</a>
                <a href="#support">Support</a>
            </div>
            <button class="nav-button">Buy Now</button>
        </div>
    </nav>

    <section class="hero">
        <div class="container">
            <h2 class="new-badge">
                <i class="fas fa-gamepad"></i> Next-Gen Game Hosting Platform
            </h2>
            <h1 class="gradient-text">Level Up Your Gaming Experience</h1>
            <p class="hero-description">Deploy high-performance game servers with enterprise-grade hardware and instant setup in just a few clicks</p>
            <button class="cta-button">Deploy Game Server <span class="arrow">→</span></button>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">🖥️</div>
                    <div class="stat-value">30+</div>
                    <div class="stat-label">Active Servers</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🌍</div>
                    <div class="stat-value">2+</div>
                    <div class="stat-label">Global Locations</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🛡️</div>
                    <div class="stat-value">100%</div>
                    <div class="stat-label">DDoS Protection</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">⚡</div>
                    <div class="stat-value">99.9%</div>
                    <div class="stat-label">Uptime</div>
                </div>
            </div>
        </div>
    </section>

    <section class="features" id="features">
        <div class="container">
            <h2 class="section-title gradient-text">Enterprise-Grade Infrastructure</h2>
            <p class="section-description">Powered by cutting-edge technology and backed by industry experts</p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Premium Hardware</h3>
                    <p>Latest generation AMD® Ryzen™ processors and NVMe SSDs for lightning-fast response times.</p>
                    <div class="specs-grid">
                        <div class="spec">
                            <span class="spec-label">Network Speed</span>
                            <span class="spec-value">1Gbps+</span>
                        </div>
                        <div class="spec">
                            <span class="spec-label">CPU Cores</span>
                            <span class="spec-value">Up to 32</span>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🛡️</div>
                    <h3>Advanced Security</h3>
                    <p>Enterprise-grade security systems with multi-layered DDoS protection and automated threat mitigation.</p>
                    <div class="specs-grid">
                        <div class="spec">
                            <span class="spec-label">DDoS Protection</span>
                            <span class="spec-value">1.5Tbps+</span>
                        </div>
                        <div class="spec">
                            <span class="spec-label">Firewall Rules</span>
                            <span class="spec-value">Custom</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  
<section class="network" id="locations">
    <div class="container">
        <h2 class="section-title gradient-text">Global Network Presence</h2>
        <p class="section-description">Strategic locations worldwide ensuring low latency for your players</p>
        
        <div class="locations-grid">
            <!-- India Section -->
            <div class="location-card">
                <div class="location-icon">📍</div>
                <h3>India</h3>
                <p>Coverage across key European gaming markets</p>
                <div class="server-info">
                    <span class="server-count">6+ Servers</span>
                    <ul class="server-list">
                        <li>Mumbai</li>
                        <li>Delhi</li>
                    </ul>
                </div>
                <div class="progress-bar">
                    <div class="progress india"></div>
                </div>
            </div>
            
            <!-- Asia Section -->
            <div class="location-card">
                <div class="location-icon">🌏</div>
                <h3>Asia</h3>
                <p>Serving the fastest-growing gaming region</p>
                <div class="server-info">
                    <span class="server-count">2+ Servers</span>
                    <ul class="server-list">
                        <li>Singapore</li>
                    </ul>
                </div>
                <div class="progress-bar">
                    <div class="progress asia"></div>
                </div>
            </div>
        </div>
    </div>
</section>

    <section class="pricing" id="pricing">
        <div class="container">
            <h2 class="section-title gradient-text">Pricing</h2>
            <p class="section-description">Choose the perfect plan for your gaming needs!</p>
            
            <div class="pricing-grid">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Starter</h3>
                        <div class="price">$5<span>/mo</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>2GB RAM</li>
                        <li>10GB SSD Storage</li>
                        <li>Basic DDoS Protection</li>
                        <li>24/7 Support</li>
                    </ul>
                    <button class="pricing-button">Get Started</button>
                </div>
                <div class="pricing-card featured">
                    <div class="pricing-header">
                        <div class="popular-badge">Most Popular</div>
                        <h3>Pro</h3>
                        <div class="price">$15<span>/mo</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>8GB RAM</li>
                        <li>50GB SSD Storage</li>
                        <li>Advanced DDoS Protection</li>
                        <li>Priority Support</li>
                    </ul>
                    <button class="pricing-button">Get Started</button>
                </div>
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Enterprise</h3>
                        <div class="price">$30<span>/mo</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>16GB RAM</li>
                        <li>100GB SSD Storage</li>
                        <li>Enterprise DDoS Protection</li>
                        <li>24/7 Premium Support</li>
                    </ul>
                    <button class="pricing-button">Get Started</button>
                </div>
            </div>
        </div>
    </section>

    <section class="support" id="support">
        <div class="container">
            <h2 class="section-title gradient-text">24/7 Expert Support</h2>
            <p class="section-description">Our dedicated team is here to help you succeed</p>
            
            <div class="support-grid">
                <div class="support-card">
                    <div class="support-icon">💬</div>
                    <h3>Live Chat</h3>
                    <p>Get instant help from our support team, available 24/7</p>
                </div>
                <div class="support-card">
                    <div class="support-icon">📚</div>
                    <h3>Knowledge Base</h3>
                    <p>Comprehensive guides and tutorials to help you get started</p>
                </div>
                <div class="support-card">
                    <div class="support-icon">🎮</div>
                    <h3>Game Specialists</h3>
                    <p>Expert support from experienced game server administrators</p>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <div class="logo">Skyrain<span class="gradient-dot">.</span></div>
                    <p>Premium game hosting, serving gamers starting from 2025.</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>Products</h4>
                        <a href="#minecraft">Minecraft Hosting</a>
                        <a href="#dedicated">Dedicated Servers</a>
                    </div>
                    <div class="footer-column">
                        <h4>Company</h4>
                        <a href="#about">About Us</a>
                        <a href="#contact">Contact</a>
                    </div>
                    <div class="footer-column">
                        <h4>Legal</h4>
                        <a href="#terms">Terms of Service</a>
                        <a href="#privacy">Privacy Policy</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Skyrain. All rights reserved.</p>
            </div>
        </div>
    </footer>

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