*,*::before,*::after{box-sizing:border-box}
:root{
  --void:#04030A; --deep:#0A0716; --paper:#EDE9FF; --purple:#8B5CF6;
  --purplehi:#B79CFF; --muted:#7A7290; --hair:rgba(139,92,246,.20);
}
html{background:var(--void);color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--purple);color:var(--void)}

/* backdrop */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nebula{position:absolute;inset:0;background:
  radial-gradient(1100px 720px at 15% 5%,rgba(139,92,246,.26),transparent 62%),
  radial-gradient(900px 640px at 88% 18%,rgba(96,52,190,.22),transparent 62%),
  radial-gradient(1200px 800px at 50% 108%,rgba(72,38,150,.20),transparent 68%)}
.stars{position:absolute;inset:0;background-repeat:repeat}
.stars.a{background-image:
  radial-gradient(1.2px 1.2px at 24px 40px,#fff,transparent),
  radial-gradient(1px 1px at 120px 210px,#d9ccff,transparent),
  radial-gradient(1.2px 1.2px at 300px 120px,#fff,transparent),
  radial-gradient(1px 1px at 420px 280px,#c9b8ff,transparent),
  radial-gradient(1.2px 1.2px at 520px 60px,#fff,transparent),
  radial-gradient(1px 1px at 640px 340px,#d9ccff,transparent);
  background-size:700px 700px;opacity:.95;animation:drift 260s linear infinite}
.stars.b{background-image:
  radial-gradient(2px 2px at 80px 60px,#fff,transparent),
  radial-gradient(1.6px 1.6px at 260px 190px,#b79cff,transparent),
  radial-gradient(2px 2px at 470px 90px,#fff,transparent),
  radial-gradient(1.6px 1.6px at 600px 300px,#c9b8ff,transparent);
  background-size:760px 760px;opacity:.9;animation:drift 170s linear infinite}
.stars.c{background-image:
  radial-gradient(2.8px 2.8px at 150px 120px,#fff,transparent),
  radial-gradient(2.4px 2.4px at 500px 380px,#e6ddff,transparent),
  radial-gradient(3px 3px at 680px 200px,#fff,transparent);
  background-size:900px 900px;opacity:.85;animation:drift 110s linear infinite}
@keyframes drift{from{background-position:0 0}to{background-position:0 -900px}}
#lamp,#halo{position:absolute;border-radius:50%;will-change:transform}
#lamp{width:960px;height:960px;filter:blur(90px);
  background:radial-gradient(circle,rgba(139,92,246,.42) 0%,rgba(139,92,246,.16) 34%,rgba(139,92,246,.05) 55%,transparent 70%)}
#halo{width:180px;height:180px;filter:blur(26px);
  background:radial-gradient(circle,rgba(214,196,255,.55) 0%,rgba(139,92,246,.25) 45%,transparent 72%)}

/* shell */
header{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;display:flex;
  align-items:center;justify-content:space-between;padding:0 20px;
  border-bottom:1px solid var(--hair);background:rgba(4,3,10,.7);backdrop-filter:blur(10px)}
@media(min-width:900px){header{padding:0 40px}}
.brand{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase}
.brand i{color:var(--purple);font-style:normal}
nav{display:flex;align-items:center;gap:4px}
nav a{padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .2s}
nav a:hover,nav a.on{color:var(--purplehi)}
nav a.cta{margin-left:6px;border:1px solid rgba(139,92,246,.4);color:var(--purplehi)}
nav a.cta:hover{background:var(--purple);color:var(--void)}

main{position:relative;z-index:10;max-width:1180px;margin:0 auto;padding:0 20px}
@media(min-width:900px){main{padding:0 40px}}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.045em}
h1{font-size:clamp(46px,7.5vw,92px);line-height:.93;margin:0}
h1 em{font-style:italic;color:var(--purplehi)}
.sub{display:block;margin:26px 0 0;font-size:15px;color:rgba(237,233,255,.55);font-style:normal}

.hero{display:grid;gap:56px;padding:150px 0 64px}
@media(min-width:900px){.hero{grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-top:160px}}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn{display:inline-block;padding:14px 28px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:.2s}
.btn.solid{background:var(--purple);color:var(--void)}
.btn.solid:hover{background:var(--purplehi)}
.btn.ghost{border:1px solid var(--hair);color:rgba(237,233,255,.75)}
.btn.ghost:hover{border-color:var(--purple);color:var(--purplehi)}

.tilt{perspective:1400px}
.tilt-in{position:relative;transition:transform .2s ease-out;transform-style:preserve-3d;will-change:transform}
.tilt-in img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--hair);box-shadow:0 60px 160px -50px rgba(139,92,246,.7)}
.dim{max-width:380px;margin:0 auto}
.glare{position:absolute;inset:0;border-radius:12px;opacity:0;pointer-events:none;
  transition:opacity .2s;mix-blend-mode:screen}

.sectionhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(183,156,255,.7)}
.hint{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hair)}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.cell{padding:32px 0}
@media(min-width:900px){.cell{padding:32px 24px;border-left:1px solid var(--hair)}
.cell:first-child{border-left:none}}
.cell h2{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(183,156,255,.8)}
.cell p{margin:12px 0 0;font-size:14px;line-height:1.6;color:rgba(237,233,255,.55)}

.steps{list-style:none;margin:80px 0 0;padding:0;border-top:1px solid var(--hair)}
.steps li{display:flex;gap:32px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--hair)}
.steps .n{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(183,156,255,.7)}
.steps h2{margin:0;font-size:22px}
.steps p{margin:4px 0 0;font-size:14px;color:rgba(237,233,255,.55)}

footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;padding:40px 0;border-top:1px solid var(--hair);margin-top:80px}
footer p{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
footer nav a{font-size:10px}

.legal{max-width:760px;padding:150px 0 120px}
.legal h2{font-size:22px;margin:40px 0 0;letter-spacing:-.02em}
.legal p{font-size:16px;line-height:1.7;color:rgba(237,233,255,.7);margin:10px 0 0}
.legal .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(183,156,255,.7)}

#gate{position:fixed;inset:auto 0 0 0;z-index:80;border-top:1px solid var(--hair);
  background:rgba(10,7,22,.96);backdrop-filter:blur(10px);display:none}
#gate.show{display:block}
#gate .in{max-width:1180px;margin:0 auto;padding:16px 20px;display:flex;gap:16px;
  flex-wrap:wrap;align-items:center;justify-content:space-between}
#gate p{margin:0;font-size:14px;color:rgba(237,233,255,.7)}
#gate a{color:var(--purplehi);text-decoration:underline;text-underline-offset:3px}
#gate button{background:none;border:1px solid rgba(139,92,246,.4);color:var(--purplehi);
  padding:8px 20px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
#gate button:hover{background:var(--purple);color:var(--void)}