@font-face {
  font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #05070D; --ink: #EEF2FF; --muted: #9AA4BF; --line: rgba(148, 163, 255, 0.16);
  --a: #7DD3FC; --b: #A78BFA; --c: #F472B6;
  --chip: rgba(255, 255, 255, 0.04); --chip-hover: rgba(255, 255, 255, 0.08);
  --node: 167, 139, 250; --edge: 125, 211, 252;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F5F7FF; --ink: #0B1020; --muted: #4B5575; --line: rgba(79, 70, 229, 0.18);
    --a: #0284C7; --b: #7C3AED; --c: #DB2777;
    --chip: rgba(255, 255, 255, 0.7); --chip-hover: #FFFFFF;
    --node: 124, 58, 237; --edge: 2, 132, 199;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--bg); color: var(--ink);
  font-family: 'Outfit', system-ui, sans-serif;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; border-radius: 8px; }

/* Background layers */
#net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.aurora { position: fixed; inset: -20%; z-index: -1; filter: blur(80px); opacity: .55; pointer-events: none; }
.aurora span { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; animation: drift 22s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background: radial-gradient(circle, var(--b), transparent 65%); left: 10%; top: 5%; }
.aurora span:nth-child(2) { background: radial-gradient(circle, var(--a), transparent 65%); right: 5%; top: 30%; animation-duration: 28s; animation-delay: -6s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, var(--c), transparent 65%); left: 30%; bottom: 0; opacity: .6; animation-duration: 34s; animation-delay: -12s; }
@media (prefers-color-scheme: light) { .aurora { opacity: .28; } .aurora span { mix-blend-mode: multiply; } }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vmax, -4vmax) scale(1.12); }
  100% { transform: translate(-5vmax, 5vmax) scale(.94); }
}

/* Centre stage */
.stage {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 48px 20px 24px; text-align: center;
}
.status {
  margin: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--chip); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 100% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); } }

.wordmark {
  margin: 0; font-weight: 800; letter-spacing: -0.055em; line-height: .9;
  font-size: clamp(4rem, 17vw, 12.5rem);
  background: linear-gradient(100deg, var(--ink) 20%, var(--a) 40%, var(--b) 55%, var(--c) 70%, var(--ink) 90%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise 1.4s cubic-bezier(.2, .8, .2, 1) both, sheen 9s ease-in-out 1.4s infinite;
  padding-bottom: .08em;
}
@keyframes rise { from { opacity: 0; letter-spacing: .12em; filter: blur(14px); transform: translateY(.12em); } to { opacity: 1; letter-spacing: -0.055em; filter: blur(0); transform: none; } }
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.typer { margin: 0; min-height: 1.6em; font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 500; color: var(--muted); }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -0.15em; background: var(--a); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.loader { width: min(280px, 70vw); height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; }
.loader span { display: block; width: 40%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--a), var(--b), var(--c)); animation: slide 2.4s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

.links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chip {
  min-width: 260px; display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--chip);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-decoration: none; text-align: left; transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.chip:hover { transform: translateY(-2px); background: var(--chip-hover); border-color: var(--a); }
.chip b { display: block; font-size: 16px; font-weight: 700; }
.chip small { display: block; font-size: 13px; color: var(--muted); }
.chip .arrow { margin-left: auto; font-size: 18px; color: var(--muted); transition: transform .2s ease; }
.chip:hover .arrow { transform: translateX(3px); color: var(--ink); }
.chip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.c1 { background: var(--a); box-shadow: 0 0 12px var(--a); }
.c2 { background: #A3E635; box-shadow: 0 0 12px #A3E635; }

.foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 20px; font-size: 13px; color: var(--muted); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .aurora span, .wordmark, .dot, .caret, .loader span { animation: none; }
  .loader span { width: 100%; opacity: .6; }
}