/* ============================================================
   xMutual interactive app demo — clickable phone prototype
   ============================================================ */

.demo-stage { display:flex; align-items:center; justify-content:center; gap: clamp(28px,4vw,64px); width:100%; }

.demo-copy { max-width: 38ch; }
.demo-copy .step-track { display:grid; gap:10px; margin-top:22px; }
.demo-copy .st { display:flex; gap:13px; align-items:center; padding:10px 14px; border-radius:12px; transition: all .3s var(--ease); color: rgba(255,255,255,.55); border:1px solid transparent; }
.demo-copy .st .dot { width:26px;height:26px;border-radius:50%; display:grid;place-items:center; font-size:12px; font-weight:700; background:rgba(255,255,255,.1); color:#fff; flex:none; }
.demo-copy .st.active { background: rgba(198,242,78,.1); border-color: rgba(198,242,78,.3); color:#fff; }
.demo-copy .st.active .dot { background: var(--lime); color: var(--navy); }
.demo-copy .st.done .dot { background: rgba(198,242,78,.3); color: var(--lime); }
.demo-copy .st span { font-size:14px; font-weight:500; }

/* phone */
.phone {
  width: 310px; height: 638px; flex:none;
  border-radius: 44px; padding: 13px;
  background: linear-gradient(160deg,#1b2452,#0a1230);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.06);
  position: relative;
}
.phone::before { /* notch */
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; background:#0a1230; border-radius:0 0 16px 16px; z-index:6;
}
.screen {
  width:100%; height:100%; border-radius: 33px; overflow:hidden; position:relative;
  background: var(--paper); color: var(--ink);
}
.statusbar { display:flex; justify-content:space-between; align-items:center; padding:14px 22px 6px; font-size:12px; font-weight:700; color:var(--ink); }
.statusbar .ico { display:flex; gap:5px; align-items:center; }

/* view system */
.view { position:absolute; inset:0; padding: 38px 22px 22px; display:flex; flex-direction:column; opacity:0; transform: translateX(24px); pointer-events:none; transition: opacity .4s var(--ease), transform .4s var(--ease); overflow-y:auto; scrollbar-width:none; }
.view::-webkit-scrollbar{ display:none; }
.view.active { opacity:1; transform:none; pointer-events:auto; }
.view.prev { transform: translateX(-24px); }

.app-brand { display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:600; font-size:18px; }
.app-brand .x{color:#7bbf2f;} .app-brand .m{color:var(--cobalt);}

.v-title { font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.01em; line-height:1.08; margin-top:6px; }
.v-sub { font-size:13px; color:var(--slate); margin-top:7px; line-height:1.4; }

.field { margin-top:14px; }
.field label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-2); }
.field .inp { margin-top:6px; height:46px; border-radius:12px; border:1.5px solid var(--line); background:#fff; display:flex; align-items:center; padding:0 14px; font-size:14px; color:var(--ink); gap:8px; }
.field .inp.ph { color:var(--slate-2); }

.appbtn { margin-top:auto; height:52px; border-radius:14px; border:0; cursor:pointer; background: var(--cobalt); color:#fff; font-family:var(--body); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; gap:9px; transition: transform .15s, background .2s; width:100%; }
.appbtn:hover { background: var(--cobalt-600); transform: translateY(-1px); }
.appbtn.lime { background: var(--lime); color: var(--navy); }
.appbtn.lime:hover { background: var(--lime-bright); }
.appbtn.ghost { background: transparent; color: var(--cobalt); border:1.5px solid var(--line); }

.tiny { font-size:11px; color:var(--slate-2); text-align:center; margin-top:12px; line-height:1.4; }

/* KYC scanning */
.id-scan { margin:18px 0; height:160px; border-radius:16px; border:2px dashed var(--blue-bright); background: rgba(63,123,255,.06); position:relative; display:grid; place-items:center; overflow:hidden; }
.id-scan .laser { position:absolute; left:0; right:0; height:3px; background: linear-gradient(90deg,transparent,var(--lime),transparent); animation: scan 2s linear infinite; }
@keyframes scan { 0%{top:8%}50%{top:90%}100%{top:8%} }
.id-card { width:78%; height:90px; border-radius:10px; background:linear-gradient(135deg,#dfe7ff,#c4d2ff); position:relative; box-shadow:var(--shadow-sm); }
.id-card::after { content:"ID"; position:absolute; right:12px; bottom:8px; font-family:var(--display); font-weight:700; color:var(--cobalt); opacity:.5; }
.kyc-checks { display:grid; gap:9px; }
.kyc-checks .c { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--slate); }
.kyc-checks .c b { width:20px;height:20px;border-radius:50%;background:rgba(22,163,74,.12); color:#16a34a; display:grid;place-items:center; font-size:11px; }

/* risk options */
.risk-opt { margin-top:12px; padding:15px; border-radius:14px; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition: all .2s; }
.risk-opt:hover { border-color: var(--cobalt); }
.risk-opt.sel { border-color: var(--cobalt); background: rgba(39,71,232,.05); box-shadow: 0 0 0 3px rgba(39,71,232,.1); }
.risk-opt .top { display:flex; justify-content:space-between; align-items:center; }
.risk-opt h5 { font-size:15px; font-weight:700; }
.risk-opt .ret { font-family:var(--display); font-weight:600; color:#16a34a; font-size:15px; }
.risk-opt p { font-size:11.5px; color:var(--slate); margin-top:3px; }
.risk-opt .bars { display:flex; gap:3px; margin-top:9px; }
.risk-opt .bars i { height:6px; flex:1; border-radius:3px; background:var(--paper-2); }
.risk-opt.aggressive .bars i { background: var(--lime); }
.risk-opt.balanced .bars i:nth-child(-n+2){ background: var(--blue-bright); }
.risk-opt.conservative .bars i:nth-child(1){ background: var(--cyan); }

/* fund methods */
.pay-method { display:flex; align-items:center; gap:13px; padding:15px; border-radius:14px; border:1.5px solid var(--line); background:#fff; margin-top:11px; cursor:pointer; transition:all .2s; }
.pay-method:hover { border-color: var(--cobalt); transform: translateX(3px); }
.pay-method.sel { border-color: var(--cobalt); background: rgba(39,71,232,.05); }
.pay-method .lo { width:42px;height:42px;border-radius:11px; display:grid;place-items:center; font-weight:800; font-size:13px; color:#fff; flex:none; }
.pay-method .mpesa { background:#43a047; }
.pay-method .bank { background:var(--navy); }
.pay-method .card { background: linear-gradient(135deg,#ff6a3d,#ff9f1c); }
.pay-method h5 { font-size:14px; font-weight:700; }
.pay-method p { font-size:11px; color:var(--slate-2); }
.pay-method .chk { margin-left:auto; width:20px;height:20px;border-radius:50%; border:2px solid var(--line); }
.pay-method.sel .chk { border-color: var(--cobalt); background:var(--cobalt); box-shadow: inset 0 0 0 3px #fff; }

/* dashboard */
.bal-card { border-radius:18px; padding:18px; background: linear-gradient(150deg,var(--cobalt),#16307f); color:#fff; position:relative; overflow:hidden; }
.bal-card .ring{ position:absolute; right:-30px; top:-30px; width:120px;height:120px;border-radius:50%; border:1px solid rgba(255,255,255,.2);}
.bal-card .lbl { font-size:11.5px; opacity:.8; letter-spacing:.05em; text-transform:uppercase; }
.bal-card .big { font-family:var(--display); font-weight:600; font-size:33px; margin-top:4px; }
.bal-card .chg { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--lime); background:rgba(198,242,78,.15); padding:3px 9px; border-radius:999px; }
.spark { height:46px; margin-top:14px; display:flex; align-items:flex-end; gap:3px; }
.spark i { flex:1; border-radius:3px 3px 0 0; background: rgba(255,255,255,.25); }
.spark i.up { background: var(--lime); }
.hold-list { margin-top:16px; display:grid; gap:9px; }
.hold { display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px; background:#fff; border:1px solid var(--line); }
.hold .t { width:34px;height:34px;border-radius:9px; display:grid;place-items:center; font-weight:800; font-size:12px; color:#fff; }
.hold h5 { font-size:13.5px; font-weight:700; } .hold p { font-size:11px; color:var(--slate-2); }
.hold .pr { margin-left:auto; text-align:right; } .hold .pr b{ font-size:13.5px; } .hold .pr span{ font-size:11px; color:#16a34a; display:block; }

/* success / withdraw */
.success-ico { width:84px;height:84px;border-radius:50%; background:var(--lime); color:var(--navy); display:grid;place-items:center; margin:30px auto 6px; animation: pop .5s var(--ease) both; }
@keyframes pop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
.amount-display { font-family:var(--display); font-weight:600; font-size:40px; text-align:center; margin:8px 0; }
.amount-display .cur { color:var(--slate-2); font-size:24px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.keypad button { height:46px; border-radius:12px; border:0; background:#fff; border:1px solid var(--line); font-size:18px; font-weight:600; cursor:pointer; color:var(--ink); transition:background .15s; }
.keypad button:hover { background:var(--paper-2); }

.restart { position:absolute; bottom:13px; right:13px; z-index:8; background:rgba(8,18,58,.55); backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:7px 13px; font-size:11.5px; font-weight:600; cursor:pointer; display:flex; gap:6px; align-items:center; }
.restart:hover { background: var(--cobalt); }

.demo-hint { display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:12.5px; color: rgba(255,255,255,.6); }
.demo-hint .pulse { width:9px;height:9px;border-radius:50%; background:var(--lime); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(198,242,78,.6)} 70%{box-shadow:0 0 0 8px rgba(198,242,78,0)} 100%{box-shadow:0 0 0 0 rgba(198,242,78,0)} }

@media (max-width: 900px){
  .demo-stage { flex-direction:column; }
  .demo-copy .step-track { display:none; }
}