:root {
  --ink: #3c2418;
  --ink-deep: #26170f;
  --paper: #f7edda;
  --paper-2: #f2dfbf;
  --paper-3: #e8c88f;
  --orange: #d86613;
  --orange-2: #f39b1b;
  --gold: #ffb31f;
  --brown: #6d421f;
  --max: 1500px;
  --shadow: 0 14px 26px rgba(64, 37, 16, .16), 0 3px 7px rgba(61, 35, 15, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #e7c996;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  overflow-x: hidden;
  font-size: 19px;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--orange-2); color: #fff9ea; }

.site-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .18; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.topbar {
  position: sticky; top: 0; z-index: 200;
  min-height: 92px;
  display: grid; grid-template-columns: auto minmax(310px, 1fr) auto;
  gap: 20px; align-items: center;
  padding: 15px clamp(18px, 3vw, 54px);
  background:
    linear-gradient(100deg, rgba(255,255,255,.24), transparent 26%, rgba(124,74,28,.05) 52%, rgba(255,255,255,.18)),
    #f1e1c5;
  border-bottom: 2px solid rgba(93,57,26,.18);
  box-shadow: 0 7px 20px rgba(65,38,15,.16);
  clip-path: polygon(0 0,100% 0,100% 90%,97% 94%,94% 90%,90% 95%,86% 91%,82% 96%,77% 92%,72% 97%,67% 91%,61% 96%,56% 92%,51% 97%,45% 92%,40% 96%,35% 91%,30% 95%,24% 90%,19% 96%,14% 91%,9% 95%,4% 90%,0 94%);
}

.ticker {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 8px 19px;
  font-weight: 1000; font-size: clamp(25px, 2.2vw, 38px); letter-spacing: -1px;
  background: #e99b22; border: 3px solid #f9e2b3; border-radius: 14px 19px 13px 18px;
  transform: rotate(-2deg);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(103,58,19,.18);
  text-shadow: 1px 2px 0 rgba(255,255,255,.2);
}

.paper-chip, .paper-link, .buy-top, .icon-link {
  box-shadow: 0 7px 15px rgba(67,39,16,.14), inset 0 0 0 1px rgba(91,56,28,.1);
}

.top-ca {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,248,229,.8); padding: 10px 12px 10px 16px;
  border-radius: 13px 9px 15px 10px;
  border: 1px solid rgba(83,52,28,.13);
}
.top-ca-label { font-weight: 800; font-size: 15px; white-space: nowrap; }
.ca-value { font: 900 16px/1.1 "Trebuchet MS", sans-serif; padding: 8px 10px; background: #fff6e3; border-radius: 9px; }
.copy-small, .token-ca-box button {
  border: 0; cursor: pointer; color: #fff6e6; background: var(--brown);
  padding: 10px 18px; border-radius: 9px; text-transform: uppercase; font-weight: 1000;
  box-shadow: 0 5px 0 #4c2c13;
}
.copy-small:active, .token-ca-box button:active { transform: translateY(3px); box-shadow: 0 2px 0 #4c2c13; }

.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 11px; }
.paper-link { background: #f7ead2; padding: 13px 16px; border-radius: 9px 13px 10px 15px; font-weight: 900; white-space: nowrap; }
.icon-link { width: 51px; height: 51px; display: grid; place-items: center; background: #4d331f; border-radius: 9px; color: #fff; }
.icon-link svg { width: 27px; height: 27px; fill: currentColor; }
.buy-top { padding: 14px 21px; background: var(--orange); color: white; font-weight: 1000; text-transform: uppercase; border-radius: 11px 8px 13px 9px; transform: rotate(1deg); }
.menu-button { display: none; }

.paper-section {
  position: relative;
  width: 100%;
  background:
    radial-gradient(circle at 20% 13%, rgba(255,255,255,.24), transparent 26%),
    radial-gradient(circle at 77% 72%, rgba(125,76,30,.06), transparent 32%),
    repeating-linear-gradient(7deg, rgba(102,65,29,.022) 0 2px, transparent 2px 15px),
    var(--paper);
}
.paper-section::before, .paper-section::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22px; z-index: 3; pointer-events: none;
  background: inherit;
}
.paper-section::before { top: -11px; clip-path: polygon(0 55%,4% 25%,8% 66%,12% 31%,16% 71%,20% 42%,25% 74%,30% 27%,34% 64%,39% 35%,45% 68%,50% 30%,56% 72%,61% 41%,67% 65%,72% 28%,78% 70%,83% 37%,89% 66%,94% 31%,100% 57%,100% 100%,0 100%); }
.paper-section::after { bottom: -11px; clip-path: polygon(0 0,100% 0,100% 40%,95% 67%,90% 40%,84% 74%,79% 42%,73% 70%,68% 36%,62% 73%,56% 42%,50% 70%,44% 34%,38% 68%,31% 40%,25% 75%,19% 38%,13% 70%,7% 42%,0 68%); }
.section-warm { background-color: #eed3a6; }
.section-light { background-color: #f7ecd7; }

.hero {
  min-height: 710px;
  display: grid; grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.05fr); align-items: center;
  gap: 40px;
  padding: 70px max(45px, calc((100vw - var(--max)) / 2));
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 48%, rgba(249,166,43,.26), transparent 29%),
    repeating-conic-gradient(from -7deg at 41% 47%, rgba(166,91,18,.08) 0 7deg, transparent 7deg 16deg),
    linear-gradient(180deg,#efd3a3,#e8c68b);
}
.hero::before { top: -1px; }
.hero-bursts { position: absolute; inset: 0; opacity: .32; pointer-events: none; background: radial-gradient(circle at 4% 72%, #8c4d1d 0 3px, transparent 4px), radial-gradient(circle at 94% 21%, #6e451f 0 2px, transparent 3px); background-size: 63px 63px, 81px 81px; }
.hero-mascot-wrap { position: relative; z-index: 2; width: min(620px, 46vw); justify-self: center; transform: rotate(-1deg); }
.hero-mascot-wrap::after { content:""; position:absolute; inset:8% 7% 6%; border-radius:46% 50% 47% 52%; box-shadow: 0 0 34px 16px rgba(255,166,0,.58); z-index:-1; }
.hero-mascot {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 48% 49% 46% 51%;
  clip-path: polygon(11% 0,88% 0,98% 16%,100% 83%,88% 100%,10% 100%,0 83%,2% 17%);
  filter: drop-shadow(0 0 11px rgba(255,167,15,.9)) drop-shadow(0 16px 12px rgba(60,35,17,.28));
}
.hero-copy { position: relative; z-index: 4; text-align: center; }
.replace-note { position: absolute; top: -38px; left: 17%; transform: rotate(-4deg); }
.tape-note {
  background: #ead4a9; padding: 17px 23px; box-shadow: var(--shadow); font-weight: 800; line-height: 1.45;
  border-radius: 2px 7px 3px 5px;
}
.tape-note::before { content:""; position:absolute; width:83px; height:23px; top:-8px; left:30%; background:rgba(205,161,67,.68); transform:rotate(3deg); }
.wordmark { width: min(820px, 63vw); margin: 66px auto 5px; filter: drop-shadow(0 8px 0 rgba(78,43,18,.11)); }
.tagline { display:inline-block; margin: 0 auto 30px; padding: 16px 26px; font-weight: 900; font-size: clamp(24px,2.2vw,37px); line-height: 1.25; background:#f8ecd2; transform: rotate(-1deg); box-shadow: var(--shadow); }
.torn-strip { clip-path: polygon(2% 8%, 14% 2%, 27% 8%, 42% 1%, 58% 8%, 74% 2%, 88% 7%, 100% 1%, 98% 94%, 84% 99%, 71% 92%, 57% 100%, 43% 93%, 29% 100%, 16% 92%, 0 100%); }
.hero-buttons { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.cta { min-width: 180px; border:0; cursor:pointer; padding: 18px 28px; font-weight:1000; text-transform:uppercase; font-size:23px; border-radius:8px 13px 9px 12px; box-shadow:0 8px 0 rgba(78,45,20,.38), var(--shadow); transition:.18s transform; }
.cta:hover { transform: translateY(-3px) rotate(-1deg); }
.cta-orange { background:var(--orange); color:#fff; }
.cta-paper { background:#f5e5c5; }
.cta-brown { background:#a96b2b; color:#fff8e9; }

.about { min-height: 620px; display:grid; grid-template-columns: 1.15fr .85fr; gap:70px; align-items:center; padding: 80px max(55px, calc((100vw - var(--max)) / 2)); }
h2 { margin:0 0 24px; font-family:"Comic Sans MS", "Trebuchet MS", sans-serif; font-size:clamp(50px,5vw,82px); line-height:.95; text-transform:uppercase; letter-spacing:-3px; text-shadow:2px 2px 0 rgba(100,55,20,.08); }
.about p { max-width:760px; font-size:clamp(20px,1.55vw,29px); line-height:1.5; font-weight:700; }
.polaroid { position:relative; justify-self:center; width:min(540px,38vw); padding:22px; background:#efe2c6; box-shadow:var(--shadow); transform:rotate(2deg); clip-path:polygon(4% 0,97% 3%,100% 95%,93% 100%,3% 97%,0 7%); }
.polaroid::before, .polaroid::after { content:""; position:absolute; width:105px; height:31px; background:rgba(205,161,67,.67); z-index:4; }
.polaroid::before { top:-8px; left:18%; transform:rotate(-10deg); }
.polaroid::after { bottom:-7px; right:6%; transform:rotate(-16deg); }
.polaroid img { width:100%; aspect-ratio:1; object-fit:cover; border:3px solid rgba(83,49,22,.2); }
.doodle { position:absolute; font-family:"Comic Sans MS", cursive; color:var(--orange); font-weight:900; }
.doodle-heart { right:5%; top:18%; font-size:75px; transform:rotate(12deg); }
.doodle-leaf { right:4%; bottom:11%; font-size:95px; color:#7c4e25; transform:rotate(-15deg); }

.roadmap { padding: 76px max(44px, calc((100vw - var(--max)) / 2)) 95px; }
.roadmap-layout { display:grid; grid-template-columns: .33fr 1.67fr; gap:32px; align-items:end; }
.sticker-mascot { position:relative; }
.sticker-mascot img { width:100%; object-fit:cover; border-radius:48%; filter: drop-shadow(0 0 9px #ffc13a) drop-shadow(0 0 2px #fff7cf) drop-shadow(0 12px 9px rgba(65,35,15,.24)); }
.roadmap-mascot { width:min(340px,22vw); }
.roadmap-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.road-card { position:relative; min-height:350px; padding:50px 23px 34px; background:#f7e9ce; box-shadow:var(--shadow); text-align:center; transform:rotate(var(--tilt,0deg)); clip-path:polygon(3% 0,96% 2%,100% 95%,93% 100%,4% 98%,0 5%); }
.road-card:nth-child(1){--tilt:-1deg}.road-card:nth-child(2){--tilt:1.1deg}.road-card:nth-child(3){--tilt:-.6deg}.road-card:nth-child(4){--tilt:.9deg}
.phase { position:absolute; top:15px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--orange); color:#fff; font-weight:1000; font-size:24px; }
.road-card h3 { margin:14px 0 16px; text-transform:uppercase; font-family:"Comic Sans MS",sans-serif; font-size:27px; }
.road-card p { font-size:19px; line-height:1.5; font-weight:700; }
.card-mark { display:block; margin-top:16px; color:#a7642b; font-size:26px; letter-spacing:3px; }

.tokenomics { padding:80px max(44px, calc((100vw - var(--max)) / 2)) 105px; }
.tokenomics-layout { display:grid; grid-template-columns:.44fr 1.56fr; gap:45px; align-items:center; }
.token-mascot { width:min(410px,28vw); }
.token-card { padding:34px 42px; background:#f5e4c6; box-shadow:var(--shadow); clip-path:polygon(1% 3%,98% 0,100% 95%,96% 99%,3% 98%,0 7%); }
.token-row { display:grid; grid-template-columns:1fr auto; gap:25px; align-items:center; padding:18px 0; border-bottom:2px dashed rgba(99,59,25,.25); font-size:21px; }
.token-row span::before { content:""; display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--orange); margin-right:12px; }
.token-row b { text-align:right; }
.token-ca-row { grid-template-columns:1fr; border-bottom:0; }
.token-ca-box { display:grid; grid-template-columns:1fr auto; gap:12px; padding:8px; background:#f9ecd2; border:2px solid rgba(79,45,20,.15); border-radius:10px; }
.token-ca-box code { align-self:center; padding-left:10px; overflow:hidden; text-overflow:ellipsis; }

.chart-section { padding:86px max(36px, calc((100vw - var(--max)) / 2)) 92px; display:grid; grid-template-columns:.32fr 1.68fr; gap:34px; align-items:start; }
.chart-title-wrap { padding-top:34px; }
.chart-title-wrap h2 { font-size:clamp(46px,4.8vw,78px); }
.chart-note { position:relative; margin-top:36px; display:inline-block; transform:rotate(-3deg); font-size:18px; }
.chart-note span { font-size:43px; vertical-align:middle; }
.dex-frame-wrap { position:relative; width:100%; min-height:610px; background:#101722; padding:10px; border-radius:13px; box-shadow:0 18px 34px rgba(44,26,14,.3); transform:rotate(.35deg); overflow:hidden; }
.dex-frame-wrap::before { content:""; position:absolute; inset:0; border:2px solid rgba(255,255,255,.09); pointer-events:none; z-index:2; border-radius:13px; }
.dex-frame-wrap iframe { width:100%; height:610px; border:0; display:block; background:#0f1720; }

.join { position:relative; min-height:480px; display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; overflow:hidden; padding:55px max(50px,calc((100vw - var(--max))/2)); background:url('assets/bg.png') center/cover no-repeat; color:#fff6e4; }
.join::before, .join::after { content:""; position:absolute; left:0; right:0; height:25px; z-index:4; background:#e9cc9a; }
.join::before { top:-5px; clip-path:polygon(0 80%,6% 36%,12% 78%,18% 39%,25% 73%,31% 31%,38% 77%,45% 37%,51% 73%,58% 32%,64% 79%,71% 41%,78% 72%,85% 35%,92% 77%,100% 45%,100% 0,0 0); }
.join::after { bottom:-5px; clip-path:polygon(0 0,100% 0,100% 25%,94% 67%,88% 38%,82% 74%,75% 35%,68% 69%,62% 32%,55% 75%,48% 36%,41% 73%,34% 31%,27% 68%,20% 38%,13% 74%,6% 35%,0 65%); }
.join-overlay { position:absolute; inset:0; background:rgba(39,24,17,.24); }
.join-mascot { z-index:2; width:min(400px,30vw); align-self:end; }
.join-copy { z-index:2; text-align:center; }
.join-copy h2 { color:#fff2d9; }
.join-copy p { font-size:24px; line-height:1.45; font-weight:800; }
.join-buttons { display:flex; justify-content:center; gap:28px; margin-top:26px; }
.join-x, .join-buy { min-width:250px; padding:17px 25px; display:grid; place-items:center; border:4px solid #f8eedb; border-radius:7px 15px 7px 12px; box-shadow:0 9px 0 rgba(17,10,6,.5); font-size:32px; font-weight:1000; text-transform:uppercase; }
.join-x { background:#17191b; }
.join-buy { background:var(--orange); }
.paw { position:absolute; z-index:2; font-size:52px; color:#cf9862; letter-spacing:-12px; transform:rotate(12deg); }
.paw-one { right:18%; top:20%; }.paw-two { right:8%; top:42%; transform:rotate(-9deg); }

.footer { min-height:118px; display:grid; grid-template-columns:auto 1px 1fr; gap:30px; align-items:center; padding:25px max(38px,calc((100vw - var(--max))/2)); background:#f0dec0; }
.footer strong { font-size:20px; white-space:nowrap; }
.footer-rule { width:1px; height:56px; background:rgba(73,44,24,.28); }
.footer p { margin:0; font-size:15px; line-height:1.45; font-weight:700; }

.copy-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,120px); z-index:500; background:#3f2918; color:#fff6e6; padding:13px 22px; border-radius:9px; box-shadow:var(--shadow); font-weight:900; transition:.25s ease; }
.copy-toast.show { transform:translate(-50%,0); }

@media (max-width: 1180px) {
  .topbar { grid-template-columns:auto 1fr auto; }
  .top-ca { justify-self:end; }
  .menu-button { display:grid; width:52px; height:48px; place-content:center; gap:6px; border:0; background:#5a3820; border-radius:10px; cursor:pointer; }
  .menu-button span { display:block; width:25px; height:3px; background:#fff1dc; border-radius:2px; }
  .top-actions { position:absolute; top:84px; right:20px; min-width:280px; display:none; flex-direction:column; align-items:stretch; padding:15px; background:#f0dfc2; box-shadow:var(--shadow); border-radius:13px; }
  .top-actions.open { display:flex; }
  .icon-link { width:100%; }
  .hero { grid-template-columns:1fr 1fr; padding-inline:36px; }
  .roadmap-cards { grid-template-columns:repeat(2,1fr); }
  .roadmap-layout { grid-template-columns:.38fr 1.62fr; }
}

@media (max-width: 820px) {
  body { font-size:16px; }
  .topbar { min-height:76px; grid-template-columns:auto 1fr auto; gap:10px; padding:10px 13px 16px; }
  .ticker { min-height:48px; font-size:23px; padding:6px 12px; }
  .top-ca { justify-self:end; padding:7px; gap:7px; }
  .top-ca-label { display:none; }
  .ca-value { max-width:110px; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
  .copy-small { padding:8px 10px; font-size:13px; }
  .menu-button { width:45px; height:43px; }
  .top-actions { top:72px; right:10px; left:10px; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:10px; padding:45px 19px 70px; }
  .hero-mascot-wrap { width:min(560px,92vw); order:2; }
  .hero-copy { order:1; }
  .replace-note { position:relative; top:auto; left:auto; width:max-content; max-width:88%; margin:0 auto 15px; }
  .wordmark { width:min(720px,92vw); margin-top:10px; }
  .tagline { font-size:21px; }
  .cta { min-width:145px; font-size:18px; padding:15px 20px; }
  .about { grid-template-columns:1fr; padding:65px 22px; gap:32px; }
  .about p { font-size:19px; }
  .polaroid { width:min(520px,88vw); }
  .roadmap { padding:65px 20px 80px; }
  .roadmap-layout { grid-template-columns:1fr; }
  .roadmap-mascot { width:min(300px,64vw); justify-self:center; }
  .roadmap-cards { grid-template-columns:1fr; }
  .road-card { min-height:0; }
  .tokenomics { padding:65px 20px 82px; }
  .tokenomics-layout { grid-template-columns:1fr; }
  .token-mascot { width:min(330px,67vw); justify-self:center; }
  .token-card { padding:24px 19px; }
  .token-row { grid-template-columns:1fr; gap:7px; font-size:18px; }
  .token-row b { text-align:left; padding-left:24px; }
  .chart-section { grid-template-columns:1fr; padding:65px 16px 78px; }
  .chart-title-wrap { display:flex; justify-content:space-between; gap:14px; align-items:center; }
  .chart-title-wrap h2 { margin:0; }
  .chart-note { margin:0; font-size:15px; }
  .dex-frame-wrap, .dex-frame-wrap iframe { min-height:520px; height:520px; }
  .join { grid-template-columns:1fr; padding:52px 20px 65px; text-align:center; }
  .join-mascot { width:min(330px,72vw); justify-self:center; order:2; }
  .join-copy { order:1; }
  .join-copy p { font-size:19px; }
  .join-buttons { gap:14px; }
  .join-x, .join-buy { min-width:135px; font-size:24px; }
  .footer { grid-template-columns:1fr; gap:12px; text-align:center; }
  .footer-rule { width:80px; height:1px; justify-self:center; }
}