<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COBALT Cloud — Hyper Edition</title>
<style>
    body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: #0a0f1c;
        color: #e6e6e6;
        overflow-x: hidden;
    }

    .glow {
        text-shadow: 0 0 10px rgba(0,150,255,0.8), 0 0 20px rgba(0,150,255,0.6);
    }

    .topbar {
        background: linear-gradient(90deg, #001a33, #003f7f, #005fb8, #0078d4);
        padding: 20px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .brand {
        font-size: 34px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 2px;
    }

    nav a {
        margin-left: 30px;
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

    nav a:hover {
        color: #00aaff;
        text-shadow: 0 0 10px #00aaff;
    }

    .hero {
        padding: 160px 60px;
        background: radial-gradient(circle at top left, #0078d4, #003f7f, #001a33);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .particle {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #00aaff;
        border-radius: 50%;
        box-shadow: 0 0 12px #00aaff;
        animation: float 12s infinite ease-in-out;
        opacity: 0.7;
    }

    @keyframes float {
        0% { transform: translateY(0px) translateX(0px); }
        50% { transform: translateY(-80px) translateX(40px); }
        100% { transform: translateY(0px) translateX(0px); }
    }

    .hero h1 {
        font-size: 80px;
        margin-bottom: 20px;
        color: #ffffff;
        text-shadow: 0 0 20px #00aaff;
    }

    .hero p {
        font-size: 24px;
        max-width: 900px;
        color: #d0eaff;
    }

    .hero .btn {
        margin-top: 40px;
        background: #00aaff;
        color: #001a33;
        padding: 18px 36px;
        border-radius: 8px;
        border: none;
        font-size: 20px;
        cursor: pointer;
        font-weight: 700;
        box-shadow: 0 0 20px #00aaff;
        transition: 0.3s;
    }

    .hero .btn:hover {
        background: #ffffff;
        box-shadow: 0 0 30px #00aaff;
    }

    .section {
        padding: 100px 60px;
        background: #0a0f1c;
    }

    .section h2 {
        font-size: 48px;
        color: #00aaff;
        text-align: center;
        margin-bottom: 60px;
        text-shadow: 0 0 20px #0078d4;
    }

    .features {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 40px;
    }

    .feature {
        background: linear-gradient(135deg, #001a33, #003f7f);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0,150,255,0.4);
        transition: 0.3s;
        border: 2px solid #00aaff;
    }

    .feature:hover {
        transform: translateY(-10px);
        box-shadow: 0 0 40px rgba(0,150,255,0.8);
    }

    .feature h3 {
        margin-top: 0;
        font-size: 26px;
        color: #00aaff;
        text-shadow: 0 0 10px #00aaff;
    }

    .feature p {
        font-size: 18px;
        color: #cce6ff;
    }

    .product {
        background: linear-gradient(135deg, #00264d, #004c99);
        padding: 60px;
        border-radius: 16px;
        margin-bottom: 60px;
        box-shadow: 0 0 30px rgba(0,150,255,0.5);
        border: 2px solid #00aaff;
    }

    .product h3 {
        font-size: 32px;
        color: #00aaff;
        margin-top: 0;
        text-shadow: 0 0 12px #00aaff;
    }

    .product p {
        font-size: 20px;
        margin-bottom: 30px;
        color: #d0eaff;
    }

    .product .btn {
        background: #00aaff;
        color: #001a33;
        padding: 14px 26px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 18px;
        font-weight: 700;
        box-shadow: 0 0 20px #00aaff;
    }

    .product .btn:hover {
        background: #ffffff;
        box-shadow: 0 0 30px #00aaff;
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
    }

    .price-card {
        background: linear-gradient(135deg, #001a33, #003f7f);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0,150,255,0.4);
        text-align: center;
        border: 2px solid #00aaff;
    }

    .price-card h3 {
        font-size: 26px;
        color: #00aaff;
        margin-bottom: 10px;
    }

    .price-card .price {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #e6e6e6;
    }

    .price-card p {
        font-size: 18px;
        color: #cce6ff;
    }

    .testimonials {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 30px;
    }

    .testimonial {
        background: linear-gradient(135deg, #001a33, #003f7f);
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,150,255,0.4);
        border-left: 6px solid #00aaff;
    }

    .testimonial p {
        font-size: 18px;
        margin-bottom: 10px;
        color: #d0eaff;
    }

    .testimonial span {
        font-size: 15px;
        color: #99c2ff;
    }

    .footer {
        padding: 50px 60px;
        background: linear-gradient(90deg, #001a33, #003f7f, #005fb8);
        color: white;
        text-align: center;
        font-size: 18px;
        margin-top: 60px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
    }
</style>
</head>
<body>

<div class="topbar">
    <div class="brand glow">COBALT Cloud</div>
    <nav>
        <a href="#products">Products</a>
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#mission">Mission</a>
        <a href="#stack">Stack</a>
        <a href="#usecases">Use Cases</a>
        <a href="#about">About</a>
    </nav>
</div>

<div class="hero">
    <div class="particle" style="top:20%; left:10%; animation-delay:0s;"></div>
    <div class="particle" style="top:40%; left:30%; animation-delay:2s;"></div>
    <div class="particle" style="top:60%; left:50%; animation-delay:4s;"></div>
    <div class="particle" style="top:30%; left:70%; animation-delay:1s;"></div>
    <div class="particle" style="top:50%; left:90%; animation-delay:3s;"></div>

    <h1 class="glow">COBALT Cloud</h1>
    <p>
        The neon‑cobalt, hyper‑modern cloud platform built for IT programs, labs,
        and real infrastructure learning. Azure‑inspired. Cobalt‑enhanced.
        Absolutely fucking sick.
    </p>
    <button class="btn">Launch COBALT</button>
</div>

<div class="section" id="products">
    <h2>COBALT Products</h2>

    <div class="product">
        <h3>Virtual Machines</h3>
        <p>Lightning‑fast provisioning, clean networking, and instant access.</p>
        <button class="btn">Explore VMs</button>
    </div>

    <div class="product">
        <h3>Storage</h3>
        <p>Simple, scalable buckets with predictable pricing.</p>
        <button class="btn">Explore Storage</button>
    </div>

    <div class="product">
        <h3>Networking</h3>
        <p>NAT‑friendly public endpoints with auto‑TLS.</p>
        <button class="btn">Explore Networking</button>
    </div>

    <div class="product">
        <h3>Identity</h3>
        <p>Lightweight MFA, roles, and user management.</p>
        <button class="btn">Explore Identity</button>
    </div>
</div>

<div class="section" id="features">
    <h2>Platform Features</h2>

    <div class="features">
        <div class="feature">
            <h3>Neon Cobalt UI</h3>
            <p>Glowing, animated, futuristic interface.</p>
        </div>
        <div class="feature">
            <h3>Student‑Ready</h3>
            <p>Built for real IT education.</p>
        </div>
        <div class="feature">
            <h3>Fast Provisioning</h3>
            <p>VMs boot in seconds.</p>
        </div>
        <div class="feature">
            <h3>Predictable Pricing</h3>
            <p>No surprise fees.</p>
        </div>
        <div class="feature">
            <h3>NAT‑Friendly Access</h3>
            <p>Expose ports safely.</p>
        </div>
        <div class="feature">
            <h3>Instructor Tools</h3>
            <p>Class templates and resets.</p>
        </div>
    </div>
</div>

<div class="section" id="pricing">
    <h2>Pricing</h2>

    <div class="pricing-grid">
        <div class="price-card">
            <h3>Starter</h3>
            <div class="price">$49/mo</div>
            <p>Up to 10 VMs</p>
        </div>

        <div class="price-card">
            <h3>Standard</h3>
            <div class="price">$99/mo</div>
            <p>Up to 30 VMs</p>
        </div>

        <div class="price-card">
            <h3>Enterprise</h3>
            <div class="price">$199/mo</div>
            <p>Unlimited VMs</p>
        </div>
    </div>
</div>

<div class="section" id="testimonials">
    <h2>Testimonials</h2>

    <div class="testimonials">
        <div class="testimonial">
            <p>“COBALT gives my students real infrastructure to break and fix.”</p>
            <span>— IT Instructor</span>
        </div>
        <div class="testimonial">
            <p>“Way simpler than Azure or AWS. My class actually understands networking now.”</p>
            <span>— Network Admin</span>
        </div>
        <div class="testimonial">
            <p>“The NAT‑friendly endpoints are a game changer.”</p>
            <span>— Security Instructor</span>
        </div>
    </div>
</div>

<div class="section" id="mission">
    <h2>Our Mission</h2>
    <div class="product">
        <h3>Empowering Real Infrastructure Learning</h3>
        <p>
            COBALT exists because IT education deserves better than fake cloud simulators,
            locked‑down lab environments, and enterprise platforms bloated with noise.
            We deliver a neon‑cobalt, high‑performance environment where students build,
            break, fix, deploy, and understand real systems — the way it should be.
        </p>
        <p>
            Our mission is simple: <span class="glow">make real infrastructure accessible,
            modern, beautiful, and fucking exciting.</span>
        </p>
    </div>
</div>

<div class="section" id="stack">
    <h2>Technology Stack</h2>
    <div class="features">
        <div class="feature">
            <h3>Hypervisor Core</h3>
            <p>Optimized KVM/QEMU stack with lightning‑fast VM spin‑ups.</p>
        </div>
        <div class="feature">
            <h3>Neon Networking Engine</h3>
            <p>Auto‑NAT, auto‑TLS, auto‑firewall — cobalt‑powered simplicity.</p>
        </div>
        <div class="feature">
            <h3>COBALT Identity</h3>
            <p>Lightweight MFA, roles, and user federation without the Azure bloat.</p>
        </div>
        <div class="feature">
            <h3>COBALT Storage Layer</h3>
            <p>High‑throughput buckets with predictable pricing and zero egress traps.</p>
        </div>
        <div class="feature">
            <h3>Instructor Toolkit</h3>
            <p>Class templates, VM cloning, mass resets, and student isolation.</p>
        </div>
        <div class="feature">
            <h3>COBALT UI Framework</h3>
            <p>Neon‑cobalt gradients, glowing components, and Azure‑inspired clarity.</p>
        </div>
    </div>
</div>

<div class="section" id="usecases">
    <h2>Use Cases</h2>
    <div class="features">
        <div class="feature">
            <h3>IT Fundamentals</h3>
            <p>Teach OS basics, networking, and troubleshooting with real VMs.</p>
        </div>
        <div class="feature">
            <h3>Cybersecurity Labs</h3>
            <p>Isolated networks, attack‑safe environments, and instant resets.</p>
        </div>
        <div class="feature">
            <h3>Networking Courses</h3>
            <p>Students configure real routing, NAT, firewalls, and services.</p>
        </div>
        <div class="feature">
            <h3>Cloud Concepts</h3>
            <p>Hands‑on cloud learning without AWS/Azure complexity.</p>
        </div>
        <div class="feature">
            <h3>Dev Environments</h3>
            <p>Spin up dev boxes with VS Code Server, Docker, and more.</p>
        </div>
        <div class="feature">
            <h3>Capstone Projects</h3>
            <p>Students deploy full apps, networks, and services.</p>
        </div>
    </div>
</div>

<div class="section" id="about">
    <h2>About COBALT</h2>
    <div class="product">
        <h3>Built for Real IT Education</h3>
        <p>
            COBALT is built for instructors, students, and labs that care about real infrastructure.
            No enterprise noise. No fake cloud. Just clean, modern, cobalt‑blue tooling designed for
            Rhodes‑level IT programs.
        </p>
        <p>
            If your students are spinning up VMs, wiring networks, breaking things, and fixing them,
            COBALT is the environment they deserve.
        </p>
    </div>
</div>

<div class="footer">
    © COBALT Cloud — Hyper Edition
</div>

</body>
</html>
