@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Manrope:wght@400;600&display=swap');

:root{
  --green:#00ffa3;
  --purple:#8b5cf6;
  --blue:#00c2ff;
  --gold:#ffcc33;
  --bg-dark:#030212;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg-dark);
  color:#fff;
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  text-align:center;
}

/* canvases */
#plasma,#laser-bg,#particles{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-3;
}
#laser-bg{z-index:-2;}
#particles{pointer-events:none;z-index:-1;}

/* hero */
.hero{
  position:relative;
  margin-top:10vh;
  text-align:center;
  animation:fadeIn 1.5s ease forwards;
}
.logo{
  width:180px;border-radius:50%;
  box-shadow:0 0 30px var(--green);
}
h1{
  font-family:'Orbitron',sans-serif;
  font-size:2.6rem;
  margin-top:20px;
  color:var(--green);
  text-shadow:0 0 20px var(--purple);
}
.subtitle{
  margin-top:10px;
  font-size:1.1rem;
  color:#cfd2ff;
}

/* buttons */
.buttons{
  margin-top:25px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.btn{
  border:2px solid var(--green);
  color:var(--green);
  background:rgba(0,0,0,0.2);
  padding:10px 22px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:all .3s;
}
.btn:hover{
  background:var(--green);
  color:#000;
  transform:scale(1.05);
}
.buy-btn{
  border-color:var(--gold);
  color:var(--gold);
  animation:pulse 2.5s infinite;
}
.buy-btn:hover{
  background:var(--gold);
  color:#000;
  transform:scale(1.07);
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 10px var(--gold);}
  50%{box-shadow:0 0 25px var(--gold);}
}

/* CA + toast */
.ca{margin-top:10px;color:#aaa;font-size:.9rem;}
#toast{
  position:fixed;bottom:30px;left:50%;
  transform:translateX(-50%);
  background:var(--green);color:#000;
  padding:10px 20px;border-radius:8px;font-weight:bold;
  opacity:0;transition:opacity .3s,bottom .3s;
}
#toast.show{opacity:1;bottom:50px;}

/* metrics */
.metrics{
  margin-top:6vh;
  color:var(--green);
  text-shadow:0 0 8px var(--purple);
}
.metric-grid{
  margin:20px auto;
  display:flex;flex-wrap:wrap;justify-content:center;gap:25px;
  max-width:900px;
}
.metric-grid div{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(8px);
  border:1px solid rgba(0,255,163,0.3);
  border-radius:12px;
  padding:14px 28px;
  min-width:150px;
  transition:transform .3s,box-shadow .3s;
}
.metric-grid div:hover{
  transform:translateY(-3px);
  box-shadow:0 0 20px var(--green);
}
.metric-grid strong{display:block;color:#b7ffde;}
.metric-grid span{font-size:1.3rem;font-weight:600;}

/* modal */
.modal{
  display:none;position:fixed;z-index:99;
  left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,0.9);
}
.modal-content{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:90%;max-width:900px;
  border:2px solid var(--green);
  border-radius:12px;
  box-shadow:0 0 25px var(--purple);
}
.close{
  position:absolute;top:10px;right:20px;
  font-size:28px;cursor:pointer;color:var(--green);
}

/* animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}

/* responsive */
@media(max-width:600px){
  h1{font-size:1.8rem;}
  .metric-grid div{min-width:120px;padding:12px;}
}
/* Flippening */
.flippening{
  margin-top:60px;
  text-align:center;
  color:var(--green);
  text-shadow:0 0 8px var(--purple);
}
.flip-bar{
  position:relative;
  width:80%;
  max-width:600px;
  height:20px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(0,255,163,0.4);
  border-radius:10px;
  margin:20px auto;
  overflow:hidden;
}
.flip-progress{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--green),var(--purple));
  border-radius:10px;
  transition:width 1s ease;
  box-shadow:0 0 15px var(--green);
}
#flipText{
  color:#b7ffde;
  font-size:1rem;
  margin-top:10px;
}