:root {
  --page-bg: #f7f4ef;
  --ink: #111;
  --sand: #c98f60;
  --line: #ded8d0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
html, body { margin: 0; min-height: 100%; background: var(--page-bg); color: var(--ink); }
body { font-family: Arial, Helvetica, sans-serif; }
.stage {
  position: relative;
  width: min(100vw, 1536px);
  margin: 0 auto;
  aspect-ratio: 1672 / 704;
  overflow: hidden;
  background: #f5f1eb;
}
.design { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.hotspot { position:absolute; display:block; appearance:none; border:0; padding:0; background:transparent; cursor:pointer; border-radius:12px; }
.hotspot:focus-visible { outline:3px solid rgba(0,0,0,.45); outline-offset:2px; }
.home       { left:23.8%; top:3.0%; width:4.4%; height:6.5%; }
.tokenomics { left:29.4%; top:3.0%; width:7.4%; height:6.5%; }
.memes      { left:37.3%; top:3.0%; width:4.8%; height:6.5%; }
.about      { left:43.6%; top:3.0%; width:4.8%; height:6.5%; }
.howto      { left:49.0%; top:3.0%; width:7.8%; height:6.5%; }
.pump-top   { left:70.3%; top:2.2%; width:13.2%; height:7.0%; }
.pump-main  { left:4.6%; top:65.6%; width:12.6%; height:7.0%; }
.copy-ca    { left:18.1%; top:65.6%; width:8.8%; height:7.0%; }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,10px); opacity:0; z-index:30; padding:.65rem .9rem; color:#fff; background:rgba(0,0,0,.88); border-radius:999px; font-size:14px; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.content-section { border-top:1px solid var(--line); padding:clamp(70px,8vw,130px) 28px; background:#f7f4ef; }
.section-wrap { width:min(1180px,100%); margin:0 auto; }
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(38px,7vw,110px); align-items:start; }
.eyebrow { display:inline-block; margin-bottom:18px; font-size:12px; letter-spacing:.24em; font-weight:700; }
h2 { margin:0; max-width:800px; font-size:clamp(42px,6vw,84px); line-height:.94; letter-spacing:-.055em; }
h2 em { color:var(--sand); font-style:normal; }
.lead { max-width:680px; margin:24px 0 0; font-size:clamp(18px,2vw,25px); line-height:1.45; }
.lead.narrow { max-width:720px; }
.info-card { border:1px solid #cbc4bb; border-radius:24px; background:#fff; overflow:hidden; box-shadow:0 16px 45px rgba(0,0,0,.05); }
.info-card > div { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:20px 24px; border-bottom:1px solid #e5e0da; align-items:center; }
.info-card > div:last-child { border-bottom:0; }
.info-card span { color:#777; }
.info-card strong { overflow-wrap:anywhere; }
.text-copy { justify-self:start; padding:9px 14px; border:1px solid #222; border-radius:999px; background:#fff; font:inherit; font-weight:700; cursor:pointer; }
.memes-section { background:#fff; }
.meme-grid { margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.meme-grid figure { margin:0; border:1px solid #ddd7d0; border-radius:22px; overflow:hidden; background:#f7f4ef; }
.meme-grid img { display:block; width:100%; aspect-ratio:1.55/1; object-fit:cover; }
.meme-grid figcaption { padding:14px 16px 18px; font-weight:700; font-size:16px; }
.about-section { background:#111; color:#f8f5ef; border-color:#222; }
.about-section h2 em { color:#d8a176; }
.about-copy { font-size:clamp(19px,2vw,28px); line-height:1.5; }
.about-copy p { margin:0 0 22px; }
.tiny-note { display:inline-block; margin-top:10px; padding:10px 14px; border:1px solid #666; border-radius:999px; font-size:14px; transform:rotate(-2deg); }
.howto-section { background:#eee8e0; }
.steps { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.steps article { min-height:240px; padding:26px; border:1px solid #d0c7bd; border-radius:24px; background:#f8f5f0; }
.steps b { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#111; color:white; font-size:14px; }
.steps h3 { margin:28px 0 10px; font-size:28px; }
.steps p { margin:0; color:#555; line-height:1.5; font-size:17px; }
.cta-row { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.primary-cta, .secondary-cta { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 22px; border-radius:14px; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer; }
.primary-cta { background:#111; color:#fff; }
.secondary-cta { background:transparent; color:#111; border:1px solid #111; }
footer { padding:28px max(28px,calc((100vw - 1180px)/2)); background:#111; color:#eee; display:flex; justify-content:space-between; gap:20px; font-size:14px; }
footer a { color:#eee; text-decoration:none; }
@media (max-width: 900px) {
  .split, .steps { grid-template-columns:1fr; }
  .meme-grid { grid-template-columns:repeat(2,1fr); }
  .about-copy { max-width:720px; }
}
@media (max-width: 700px) {
  body { background:#f5f1eb; }
  .stage { width:100vw; min-width:0; }
  .hotspot { border-radius:8px; }
  .content-section { padding:64px 20px; }
  .meme-grid { grid-template-columns:1fr; }
  .info-card > div { grid-template-columns:1fr; gap:7px; }
  footer { flex-direction:column; padding:24px 20px; }
}