:root {
  --bg:#0b0c11;
  --panel:#12141c;
  --accent:#f6c54a;
  --text:#e9ecf2;
}

* { box-sizing: border-box; }

body.bg {
  margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  background: radial-gradient(85% 80% at 50% 15%, #161a27, var(--bg));
  color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* HERO */
.hero { text-align:center; margin: 28px 0 10px; position: relative;}
.hero.small { margin: 18px 0 6px; }
.logo { width: 120px; display:block; margin: 0 auto 10px; }
.logo.sm { width: 72px; }
.title { font-size: 34px; margin:0; }
.title.sm { font-size: 22px; }
.tagline { margin: 2px 0 0; color:#cfd3e5; }
.back { color:#cfd3e5; text-decoration:none; position:absolute; left:16px; top:16px; }

/* HOME CARD */
.home-card {
  width:min(92vw, 720px);
  background: linear-gradient(180deg, #0f121a 0%, #0b0e15 100%);
  border:1px solid #23283b;
  border-radius:16px; padding:22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  text-align:center;
}
.muted { color:#cfd3e5; }

.cta-row { display:flex; gap:12px; justify-content:center; margin-top:16px; }
.btn {
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800;
  text-decoration:none; letter-spacing:.2px; transition: transform .15s ease, box-shadow .15s ease;
}
.btn.primary { background:var(--accent); color:#0d0e10; box-shadow: 0 10px 24px rgba(246,197,74,.28); }
.btn.ghost { border:1px solid #2a2f42; color:#dfe3f4; background:#121522; }
.btn:hover { transform: translateY(-1px); }

.footer { margin: 26px 0 20px; color:#9aa3c6; }

/* STAGE (TRY ME) */
.stage {
  position:relative; padding:22px; border-radius:20px;
  background: linear-gradient(180deg, #0f121a 0%, #0b0e15 100%);
  border:1px solid #23283b;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  width:min(92vw, 720px);
  margin: 8px auto 24px;
}
.canvas-wrap { position:relative; }
canvas { display:block; width:100%; height:auto; border-radius:14px; }
.pointer {
  position:absolute; inset-inline:0; top:8px; margin-inline:auto;
  width:0; height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:28px solid var(--accent);
  filter: drop-shadow(0 10px 18px rgba(246,197,74,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.7));
  z-index:3;
}
.pointer::after{
  content:""; position:absolute; left:-28px; top:-14px; right:-28px; height:36px;
  background: radial-gradient(60% 120% at 50% 130%, rgba(246,197,74,.55), transparent 70%);
  filter: blur(8px); pointer-events:none; z-index:-1;
}
.panel { margin-top:18px; text-align:center; }
.result {
  margin-top:12px; padding:10px 12px; border-radius:10px; background:#121420; border:1px solid #22263a; font-size:14px;
}

/* DOC (WHITEPAPER) */
.doc {
  width:min(92vw, 900px);
  background: linear-gradient(180deg, #0f121a 0%, #0b0e15 100%);
  border:1px solid #23283b; border-radius:16px; padding:24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  margin: 8px auto 24px; line-height:1.7;
}
.doc h2 { margin:18px 0 8px; }
.doc h3 { margin:12px 0 6px; color:#dfe3f4; }
.table { width:100%; border-collapse:collapse; margin-top:8px; }
.table th, .table td { border:1px solid #23283b; padding:10px 12px; text-align:left; }
.table thead { background:#151827; }

/* TELEGRAM ICON */
.socials {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.telegram-icon {
  display: inline-block;
  background: #229ED9; /* Telegram blauw */
  border-radius: 50%;
  padding: 8px; /* kleiner */
  box-shadow: 0 0 10px rgba(34,158,217,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.telegram-icon img {
  width: 22px;  /* icoon */
  height: 22px;
  display: block;
}
.telegram-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(34,158,217,0.9);
}