:root{--ease:cubic-bezier(.22,1,.36,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--ease-in:cubic-bezier(.55,0,.55,.2);--t-fast:.16s;--t:.28s;--t-slow:.55s;--ring:0 0 0 3px #6534f526}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
::selection{background:var(--purple);color:#fff}

@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes rise-sm{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #418c4359}50%{box-shadow:0 0 0 5px #418c4300}}
@keyframes sheen{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(230%) skewX(-18deg)}}
@keyframes float-y{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-7px)}}
@keyframes float-y-2{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-.5deg) translateY(-9px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.4deg)}75%{transform:rotate(2.4deg)}}
@keyframes shake{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes tip-in{from{opacity:0;transform:translate(-50%,5px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes ring-pulse{0%{box-shadow:0 0 0 0 #6534f540}70%{box-shadow:0 0 0 9px #6534f500}100%{box-shadow:0 0 0 0 #6534f500}}
@keyframes bar-in{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}

.motion-ready [data-reveal]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
.motion-ready [data-reveal="left"]{transform:translate3d(-26px,0,0)}
.motion-ready [data-reveal="right"]{transform:translate3d(26px,0,0)}
.motion-ready [data-reveal="zoom"]{transform:scale(.94)}

#page.motion-enter{animation:rise .5s var(--ease) both}
.auth.motion-enter{animation:rise .55s var(--ease) both}
.checkout-page.motion-enter{animation:rise .5s var(--ease) both}
.initial-load{animation:pop .6s var(--ease) both}
.initial-load img{animation:float-y 2.6s var(--ease) infinite}

.field{position:relative}
.field>label{transition:color var(--t-fast) var(--ease),transform var(--t) var(--ease)}
.field:focus-within>label{color:var(--purple);transform:translate3d(0,-1px,0)}
.field::after{content:'';position:absolute;inset:-1px;border:2px solid var(--purple);border-radius:11px;opacity:0;transform:scale(.985);pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.field:focus-within::after{opacity:1;transform:scale(1);animation:ring-pulse 1.1s var(--ease) .18s}

input,select,textarea{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:#c3bdd4}
input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:var(--ring);background-color:#fff}
input::placeholder,textarea::placeholder{transition:color var(--t) var(--ease);opacity:1}
input:focus::placeholder,textarea:focus::placeholder{color:#b6b1c4}
input:disabled,select:disabled,textarea:disabled{background:#f6f5f9;color:var(--muted);cursor:not-allowed}
.field.is-invalid::after{border-color:#e0574f;opacity:1;transform:scale(1);animation:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#e0574f;box-shadow:0 0 0 3px #e0574f1f;animation:shake .5s var(--ease)}
.field.is-valid::after{border-color:#37a05a;opacity:1;transform:scale(1);animation:none}
.field.is-valid input,.field.is-valid select,.field.is-valid textarea{border-color:#37a05a;box-shadow:0 0 0 3px #37a05a1f}

select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2373717f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:12px;padding-right:32px;cursor:pointer}
select:hover{background-color:#fff}
.chart-select,.filters select{padding-right:27px}
.chart-select{background-position:right 9px center;background-size:11px}
select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236534f5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
input[type=number]{font-variant-numeric:tabular-nums}

.button{position:relative;overflow:hidden;transition:background var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.button::after{content:'';position:absolute;top:-50%;bottom:-50%;left:0;width:38%;background:linear-gradient(90deg,transparent,#ffffff59,transparent);opacity:0;pointer-events:none}
.button:hover::after{opacity:1;animation:sheen .72s var(--ease)}
.button:hover{transform:translate3d(0,-2px,0);box-shadow:0 10px 22px -10px #2415433d}
.button:active{transform:translate3d(0,1px,0) scale(.985);box-shadow:none}
.button:focus-visible{outline:3px solid #9b79ff;outline-offset:3px}
.button.primary:hover{box-shadow:0 12px 26px -10px #6534f5a6}
.button.primary::after{background:linear-gradient(90deg,transparent,#ffffff4d,transparent)}
.button.ghost{background:transparent}
.button.ghost:hover{background:#f4f2f8}
.button[disabled]{transform:none;box-shadow:none}
.button[disabled]::after{display:none}

.icon-button{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t) var(--ease)}
.icon-button:hover{background:var(--soft);color:var(--purple);transform:translate3d(0,-1px,0)}
.icon-button:active{transform:scale(.9)}
.text-link{position:relative;transition:color var(--t-fast) var(--ease),gap var(--t) var(--ease)}
.text-link::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.text-link:hover{color:var(--purple-dark);gap:10px}
.text-link:hover::after{transform:scaleX(1)}
.text-link svg{transition:transform var(--t) var(--ease)}
.text-link:hover svg{transform:translate(2px,-2px)}

.card{transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.card:hover{box-shadow:0 16px 40px -18px #24154340;border-color:#e0d9f5}
.metric{position:relative;overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.metric::before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#6534f50f,transparent 62%);opacity:0;transition:opacity var(--t-slow) var(--ease);pointer-events:none}
.metric:hover{transform:translate3d(0,-3px,0);box-shadow:0 18px 38px -20px #24154345;border-color:#e2dbf7}
.metric:hover::before{opacity:1}
.primary-metric{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.primary-metric:hover{transform:translate3d(0,-3px,0);box-shadow:0 20px 42px -18px #6534f566}
.metric-value{transition:color var(--t) var(--ease)}
.metric:hover .metric-value{color:var(--purple)}

.table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:#fdfcff}
tbody tr:hover .avatar{transform:scale(1.07)}
tbody tr:hover .icon-button{color:var(--purple);background:var(--soft)}
th{transition:color var(--t-fast) var(--ease)}
tbody td .money{font-variant-numeric:tabular-nums}
.avatar{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.table-person .avatar{box-shadow:0 0 0 0 #6534f500}

.badge{transition:transform var(--t) var(--ease),box-shadow var(--t-fast) var(--ease)}
tr:hover .badge, .quick-action:hover .badge{transform:scale(1.04)}
.badge svg{transition:transform var(--t) var(--ease)}
.badge:hover svg{transform:scale(1.14)}
.badge.green svg{animation:pop .4s var(--ease-back) both}

.nav-link{position:relative;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t) var(--ease),padding-left var(--t) var(--ease)}
.nav-link::before{content:'';position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--purple);transform:translateY(-50%);transition:height var(--t) var(--ease)}
.nav-link:hover{transform:translate3d(3px,0,0)}
.nav-link.active::before{height:60%}
.nav-link.active{animation:rise-sm .4s var(--ease) both}
.nav-link svg{transition:transform var(--t) var(--ease)}
.nav-link:hover svg{transform:scale(1.12) rotate(-4deg)}
.nav-link.active svg{animation:pop .45s var(--ease-back) .1s both}

.workspace{transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.workspace:hover{border-color:#ddd4f7;box-shadow:0 8px 20px -14px #24154359;transform:translate3d(0,-1px,0)}
.profile-button{transition:background var(--t-fast) var(--ease),box-shadow var(--t) var(--ease)}
.profile-button:hover{background:#f7f5fc;box-shadow:0 6px 16px -12px #24154366}
.profile-button .avatar{transition:transform var(--t) var(--ease)}
.profile-button:hover .avatar{transform:scale(1.06) rotate(-3deg)}
.profile-button svg{transition:transform var(--t) var(--ease)}
.profile-button:hover svg{transform:translateY(2px)}
.live-dot{animation:pulse 2.4s var(--ease) infinite}
.help-box{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.help-box:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 26px -18px #2415434d}
.quick-action{transition:padding-left var(--t) var(--ease),background var(--t-fast) var(--ease)}
.quick-action:hover{padding-left:9px;background:#fbf9ff}
.quick-icon{transition:transform var(--t) var(--ease-back),background var(--t) var(--ease)}
.quick-action:hover .quick-icon{transform:scale(1.12) rotate(-6deg)}
.onboarding-banner{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.onboarding-banner:hover{transform:translate3d(0,-2px,0);box-shadow:0 14px 30px -20px #6534f573}
.promo{transition:transform var(--t) var(--ease)}
.promo:hover{transform:translate3d(0,-3px,0)}

.chart-card{position:relative}
.chart-select{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t-fast) var(--ease)}
.bar-item{transform-origin:bottom;transition:height .7s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.bar-item:hover{background:var(--purple);transform:scaleX(1.5)}
.chart-tip{position:absolute;bottom:calc(100% + 8px);left:0;white-space:nowrap;background:var(--ink);color:#fff;padding:6px 9px;border-radius:7px;font-size:10px;font-weight:600;letter-spacing:0;pointer-events:none;z-index:6;box-shadow:0 8px 20px -8px #23212866;opacity:0;transform:translate(-50%,5px) scale(.94);transition:opacity var(--t-fast) var(--ease),transform var(--t) var(--ease)}
.chart-tip.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.bars{transition:opacity var(--t) var(--ease)}

#toast{transform:translate(-50%,20px) scale(.94);transition:opacity .34s var(--ease),transform .34s var(--ease-back);will-change:transform,opacity}
#toast.visible{transform:translate(-50%,0) scale(1)}
dialog{animation:pop .34s var(--ease-back) both}
dialog[open]{animation:pop .34s var(--ease-back) both}
::backdrop{animation:rise-sm .3s var(--ease) both}
.dialog-header h2{animation:rise-sm .38s var(--ease) .04s both}
.dialog-body>*{animation:rise-sm .4s var(--ease) .08s both}
.dialog-actions{animation:rise-sm .4s var(--ease) .12s both}

.skeleton{background:linear-gradient(90deg,#f2eff7,#faf9fd,#f2eff7);background-size:200%;animation:loading 1.4s linear infinite}
.empty{animation:rise .5s var(--ease) both}
.empty svg{animation:float-y 3.4s var(--ease) infinite}
.notice{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.error{animation:rise-sm .4s var(--ease) both;border-left:3px solid #e0574f}

.ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.28;pointer-events:none;animation:ripple .62s var(--ease) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

.checkout-card{animation:rise .5s var(--ease) both;transition:box-shadow var(--t) var(--ease)}
.checkout-card:hover{box-shadow:0 24px 60px -30px #2415434d}
.qr{animation:rise .55s var(--ease) .12s both;border-radius:12px;background:#fff;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.qr:hover{transform:scale(1.025);box-shadow:0 14px 34px -18px #24154359}
.payment-amount{animation:pop .5s var(--ease-back) .1s both;font-variant-numeric:tabular-nums}
.checkout-status{animation:rise-sm .45s var(--ease) .2s both}
.checkout-page .button{animation:rise-sm .45s var(--ease) .26s both}

[data-count]{font-variant-numeric:tabular-nums}

.public-nav{position:sticky;top:0;z-index:40;background:#faf9f6e8;backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);animation:rise-sm .5s var(--ease) both;border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.public-nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px #24154359}
.nav-links a{position:relative;transition:color var(--t-fast) var(--ease)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.brand-logo img{transition:transform var(--t-slow) var(--ease),filter var(--t) var(--ease)}
.brand-logo:hover img{transform:scale(1.035) rotate(-1.2deg)}
.wordmark{transition:transform var(--t) var(--ease)}
.wordmark:hover{transform:translate3d(0,-2px,0)}

.hero .eyebrow,.hero h1,.hero-copy>p{animation:rise .8s var(--ease) both}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.13s}
.hero-copy>p{animation-delay:.21s}
.hero-actions{animation:rise .8s var(--ease) .29s both}
.hero-art{animation:pop 1s var(--ease) .2s both}
.hero-sculpture{transition:transform .55s var(--ease);animation:float-y-2 7s var(--ease) infinite}
.hero-art:hover .hero-sculpture{animation-play-state:paused;transform:scale(1.06) rotate(-2deg)}
.floating-receipt{transition:transform var(--t-slow) var(--ease),box-shadow var(--t) var(--ease);animation:float-y-2 6s var(--ease) infinite}
.floating-receipt:hover{animation-play-state:paused;transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:0 26px 60px -22px #35420759}
.art-sticker{animation:wobble 5.5s var(--ease) infinite,rise .8s var(--ease) .5s both}
.art-caption{animation:rise .8s var(--ease) .6s both}
.brand-strip{animation:rise .8s var(--ease) .68s both}
.brand-strip b{color:var(--purple);font-weight:700}

.feature{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.feature:hover{transform:translate3d(0,-6px,0);box-shadow:0 26px 54px -26px #24154340}
.feature-lime:hover{box-shadow:0 26px 54px -24px #3542075c}
.feature-neutral:hover{box-shadow:0 26px 54px -26px #6534f542}
.feature-photo img{transition:transform .9s var(--ease)}
.feature-photo:hover img{transform:scale(1.07)}
.feature-num{transition:transform var(--t-slow) var(--ease-back),opacity var(--t) var(--ease)}
.feature:hover .feature-num{transform:translateY(-4px) scale(1.14);opacity:.55}
.feature h3{transition:transform var(--t-slow) var(--ease)}
.feature:hover h3{transform:translate3d(0,-2px,0)}
.mini-tags span{transition:transform var(--t) var(--ease-back),background var(--t) var(--ease)}
.mini-tags span:hover{transform:translateY(-2px) scale(1.04);background:#fff}

.pricing-box{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t) var(--ease)}
.pricing-box:hover{transform:translate3d(0,-5px,0);box-shadow:0 30px 64px -30px #24154345;border-color:#ded4f7}
.big-rate{font-variant-numeric:tabular-nums;transition:transform var(--t-slow) var(--ease)}
.pricing-box:hover .big-rate{transform:scale(1.04)}
.currency-input{position:relative;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.currency-input:focus-within{transform:translateY(-2px);box-shadow:0 14px 30px -18px #24154366}
.currency-input input{border:0;background:transparent;font-size:20px;font-weight:650;padding-left:0;letter-spacing:-.5px}
.currency-input input:focus{box-shadow:none}
.currency-input>span{transition:color var(--t) var(--ease)}
.currency-input:focus-within>span{color:var(--purple)}
#preview-result strong{font-variant-numeric:tabular-nums;transition:transform var(--t) var(--ease-back),color var(--t) var(--ease)}
#preview-result.flash strong{animation:pop .34s var(--ease-back)}

.code-window{position:relative;overflow:hidden;transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.code-window:hover{transform:translate3d(0,-4px,0);box-shadow:0 24px 54px -28px #6534f542}
.code-window::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--coral),var(--lime));background-size:220% 100%;animation:bar-in 1.1s var(--ease) both,sheen-x 6s linear infinite}
@keyframes sheen-x{to{background-position:220% 0}}
.code-window pre{overflow-x:auto;transition:color var(--t) var(--ease)}
.code-window:hover pre{color:#3d2a63}
.code-window .live-dot{animation:pulse 2.4s var(--ease) infinite}
.closing h2{transition:transform var(--t-slow) var(--ease)}
.closing:hover h2{transform:translate3d(0,-4px,0)}
.closing .button{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.closing .button:hover{transform:translate3d(0,-3px,0) scale(1.02);box-shadow:0 16px 34px -12px #6534f5a6}

.public-footer{transition:opacity var(--t) var(--ease)}
.public-footer a{transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.public-footer a:hover{color:var(--purple);transform:translateY(-2px)}
.skip{transition:top var(--t) var(--ease)}

.brand-board{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);animation:rise .9s var(--ease) .1s both}
.brand-board:hover{transform:translate3d(0,-6px,0) scale(1.012);box-shadow:0 34px 70px -30px #2415434d}
.brand-page h1{animation:rise .8s var(--ease) both}
.brand-swatches>div{transition:transform var(--t) var(--ease-back),box-shadow var(--t) var(--ease);cursor:pointer}
.brand-swatches>div:hover{transform:translate3d(0,-5px,0) scale(1.03);box-shadow:0 18px 36px -18px #2415434d}
.swatch{border-radius:12px;padding:18px;font-weight:600}
.swatch b{font-weight:700;opacity:.85}
.swatch-purple{background:#6534f5;color:#fff}
.swatch-lime{background:#d6ff3f;color:#232128}
.swatch-coral{background:#ff7868;color:#232128}
.swatch-graphite{background:#232128;color:#fff}
.brand-page .button{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.brand-page .button:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 26px -12px #6534f573}

@media(max-width:767px){
.motion-ready [data-reveal]{transform:translate3d(0,18px,0)}
.motion-ready [data-reveal="left"],.motion-ready [data-reveal="right"]{transform:translate3d(0,18px,0)}
.feature:hover,.pricing-box:hover,.code-window:hover,.brand-board:hover{transform:none}
.metric:hover,.primary-metric:hover,.onboarding-banner:hover,.help-box:hover{transform:none}
.quick-action:hover{padding-left:13px}
.nav-link:hover{transform:none}
.bar-item:hover{transform:scaleX(1.25)}
}

@media(hover:none){
.metric:hover,.primary-metric:hover,.feature:hover,.pricing-box:hover,.code-window:hover,.brand-board:hover,.help-box:hover,.onboarding-banner:hover,.workspace:hover,.profile-button:hover,.button:hover,.quick-action:hover,.nav-link:hover,.text-link:hover{transform:none}
.nav-link::before{display:none}
.button:hover::after{display:none}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.motion-ready [data-reveal]{opacity:1;transform:none;transition:none}
*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.chart-tip{display:none}
.ripple{display:none}}