:root {
  --bg: #070913;
  --bg2: #0b1020;
  --ink: #f6f7fb;
  --muted: #9ea5c7;
  --brand: #22d3ee;
  --accent: #7efc6a;
  --ring: #1f2540;
  --stroke: rgba(255, 255, 255, .08);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1100px 800px at 50% 0%, var(--bg2), var(--bg));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  overflow-x: hidden;
}

.wrap {
  width: min(1100px, 100%);
  padding: 24px;
}

/* Header */
header {
  padding-top: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: .95;
}

.brand h1 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: .2px;
}

/* Hero Section */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 28px;
  padding-top: 18px;
}

.hero h2 {
  margin: .2rem 0 .6rem;
  font-size: clamp(28px, 5vw, 54px);
}

.lead {
  color: var(--muted);
  margin: 0 0 1.2rem;
  font-size: clamp(14px, 2.4vw, 18px);
}

/* Contract Address Section */
.ca-section {
  margin: 1rem 0 1.2rem;
}

.ca-label {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.ca-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ca-address {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--brand);
  word-break: break-all;
  flex: 1;
  min-width: 200px;
}

.copy-btn {
  background: linear-gradient(180deg, rgba(34, 211, 238, .22), rgba(34, 211, 238, .06));
  border: 1px solid rgba(34, 211, 238, .5);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: linear-gradient(180deg, rgba(34, 211, 238, .3), rgba(34, 211, 238, .1));
  transform: translateY(-1px);
}

.copy-btn.copied {
  background: linear-gradient(180deg, rgba(126, 252, 106, .22), rgba(126, 252, 106, .06));
  border-color: rgba(126, 252, 106, .5);
}

/* Call to Action */
.cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 14px;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 252, 106, .5);
  box-shadow: 0 14px 30px rgba(126, 252, 106, .18);
}

.btn.primary {
  background: linear-gradient(180deg, rgba(34, 211, 238, .22), rgba(34, 211, 238, .06));
  border-color: rgba(34, 211, 238, .5);
}

/* Coin Scene */
.scene {
  position: relative;
  width: clamp(240px, 42vw, 520px);
  aspect-ratio: 1/1;
  margin-inline: auto;
  isolation: isolate;
}

.aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  z-index: 0;
  opacity: .9;
  background:
    radial-gradient(closest-side, rgba(126, 252, 106, .32), transparent 70%),
    conic-gradient(from 0turn, transparent .06turn, rgba(34, 211, 238, .28) .18turn, rgba(126, 252, 106, .38) .46turn, rgba(34, 211, 238, .26) .7turn, transparent .92turn);
  filter: blur(42px) saturate(1.2);
  animation: spin 18s linear infinite;
  mask: radial-gradient(closest-side, rgba(0, 0, 0, .95), transparent 72%);
}

.ring {
  position: absolute;
  inset: 1.5%;
  border-radius: 50%;
  z-index: 1;
  opacity: .38;
  background: radial-gradient(circle at 50% 50%, transparent 62%, var(--ring) 63% 64%, transparent 64%),
    conic-gradient(from 0deg,
      transparent 0 16deg, rgba(255, 255, 255, .08) 16deg 18deg,
      transparent 18deg 48deg, rgba(255, 255, 255, .08) 48deg 50deg,
      transparent 50deg 80deg, rgba(255, 255, 255, .08) 80deg 82deg,
      transparent 82deg 112deg, rgba(255, 255, 255, .08) 112deg 114deg,
      transparent 114deg 144deg, rgba(255, 255, 255, .08) 144deg 146deg,
      transparent 146deg 176deg, rgba(255, 255, 255, .08) 176deg 178deg,
      transparent 178deg 208deg, rgba(255, 255, 255, .08) 208deg 210deg,
      transparent 210deg 240deg, rgba(255, 255, 255, .08) 240deg 242deg,
      transparent 242deg 272deg, rgba(255, 255, 255, .08) 272deg 274deg,
      transparent 274deg 304deg, rgba(255, 255, 255, .08) 304deg 306deg,
      transparent 306deg 336deg, rgba(255, 255, 255, .08) 336deg 338deg,
      transparent 338deg 360deg);
  animation: spin 36s linear infinite reverse;
}

.coin {
  --rx: 0deg;
  --ry: 0deg;
  --rz: 0deg;
  --tz: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  object-fit: contain;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) translateZ(var(--tz));
  transition: transform 120ms linear;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 14px rgba(126, 252, 106, .35)) drop-shadow(0 0 24px rgba(34, 211, 238, .22));
  animation: float 6s ease-in-out infinite;
}

/* Candle Chart Effect */
.candles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.candle {
  position: absolute;
  bottom: 0;
  width: 6px;
  background: var(--accent);
  animation: rise 5s linear infinite;
}

/* Grid Section */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
}

.card h3 {
  margin: .2rem 0 .4rem;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Footer */
footer {
  padding: 30px 0 60px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes shine {
  to {
    transform: rotate(1turn);
  }
}

@keyframes rise {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120%);
    opacity: 0;
  }
}

/* Responsive Design */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .ca-container {
    justify-content: center;
  }
  
  .ca-address {
    font-size: 11px;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .aura,
  .ring,
  .coin,
  .candle {
    animation: none !important;
  }
  
  .coin {
    transition: none;
  }
}