index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DevMagic Open</title>
<meta name="description" content="Ferramentas open source feitas para agentes trabalharem sozinhos.">
<style>
  :root { --bg:#0b0a14; --fg:#e8e6f4; --mut:#9a96b8; --neon:#ff2bd6; --ciano:#22e6ff; }
  * { box-sizing:border-box; }
  body { margin:0; min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 20% 10%, #2a0f3d 0, var(--bg) 55%); color:var(--fg); font:16px/1.5 ui-sans-serif, system-ui, sans-serif; padding:24px; }
  main { max-width:640px; width:100%; }
  h1 { font-size:clamp(2rem,6vw,3.2rem); margin:0 0 .3em; letter-spacing:-.02em; }
  h1 span { color:var(--neon); text-shadow:0 0 18px var(--neon); }
  p.lema { color:var(--mut); margin:0 0 2rem; font-size:1.15rem; }
  a.card { display:block; padding:20px 22px; border:1px solid #3a2f5c; border-radius:14px; background:#120f22; color:inherit; text-decoration:none; transition:border-color .2s, box-shadow .2s; }
  a.card:hover { border-color:var(--ciano); box-shadow:0 0 24px #22e6ff33; }
  .nome { font-weight:700; font-size:1.2rem; color:var(--ciano); }
  code { display:inline-block; margin-top:10px; padding:6px 10px; border-radius:8px; background:#0b0a14; color:var(--fg); font-size:.9rem; }
  footer { margin-top:2.5rem; color:var(--mut); font-size:.9rem; }
  footer a { color:var(--mut); }
</style>
</head>
<body>
<main>
  <h1>DevMagic <span>Open</span></h1>
  <p class="lema">Ferramentas open source feitas para agentes trabalharem sozinhos.</p>
  <a class="card" href="https://github.com/biliboss/envless">
    <div class="nome">envless</div>
    <div>Segredos para agentes, sem .env e sem servidor.</div>
    <code>brew install biliboss/envless/envless</code>
  </a>
  <footer>Em breve, mais projetos. · <a href="https://github.com/devmagic">github.com/devmagic</a></footer>
</main>
</body>
</html>