.phone-frame{position:relative;display:flex;justify-content:center;width:300px;max-width:100%;margin-inline:auto}.phone-note{position:absolute;top:-14px;left:50%;transform:translate(-50%) rotate(-3deg);z-index:3;padding:.35rem .9rem;font-size:.85rem;font-weight:700;letter-spacing:.02em;color:#03453d;background:#fff7ed;border-radius:.5rem;box-shadow:0 6px 14px #0000001f;white-space:nowrap}.phone-body{position:relative;width:300px;aspect-ratio:300 / 620;padding:14px;border-radius:44px;background:linear-gradient(160deg,#1f2937,#0b0f14);box-shadow:0 40px 80px #00000047,inset 0 0 0 2px #ffffff0f}.phone-island{position:absolute;top:22px;left:50%;transform:translate(-50%);z-index:2;width:96px;height:26px;border-radius:16px;background:#05080b}.phone-statusbar{position:absolute;top:24px;left:50%;transform:translate(-50%);z-index:2;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 56px);color:#fff;pointer-events:none}.phone-time{font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}.phone-status-icons{display:inline-flex;align-items:center;gap:5px}.phone-screen{position:relative;width:100%;height:100%;padding-top:58px;border-radius:32px;overflow:hidden;background:#0d2b21}@media(max-width:480px){.phone-frame,.phone-body{width:270px}}.interactive-hero{display:flex;flex-direction:column;align-items:center;gap:1.1rem}.hero-tabs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.25rem;padding:.25rem;border-radius:999px;background:#03453d14}.hero-tab{padding:.45rem 1.1rem;font-size:.85rem;font-weight:700;color:#03453d;background:transparent;border:none;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.hero-tab.is-active{color:#fff;background:linear-gradient(135deg,#02907d,#03453d);box-shadow:0 6px 14px #03453d40}.stamp-demo{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.75rem .85rem 1.1rem}.bonify-pass{position:relative;width:100%;border-radius:1.1rem;background:#fff;box-shadow:0 18px 34px #03453d38;overflow:hidden}.pass-header{padding:.85rem .95rem .9rem;color:#fff;background:linear-gradient(135deg,#02907d,#03453d);transition:background .5s ease}.bonify-pass.is-rewarded .pass-header{background:linear-gradient(135deg,#00c97a,#046b42)}.pass-brandline{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}.pass-brand{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:700;letter-spacing:.01em}.pass-brand-mark{width:18px;height:18px}.pass-status{display:inline-flex;align-items:center;padding:.15rem .55rem;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;background:#fff3}.pass-titleline{display:flex;align-items:baseline;justify-content:space-between}.pass-business{font-size:1.1rem;font-weight:800}.pass-count{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;opacity:.9}.pass-body{padding:.9rem .95rem 1rem}.pass-stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:78%;margin:0 auto 1rem}.pass-stamp{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;transition:transform .2s ease}.pass-stamp-frame{position:absolute;inset:0;background:#e3ebe9;-webkit-mask:url(/icons/frames/scallop-14.svg) center / contain no-repeat;mask:url(/icons/frames/scallop-14.svg) center / contain no-repeat;transition:background .3s ease}.pass-stamp.is-filled .pass-stamp-frame{background:#02907d}.pass-stamp-icon{position:relative;width:56%;height:56%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}.pass-stamp.is-bouncing{animation:chipPop .42s cubic-bezier(.34,1.56,.64,1)}@keyframes chipPop{0%{transform:scale(.2);opacity:.4}60%{transform:scale(1.3);opacity:1}to{transform:scale(1)}}.pass-qr{position:relative;width:116px;margin:0 auto .85rem;padding:7px;border-radius:.65rem;background:#fff;border:1px solid #eef2f1}.pass-qr-img{display:block;width:100%;border-radius:.35rem}.pass-qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;padding:3px;border-radius:7px;background:#fff;box-shadow:0 1px 3px #00000026}.pass-reward{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.92rem;font-weight:700;color:#03453d}.pass-reward-label{padding:.12rem .5rem;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6366f1;background:#6366f11f;border-radius:999px}.pass-banner{margin:0 .95rem .95rem;padding:.5rem .6rem;text-align:center;font-size:.8rem;font-weight:800;color:#03453d;border-radius:.6rem;background:#32ffa138;animation:bannerIn .45s ease}@keyframes bannerIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.cashback-demo{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.75rem .85rem 1.1rem}.cashback-body{padding-top:1.1rem;padding-bottom:1.2rem}.cashback-balance{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}.cashback-balance-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6366f1}.cashback-balance-value{margin-top:.25rem;font-size:2.1rem;font-weight:800;line-height:1.1;color:#03453d;font-variant-numeric:tabular-nums}.cashback-rate{margin-top:.4rem;font-size:.72rem;font-weight:600;color:#6b7280}.cashback-gains{position:absolute;top:-6px;left:50%;transform:translate(-50%);pointer-events:none}.cashback-gain{position:absolute;left:50%;transform:translate(-50%);white-space:nowrap;font-size:.95rem;font-weight:800;color:#02907d;animation:cashbackRise 1.2s ease-out forwards}@keyframes cashbackRise{0%{opacity:0;transform:translate(-50%,14px) scale(.8)}25%{opacity:1;transform:translate(-50%,-2px) scale(1)}to{opacity:0;transform:translate(-50%,-38px) scale(1)}}.cashback-controls{display:flex;flex-direction:column;gap:.6rem;width:100%}.cashback-input{display:flex;align-items:center;gap:.4rem;padding:.55rem .85rem;background:#ffffffeb;border-radius:.7rem;box-shadow:inset 0 0 0 1.5px #03453d2e}.cashback-input-prefix{font-size:1.05rem;font-weight:800;color:#03453d}.cashback-input input{flex:1;min-width:0;font-size:1.05rem;font-weight:700;color:#03453d;background:transparent;border:none;outline:none;font-variant-numeric:tabular-nums}.cashback-presets{display:flex;gap:.4rem}.cashback-preset{flex:1;padding:.4rem 0;font-size:.8rem;font-weight:700;color:#03453d;background:#ffffffd9;border:1px solid rgba(3,69,61,.14);border-radius:.55rem;cursor:pointer;transition:background .18s ease,transform .1s ease}.cashback-preset:hover{background:#fff}.cashback-preset:active{transform:scale(.96)}.cashback-button{justify-content:center;width:100%}.membership-demo{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.75rem .85rem 1.1rem}.membership-body{display:flex;flex-direction:column;gap:.85rem}.mem-member{display:flex;align-items:center;gap:.6rem}.mem-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#02907d,#03453d)}.mem-member-info{display:flex;flex-direction:column;line-height:1.15}.mem-member-name{font-size:.9rem;font-weight:800;color:#03453d}.mem-member-sub{font-size:.68rem;color:#6b7280}.mem-tiers{display:flex;gap:.35rem}.mem-tier{flex:1;padding:.4rem 0;font-size:.74rem;font-weight:700;color:#03453d;background:#ffffffd9;border:1px solid rgba(3,69,61,.14);border-radius:.55rem;cursor:pointer;transition:background .18s ease,color .18s ease,transform .1s ease}.mem-tier:hover{background:#fff}.mem-tier:active{transform:scale(.96)}.mem-tier.is-active{color:#fff;background:linear-gradient(135deg,#02907d,#03453d);border-color:transparent}.mem-benefit{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.82rem;font-weight:600;color:#03453d}.mem-benefit-label{padding:.12rem .5rem;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6366f1;background:#6366f11f;border-radius:999px;flex-shrink:0}.mem-classes-head{display:flex;align-items:baseline;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}.mem-classes-head strong{font-size:.95rem;color:#03453d;font-variant-numeric:tabular-nums}.mem-classes{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.mem-class{aspect-ratio:1;border-radius:6px;transition:background .3s ease,box-shadow .3s ease,transform .2s ease}.mem-class.is-available{background:linear-gradient(135deg,#02907d,#03453d);box-shadow:inset 0 0 0 1px #03453d33}.mem-class.is-used{background:#e3ebe9;box-shadow:inset 0 0 0 1px #03453d14}.mem-class.is-removing{animation:memClassPop .38s cubic-bezier(.34,1.56,.64,1)}@keyframes memClassPop{0%{transform:scale(1);background:#02907d}45%{transform:scale(1.4);background:#ffd166}to{transform:scale(1)}}.membership-button{width:100%;justify-content:center}@media(prefers-reduced-motion:reduce){.mem-class.is-removing{animation:none}}.stamp-button{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.2rem;font-size:.9rem;font-weight:700;color:#fff;background:#03453d;border:none;border-radius:999px;cursor:pointer;box-shadow:0 8px 18px #03453d47;transition:transform .12s ease,box-shadow .2s ease}.stamp-button:hover{transform:translateY(-1px)}.stamp-button:active{transform:translateY(1px) scale(.98)}.stamp-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:.95rem;line-height:1;border-radius:50%;color:#fff;background:linear-gradient(135deg,#32ffa1,#02907d)}.confetti{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;animation:confettiFly 1s ease-out forwards;animation-delay:var(--cdelay)}@keyframes confettiFly{0%{transform:translate(0) scale(.6);opacity:1}to{transform:translate(var(--cx),var(--cy)) scale(1) rotate(220deg);opacity:0}}@media(prefers-reduced-motion:reduce){.pass-stamp.is-bouncing,.confetti-piece,.pass-banner{animation:none}}.coupon-demo{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.75rem .85rem 1.1rem}.coupon-pass.is-used .pass-status{background:#e5484d59}.coupon-body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:1rem;padding-bottom:1.15rem;transition:filter .4s ease}.coupon-offer-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6366f1}.coupon-offer{margin-top:.25rem;margin-bottom:.85rem;font-size:1.7rem;font-weight:800;line-height:1.1;color:#03453d}.coupon-meta{margin:.6rem 0 0;font-size:.72rem;font-weight:600;color:#6b7280}.bonify-pass.is-used .coupon-body{filter:grayscale(.85) opacity(.6)}.coupon-stamp{position:absolute;top:56%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);padding:.2rem 1rem;font-size:1.4rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#e5484d;border:4px solid #e5484d;border-radius:.6rem;pointer-events:none;animation:couponStamp .42s cubic-bezier(.34,1.56,.64,1)}@keyframes couponStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2)}to{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}@media(prefers-reduced-motion:reduce){.coupon-stamp{animation:none}}