index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vigilio</title>
<meta name="description" content="Vigilio." />
<!-- Stealth: discourage search-engine indexing. Remove this line when you're ready to be discovered. -->
<meta name="robots" content="noindex, nofollow" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">

<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  --paper:#FFFFFF; --paper-2:#F6F8FB; --line:#E2E6EE; --line-2:#C8CFDC;
  --ink:#0B1020; --ink-2:#1A2236; --fg-2:#3A4358; --muted:#6B7388; --muted-2:#98A0B5;
  --green:#0E9F6B; --blue:#2B5BD7;
  --serif:'Instrument Serif','Source Serif Pro',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; min-height:100svh; overflow:hidden;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--paper);}

.stage{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  isolation:isolate; padding:40px 24px;
  background:var(--paper);
}

/* Ambient: a single, slow "breathing" glow — a quiet seed of light, revealing nothing */
.glow{
  position:absolute; z-index:-1;
  top:44%; left:50%; width:min(760px,120vw); height:min(760px,120vw);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(14,159,107,0.10), transparent 46%),
    radial-gradient(circle at 54% 46%, rgba(43,91,215,0.08), transparent 52%);
  filter:blur(6px);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.72; transform:translate(-50%,-50%) scale(.96);}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
}
/* faint fixed grid, masked to fade at the edges */
.grid{
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(to right, rgba(11,16,32,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,16,32,0.035) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 46%, #000 10%, transparent 72%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 46%, #000 10%, transparent 72%);
}

/* Center mark */
.core{display:flex; flex-direction:column; align-items:center; text-align:center;}

.logo-hex{width:52px;height:52px;position:relative;display:inline-block;margin-bottom:26px;}
.logo-hex .outer{width:100%;height:100%;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%);display:block;box-shadow:0 6px 30px rgba(14,159,107,0.18);}
.logo-hex .inner{position:absolute;width:84%;height:84%;top:8%;left:8%;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--paper);}
.logo-hex .cored{position:absolute;width:34%;height:34%;top:33%;left:33%;background:var(--green);transform:rotate(45deg);}

.word{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(52px,9vw,96px); line-height:1; letter-spacing:-0.02em;
  color:var(--ink); margin-bottom:22px;
}

.status{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:34px;
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;flex-shrink:0;}
.status .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);animation:ping 3s ease-out infinite;}
@keyframes ping{0%{transform:scale(.5);opacity:.85;}100%{transform:scale(1.85);opacity:0;}}

.contact{
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--muted-2);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:color .25s, border-color .25s;
}
.contact:hover{color:var(--ink); border-bottom-color:var(--line-2);}

/* Legal — always present, regardless of content */
.legal{
  position:absolute; bottom:26px; left:0; right:0;
  text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--muted-2);
}

@media (max-width:560px){
  .word{font-size:clamp(46px,15vw,64px);}
  .logo-hex{width:46px;height:46px;}
}

/* Reveal on load */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.12s;} .d2{transition-delay:.24s;} .d3{transition-delay:.36s;} .d4{transition-delay:.52s;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .rv{opacity:1;transform:none;}
  .glow{opacity:.85;}
}
</style>
</head>
<body>

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

  <main class="core">
    <span class="logo-hex rv" aria-hidden="true"><span class="outer"></span><span class="inner"></span><span class="cored"></span></span>
    <h1 class="word rv d1">vigilio</h1>
    <div class="status rv d2"><span class="dot"></span>The team is busy connecting the dots..</div>
    <a class="contact rv d3" href="mailto:transform@vigilio.ai">transform@vigilio.ai</a>
  </main>

  <footer class="legal rv d4">© 2026 Vigilio. All rights reserved.</footer>
</div>

<script>
window.addEventListener('load',()=>document.querySelectorAll('.rv').forEach(el=>el.classList.add('in')));
setTimeout(()=>document.querySelectorAll('.rv').forEach(el=>el.classList.add('in')),140);
</script>

<!-- Analytics (carried over from the existing site; useful for seeing who visits during stealth — remove if not wanted) -->
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog&&window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once unregister identify reset people.set".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_yzuwWnDjV5AbyXRFJ8hBc9qegmyjyxfY9E95RhwkqHxn',{api_host:'https://us.i.posthog.com',defaults:'2026-01-30',person_profiles:'identified_only'});
</script>
<script>
(function(){var t='4dcae2d3ac02f7';fetch('https://ipinfo.io/json?token='+t).then(r=>r.json()).then(d=>{if(window.posthog){posthog.register({ip_city:d.city,ip_region:d.region,ip_country:d.country,ip_isp:d.org});posthog.setPersonProperties&&posthog.setPersonProperties({ip_city:d.city,ip_isp:d.org});}}).catch(()=>{});})();
</script>

</body>
</html>