:root{
  --blue:#3f6df5;
  --blue-deep:#315ce0;
  --yellow:#ffd91f;
  --black:#111111;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--blue);font-family:Arial,Helvetica,sans-serif;color:var(--white)}
body{overflow:hidden}
.hero{
  min-height:100svh;
  position:relative;
  display:grid;
  grid-template-columns:minmax(390px,.9fr) minmax(560px,1.25fr);
  align-items:center;
  gap:1vw;
  padding:clamp(28px,4vw,70px);
  background:
    radial-gradient(circle at 72% 46%, rgba(255,255,255,.12), transparent 27%),
    linear-gradient(135deg,#4875ff 0%,#3c6af3 55%,#315de3 100%);
  overflow:hidden;
}
.noise{position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.copy{position:relative;z-index:4;max-width:610px}
.eyebrow{display:inline-block;background:var(--black);color:var(--yellow);font-weight:900;letter-spacing:.14em;font-size:12px;padding:11px 14px;transform:rotate(-1.5deg);box-shadow:7px 7px 0 rgba(0,0,0,.12)}
h1{margin:16px 0 -8px;font-size:clamp(84px,10vw,170px);line-height:.8;letter-spacing:-.07em;color:var(--yellow);text-shadow:8px 9px 0 var(--black),0 18px 26px rgba(0,0,0,.18)}
.ticker{font-size:clamp(30px,3vw,52px);font-weight:1000;letter-spacing:.06em;color:#fff;margin:16px 0 24px;text-shadow:4px 4px 0 var(--black)}
.ca-box{width:min(100%,600px);height:64px;border:3px solid var(--black);background:#fff;color:#111;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 16px;cursor:pointer;box-shadow:8px 8px 0 var(--black);transition:transform .14s ease,box-shadow .14s ease}
.ca-box:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--black)}
.ca-label{font-weight:1000;background:var(--yellow);padding:7px 10px;border:2px solid var(--black)}
.ca-text{font-family:Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:800}
.copy-icon{font-size:25px;font-weight:900}
.links{width:min(100%,600px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.token-link{min-height:58px;padding:0 17px;border:3px solid var(--black);background:#fff;color:#111;text-decoration:none;display:flex;align-items:center;justify-content:space-between;font-weight:1000;text-transform:uppercase;letter-spacing:.03em;box-shadow:6px 6px 0 var(--black);transition:.14s ease}
.token-link.yellow{background:var(--yellow)}
.token-link:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--black)}
.token-link.disabled{opacity:.38;pointer-events:none;filter:grayscale(.4)}
.token-link span{font-size:20px}
.status{margin-top:18px;font-size:12px;font-weight:900;letter-spacing:.18em;color:#dfe6ff}
.visual{position:relative;z-index:2;display:grid;place-items:center;min-height:70vh}
.visual img{position:relative;z-index:2;width:min(760px,54vw);height:auto;display:block;filter:drop-shadow(0 32px 35px rgba(0,0,0,.24));mix-blend-mode:normal}
.halo{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9}
.halo-one{width:72%;aspect-ratio:1/1;background:radial-gradient(circle,#4c7dff 0%,rgba(76,125,255,.4) 55%,transparent 72%)}
.halo-two{width:42%;aspect-ratio:1/1;border:18px solid rgba(255,217,31,.10);transform:rotate(-20deg)}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:#111;color:#ffd91f;border:2px solid #ffd91f;padding:10px 16px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.2s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){
  body{overflow:auto}
  .hero{grid-template-columns:1fr;min-height:auto;padding:24px 18px 50px;gap:20px}
  .visual{order:-1;min-height:auto}
  .visual img{width:min(620px,92vw)}
  .copy{margin:0 auto;width:min(650px,100%);text-align:center}
  .eyebrow{font-size:10px}
  .links,.ca-box{margin-left:auto;margin-right:auto}
  .status{text-align:center}
}
@media(max-width:560px){
  h1{font-size:clamp(74px,25vw,125px)}
  .links{grid-template-columns:1fr}
  .ca-box{height:58px;grid-template-columns:auto minmax(0,1fr) auto}
  .visual img{width:96vw}
}