.landing{--accent: #d97706;--accent-soft: #fef3c7;--ink: #1c1917;--muted: #78716c;--card: #ffffff;--line: #e7e5e4;--frame: #1c1917;--frame-edge: #44403c;--screen: #fafaf9}@media(prefers-color-scheme:dark){.landing{--accent-soft: #451a03;--ink: #f5f5f4;--muted: #a8a29e;--card: #1c1917;--line: #292524;--frame: #292524;--frame-edge: #78716c;--screen: #0c0a09}}.dark .landing{--accent-soft: #451a03;--ink: #f5f5f4;--muted: #a8a29e;--card: #1c1917;--line: #292524;--frame: #292524;--frame-edge: #78716c;--screen: #0c0a09}.landing-badge{display:inline-block;border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:.3rem .85rem;font-size:.8rem;font-weight:600}.device-stage{position:relative;margin-inline:auto;width:100%;max-width:36rem;padding:2.5rem 1.5rem 4.5rem}.device-stage__laptop{animation:stage-in .9s ease-out both}.device-stage .device-stage__tablet{position:absolute;inset-inline-start:0;bottom:.5rem;width:44%;animation:stage-in .9s .2s ease-out both,float 7s 1.2s ease-in-out infinite}.device-stage .device-stage__phone{position:absolute;inset-inline-end:.25rem;bottom:-.5rem;width:25%;animation:stage-in .9s .35s ease-out both,float 6s 1.4s ease-in-out infinite reverse}.device-laptop{margin:0;filter:drop-shadow(0 24px 30px rgb(0 0 0 / .18))}.device-laptop__lid{position:relative;margin-inline:7%;border-radius:.9rem .9rem 0 0;background:var(--frame);padding:3.2% 2.4% 2.4%;box-shadow:inset 0 0 0 1px var(--frame-edge)}.device-laptop__camera{position:absolute;top:1.3%;left:50%;width:5px;height:5px;border-radius:50%;background:#57534e;transform:translate(-50%)}.device-laptop__screen,.device-tablet__screen,.device-phone__screen{position:relative;overflow:hidden;background:var(--screen)}.device-laptop__screen{aspect-ratio:16 / 10;border-radius:.25rem}.device-laptop__base{height:.9rem;border-radius:0 0 1.2rem 1.2rem;background:linear-gradient(#d6d3d1,#a8a29e);position:relative}.device-laptop__base:after{content:"";position:absolute;top:0;left:50%;width:16%;height:.35rem;border-radius:0 0 .4rem .4rem;background:#78716c;transform:translate(-50%)}.device-tablet{margin:0;border-radius:1.1rem;background:var(--frame);padding:.6rem;box-shadow:0 20px 35px #00000040,inset 0 0 0 1px var(--frame-edge)}.device-tablet__screen{aspect-ratio:4 / 3;border-radius:.35rem}.device-phone{position:relative;margin:0;border-radius:1.4rem;background:var(--frame);padding:.55rem .4rem;box-shadow:0 20px 35px #0000004d,inset 0 0 0 1px var(--frame-edge)}.device-phone__notch{position:absolute;top:.8rem;left:50%;z-index:2;width:30%;height:.45rem;border-radius:999px;background:var(--frame);transform:translate(-50%)}.device-phone__screen{aspect-ratio:9 / 19;border-radius:1rem;container-type:inline-size}.device-laptop__screen img,.device-tablet__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}.phone-frame{position:absolute;inset:0;display:flex;flex-direction:column;gap:4cqw;padding:12cqw 7cqw 7cqw;color:var(--ink);font-size:7cqw;line-height:1.3;opacity:0;animation:phone-frame 12s infinite both}.phone-frame--2{animation-delay:4s;align-items:center;justify-content:center;text-align:center}.phone-frame--3{animation-delay:8s;justify-content:center}.phone-bar{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:8cqw}.phone-sub{color:var(--muted);font-size:6.2cqw}.phone-title{font-weight:700;font-size:8cqw}.phone-cart{display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;background:var(--accent);color:#fff;font-size:6cqw;animation:pop 12s infinite both}.phone-menu{display:flex;flex-direction:column;gap:3cqw;margin:0;padding:0;list-style:none}.phone-menu li{display:flex;justify-content:space-between;gap:2cqw;border:1px solid var(--line);border-radius:3cqw;background:var(--card);padding:4cqw}.phone-menu li.is-picked{animation:picked 12s infinite both}.phone-menu b{white-space:nowrap}.phone-button{margin-top:auto;border-radius:3cqw;background:var(--accent);color:#fff;padding:4cqw;text-align:center;font-weight:700}.phone-check{width:28cqw;height:28cqw;border-radius:50%;background:#16a34a;position:relative;animation:check-in 12s 4s infinite both}.phone-check:after{content:"";position:absolute;left:36%;top:22%;width:22%;height:42%;border:solid #fff;border-width:0 2.4cqw 2.4cqw 0;transform:rotate(45deg)}.phone-receipt{display:flex;flex-direction:column;gap:2.5cqw;border-radius:3cqw;background:var(--card);border:1px solid var(--line);padding:5cqw;animation:receipt-up 12s 8s infinite both}.phone-receipt p{display:flex;justify-content:space-between;gap:2cqw}.phone-receipt .phone-title{justify-content:center}.phone-total{border-top:1px dashed var(--muted);padding-top:2.5cqw;font-weight:700}.float-card{position:absolute;z-index:3;display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--line);border-radius:.9rem;background:var(--card);color:var(--ink);padding:.6rem .8rem;font-size:.75rem;box-shadow:0 12px 24px #0000001f}.float-card--ticket{top:0;inset-inline-start:-.5rem;min-width:9.5rem;border-inline-start:4px solid var(--accent);animation:stage-in .8s .6s ease-out both,float 6.5s 1.4s ease-in-out infinite}.float-card--call,.float-card--points{flex-direction:row;align-items:center;gap:.45rem;font-weight:600}.float-card--call{top:18%;inset-inline-end:-1rem;animation:toast 9s 1.5s ease-in-out infinite both}.float-card--points{bottom:1rem;inset-inline-start:46%;color:var(--accent);animation:toast 9s 6s ease-in-out infinite both}.float-icon{font-size:.95rem;line-height:1}.ticket-timer{border-radius:.4rem;padding:.05rem .35rem;font-variant-numeric:tabular-nums;color:#fff;animation:ticket-timer 12s infinite both}.landing-flow{position:relative;margin-top:2rem}.landing-flow__track{position:relative;display:none;height:2px;margin:2.5rem 12.5% -2.7rem;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}.landing-flow__dot{position:absolute;top:-5px;inset-inline-start:0;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px #d9770633;animation:dot-travel 6s ease-in-out infinite}.landing-flow__steps{position:relative;display:grid;gap:1.25rem;margin:2rem 0 0;padding:0;list-style:none;text-align:center}.landing-flow__icon,.landing-card__icon{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;background:var(--accent-soft);color:var(--accent)}.landing-flow__icon{border:4px solid var(--screen);box-sizing:content-box}@media(min-width:640px){.landing-flow__track{display:block}.landing-flow__steps{grid-template-columns:repeat(4,minmax(0,1fr))}}.landing-card{border:1px solid var(--line);border-radius:1rem;background:var(--card);padding:1.5rem;transition:transform .25s ease,box-shadow .25s ease,opacity .6s ease}.landing-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px #00000014}.reveal-group.is-armed .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--reveal-delay, 0ms),transform .6s ease var(--reveal-delay, 0ms)}.reveal-group.is-armed .reveal.is-visible{opacity:1;transform:none}@media(max-width:639px){.device-stage{padding:1.5rem .5rem 3.5rem}.float-card--call,.float-card--points{display:none}.float-card--ticket{inset-inline-start:0;min-width:8.5rem;font-size:.7rem}}@keyframes stage-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes float{0%,to{translate:0 0}50%{translate:0 -10px}}@keyframes phone-frame{0%{opacity:0;transform:translateY(6%)}4%,30%{opacity:1;transform:none}34%,to{opacity:0;transform:translateY(-4%)}}@keyframes picked{0%,12%{border-color:var(--line);background:var(--card)}16%,33%{border-color:var(--accent);background:var(--accent-soft)}36%,to{border-color:var(--line);background:var(--card)}}@keyframes pop{0%,14%{transform:scale(0)}18%{transform:scale(1.3)}22%,33%{transform:scale(1)}36%,to{transform:scale(0)}}@keyframes check-in{0%{transform:scale(.3);opacity:0}6%,to{transform:scale(1);opacity:1}}@keyframes receipt-up{0%{transform:translateY(35%)}8%,to{transform:none}}@keyframes toast{0%,6%{opacity:0;transform:translateY(10px) scale(.95)}12%,55%{opacity:1;transform:none}62%,to{opacity:0;transform:translateY(-6px)}}@keyframes ticket-timer{0%,45%{background:#16a34a}50%,80%{background:#d97706}85%,to{background:#dc2626}}@keyframes dot-travel{0%{inset-inline-start:0}to{inset-inline-start:calc(100% - 12px)}}@media(prefers-reduced-motion:reduce){.landing *,.landing *:before,.landing *:after{animation:none!important;transition:none!important}.landing .phone-frame--1{opacity:1}.landing .phone-cart{transform:none}.landing .ticket-timer{background:#d97706}.landing .reveal-group.is-armed .reveal{opacity:1;transform:none}.landing .landing-flow__dot{display:none}}
