<!doctype html>

<head>

<title>Cosmos — Build, Ship, Scale</title>

<style>

:root{

--bg:#070A12;

--card:#0D1222;

--text:#EAF0FF;

--muted:#AAB6D6;

--line:rgba(255,255,255,.10);

--brand:#7C5CFF;

--brand2:#27D1FF;

--ok:#3DFFB5;

--shadow: 0 12px 30px rgba(0,0,0,.35);

--radius:16px;

--max:1100px;

}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

margin:0;

font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

background: radial-gradient(900px 600px at 10% 10%, rgba(124,92,255,.18), transparent 60%),

radial-gradient(900px 600px at 90% 20%, rgba(39,209,255,.16), transparent 60%),

var(--bg);

color:var(--text);

line-height:1.45;

}

a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

.nav{

position:sticky; top:0; z-index:50;

backdrop-filter:saturate(140%) blur(10px);

background: rgba(7,10,18,.55);

border-bottom:1px solid var(--line);

}

.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}

.brand{

display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;

}

.logo{

width:32px; height:32px; border-radius:12px;

background: conic-gradient(from 210deg, var(--brand), var(--brand2), var(--ok), var(--brand));

box-shadow: 0 8px 18px rgba(124,92,255,.25);

position:relative;

}

.logo:after{

content:""; position:absolute; inset:7px;

background: var(--bg); border-radius:10px;

border:1px solid rgba(255,255,255,.10);

}

.nav-links{display:flex; gap:18px; align-items:center}

.nav-links a{

color:var(--muted);

padding:8px 10px;

border-radius:10px;

transition:.15s ease;

font-weight:600;

font-size:14px;

}

.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.06)}

.btn{

display:inline-flex; align-items:center; justify-content:center;

gap:10px;

padding:11px 14px;

border-radius:12px;

border:1px solid rgba(255,255,255,.14);

background: rgba(255,255,255,.06);

color:var(--text);

font-weight:700;

cursor:pointer;

transition:.15s ease;

box-shadow: 0 10px 22px rgba(0,0,0,.22);

}

.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.09)}

.btn.primary{

border:none;

background: linear-gradient(90deg, var(--brand), var(--brand2));

color:#081022;

}

.btn.primary:hover{filter:brightness(1.06)}

.menu-btn{display:none}

.hero{padding:72px 0 34px}

.hero-grid{

display:grid;

grid-template-columns: 1.3fr .7fr;

gap:26px;

align-items:stretch;

}

.pill{

display:inline-flex; gap:10px; align-items:center;

padding:8px 12px; border-radius:999px;

border:1px solid rgba(255,255,255,.14);

background: rgba(255,255,255,.05);

color:var(--muted);

font-weight:700; font-size:13px;

width:fit-content;

}

.dot{

width:10px; height:10px; border-radius:99px;

background: linear-gradient(180deg, var(--ok), var(--brand2));

box-shadow:0 0 18px rgba(61,255,181,.35);

}

h1{

margin:14px 0 10px;

font-size: clamp(34px, 4.2vw, 56px);

line-height:1.02;

letter-spacing:-.8px;

}

.sub{

color:var(--muted);

font-size:16px;

max-width: 60ch;

margin: 0 0 18px;

}

.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.meta{

display:flex; gap:16px; flex-wrap:wrap;

margin-top:20px; color:var(--muted); font-weight:650; font-size:13px;

}

.meta span{

display:inline-flex; gap:8px; align-items:center;

padding:8px 10px;

border:1px solid rgba(255,255,255,.10);

border-radius:12px;

background: rgba(255,255,255,.03);

}

.card{

background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.10);

border-radius: var(--radius);

box-shadow: var(--shadow);

}

.hero-card{

padding:18px;

position:relative;

overflow:hidden;

min-height: 320px;

}

.hero-card:before{

content:"";

position:absolute; inset:-2px;

background:

radial-gradient(500px 220px at 20% 20%, rgba(124,92,255,.22), transparent 55%),

radial-gradient(420px 240px at 80% 55%, rgba(39,209,255,.22), transparent 55%);

z-index:0;

}

.hero-card > *{position:relative; z-index:1}

.stat{

display:grid; gap:10px;

margin-top:8px;

}

.stat-row{

display:flex; justify-content:space-between; align-items:center;

padding:12px 12px;

border-radius:14px;

background: rgba(0,0,0,.22);

border:1px solid rgba(255,255,255,.10);

}

.stat-row b{font-size:14px}

.stat-row small{color:var(--muted); font-weight:650}

.section{padding:44px 0}

.section h2{

margin:0 0 8px;

font-size: clamp(24px, 2.3vw, 32px);

letter-spacing:-.4px;

}

.section p.lead{margin:0 0 18px; color:var(--muted); max-width:70ch}

.grid-3{

display:grid;

grid-template-columns: repeat(3, 1fr);

gap:16px;

}

.grid-2{

display:grid;

grid-template-columns: 1fr 1fr;

gap:16px;

}

.mini{

padding:16px;

}

.mini h3{margin:6px 0 6px; font-size:16px}

.mini p{margin:0; color:var(--muted); font-size:14px}

.icon{

width:40px; height:40px; border-radius:14px;

background: rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

display:grid; place-items:center;

font-weight:900;

}

.band{

padding:22px;

display:flex; align-items:center; justify-content:space-between;

gap:16px;

}

.band p{margin:0; color:var(--muted)}

.about{

padding:22px;

display:grid;

grid-template-columns: 1.1fr .9fr;

gap:18px;

align-items:start;

}

.about ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px}

.about li{

padding:12px 12px;

border-radius:14px;

background: rgba(0,0,0,.20);

border:1px solid rgba(255,255,255,.10);

color:var(--muted);

font-weight:650;

}

.contact{

padding:22px;

display:grid;

grid-template-columns: 1fr 1fr;

gap:16px;

}

label{display:block; font-size:13px; color:var(--muted); font-weight:700; margin:0 0 6px}

input, textarea{

width:100%;

padding:12px 12px;

border-radius:12px;

border:1px solid rgba(255,255,255,.12);

background: rgba(0,0,0,.20);

color:var(--text);

outline:none;

font-size:14px;

}

textarea{min-height:120px; resize:vertical}

.footer{

padding:26px 0 40px;

border-top:1px solid var(--line);

color:var(--muted);

font-size:13px;

}

.footer-inner{

display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;

align-items:center;

}

/* Mobile */

@media (max-width: 900px){

.hero-grid{grid-template-columns: 1fr}

.grid-3{grid-template-columns: 1fr}

.grid-2{grid-template-columns: 1fr}

.about{grid-template-columns: 1fr}

.contact{grid-template-columns: 1fr}

.menu-btn{display:inline-flex}

.nav-links{

display:none;

position:absolute;

left:20px; right:20px; top:64px;

padding:12px;

border-radius:16px;

border:1px solid rgba(255,255,255,.12);

background: rgba(7,10,18,.92);

backdrop-filter: blur(12px);

flex-direction:column;

align-items:stretch;

}

.nav-links.show{display:flex}

.nav-links a{padding:12px}

.nav-inner{position:relative}

}

</style>

</head>

<body>

<span>cosmos</span>

</a>

<a href="#about">About</a>

<a href="#services">Services</a>

<a href="#contact">Contact</a>

<a class="btn primary" href="#contact">Get started</a>

</nav>

☰ Menu

</button>

</div>

</header>

<div>

<div class="pill"><span class="dot"></span> Shipping outcomes, not vibes</div>

<h1>Cosmos builds products that don’t break at scale.</h1>

We help teams design, build, and deploy modern software—fast, clean, and production-ready.

Think: crisp engineering + zero drama operations.

</p>

<a class="btn primary" href="#contact">Book a quick call</a>

<a class="btn" href="#services">See services</a>

</div>

<span>✅ MVP → Launch</span>

<span>⚡ DevOps + Cloud</span>

<span>🧠 Architecture that lasts</span>

</div>

<h3 style="margin:0 0 8px; font-size:16px;">Cosmos snapshot</h3>

A tiny dashboard-looking thing because we’re fancy like that.

</p>

<div>

<b>Build speed</b><br /><small>Delivery cadence</small>

</div>

</div>

<div>

<b>Reliability</b><br /><small>Incidents reduced</small>

</div>

</div>

<div>

<b>Cloud readiness</b><br /><small>Modernization</small>

</div>

</div>

<span class="pill" style="border-color:rgba(61,255,181,.25)">Microservices</span>

<span class="pill" style="border-color:rgba(39,209,255,.25)">Kubernetes</span>

</div>

</aside>

</div>

</section>

<h2>How Cosmos adds leverage</h2>

<p class="lead">Three simple plays that compound over time (like good habits, but for software).</p>

<h3>Build</h3>

<p>Ship clean APIs, services, and UI with sane defaults. No spaghetti, no heroics.</p>

</div>

<h3>Deploy</h3>

<p>Automate delivery with CI/CD, containers, and infra that’s easy to reason about.</p>

</div>

<h3>Scale</h3>

<p>Observability, cost control, and resilience so production doesn’t become a horror movie.</p>

</div>

</section>

<div>

<h2>About Cosmos</h2>

We’re a small, senior crew focused on high-signal execution. We plug in, align fast, and deliver.

Minimal meetings. Maximum movement.

</p>

<ul>

<li>Collaborative delivery with clear milestones</li>

<li>Multi-stack engineering (backend, frontend, cloud)</li>

<li>Production-first mindset (testing, security, reliability)</li>

</ul>

</div>

<h3 style="margin:0 0 8px;">Principles</h3>

The boring stuff that makes things good:

</p>

<div class="stat-row"><small>Clarity</small><b>↑</b></div>

<div class="stat-row"><small>Maintainability</small><b>↑</b></div>

<div class="stat-row"><small>Latency</small><b>↓</b></div>

</div>

</section>

<h2>Services</h2>

<p class="lead">Pick a lane or mix-and-match. We’ll make it cohesive.</p>

<h3>Microservices</h3>

<p>Design and build modular services that are deployable, testable, and scalable.</p>

</div>

<h3>Cloud & Platform</h3>

<p>AWS/Azure/GCP architecture, cost guardrails, and sane security baselines.</p>

</div>

<h3>DevOps</h3>

<p>CI/CD pipelines, containers, Kubernetes, and environments that don’t fight you.</p>

</div>

<div>

<b>Have a weird custom need?</b>

<p>Same. That’s usually where the best projects live.</p>

</div>

</div>

</section>

<h2>Contact</h2>

<p class="lead">Drop a message. This form is front-end only (static) — you can wire it to Formspree/Netlify later.</p>

<div>

<h3 style="margin:0 0 10px;">Send us a message</h3>

<div>

</div>

<div>

<label for="email">Email</label>

</div>

<div>

<label for="msg">Message</label>

</div>

</div>

</form>

</div>

<h3 style="margin:0 0 8px;">Cosmos</h3>

Chicago • Remote-friendly<br/>

Email: hello@cosmos.dev<br/>

Hours: Mon–Fri

</p>

<small>Typical kickoff</small><b>1 week</b>

</div>

<small>Engagements</small><b>MVP / Retainer</b>

</div>

<small>Style</small><b>Async-first</b>

</div>

</section>

<a href="#about">About</a>

<a href="#services">Services</a>

<a href="#contact">Contact</a>

</div>

</footer>

</main>

// tiny mobile menu

const menuBtn = document.getElementById('menuBtn');

const navLinks = document.getElementById('navLinks');

menuBtn?.addEventListener('click', () => navLinks.classList.toggle('show'));

navLinks?.addEventListener('click', (e) => {

if (e.target.tagName === 'A') navLinks.classList.remove('show');

});

// fake submit for static demo

function fakeSubmit(e){

e.preventDefault();

const s = document.getElementById('formStatus');

s.textContent = "Sent (demo). Hook this to Formspree/Netlify to make it real.";

e.target.reset();

return false;

}

document.getElementById('year').textContent = new Date().getFullYear();

</script>

</body>

</html>