:root{--ink:#1d3a4a;--teal:#0b3a52;--teal2:#0f5d78;--sun:#ffc93c;--pip:#ffe000;--hat:#f58a1f;--mint:#5fe0c8;--cream:#fff8ec;--sy:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:linear-gradient(to bottom,rgba(45,156,242,0) 45%,#2d9cf2 100%) top center/100% calc(max(1600px,100vw) / 3) no-repeat,url(img/sky.png) top center/max(1600px,100%) auto no-repeat,#2d9cf2}
img{max-width:100%}
.top{position:sticky;top:12px;z-index:20;margin:12px auto 0;width:min(1100px,calc(100% - 24px));display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 14px;background:var(--cream);border:3px solid var(--ink);border-radius:99px;box-shadow:0 5px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:8px;font:800 30px 'Baloo 2';color:var(--ink);text-decoration:none;line-height:1}.brand img{width:38px;height:38px;object-fit:contain}
nav{display:flex;gap:6px;align-items:center}nav a{color:var(--ink);font-weight:800;text-decoration:none;padding:8px 14px;border-radius:99px}nav a:hover{background:#ffe9a8}
nav .signin{background:var(--pip);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);margin-left:6px}
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gear{position:absolute;width:140px;opacity:.9;animation:spin 24s linear infinite}
.g1{left:4%;top:60px}.g2{right:6%;top:30px;width:100px;animation-direction:reverse}.g3{right:16%;top:230px;width:70px}
.g4{left:-30px;top:30%;width:200px}.g5{right:-20px;bottom:6%;width:170px;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero{position:relative;text-align:center;padding:36px 20px 40px;max-width:1100px;margin:0 auto}
.hero-pip{display:block;width:clamp(150px,20vw,230px);margin:0 auto -6px;position:relative;z-index:2;filter:drop-shadow(0 12px 0 rgba(29,58,74,.18));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-3deg)}}
.chips{position:relative;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.chips span{background:var(--cream);border:3px solid var(--ink);border-radius:99px;padding:5px 14px;font-weight:800;font-size:15px;box-shadow:0 3px 0 var(--ink)}
.hero h1{position:relative;margin:6px 0 0;font:800 clamp(46px,8.5vw,112px)/.95 'Baloo 2';color:#fff;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 9px 0 var(--ink);letter-spacing:-1px}
.hero h1 span{color:var(--pip)}
.hero p{position:relative;font:800 clamp(18px,2.4vw,26px) Nunito;margin:22px 0 0;color:var(--ink);text-shadow:0 0 8px #fff,0 0 8px #fff,0 0 16px #fff}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1320px;margin:0 auto;padding:20px 24px 0}
.tile{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden;border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);background:#bde4f7;transition:transform .2s,box-shadow .2s;transform:translateY(0) rotate(0)}
.tile:nth-child(odd):hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 14px 0 var(--ink)}
.tile:nth-child(even):hover{transform:translateY(-8px) rotate(1.5deg);box-shadow:0 14px 0 var(--ink)}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.vig{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 42%,rgba(11,58,82,.6) 100%),linear-gradient(to top,rgba(11,58,82,.35),transparent 28%);pointer-events:none}
.lbl{position:absolute;left:8px;right:8px;bottom:10px;text-align:center;font:800 clamp(15px,1.6vw,20px)/1 'Baloo 2';color:var(--ink);text-shadow:0 0 5px #fff,0 0 5px #fff,0 0 10px #fff,0 0 14px #fff}
.reveal{opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s calc(var(--i,0)*80ms),transform .6s cubic-bezier(.2,1.4,.4,1) calc(var(--i,0)*80ms)}
.reveal.in{opacity:1;transform:none}
.tile.reveal.in:hover{transition-delay:0s}
.big{position:relative;margin-top:90px;padding:230px 24px 130px;text-align:center;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 260px,#fff)}
.big>*{position:relative}.big .deco{position:absolute}
.peek{position:absolute!important;width:150px;left:50%;top:70px;margin-left:-520px;transform:rotate(-12deg);z-index:1;animation:bob 3.6s ease-in-out infinite}
.big h2{max-width:1150px;margin:0 auto;font:800 clamp(42px,8vw,118px)/1 'Baloo 2';color:var(--ink);letter-spacing:-1px}
.big em{font-style:normal;color:#ffb000;text-shadow:0 0 16px #ffd23c,0 0 40px #ffc93c,0 0 90px #ffb400;animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{text-shadow:0 0 26px #ffd23c,0 0 64px #ffc93c,0 0 130px #ff9f1c}}
.cta{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:80px auto 0;border:5px solid var(--ink);border-radius:22px;box-shadow:10px 12px 0 var(--ink);overflow:hidden;text-align:center}
.pane{position:relative;padding:44px 34px 48px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .9s cubic-bezier(.2,1.1,.3,1),opacity .6s}
.pane h3{margin:0;font:800 clamp(28px,3.4vw,44px)/1 'Baloo 2'}.pane p{margin:0 0 6px;font-weight:700;font-size:18px;max-width:340px}
.p-app{background:var(--pip);clip-path:polygon(0 0,100% 0,88% 14%,96% 30%,84% 46%,95% 62%,85% 78%,94% 100%,0 100%);padding-right:70px;transform:translateX(-120vw)}
.p-book{background:#2f6bd8;color:#fff;margin-left:-6%;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%,9% 84%,0 68%,10% 52%,2% 36%,11% 20%);padding-left:80px;transform:translateX(120vw)}
.p-book h3{color:var(--pip)}
.cta.in .pane{transform:none}
.zig{position:absolute;left:50%;top:0;height:100%;width:70px;transform:translateX(-50%);z-index:3;pointer-events:none;opacity:0;transition:opacity .4s .7s}.cta.in .zig{opacity:1}
.zig path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linejoin:miter}
.or{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%) rotate(-8deg);background:#fff;border:4px solid var(--ink);border-radius:50%;width:64px;height:64px;display:grid;place-items:center;font:800 22px 'Baloo 2'}
@media(max-width:800px){.cta{grid-template-columns:1fr}.p-app,.p-book{clip-path:none;margin:0;padding:36px 20px}.zig,.or{display:none}.p-book{border-top:5px solid var(--ink)}}
.stores{display:flex;flex-direction:column;gap:16px;align-items:center}.stores img{height:68px;display:block;transition:transform .15s}.stores a:hover img{transform:scale(1.05)}
.amz{font-weight:800;color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:14px;padding:15px 26px;text-decoration:none;box-shadow:0 4px 0 var(--ink)}
.book{position:relative;display:block}
.book img{width:250px;display:block;border:5px solid var(--ink);border-radius:8px;transform:rotate(7deg);box-shadow:12px 14px 0 var(--ink);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.book:hover img{transform:rotate(1deg) scale(1.05)}
.burst{position:absolute;z-index:2;right:-44px;top:-30px;width:96px;height:96px;display:grid;place-items:center;text-align:center;font:800 17px/1 'Baloo 2';background:var(--pip);clip-path:polygon(50% 0,60% 12%,75% 5%,79% 21%,95% 22%,90% 38%,100% 50%,90% 62%,95% 78%,79% 79%,75% 95%,60% 88%,50% 100%,40% 88%,25% 95%,21% 79%,5% 78%,10% 62%,0 50%,10% 38%,5% 22%,21% 21%,25% 5%,40% 12%);transform:rotate(12deg)}
footer{position:relative;background:var(--teal) linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/36px 36px;color:#fff;padding:90px 24px 28px}
footer::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/36px 36px}
.fpip{position:absolute;top:-92px;left:50%;margin-left:-60px;width:120px}.fpip img{width:100%}
.cols{position:relative;max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
footer h3{font:800 22px 'Baloo 2';color:var(--pip);margin:0 0 10px}footer a{display:block;color:#fff;text-decoration:none;padding:5px 0;opacity:.92}footer a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--mint)}
.fine{position:relative;text-align:center;opacity:.6;margin-top:40px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.peek{display:none}}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 12px 0}nav a:not(.signin){display:none}.cols{grid-template-columns:1fr}.cta{gap:50px}.hero h1{-webkit-text-stroke:7px var(--ink)}.burst{right:-20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}}
.bk{width:200px;border:5px solid var(--ink);border-radius:8px;transform:rotate(5deg);box-shadow:8px 10px 0 var(--ink)}
.p-book .burst{right:22%;top:96px}
.p-book .burst{right:auto;left:calc(50% + 70px);top:auto;bottom:90px}.p-book{padding-top:52px}
.cta{background:var(--pip)}
.p-app{clip-path:none;padding-right:34px}.p-book{margin-left:0}
.p-book .zig{position:absolute;inset:0;width:100%;height:100%;left:0;transform:none;opacity:1}.zig path{stroke-width:16}
.plus{position:absolute;left:0;top:50%;z-index:5;transform:translate(-50%,-50%) rotate(-8deg);background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:50%;width:72px;height:72px;display:grid;place-items:center;font:800 46px/1 'Baloo 2'}
.both{font-weight:800;font-size:16px;margin:4px 0 0;opacity:.8}
@media(max-width:800px){.plus{left:50%;top:0}.p-book .zig{display:none}}
.plus{left:50%!important}@media(max-width:800px){.plus{top:50%!important}}
.stores img{height:56px;width:auto;display:block}
html,body{overflow-x:clip;max-width:100%}
@media(max-width:800px){
.plus{display:none!important}.p-book h3:before{content:"+ ";color:#fff}
.pane{padding:30px 18px 34px}.p-app,.p-book{padding-left:18px;padding-right:18px}
.big{margin-top:30px;padding:150px 16px 80px}
.deco .gear{opacity:.5}
.cta{margin:50px 14px 0;box-shadow:6px 8px 0 var(--ink)}
.stores img{height:50px}
}
@media(max-width:640px){.grid>.tile:last-child:nth-child(odd){display:none}.hero h1{font-size:clamp(40px,13vw,60px)}.big h2{font-size:clamp(34px,10vw,48px)}}
.burger,.menu{display:none}
@media(max-width:640px){
.top{flex-wrap:wrap}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:50px;height:46px;margin:0 auto;padding:0 12px;background:var(--cream);border:3px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.burger i{display:block;height:4px;border-radius:4px;background:var(--ink);transition:transform .3s,opacity .2s}
.top.open .burger i:nth-child(1){transform:translateY(9px) rotate(45deg)}.top.open .burger i:nth-child(2){opacity:0}.top.open .burger i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu{display:flex;flex-direction:column;position:absolute;left:12px;right:12px;top:calc(100% - 28px);z-index:-1;padding:0 14px;background:var(--cream);border:3px solid var(--ink);border-top:0;border-radius:0 0 26px 26px;box-shadow:0 6px 0 var(--ink);max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.2,.9,.3,1),opacity .25s,padding .4s}
.top.open .menu{max-height:320px;opacity:1;padding:38px 14px 16px}
.menu a{font:800 24px 'Baloo 2';color:var(--ink);text-decoration:none;padding:12px 6px;border-bottom:2px dashed #d9c9a8}.menu a:last-child{border:0}
}

footer .fine a{display:inline;padding:0}
@media(max-width:900px){.cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cols{grid-template-columns:1fr}}
main:not(:has(.big)){padding-bottom:110px}