:root{
  --bg:#071b0f;
  --panel:#0f2a1a;
  --gold:#f7d465;
  --gold-2:#e3b43c;
  --lime:#7CFF6B;
  --violet:#b493ff;
  --violet-2:#7a5cff;
  --text:#dbffe2;
  --muted:#a7cbb4;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}

/* animated background */
.bg{position:fixed;inset:0;overflow:hidden;z-index:-2;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(124,255,107,.08), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(247,212,101,.10), transparent 60%),
    radial-gradient(700px 400px at 20% 20%, rgba(255,255,255,.04), transparent 60%),
    #06140b;
}
/* global smoke layer */
.smoke-global{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.smoke-puff{position:absolute;bottom:-10vh;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.04) 60%, transparent 70%);
  filter:blur(6px);opacity:.0;animation:rise 24s linear infinite}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  10%{opacity:.35}
  80%{opacity:.25}
  100%{transform:translateY(-120vh) translateX(80px) scale(1.4);opacity:0}
}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:28px 20px 100px}
.topbar{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:10px 14px;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);border-radius:14px;backdrop-filter: blur(6px)}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{width:48px;height:48px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 22px rgba(247,212,101,.25); animation:bob 4s ease-in-out infinite}
.logo-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);animation:shine 5s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes shine{0%{filter:brightness(1)}50%{filter:brightness(1.12)}100%{filter:brightness(1)}}
.brand h1{margin:0;font-size:18px;line-height:1.1}
.ticker{font-weight:700;color:var(--gold)}
.badge{color:#06140b;background:var(--lime);padding:6px 10px;border-radius:10px;font-weight:700;font-size:12px;
  box-shadow:0 0 14px rgba(124,255,107,.35);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch;margin-top:18px}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:22px;position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;inset:-2px;border-radius:24px;background:conic-gradient(from 120deg, rgba(247,212,101,.15), transparent 40%, rgba(124,255,107,.12), transparent 70%, rgba(247,212,101,.15));
  filter:blur(18px);opacity:.35;pointer-events:none}
.hero h2{margin:0 0 10px;font-size:28px}
.lead{color:var(--muted);font-size:15px;line-height:1.5}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.btn{--glow: rgba(247,212,101,.5);display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));color:var(--text);font-weight:700;cursor:pointer;transition:.2s transform, .2s box-shadow, .2s background;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px var(--glow)}
.btn.gold{color:#1a1300;background:linear-gradient(180deg, var(--gold), var(--gold-2));border-color:#b18b2b}
.btn.gold:hover{box-shadow:0 10px 36px -10px rgba(247,212,101,.65)}
.btn.lime{color:#03280b;background:linear-gradient(180deg, var(--lime), #4ee94a)}
.btn.ghost{background:transparent}
.btn .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
.btn .tw{width:16px;height:16px}
.btn:active:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,.25), transparent 40%);opacity:.8}
/* copytrading special */
.btn.violet{background:linear-gradient(180deg, var(--violet), var(--violet-2)); border-color:#4c38a8; color:#0e0726;
  box-shadow:0 10px 26px -10px rgba(122,92,255,.55)}
.btn.violet:hover{transform:translateY(-2px) scale(1.02)}
.btn.violet::before{content:"";position:absolute;inset:-1px;border-radius:14px;background:conic-gradient(from 0deg, rgba(255,255,255,.12), transparent 30%, rgba(255,255,255,.12), transparent 60%);filter:blur(14px);opacity:.4;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* frog card */
.frog-card{display:grid;grid-template-rows:auto 1fr auto;gap:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.frog{border-radius:16px;background:
  radial-gradient(600px 260px at 70% 0%, rgba(247,212,101,.22), transparent 60%),
  radial-gradient(800px 600px at 30% 130%, rgba(124,255,107,.12), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);padding:18px;display:flex;align-items:end;justify-content:center;min-height:380px;position:relative}
.frog::after{content:"";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:360px;height:420px;background:var(--frog-url) center/cover no-repeat;border-radius:18px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}

.note{font-size:13px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:var(--panel)}
.card h4{margin:0 0 8px}
.card p{margin:0;color:var(--muted);line-height:1.6}
footer{margin-top:30px;opacity:.7;font-size:12px;text-align:center}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.modal-body{max-width:420px;width:92%;background:#0f2a1a;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-body h3{margin:0 0 8px}
.modal-body p{margin:0 0 14px;color:#a7cbb4}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* game */
.game .game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
canvas#game{width:100%;max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#06210f;image-rendering:pixelated;display:block}
.hud{display:flex;gap:16px;margin-top:10px;color:var(--muted)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}


/* Big gold BUY button */
.btn.buy-big {
  background: linear-gradient(45deg, #FFD700, #FFC300);
  color: #000;
  font-weight: 800;
  font-size: 1.4rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-block;
  margin-top: 0.8rem;
}
.btn.buy-big:hover {
  transform: scale(1.07);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
}

.frog-card .pipe-smoke{position:absolute;right:18%;bottom:38%;width:160px;height:180px;pointer-events:none}
.frog-card .pipe-smoke span{position:absolute;bottom:0;left:50%;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.28), rgba(255,255,255,.03) 60%, transparent 70%);
  transform:translateX(-50%);opacity:0;filter:blur(.4px);animation:frogSmoke 7s ease-in infinite}
.frog-card .pipe-smoke span:nth-child(2){animation-delay:1.4s}
.frog-card .pipe-smoke span:nth-child(3){animation-delay:2.8s}
@keyframes frogSmoke{
  0%{transform:translate(-50%, 14px) scale(.3);opacity:0}
  12%{opacity:.8}
  100%{transform:translate(-40px,-200px) scale(1.6);opacity:0}
}