:root { --green: #22ff88; --bg: #000; --text: #e8ffe8; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; min-height: 100vh; }

html { --mx: -999px; --my: -999px; --glow: 0; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; }
.fx-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(34,255,136,.18), transparent 70%);
  opacity: var(--glow); transition: opacity .3s; }
.topbar, main { position: relative; z-index: 1; }
.topbar {
  position: sticky; top: 0;
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; background: transparent;
}
.brand, .nav { position: relative; z-index: 1; }
.brand { font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; color: var(--green); text-decoration: none;
  text-shadow: 0 0 12px rgba(34,255,136,.6); transition: transform .2s ease-out; display: inline-block; }
.nav { display: flex; gap: 8px; }
.nav a { white-space: nowrap; color: var(--text); text-decoration: none; padding: 8px 14px; border-radius: 8px; transition: transform .2s ease-out, color .2s, background .2s; display: inline-block; }
.nav a:hover { color: var(--green); background: rgba(34,255,136,.1); }

.hero { min-height: calc(100vh - 72px); display: grid; place-items: center; text-align: center; padding: 16px; }
.hero h1 { font-size: clamp(2.5rem, 8vw, 6rem); color: var(--green); text-shadow: 0 0 30px rgba(34,255,136,.4); }
.hero p { opacity: .7; margin-top: 12px; font-size: 1.1rem; }

@media (max-width: 600px) { .topbar { padding: 0 16px; } .nav a { padding: 6px 8px; font-size: .9rem; } .brand { font-size: 1rem; } }