/* Petiction landing page (resources/views/landing.blade.php) */
:root{
  --bg:#FFF8F0;--bg-2:#FFF1E4;--surface:#FFFFFF;--surface-2:#FBF6FF;
  --ink:#2B2340;--muted:#6A6386;--line:#EFE3D6;
  --pink:#FF6F9F;--pink-ink:#FFFFFF;--purple:#7C6CF2;--yellow:#FFC93C;--mint:#53C98C;--sky:#5AA9E6;
  --peach:#FFE3CC;--butter:#FFF0C2;--mint-soft:#DDF5E5;--lilac:#ECE8FF;
  --page:#FFFFFF;--page-line:#EEE9F6;--page-pill:#F1EEFF;--page-pill-ink:#5B4FD6;
  --shadow:0 1px 2px rgba(43,35,64,.06),0 12px 32px -12px rgba(43,35,64,.18);
  --shadow-lg:0 2px 4px rgba(43,35,64,.05),0 30px 60px -20px rgba(70,50,120,.32);
  --r:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16132A;--bg-2:#1C1834;--surface:#221E3B;--surface-2:#2A2548;
  --ink:#F4F1FF;--muted:#B1ABD0;--line:#38325A;
  --pink:#FF7EA9;--pink-ink:#1B1530;--purple:#9C90FF;
  --peach:#3A2A33;--butter:#3A3424;--mint-soft:#1F3A30;--lilac:#2D2852;
  --page:#2A2546;--page-line:#3A3460;--page-pill:#3A3370;--page-pill-ink:#D6D0FF;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 30px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#16132A;--bg-2:#1C1834;--surface:#221E3B;--surface-2:#2A2548;
  --ink:#F4F1FF;--muted:#B1ABD0;--line:#38325A;
  --pink:#FF7EA9;--pink-ink:#1B1530;--purple:#9C90FF;
  --peach:#3A2A33;--butter:#3A3424;--mint-soft:#1F3A30;--lilac:#2D2852;
  --page:#2A2546;--page-line:#3A3460;--page-pill:#3A3370;--page-pill-ink:#D6D0FF;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 30px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Nunito",ui-rounded,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Fredoka","Nunito",ui-rounded,sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.08;margin:0}
h2{font-size:clamp(32px,4.6vw,54px)}
h3{font-size:22px;line-height:1.2}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
kbd{font:800 .85em/1 "Nunito",sans-serif;background:var(--lilac);border:1px solid var(--line);border-bottom-width:3px;border-radius:7px;padding:3px 7px;white-space:nowrap}
code{font:700 .9em ui-monospace,Menlo,monospace;background:rgba(255,255,255,.18);padding:2px 6px;border-radius:6px}
section{position:relative;padding:clamp(72px,10vw,130px) clamp(16px,5vw,64px)}
.section-head{max-width:760px;margin:0 auto clamp(40px,6vw,72px);text-align:center}
.section-head .sub{margin-top:16px}
.sub{color:var(--muted);font-size:19px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 "Nunito",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:16px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 25%,transparent);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px transparent}}

/* icons */
[data-icon],[data-item]{display:inline-flex;align-items:center;justify-content:center}
[data-icon] svg,[data-item] svg{width:100%;height:100%;display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 16px/1 "Nunito",sans-serif;border-radius:999px;padding:14px 22px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn [data-icon]{width:20px;height:20px}
.btn-primary{background:var(--pink);color:var(--pink-ink);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--pink) 80%,transparent),inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-light{background:#fff;color:#2B2340;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.btn-lg{font-size:17px;padding:17px 26px}
.btn-sm{font-size:14px;padding:10px 16px}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:10px}

/* progress + nav */
.progress{position:fixed;inset:0 0 auto;height:4px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--yellow),var(--pink),var(--purple))}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,48px);transition:background .3s,box-shadow .3s,padding .3s}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-top:10px;padding-bottom:10px}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 21px/1 "Fredoka",sans-serif;text-decoration:none}
.logo-mark{width:38px;height:38px;border-radius:11px;transform:rotate(-6deg);box-shadow:0 4px 12px -4px rgba(240,107,168,.6);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .logo-mark{transform:rotate(4deg) scale(1.06)}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{font-weight:700;font-size:15px;text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
.nav nav a:hover,.nav nav a.on{color:var(--ink);background:var(--surface)}
@media (max-width:920px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;max-width:1280px;margin:0 auto;padding-top:clamp(32px,6vw,72px);min-height:min(88vh,860px)}
.hero h1{font-size:clamp(44px,6.4vw,84px);line-height:1.02;margin-bottom:22px}
.squiggle{position:relative;white-space:nowrap;color:var(--pink)}
.squiggle::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;height:.28em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 Q 12 2 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 122 8' fill='none' stroke='%23FFC93C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0/auto 100%;animation:squig 3s linear infinite;z-index:-1}
@keyframes squig{to{background-position:120px 0}}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:34em;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.hero-proof li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;color:var(--muted)}
.hero-proof b{color:var(--ink);font:700 17px/1 "Fredoka",sans-serif;margin-right:4px}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;pointer-events:none}
.b1{width:420px;height:420px;background:var(--peach);top:-60px;right:8%}
.b2{width:340px;height:340px;background:var(--lilac);bottom:0;left:-80px}
.b3{width:260px;height:260px;background:var(--mint-soft);top:40%;right:-60px}
.hero-art{position:relative}
.psst{margin-top:22px;text-align:center;font-weight:700;font-size:15px;color:var(--muted)}
.psst span{display:inline-block;animation:peek 2.4s ease-in-out infinite}
@keyframes peek{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

/* mock browser, shared by hero + story */
.browser{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.browser.tilt{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.browser.tilt:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#FF6F6F}
.browser-bar i:nth-child(2){background:#FFC93C}.browser-bar i:nth-child(3){background:#53C98C}
.url{margin-left:12px;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-page{position:relative;aspect-ratio:16/11;background:var(--page);container-type:inline-size;overflow:hidden}
.browser-page>div,.browser-page>span{position:absolute}
.fake-h{top:8%;left:6%;width:50%;height:7%;border-radius:8px;background:var(--ink);opacity:.85}
.fake-p{top:19%;left:6%;width:84%;height:3%;border-radius:6px;background:var(--page-line)}
.fake-p.short{top:25%;width:58%}
.fake-p.low{top:88%;width:40%}.fake-p.low.short{top:93%;width:28%}
.fake-links{top:33%;left:6%;height:9%;width:60%;display:flex;gap:1.8cqw}
.fake-links span{flex:0 0 14cqw;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;background:var(--page-pill);color:var(--page-pill-ink);font:800 2.4cqw/1 "Nunito",sans-serif}
.fake-img{top:50%;left:52%;width:42%;height:34%;border-radius:3cqw;background:linear-gradient(#FFE1B5,#FFD09A);overflow:hidden}
.fake-img .sun{position:absolute;width:8cqw;height:8cqw;border-radius:50%;background:#FFB347;top:18%;right:16%;box-shadow:0 0 0 2cqw rgba(255,179,71,.25)}
.fake-img .hill{position:absolute;left:-10%;right:-10%;bottom:-30%;height:70%;border-radius:50% 50% 0 0;background:#F49A6A}
.pet-sprite{display:block;width:100%;aspect-ratio:100/90}
.bubble{position:absolute;left:50%;bottom:calc(100% + 1.2cqw);transform:translateX(-50%);background:#fff;color:#2B2340;font:800 max(11px,2.3cqw)/1.25 "Nunito",sans-serif;padding:1.1cqw 2cqw;border-radius:2.4cqw;white-space:nowrap;box-shadow:0 4px 14px rgba(43,35,64,.18);transition:opacity .35s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}

/* hero pets */
.hero-parrot{left:38.6%;bottom:66.4%;width:12%}
.hero-parrot .bubble{animation:bubble 5s ease-in-out infinite}
@keyframes bubble{0%,8%{opacity:0;transform:translate(-50%,8px) scale(.8)}14%,70%{opacity:1;transform:translateX(-50%)}78%,100%{opacity:0;transform:translate(-50%,-4px) scale(.9)}}
.hero-cat{left:62%;bottom:50%;width:19%;margin-bottom:-1.2%}
.zzz{position:absolute;right:4%;bottom:70%;font:700 3cqw/1 "Fredoka",sans-serif;color:var(--purple)}
.zzz b,.zzz i{font-style:normal;font-weight:700;position:absolute;opacity:0}
.zzz{animation:z 2.6s infinite}.zzz b{left:2.6cqw;bottom:2.6cqw;animation:z 2.6s .5s infinite}.zzz i{left:5cqw;bottom:5.4cqw;animation:z 2.6s 1s infinite}
@keyframes z{0%{opacity:0;transform:translateY(6px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(8px,-14px) scale(1.15)}}
.hero-walker{bottom:1%;width:18%;left:4%;animation:walkx 16s linear infinite}
.hero-walker .pet-sprite{animation:face 16s linear infinite}
@keyframes walkx{0%{left:4%}44%{left:30%}50%{left:30%}94%{left:4%}100%{left:4%}}
@keyframes face{0%,46.9%{transform:scaleX(1)}47%,96.9%{transform:scaleX(-1)}97%,100%{transform:scaleX(1)}}
.floaty{width:5cqw;height:5cqw;animation:floaty 6s ease-in-out infinite}
.floaty.heart{width:4cqw;height:4cqw}
.f1{top:44%;left:80%}.f2{top:16%;left:74%;animation-delay:-2s;width:3cqw!important}
.f3{top:30%;left:84%;animation-delay:-1s;width:7cqw}.f4{top:62%;left:8%;animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(8deg)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface);padding:18px 0;transform:rotate(-1.2deg);margin:20px -20px}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 38s linear infinite}
.marquee span{font:600 20px/1 "Fredoka",sans-serif;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- scroll story ---------- */
.story-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);max-width:1240px;margin:0 auto}
.story-stage-wrap{position:relative}
.story-stage{position:sticky;top:calc(50vh - min(26vw,300px));transition:transform .5s}
.story-steps{list-style:none;margin:0;padding:12vh 0 22vh}
.step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s,transform .5s;transform:translateX(12px)}
.step.on{opacity:1;transform:none}
.step-n{font:700 15px/1 "Fredoka",sans-serif;color:var(--pink);background:color-mix(in srgb,var(--pink) 14%,transparent);border-radius:999px;padding:7px 12px;align-self:flex-start;margin-bottom:16px}
.step h3{font-size:clamp(26px,2.6vw,34px);margin-bottom:12px}
.step p{color:var(--muted);font-size:18px;max-width:30em}
.stage-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.stage-dots i{width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .4s,background .4s}
.story-stage[data-step="1"] .stage-dots i:nth-child(1),.story-stage[data-step="2"] .stage-dots i:nth-child(2),.story-stage[data-step="3"] .stage-dots i:nth-child(3),.story-stage[data-step="4"] .stage-dots i:nth-child(4),.story-stage[data-step="5"] .stage-dots i:nth-child(5),.story-stage[data-step="6"] .stage-dots i:nth-child(6),.story-stage[data-step="7"] .stage-dots i:nth-child(7){width:28px;background:var(--pink)}

/* stage actors */
.stage-cat{width:17%;left:var(--x,41%);bottom:var(--y,44%);transition:left .9s cubic-bezier(.5,0,.3,1),bottom .9s cubic-bezier(.5,0,.3,1);z-index:3}
.stage-cat .pet-sprite{transform:scaleX(var(--face,1));transition:transform .2s}
.stage-cat.hop .pet-sprite{animation:hopup .9s cubic-bezier(.3,0,.3,1)}
@keyframes hopup{0%,100%{translate:0 0}45%{translate:0 -38%}}
.stage-cat .bubble{opacity:0}
.stage-cat .bubble.show{opacity:1}
.stage-parrot{left:38.6%;bottom:66.4%;width:12%;opacity:0;transform:translateY(-30px);transition:opacity .6s,transform .8s cubic-bezier(.3,1.4,.5,1);z-index:2}
.stage-parrot .bubble{opacity:0;transition-delay:.5s}
.story-stage:not([data-step="1"]) .stage-parrot{opacity:1;transform:none}
.story-stage[data-step="2"] .stage-parrot .bubble{opacity:1}
.ov{inset:0;opacity:0;pointer-events:none;transition:opacity .5s}
.story-stage[data-step="1"] .ov-signin,.story-stage[data-step="3"] .ov-love,.story-stage[data-step="4"] .ov-food,.story-stage[data-step="5"] .ov-beg,.story-stage[data-step="6"] .ov-note,.story-stage[data-step="7"] .ov-level{opacity:1}
.ov>*{position:absolute}
.ov-signin{background:color-mix(in srgb,var(--ink) 30%,transparent);z-index:2}
.mini-popup{left:50%;top:50%;width:46%;height:72%;transform:translate(-50%,-46%) scale(.92);background:var(--surface);border-radius:3cqw;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1.6cqw;padding:3cqw;text-align:center;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.story-stage[data-step="1"] .mini-popup{transform:translate(-50%,-50%)}
.mini-popup b{font:600 2.7cqw/1.15 "Fredoka",sans-serif}
.g-btn{display:flex;align-items:center;gap:1.2cqw;background:var(--ink);color:var(--bg);font:800 2.1cqw/1 "Nunito",sans-serif;padding:1.6cqw 2.6cqw;border-radius:999px}
.g-btn .g{display:grid;place-items:center;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#fff;color:#4285F4;font-weight:900;font-size:1.9cqw}
.mini-popup small{font:800 1.9cqw/1 "Nunito",sans-serif;color:var(--muted)}
.cursor{font-size:6cqw;left:44%;bottom:30%;animation:stroke 1.4s ease-in-out infinite;z-index:4}
@keyframes stroke{0%,100%{transform:translate(-3cqw,0) rotate(-12deg)}50%{transform:translate(3cqw,-1cqw) rotate(8deg)}}
.h{width:3.6cqw;height:3.6cqw;left:40%;bottom:24%;opacity:0}
.story-stage[data-step="3"] .h{animation:rise 2.1s ease-out infinite}
.h2{left:47%!important;animation-delay:.7s!important}.h3{left:43%!important;animation-delay:1.4s!important}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-16cqw) scale(1.2)}}
.ov-love .ball{width:5cqw;height:5cqw;left:76%;bottom:2%}
.story-stage[data-step="3"] .ov-love .ball{animation:bounce 1.6s cubic-bezier(.3,0,.6,1) infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12cqw) rotate(180deg)}}
.dock{right:3%;bottom:4%;display:flex;align-items:center;gap:1cqw;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1cqw 1.2cqw;box-shadow:var(--shadow)}
.dock span{width:4.6cqw;height:3.4cqw}
.dock b{width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--pink);color:#fff;padding:1cqw}
.drop{width:7cqw;height:4.2cqw;left:36%;bottom:70%}
.story-stage[data-step="4"] .drop{animation:drop 2.8s cubic-bezier(.5,0,1,1) infinite}
@keyframes drop{0%{bottom:70%;opacity:0}10%{opacity:1}35%,75%{bottom:3%;opacity:1}90%,100%{bottom:3%;opacity:0}}
.treat-chip{left:4%;bottom:5%;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1cqw 2cqw;font:800 2.2cqw/1 "Nunito",sans-serif;box-shadow:var(--shadow)}
.beg-card{left:60%;bottom:30%;display:flex;flex-direction:column;gap:1cqw;transform:scale(.6);transform-origin:0 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1) .3s}
.story-stage[data-step="5"] .beg-card{transform:none}
.beg-card span{background:var(--pink);color:#fff;font:800 2.2cqw/1 "Nunito",sans-serif;padding:1.5cqw 2.6cqw;border-radius:999px;box-shadow:var(--shadow)}
.beg-card .ghost{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.visitor-walk{left:105%;bottom:1%;width:17%;transition:left 2.4s linear}
.story-stage[data-step="6"] .visitor-walk{left:52%}
.visitor-walk .visitor{transform:scaleX(-1)}
.visitor-walk .tag{position:absolute;bottom:96%;left:50%;transform:translateX(-50%);background:var(--purple);color:#fff;font:800 max(10px,1.7cqw)/1 "Nunito",sans-serif;padding:.7cqw 1.4cqw;border-radius:999px;white-space:nowrap}
.visitor-walk .bubble{bottom:calc(100% + 5.2cqw);white-space:normal;width:26cqw;text-align:center;opacity:0;transform:translate(-50%,10px) scale(.8)}
.story-stage[data-step="6"] .visitor-walk .bubble{opacity:1;transform:translateX(-50%);transition-delay:2.3s}
.lvl{left:4%;top:50%;width:40%;background:var(--surface);border:1px solid var(--line);border-radius:2cqw;padding:1.6cqw 2cqw;box-shadow:var(--shadow);display:flex;align-items:center;gap:1.6cqw;font:700 2.4cqw/1 "Fredoka",sans-serif}
.lvl-bar{flex:1;height:1.6cqw;border-radius:999px;background:var(--page-line);overflow:hidden}
.lvl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--pink));border-radius:inherit;transition:width 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.story-stage[data-step="7"] .lvl-bar i{width:100%}
.badge-pop{left:10%;top:66%;display:flex;align-items:center;gap:1cqw;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1cqw 2cqw 1cqw 1.2cqw;font-size:3.4cqw;box-shadow:var(--shadow);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1) 1.4s}
.badge-pop small{font:800 1.9cqw/1 "Nunito",sans-serif}
.badge-pop.b2{left:20%;top:80%;transition-delay:1.8s}
.story-stage[data-step="7"] .badge-pop{transform:none}

/* ---------- family ---------- */
.species-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1200px;margin:0 auto}
.species-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:22px 26px 26px;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.3,1.4,.5,1),box-shadow .4s}
.species-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-lg)}
.species-pet{display:grid;place-items:center;width:100%;aspect-ratio:16/10;border:0;border-radius:20px;background:var(--tone);cursor:pointer;margin-bottom:20px;position:relative;overflow:hidden}
.species-pet::after{content:"";position:absolute;left:18%;right:18%;bottom:12%;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.species-pet>span{width:56%;aspect-ratio:100/90;margin-top:6%;position:relative;z-index:1}
.species-card h3{font-size:28px;margin-bottom:8px}
.species-card h3 small{font:700 15px/1 "Nunito",sans-serif;color:var(--muted);margin-left:6px}
.species-card>p{color:var(--muted);margin-bottom:18px}
.meters{display:grid;gap:8px;margin-bottom:18px}
.meters label{display:grid;grid-template-columns:76px 1fr;align-items:center;font-weight:800;font-size:13px;color:var(--muted)}
.meters span{height:9px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.meters i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--yellow),var(--pink));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .3s}
.in .meters i{transform:none}
.coats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.coat{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px 5px 5px;font-weight:800;font-size:13px;cursor:pointer;transition:border-color .2s,transform .2s}
.coat:hover{transform:translateY(-2px)}
.coat[aria-pressed="true"]{border-color:var(--pink)}
.coat i{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--a) 55%,var(--b) 55%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fav{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--muted)}
.fav span{width:30px;height:20px}

/* ---------- playground ---------- */
.play{padding-top:0}
.play-card{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center;background:linear-gradient(135deg,#7C6CF2,#B36CF2 55%,#FF6F9F);color:#fff;border-radius:32px;padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.play-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 110%,rgba(255,255,255,.22),transparent 40%),radial-gradient(circle at 90% -10%,rgba(255,201,60,.35),transparent 40%);pointer-events:none}
.play-card .eyebrow{color:#FFE58A}
.play-card h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:12px}
.play-card p{opacity:.9;font-size:18px}
.play-buttons{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.pbtn{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:15px;padding:10px 16px 10px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.pbtn:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
.pbtn:active{transform:scale(.95)}
.pbtn>span{width:26px;height:20px}
.pbtn .gold{font-size:18px}
.gestures{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1200px;margin:22px auto 0}
.gesture{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px}
.g-ico{font-size:26px;margin-bottom:6px}
.g-ico.kbd{font:800 16px/1 "Nunito",sans-serif;background:var(--lilac);border-radius:8px;padding:6px 8px;align-self:flex-start}
.gesture b{font:600 18px/1.2 "Fredoka",sans-serif}
.gesture small{color:var(--muted);font-weight:700;font-size:14px}

/* ---------- friends ---------- */
.friends{background:var(--bg-2)}
.friends-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);max-width:1200px;margin:0 auto;align-items:center}
.friends h2{margin-bottom:16px}
.ticks{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.ticks li{display:flex;gap:16px;align-items:flex-start}
.ticks li>span{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:22px}
.ticks b{display:block;font:600 19px/1.3 "Fredoka",sans-serif;margin-bottom:2px}
.ticks div{color:var(--muted)}
.friends-demo{display:grid;gap:18px}
.popup-mock{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow-lg);transform:rotate(1.4deg)}
.pm-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pm-head b{font:600 20px/1 "Fredoka",sans-serif}
.pm-head small{background:var(--lilac);border-radius:999px;padding:3px 9px;font-weight:800;font-size:13px}
.pm-add{display:flex;gap:8px;margin-bottom:14px}
.pm-add span{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;color:var(--muted);font-size:14px;font-weight:600}
.pm-add b{background:var(--pink);color:var(--pink-ink);border-radius:12px;padding:9px 14px;font-size:14px}
.pm-label{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.pm-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px}
.pm-row.incoming{background:color-mix(in srgb,var(--yellow) 18%,transparent);animation:wiggle 3s ease-in-out infinite}
@keyframes wiggle{0%,90%,100%{transform:none}93%{transform:rotate(-1deg)}96%{transform:rotate(1deg)}}
.pm-row>div{flex:1;min-width:0}
.pm-row b{display:block;font-size:15px}
.pm-row small{color:var(--muted);font-weight:600;font-size:13px}
.av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;font:700 15px/1 "Fredoka",sans-serif}
.pm-act{font-weight:800;font-size:13px;padding:6px 11px;border-radius:999px;border:1.5px solid var(--line);white-space:nowrap}
.pm-act.yes{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.composer{background:var(--surface);border:2px dashed color-mix(in srgb,var(--pink) 55%,transparent);border-radius:24px;padding:18px 20px;transform:rotate(-.8deg)}
.composer label{display:block;font-weight:700;margin-bottom:10px}
.carrier{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.carrier button{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-weight:800;font-size:14px;cursor:pointer}
.carrier button[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.compose-row{display:flex;gap:8px}
.compose-row input{flex:1;min-width:0;font:600 16px/1.2 "Nunito",sans-serif;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.compose-row input:focus{outline:none;border-color:var(--purple)}
.wordcount{margin-top:8px;font-weight:700;font-size:13px;color:var(--muted)}
.wordcount.over{color:#E5484D}

/* ---------- rewards ---------- */
.streak{max-width:1200px;margin:0 auto 24px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:24px clamp(18px,3vw,32px);box-shadow:var(--shadow)}
.streak-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px}
.streak-head b{font:600 22px/1 "Fredoka",sans-serif}
.streak-head small{color:var(--muted);font-weight:700}
.streak-days{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:6px}
.day{position:relative;aspect-ratio:1;border-radius:10px;background:var(--bg-2);display:grid;place-items:center;font:700 12px/1 "Fredoka",sans-serif;color:var(--muted);transition:background .3s,color .3s,transform .3s}
.day.lit{background:linear-gradient(135deg,var(--yellow),#FF9A3C);color:#fff;transform:scale(1.04)}
.day.mile{box-shadow:0 0 0 2px var(--pink)}
.day.mile em{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font:800 11px/1 "Nunito",sans-serif;font-style:normal;background:var(--pink);color:#fff;padding:4px 7px;border-radius:999px;white-space:nowrap;z-index:1}
.streak-days{padding-top:26px;row-gap:32px}
.rewards-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;max-width:1200px;margin:0 auto}
.badges-card,.closet-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.badges-card h3,.closet-card h3{margin-bottom:16px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:10px 12px;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .4s,transform .5s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i) * 60ms)}
.in .badge{opacity:1;transform:none}
.badge span{font-size:24px}
.badge b{display:block;font-size:14px;line-height:1.2}
.badge small{color:var(--muted);font-weight:700;font-size:12px}
.closet-card p{color:var(--muted);margin:-8px 0 12px}
.closet-pet{display:grid;place-items:center;background:var(--lilac);border-radius:20px;padding:20px 0 8px;margin-bottom:14px}
.closet-pet>span{width:44%;aspect-ratio:100/90}
.closet{display:flex;flex-wrap:wrap;gap:8px}
.closet button{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);background:var(--bg);border-radius:14px;padding:8px 10px;cursor:pointer;min-width:62px;transition:transform .2s,border-color .2s}
.closet button:hover{transform:translateY(-2px)}
.closet button[aria-pressed="true"]{border-color:var(--pink)}
.closet button span{font-size:22px}
.closet button small{font-weight:800;font-size:11px;color:var(--muted)}

/* ---------- features ---------- */
.features{background:var(--bg-2)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1240px;margin:0 auto}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature .fi{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;font-size:24px;margin-bottom:14px;background:var(--tone,var(--lilac))}
.feature h3{font-size:19px;margin-bottom:6px}
.feature p{color:var(--muted);font-size:15px;line-height:1.5}
.feature .tag{display:inline-block;margin-top:10px;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}

/* ---------- pricing ---------- */
.billing{display:inline-flex;gap:4px;margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px}
.billing button{border:0;background:none;border-radius:999px;padding:9px 18px;font-weight:800;font-size:15px;cursor:pointer;color:var(--muted)}
.billing button[aria-checked="true"]{background:var(--ink);color:var(--bg)}
.billing em{font-style:normal;color:var(--mint);font-size:12px;margin-left:4px}
.billing button[aria-checked="true"] em{color:#8DE3B3}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1240px;margin:0 auto;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px 24px;box-shadow:var(--shadow)}
.plan h3{font-size:24px}
.price{margin:14px 0 18px;display:flex;align-items:baseline;gap:6px}
.price b{font:700 44px/1 "Fredoka",sans-serif}
.price small{color:var(--muted);font-weight:700}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;flex:1}
.plan li{display:flex;gap:10px;font-weight:600;font-size:15px}
.plan li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;background:color-mix(in srgb,var(--mint) 22%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%2353C98C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.plan.featured{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-10px)}
.plan.featured.in{transform:translateY(-10px)}
.plan.featured .price small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.ribbon{position:absolute;top:-13px;left:24px;background:var(--yellow);color:#2B2340;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.packs{display:flex;flex-wrap:wrap;align-items:center;gap:14px;max-width:1240px;margin:32px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px 22px}
.packs-copy{flex:1 1 220px}
.packs-copy b{display:block;font:600 20px/1.2 "Fredoka",sans-serif}
.packs-copy small{color:var(--muted);font-weight:700}
.pack{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:10px 16px;flex:1 1 190px}
.pack span{grid-row:span 2;font-size:28px}
.pack b{font-size:15px}
.pack small{grid-column:2;color:var(--muted);font-weight:700;font-size:13px}
.pack em{grid-row:1/span 2;grid-column:3;font:700 20px/1 "Fredoka",sans-serif;font-style:normal}
.pack.hot{border-color:var(--pink);box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 18%,transparent)}

/* ---------- privacy / faq / final ---------- */
.privacy{display:flex;gap:28px;align-items:center;max-width:1000px;margin:0 auto;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.privacy h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.privacy p{color:var(--muted);font-size:18px}
.shield{flex:none;display:grid;place-items:center;width:96px;height:96px;border-radius:30px;background:var(--mint-soft);font-size:46px;transform:rotate(-6deg)}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:4px 22px;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 19px/1.3 "Fredoka",sans-serif;padding:16px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lilac);font:700 20px/1 "Nunito",sans-serif;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 18px}
.final{padding-top:clamp(90px,10vw,140px)}
.final-card{position:relative;max-width:1100px;margin:0 auto;text-align:center;background:linear-gradient(135deg,#FF6F9F,#FF9A6C 50%,#FFC93C);color:#fff;border-radius:36px;padding:clamp(70px,8vw,100px) clamp(20px,4vw,48px) clamp(40px,5vw,60px);box-shadow:var(--shadow-lg)}
.final-pets{position:absolute;left:50%;top:0;transform:translate(-50%,-62%);display:flex;align-items:flex-end;gap:2%;width:min(420px,80%)}
.final-pets>span{flex:1;aspect-ratio:100/90}
.final-pets>span:nth-child(2){flex:.8;margin-bottom:6%}
.final-card h2{color:#fff;margin-bottom:12px;text-shadow:0 2px 0 rgba(0,0,0,.06)}
.final-card>p{font-size:20px;opacity:.95;margin-bottom:28px}
.unpacked{max-width:520px;margin:26px auto 0;text-align:left;background:rgba(255,255,255,.16);border-radius:18px;padding:4px 18px}
.unpacked summary{cursor:pointer;font-weight:800;padding:12px 0}
.unpacked ol{margin:0;padding:0 0 14px 20px;display:grid;gap:6px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:40px clamp(16px,5vw,64px) 120px;border-top:1px solid var(--line);margin-top:clamp(60px,8vw,100px)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{text-decoration:none;font-weight:700;color:var(--muted)}
.foot small{margin-left:auto;color:var(--muted);font-weight:600}
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);font-weight:800;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.3,1.6,.5,1);z-index:70;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan.featured,.plan.featured.in{transform:none}
  .gestures{grid-template-columns:repeat(3,minmax(0,1fr))}
  .species-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;text-align:center}
  .hero .lede{margin-inline:auto}
  .hero-cta,.hero-proof{justify-content:center}
  .browser.tilt{transform:none}
  
  .play-card{grid-template-columns:1fr}
  .friends-grid{grid-template-columns:1fr}
  .rewards-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .streak-days{grid-template-columns:repeat(10,minmax(0,1fr))}
  /* story: stage pins to the top, steps scroll underneath */
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-stage-wrap{position:sticky;top:52px;z-index:5;padding:14px 0 12px;background:linear-gradient(var(--bg) 85%,transparent)}
  .story-stage{position:relative;top:0;max-width:520px;margin:0 auto}
  .stage-dots{margin-top:10px}
  .story-steps{padding:4vh 0 30vh}
  .step{min-height:55vh;justify-content:flex-start;padding-top:10vh;transform:none}
  .step p{font-size:17px}
}
@media (max-width:600px){
  body{font-size:16px}
  .nav .btn{padding:9px 14px}
  .hero h1{font-size:clamp(38px,11vw,52px)}
  .hero-cta .btn{width:100%}
  .feature-grid,.plans,.gestures{grid-template-columns:1fr}
  .gestures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .streak-days{grid-template-columns:repeat(6,minmax(0,1fr))}
  .privacy{flex-direction:column;text-align:center}
  .foot small{margin-left:0}
  .marquee span{font-size:17px}
  .pm-row{flex-wrap:wrap}
  .compose-row{flex-direction:column}
  .squiggle{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}