.elementor-4290 .elementor-element.elementor-element-ad30bac{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-4290 .elementor-element.elementor-element-ad30bac{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-4290 .elementor-element.elementor-element-ad30bac{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-ce4c408 *//* ---- Kollect brand tokens (from Kollect Payment Figma · Colour Palette) ---- */
  :root{
    --ink:#1E1E1E;            /* near-black */
    --blue:#5B6EF5;           /* cornflower / royal blue */
    --magenta:#E100FF;        /* vivid magenta */
    --cyan:#00E0FF;           /* bright cyan */
    --white:#FFFFFF;
    --grad:linear-gradient(120deg,#5B6EF5 0%,#E100FF 52%,#00E0FF 115%);
    --grad-btn:linear-gradient(120deg,#5B6EF5 0%,#E100FF 100%);
    --paper:#ffffff; --muted:#8b8f9a; --line:#ececf2; --ink2:#2a2a30;
    --green:#12b76a;
  }
  *
  {box-sizing:border-box;margin:0;padding:0;}
  
  .elementor-4290 .elementor-element.elementor-element-ce4c408 html, .elementor-4290 .elementor-element.elementor-element-ce4c408 body{height:100%;}
  
  .elementor-4290 .elementor-element.elementor-element-ce4c408 body{
    font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:radial-gradient(1100px 600px at 50% -8%,#2a2340 0%,#201d2e 40%,var(--ink) 100%);
    color:#f3f4f8; min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:28px 16px; gap:22px;
  }
  .head{text-align:center; max-width:560px;}
  .kicker{letter-spacing:.26em; font-size:11px; text-transform:uppercase; font-weight:800;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .head h1{font-size:22px; font-weight:800; margin-top:9px; letter-spacing:-.01em;}
  .head p{color:#b6b8c6; font-size:13.5px; margin-top:6px;}

  .stage{display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;}

  /* ---- Kollect logo ---- */
  .klogo{display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.01em;}
  .kmark{width:26px; height:26px; display:inline-block; vertical-align:middle; filter:drop-shadow(0 4px 10px rgba(225,0,255,.26));}
  .klogo .wm{font-size:17px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(90deg,#E100FF 0%,#8A3FFF 46%,#00E0FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}

  /* ---- Phone ---- */
  .phone{position:relative; width:300px; height:620px; border-radius:44px;
    background:linear-gradient(160deg,#2b2b33,#141418);
    padding:12px; box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.05);}
  .notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:24px; background:#0a0a0d; border-radius:0 0 16px 16px; z-index:20;}
  .screen{position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:var(--paper); color:var(--ink);}

  .panel{position:absolute; inset:0; opacity:0; transform:translateY(14px) scale(.99); transition:opacity .5s ease, transform .5s ease; pointer-events:none; display:flex; flex-direction:column;}
  .panel.active{opacity:1; transform:none;}

  /* ---- SABA app chrome ---- */
  .appbar{padding:34px 18px 14px; color:#fff; position:relative; overflow:hidden;}
  .appbar::before{content:""; position:absolute; inset:0; background:var(--ink);}
  .appbar::after{content:""; position:absolute; inset:0; background:var(--grad); opacity:.92;}
  .appbar>*{position:relative; z-index:2;}
  .appbar .brand{display:flex; align-items:center; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.85); letter-spacing:.12em; text-transform:uppercase; font-weight:700;}
  .appbar .hi{font-size:19px; font-weight:800; margin-top:12px;}
  .appbar .room{font-size:12px; color:rgba(255,255,255,.85); margin-top:2px;}
  .body{flex:1; padding:16px; overflow:hidden; display:flex; flex-direction:column;}

  .tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:2px;}
  .tile{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 6px 16px rgba(20,20,40,.05);}
  .tile .ic{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; background:#f4f2ff;}
  .tile .t{font-weight:800; font-size:13.5px; margin-top:10px; color:var(--ink);}
  .tile .s{font-size:11px; color:var(--muted); margin-top:2px;}
  .tile.hot{border-color:transparent; box-shadow:0 0 0 2px var(--magenta), 0 8px 20px rgba(225,0,255,.18);}

  .sec-title{font-size:11.5px; font-weight:800; color:var(--ink); text-transform:uppercase; letter-spacing:.1em; margin:2px 0 12px;}
  .row{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; margin-bottom:10px;}
  .row .ic{width:40px; height:40px; border-radius:11px; background:#f4f2ff; display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto;}
  .row .txt{flex:1;}
  .row .txt .n{font-weight:800; font-size:13.5px; color:var(--ink);}
  .row .txt .d{font-size:11px; color:var(--muted); margin-top:2px;}
  .row .price{font-weight:800; font-size:13.5px; color:var(--ink);}
  .added{margin-left:auto; font-size:10.5px; font-weight:800; color:#fff; background:var(--magenta); padding:4px 9px; border-radius:20px; opacity:0; transition:opacity .4s;}
  .added.show{opacity:1;}

  .total{margin-top:auto; border-top:1px dashed var(--line); padding-top:14px;}
  .total .line{display:flex; justify-content:space-between; font-size:12.5px; color:#4a4a55; margin-bottom:6px;}
  .total .grand{display:flex; justify-content:space-between; font-size:16px; font-weight:900; color:var(--ink); margin-top:6px;}

  .btn{margin-top:14px; background:var(--grad-btn); color:#fff; font-weight:800; font-size:14px; text-align:center; padding:15px; border-radius:14px; box-shadow:0 12px 24px rgba(120,60,240,.28); position:relative; overflow:hidden;}
  .btn .pill{font-size:10px; opacity:.9; display:block; font-weight:700; letter-spacing:.05em;}
  .btn.tap::after{content:""; position:absolute; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.5); left:50%; top:50%; transform:translate(-50%,-50%) scale(0); animation:ripple .7s ease-out;}
  @keyframes ripple{to{transform:translate(-50%,-50%) scale(3.4); opacity:0;}}

  /* ---- Kollect payment sheet (white, matches real UI) ---- */
  .ksheet{background:#fff; padding:26px 20px 18px; align-items:stretch;}
  .ktop{display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:8px;}
  .kname{width:100%; display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:16px;}
  .kname b{color:var(--ink); font-weight:700;}
  .kamt{text-align:center; margin:22px 0 6px;}
  .kamt .fiat{font-size:34px; font-weight:900; color:var(--ink); letter-spacing:-.02em;}
  .kamt .usdc{font-size:12.5px; color:var(--muted); margin-top:2px; display:flex; align-items:center; justify-content:center; gap:6px;}
  .ucoin{width:16px; height:16px; border-radius:50%; background:conic-gradient(from 0deg,#2775ca,#63b3ed); display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:900; color:#fff;}
  .kfoot{margin-top:auto; text-align:center; font-size:11px; color:var(--muted); padding-top:14px; display:flex; align-items:center; justify-content:center; gap:6px;}
  .kfoot .kmark{width:16px; height:16px;}

  .wdetails{border:1px solid var(--line); border-radius:14px; padding:6px 12px; margin-top:6px;}
  .wdetails .wt{font-size:11px; font-weight:800; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; padding:8px 0 6px; border-bottom:1px solid var(--line);}
  .wrow{display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:8px 0; border-bottom:1px solid var(--line);}
  .wrow:last-child{border-bottom:none;}
  .wrow .k{color:var(--muted);}
  .wrow .v{color:var(--ink); font-weight:700; display:flex; align-items:center; gap:6px;}
  .metamask{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#f6851b,#e2761b);display:inline-block;}

  /* wallet-to-wallet flow */
  .flow{position:relative; height:96px; margin:12px 0 4px;}
  .node{position:absolute; left:0; right:0; display:flex; align-items:center; gap:10px; font-size:12px;}
  .node.top{top:0;} .node.bot{bottom:0;}
  .node .dot{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:#f4f2ff;}
  .node .who .n{font-weight:800; color:var(--ink);} .node .who .s{font-size:10.5px; color:var(--muted);}
  .pipe{position:absolute; left:17px; top:34px; bottom:34px; width:2px; background:linear-gradient(#5B6EF5,#E100FF);}
  .coin{position:absolute; left:10px; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#63b3ed,#2775ca); box-shadow:0 0 10px rgba(99,179,237,.9); top:30px; opacity:0;}

  /* QR */
  .qrwrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;}
  .qrcard{background:#fff; border-radius:18px; padding:16px; box-shadow:0 14px 40px rgba(20,20,40,.12); border:1px solid var(--line); position:relative;}
  .qr{width:168px; height:168px; display:grid; grid-template-columns:repeat(11,1fr); grid-template-rows:repeat(11,1fr); gap:2px;}
  .qr i{background:var(--ink); border-radius:2px;}
  .qr i.off{background:transparent;}
  .scanline{position:absolute; left:14px; right:14px; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--magenta),var(--cyan),transparent); box-shadow:0 0 12px var(--magenta); animation:scan 1.8s linear infinite;}
  @keyframes scan{0%{top:18px;}50%{top:150px;}100%{top:18px;}}
  .qr-cap{font-size:12.5px; color:var(--muted); text-align:center;}
  .qr-cap b{color:var(--ink);}

  /* success */
  .ok-scene{align-items:center; justify-content:center; text-align:center; padding:24px; background:#fff;}
  .check{width:92px; height:92px; border-radius:50%; background:rgba(18,183,106,.12); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; position:relative;}
  .check svg{width:48px; height:48px;}
  .check .ring{position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--green); opacity:0; animation:pop 1s ease-out;}
  @keyframes pop{0%{transform:scale(.6); opacity:.9;}100%{transform:scale(1.28); opacity:0;}}
  .ok-scene h2{font-size:19px; font-weight:900; color:var(--ink);}
  .ok-scene .sub{color:var(--muted); font-size:12.5px; margin-top:6px;}
  .stats{display:flex; gap:8px; margin-top:18px; width:100%;}
  .stat{flex:1; background:#faf9ff; border:1px solid var(--line); border-radius:13px; padding:11px 6px;}
  .stat .v{font-size:15px; font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat .l{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px;}
  .rcpt{margin-top:14px; font-size:10px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; word-break:break-all;}

  /* ---- caption + controls ---- */
  .side{width:320px; max-width:92vw;}
  .cap{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:18px 20px; min-height:150px;}
  .cap .step{font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .cap h3{font-size:17px; margin-top:8px; font-weight:800;}
  .cap p{color:#c3c5d3; font-size:13.5px; line-height:1.55; margin-top:8px;}
  .dots{display:flex; gap:7px; margin-top:16px;}
  .dots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); transition:all .3s;}
  .dots i.on{background:var(--magenta); width:22px; border-radius:6px;}
  .ctrls{display:flex; gap:10px; margin-top:18px;}
  .ctrl{flex:1; text-align:center; padding:11px; border-radius:12px; font-weight:800; font-size:13px; cursor:pointer; border:1px solid rgba(255,255,255,.14); color:#f3f4f8; background:rgba(255,255,255,.03); user-select:none;}
  .ctrl.primary{background:var(--grad-btn); color:#fff; border:none;}
  .foot{font-size:11px; color:#7a7c8c; text-align:center; margin-top:8px;}/* End custom CSS */