*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;}
body{
  overflow:hidden;
  background:#030007;
  font-family:Inter,sans-serif;
  letter-spacing:-0.01em;
  color:white;
}

/* bg */
.video-wrap{position:fixed;inset:0;z-index:-1;overflow:hidden;}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vignette{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.8)100%);pointer-events:none;}

/* content */
main{position:relative;z-index:2;height:100vh;}
.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}

.logo{width:26px;margin-bottom:22px;opacity:.9;}

.title{
  font-size:3.3rem;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
  text-shadow:0 0 40px rgba(148,94,255,0.6);
}
.subtitle{
  margin-top:18px;
  font-size:1rem;
  opacity:.9;
  letter-spacing:-0.01em;
}

/* MONAD BUTTON 1:1 */
.btn{
  margin-top:24px;
  padding:6px 18px;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:-0.01em;

  border-radius:20px;
  border:1px solid rgba(255,255,255,0.55);

  background:linear-gradient(135deg,#A78BFA 0%, #7C3AED 40%, #5B21B6 100%);

  color:white;
  cursor:pointer;
  backdrop-filter:blur(10px);

  box-shadow:
    0 0 6px rgba(255,255,255,0.35) inset,
    0 0 18px rgba(140,120,255,0.45);

  transition:0.18s ease-out;
}
.btn:hover{
  background:linear-gradient(135deg,#C4B5FD 0%,#8B5CF6 40%,#6D28D9 100%);
  box-shadow:
    0 0 8px rgba(255,255,255,0.55) inset,
    0 0 28px rgba(160,140,255,0.8);
  transform:translateY(-1px);
}

/* fade sequence like Monad */
.fade-seq{
  opacity:0;
  animation:monadFadeUp .8s ease forwards;
}

.seq-1{animation-delay:0.15s;}
.seq-2{animation-delay:0.30s;}
.seq-3{animation-delay:0.45s;}
.seq-4{animation-delay:0.60s;}

@keyframes monadFadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}