* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }
body {
  background: radial-gradient(circle at top, #111 0%, #000 70%);
  color: #fff; text-align:center; overflow-x:hidden;
}

.bg-emoji::before {
  content:"🍑 🚀 🍑 🐒 🍑";
  position: fixed;
  top: 10%;
  left: -30%;
  font-size: 4rem;
  opacity:0.05;
  animation: float 25s linear infinite;
}
@keyframes float {0%{transform:translateX(0);}100%{transform:translateX(150%);} }

.hero { padding:80px 20px; }
.hero h1 { font-size:3rem; margin-bottom:10px; }
.tagline { opacity:0.85; margin-bottom:25px; }

.buttons { display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
.btn {
  padding:12px 22px; border-radius:30px; border:1px solid #444;
  text-decoration:none; color:#fff; transition:0.3s;
}
.btn:hover { transform:scale(1.05); background:#222; }
.primary { background:linear-gradient(135deg,#ff9f0f,#ff4d4d); border:none; }

.card {
  background: rgba(255,255,255,0.04);
  margin:20px auto; padding:25px;
  max-width:800px; border-radius:16px;
  box-shadow:0 0 25px rgba(255,255,255,0.03);
}

.contract-box {
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px;
}
.contract-box span {
  background:#111; padding:10px 15px; border-radius:8px; word-break:break-all;
}
.contract-box button { padding:10px 16px; border-radius:8px; border:none; cursor:pointer; background:#ff9f0f; }

.chart { width:100%; height:420px; border-radius:12px; }

.socials { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.socials a { text-decoration:none; color:#ff9f0f; transition:0.2s; }
.socials a:hover { transform:scale(1.1); }

footer { opacity:0.5; padding:30px 10px; font-size:0.9rem; }

@media(max-width:600px){ .hero h1{ font-size:2.2rem; } }
.token-logo {
  width: 50px; /* adjust size */
  height: 50px;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.spark-container {
  display: inline-block;
  position: relative;
}

.spark-container::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: spark 1.5s infinite;
  border-radius: 50%;
}

@keyframes spark {
  0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
  25% { transform: scale(1) rotate(45deg); opacity: 1; }
  50% { transform: scale(0.5) rotate(90deg); opacity: 0; }
  75% { transform: scale(1) rotate(135deg); opacity: 1; }
  100% { transform: scale(0.5) rotate(180deg); opacity: 0; }
}