:root{--o:#F26A0A;--y:#E8B90F;--ol:#2B2D0C;--g:#8F6B3A;--cream:#FFFDF8;--peach:#FDE6C8;--r:18px 26px 20px 30px}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ol);font:18px/1.6 Newsreader,serif;overflow-x:hidden}
h1,h2,h3,.nav,.pill,.marq,label,.stats b{font-family:Lexend,sans-serif}
a{color:inherit}.wrap{max-width:1120px;margin:auto;padding:0 24px}
#bar{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--o),var(--y),var(--ol));z-index:50}
#glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px;border-radius:50%;pointer-events:none;background:radial-gradient(#F26A0A22,transparent 65%);z-index:0;transition:transform .12s}
.nav{position:fixed;inset:12px 16px auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 14px;background:#fffdf8d9;backdrop-filter:blur(10px);border:1.5px solid #8f6b3a44;border-radius:60px;max-width:1000px;margin:auto}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:700}.brand img{width:34px;height:34px;border-radius:50%}
.nav nav{display:flex;gap:20px;align-items:center;font-size:14px;font-weight:500}.nav nav a{text-decoration:none}.nav nav a:not(.pill):hover{color:var(--o)}
.pill{background:var(--o);color:#fff!important;border:0;padding:10px 20px;border-radius:40px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .2s,background .2s}
.pill:hover{background:var(--ol);transform:rotate(-2deg) scale(1.04)}
.hero{position:relative;min-height:100svh;display:grid;place-content:center;text-align:center;padding:120px 20px 220px;overflow:hidden;z-index:1}
.seal{width:clamp(110px,16vw,170px);border-radius:50%;margin:0 auto 10px;box-shadow:0 20px 50px #f26a0a40;animation:spin-in 1.4s cubic-bezier(.2,1.2,.3,1) both}
@keyframes spin-in{from{transform:rotate(-200deg) scale(.2);opacity:0}}
.wordmark{font-size:clamp(64px,17vw,230px);font-weight:800;letter-spacing:-.05em;line-height:.95;display:flex;justify-content:center}
.wordmark span{background:linear-gradient(95deg,var(--o) 0,var(--y) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:drop 1s .5s cubic-bezier(.2,1.3,.4,1) both}
.wordmark .dark{background-image:linear-gradient(95deg,var(--ol),#5b5a10);animation-delay:.7s}
@keyframes drop{from{transform:translateY(-60px) rotate(-4deg);opacity:0}}
.lede{font-size:clamp(20px,2.6vw,30px);font-style:italic;margin-top:14px;animation:fade 1s 1.3s both}
.note{font:600 26px Caveat,cursive;color:var(--o);margin-top:18px;transform:rotate(-2deg);animation:fade 1s 1.7s both}
.note svg{width:44px;height:30px;vertical-align:middle;fill:none;stroke:var(--o);stroke-width:2.5;stroke-linecap:round}
@keyframes fade{from{opacity:0}}
.waves{position:absolute;bottom:-1px;left:-5%;width:110%;height:200px}
.w1{fill:#FDE6C8}.w2{fill:#F9C98E}.w3{fill:#F26A0A33}
.w1{animation:sway 9s ease-in-out infinite alternate}.w2{animation:sway 12s ease-in-out infinite alternate-reverse}.w3{animation:sway 7s ease-in-out infinite alternate}
@keyframes sway{to{transform:translateX(-4%)}}
.marq{background:var(--ol);color:var(--cream);overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.2deg);margin:-20px -20px 40px;position:relative;z-index:2;font-weight:300;font-size:26px}
.marq div{display:inline-block;animation:mq 28s linear infinite}.marq span{margin:0 28px}.marq span:nth-child(even){color:var(--y);font-weight:800}
@keyframes mq{to{transform:translateX(-50%)}}
section{position:relative;z-index:1}.film,.demo,.what,.talk{padding:90px 0}
h2{font-size:clamp(32px,5vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1.08;margin-bottom:12px}
h2 em{font-style:normal;color:var(--o)}.sub{color:var(--g);font-style:italic}
.scribble{background:linear-gradient(var(--y),var(--y)) 0 92%/0 .28em no-repeat;transition:background-size 1s .3s;padding-bottom:.05em}
.scribble.in{background-size:100% .28em}
.film .wrap{text-align:center}
.frame{position:relative;margin-top:36px;border-radius:var(--r);border:3px solid var(--ol);background:#000;box-shadow:12px 12px 0 var(--o);transition:transform .25s}
.frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:15px 23px 17px 27px}
.frame video{width:100%;display:block;border-radius:0 0 22px 26px}
.sticker{position:absolute;right:-14px;top:-22px;background:var(--y);font:600 24px Caveat,cursive;padding:4px 16px;border-radius:30px;transform:rotate(6deg);border:2px solid var(--ol)}
.sound-toggle-btn{cursor:pointer;user-select:none;outline:0;box-shadow:3px 3px 0 var(--o);transition:transform .2s,background .2s}
.sound-toggle-btn:hover{transform:rotate(2deg) scale(1.08);background:#f59e0b}
.sound-toggle-btn.playing{background:#22c55e;color:#fff;border-color:var(--o);box-shadow:4px 4px 0 #15803d}
.browser{margin:0;background:#fff;box-shadow:-12px 12px 0 var(--y)}.browser .dots{padding:10px 14px;background:var(--peach);display:flex;gap:7px;border-radius:15px 23px 0 0}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--o)}.dots i:nth-child(2){background:var(--y)}.dots i:nth-child(3){background:var(--ol)}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.demo{background:linear-gradient(var(--cream),var(--peach) 120%)}
.copy p{max-width:46ch;margin-top:8px}
.stats{list-style:none;display:flex;gap:28px;margin-top:30px;padding:0}.stats li{font-family:Lexend;font-weight:800;font-size:44px;line-height:1;color:var(--o)}
.stats small{display:block;font:300 14px Lexend;color:var(--ol);margin-top:6px;max-width:12ch}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;margin-top:40px}
.card{grid-column:span 2;padding:28px;border-radius:var(--r);background:#fff;border:2px solid var(--ol)}
.card h3{font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.c-a{grid-column:span 3;background:var(--o);color:#fff;border-color:var(--o);--rot:-1deg}
.c-b{grid-column:span 3;background:var(--peach);--rot:1.2deg}
.c-c{--rot:.8deg}.c-d{background:var(--ol);color:var(--cream);--rot:-1.2deg}.c-e{background:var(--y);--rot:1deg}
.talk{background:var(--ol);color:var(--cream)}.talk .scribble{background-image:linear-gradient(var(--o),var(--o))}
.wa{display:inline-block;margin-top:22px;font:600 24px Caveat;text-decoration:underline wavy var(--y);text-underline-offset:6px}
form{display:grid;gap:14px;background:var(--cream);color:var(--ol);padding:28px;border-radius:var(--r);--rot:1deg}
label{font-size:13px;font-weight:500;display:grid;gap:4px}
input,textarea{font:18px Newsreader;padding:10px 12px;border:2px solid var(--ol);border-radius:10px 14px 10px 16px;background:#fff;outline:0}
input:focus,textarea:focus{border-color:var(--o);box-shadow:4px 4px 0 var(--y)}
#msg{font:600 22px Caveat;color:var(--o);min-height:1.2em}
footer{padding:30px;text-align:center;font-size:14px;color:var(--g)}footer img{width:46px;border-radius:50%}
.rv{opacity:0;transform:translateY(26px) rotate(var(--rot,0deg));transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:rotate(var(--rot,0deg))}
.card.in:hover,.frame.in:hover{transform:rotate(0) scale(1.02)}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
@media(max-width:820px){.split{grid-template-columns:1fr}.nav nav a:not(.pill){display:none}.card,.c-a,.c-b{grid-column:span 6}.stats{gap:18px}.stats li{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

.fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:0;height:60px;min-width:60px;padding:0 17px;border-radius:40px;background:#25D366;color:#fff;font:600 15px Lexend,sans-serif;text-decoration:none;box-shadow:0 8px 24px #2b2d0c55,0 0 0 4px var(--cream);transition:gap .3s,padding .3s}
.fab svg{width:26px;height:26px;flex:none}.fab span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s}
.fab:hover{gap:10px}.fab:hover span{max-width:120px}
.fab::after{content:"";position:absolute;inset:-6px;border-radius:40px;border:2px solid var(--o);animation:ping 2.4s infinite;pointer-events:none}
@keyframes ping{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.25)}}
#msg a{display:inline-block;margin-top:4px;color:var(--ol);text-decoration:underline wavy var(--o);text-underline-offset:5px}
footer a{color:var(--o)}