:root{
  --bg:
    radial-gradient(85% 75% at 92% 45%, rgba(0, 134, 179, 0.30) 0%, transparent 60%),
    radial-gradient(85% 75% at 8% 45%, rgba(0, 134, 179, 0.30) 0%, transparent 60%),
    #000000;
  --grey-dim:#6f6f6f;
  --grey-body:#8c8c8c;
  --white:#ffffff;
  --scan:#e7c98a;
  --scan-glow:#c9a35f;
  --ink:#ffffff;
  --dim:#8f8f96;
  --hot:#ffffff;
  --pad:clamp(20px,3.2vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{
  font-family: "Satoshi", sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
  cursor:pointer;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#stage{
  position:fixed;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 74%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 74%,transparent 100%);
}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.gblur{position:fixed;left:0;right:0;z-index:2;pointer-events:none}
.gblur>div{position:absolute;left:0;right:0}
.gblur.top{top:0;height:20%}
.gblur.bot{bottom:0;height:52%}

.gblur.top>div:nth-child(1){top:40%;bottom:0;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  mask:linear-gradient(to top,transparent 0%,#000 34%,#000 67%,transparent 100%)}
.gblur.top>div:nth-child(2){top:20%;bottom:20%;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  mask:linear-gradient(to top,transparent 0%,#000 34%,#000 67%,transparent 100%)}
.gblur.top>div:nth-child(3){top:0;bottom:40%;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  mask:linear-gradient(to top,transparent 0%,#000 34%,#000 100%)}
.gblur.top>div:nth-child(4){top:0;bottom:60%;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  mask:linear-gradient(to top,transparent 0%,#000 50%,#000 100%)}
.gblur.top>div:nth-child(5){top:0;bottom:80%;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  mask:linear-gradient(to top,transparent 0%,#000 100%)}

.gblur.bot>div:nth-child(1){bottom:40%;top:0;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  mask:linear-gradient(to bottom,transparent 0%,#000 34%,#000 67%,transparent 100%)}
.gblur.bot>div:nth-child(2){bottom:20%;top:20%;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  mask:linear-gradient(to bottom,transparent 0%,#000 34%,#000 67%,transparent 100%)}
.gblur.bot>div:nth-child(3){bottom:0;top:40%;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  mask:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%)}
.gblur.bot>div:nth-child(4){bottom:0;top:60%;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  mask:linear-gradient(to bottom,transparent 0%,#000 50%,#000 100%)}
.gblur.bot>div:nth-child(5){bottom:0;top:80%;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  mask:linear-gradient(to bottom,transparent 0%,#000 100%)}

.scrim{position:fixed;left:0;right:0;z-index:3;pointer-events:none}
.scrim.top{top:0;height:22%;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0))}
.scrim.bot{bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 26%,rgba(0,0,0,.42) 58%,rgba(0,0,0,0) 100%)}

.ui{position:fixed;z-index:4;pointer-events:none}
.ui a{pointer-events:auto}

header{top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:clamp(18px,2.3vw,32px) var(--pad)}
.logo{display:block;line-height:0;color:var(--ink);text-decoration:none}
.logo img{width:clamp(140px,15vw,190px);height:auto;display:block}
.social{display:flex;align-items:center;gap:clamp(18px,2vw,26px)}
.social a{display:block;opacity:.82;transition:opacity .18s ease,transform .18s ease}
.social a:hover,.social a:focus-visible{opacity:1;transform:translateY(-1px)}
.social img{width:19px;height:19px;display:block}

.hero{left:0;right:0;bottom:0;padding:0 var(--pad) clamp(26px,3.6vw,52px)}
.eyebrow{font-size:clamp(10px,.85vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin-bottom:clamp(12px,1.4vw,18px)}
h1{font-weight:600;font-size:clamp(15px,calc((100vw - 2 * var(--pad)) / 17),32px);
  line-height:1.1;letter-spacing:-.02em;white-space:normal}
.foot{margin-top:clamp(18px,2.2vw,28px)}
.foot p{color:var(--dim);font-size:clamp(13px,1.05vw,15px);line-height:1.7;max-width:max(62ch,640px)}
:focus-visible{outline:1px solid var(--hot);outline-offset:3px}

#nope{position:fixed;inset:0;display:none;place-items:center;z-index:9;
  color:#7a7a80;font-size:12px;letter-spacing:.08em;line-height:1.9;text-align:center;padding:24px}

@media (max-width:420px){
  .logo img{width:150px}
}
@media (max-width:620px){
  .gblur.bot{height:56%}
  .scrim.bot{height:62%}
}