<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COBALT Cloud</title>
<style>
    body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: #f3f2f1;
        color: #323130;
    }

    /* Top bar */
    .topbar {
        background: #005fb8;
        color: white;
        padding: 14px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .topbar .brand {
        font-size: 22px;
        font-weight: 600;
    }

    .topbar nav a {
        margin-left: 20px;
        color: white;
        text-decoration: none;
        font-size: 14px;
    }

    .topbar nav a:hover {
        text-decoration: underline;
    }

    /* Hero */
    .hero {
        padding: 80px 40px;
        background: linear-gradient(135deg, #005fb8, #0078d4);
        color: white;
        text-align: left;
    }

    .hero h1 {
        font-size: 42px;
        margin-bottom: 10px;
    }

    .hero p {
        font-size: 18px;
        max-width: 600px;
    }

    .hero .btn {
        margin-top: 25px;
        background: #ffffff;
        color: #005fb8;
        padding: 12px 22px;
        border-radius: 4px;
        border: none;
        font-size: 15px;
        cursor: pointer;
    }

    .hero .btn:hover {
        background: #e5e5e5;
    }

    /* Sections */
    .section {
        padding: 50px 40px;
        background: #f3f2f1;
    }

    .section h2 {
        font-size: 26px;
        color: #005fb8;
        margin-bottom: 20px;
    }

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

    .feature {
        background: white;
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .feature h3 {
        margin-top: 0;
        font-size: 18px;
        color: #005fb8;
    }

    .feature p {
        font-size: 14px;
    }

    /* Footer */
    .footer {
        padding: 20px 40px;
        background: #ffffff;
        font-size: 13px;
        color: #666;
        border-top: 1px solid #ddd;
        text-align: center;
    }
</style>
</head>
<body>

<div class="topbar">
    <div class="brand">🔷 COBALT Cloud</div>
    <nav>
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#about">About</a>
    </nav>
</div>

<div class="hero">
    <h1>COBALT Cloud</h1>
    <p>
        A simple, IT‑friendly cloud platform with Azure‑style clarity and zero enterprise bullshit.
        Provision VMs, expose services, and teach real infrastructure—fast.
    </p>
    <button class="btn">Get Started</button>
</div>

<div class="section" id="features">
    <h2>Why COBALT</h2>
    <div class="features">
        <div class="feature">
            <h3>VM‑First Design</h3>
            <p>Spin up teaching and lab VMs in seconds with sane defaults and clean networking.</p>
        </div>
        <div class="feature">
            <h3>NAT‑Friendly Access</h3>
            <p>Expose services safely with simple public endpoints—no 40‑step wizard.</p>
        </div>
        <div class="feature">
            <h3>Student‑Ready</h3>
            <p>Built for IT programs: real systems, real networks, no fake “cloud” simulations.</p>
        </div>
        <div class="feature">
            <h3>Azure‑Inspired UI</h3>
            <p>Modern, familiar interface that feels like the Azure portal without the clutter.</p>
        </div>
    </div>
</div>

<div class="section" id="pricing">
    <h2>Pricing</h2>
    <p>Keep it simple: flat per‑VM or per‑class pricing. No hidden egress, no surprise bills.</p>
</div>

<div class="section" id="about">
    <h2>About COBALT</h2>
    <p>
        COBALT is designed for instructors, students, and labs that actually care about
        understanding infrastructure—not just clicking through cloud dashboards.
    </p>
</div>

<div class="footer">
    © COBALT Cloud — Built for Rhodes‑style IT programs.
</div>

</body>
</html>
