:root {
  --green: #39ff6a;
  --green-dim: #0c4a1d;
  --ember: #ff7a1a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: #000; }
body {
  margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 50% -10%, #06240f 0%, #000 60%);
  color: var(--green); font-family: var(--mono); -webkit-font-smoothing: antialiased;
}

/* perspective grid floor, like the void */
.floor {
  position: fixed; left: -50%; right: -50%; bottom: 0; height: 55vh; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--green-dim) 1px, transparent 1px), linear-gradient(90deg, var(--green-dim) 1px, transparent 1px);
  background-size: 60px 60px; transform: perspective(400px) rotateX(62deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 90%); opacity: .7;
  animation: drift 3s linear infinite;
}
@keyframes drift { to { background-position: 0 60px; } }
.scan { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.22) 2px 3px); }

main { position: relative; z-index: 2; width: min(560px, 100%); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px 56px; }

.back { display: inline-block; font-size: 12px; letter-spacing: .25em; color: var(--green); text-decoration: none; opacity: .65; padding: 8px 0; }
.back:hover, .back:focus-visible { opacity: 1; text-shadow: 0 0 10px var(--green); outline: none; }

header { text-align: center; margin: 28px 0 30px; }
.avatar { display: block; width: 128px; height: 128px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; border: 1px solid var(--green); filter: grayscale(.6) contrast(1.1) sepia(.3) hue-rotate(70deg); box-shadow: 0 0 28px rgba(57,255,106,.4); }
.kicker { margin: 0; font-size: 12px; letter-spacing: .35em; opacity: .6; }
h1 {
  position: relative; margin: 10px 0 6px; font-size: clamp(34px, 9vw, 52px); letter-spacing: .12em; font-weight: 800;
  text-shadow: 0 0 18px rgba(57,255,106,.7);
}
h1::before, h1::after { content: attr(data-text); position: absolute; inset: 0; opacity: .6; clip-path: inset(0 0 100% 0); }
h1::before { color: var(--ember); transform: translate(2px, 0); animation: glitch 6s infinite steps(1); }
h1::after  { color: #5ad7ff; transform: translate(-2px, 0); animation: glitch 6s infinite steps(1) .15s; }
@keyframes glitch {
  0%, 92%, 100% { clip-path: inset(0 0 100% 0); }
  93% { clip-path: inset(10% 0 60% 0); } 95% { clip-path: inset(55% 0 20% 0); } 97% { clip-path: inset(30% 0 45% 0); }
}
.tag { margin: 0; font-size: 13px; letter-spacing: .3em; opacity: .55; }

.featured {
  display: grid; gap: 6px; text-align: center; padding: 26px 18px; text-decoration: none; color: var(--green);
  border: 1px solid var(--green); background: linear-gradient(180deg, rgba(57,255,106,.10), rgba(57,255,106,.02));
  box-shadow: 0 0 30px rgba(57,255,106,.22), inset 0 0 26px rgba(57,255,106,.08);
  transition: transform .2s, box-shadow .2s;
}
.featured:hover, .featured:focus-visible { transform: translateY(-2px); box-shadow: 0 0 46px rgba(57,255,106,.4), inset 0 0 30px rgba(57,255,106,.14); outline: none; }
.f-kicker { font-size: 11px; letter-spacing: .4em; color: var(--ember); text-shadow: 0 0 10px var(--ember); }
.f-title { font-size: clamp(22px, 6vw, 30px); letter-spacing: .14em; font-weight: 700; text-shadow: 0 0 14px var(--green); }
.f-cta { margin-top: 8px; justify-self: center; padding: 10px 22px; border: 1px solid var(--green); letter-spacing: .3em; font-size: 13px; }
.featured:hover .f-cta { background: var(--green); color: #000; }
.extra { display: block; margin: 10px 0 0; text-align: center; font-size: 12px; letter-spacing: .25em; color: var(--green); opacity: .7; text-decoration: none; padding: 8px; }
.extra:hover, .extra:focus-visible { opacity: 1; text-decoration: underline; outline: none; }

section { margin-top: 34px; }
h2 { margin: 0 0 14px; font-size: 12px; letter-spacing: .4em; font-weight: 400; opacity: .6; display: flex; align-items: center; gap: 12px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--green-dim); }

ul { list-style: none; margin: 0; padding: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.list { display: grid; gap: 10px; }
.grid a, .list a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 100%;
  padding: 15px 16px; color: var(--green); text-decoration: none; letter-spacing: .12em; font-size: 13px;
  border: 1px solid var(--green-dim); background: rgba(0, 12, 4, .6);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.grid a::after, .list a::after { content: "\2197"; opacity: .5; }
.grid a:hover, .list a:hover, .grid a:focus-visible, .list a:focus-visible {
  background: rgba(57,255,106,.12); border-color: var(--green); transform: translateX(3px); box-shadow: 0 0 16px rgba(57,255,106,.2); outline: none;
}
.note { display: block; font-size: 10px; letter-spacing: .2em; opacity: .5; margin-top: 3px; }

#signupForm { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#signupForm input {
  font: inherit; font-size: 16px; color: var(--green); background: #000; border: 1px solid var(--green-dim); padding: 14px 14px; letter-spacing: .06em; min-width: 0;
}
#signupForm input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 14px rgba(57,255,106,.3); }
#signupForm button {
  font: inherit; font-size: 13px; letter-spacing: .25em; color: var(--green); background: transparent; border: 1px solid var(--green); padding: 0 18px; cursor: pointer;
}
#signupForm button:hover, #signupForm button:focus-visible { background: var(--green); color: #000; outline: none; }
#signupMsg { min-height: 1.4em; margin: 12px 0 0; font-size: 12px; letter-spacing: .1em; }

footer { margin-top: 44px; text-align: center; font-size: 11px; letter-spacing: .2em; opacity: .85; }
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 16px; }
.social a { color: var(--green); text-decoration: none; padding: 6px 2px; opacity: .75; }
.social a:hover, .social a:focus-visible { opacity: 1; text-shadow: 0 0 10px var(--green); outline: none; }
footer p { margin: 0; opacity: .4; }

@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } #signupForm { grid-template-columns: 1fr; } #signupForm button { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .floor, h1::before, h1::after { animation: none; } }