/* ============ TOKENS ============ */
:root{
  --void:#06060f;
  --panel:#0e0f1c;
  --panel-2:#12132488;
  --panel-border: rgba(255,255,255,0.08);
  --violet:#8b5cf6;
  --cyan:#2dd4ff;
  --gold:#f6c344;
  --green:#34e19b;
  --red:#ff5470;
  --text:#f1f1f8;
  --muted:#8d8fa8;
  --muted-2:#5c5e78;
  --grad: linear-gradient(120deg, var(--violet), var(--cyan));
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(90px + env(safe-area-inset-top,0px));
}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #1c1440 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, #0b2c3a 0%, transparent 55%),
    var(--void);
  color:var(--text);
  font-family:var(--font-body);
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
}
::selection{ background:var(--violet); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:#2a2c44; border-radius:10px; }

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============ SIM BAR ============ */
.sim-bar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:#d7d9ff;
  background: linear-gradient(90deg, #241a4a, #142338);
  border-bottom:1px solid var(--panel-border);
  padding:7px 14px;
  padding-top: calc(7px + env(safe-area-inset-top,0px));
}
.sim-dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============ NAV ============ */
.nav{
  position:sticky; top:29px; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:14px 32px;
  background:rgba(6,6,15,0.72);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--panel-border);
}
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:20px; }
.nav-links{ display:flex; gap:26px; margin-right:auto; margin-left:12px; font-size:14.5px; color:var(--muted); }
.nav-links a:hover{ color:var(--text); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-burger{ display:none; background:none; border:none; flex-direction:column; gap:4px; padding:6px; }
.nav-burger span{ width:20px; height:2px; background:var(--text); display:block; }

.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:7px; box-shadow:0 0 6px var(--green); }

/* buttons */
.btn{
  border:1px solid transparent; border-radius:999px;
  padding:11px 22px; font-size:14.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background:var(--grad); color:#0a0a14;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 24px -8px rgba(139,92,246,0.55);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.1) inset, 0 10px 30px -6px rgba(45,212,255,0.6); }
.btn-outline{ border-color:var(--panel-border); color:var(--text); background:rgba(255,255,255,0.02); }
.btn-outline:hover{ border-color:var(--cyan); }
.btn-ghost{ background:var(--panel); border-color:var(--panel-border); color:var(--text); font-size:13.5px; padding:9px 16px; }
.btn-ghost:hover{ border-color:var(--violet); }
.btn-block{ width:100%; padding:13px; }

/* ============ HERO ============ */
.hero{
  max-width:1280px; margin:0 auto;
  padding:72px 32px 40px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px;
  align-items:center;
}
.hero-title{
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.06;
  font-weight:700;
}
.hero-title-accent{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  display:block; margin-top:20px; max-width:52ch;
  color:var(--muted); font-size:16.5px; line-height:1.6;
}
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

.hero-stats{
  margin:40px 0 0; padding-top:28px; border-top:1px solid var(--panel-border);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.hero-stats .stat dt{ font-size:12.5px; color:var(--muted-2); margin-bottom:6px; }
.hero-stats .stat dd{ margin:0; font-family:var(--font-mono); font-size:19px; font-weight:500; }

.hero-right{ display:flex; justify-content:center; }
.coin-stage{
  position:relative; width:100%; max-width:420px; aspect-ratio:1/1;
}
.coin-stage::before{
  content:""; position:absolute; inset:8%;
  background: radial-gradient(circle, rgba(139,92,246,0.35), transparent 65%);
  filter: blur(20px);
}
#coinCanvas{ position:relative; width:100%; height:100%; display:block; }
.coin-price-pill{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  background:rgba(12,13,24,0.75); backdrop-filter: blur(10px);
  border:1px solid var(--panel-border); border-radius:999px;
  padding:9px 18px; font-family:var(--font-mono); font-size:13px;
  white-space:nowrap;
}
.pill-label{ color:var(--muted); }
.pill-value{ font-weight:500; }
.pill-change.up{ color:var(--green); }
.pill-change.down{ color:var(--red); }

/* ============ TICKER ============ */
.ticker-wrap{
  border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
  background:var(--panel); overflow:hidden; padding:12px 0;
}
.ticker-track{
  display:flex; gap:36px; white-space:nowrap; width:max-content;
  animation: scroll-left 38s linear infinite;
  font-family:var(--font-mono); font-size:13.5px;
}
.ticker-wrap:hover .ticker-track{ animation-play-state: paused; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tick-item{ display:flex; gap:8px; align-items:center; color:var(--muted); }
.tick-item b{ color:var(--text); font-weight:500; }
.tick-item .up{ color:var(--green); }
.tick-item .down{ color:var(--red); }

/* ============ SECTIONS ============ */
.section{ max-width:1280px; margin:0 auto; padding:88px 32px; }
.section-tight{ padding-top:0; }
.section-head{ max-width:560px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(26px,3vw,34px); }
.section-head p{ color:var(--muted); margin-top:10px; font-size:15.5px; line-height:1.6; }

/* ============ BENTO MARKET GRID ============ */
.bento{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(150px,auto);
  gap:16px;
}
.card{
  background:linear-gradient(160deg, var(--panel), #0a0b16);
  border:1px solid var(--panel-border); border-radius:var(--radius-lg);
  padding:20px; position:relative; overflow:hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:rgba(139,92,246,0.45); }
.card-featured{ grid-column:span 2; grid-row:span 2; padding:26px; }
.card-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(139,92,246,0.14); border:1px solid rgba(139,92,246,0.3);
}
.card-featured .card-icon{ width:52px; height:52px; font-size:26px; }
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.card-name{ font-family:var(--font-display); font-weight:600; font-size:15px; margin-top:12px; }
.card-featured .card-name{ font-size:20px; margin-top:16px; }
.card-ticker{ color:var(--muted-2); font-family:var(--font-mono); font-size:12px; }
.card-price-row{ display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.card-price{ font-family:var(--font-mono); font-weight:500; font-size:16px; }
.card-featured .card-price{ font-size:24px; }
.card-change{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; padding:2px 8px; border-radius:999px; }
.card-change.up{ color:var(--green); background:rgba(52,225,155,0.12); }
.card-change.down{ color:var(--red); background:rgba(255,84,112,0.12); }
.card-chart{ width:100%; height:50px; margin-top:14px; }
.card-featured .card-chart{ height:110px; }
.card-bond{ margin-top:14px; }
.card-bond-label{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted-2); margin-bottom:6px; font-family:var(--font-mono); }
.bond-track{ height:5px; border-radius:99px; background:rgba(255,255,255,0.06); overflow:hidden; }
.bond-fill{ height:100%; background:var(--grad); border-radius:99px; }
.card-new-badge{
  position:absolute; top:16px; right:16px; font-size:10.5px; font-family:var(--font-mono);
  color:var(--gold); border:1px solid rgba(246,195,68,0.4); background:rgba(246,195,68,0.1);
  padding:3px 8px; border-radius:999px;
}

/* ============ ACTIVITY / TERMINAL ============ */
.activity-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; }
.terminal{
  background:#0a0a14; border:1px solid var(--panel-border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; height:420px;
}
.terminal-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--panel-border); background:#0d0e1a; }
.term-dot{ width:9px; height:9px; border-radius:50%; }
.term-dot.r{ background:#ff5f57; } .term-dot.y{ background:#febc2e; } .term-dot.g{ background:#28c840; }
.terminal-title{ margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }
.terminal-body{
  flex:1; overflow-y:auto; padding:14px 18px; font-family:var(--font-mono); font-size:12.5px; line-height:2;
  display:flex; flex-direction:column-reverse;
}
.term-line{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-line .buy{ color:var(--green); }
.term-line .sell{ color:var(--red); }
.term-line .launch{ color:var(--cyan); }
.term-line .tstamp{ color:var(--muted-2); margin-right:8px; }

.side-panel{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg);
  padding:22px; height:420px; display:flex; flex-direction:column;
}
.side-panel h3{ font-size:15px; margin-bottom:14px; }
.pulse-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px dashed var(--panel-border); font-size:13.5px; }
.pulse-row b{ font-family:var(--font-mono); font-weight:500; color:var(--cyan); }
.pulse-chart{ flex:1; margin-top:16px; min-height:80px; }
.pulse-chart canvas{ width:100%; height:100%; }

/* ============ LEADERBOARD ============ */
.table-wrap{ overflow-x:auto; border:1px solid var(--panel-border); border-radius:var(--radius-lg); }
.lb-table{ width:100%; border-collapse:collapse; min-width:560px; }
.lb-table th{
  text-align:left; font-size:11.5px; color:var(--muted-2); font-weight:500;
  padding:14px 20px; border-bottom:1px solid var(--panel-border); background:var(--panel);
  font-family:var(--font-mono);
}
.lb-table td{ padding:14px 20px; border-bottom:1px solid var(--panel-border); font-size:14px; }
.lb-table tr:last-child td{ border-bottom:none; }
.lb-table tr:hover td{ background:rgba(139,92,246,0.05); }
.lb-rank{ font-family:var(--font-mono); color:var(--muted); }
.lb-rank.top{ color:var(--gold); font-weight:600; }
.lb-wallet{ font-family:var(--font-mono); color:var(--cyan); }
.lb-pnl.up{ color:var(--green); font-family:var(--font-mono); }
.lb-pnl.down{ color:var(--red); font-family:var(--font-mono); }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--panel-border); padding:56px 32px 26px; margin-top:40px; }
.footer-top{ max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-brand{ max-width:320px; }
.footer-brand p{ color:var(--muted); font-size:13.5px; margin-top:12px; line-height:1.6; }
.footer-cols{ display:flex; gap:60px; }
.footer-cols h4{ font-size:12.5px; color:var(--muted-2); margin-bottom:14px; font-weight:500; }
.footer-cols a{ display:block; color:var(--muted); font-size:14px; margin-bottom:10px; }
.footer-cols a:hover{ color:var(--text); }
.footer-bottom{
  max-width:1280px; margin:40px auto 0; padding-top:20px; border-top:1px solid var(--panel-border);
  display:flex; justify-content:space-between; color:var(--muted-2); font-size:12.5px; font-family:var(--font-mono);
  flex-wrap:wrap; gap:8px;
}

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,4,10,0.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  padding:20px;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:440px; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius-lg); padding:30px; position:relative;
  transform:translateY(12px) scale(0.98); transition:transform .2s ease;
  max-height:88vh; overflow-y:auto;
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted);
  font-size:22px; line-height:1; padding:4px 8px; border-radius:8px;
}
.modal-close:hover{ color:var(--text); background:rgba(255,255,255,0.06); }
.modal h3{ font-size:19px; margin-bottom:6px; }
.modal-sub{ color:var(--muted); font-size:13.5px; margin-bottom:22px; }

#launchForm{ display:flex; flex-direction:column; gap:16px; }
#launchForm label{ display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--muted); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#launchForm input, #launchForm textarea{
  background:#0a0a14; border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:11px 13px; color:var(--text); font-size:14.5px; resize:none;
}
#launchForm input:focus, #launchForm textarea:focus{ outline:2px solid var(--violet); outline-offset:1px; border-color:transparent; }
.emoji-pick{ display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 4px; }
.emoji-opt{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--panel-border); background:#0a0a14;
  font-size:18px; display:flex; align-items:center; justify-content:center;
}
.emoji-opt.selected{ border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }

.deploy-log{
  background:#08080f; border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:14px; font-family:var(--font-mono); font-size:12px; min-height:170px;
  display:flex; flex-direction:column; gap:7px; margin-bottom:16px;
}
.deploy-log div{ color:var(--muted); }
.deploy-log div.ok::before{ content:"✓ "; color:var(--green); }
.progress-track{ height:6px; border-radius:99px; background:rgba(255,255,255,0.06); overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:var(--grad); transition:width .3s ease; }

.done-icon{ font-size:44px; text-align:center; margin-bottom:6px; }
#stepDone h3{ text-align:center; }
#stepDone .modal-sub{ text-align:center; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding-top:48px; }
  .hero-right{ order:-1; }
  .coin-stage{ max-width:300px; margin:0 auto; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card-featured{ grid-column:span 2; grid-row:span 1; }
  .activity-grid{ grid-template-columns:1fr; }
  .side-panel{ height:auto; }
}
@media (max-width: 680px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .bento{ grid-template-columns:1fr; }
  .card-featured{ grid-column:span 1; }
  .footer-top{ flex-direction:column; }
  .field-row{ grid-template-columns:1fr; }
  .nav{ padding:12px 18px; gap:14px; }
  .section{ padding:56px 18px; }
  .hero{ padding-left:18px; padding-right:18px; }
}