:root{
  --bg1:#070612;
  --bg2:#0b0820;
  --mag:#ff3fbf;
  --cyn:#41d9ff;
  --w:#f7f7ff;
}

html,body{height:100%;margin:0}

body{
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--w);
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* subtle pixel grid (kept, very light) */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.03) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.025) 32px);
  background-size:32px 32px;
  opacity:.18;
  mix-blend-mode:overlay;
  pointer-events:none;
  animation:gridFloat 7s ease-in-out infinite alternate;
}
@keyframes gridFloat{
  from{transform:translateY(-6px)}
  to{transform:translateY(6px)}
}

canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.center{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
}

.wrap{
  position:relative;
  padding:40px 28px;
}

/* neon glow typography */
.motto{
  letter-spacing:.08em;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(28px, 4.2vw, 72px);
  line-height:1.06;
  margin:0;
  position:relative;
  display:inline-block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
}

.motto::before,
.motto::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:-1;
  white-space:pre-line;
}

.motto::before{
  color:transparent;
  text-shadow:
    0 0 16px rgba(255,63,191,.55),
    0 0 36px rgba(255,63,191,.28);
  transform: translate(-2px,-2px);
}

.motto::after{
  color:transparent;
  text-shadow:
    0 0 14px rgba(65,217,255,.45),
    0 0 30px rgba(65,217,255,.22);
  transform: translate(2px,2px);
}

/* single, very soft bloom behind text */
.bloom{
  position:absolute;
  left:50%;
  top:50%;
  width:min(80vmin, 900px);
  height:min(40vmin, 460px);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,
      rgba(255,255,255,.10),
      rgba(255,255,255,0) 65%);
  filter: blur(22px);
  opacity:.45;
  z-index:-2;
  animation:breathe 5.2s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.07)}
}

.sub{
  margin-top:16px;
  font-size:14px;
  opacity:.65;
  letter-spacing:.12em;
  text-transform:uppercase;
}