/* =========================================================
   ORION — bright cartoon redesign
   handmade / animated / not-dark
   ========================================================= */

:root{
  --cream:   #fff6e6;
  --paper:   #fffdf7;
  --ink:     #241a3a;
  --ink-soft:#5a4f73;

  --purple:  #7b3ff0;
  --pink:    #ff4fa3;
  --sky:     #34c4ff;
  --yellow:  #ffce3a;
  --mint:    #5fd6a0;
  --coral:   #ff7a59;

  --line: 3.5px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);

  --display: 'Fredoka', system-ui, sans-serif;
  --hand:    'Shantell Sans', 'Comic Sans MS', cursive;
  --body:    'Fredoka', system-ui, sans-serif;

  --maxw: 1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  font-family:var(--body); color:var(--ink); line-height:1.55;
  background:var(--cream); overflow-x:hidden; position:relative; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--pink); color:#fff; }

/* ===== background ===== */
.sky{
  position:fixed; inset:0; z-index:-6; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 80% -8%, #ffe9a8 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 6%, #cdebff 0%, transparent 55%),
    linear-gradient(180deg, #d7f0ff 0%, #fbe9ff 32%, var(--cream) 70%);
}
.clouds{ position:fixed; inset:0; z-index:-5; pointer-events:none; }
.cloud{ position:absolute; background:#fff; border-radius:60px; opacity:.85;
  box-shadow:0 10px 0 rgba(36,26,58,.05); }
.cloud::before, .cloud::after{ content:""; position:absolute; background:#fff; border-radius:50%; }
.c1{ width:140px; height:42px; top:14%; left:-160px; animation:drift 38s linear infinite; }
.c2{ width:100px; height:32px; top:34%; left:-160px; animation:drift 52s linear infinite 6s; opacity:.6; }
.c3{ width:170px; height:50px; top:60%; left:-220px; animation:drift 64s linear infinite 14s; opacity:.5; }
.cloud::before{ width:56px; height:56px; top:-22px; left:18px; }
.cloud::after{ width:42px; height:42px; top:-16px; right:20px; }
@keyframes drift{ to{ transform:translateX(calc(100vw + 260px)); } }

.doodle-field{ position:fixed; inset:0; z-index:-4; pointer-events:none; }
.dd{ position:absolute; }
.dd path{ fill:currentColor; }
.dd-squig path{ fill:none; }
.dd-star1{ width:30px; color:var(--yellow); top:18%; left:10%; animation:spin 10s linear infinite; }
.dd-star2{ width:22px; color:var(--pink); top:70%; left:84%; animation:spin 14s linear infinite reverse; }
.dd-spark1{ width:26px; color:var(--sky); top:42%; left:6%; animation:twinkle 3s ease-in-out infinite; }
.dd-spark2{ width:20px; color:var(--purple); top:80%; left:14%; animation:twinkle 4s ease-in-out infinite .6s; }
.dd-squig{ width:90px; color:var(--mint); top:26%; right:8%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes twinkle{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.25); opacity:1; } }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.2px;
  color:var(--ink); background:#fff; cursor:pointer; white-space:nowrap;
  border:var(--line) solid var(--ink); border-radius:999px; padding:.7em 1.3em;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn--lg{ font-size:1.2rem; padding:.85em 1.6em; }
.btn--pink{ background:var(--pink); color:#fff; }
.btn--yellow{ background:var(--yellow); }
.btn--purple{ background:var(--purple); color:#fff; }
.btn--ghost2{ background:#fff; }

.wobble{ animation:wobble 2.6s ease-in-out infinite; }
.wobble:hover{ animation:none; }
@keyframes wobble{ 0%,100%{ transform:rotate(-1.5deg); } 50%{ transform:rotate(1.5deg); } }

/* ===== nav ===== */
.nav{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:24px;
  padding:12px clamp(16px,4vw,40px);
  background:rgba(255,253,247,.8); backdrop-filter:blur(8px);
  border-bottom:var(--line) solid var(--ink);
}
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--pink); }
.nav__name{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.5px; }
.nav__links{ display:flex; gap:24px; margin-left:auto; }
.nav__links a{ font-weight:600; color:var(--ink-soft); position:relative; transition:color .2s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:3px; border-radius:3px; background:var(--pink); transform:scaleX(0); transition:transform .2s; transform-origin:left; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:12px; margin-left:24px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span{ width:26px; height:3px; background:var(--ink); border-radius:3px; transition:.25s; }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ opacity:0; }
.nav.open .nav__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ===== layout ===== */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,104px) clamp(16px,4vw,40px); position:relative; z-index:1; }
.section__head{ text-align:center; max-width:720px; margin:0 auto clamp(34px,5vw,58px); }
.section__title{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5.5vw,3.6rem); line-height:1.02; letter-spacing:-.5px; }
.section__sub{ font-family:var(--hand); font-size:1.2rem; color:var(--ink-soft); margin-top:10px; }
.hl{ position:relative; color:var(--purple); white-space:nowrap; }
.hl::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:6%; height:36%; background:var(--yellow); z-index:-1; border-radius:6px; transform:rotate(-1deg); }

/* ===== hero ===== */
.hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(34px,6vw,72px) clamp(16px,4vw,40px) 24px; position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,56px); align-items:center; }
.sticker-badge{
  display:inline-block; font-family:var(--hand); font-weight:700; font-size:1rem;
  background:var(--mint); color:var(--ink); border:var(--line) solid var(--ink);
  border-radius:999px; padding:.3em 1.1em; box-shadow:var(--shadow-sm);
  transform:rotate(-3deg); margin-bottom:20px;
}
.hero__title{ position:relative; display:inline-block; margin-bottom:6px; }
.hero__title .word{
  font-family:var(--display); font-weight:700; font-size:clamp(4.2rem,13vw,9rem); line-height:.9;
  letter-spacing:-2px; color:#fff;
  -webkit-text-stroke:var(--line) var(--ink);
  text-shadow:7px 7px 0 var(--pink), 7px 7px 0 var(--ink);
  display:inline-block; animation:bobble 4s ease-in-out infinite;
}
@keyframes bobble{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-8px) rotate(1deg); } }
.title-underline{ position:absolute; left:0; right:0; bottom:-18px; width:100%; height:24px; color:var(--sky); }
.title-underline path{ stroke:currentColor; }
.hero__tag{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--ink-soft); margin:26px 0 28px; max-width:34ch; }
.hero__tag b{ color:var(--pink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.contract{ display:flex; align-items:center; gap:10px; margin-top:26px; max-width:540px;
  background:#fff; border:var(--line) solid var(--ink); border-radius:14px; padding:7px 7px 7px 14px; box-shadow:var(--shadow-sm); }
.contract__tag{ font-family:var(--display); font-weight:700; font-size:.85rem; background:var(--ink); color:#fff; border-radius:7px; padding:.15em .55em; }
.contract__addr{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; color:var(--ink); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contract__copy{ font-family:var(--display); font-weight:700; font-size:.9rem; background:var(--sky); color:var(--ink); border:3px solid var(--ink); border-radius:9px; padding:.4em .9em; cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .1s; }
.contract__copy:hover{ transform:translate(-1px,-1px); }
.contract__copy.copied{ background:var(--mint); }

/* annotated cat */
.hero-cat{ position:relative; margin:0; display:grid; place-items:center; padding:34px; }
.cat-frame{
  width:min(380px,74vw); aspect-ratio:1; background:#fff; padding:12px;
  border:var(--line) solid var(--ink); border-radius:28px; box-shadow:var(--shadow);
  transform:rotate(-2deg); animation:catfloat 5.5s ease-in-out infinite;
}
.cat-frame img{ width:100%; height:100%; object-fit:cover; border-radius:18px; }
@keyframes catfloat{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-2deg) translateY(-14px); } }
.anno{
  position:absolute; font-family:var(--hand); font-weight:700; font-size:1.05rem; color:var(--ink);
  background:#fff; border:3px solid var(--ink); border-radius:12px; padding:.2em .7em; box-shadow:3px 3px 0 var(--ink);
  white-space:nowrap; opacity:0; transform:scale(.6);
}
.anno.show{ animation:annopop .5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes annopop{ to{ opacity:1; transform:scale(1); } }
.anno-arrow{ position:absolute; width:38px; height:38px; color:var(--ink); }
.anno-arrow path{ stroke:currentColor; fill:none; }
.anno-arrow.flip{ }
.anno--1{ top:6%; left:-4%; background:var(--yellow); }
.anno--1 .anno-arrow{ right:-30px; top:60%; }
.anno--2{ top:14%; right:-6%; background:var(--sky); }
.anno--2 .anno-arrow{ left:-30px; top:70%; }
.anno--3{ bottom:18%; left:-8%; background:var(--pink); color:#fff; }
.anno--3 .anno-arrow{ color:var(--ink); right:-28px; top:-26px; }
.anno--4{ bottom:8%; right:-8%; background:var(--purple); color:#fff; }
.anno--4 .anno-arrow{ color:var(--ink); left:-28px; top:-26px; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:clamp(40px,6vw,64px); }
.stat{ background:#fff; border:var(--line) solid var(--ink); border-radius:16px; padding:14px 12px; box-shadow:var(--shadow-sm); text-align:center; }
.stat__k{ display:block; font-family:var(--hand); font-size:.85rem; color:var(--ink-soft); }
.stat__v{ display:block; font-family:var(--display); font-weight:700; font-size:1.5rem; margin-top:2px; }
.stat__v.up{ color:#19b562; }
.stat__v.down{ color:var(--pink); }
.stats__note{ text-align:center; font-family:var(--hand); color:var(--ink-soft); margin-top:12px; font-size:.95rem; }
.stats__note::before{ content:"●"; color:#19b562; margin-right:7px; animation:blink 1.5s infinite; }
@keyframes blink{ 50%{ opacity:.3; } }

/* ===== ribbon ===== */
.ribbon{ overflow:hidden; background:var(--purple); border-top:var(--line) solid var(--ink); border-bottom:var(--line) solid var(--ink); padding:14px 0; transform:rotate(-1.4deg) scale(1.04); margin:46px 0; }
.ribbon__track{ display:flex; gap:26px; width:max-content; animation:scroll 24s linear infinite; align-items:center; font-family:var(--display); font-weight:700; font-size:1.3rem; color:#fff; }
.ribbon__track i{ color:var(--yellow); font-style:normal; }
.ribbon__track span{ white-space:nowrap; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ===== story ===== */
.story{ text-align:center; }
.moods{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:34px; }
.mood{ font-family:var(--display); font-weight:700; font-size:clamp(1.1rem,3vw,1.7rem); color:#fff; border:var(--line) solid var(--ink); border-radius:14px; padding:.25em .8em; box-shadow:var(--shadow-sm); }
.m1{ background:var(--yellow); color:var(--ink); transform:rotate(-3deg); }
.m2{ background:var(--sky); color:var(--ink); transform:rotate(2deg); }
.m3{ background:var(--pink); transform:rotate(-2deg); }
.m4{ background:var(--purple); transform:rotate(3deg); }
.story__lede{ max-width:62ch; margin:0 auto; font-size:1.2rem; color:var(--ink-soft); }
.story__lede b{ color:var(--ink); background:var(--yellow); padding:0 .25em; border-radius:5px; }

/* ===== caption wall ===== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.meme-card{ margin:0; }
.meme-card__img{ position:relative; background:#000; border:var(--line) solid var(--ink); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:1; }
.meme-card__img img{ width:100%; height:100%; object-fit:cover; }
.cap{ position:absolute; left:0; right:0; text-align:center; font-family:'Anton',Impact,sans-serif; text-transform:uppercase; color:#fff; padding:0 10px;
  font-size:clamp(1rem,2.4vw,1.5rem); line-height:1.05; letter-spacing:.5px;
  -webkit-text-stroke:1.5px #000; text-shadow:2px 2px 0 #000; }
.cap-top{ top:10px; }
.cap-bot{ bottom:10px; }
.tilt-l{ transform:rotate(-2deg); }
.tilt-r{ transform:rotate(2deg); }
.meme-card:hover{ transform:rotate(0) scale(1.02); transition:transform .25s; }
.wall__cta{ display:flex; justify-content:center; margin-top:44px; }

/* ===== meme studio (simple) ===== */
.meme{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:26px; align-items:start; }
.meme__stage{ position:sticky; top:86px; }
#meme-canvas{ width:100%; height:auto; border:var(--line) solid var(--ink); border-radius:20px; background:#fff; box-shadow:var(--shadow); touch-action:none; cursor:grab; }
#meme-canvas:active{ cursor:grabbing; }
.meme__hint{ font-family:var(--hand); font-size:.9rem; color:var(--ink-soft); text-align:center; margin-top:12px; }

.meme__panel{ background:var(--paper); border:var(--line) solid var(--ink); border-radius:20px; padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px; }

.field{ display:flex; flex-direction:column; gap:7px; }
.field span{ font-family:var(--display); font-weight:700; font-size:.92rem; }
.field input{ width:100%; font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:13px; padding:13px 15px; box-shadow:2px 2px 0 var(--ink); }
.field input::placeholder{ color:#bcb2cf; }
.field input:focus{ outline:0; box-shadow:0 0 0 3px var(--yellow); }

.seg{ display:flex; flex-direction:column; gap:10px; }
.seg__label{ font-family:var(--hand); font-weight:700; font-size:.92rem; color:var(--ink-soft); }
.seg__label i{ font-style:normal; font-weight:500; opacity:.75; }
.seg__btns{ display:flex; gap:10px; flex-wrap:wrap; }

.chipbtn{ font-family:var(--display); font-weight:600; font-size:.98rem; background:#fff; color:var(--ink); border:3px solid var(--ink); border-radius:13px; padding:.6em 1.05em; cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .1s, background .2s; }
.chipbtn:hover{ transform:translate(-1px,-1px); }
.chipbtn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.chipbtn.upload{ display:inline-flex; align-items:center; }

/* horizontal swipe strips — finger friendly */
.scroller{ display:flex; gap:9px; overflow-x:auto; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-snap-type:x proximity; }
.scroller::-webkit-scrollbar{ height:7px; }
.scroller::-webkit-scrollbar-track{ background:transparent; }
.scroller::-webkit-scrollbar-thumb{ background:#decff3; border-radius:7px; }

.stickers button{ flex:0 0 auto; scroll-snap-align:start; font-size:1.6rem; line-height:1; width:52px; height:52px; background:#fff; border:3px solid var(--ink); border-radius:14px; cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .1s; }
.stickers button:hover{ transform:translateY(-2px) scale(1.06); }
.stickers button:active{ transform:scale(.92); }
.stickers .cat-chip{ flex:0 0 auto; width:auto; padding:0 15px; height:52px; display:inline-flex; align-items:center; gap:5px; font-family:var(--display); font-weight:700; font-size:1rem; background:var(--yellow); cursor:pointer; }
.stickers .obj-up{ background:var(--sky); }

.bgtray button{ flex:0 0 auto; scroll-snap-align:start; width:48px; height:48px; border-radius:50%; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer; padding:0; background-size:cover; background-position:center; transition:transform .1s; }
.bgtray button:hover{ transform:translateY(-2px) scale(1.05); }
.bgtray button.is-on{ outline:3px solid var(--yellow); outline-offset:2px; }
.bgtray .bg-none{ background-image:repeating-conic-gradient(#d7d0e6 0% 25%, #fff 0% 50%); background-size:16px 16px; }

.presets button{ flex:0 0 auto; scroll-snap-align:start; font-family:var(--hand); font-weight:600; font-size:.92rem; white-space:nowrap; background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:.5em 1.05em; cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:background .2s,transform .1s; }
.presets button:hover{ background:var(--yellow); transform:translateY(-1px); }
.presets button.shuffle{ background:var(--sky); }

.meme__actions{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:4px; }
.meme__actions .btn{ width:100%; font-size:1rem; padding:.78em 1em; }

/* ===== steps ===== */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ position:relative; background:#fff; border:var(--line) solid var(--ink); border-radius:18px; padding:30px 20px 22px; box-shadow:var(--shadow); transition:transform .2s; }
.step:hover{ transform:translateY(-6px) rotate(-1deg); }
.step__n{ position:absolute; top:-20px; left:20px; width:44px; height:44px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.4rem; color:#fff; background:var(--purple); border:var(--line) solid var(--ink); border-radius:50%; box-shadow:3px 3px 0 var(--ink); }
.step:nth-child(2) .step__n{ background:var(--pink); }
.step:nth-child(3) .step__n{ background:var(--sky); }
.step:nth-child(4) .step__n{ background:var(--mint); }
.step h3{ font-family:var(--display); font-weight:700; font-size:1.3rem; margin:6px 0 6px; }
.step p{ color:var(--ink-soft); font-size:.96rem; }
.step a{ color:var(--purple); font-weight:700; text-decoration:underline; }
.buy__cta{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:46px; }

/* ===== tokenomics ===== */
.tok__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tok__card{ text-align:center; background:#fff; border:var(--line) solid var(--ink); border-radius:18px; padding:32px 16px; box-shadow:var(--shadow); transition:transform .2s; }
.tok__card:nth-child(1){ background:var(--yellow); }
.tok__card:nth-child(2){ background:var(--sky); }
.tok__card:nth-child(3){ background:var(--mint); }
.tok__card:nth-child(4){ background:var(--pink); }
.tok__card:hover{ transform:translateY(-6px) scale(1.02) rotate(0); }
.tok__v{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,4.5vw,3.4rem); line-height:1; color:var(--ink); }
.tok__card:nth-child(4) .tok__v{ color:#fff; }
.tok__k{ display:block; font-family:var(--hand); font-weight:600; font-size:.95rem; margin-top:8px; color:var(--ink); }
.tok__card:nth-child(4) .tok__k{ color:#fff; }

/* ===== chart ===== */
.chart__frame{ position:relative; width:100%; aspect-ratio:16/9; min-height:440px; border:var(--line) solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.chart__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.chart__cta{ display:flex; justify-content:center; margin-top:22px; }

/* ===== colony ===== */
.links{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.link{ display:flex; flex-direction:column; gap:5px; align-items:flex-start; background:#fff; border:var(--line) solid var(--ink); border-radius:18px; padding:26px; box-shadow:var(--shadow); transition:transform .2s; }
.link:hover{ transform:translateY(-6px) rotate(0); }
.link:nth-child(1):hover{ background:var(--sky); }
.link:nth-child(2):hover{ background:var(--yellow); }
.link:nth-child(3):hover{ background:var(--pink); }
.link__ico{ font-size:1.9rem; }
.link__t{ font-family:var(--display); font-weight:700; font-size:1.3rem; }
.link__s{ font-family:var(--hand); color:var(--ink-soft); }

/* ===== footer ===== */
.footer{ max-width:var(--maxw); margin:0 auto; padding:54px clamp(16px,4vw,40px) 46px; text-align:center; position:relative; z-index:1; }
.footer__top{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; }
.footer__cat{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--pink); }
.footer__name{ font-family:var(--display); font-weight:700; font-size:1.7rem; }
.footer__disc{ max-width:660px; margin:0 auto; font-size:.84rem; color:var(--ink-soft); line-height:1.7; }
.footer__copy{ font-family:var(--hand); color:var(--ink-soft); margin-top:16px; }

/* ===== reveal & motion ===== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.pop-1{ transition-delay:.05s; } .pop-2{ transition-delay:.13s; } .pop-3{ transition-delay:.21s; } .pop-4{ transition-delay:.29s; }

/* ===== responsive ===== */
@media (max-width:960px){
  .nav__links{ display:none; }
  .nav.open .nav__links{ display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:var(--line) solid var(--ink); padding:6px 0; }
  .nav.open .nav__links a{ padding:13px 28px; }
  .nav__burger{ display:flex; }
  .nav__right{ margin-left:auto; }            /* push buy + burger to the far right */
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; }
  /* shrink-to-fit so annotations always hug the cat and never leave the page */
  .hero-cat{ order:1; width:-moz-fit-content; width:fit-content; max-width:100%; margin-inline:auto; padding:clamp(24px,7vw,40px); }
  .sticker-badge,.hero__tag,.contract{ margin-left:auto; margin-right:auto; }
  .hero__cta{ justify-content:center; }
  .hero__title{ display:block; }
  .anno{ font-size:.9rem; }
  .anno--1{ top:2%; left:0; } .anno--1 .anno-arrow{ right:-24px; top:55%; }
  .anno--2{ top:11%; right:0; } .anno--2 .anno-arrow{ left:-24px; top:65%; }
  .anno--3{ bottom:20%; left:0; } .anno--3 .anno-arrow{ right:-22px; top:-22px; }
  .anno--4{ bottom:7%; right:0; } .anno--4 .anno-arrow{ left:-22px; top:-22px; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .meme{ grid-template-columns:1fr; }
  .meme__stage{ position:static; }
  .cards{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:30px 18px; }
  .tok__grid{ grid-template-columns:repeat(2,1fr); }
  .links{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .stickers{ grid-template-columns:repeat(6,1fr); }
  .chart__frame{ min-height:520px; }
  .hero-cat{ padding:clamp(18px,6vw,30px); }
  .anno{ font-size:.74rem; padding:.12em .5em; }
  .anno-arrow{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}