:root{--card:#2b2b2b;--text:#fff;--glow:#8af5ff}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:#0a0f12;color:var(--text);overflow-x:hidden}
.bg{position:fixed;inset:0;background:
linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.55)),
url('assets/lasers.webp') center/cover no-repeat;
animation:pan 60s linear infinite}
@keyframes pan{0%{background-position:50% 0}50%{background-position:48% 15%}100%{background-position:50% 0}}

.laser-overlay{position:fixed;inset:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.lbeam{position:absolute;width:2px;height:140%;left:50%;top:100%;
  opacity:.75;transform-origin:50% 100%;
  animation:shoot var(--dur,4s) linear infinite, sway 6s ease-in-out infinite}
.lbeam.wide{width:3px}.lbeam.light{opacity:.6}

.lbeam.green{background:linear-gradient(to top, rgba(40,255,140,0), rgba(40,255,140,.95) 40%, rgba(255,255,255,.9) 70%, rgba(255,255,255,0));
  filter:drop-shadow(0 0 10px rgba(40,255,140,.9))}
.lbeam.cyan{background:linear-gradient(to top, rgba(0,240,255,0), rgba(0,240,255,.95) 40%, rgba(255,255,255,.9) 70%, rgba(255,255,255,0));
  filter:drop-shadow(0 0 10px rgba(0,240,255,.9))}
.lbeam.red{background:linear-gradient(to top, rgba(255,0,60,0), rgba(255,40,80,.95) 40%, rgba(255,255,255,.9) 70%, rgba(255,255,255,0));
  filter:drop-shadow(0 0 10px rgba(255,40,80,.9))}
.lbeam.purple{background:linear-gradient(to top, rgba(160,0,255,0), rgba(190,80,255,.95) 40%, rgba(255,255,255,.9) 70%, rgba(255,255,255,0));
  filter:drop-shadow(0 0 10px rgba(190,80,255,.9))}
.lbeam.yellow{background:linear-gradient(to top, rgba(255,220,0,0), rgba(255,240,120,.95) 40%, rgba(255,255,255,.9) 70%, rgba(255,255,255,0));
  filter:drop-shadow(0 0 12px rgba(255,240,120,.9))}

@keyframes shoot{from{transform:translateX(var(--x,0)) translateY(0) rotate(var(--rot,0deg));top:100%}to{transform:translateX(var(--x,0)) translateY(-220%) rotate(var(--rot,0deg));top:-120%}}
@keyframes sway{0%,100%{transform:translateX(var(--x,0)) rotate(calc(var(--rot,0deg) - 2deg))}50%{transform:translateX(var(--x,0)) rotate(calc(var(--rot,0deg) + 2deg))}}

main{position:relative;z-index:1;min-height:100%;display:flex;align-items:center;justify-content:center;padding:6vmin;text-align:center}
.hero{padding:22px;border-radius:16px}
.title{font-size:clamp(44px,9vw,88px);margin:0 0 10px;animation:pulseGlow 3s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{transform:scale(1);text-shadow:0 0 22px var(--glow),0 0 40px rgba(138,245,255,.4)}50%{transform:scale(1.12);text-shadow:0 0 40px var(--glow),0 0 70px rgba(138,245,255,.8)}}
.sub{font-size:clamp(16px,3.5vw,24px);color:rgba(255,255,255,.9);margin-bottom:18px}
.cta{display:flex;flex-direction:row;gap:18px;justify-content:center;margin:0 auto}
.button{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--card);color:var(--text);border-radius:50%;text-decoration:none;font-size:32px;box-shadow:0 0 22px rgba(138,245,255,.35);cursor:pointer}
.footer{margin-top:12px;font-size:13px;color:rgba(255,255,255,.7)}