:root{
  --sky:#0aa8ff; --sky2:#62cdff; --grass:#45d14e; --grass2:#2fb43a; --grass3:#1f8f2b;
  --orange:#ff8a1c; --stripe:#e8590f; --cream:#fff3dc; --pink:#ffa3b1; --ink:#111;
  --line:4px solid var(--ink); --pop:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sky);color:var(--ink);font:700 18px/1.5 Nunito,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.o{color:var(--orange);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}

/* paw-print cursor trail */
.paws{position:fixed;inset:0;pointer-events:none;z-index:90}
.paw{position:absolute;width:22px;height:22px;opacity:.7;animation:pawfade 1.1s forwards}
@keyframes pawfade{to{opacity:0;transform:scale(.6)}}

/* nav */
.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;background:#fff;border:var(--line);border-radius:99px;padding:6px 6px 6px 8px;box-shadow:4px 4px 0 var(--ink);width:min(760px,calc(100% - 24px))}
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:900 20px Gluten}
.nav-logo img{width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);object-fit:cover}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{text-decoration:none;font-weight:900;font-size:15px;padding:6px 12px;border-radius:99px}
.nav-links a:hover{background:var(--cream)}
.nav-buy{text-decoration:none;font:900 15px Gluten;background:var(--orange);border:3px solid var(--ink);border-radius:99px;padding:8px 16px;white-space:nowrap}
.nav-buy:hover{transform:rotate(-3deg)}

/* sticker buttons: thick outline, hard shadow, a little crooked */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.btns.center{justify-content:center}
.sbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:900 20px Gluten;padding:12px 22px;border:var(--line);border-radius:18px 22px 16px 24px;box-shadow:var(--pop);cursor:pointer;transition:transform .15s,box-shadow .15s;color:var(--ink)}
.sbtn svg{width:20px;height:20px}
.sbtn:nth-child(odd){transform:rotate(-2deg)}
.sbtn:nth-child(even){transform:rotate(1.5deg)}
.sbtn:hover{transform:rotate(0) translate(-2px,-3px);box-shadow:9px 9px 0 var(--ink)}
.sbtn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.sbtn.orange{background:var(--orange)}
.sbtn.white{background:#fff}
.sbtn.green{background:var(--grass)}
.sbtn.big{font-size:24px;padding:16px 28px}

/* ── hero ── */
.hero{position:relative;min-height:100svh;background:linear-gradient(180deg,#0b94f0 0,var(--sky) 45%,var(--sky2) 100%);overflow:hidden;display:flex;align-items:center;padding:110px 0 210px}
.sun{position:absolute;right:8%;top:14%;width:150px;height:150px;border-radius:50%;background:#ffe44d;border:var(--line);box-shadow:0 0 0 18px rgba(255,228,77,.35),0 0 0 40px rgba(255,228,77,.15);animation:spin 40s linear infinite}
.sun::before{content:"";position:absolute;inset:-34px;background:repeating-conic-gradient(from 0deg,transparent 0 12deg,rgba(255,228,77,.6) 12deg 18deg);border-radius:50%;z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}
.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;display:block;width:200px;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M30 88 C8 88 6 60 28 58 C26 34 58 26 70 44 C76 14 122 10 130 40 C146 26 176 34 172 58 C196 60 194 88 170 88 Z' fill='%23fff' stroke='%23111' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:drift linear infinite}
.c1{top:14%;animation-duration:48s;animation-delay:-10s}
.c2{top:30%;animation-duration:64s;animation-delay:-40s;transform:scale(.7)}
.c3{top:8%;animation-duration:80s;animation-delay:-20s;transform:scale(1.2)}
.c4{top:44%;animation-duration:56s;animation-delay:-5s;transform:scale(.55)}
.c5{top:22%;animation-duration:72s;animation-delay:-60s;transform:scale(.9)}
@keyframes drift{from{left:-260px}to{left:110%}}
.hero-in{position:relative;z-index:3;width:min(1200px,100%);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:20px}
.tag-pill{display:inline-block;background:#fff;border:3px solid var(--ink);border-radius:99px;padding:6px 14px;font-weight:900;font-size:14px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.title{font:900 clamp(60px,8.6vw,124px)/.9 Gluten;color:#fff;margin:18px 0 8px;letter-spacing:-.01em}
.title .ch{display:inline-block;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:5px 6px 0 var(--ink);animation:bob 2.6s ease-in-out infinite}
.title .ch.or{color:var(--orange)}
.title .w{display:inline-block;white-space:nowrap}
.title .sp{display:block;height:0}
@keyframes bob{50%{translate:0 -8px}}
.ticker-badge{display:inline-block;font:900 34px Gluten;background:var(--orange);border:var(--line);border-radius:14px;padding:4px 18px;box-shadow:var(--pop);transform:rotate(-4deg);margin:6px 0 4px;background-image:repeating-linear-gradient(115deg,transparent 0 18px,rgba(232,89,15,.55) 18px 30px)}
.hero-sub{font-size:21px;max-width:470px;margin-top:16px;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.hero-cat{position:relative;justify-self:center;width:min(560px,100%);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-cat img{width:100%;filter:drop-shadow(0 10px 0 rgba(0,0,0,.12));transform-origin:50% 90%;animation:walk .9s ease-in-out infinite;user-select:none}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.hero-cat.squish img{animation:squish .45s ease-out}
@keyframes squish{30%{transform:scale(1.15,.82)}60%{transform:scale(.92,1.1)}100%{transform:scale(1)}}
.cat-shadow{width:60%;height:22px;margin:-18px auto 0;border-radius:50%;background:rgba(0,40,10,.25);animation:shadow .9s ease-in-out infinite}
@keyframes shadow{50%{transform:scaleX(.85)}}
.bubble{position:absolute;left:4%;top:-6%;background:#fff;border:var(--line);border-radius:22px;padding:8px 16px;font:900 22px Gluten;box-shadow:4px 4px 0 var(--ink);transform:rotate(-6deg);transition:transform .2s;white-space:nowrap;z-index:2}
.bubble::after{content:"";position:absolute;right:26px;bottom:-16px;width:22px;height:22px;background:#fff;border-right:var(--line);border-bottom:var(--line);transform:rotate(45deg) skew(10deg,10deg)}
.bubble.pop{transform:rotate(4deg) scale(1.15)}
.pet-hint{position:absolute;right:6%;bottom:6%;font:900 18px Gluten;color:#fff;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;transform:rotate(8deg);animation:bob 1.6s ease-in-out infinite}
.butterfly{position:absolute;font-size:30px;z-index:4;pointer-events:none}
.b1{left:12%;top:70%;animation:flutter 9s ease-in-out infinite}
.b2{right:14%;top:62%;animation:flutter 11s ease-in-out infinite reverse}
@keyframes flutter{0%{transform:translate(0,0) rotate(-10deg)}25%{transform:translate(60px,-50px) rotate(10deg)}50%{transform:translate(120px,0) rotate(-6deg)}75%{transform:translate(50px,40px) rotate(8deg)}100%{transform:translate(0,0) rotate(-10deg)}}
.hills{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:220px;z-index:2}
.hill-back{fill:var(--grass2);stroke:var(--ink);stroke-width:4}
.hill-front{fill:var(--grass);stroke:var(--ink);stroke-width:4}

/* ── story on the grass ── */
.story{position:relative;background:var(--grass);padding:40px 24px 120px;margin-top:-2px}
.blades{position:absolute;inset:0;background-image:radial-gradient(ellipse 3px 9px at 50% 100%,var(--grass2) 98%,transparent 100%);background-size:46px 38px;opacity:.6;pointer-events:none}
.story-in{position:relative;width:min(1150px,100%);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.frame{position:relative;background:#fff;border:var(--line);border-radius:10px;padding:14px 14px 50px;box-shadow:10px 10px 0 var(--ink)}
.frame img{border:3px solid var(--ink);border-radius:6px}
.frame figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:900 22px Gluten}
.tilt-l{transform:rotate(-3deg)}
.stamp{position:absolute;right:-18px;top:-22px;background:var(--orange);border:var(--line);border-radius:50%;width:110px;height:110px;display:grid;place-items:center;text-align:center;font:900 17px/1.05 Gluten;transform:rotate(14deg);box-shadow:4px 4px 0 var(--ink);padding:10px}
.story-copy{background:var(--cream);border:var(--line);border-radius:28px 18px 32px 22px;padding:32px;box-shadow:10px 10px 0 var(--ink);transform:rotate(.8deg)}
.h2{font:900 clamp(42px,6vw,78px)/.95 Gluten;margin-bottom:18px}
.h2.center,.lead.center{text-align:center}
.h2.light{color:#fff}
.story-copy p{margin-bottom:12px;font-size:19px}
.story-copy p.big{font-size:23px;line-height:1.35}
.story-copy u{text-decoration:wavy underline var(--orange) 3px;text-underline-offset:5px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{background:#fff;border:3px solid var(--ink);border-radius:99px;padding:6px 14px;font-weight:900;font-size:15px}
.chip:nth-child(odd){transform:rotate(-2deg)}
.chip:nth-child(even){transform:rotate(2deg);background:var(--pink)}

/* tabby-stripe marquee seam */
.tape{position:relative;z-index:5;background:var(--orange);border-block:var(--line);transform:rotate(-2deg);margin:-40px -30px -20px;padding:12px 0;overflow:hidden;background-image:repeating-linear-gradient(115deg,transparent 0 40px,var(--stripe) 40px 64px)}
.tape-in{display:flex;width:max-content;animation:tape 26s linear infinite;font:900 34px Gluten;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.tape-in span{padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.tape-in img{height:46px;width:auto}
@keyframes tape{to{transform:translateX(-50%)}}

/* ── memes ── */
.memes{position:relative;background:var(--cream);padding:110px 24px 90px;overflow:hidden}
.doodles{position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:radial-gradient(circle at 20px 20px,var(--orange) 4px,transparent 5px),radial-gradient(circle at 70px 60px,var(--sky) 3px,transparent 4px);background-size:90px 90px}
.lead{font-size:20px;max-width:620px;margin:0 auto 40px}
.gallery{position:relative;width:min(1200px,100%);margin:0 auto;columns:3 300px;column-gap:26px}
.card{break-inside:avoid;margin-bottom:28px;background:#fff;border:var(--line);border-radius:10px;padding:12px 12px 14px;box-shadow:8px 8px 0 var(--ink);cursor:zoom-in;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.card img{border:3px solid var(--ink);border-radius:6px;width:100%}
.card p{font:800 20px/1.2 Gluten;margin-top:10px;text-align:center}
.card:hover{transform:rotate(0) scale(1.03)!important}
.sticker-row{display:flex;justify-content:center;gap:30px;margin-top:20px;flex-wrap:wrap}
.sticker-row img{height:120px;width:auto;animation:bob 2.4s ease-in-out infinite}
.sticker-row img:nth-child(2){animation-delay:.4s}
.sticker-row img:nth-child(3){animation-delay:.8s}

/* ── dusk → army → dawn ── */
.dusk{height:220px;background:linear-gradient(180deg,var(--cream) 0,#ffb36b 30%,#c2387a 60%,#2a0f3d 85%,#0d0718 100%)}
.army{position:relative;background:#0d0718;color:#fff;padding:40px 24px 160px;overflow:hidden}
.army::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:60px 60px;opacity:.25}
.army-in{position:relative;width:min(1150px,100%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.army-copy p{font-size:20px;color:#e9dcff;margin-bottom:14px}
.army-copy .small{font-size:15px;opacity:.7}
.enlist{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 10px}
.recruits{font:900 24px Gluten}
.recruits b{color:var(--orange);font-size:34px}
.army-art{border:var(--line);border-color:#fff;border-radius:20px;overflow:hidden;box-shadow:10px 10px 0 var(--orange);transform:rotate(2deg)}
.march{position:absolute;left:0;right:0;bottom:24px;height:90px;pointer-events:none}
.recruit{position:absolute;bottom:0;height:80px;width:auto;animation:marchAcross linear forwards}
.recruit .tag{display:none}
@keyframes marchAcross{from{left:-140px}to{left:110%}}
.dawn{height:200px;background:linear-gradient(180deg,#0d0718 0,#3a1a6a 25%,#ff8fb1 55%,#ffd27a 75%,var(--sky2) 100%)}

/* ── buy ── */
.buy{position:relative;background:var(--sky2);padding:30px 24px 110px;overflow:hidden}
.clouds.slow .cloud{animation-duration:90s}
.flyer{position:absolute;top:120px;left:-260px;width:240px;z-index:3;pointer-events:none}
.steps{list-style:none;width:min(1150px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:2}
.step{background:#fff;border:var(--line);border-radius:22px 16px 26px 18px;padding:24px 20px;box-shadow:8px 8px 0 var(--ink);position:relative}
.step:nth-child(odd){transform:rotate(-2deg)}
.step:nth-child(even){transform:rotate(2deg) translateY(16px)}
.step .n{position:absolute;top:-26px;left:18px;width:56px;height:56px;border-radius:50%;background:var(--orange);border:var(--line);display:grid;place-items:center;font:900 30px Gluten}
.step h3{font:900 26px Gluten;margin:16px 0 6px}
.step p{font-size:16px}
.ca-card{position:relative;z-index:2;width:min(820px,100%);margin:70px auto 0;background:var(--cream);border:var(--line);border-radius:30px;padding:30px 26px;box-shadow:10px 10px 0 var(--ink);text-align:center}
.ca-cat{position:absolute;right:-24px;top:-70px;width:150px;transform:rotate(10deg)}
.ca-label{font:900 16px Gluten;letter-spacing:.14em}
.ca-row{display:flex;gap:10px;align-items:center;background:#fff;border:var(--line);border-radius:16px;padding:8px 8px 8px 16px;margin-top:10px}
.ca-row code{flex:1;min-width:0;font:800 16px ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ca-row .sbtn{transform:none;box-shadow:3px 3px 0 var(--ink);padding:8px 18px;font-size:18px}

/* ── footer ── */
.foot{position:relative;background:url(assets/sunset.jpg) center 40%/cover;color:#fff;padding:120px 24px 40px;border-top:var(--line)}
.foot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,140,40,.15),rgba(40,10,20,.75))}
.foot-in{position:relative;width:min(1000px,100%);margin:0 auto;text-align:center}
.foot-big{font:900 clamp(48px,8vw,104px)/.95 Gluten;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink)}
.foot-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:30px 0}
.foot-links a{font:900 20px Gluten;text-decoration:none;background:#fff;color:var(--ink);border:var(--line);border-radius:14px;padding:8px 18px;box-shadow:4px 4px 0 var(--ink)}
.disc{max-width:720px;margin:0 auto;font-size:13px;opacity:.85}

/* lightbox + toast */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(10,10,30,.85);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.lightbox.on{opacity:1;visibility:visible}
.lightbox img{max-height:76vh;width:auto;border:var(--line);border-color:#fff;border-radius:14px;transform:scale(.9) rotate(-2deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lightbox.on img{transform:scale(1) rotate(-1deg)}
.lightbox p{color:#fff;font:900 26px Gluten;text-align:center;margin-top:14px}
.lb-x{position:absolute;top:18px;right:18px;width:52px;height:52px;border-radius:50%;background:#fff;border:var(--line);font:900 22px Gluten;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;z-index:99;transform:translate(-50%,calc(100% + 40px));background:#fff;border:var(--line);border-radius:99px;padding:10px 22px;font:900 18px Gluten;box-shadow:4px 4px 0 var(--ink);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.toast.on{transform:translate(-50%,0)}

@media (max-width:900px){
  .nav-links{display:none}
  .nav{justify-content:space-between}
  .hero{padding:96px 0 180px;align-items:flex-start}
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:2}
  .hero-cat{order:1;width:min(380px,82vw)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .btns{justify-content:center}
  .sun{width:90px;height:90px;right:6%;top:12%}
  .story-in,.army-in{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
  .ca-cat{width:100px;top:-56px;right:-8px}
}
@media (max-width:540px){
  body{font-size:16px}
  .title{font-size:min(60px,15vw)}
  .title .ch{-webkit-text-stroke:3px var(--ink);text-shadow:3px 4px 0 var(--ink)}
  .sbtn{font-size:18px;padding:10px 16px}
  .sbtn.big{font-size:20px;padding:13px 20px}
  .steps{grid-template-columns:1fr}
  .step:nth-child(even){transform:rotate(2deg)}
  .story-copy{padding:22px}
  .stamp{width:84px;height:84px;font-size:13px;right:-8px}
  .tape-in{font-size:24px}
  .tape-in img{height:34px}
  .flyer{width:150px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}