<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quantormate — Coming Soon</title>
<meta name="description" content="Something new is loading. Quantormate is coming soon." />
<meta name="color-scheme" content="dark" />
<style>
:root{
--bg:#0b1a23; --panel:#0e2030; --ink:#eaf6fb; --muted:#9fb5c2;
--a1:#00e3ff; --a2:#78ffe1; --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; color:var(--ink); background:var(--bg);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
display:grid; place-items:center; padding:24px;
background-image:
radial-gradient(900px 500px at 50% -10%, rgba(120,255,225,.12), transparent 60%),
radial-gradient(600px 300px at 10% 120%, rgba(0,227,255,.12), transparent 60%),
radial-gradient(600px 300px at 90% 120%, rgba(0,227,255,.08), transparent 60%);
}
.card{
width:100%; max-width:720px; padding:32px 28px; text-align:center;
border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
backdrop-filter:saturate(120%) blur(6px);
box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.brand{
width:86px; height:86px; margin:4px auto 16px; border-radius:20px;
background:conic-gradient(from 180deg, var(--a1), var(--a2));
position:relative; overflow:hidden;
animation:breathe 3.2s ease-in-out infinite;
box-shadow:0 0 22px rgba(120,255,225,.35);
}
.brand::after{
content:"Q"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-weight:900; font-size:42px; color:#061016; text-shadow:0 0 0 rgba(0,0,0,0);
}
h1{margin:6px 0 10px; font-size:30px; letter-spacing:.2px}
p{margin:0; color:var(--muted)}
.tag{
display:inline-flex; align-items:center; gap:8px;
margin-top:14px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:13px;
}
.progress{
margin:24px auto 10px; height:8px; width:min(520px, 90vw);
background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; position:relative;
}
.progress::before{
content:""; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg, rgba(0,227,255,.0) 0%, rgba(0,227,255,.55) 40%, rgba(120,255,225,.75) 70%, rgba(120,255,225,.0) 100%);
animation:load 2.2s ease-in-out infinite;
}
.row{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.btn{
height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--line);
background:transparent; color:var(--ink); font-weight:700; letter-spacing:.2px; cursor:pointer;
}
.btn.primary{
background:linear-gradient(90deg, var(--a1), var(--a2)); color:#061016; border:none;
box-shadow:0 8px 22px rgba(0,227,255,.25);
}
footer{margin-top:18px; font-size:12px; color:var(--muted); opacity:.75}
@keyframes breathe{
0%,100%{transform:scale(1); filter:drop-shadow(0 0 12px rgba(120,255,225,.25))}
50%{transform:scale(1.04); filter:drop-shadow(0 0 26px rgba(0,227,255,.40))}
}
@keyframes load{
0%{transform:translateX(-100%)}
60%{transform:translateX(10%)}
100%{transform:translateX(110%)}
}
/* tiny screens */
@media (max-width:380px){ h1{font-size:24px} .brand{width:74px;height:74px} }
</style>
</head>
<body>
<main class="card" role="main">
<div class="brand" aria-hidden="true"></div>
<h1>Quantormate</h1>
<p>We’re building something new. <strong>Coming soon.</strong></p>
<div class="progress" aria-hidden="true"></div>
<div class="tag">Secure • Fast • Minimal noise</div>
<!-- Optional buttons (no data collection, anonymous-friendly). Edit or remove. -->
<div class="row">
<a class="btn primary" href="#" onclick="alert('Not ready yet — stay tuned!');return false;">Get Early Access</a>
<a class="btn" href="mailto:hello@quantormate.com" rel="nofollow">Contact</a>
</div>
<footer>© <span id="y"></span> Quantormate</footer>
</main>
<script>
// year
document.getElementById('y').textContent = new Date().getFullYear();
</script>
</body>
</html>