:root{--ink:#15131a;--cream:#fff6df;--yellow:#ffe14d;--coral:#ff5a4e;--mint:#7fe0b8;--indigo:#3442d9;--pink:#ff9ecb;--r:22px;--sh:6px 6px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500;color:var(--ink);background:var(--cream);
 background-image:radial-gradient(rgba(52,66,217,.07) 9px,transparent 10px);background-size:44px 44px;overflow-x:hidden;line-height:1.5}
img{max-width:100%;display:block}a{color:var(--indigo)}
h1,h2,h3,h4{margin:0;line-height:1.05}
code{font-family:ui-monospace,Menlo,monospace;background:rgba(0,0,0,.06);padding:2px 6px;border-radius:6px;font-size:.92em;word-break:break-all}
.muted{color:#5b5662}.small{font-size:14px}.tiny{font-size:12.5px;color:#5b5662;margin:6px 0 0}.center{text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;text-decoration:none;color:var(--ink);
 background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px 20px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-sm{padding:7px 12px;font-size:14px;border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.btn-big{font-size:19px;padding:15px 26px;border-radius:18px;box-shadow:var(--sh)}
.btn-block{width:100%}
.btn-coral{background:var(--coral);color:#fff}.btn-indigo{background:var(--indigo);color:#fff}.btn-yellow{background:var(--yellow)}
.btn-ghost{background:#fff}.btn-wa{background:#25d366;color:#fff}.btn-x{background:#111;color:#fff}
.btn[disabled]{opacity:.6;cursor:wait}
.wiggle:hover{animation:wig .45s ease-in-out}
.wiggle-hover:hover{animation:wig .5s ease-in-out}
@keyframes wig{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) scale(1.03)}40%{transform:rotate(3deg) scale(1.03)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,48px);
 background:var(--yellow);border-bottom:4px solid var(--ink)}
.logo{font-family:"Rubik Mono One",sans-serif;font-size:19px;text-decoration:none;color:var(--ink);letter-spacing:-.5px}
.logo span{color:var(--coral);margin:0 2px}
.topbar nav{display:flex;gap:22px}.topbar nav a{color:var(--ink);text-decoration:none;font-weight:800}
.topbar nav a:hover{text-decoration:underline wavy var(--coral)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:1240px;margin:0 auto;padding:56px clamp(16px,4vw,48px) 40px}
.kicker{display:inline-block;background:var(--ink);color:var(--yellow);font-weight:800;padding:6px 14px;border-radius:99px;font-size:14px;letter-spacing:.04em}
.sticker-tilt{transform:rotate(-3deg)}
.hero h1{font-family:"Rubik Mono One",sans-serif;font-weight:400;font-size:clamp(44px,6.4vw,84px);letter-spacing:-2px;margin:18px 0 16px}
.hl-coral{color:var(--coral);-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--ink);display:inline-block;transform:rotate(-3deg)}
.lead{font-size:clamp(17px,1.6vw,20px);max-width:560px;margin:0 0 22px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}

.progress-card{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px;max-width:560px}
.progress-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.raised{font-family:"Rubik Mono One";font-size:32px}
.pct{font-family:"Rubik Mono One";background:var(--mint);border:3px solid var(--ink);border-radius:12px;padding:4px 10px;transform:rotate(3deg)}
.thermo{position:relative;height:34px;border:4px solid var(--ink);border-radius:99px;background:#f2eee2;margin:14px 0 8px;overflow:visible}
.thermo-fill{position:relative;height:100%;width:3%;min-width:34px;border-radius:99px;background:repeating-linear-gradient(-45deg,var(--coral) 0 14px,#ff7f73 14px 28px);
 background-size:40px 40px;animation:stripes 1s linear infinite;transition:width 1.2s cubic-bezier(.2,1.4,.4,1)}
@keyframes stripes{to{background-position:40px 0}}
.runner{position:absolute;right:-14px;top:50%;transform:translateY(-55%);font-size:30px;animation:hop .6s ease-in-out infinite alternate;filter:drop-shadow(2px 2px 0 var(--ink))}
@keyframes hop{to{transform:translateY(-85%) rotate(12deg)}}
.thermo-ticks{position:absolute;inset:0;display:flex;justify-content:space-evenly;pointer-events:none}.thermo-ticks i{width:3px;background:rgba(0,0,0,.15)}
.progress-bottom{display:flex;justify-content:space-between;font-weight:800;font-size:15px}
.progress-quip{margin:8px 0 0;font-family:Caveat,cursive;font-size:24px;color:var(--indigo)}

.hero-art{position:relative;text-align:center}
.tilt-stage{position:relative;perspective:900px;display:inline-block;padding:20px 60px;cursor:grab;touch-action:pan-y;user-select:none}
.tilt-stage:active{cursor:grabbing}
.tilt-stage::before{content:"";position:absolute;inset:8% 6%;background:var(--mint);border:4px solid var(--ink);border-radius:50%;z-index:-1;box-shadow:var(--sh)}
.tilt-phone{width:min(300px,62vw);transform-style:preserve-3d;transition:transform .15s ease-out;filter:drop-shadow(14px 18px 0 rgba(21,19,26,.25))}
.sticker{position:absolute;font-weight:800;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.15;animation:float 3s ease-in-out infinite}
.sticker b{font-family:"Rubik Mono One";font-size:22px;font-weight:400}
.s1{top:6%;left:-4%;background:var(--yellow);transform:rotate(-10deg)}
.s2{top:42%;right:-6%;background:var(--coral);color:#fff;transform:rotate(8deg);animation-delay:-1s}
.s3{bottom:8%;left:0;background:var(--pink);transform:rotate(-6deg);animation-delay:-2s;border-radius:50%;width:116px;height:116px;display:grid;place-items:center;text-align:center;font-size:14px}
@keyframes float{50%{translate:0 -8px}}
.hint{font-family:Caveat,cursive;font-size:24px;margin:6px 0 0}

/* marquee */
.marquee{background:var(--ink);color:var(--yellow);border-block:4px solid var(--ink);overflow:hidden;transform:rotate(-1.5deg);margin:30px -10px;box-shadow:0 6px 0 var(--coral)}
.marquee-track{display:flex;width:max-content;animation:marq 28s linear infinite}
.marquee span{font-family:"Rubik Mono One";font-size:20px;padding:14px 0;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.section{max-width:1240px;margin:0 auto;padding:64px clamp(16px,4vw,48px)}
.section-title{font-family:"Rubik Mono One";font-weight:400;font-size:clamp(28px,4vw,46px);margin-bottom:30px;letter-spacing:-1px}
.section-title small{display:block;font-family:Caveat,cursive;font-size:clamp(22px,2.4vw,30px);color:var(--coral);letter-spacing:0;margin-top:6px}
.num{display:inline-block;background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:2px 10px;font-size:.55em;vertical-align:middle;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--ink);margin-right:8px}

/* goal */
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.gallery-main{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;aspect-ratio:2000/2474}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.thumbs button{padding:0;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;aspect-ratio:1;transition:transform .15s}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button:hover{transform:rotate(-4deg) scale(1.06)}.thumbs button.on{box-shadow:3px 3px 0 var(--coral);transform:translateY(-3px)}
.pill{display:inline-block;background:var(--mint);border:3px solid var(--ink);border-radius:99px;padding:4px 12px;font-weight:800;font-size:13px}
.goal-info h3{font-size:clamp(26px,2.8vw,36px);margin:14px 0}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.price{font-family:"Rubik Mono One";font-size:44px}.mrp{font-size:22px;color:#8b8592}
.save-badge{background:var(--yellow);border:3px solid var(--ink);border-radius:12px;padding:4px 10px;font-weight:800;transform:rotate(-4deg);display:inline-block}
.specs{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:3px solid var(--ink);border-radius:16px;overflow:hidden;margin:18px 0;box-shadow:4px 4px 0 var(--ink)}
.specs th,.specs td{text-align:left;padding:10px 14px;border-bottom:2px dashed #e4dfd3;vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{width:32%;background:#fff3c4;font-weight:800}
.see-case{font-weight:800;font-size:15px;color:var(--ink)}.see-case:hover{color:var(--coral)}

/* why cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:4px solid var(--ink);border-radius:var(--r);padding:22px;box-shadow:var(--sh);transition:transform .2s}
.card:nth-child(odd){transform:rotate(-1deg)}.card:nth-child(even){transform:rotate(1deg)}
.card .emo{font-size:42px}.card h4{font-size:22px;margin:8px 0}.card p{margin:0}
.c-yellow{background:var(--yellow)}.c-mint{background:var(--mint)}.c-indigo{background:var(--indigo);color:#fff}.c-coral{background:var(--coral);color:#fff}.c-white{background:#fff}

/* drop test */
.drop-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:28px;overflow:hidden}
.seg{display:flex;flex-direction:column;gap:10px;margin:16px 0 20px}
.seg-btn{font:inherit;font-weight:800;text-align:left;padding:12px 16px;border:3px solid var(--ink);border-radius:14px;background:#fff;cursor:pointer}
.seg-btn.on{background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}
.drop-result{font-family:Caveat,cursive;font-size:28px;min-height:2.4em;margin:16px 0 0;color:var(--indigo)}
.drop-stage{position:relative;height:380px;background:linear-gradient(#dff6ff,#fff);border:3px solid var(--ink);border-radius:18px;overflow:hidden}
.floor{position:absolute;bottom:0;left:0;right:0;height:46px;background:repeating-linear-gradient(90deg,#c98b52 0 60px,#b77942 60px 120px);border-top:4px solid var(--ink);
 display:grid;place-items:center;font-family:"Rubik Mono One";font-size:12px;color:#fff}
.drop-phone{position:absolute;left:50%;top:20px;width:96px;height:200px;margin-left:-48px}
.naked-phone{position:absolute;inset:0;background:linear-gradient(135deg,#d8d8de,#9fa0a8);border:4px solid #555;border-radius:20px}
.naked-phone .cam{position:absolute;width:22px;height:22px;border-radius:50%;background:#222;border:3px solid #888}
.c1{top:12px;left:10px}.c2{top:38px;left:10px}.c3{top:25px;left:36px}
.cased-phone{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);object-fit:contain;display:none}
.drop-phone.cased .naked-phone{display:none}.drop-phone.cased .cased-phone{display:block}
.crack{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 0 1px #000)}
.drop-phone.broken .crack{opacity:1}
.drop-phone.falling{animation:fall .55s cubic-bezier(.55,0,1,.45) forwards}
.drop-phone.bounce{animation:bounce .9s ease-out forwards}
.drop-phone.splat{animation:splat .4s ease-out forwards}
@keyframes fall{from{top:20px;transform:rotate(0)}to{top:126px;transform:rotate(200deg)}}
@keyframes bounce{0%{top:126px;transform:rotate(200deg)}35%{top:60px;transform:rotate(300deg)}65%{top:126px;transform:rotate(360deg)}82%{top:105px}100%{top:126px;transform:rotate(360deg)}}
@keyframes splat{0%{top:126px;transform:rotate(200deg)}50%{transform:rotate(170deg) scale(1.08,.9)}100%{top:150px;transform:rotate(180deg)}}
.pow{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(0) rotate(-12deg);font-family:"Rubik Mono One";font-size:44px;color:var(--yellow);
 -webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--coral);pointer-events:none;transition:transform .25s cubic-bezier(.2,1.8,.4,1)}
.pow.show{transform:translate(-50%,-50%) scale(1) rotate(-12deg)}

/* chip in */
.chipin{scroll-margin-top:70px}
.stepper{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 20px;flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:8px;font-weight:800;padding:8px 14px 8px 8px;border:3px solid var(--ink);border-radius:99px;background:#fff;opacity:.55}
.stepper li b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px}
.stepper li.on{opacity:1;background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}.stepper li.done{opacity:1;background:var(--mint)}
.panel{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);padding:clamp(18px,3vw,32px)}
.panel h3{font-size:26px;margin-bottom:14px}
.pay-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.chip{font:inherit;text-align:left;border:3px solid var(--ink);border-radius:16px;background:#fffdf5;padding:12px 14px;cursor:pointer;transition:transform .12s;display:flex;flex-direction:column;gap:2px}
.chip b{font-family:"Rubik Mono One";font-weight:400;font-size:22px}.chip span{font-size:13.5px;line-height:1.25}
.chip:hover{transform:rotate(-2deg) translateY(-2px)}
.chip.on{background:var(--coral);color:#fff;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.5deg)}
.chip-legend{background:#fff3c4}.chip-custom{background:#eef0ff}
.custom-amt{display:block;font-weight:800;margin-bottom:12px}
.custom-amt input,.form input,.form textarea{display:block;width:100%;font:inherit;font-size:17px;padding:12px 14px;border:3px solid var(--ink);border-radius:14px;margin-top:6px;background:#fffdf5}
.custom-amt input:focus,.form input:focus,.form textarea:focus{outline:none;box-shadow:4px 4px 0 var(--coral)}
.tier-preview{font-family:Caveat,cursive;font-size:24px;color:var(--indigo);margin:4px 0 14px;min-height:1.4em}
.upi-id-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border:3px dashed var(--ink);border-radius:14px;flex-wrap:wrap;font-weight:800}
.qr-box{text-align:center}
.qr-frame{position:relative;display:inline-block;background:#fff;border:4px solid var(--ink);border-radius:20px;padding:16px;box-shadow:var(--sh);transform:rotate(2deg)}
.qr-frame #qr{width:220px;height:220px}.qr-frame #qr img,.qr-frame #qr canvas{width:220px!important;height:220px!important}
.qr-tag{position:absolute;top:-16px;right:-16px;background:var(--yellow);border:3px solid var(--ink);border-radius:12px;padding:4px 10px;font-family:"Rubik Mono One";font-size:16px;transform:rotate(10deg)}
.qr-tag b{font-weight:400}
.qr-cap{font-weight:800;margin-top:18px}
.paid-cta{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:3px dashed var(--ink);flex-wrap:wrap}
.paid-cta span{font-family:Caveat,cursive;font-size:28px}
.form{display:grid;gap:16px;max-width:640px}.form label{font-weight:800}
.form small{display:block;font-weight:500;color:#5b5662;margin-top:6px}
.form-err{color:#c0221a;font-weight:800;margin:0;min-height:1.2em}
.form-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.pending{text-align:center}
.pending-art{position:relative;height:170px;display:flex;justify-content:center;align-items:center;gap:6px}
.detective{font-size:84px;animation:sneak 2.4s ease-in-out infinite}
@keyframes sneak{0%,100%{transform:translateX(-30px) rotate(-6deg)}50%{transform:translateX(30px) rotate(6deg)}}
.bank-phone{width:84px;height:140px;border:4px solid var(--ink);border-radius:18px;background:var(--mint);display:flex;flex-direction:column;align-items:center;padding-top:14px;gap:8px;box-shadow:5px 5px 0 var(--ink);animation:wob 1.2s ease-in-out infinite}
.bank-phone span{font-size:30px}.bank-phone i{width:56px;height:8px;border-radius:4px;background:var(--ink);opacity:.35;animation:load 1.4s infinite}
.bank-phone i:nth-child(3){animation-delay:.2s}.bank-phone i:nth-child(4){animation-delay:.4s}
@keyframes load{50%{opacity:.9;width:30px}}@keyframes wob{50%{transform:rotate(4deg)}}
.sweat{position:absolute;top:24px;left:calc(50% - 70px);font-size:30px;animation:drip 1.4s ease-in infinite}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(40px);opacity:0}}
.pending-msg{font-family:Caveat,cursive;font-size:30px;color:var(--indigo);min-height:1.3em;margin:6px 0}
.live{font-weight:800;font-size:15px}.live .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#1db954;margin-right:6px;animation:pulse 1.2s infinite;vertical-align:middle}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(29,185,84,.6)}100%{box-shadow:0 0 0 14px rgba(29,185,84,0)}}
.pending-meta{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.pending-meta span{background:#fff3c4;border:3px solid var(--ink);border-radius:12px;padding:6px 12px;font-weight:800}
.resume-link{font-size:14px;margin:10px auto 0;max-width:700px}
.rejected{text-align:center}.big-emo{font-size:80px}
.approved h3{font-family:"Rubik Mono One";font-weight:400;font-size:clamp(20px,2.6vw,30px)}
.cert-wrap{margin:18px 0;border:4px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:var(--sh);background:#fff}
.cert-wrap canvas{width:100%;height:auto;display:block}
.share-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* wall */
.wall-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.legend{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:16px;box-shadow:4px 4px 0 var(--ink)}
.legend:nth-child(3n+1){transform:rotate(-1deg);background:#fff3c4}.legend:nth-child(3n+2){transform:rotate(1deg)}.legend:nth-child(3n){background:#e3fbf1}
.legend b{font-size:19px}.legend .lamt{font-family:"Rubik Mono One";float:right}.legend .ltier{font-size:13px;font-weight:800;color:var(--coral)}.legend p{margin:8px 0 0;font-family:Caveat,cursive;font-size:21px}
.wall-empty{grid-column:1/-1;text-align:center;font-weight:800;font-size:20px;padding:36px;border:3px dashed var(--ink);border-radius:18px;background:#fff}

/* reviews */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.q{margin:0;background:#fff;border:4px solid var(--ink);border-radius:var(--r);padding:22px;box-shadow:var(--sh);font-size:19px;font-weight:800;position:relative}
.q::before{content:"“";position:absolute;top:-34px;left:14px;font-size:90px;font-family:Pacifico;color:var(--coral)}
.q cite{display:block;font-style:normal;font-weight:500;font-size:15px;margin-top:12px}
.q1{transform:rotate(-1.5deg)}.q2{transform:rotate(1deg);background:var(--mint)}.q3{transform:rotate(-.5deg);background:var(--yellow)}

/* faq */
.faq details{background:#fff;border:3px solid var(--ink);border-radius:16px;margin-bottom:12px;box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.faq summary{cursor:pointer;font-weight:800;font-size:19px;padding:16px 50px 16px 18px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:"Rubik Mono One";font-size:22px;transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details[open] summary{background:var(--yellow)}
.faq details p{margin:0;padding:14px 18px 18px}

.final-cta{text-align:center;background:var(--indigo);color:#fff;border-block:4px solid var(--ink);padding:70px 20px;margin-top:40px}
.final-cta h2{font-family:"Rubik Mono One";font-weight:400;font-size:clamp(30px,5vw,58px);margin-bottom:26px;text-shadow:4px 4px 0 var(--ink)}
.see-case.light{display:block;color:#fff;margin-top:18px}
.footer{text-align:center;padding:26px 20px;font-size:13.5px;color:#5b5662;max-width:900px;margin:0 auto}

/* modal / toast / confetti */
.modal{position:fixed;inset:0;background:rgba(21,19,26,.6);display:grid;place-items:center;z-index:100;padding:16px}
.modal[hidden]{display:none}
.modal-card{position:relative;background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:28px;max-width:440px;width:100%;text-align:center}
.modal-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:22px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);background:var(--ink);color:#fff;font-weight:800;padding:12px 20px;border-radius:14px;z-index:120;transition:transform .3s;max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden}
.conf{position:absolute;top:-20px;width:10px;height:16px;animation:confall linear forwards}
@keyframes confall{to{transform:translateY(110vh) rotate(720deg)}}

/* responsive */
@media (max-width:960px){
 .hero,.goal-grid,.drop-wrap,.pay-grid{grid-template-columns:1fr}
 .hero{padding-top:30px;gap:20px}
 .hero-art{order:-1}
 .cards,.quotes{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .topbar nav{display:none}.logo{font-size:15px}
 .cards,.quotes{grid-template-columns:1fr}
 .chips{grid-template-columns:1fr 1fr}
 .thumbs{grid-template-columns:repeat(3,1fr)}
 .tilt-stage{padding:14px 40px}
 .sticker{font-size:12px;padding:7px 10px}.sticker b{font-size:16px}.s3{width:90px;height:90px;font-size:11.5px}
 .s1{left:-2%}.s2{right:-2%}
 .marquee span{font-size:15px}
 .price{font-size:34px}
 .btn-big{font-size:17px;padding:14px 18px}
 .hero-ctas .btn{flex:1}
 .paid-cta .btn{width:100%}
 .form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}
 .share-row .btn{flex:1 1 45%}
 .drop-stage{height:340px}
 .section{padding:44px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* fixes */
[hidden]{display:none!important}
html,body{overflow-x:clip}
@media (max-width:640px){.tilt-phone{width:min(220px,54vw)}.hero{padding-top:24px}.tilt-stage{padding:18px 48px 10px}}
.toast{opacity:0;visibility:hidden;transition:transform .3s,opacity .3s,visibility .3s}.toast.show{opacity:1;visibility:visible}
.marquee-wrap{overflow:hidden;padding:16px 0 22px;margin:14px 0}
.marquee-wrap .marquee{margin:0 -20px}
/* ---- Deep Blue accent (Apple iPhone 17 Pro Max "Deep Blue") ---- */
:root{--deep:#2f3d5e;--deep-2:#4a5d8a}
.deep{color:var(--deep);background:linear-gradient(transparent 58%,#cdd7ee 58%);padding:0 2px}
.s4{bottom:-2%;right:-4%;background:var(--deep);color:#fff;transform:rotate(5deg);animation-delay:-1.5s;font-size:14px}
.tilt-stage::after{content:"";position:absolute;inset:4% 2% 12% 10%;border:4px dashed var(--deep);border-radius:50%;z-index:-2;transform:rotate(8deg)}
.c-indigo{background:var(--deep)}
.final-cta{background:var(--deep);background-image:radial-gradient(rgba(255,255,255,.08) 10px,transparent 11px);background-size:46px 46px}
.marquee{box-shadow:0 6px 0 var(--coral),0 12px 0 var(--deep)}
.gal-note{margin:2px 0 8px}
.naked-phone{background:linear-gradient(135deg,#5b6f9c,#2f3d5e 55%,#1d2740);border-color:#1b2235}
.naked-phone .cam{border-color:#7f93c0}
@media (max-width:640px){.s4{font-size:11.5px;right:-2%;bottom:0}}
.s4{bottom:-6%;right:-16%}
@media (max-width:960px){.s4{right:-10%}}
@media (max-width:640px){.s4{right:-8%;bottom:-6%}}