:root {
    --paper: #c99862;
    --paper-light: #e2b67f;
    --paper-pale: #f4dfbf;
    --green: #4d8f32;
    --green-dark: #245f22;
    --blue: #1746c6;
    --ink: #17130f;
    --cream: #fff7ea;
    --line: rgba(23, 19, 15, .18);
    --shadow: rgba(41, 26, 13, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 5%, rgba(255,255,255,.33), transparent 24rem),
        radial-gradient(circle at 92% 18%, rgba(68,132,48,.16), transparent 28rem),
        linear-gradient(180deg, #d6a56d 0%, #c38c53 100%);
    font-family: Arial, Helvetica, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

a, button { font: inherit; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.is-hidden { display: none !important; }

.paper-noise {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .065;
    background-image:
        repeating-linear-gradient(12deg, rgba(0,0,0,.4) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(103deg, rgba(255,255,255,.36) 0 1px, transparent 1px 13px);
    mix-blend-mode: multiply;
}

.blob {
    position: fixed;
    z-index: 0;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .22;
    pointer-events: none;
}
.blob-green { top: 11rem; left: -11rem; background: #4b9637; }
.blob-blue { right: -10rem; bottom: 4rem; background: #2454d3; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 78px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px clamp(14px, 4vw, 52px);
    background: rgba(226,182,127,.82);
    border-bottom: 2px solid rgba(23,19,15,.13);
    backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-text { font-size: clamp(23px, 2.5vw, 35px); font-weight: 1000; letter-spacing: -1.5px; line-height: .95; }
.brand-pill {
    display: inline-grid;
    place-items: center;
    min-width: 64px;
    min-height: 42px;
    padding: 6px 12px;
    color: white;
    background: var(--green-dark);
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 1000;
    transform: rotate(-5deg);
}
.top-links { display: flex; align-items: center; gap: 8px; }
.top-icon, .top-chip, .purchase-btn, .social-card, .ca-button, .fact-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.top-icon:hover, .top-chip:hover, .purchase-btn:hover, .social-card:hover, .ca-button:hover, .fact-card:hover {
    transform: translate(-2px,-2px);
    box-shadow: 7px 7px 0 rgba(35,23,12,.15);
}
.top-icon {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: rgba(255,247,234,.55); border: 2px solid var(--line); border-radius: 14px;
}
.top-icon img { width: 20px; height: 20px; }
.top-chip img { width: 22px; height: 22px; object-fit: contain; }
.top-chip {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 16px; border-radius: 14px; text-decoration: none; font-weight: 1000; border: 2px solid var(--line);
}
.x-chip { color: var(--cream); background: var(--ink); gap: 8px; }
.x-chip img { filter: brightness(0) invert(1); }
.pump-chip { color: var(--ink); background: #8fd06b; gap: 8px; }
.fomo-chip { color: var(--ink); background: var(--paper-pale); }

.hero-section {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 78px);
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr);
    gap: clamp(34px,6vw,82px);
    align-items: center;
    padding: clamp(44px,7vw,98px) clamp(16px,5vw,72px);
}
.status-chip {
    display: inline-block; margin-bottom: 18px; padding: 9px 13px; color: #fff; background: var(--ink);
    border-radius: 999px; font-size: 13px; font-weight: 1000; transform: rotate(-2deg);
}
h1,h2,p { margin-top: 0; }
h1 {
    margin-bottom: 20px;
    font-size: clamp(68px,10vw,148px);
    line-height: .77;
    letter-spacing: clamp(-7px,-.45vw,-3px);
    font-weight: 1000;
}
h1 span {
    display: inline-block;
    color: var(--green-dark);
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 7px 7px 0 rgba(255,247,234,.32);
    transform: rotate(-1deg);
}
.hero-text { max-width: 720px; margin-bottom: 28px; font-size: clamp(20px,2vw,28px); line-height: 1.14; font-weight: 800; }
.fact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; max-width: 740px; }
.fact-card {
    min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    padding: 15px; background: rgba(255,247,234,.48); border: 2px solid var(--line); border-radius: 18px;
}
.fact-card b { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--green-dark); border-radius: 50%; border: 2px solid var(--ink); }
.fact-card span { font-weight: 1000; text-transform: uppercase; }

.hero-art { position: relative; min-height: 690px; display: grid; place-items: center; }
.hero-frame {
    position: relative; width: min(700px,100%); padding: 12px; background: rgba(255,247,234,.6);
    border: 2px solid var(--line); border-radius: 28px; box-shadow: 0 24px 70px rgba(41,26,13,.18);
    transform: rotate(1.5deg); animation: frameFloat 5s ease-in-out infinite;
}
.hero-frame img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 2px solid var(--line); background: #e6d2b7;
}
.frame-label {
    position: absolute; z-index: 2; padding: 7px 10px; color: #fff; background: var(--ink); border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 800;
}
.top-label { top: -14px; left: 22px; transform: rotate(-4deg); }
.bottom-label { right: 20px; bottom: -14px; transform: rotate(3deg); }
.float-tag {
    position: absolute; z-index: 3; padding: 10px 13px; border: 2px solid var(--ink); border-radius: 10px;
    font-weight: 1000; box-shadow: 5px 5px 0 var(--ink);
}
.tag-a { top: 11%; right: -1%; background: #eef4df; transform: rotate(7deg); }
.tag-b { bottom: 16%; left: -3%; background: #d8ac74; transform: rotate(-8deg); }
.tag-c { bottom: 3%; right: 8%; color: #fff; background: var(--blue); transform: rotate(5deg); }

.trade-zone {
    position: relative; z-index: 1; margin: 0 clamp(14px,4vw,52px) clamp(30px,5vw,70px);
    padding: clamp(22px,4vw,44px); background: var(--paper-pale); border: 3px solid var(--ink); border-radius: 30px;
    box-shadow: 10px 10px 0 rgba(23,19,15,.15);
}
.trade-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.trade-heading span { font-size: clamp(32px,5vw,68px); font-weight: 1000; letter-spacing: -2.5px; }
.trade-heading small { font-weight: 800; opacity: .62; }
.purchase-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.purchase-btn {
    min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 16px;
    color: var(--ink); text-decoration: none; border: 3px solid var(--ink); border-radius: 20px; font-size: clamp(18px,2vw,28px); font-weight: 1000;
}
.purchase-btn img { width: 34px; height: 34px; object-fit: contain; }
.purchase-btn.pump { background: #8fd06b; }
.purchase-btn.fomo { background: #fff5df; }
.purchase-btn.dex { background: #8db5ff; }
.fomo-mark, .fomo-mini { display: inline-grid; place-items: center; font-weight: 1000; border: 2px solid currentColor; border-radius: 50%; }
.fomo-mark { width: 34px; height: 34px; }
.fomo-mini { width: 28px; height: 28px; }
.ca-block { margin-top: 14px; padding-top: 18px; border-top: 2px dashed rgba(23,19,15,.26); }
.ca-caption { margin-bottom: 8px; font-size: 12px; font-weight: 1000; letter-spacing: .12em; }
.ca-button {
    width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px;
    background: white; border: 2px solid var(--ink); border-radius: 14px; cursor: pointer; text-align: left;
}
#caText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; }
.copy-state { flex: 0 0 auto; padding: 7px 9px; color: #fff; background: var(--green-dark); border-radius: 8px; font-size: 11px; font-weight: 1000; }

.story-section {
    position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px;
    padding: clamp(30px,5vw,70px) clamp(14px,4vw,52px);
}
.story-card, .stats-card { border: 3px solid var(--ink); border-radius: 28px; box-shadow: 9px 9px 0 rgba(23,19,15,.14); }
.story-card { position: relative; padding: clamp(24px,4vw,54px); background: rgba(255,247,234,.72); overflow: hidden; }
.story-kicker { display: inline-block; margin-bottom: 12px; padding: 7px 10px; background: var(--ink); color: white; border-radius: 8px; font-family: ui-monospace, monospace; font-weight: 800; }
.story-card h2 { max-width: 900px; margin-bottom: 18px; font-size: clamp(42px,6vw,90px); line-height: .9; letter-spacing: -3px; }
.story-card p { max-width: 900px; margin-bottom: 8px; font-size: clamp(18px,2vw,26px); line-height: 1.25; font-weight: 750; }
.scribble { position: absolute; right: 24px; bottom: 18px; font-size: 18px; font-weight: 1000; transform: rotate(-7deg); opacity: .6; }
.stats-card { padding: clamp(22px,3vw,38px); background: var(--green); color: #fff; }
.stamp { display: inline-block; margin-bottom: 20px; padding: 8px 12px; border: 3px solid #fff; border-radius: 8px; font-weight: 1000; transform: rotate(2deg); }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 2px dashed rgba(255,255,255,.35); }
dt, dd { margin: 0; font-size: clamp(17px,2vw,24px); font-weight: 900; }
dd { text-align: right; }

.social-grid {
    position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
    padding: 0 clamp(14px,4vw,52px) clamp(44px,6vw,88px);
}
.social-card {
    min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 18px;
    color: var(--ink); background: rgba(255,247,234,.62); text-decoration: none; border: 2px solid var(--ink); border-radius: 20px; font-weight: 1000;
}
.social-card img { width: 28px; height: 28px; }
.pump-social { background: #8fd06b; }
footer {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 90px;
    padding: 20px; color: #fff; background: var(--ink); font-size: 16px; font-weight: 1000;
}
footer img { width: 30px; height: 30px; filter: brightness(0) invert(1); }

@keyframes frameFloat {
    0%,100% { transform: rotate(1.5deg) translateY(0); }
    50% { transform: rotate(-.4deg) translateY(-10px); }
}

@media (max-width: 1000px) {
    .hero-section { grid-template-columns: 1fr; }
    .hero-art { min-height: auto; }
    .story-section { grid-template-columns: 1fr; }
    .social-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 700px) {
    .topbar { min-height: 66px; padding: 9px 12px; }
    .brand-text { font-size: 20px; }
    .brand-pill { min-width: 56px; min-height: 38px; }
    .top-icon { width: 38px; height: 38px; border-radius: 12px; }
    .top-chip { min-height: 38px; padding: 0 11px; font-size: 12px; }
    .top-chip img { width: 18px; height: 18px; }
    .pump-chip span { display: none; }
    .fomo-chip { display: none; }
    .hero-section { min-height: auto; padding-top: 48px; }
    h1 { font-size: clamp(58px,19vw,95px); }
    h1 span { -webkit-text-stroke-width: 1.4px; }
    .fact-grid { grid-template-columns: 1fr; }
    .fact-card { min-height: 88px; }
    .hero-art { margin-top: 8px; }
    .tag-a, .tag-b, .tag-c { font-size: 11px; }
    .tag-a { right: 1%; }
    .tag-b { left: 1%; }
    .trade-heading { align-items: flex-start; flex-direction: column; }
    .purchase-buttons { grid-template-columns: 1fr; }
    .purchase-btn { min-height: 72px; }
    .story-card h2 { letter-spacing: -2px; }
    .scribble { position: static; display: inline-block; margin-top: 18px; }
    .social-grid { grid-template-columns: 1fr; }
    .social-card { min-height: 78px; }
}

@media (max-width: 430px) {
    .brand-text { display: none; }
    .top-links { gap: 5px; }
    .top-chip { padding: 0 10px; }
    .hero-frame { border-radius: 20px; }
    .hero-frame img { border-radius: 15px; }
    .float-tag { box-shadow: 3px 3px 0 var(--ink); }
}