:root{
  --accent:#6E5BFF;            /* single accent – used only as light */
  --void:#000000;--obsidian:#07070A;--graphite:#111216;
  --text:#EDEDED;--muted:#8A8A93;
  --f-head:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --mx:50vw;--my:50vh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color-scheme:dark}
body{background:var(--void);color:var(--text);font:300 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-intro{overflow:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#fog{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 2.4s var(--ease);pointer-events:none}
.fog-on #fog{opacity:1}
.cursor-light{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.done .cursor-light{opacity:1}
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* loader */
.loader{position:fixed;inset:0;z-index:40;display:grid;place-items:center;align-content:center;gap:14px;pointer-events:none;
  font:300 13px/1 var(--f-mono);letter-spacing:.35em;color:var(--muted);transition:opacity .8s var(--ease)}
.loader__bar{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--muted),transparent);transform:scaleX(0);animation:bar 1.4s var(--ease) forwards}
.dots{display:inline-block;animation:blink 1s steps(2) infinite}
@keyframes bar{to{transform:scaleX(1)}}
@keyframes blink{50%{opacity:.2}}
.stage-1 .loader,.done .loader{opacity:0}
.skip{position:fixed;right:24px;bottom:24px;z-index:45;background:none;border:0;color:var(--muted);font:300 11px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;cursor:pointer;padding:10px;transition:opacity .6s,color .3s}
.skip:hover{color:var(--text)}
.done .skip{opacity:0;pointer-events:none}

/* hero */
main{position:relative}
.hero{min-height:100svh;display:grid;place-items:center;align-content:center;gap:clamp(24px,5vh,48px);position:relative;padding:24px}
.hero__stage{position:relative;width:min(46vmin,420px);aspect-ratio:1;will-change:transform;mix-blend-mode:screen}
.logo{position:relative;width:100%;height:100%}
.logo img{display:block;width:100%;height:100%;mix-blend-mode:screen;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(135deg,#000 40%,transparent 60%);mask-image:linear-gradient(135deg,#000 40%,transparent 60%);
  -webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-position:100% 100%;mask-position:100% 100%;
  opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--ease),transform 2.4s var(--ease)}
.stage-2 .logo img{animation:reveal 1.5s var(--ease) forwards;opacity:1;transform:scale(1)}
@keyframes reveal{from{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
.glow{position:absolute;inset:-35%;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.7);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 12%,transparent) 55%,transparent);
  filter:blur(30px);transition:opacity 2s var(--ease),transform 2.4s var(--ease)}
.stage-1 .glow{opacity:.35;transform:scale(1)}
.done .glow{animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.28;transform:scale(.96)}50%{opacity:.5;transform:scale(1.06)}}
/* light streak travelling along the N's diagonal (behind the logo) */
.streak{position:absolute;left:50%;top:50%;width:5%;height:160%;pointer-events:none;opacity:0;
  background:linear-gradient(transparent,#fff 45%,var(--accent) 55%,transparent);filter:blur(6px);
  transform:translate(-50%,-50%) rotate(45deg) translateX(-1200%)}
.stage-2 .streak{animation:streak 1.5s var(--ease) forwards}
@keyframes streak{0%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) translateX(-1200%)}25%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) translateX(1200%)}}

.hero__line{font:300 clamp(15px,1.6vw,19px)/1 var(--f-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  opacity:0;transform:translateY(10px);transition:opacity 1.4s var(--ease) .6s,transform 1.4s var(--ease) .6s;text-align:center}
.caret{animation:blink 1.2s steps(2) infinite;color:var(--text)}
.done .hero__line{opacity:1;transform:none}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font:300 10px var(--f-mono);letter-spacing:.4em;color:var(--muted);opacity:0;transition:opacity 1.5s 1.4s}
.scroll-hint::after{content:"";display:block;width:1px;height:40px;margin:12px auto 0;background:linear-gradient(var(--muted),transparent);animation:drop 2.4s ease-in-out infinite;transform-origin:top}
.done .scroll-hint{opacity:.7}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* manifesto */
.manifesto{max-width:980px;margin:0 auto;padding:20vh 24px 10vh;display:grid;gap:22vh}
.manifesto p{font:300 clamp(26px,4.4vw,56px)/1.15 var(--f-head);letter-spacing:-.02em;color:var(--text)}
.manifesto p:nth-child(2){padding-left:12%}
.manifesto p:nth-child(3){padding-left:24%;color:#fff;text-shadow:0 0 40px color-mix(in srgb,var(--accent) 45%,transparent)}
.idx{display:block;font:300 11px var(--f-mono);letter-spacing:.35em;color:var(--muted);margin-bottom:18px}
.reveal{opacity:0;transform:translateY(40px);filter:blur(8px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}

/* signal */
.signal{max-width:620px;margin:0 auto;padding:22vh 24px 18vh;text-align:center}
.label{font:300 11px var(--f-mono);letter-spacing:.35em;color:var(--muted)}
.signal h2{font:300 clamp(24px,3vw,36px)/1.2 var(--f-head);margin:18px 0 36px}
.signup{display:flex;border-bottom:1px solid #2a2b31;transition:border-color .4s,box-shadow .4s}
.signup:focus-within{border-color:#55565f;box-shadow:0 18px 40px -24px var(--accent)}
.signup input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:300 16px var(--f-body);padding:16px 4px}
.signup input::placeholder{color:#4a4b52}
.signup button{background:none;border:0;color:var(--text);font:400 11px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;cursor:pointer;padding:0 6px;transition:color .3s,text-shadow .3s}
.signup button:hover,.signup button:focus-visible{text-shadow:0 0 18px var(--accent);outline:0}
.signup__msg{min-height:1.6em;margin-top:18px;font:300 12px var(--f-mono);letter-spacing:.1em;color:var(--muted)}
.signup__msg.ok{color:var(--text);text-shadow:0 0 20px color-mix(in srgb,var(--accent) 60%,transparent)}
.note{font:300 10px var(--f-mono);letter-spacing:.15em;color:#4a4b52;margin-top:8px}

.footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px clamp(24px,4vw,48px);
  border-top:1px solid var(--graphite);font:300 11px var(--f-mono);letter-spacing:.2em;color:var(--muted);background:linear-gradient(transparent,var(--obsidian))}
.footer nav{display:flex;gap:28px}
.footer a{text-decoration:none;transition:color .3s}.footer a:hover{color:var(--text)}

/* legal pages */
.legal{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:12vh 24px}
.legal h1{font:300 40px var(--f-head);margin-bottom:12px}
.legal h2{font:400 15px var(--f-head);letter-spacing:.1em;text-transform:uppercase;margin:36px 0 10px;color:var(--muted)}
.legal .ph{font:300 11px var(--f-mono);letter-spacing:.2em;color:var(--accent);border:1px dashed #2a2b31;padding:10px 14px;margin:20px 0}
.legal img{width:56px;mix-blend-mode:screen;margin-bottom:28px}

@media (max-width:640px){
  .manifesto p:nth-child(2),.manifesto p:nth-child(3){padding-left:0}
  .manifesto{gap:16vh}
  .skip{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.6s!important;transition-delay:0s!important}
  .logo img{-webkit-mask-image:none;mask-image:none}
  .reveal{filter:none;transform:none}
  .grain{display:none}
}