/* ===== Homepage hero: laptop + phone product showcase ===== */
.hx{
  --g:#00C785; --gd:#009F68; --mint:#D9FFF0; --navy:#101828; --muted:#64748B;
  position:relative; width:100%; max-width:660px; aspect-ratio:1.08/1;
  container-type:inline-size; perspective:1600px; margin-inline:auto;
}
.hx-stage{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform}

/* glows */
.hx-glow{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none}
.hx-glow-1{width:78%; height:70%; left:8%; top:10%; background:radial-gradient(circle,rgba(0,199,133,.30) 0%,rgba(0,199,133,0) 70%)}
.hx-glow-2{width:55%; height:50%; right:-6%; bottom:0; background:radial-gradient(circle,rgba(217,255,240,.95) 0%,rgba(217,255,240,0) 70%)}

/* laptop */
.hx-laptop{position:absolute; left:0; top:9%; width:90%; animation:hx-in-up 1s cubic-bezier(.2,.7,.2,1) both, hx-float 9s ease-in-out 1s infinite}
.hx-lid{position:relative; background:linear-gradient(180deg,#2B3443,#151B26); border-radius:2.4cqw 2.4cqw .6cqw .6cqw; padding:2.1cqw 2.1cqw 2.6cqw; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 60px -25px rgba(16,24,40,.45)}
.hx-cam{position:absolute; top:.75cqw; left:50%; width:.8cqw; height:.8cqw; margin-left:-.4cqw; border-radius:50%; background:#0B0F16; box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.hx-screen{position:relative; overflow:hidden; border-radius:.5cqw; aspect-ratio:1.6/1; background:#F8FAFC}
.hx-screen img,.hx-phone-screen img{display:block; width:100%; height:100%; object-fit:cover; object-position:top left}
.hx-glare{position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08) 100%)}
.hx-base{position:relative; margin:0 -6.5%; height:2.6cqw; border-radius:0 0 2.2cqw 2.2cqw; background:linear-gradient(180deg,#E7EBF0 0%,#C9D0D9 55%,#A9B2BE 100%); box-shadow:0 18px 30px -12px rgba(16,24,40,.35), 0 1px 0 rgba(255,255,255,.9) inset}
.hx-notch{position:absolute; top:0; left:50%; width:16%; height:42%; margin-left:-8%; border-radius:0 0 1cqw 1cqw; background:linear-gradient(180deg,#B5BEC9,#D5DBE2)}

/* phone */
.hx-phone{position:absolute; right:0; bottom:1%; width:31%; animation:hx-in-right 1s cubic-bezier(.2,.7,.2,1) .25s both, hx-float 7s ease-in-out 1.3s infinite reverse}
.hx-phone-frame{position:relative; background:linear-gradient(160deg,#2F3846,#121722 60%); border-radius:5.2cqw; padding:1.3cqw; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 70px -25px rgba(16,24,40,.55), 0 10px 25px -10px rgba(0,159,104,.25)}
.hx-island{position:absolute; z-index:2; top:2.3cqw; left:50%; width:28%; height:2.2cqw; margin-left:-14%; border-radius:2cqw; background:#05070B}
.hx-phone-screen{position:relative; overflow:hidden; border-radius:4cqw; aspect-ratio:9/19; background:#F8FAFC; display:flex; flex-direction:column}
.hx-phone-screen img{height:auto; flex:1; object-fit:contain; object-position:top center; padding:0 1.2cqw}
.hx-app-bar{display:flex; align-items:center; gap:1cqw; padding:6.2cqw 2.2cqw 1.6cqw; font-size:1.9cqw; color:var(--navy); background:#fff; border-bottom:1px solid #EEF2F6}
.hx-app-bar b{flex:1; font-weight:700}
.hx-app-logo{width:3.2cqw; height:3.2cqw; border-radius:.9cqw; background:var(--g)}
.hx-app-av{width:3.4cqw; height:3.4cqw; border-radius:50%; background:var(--navy); color:#fff; font-size:1.3cqw; font-weight:700; display:flex; align-items:center; justify-content:center}
.hx-app-btn{margin:1.4cqw 2.2cqw 3.4cqw; background:var(--g); color:#fff; font-weight:700; font-size:1.8cqw; text-align:center; padding:1.6cqw; border-radius:1.6cqw; box-shadow:0 8px 16px -8px rgba(0,199,133,.7)}

/* floating glass cards */
.hx-card{position:absolute; z-index:3; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.9); border-radius:2.4cqw; box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 20px 40px -18px rgba(16,24,40,.28), 0 0 0 1px rgba(16,24,40,.04); color:var(--navy)}
.hx-card p{margin:0}
.hx-card-k{font-size:1.75cqw; color:var(--muted); font-weight:600}
.hx-card-v{font-size:3.3cqw; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.hx-card-s{font-size:1.6cqw; color:var(--muted)}
.hx-card-ic{flex-shrink:0; width:5.2cqw; height:5.2cqw; border-radius:1.6cqw; display:flex; align-items:center; justify-content:center}
.hx-card-ic svg{width:55%; height:55%}
.hx-ic-green{background:var(--g); color:#fff; box-shadow:0 8px 16px -8px rgba(0,199,133,.8)}
.hx-ic-mint{background:var(--mint); color:var(--gd)}

.hx-card-pay{top:0; right:4%; display:flex; align-items:center; gap:1.8cqw; padding:1.9cqw 2.6cqw 1.9cqw 1.9cqw; animation:hx-pop .7s cubic-bezier(.2,.9,.3,1.3) .9s both, hx-float 6s ease-in-out 1.6s infinite}
.hx-pay-text{transition:opacity .35s ease, transform .35s ease}
.hx-pay-text.is-swapping{opacity:0; transform:translateY(6px)}
.hx-card-pay .hx-card-v{color:var(--gd)}

.hx-card-rev{left:-4%; bottom:11%; width:31%; padding:2.2cqw 2.4cqw; animation:hx-pop .7s cubic-bezier(.2,.9,.3,1.3) 1.15s both, hx-float 8s ease-in-out 1.9s infinite reverse}
.hx-rev-row{display:flex; align-items:center; justify-content:space-between; gap:1cqw; margin:.3cqw 0 1.6cqw}
.hx-pill{font-size:1.5cqw; font-weight:800; color:var(--gd); background:var(--mint); padding:.4cqw 1cqw; border-radius:99px; white-space:nowrap}
.hx-bars{display:flex; align-items:flex-end; gap:.9cqw; height:6.5cqw}
.hx-bars i{flex:1; height:var(--h); border-radius:.6cqw .6cqw .2cqw .2cqw; background:linear-gradient(180deg,var(--g),#7CE8C2); transform-origin:bottom; animation:hx-grow .9s cubic-bezier(.2,.7,.2,1) both}
.hx-bars i:nth-child(1){animation-delay:1.3s}.hx-bars i:nth-child(2){animation-delay:1.36s}.hx-bars i:nth-child(3){animation-delay:1.42s}.hx-bars i:nth-child(4){animation-delay:1.48s}.hx-bars i:nth-child(5){animation-delay:1.54s}.hx-bars i:nth-child(6){animation-delay:1.6s}.hx-bars i:nth-child(7){animation-delay:1.66s;background:linear-gradient(180deg,var(--gd),var(--g))}

.hx-card-mini{left:30%; bottom:-2%; display:flex; align-items:center; gap:1.4cqw; padding:1.4cqw 2.2cqw 1.4cqw 1.4cqw; font-size:1.65cqw; color:var(--muted); line-height:1.35; animation:hx-pop .7s cubic-bezier(.2,.9,.3,1.3) 1.4s both, hx-float 7s ease-in-out 2.1s infinite}
.hx-card-mini b{color:var(--navy); font-size:1.8cqw}
.hx-card-mini .hx-card-ic{width:4.4cqw; height:4.4cqw}

@keyframes hx-in-up{from{opacity:0; transform:translateY(40px) scale(.97)}to{opacity:1; transform:none}}
@keyframes hx-in-right{from{opacity:0; transform:translate(40px,30px) rotate(4deg)}to{opacity:1; transform:none}}
@keyframes hx-pop{from{opacity:0; transform:translateY(14px) scale(.9)}to{opacity:1; transform:none}}
@keyframes hx-float{0%,100%{translate:0 0}50%{translate:0 -1.4cqw}}
@keyframes hx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (max-width:1023px){ .hx{max-width:560px; margin-top:1rem} }
@media (prefers-reduced-motion:reduce){
  .hx *, .hx-stage{animation:none !important; transition:none !important}
}
/* stronger, layered glow */
.hx-glow-1{width:90%;height:80%;left:2%;top:6%;background:radial-gradient(circle,rgba(0,199,133,.38) 0%,rgba(0,199,133,.12) 45%,rgba(0,199,133,0) 72%)}
.hx-glow-2{width:62%;height:58%;right:-8%;bottom:-4%;background:radial-gradient(circle,rgba(0,199,133,.22) 0%,rgba(217,255,240,.9) 35%,rgba(217,255,240,0) 72%)}
.hx::before{content:"";position:absolute;inset:6% 4% 2% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(217,255,240,.9),rgba(217,255,240,0));filter:blur(20px);pointer-events:none}
@media (max-width:640px){ .hx-card-rev{left:0} .hx-card-pay{right:0} }
/* homepage demo video */
.demo-frame{position:relative;aspect-ratio:16/9;border-radius:1.75rem;overflow:hidden;background:#0B1220;box-shadow:0 40px 80px -40px rgba(6,95,70,.45),0 0 0 1px rgba(17,24,39,.06)}
.demo-frame video,.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.demo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:radial-gradient(60% 80% at 50% 40%,#134E4A 0,#0B1220 70%)}
.demo-play{width:84px;height:84px;border-radius:999px;background:#10B981;color:#fff;display:flex;align-items:center;justify-content:center;padding-left:4px;box-shadow:0 0 0 12px rgba(16,185,129,.18),0 20px 40px -10px rgba(16,185,129,.6)}
.demo-label{margin:0;color:#A7F3D0;font-weight:600;font-size:.95rem;letter-spacing:.02em}
@media(max-width:640px){.demo-frame{border-radius:1.1rem}.demo-play{width:64px;height:64px}}