:root{
  --bg:#000;
  --neon:#39FF14;
  --neon-strong: #6FFF3F;
  --glass: rgba(57,255,20,0.05);
  --fw: 600;
  --tap: 44px;
  --max-width: 920px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--neon);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  position:relative;
}

/* canvas sits below UI */
canvas#matrix{
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
}

/* central UI */
#app{
  position:relative;
  z-index:2;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.center{
  width:100%;
  max-width:var(--max-width);
  text-align:center;
  padding:28px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events:auto;
}

/* Brand with neon glow and glitch */
.brand{
  font-size: clamp(36px, 10vw, 86px);
  letter-spacing:1px;
  color:var(--neon);
  font-weight:900;
  line-height:0.9;
  margin-bottom:8px;
  position:relative;
  text-shadow:
    0 0 6px rgba(57,255,20,0.15),
    0 0 18px rgba(57,255,20,0.12),
    0 0 28px rgba(57,255,20,0.08);
  animation: glow 2s ease-in-out infinite alternate, glitch 3s infinite;
  -webkit-font-smoothing:antialiased;
}

/* subtle pseudo layers for glitch look */
.brand::before,
.brand::after{
  content:attr(data-text);
  position:absolute;
  left:0;right:0;
  color:var(--neon);
  opacity:0.25;
  clip-path: inset(0 0 0 0);
  pointer-events:none;
}

.brand::before{ transform:translateX(-2px); mix-blend-mode:screen; }
.brand::after{ transform:translateX(2px); mix-blend-mode:overlay; }

@keyframes glow{
  from{text-shadow:0 0 6px rgba(57,255,20,0.12),0 0 18px rgba(57,255,20,0.08)}
  to{text-shadow:0 0 10px rgba(57,255,20,0.22),0 0 26px rgba(57,255,20,0.18)}
}

@keyframes glitch{
  0%{transform:translateX(0)}
  8%{transform:translateX(-1px)}
  10%{transform:translateX(1px)}
  18%{transform:translateX(0)}
  100%{transform:translateX(0)}
}

/* tagline */
.tagline{
  color:var(--neon);
  opacity:0.9;
  font-weight:500;
  margin:6px 0 24px;
  filter: drop-shadow(0 0 8px rgba(57,255,20,0.06));
}

/* Support area */
.support{ display:flex; flex-direction:column; align-items:center; gap:12px;}

/* email row */
.email-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.email{ font-size:14px; color:var(--neon); opacity:0.95; }

.neon-btn{
  --padx:14px;
  --pady:10px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:linear-gradient(180deg, rgba(57,255,20,0.06), rgba(57,255,20,0.02));
  border:1px solid rgba(57,255,20,0.22);
  color:var(--neon);
  padding:var(--pady) var(--padx);
  min-height:var(--tap);
  border-radius:10px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow:0 0 10px rgba(57,255,20,0.06), inset 0 -8px 24px rgba(0,0,0,0.35);
  text-decoration:none;
  font-weight:600;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:visible;
}

.neon-btn:hover{ transform:translateY(-2px); filter:brightness(1.15); box-shadow:0 0 20px rgba(57,255,20,0.18), 0 0 40px rgba(57,255,20,0.06) }

.neon-btn:active{ transform:translateY(0) }

.neon-btn svg{ stroke:var(--neon); width:18px;height:18px; opacity:0.95 }

/* toast */
.toast{
  position:relative;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .26s ease, transform .26s ease;
  background:rgba(57,255,20,0.06);
  border:1px solid rgba(57,255,20,0.14);
  padding:8px 12px;
  border-radius:8px;
  color:var(--neon);
  font-size:13px;
}

/* socials */
.socials{
  margin-top:28px;
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  filter:drop-shadow(0 0 10px rgba(57,255,20,0.04));
}

.icon{
  width:44px;
  height:44px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  color:var(--neon);
  text-decoration:none;
  transition:transform .12s ease, filter .12s ease;
  border:1px solid rgba(57,255,20,0.06);
  background:linear-gradient(180deg, rgba(57,255,20,0.02), transparent);
  box-shadow:0 0 8px rgba(57,255,20,0.03);
}

.icon svg{ width:20px;height:20px; fill:none; stroke:var(--neon); stroke-width:1.4; }

/* external SVG images (CDN) - tint to neon using filter to match currentColor */
.icon img{
  width:20px;
  height:20px;
  display:block;
  filter: invert(48%) sepia(95%) saturate(800%) hue-rotate(80deg) brightness(1) contrast(0.95);
  /* ensure images use current color for hover glow */
}

.icon:hover{ transform:translateY(-4px) scale(1.06); filter:brightness(1.4); box-shadow:0 0 30px rgba(57,255,20,0.18) }

/* small screens: condense spacing */
@media (max-width:520px){
  .email-row{ gap:8px }
  .socials{ gap:12px; margin-top:18px }
  .icon{ width:40px; height:40px }
  .tagline{ font-size:14px }
}

/* toast visible state */
.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* ensure center fits single screen height on mobile */
@media (max-height:600px){
  .center{ padding:16px }
  .brand{ font-size:44px }
}