:root{
  --bg:#050d18;
  --panel:#0a1a2c;
  --line:#16314d;
  --mint:#3ff5c0;
  --mint-dim:rgba(63,245,192,.18);
  --gold:#f2d38a;
  --ink:#e8f1f8;
  --mute:#7f98ad;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-width:1180px;
  background:
    radial-gradient(60% 70% at 72% 50%, rgba(63,245,192,.10), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 48px,
    var(--bg);
  background-blend-mode:normal;
  color:var(--ink);
  font:16px/1.55 "JetBrains Mono",ui-monospace,monospace;
  display:flex;flex-direction:column;
}
body::before{ /* fade the grid toward the edges */
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(80% 80% at 50% 50%, transparent 40%, var(--bg) 95%);
}

.stage{
  position:relative;flex:1;
  display:grid;grid-template-columns:1fr 600px;gap:80px;align-items:center;
  max-width:1280px;width:100%;margin:0 auto;padding:56px 64px 24px;
}

/* ---------- copy ---------- */
.status{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.18em;color:var(--mute);
  border:1px solid var(--line);background:rgba(10,26,44,.7);
  padding:7px 14px;border-radius:999px;margin-bottom:26px;
}
.status b{color:var(--mint);font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:blink 1.6s ease-in-out infinite}

h1{
  font:italic 900 104px/.95 "Exo 2",sans-serif;
  letter-spacing:-.02em;
  color:#fff;
  -webkit-text-stroke:3px #0b1522;
  paint-order:stroke fill;
  text-shadow:0 0 0 #fff, 6px 6px 0 var(--mint-dim), 0 0 40px rgba(63,245,192,.25);
}
.ticker{
  margin-top:14px;
  font:italic 800 30px/1 "Exo 2",sans-serif;color:var(--mint);
  text-shadow:0 0 18px rgba(63,245,192,.55);
}
.lede{margin-top:22px;max-width:30em;color:#b9cad8;font-size:16px}

.ca{
  margin-top:34px;display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--mint);
  padding:12px 12px 12px 18px;border-radius:10px;max-width:560px;
}
.ca-label{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--mint)}
.ca code{flex:1;font:700 15px/1.4 "JetBrains Mono",monospace;color:var(--ink);word-break:break-all}
#copy{
  font:700 13px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--mint);border:1px solid var(--mint);
  padding:9px 16px;border-radius:7px;cursor:pointer;transition:.15s;
}
#copy:hover{background:var(--mint);color:#04140f}
#copy.done{background:var(--mint);color:#04140f}

.actions{margin-top:22px;display:flex;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:italic 800 19px/1 "Exo 2",sans-serif;text-decoration:none;
  padding:16px 28px;border-radius:10px;transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px)}
.buy{background:var(--mint);color:#04140f;box-shadow:0 0 0 1px var(--mint),0 10px 30px rgba(63,245,192,.3)}
.buy:hover{box-shadow:0 0 0 1px var(--mint),0 14px 40px rgba(63,245,192,.5)}
.x{background:#0d1d30;color:var(--ink);border:1px solid #27476a}
.x:hover{border-color:var(--mint)}
.x svg{width:18px;height:18px;fill:currentColor}

/* ---------- logo ---------- */
.logo{margin:0}
.frame{
  position:relative;width:600px;height:600px;
  border-radius:18px;overflow:hidden;
  border:1px solid #1f4566;
  box-shadow:0 0 0 8px rgba(10,26,44,.85), 0 0 0 9px var(--line), 0 30px 80px rgba(0,0,0,.6), 0 0 90px rgba(63,245,192,.15);
}
.frame img,.frame video{display:block;width:100%;height:100%;object-fit:cover}
.scan{
  position:absolute;left:0;right:0;top:-20%;height:20%;pointer-events:none;
  background:linear-gradient(transparent, rgba(63,245,192,.12) 80%, rgba(63,245,192,.35));
  animation:scan 4.5s linear infinite;
}
.c{position:absolute;width:34px;height:34px;border:3px solid var(--mint);filter:drop-shadow(0 0 6px var(--mint))}
.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.br{bottom:14px;right:14px;border-left:0;border-top:0;border-bottom-right-radius:8px}
figcaption{margin-top:22px;text-align:center;font-size:12px;letter-spacing:.2em;color:var(--mute)}
.rec{color:#ff5a6a;animation:blink 1.2s steps(2) infinite}

footer{position:relative;text-align:center;font-size:12px;color:#55708a;padding:18px 24px 26px}

@keyframes blink{50%{opacity:.25}}
@keyframes scan{to{top:100%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}