<html lang="en">

<meta charset="UTF-8">

* { margin:0; padding:0; box-sizing:border-box; }

html,body { width:1280px; height:640px; overflow:hidden; }

body {

font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

background:#0f172a; position:relative; color:#fff;

display:flex; flex-direction:column; align-items:center; justify-content:center;

}

.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }

.b1 { width:520px; height:520px; left:-80px; top:-120px; background:#3b82f6; }

.b2 { width:560px; height:560px; right:-120px; bottom:-160px; background:#006644; opacity:.6; }

.b3 { width:360px; height:360px; left:60%; top:-140px; background:#60a5fa; opacity:.4; }

.grid {

position:absolute; inset:0;

background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);

background-size:26px 26px;

-webkit-mask:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);

mask:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);

}

.stack { position:relative; text-align:center; z-index:2; }

.brandrow { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px; }

.logo { width:66px; height:66px; display:block; }

.name { font-size:30px; font-weight:800; letter-spacing:.5px; }

h1 { font-size:64px; font-weight:800; line-height:1.05; letter-spacing:-1px;

background:linear-gradient(90deg,#93c5fd 0%,#ffffff 45%,#86efac 100%);

-webkit-background-clip:text; background-clip:text; color:transparent; }

.sub { font-size:22px; color:#94a3b8; margin-top:16px; }

.tiles { display:flex; gap:16px; justify-content:center; margin-top:40px; }

.tile { font-size:20px; color:#e2e8f0; padding:14px 22px; border-radius:14px;

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

-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

.url { position:absolute; bottom:34px; font-size:18px; color:#64748b; z-index:2; }

<div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>

<div class="grid"></div>

<div class="stack">

<div class="brandrow"><img class="logo" src="logo.svg" alt="MCPProxy logo" /><div class="name">MCPProxy</div></div>

<h1>Supercharge AI Agents, Safely</h1>

<div class="sub">One safe endpoint in front of every MCP server.</div>

<div class="tiles">

<div class="tile">🔍 Discover</div>

<div class="tile">🛡️ Quarantine</div>

<div class="tile">🔗 Federate</div>

<div class="tile">⚡ −99% tokens</div>

</div>

</div>

<div class="url">mcpproxy.app</div>