/* =====================================================================
   BegFi — cardboard & marker.  hand-tuned, no framework.
   palette lives in :root. everything tilts a degree or two on purpose.
   ===================================================================== */
:root{
  --kraft:      #cdb088;   /* cardboard base            */
  --kraft-dk:   #b8975f;
  --kraft-lt:   #ddc7a1;
  --paper:      #f4ecdc;   /* the lighter sign paper    */
  --ink:        #221d18;   /* marker black              */
  --ink-soft:   #4a4034;
  --tape:       #efe6c8cc;
  --gold:       #f2b134;   /* coin                      */
  --gold-dk:    #d18f16;
  --teal:       #3f9c95;   /* squidward                 */
  --teal-dk:    #2c716c;
  --red:        #d1462f;   /* PLEASE red                */
  --shadow:     rgba(40,30,15,.22);
  --maxw: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -8%, #d8be95 0%, transparent 60%),
    radial-gradient(900px 600px at 0% 100%, #c2a067 0%, transparent 55%),
    var(--kraft);
  background-attachment: fixed;
  line-height:1.55;
  overflow-x:hidden;
}
/* corrugated cardboard fluting, faint */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, #00000008 0 2px, transparent 2px 9px);
  mix-blend-mode:multiply;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,section,header,footer{position:relative; z-index:2}

::selection{background:var(--red); color:#fff}
a{color:var(--teal-dk); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--red)}
img,object,svg{max-width:100%}

/* ---------- shared bits ---------- */
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif; line-height:1.02; margin:0}
.marker{font-family:'Permanent Marker',cursive; font-weight:400}
.hl{ background:linear-gradient(transparent 60%, #f2b13455 60%); padding:0 .1em}
.hl2{color:var(--red); font-style:italic}

.section-head{
  font-size:clamp(2rem,5vw,3.4rem); font-weight:800; letter-spacing:-.02em;
  margin-bottom:.5em; transform:rotate(-1deg);
}
.section-head .marker{
  display:block; font-size:.42em; color:var(--red); letter-spacing:0;
  transform:rotate(1.5deg); margin-bottom:.15em;
}
.section-lede{font-size:1.12rem; max-width:56ch; color:var(--ink-soft); margin:.2em 0 1.4em}

/* buttons -------------------------------------------------------------- */
.btn{
  --bd:2.5px;
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1rem;
  padding:.7em 1.15em; border:var(--bd) solid var(--ink); border-radius:14px 12px 15px 11px;
  background:var(--paper); color:var(--ink); text-decoration:none;
  box-shadow:3px 4px 0 var(--ink); transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:5px 6px 0 var(--ink); color:var(--ink)}
.btn:active{transform:translate(2px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn-buy{background:var(--gold); border-radius:13px 11px 14px 12px}
.btn-buy:hover{background:#ffc451}
.btn.big{font-size:1.18rem; padding:.85em 1.5em}
.btn-ghost{background:var(--paper)}
.btn-ghost .ca-value{font-family:ui-monospace,monospace; font-size:.8em; opacity:.7; padding:.1em .4em; background:#0000000d; border-radius:6px}
.btn.copied{background:var(--teal); color:#fff}

/* masking tape --------------------------------------------------------- */
.tape{position:absolute; width:78px; height:26px; background:var(--tape);
  box-shadow:0 1px 3px #0002; z-index:5;
  background-image:repeating-linear-gradient(90deg,#ffffff22 0 6px,transparent 6px 12px);}
.tape.tl{top:-13px; left:16px; transform:rotate(-8deg)}
.tape.tr{top:-13px; right:16px; transform:rotate(7deg)}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  background:linear-gradient(#d7bd93, #cdb088);
  border-bottom:3px solid var(--ink);
  box-shadow:0 3px 0 #0000001a, 0 8px 20px -12px #0006;
}
.brand{display:flex; align-items:center; gap:.4rem; text-decoration:none; position:relative; padding-right:.4rem}
.brand-coin{
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe08a, var(--gold) 60%, var(--gold-dk));
  border:2.5px solid var(--ink); color:#8a5a0f; font-weight:800; font-size:1.05rem;
  box-shadow:2px 2px 0 var(--ink);
}
.brand-name{font-family:'Permanent Marker',cursive; font-size:1.6rem; color:var(--ink)}
.brand-tape{position:absolute; inset:auto -8px -6px 30%; width:40px; height:16px; background:var(--tape); transform:rotate(-6deg)}
.nav-links{display:flex; gap:1.15rem; margin:0 auto; flex-wrap:wrap}
.nav-links a{
  color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.98rem; position:relative;
}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2.5px;
  background:var(--red); transition:right .2s ease; border-radius:2px}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-buy{padding:.5em .95em; box-shadow:2px 3px 0 var(--ink)}
.nav-toggle{display:none; font-size:1.5rem; background:none; border:none; cursor:pointer; color:var(--ink)}

/* ---------- HERO ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2rem) 1rem;
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.eyebrow{font-family:'Caveat',cursive; font-size:1.5rem; color:var(--teal-dk); transform:rotate(-2deg); margin:0 0 .2em}
.hero-title{font-size:clamp(4.5rem,15vw,9.5rem); font-weight:800; letter-spacing:-.04em; line-height:.85; margin:.1em 0}
.hero-title .word{display:inline-block}
.hero-title .w1{color:var(--ink); transform:rotate(-3deg)}
.hero-title .w2{color:var(--teal); transform:rotate(2deg); margin-left:-.05em;
  text-shadow:3px 3px 0 var(--ink)}
.hero-sub{font-size:clamp(1.05rem,2vw,1.3rem); max-width:44ch; color:var(--ink-soft); margin:.3em 0 .4em}
.hero-hand{font-family:'Caveat',cursive; font-weight:700; font-size:1.8rem; color:var(--red); transform:rotate(-1.5deg); margin:.2em 0 1em}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:1.6rem}
.ca-label{white-space:nowrap}
.hero-stats{list-style:none; display:flex; gap:1.6rem; padding:0; margin:0; flex-wrap:wrap}
.hero-stats li{display:flex; flex-direction:column}
.hero-stats b{font-size:1.7rem; font-weight:800; line-height:1}
.hero-stats .pct{font-size:1rem}
.hero-stats span{font-size:.82rem; color:var(--ink-soft); max-width:16ch}

.hero-art{position:relative; display:grid; place-items:center; min-height:340px}
/* real begging-Squidward photo, taped up like a snapshot on the cardboard */
.hero-photo{
  position:relative; margin:0; background:#fffdf7; padding:12px 12px 0;
  border:1px solid #0000001a; border-radius:3px;
  box-shadow:7px 11px 20px var(--shadow); transform:rotate(-3deg);
  width:min(86%,380px); animation:photosway 7s ease-in-out infinite;
}
.hero-photo img{display:block; width:100%; height:auto; border-radius:1px}
.hero-photo figcaption{
  font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; text-align:center;
  color:var(--ink); padding:.3em 0 .5em; transform:rotate(.6deg);
}
.hero-photo:hover{animation-play-state:paused; transform:rotate(0) scale(1.03); transition:transform .2s}
@keyframes photosway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1.4deg)}}
.mascot{width:min(100%,420px); filter:drop-shadow(6px 10px 12px var(--shadow))}
.hero-sign{
  position:absolute; top:2%; left:-2%; z-index:6;
  background:var(--paper); border:2.5px solid var(--ink); padding:.5rem .9rem;
  transform:rotate(-9deg); box-shadow:4px 5px 0 var(--ink);
  font-family:'Permanent Marker',cursive; text-align:center; line-height:1.05; color:var(--ink);
  border-radius:6px 8px 5px 9px;
}
.hero-sign span{display:block}
.hero-sign span:last-child{color:var(--red)}
.coin-cursor{position:absolute; font-size:2rem; pointer-events:none; opacity:0; z-index:7}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  background:var(--teal); color:var(--paper); margin:2.5rem 0; transform:rotate(-.6deg) scale(1.02);
}
.marquee-track{display:inline-flex; gap:1.4rem; align-items:center; white-space:nowrap;
  padding:.55rem 0; font-family:'Permanent Marker',cursive; font-size:1.3rem; letter-spacing:.02em;
  animation:scroll 26s linear infinite; will-change:transform}
.marquee-track .dot{color:var(--gold)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- generic section width ---------- */
.pitch,.board,.claim,.cup,.grind,.faq,.memewall{max-width:var(--maxw); margin:0 auto; padding:3.5rem clamp(1rem,4vw,2rem)}

/* ---------- PITCH cards ---------- */
.cards.three{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1rem}
.card{
  position:relative; background:var(--paper); border:2.5px solid var(--ink); border-radius:10px 14px 9px 13px;
  padding:1.6rem 1.3rem 1.4rem; box-shadow:5px 7px 0 var(--shadow);
}
.tilt-a{transform:rotate(-1.4deg)} .tilt-b{transform:rotate(.8deg); margin-top:.6rem} .tilt-c{transform:rotate(-.7deg)}
.card:hover{transform:rotate(0) translateY(-3px); transition:transform .15s ease}
.card-emoji{font-size:2.6rem; line-height:1; margin-bottom:.3rem}
.card h3{font-size:1.4rem; font-weight:800; margin-bottom:.25em}
.card p{margin:0; color:var(--ink-soft)}
.scribble-note{font-family:'Caveat',cursive; font-size:1.35rem; color:var(--teal-dk); transform:rotate(-1deg); margin-top:1.6rem; text-align:center}

/* ---------- BEG BOARD ---------- */
.board-head{margin-bottom:1.5rem}
.board-filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem}
.chip{font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer;
  background:var(--kraft-lt); border:2px solid var(--ink); border-radius:20px; padding:.35em .95em;
  box-shadow:2px 2px 0 var(--ink); transition:transform .08s}
.chip:hover{transform:translateY(-1px)}
.chip.active{background:var(--ink); color:var(--paper)}

.beg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem}
.board-empty{grid-column:1/-1; text-align:center; font-family:'Caveat',cursive; font-size:1.5rem; color:var(--ink-soft); padding:2rem}

.beg{
  position:relative; background:var(--paper); border:2.5px solid var(--ink);
  border-radius:8px 12px 8px 12px; padding:1.3rem 1.25rem 1.35rem;
  box-shadow:5px 7px 0 var(--shadow); display:flex; flex-direction:column;
}
.beg:nth-child(3n+1){transform:rotate(-1deg)} .beg:nth-child(3n+2){transform:rotate(.7deg)} .beg:nth-child(3n){transform:rotate(-.4deg)}
.beg:hover{transform:rotate(0) translateY(-3px); transition:transform .15s; box-shadow:6px 9px 0 var(--shadow)}
.beg-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; margin-bottom:.5rem}
.beg-reward{font-family:'Permanent Marker',cursive; color:var(--red); font-size:1.25rem; line-height:1.05}
.beg-status{flex:none; font-family:'Permanent Marker',cursive; font-size:.72rem; letter-spacing:.03em;
  padding:.25em .6em; border:2px solid var(--ink); border-radius:5px; transform:rotate(3deg); white-space:nowrap}
.beg-status.live{background:var(--red); color:#fff; animation:blink 1.6s steps(1) infinite}
.beg-status.queued{background:var(--kraft-lt)}
.beg-status.paid{background:var(--teal); color:#fff; transform:rotate(-4deg)}
@keyframes blink{50%{opacity:.55}}
.beg h3{font-size:1.35rem; font-weight:800; margin:.1em 0 .3em}
.beg-blurb{color:var(--ink-soft); margin:0 0 .8rem; font-size:.98rem}
.beg-reqs{list-style:none; padding:0; margin:0 0 .9rem; display:flex; flex-direction:column; gap:.4rem}
.beg-reqs li{position:relative; padding-left:1.6rem; font-size:.92rem; color:var(--ink)}
.beg-reqs li::before{content:"✔"; position:absolute; left:0; top:-1px; color:var(--teal-dk); font-weight:800}
.beg-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.4rem; border-top:2px dashed #00000022}
.beg-id{font-family:ui-monospace,monospace; font-size:.75rem; color:var(--ink-soft)}
.beg-claim{font-weight:700; font-size:.9rem; padding:.4em .8em}
.beg-pin{position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:16px; height:16px;
  background:radial-gradient(circle at 35% 30%,#ff8a7a,var(--red)); border:2px solid var(--ink); border-radius:50%; box-shadow:1px 2px 2px #0003; z-index:6}

/* ---------- CLAIM steps ---------- */
.steps{list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:1rem; max-width:760px}
.steps li{display:flex; gap:1rem; align-items:flex-start; background:var(--paper); border:2.5px solid var(--ink);
  border-radius:10px; padding:1rem 1.2rem; box-shadow:4px 5px 0 var(--shadow)}
.steps li:nth-child(even){transform:rotate(.5deg)} .steps li:nth-child(odd){transform:rotate(-.5deg)}
.step-n{flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem;
  background:var(--teal); color:#fff; border:2.5px solid var(--ink); border-radius:50%;
  font-family:'Permanent Marker',cursive; font-size:1.3rem; box-shadow:2px 2px 0 var(--ink)}
.steps h3{font-size:1.2rem; font-weight:800; margin-bottom:.1em}
.steps p{margin:0; color:var(--ink-soft)}

/* ---------- THE CUP ---------- */
.cup-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; align-items:center; margin-top:.5rem}
.cup-visual{display:grid; place-items:center}
.cup-body{position:relative; width:190px; height:200px; margin-top:2rem;
  background:linear-gradient(#f4ede0,#d9cbb0); border:3px solid var(--ink);
  clip-path:polygon(12% 0,88% 0,78% 100%,22% 100%);
  box-shadow:6px 8px 0 var(--shadow); display:grid; place-items:center}
.cup-body::before{content:""; position:absolute; top:-16px; left:-6px; right:-6px; height:30px;
  background:#efe6cf; border:3px solid var(--ink); border-radius:50%}
.cup-face{font-family:'Permanent Marker',cursive; text-align:center; color:var(--teal-dk); font-size:1.3rem; z-index:2; line-height:1.1}
.cup-coins{position:absolute; top:-26px; display:flex; gap:-6px; z-index:3}
.cup-coins span{font-size:1.5rem; margin:0 -4px; animation:jingle 3s ease-in-out infinite}
.cup-coins span:nth-child(2){animation-delay:.3s} .cup-coins span:nth-child(3){animation-delay:.6s}
.cup-coins span:nth-child(4){animation-delay:.9s} .cup-coins span:nth-child(5){animation-delay:1.2s}
@keyframes jingle{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.cup-list{list-style:none; padding:0; margin:0; display:grid; gap:.8rem}
.cup-list li{position:relative; padding-left:2rem; font-size:1.05rem; color:var(--ink)}
.cup-list li::before{content:"🪙"; position:absolute; left:0; top:0}
.cup-list b{color:var(--red)}
.fine{font-size:.85rem; color:var(--ink-soft); margin-top:1.4rem; font-style:italic}

/* ---------- THE GRIND (roadmap) ---------- */
.roadmap{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:.5rem}
.phase{position:relative; background:var(--paper); border:2.5px solid var(--ink); border-radius:10px;
  padding:1.4rem 1.2rem 1.2rem; box-shadow:5px 7px 0 var(--shadow)}
.phase:nth-child(odd){transform:rotate(-1deg)} .phase:nth-child(even){transform:rotate(1deg)}
.phase h3{font-size:1.15rem; font-weight:800; margin:.4em 0 .3em}
.phase p{margin:0; color:var(--ink-soft); font-size:.95rem}
.stamp{font-family:'Permanent Marker',cursive; font-size:.85rem; padding:.2em .6em; border:2px solid var(--ink);
  border-radius:4px; display:inline-block; transform:rotate(-3deg); background:var(--kraft-lt)}
.phase.done .stamp{background:var(--teal); color:#fff; border-color:var(--teal-dk)}
.phase.done{opacity:.92}
.phase.now .stamp{background:var(--red); color:#fff}
.phase.now{outline:3px dashed var(--red); outline-offset:5px}

/* ---------- FAQ ---------- */
.faq-list{display:grid; gap:.8rem; max-width:820px}
.faq details{background:var(--paper); border:2.5px solid var(--ink); border-radius:10px; box-shadow:3px 4px 0 var(--shadow); overflow:hidden}
.faq summary{cursor:pointer; list-style:none; padding:1rem 1.2rem; font-weight:700; font-size:1.08rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq .caret{font-family:'Permanent Marker',cursive; color:var(--red); font-size:1.4rem; transition:transform .2s}
.faq details[open] .caret{transform:rotate(45deg)}
.faq details p{margin:0; padding:0 1.2rem 1.1rem; color:var(--ink-soft)}

/* ---------- FINAL CTA ---------- */
.finalcta{display:grid; place-items:center; padding:3rem 1rem 4rem}
.cta-inner{display:flex; gap:clamp(1.5rem,5vw,3.5rem); align-items:center; justify-content:center; flex-wrap:wrap; max-width:var(--maxw)}
.cta-photo{position:relative; margin:0; background:#fffdf7; padding:10px 10px 0; border:1px solid #0000001a;
  border-radius:3px; box-shadow:6px 10px 18px var(--shadow); transform:rotate(4deg); width:min(72vw,280px)}
.cta-photo img{display:block; width:100%; height:auto}
.cta-photo figcaption{font-family:'Caveat',cursive; font-weight:700; font-size:1.35rem; text-align:center; color:var(--ink); padding:.25em 0 .45em}
.cta-photo:hover{transform:rotate(0) scale(1.03); transition:transform .2s}
@media(max-width:700px){.cta-photo{width:min(60vw,220px); transform:rotate(3deg)}}
.sign-big{position:relative; background:var(--paper); border:3px solid var(--ink); border-radius:8px;
  padding:2.4rem 2.8rem; text-align:center; box-shadow:8px 10px 0 var(--shadow); transform:rotate(-2deg); max-width:520px}
.sign-line1{font-family:'Permanent Marker',cursive; font-size:2rem; margin:0; letter-spacing:.02em}
.sign-line2{font-family:'Permanent Marker',cursive; font-size:4.5rem; color:var(--red); margin:0; line-height:.9}
.sign-line3{font-family:'Caveat',cursive; font-size:1.5rem; color:var(--ink-soft); margin:.2em 0 1.1em}

/* ---------- FOOTER ---------- */
.foot{border-top:3px solid var(--ink); background:linear-gradient(#c7a978,#bb9b64); margin-top:2rem; padding:2.6rem clamp(1rem,4vw,2rem) 2rem; position:relative}
.foot-cols{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2rem}
.foot-brand .brand-coin{display:inline-grid; vertical-align:middle; margin-right:.4rem}
.foot-brand b{font-family:'Permanent Marker',cursive; font-size:1.5rem}
.foot-brand p{color:var(--ink-soft); max-width:38ch; margin:.5em 0}
.foot-ca code{font-size:.85em; background:#0000000f; padding:.15em .45em; border-radius:5px}
.mini-copy{background:none; border:none; cursor:pointer; font-size:1rem}
.foot-links{display:flex; flex-direction:column; gap:.5rem}
.foot-links b{font-family:'Permanent Marker',cursive; font-size:1.1rem; margin-bottom:.2rem}
.foot-links a{color:var(--ink-soft); text-decoration:none; font-weight:600; width:fit-content}
.foot-links a:hover{color:var(--red)}
.foot-fine{max-width:var(--maxw); margin:2rem auto 0; font-size:.8rem; color:var(--ink-soft); border-top:2px dashed #00000022; padding-top:1rem; line-height:1.6}
.sticky-note{position:absolute; top:-24px; right:6%; width:120px; padding:.9rem .7rem;
  background:#fff59d; font-family:'Caveat',cursive; font-weight:700; font-size:1.15rem; color:#5a4d00;
  transform:rotate(4deg); box-shadow:3px 4px 8px #0003; line-height:1.15}
.sticky-note::before{content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-4deg); width:52px; height:18px; background:var(--tape)}
.sticky-note s{opacity:.6}

/* flying coin animation */
.fly-coin{position:fixed; font-size:1.6rem; z-index:60; pointer-events:none; opacity:0; left:0; top:0}
.fly-coin.go{animation:fly .9s cubic-bezier(.4,0,.6,1) forwards}
@keyframes fly{0%{opacity:1; transform:scale(1) rotate(0)}70%{opacity:1}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.4) rotate(320deg)}}

/* ---------- toast ---------- */
.toast{position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:var(--paper); padding:.7em 1.2em; border-radius:12px; z-index:70;
  font-weight:600; box-shadow:0 8px 24px #0006; transition:transform .3s cubic-bezier(.2,1.4,.4,1); border:2px solid var(--gold)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- MEME WALL ---------- */
.memewall .board-head{margin-bottom:1.6rem}
.memewall .board-head .btn{margin-top:.4rem}
.meme-grid{columns:4 220px; column-gap:1.4rem}
.meme-grid .board-empty{column-span:all; text-align:center; font-family:'Caveat',cursive; font-size:1.5rem; color:var(--ink-soft); padding:2rem}
.meme{
  position:relative; break-inside:avoid; margin:0 0 1.4rem; background:#fffdf7;
  padding:11px 11px 0; border:1px solid #0000001a; border-radius:3px;
  box-shadow:5px 8px 16px var(--shadow); display:inline-block; width:100%;
}
.meme:nth-child(4n+1){transform:rotate(-1.6deg)} .meme:nth-child(4n+2){transform:rotate(1.1deg)}
.meme:nth-child(4n+3){transform:rotate(-.6deg)} .meme:nth-child(4n){transform:rotate(1.7deg)}
.meme::before{content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:70px; height:22px; background:var(--tape); box-shadow:0 1px 3px #0002}
.meme:hover{transform:rotate(0) scale(1.03); transition:transform .18s; z-index:5; box-shadow:7px 11px 22px var(--shadow)}
.meme img{display:block; width:100%; height:auto; border-radius:1px; background:#eee}
.meme figcaption{padding:.4em 2px .55em}
.meme .m-cap{font-family:'Caveat',cursive; font-weight:700; font-size:1.25rem; color:var(--ink); line-height:1.15; word-break:break-word}
.meme .m-by{display:block; font-size:.78rem; color:var(--teal-dk); margin-top:.15em; font-weight:600}

/* ---------- MODAL (meme upload) ---------- */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1rem}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:#20180f99; backdrop-filter:blur(2px)}
.modal-card{position:relative; z-index:1; width:min(440px,100%); background:var(--paper);
  border:3px solid var(--ink); border-radius:12px; box-shadow:8px 12px 0 var(--shadow);
  padding:1.6rem 1.5rem; transform:rotate(-.6deg); max-height:92vh; overflow:auto}
.modal-x{position:absolute; top:.6rem; right:.7rem; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink); line-height:1}
.modal-card h3{font-size:2rem; margin-bottom:.1em}
.modal-sub{color:var(--ink-soft); font-size:.95rem; margin:.2em 0 1rem}
.file-drop{display:grid; place-items:center; text-align:center; min-height:150px; cursor:pointer;
  border:3px dashed #0000003d; border-radius:10px; padding:1rem; margin-bottom:.9rem; background:#00000006;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.35rem; color:var(--ink-soft); transition:border-color .15s,background .15s}
.file-drop small{font-family:'Bricolage Grotesque',sans-serif; font-weight:400; font-size:.8rem}
.file-drop.drag,.file-drop:hover{border-color:var(--teal); background:#3f9c9514; color:var(--teal-dk)}
.file-drop img{max-width:100%; max-height:260px; border-radius:6px; box-shadow:0 4px 12px #0003}
.modal-card input[type=text],.modal-card input:not([type=file]){
  width:100%; padding:.6em .7em; margin-bottom:.7rem; font:inherit; color:var(--ink);
  border:2.5px solid var(--ink); border-radius:9px; background:#fff}
#memeSubmit{width:100%; justify-content:center; margin-top:.2rem}
#memeSubmit[disabled]{opacity:.55; cursor:not-allowed}
.modal-msg{min-height:1.2em; margin:.7rem 0 0; font-weight:600; text-align:center}
.modal-msg.ok{color:var(--teal-dk)} .modal-msg.bad{color:var(--red)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-cta,.hero-stats{justify-content:center}
  .hero-sub,.hero-stats span{margin-left:auto; margin-right:auto}
  .cards.three{grid-template-columns:1fr}
  .cup-wrap{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--kraft); border-bottom:3px solid var(--ink); padding:1rem 1.4rem; gap:.9rem; margin:0}
  .nav-links.open{display:flex}
  .nav-buy{display:none}
  .nav-toggle{display:block; margin-left:auto}
  .nav-links{margin-left:0}
}
@media(max-width:560px){
  .roadmap,.foot-cols{grid-template-columns:1fr}
  .hero-stats{gap:1rem}
  .sign-big{padding:1.8rem}
  .sticky-note{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .mascot{animation:none}
}