/* ============ EZOBOOK — receipt story, invoice try-it, app, features, before/after ============ */
:root { --ok:#34d399; --bad:#f87171; --paper:#fbfaf7; }
.pill.bad { background:rgba(248,113,113,.14); color:#fca5a5; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes scan { 0% { top:8%; } 50% { top:88%; } 100% { top:8%; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes stampIn { from { opacity:0; transform:rotate(-14deg) scale(2.2); } to { opacity:1; transform:rotate(-14deg) scale(1); } }

/* ---------- hero ---------- */
.bk-trust span:not(.mono) { font-size:.72rem; font-weight:600; padding:.42em .85em; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--dim); }
.bk-float { position:absolute; inset:0; pointer-events:none; z-index:3; }
.bk-chip { position:absolute; display:flex; align-items:center; gap:.7rem; padding:.7rem .95rem; border-radius:16px; background:rgba(12,10,26,.78); border:1px solid rgba(244,92,255,.28); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 24px 60px rgba(0,0,0,.45); animation:bob 6s ease-in-out infinite; }
.bk-chip i { width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center; color:#05060f; }
.bk-chip i svg { width:16px; height:16px; }
.bk-chip b { display:block; font-size:.8rem; }
.bk-chip span { font-size:.7rem; color:var(--dim); font-family:var(--mono); }
.bk-chip.c1 { right:9%; top:22%; } .bk-chip.c1 i { background:var(--ok); }
.bk-chip.c2 { right:30%; top:64%; animation-delay:-2s; } .bk-chip.c2 i { background:#f45cff; }
.bk-chip.c3 { right:6%; top:76%; animation-delay:-4s; } .bk-chip.c3 i { background:#fbbf24; }

/* ---------- story: shared show/hide ---------- */
.story .st-stage > [data-at], .story .st-stage > [data-only] { position:absolute; opacity:0; transition:opacity .5s, transform .6s cubic-bezier(.34,1.3,.5,1); }
.story .st-stage > [data-at].is-on, .story .st-stage > [data-only].is-now { opacity:1; }
.story .st-stage > .st-sticker { transition:opacity .3s, transform .6s cubic-bezier(.34,1.56,.64,1); }

/* camera */
.bk-cam { width:290px; height:540px; padding:10px; border-radius:42px; background:#0b0c18; border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 120px rgba(0,0,0,.6), 0 0 90px -20px rgba(209,0,217,.5); display:flex; flex-direction:column; transform:scale(.94); }
.bk-cam.is-now { transform:none; }
.bk-cam-top { display:flex; justify-content:space-between; align-items:center; padding:18px 14px 10px; font-size:.72rem; color:var(--dim); }
.bk-cam-top span { display:inline-flex; gap:.4em; align-items:center; font-weight:600; color:var(--txt); }
.bk-cam-top svg { width:15px; height:15px; color:#f45cff; }
.bk-cam-top em { font-style:normal; font-family:var(--mono); font-size:.62rem; padding:.2em .6em; border-radius:999px; background:rgba(244,92,255,.15); color:#ffd2ff; }
.bk-cam-view { position:relative; flex:1; border-radius:28px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #3a3328, #17140f 75%); }
.bk-corner { position:absolute; width:26px; height:26px; border:3px solid #f45cff; }
.bk-corner.a { top:9%; left:10%; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.bk-corner.b { top:9%; right:10%; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.bk-corner.c { bottom:7%; left:10%; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.bk-corner.d { bottom:7%; right:10%; border-left:0; border-top:0; border-radius:0 0 8px 0; }
.bk-scanline { position:absolute; left:8%; right:8%; height:3px; top:8%; border-radius:3px; background:#f45cff; box-shadow:0 0 18px 4px rgba(244,92,255,.7); animation:scan 2.6s ease-in-out infinite; }
.bk-cam-btn { height:74px; display:grid; place-items:center; }
.bk-cam-btn i { width:52px; height:52px; border-radius:50%; border:4px solid #fff; box-shadow:inset 0 0 0 3px #0b0c18, inset 0 0 0 30px #fff; }
.bk-rcpt { width:190px; padding:14px 12px 22px; background:var(--paper); color:#2a2622; font-family:var(--mono); font-size:.56rem; line-height:1.55; transform:rotate(-3deg); box-shadow:0 18px 40px rgba(0,0,0,.5); clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),94% 100%,88% calc(100% - 6px),82% 100%,76% calc(100% - 6px),70% 100%,64% calc(100% - 6px),58% 100%,52% calc(100% - 6px),46% 100%,40% calc(100% - 6px),34% 100%,28% calc(100% - 6px),22% 100%,16% calc(100% - 6px),10% 100%,4% calc(100% - 6px),0 100%); }
.bk-rcpt > b { display:block; text-align:center; font-size:.64rem; letter-spacing:.04em; }
.bk-rcpt > span { display:block; text-align:center; color:#6b645b; }
.bk-rcpt hr { border:0; border-top:1px dashed #b9b2a6; margin:.5em 0; }
.bk-rcpt p { display:flex; justify-content:space-between; gap:.5rem; }
.bk-rcpt p.t { font-weight:700; font-size:.66rem; margin-top:.3em; }
.bk-rcpt .bk-thanks { margin-top:.7em; font-size:.5rem; }

/* read */
.bk-read { left:0; top:3%; width:min(390px, 100%); padding:1.1rem; border-radius:22px; background:rgba(12,10,26,.95); border:1px solid rgba(244,92,255,.3); box-shadow:0 50px 120px rgba(0,0,0,.6), 0 0 90px -30px rgba(209,0,217,.6); transform:translateY(20px); }
.bk-read.is-on { transform:none; }
.bk-read-h { display:flex; align-items:center; gap:.7rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.bk-read-h > span { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--em); }
.bk-read-h svg { width:17px; height:17px; }
.bk-read-h b { display:block; font-size:.92rem; }
.bk-read-h i { font-style:normal; font-size:.7rem; color:var(--dim-2); font-family:var(--mono); }
.bk-read-h em { margin-left:auto; }
.bk-fields { list-style:none; display:grid; gap:.35rem; margin-top:.8rem; }
.bk-fields li { display:grid; grid-template-columns:72px 1fr 18px; gap:.6rem; align-items:center; padding:.5rem .7rem; border-radius:10px; background:rgba(255,255,255,.03); font-size:.8rem; opacity:0; transform:translateX(-8px); transition:opacity .35s, transform .35s; transition-delay:calc(.15s + var(--i) * .14s); }
.bk-read.is-on .bk-fields li { opacity:1; transform:none; }
.bk-fields span { color:var(--dim-2); font-size:.7rem; }
.bk-fields b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-fields li:last-child b { font-family:var(--mono); color:#ffd2ff; }
.bk-fields i { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--ok); color:#052e16; }
.bk-fields i svg { width:10px; height:10px; }

/* journal */
.bk-jv { right:0; top:34%; width:min(370px, 100%); padding:1rem 1.1rem; border-radius:20px; background:#f8f6ff; color:#1a0a3d; box-shadow:0 40px 100px rgba(0,0,0,.55); transform:translateX(40px); z-index:3; }
.bk-jv.is-on { transform:none; }
.bk-jv-h { font-size:.56rem; letter-spacing:.2em; color:#6d6679; margin-bottom:.6rem; }
.bk-jv-row { display:grid; grid-template-columns:1fr 70px 70px; gap:.5rem; padding:.5rem .2rem; border-bottom:1px solid rgba(41,7,117,.08); font-size:.8rem; }
.bk-jv-row b { text-align:right; font-family:var(--mono); font-weight:600; }
.bk-jv-row.hd { font-size:.62rem; color:#6d6679; font-weight:600; }
.bk-jv-row.hd span:not(:first-child) { text-align:right; }
.bk-jv-ok { display:flex; align-items:center; gap:.6rem; margin-top:.8rem; }
.bk-jv-ok b { display:inline-flex; align-items:center; gap:.3em; font-size:.76rem; padding:.35em .85em; border-radius:999px; background:#059669; color:#fff; }
.bk-jv-ok b svg { width:12px; height:12px; }
.bk-jv-ok em { font-style:normal; font-size:.66rem; color:#6d6679; margin-left:auto; }
.bk-beam { width:44px; height:24px; position:relative; }
.bk-beam::before { content:''; position:absolute; left:50%; bottom:0; width:2px; height:16px; background:#290775; transform:translateX(-50%); }
.bk-beam i { position:absolute; left:2px; right:2px; top:6px; height:3px; border-radius:2px; background:#290775; transform:rotate(-16deg); transition:transform 1s cubic-bezier(.34,1.6,.5,1) .5s; }
.bk-jv.is-on .bk-beam i { transform:rotate(0); }

/* p&l */
.bk-pl { left:6%; bottom:1%; width:min(330px, 100%); padding:1rem 1.1rem; border-radius:20px; background:rgba(12,10,26,.95); border:1px solid rgba(52,211,153,.4); box-shadow:0 40px 100px rgba(0,0,0,.55); transform:translateY(30px); z-index:4; }
.bk-pl.is-on { transform:none; }
.bk-pl-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.bk-pl-h b { font-family:var(--hf); }
.bk-pl-h span { font-size:.58rem; letter-spacing:.18em; color:var(--dim-2); }
.bk-pl-row { display:flex; justify-content:space-between; font-size:.82rem; color:var(--dim); margin-top:.5rem; }
.bk-pl-row b { font-family:var(--mono); color:var(--txt); }
.bk-pl-row b::before { content:'RM '; color:var(--dim-2); }
.bk-pl-row.net { margin-top:.8rem; padding-top:.6rem; border-top:1px solid var(--line); color:var(--txt); font-weight:600; }
.bk-pl-row.net b { color:#6ee7b7; font-size:1rem; }
.bk-pl-bar { height:7px; margin-top:.35rem; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.bk-pl-bar i { display:block; height:100%; width:0; border-radius:99px; background:var(--c); transition:width 1.2s cubic-bezier(.2,.6,.2,1) .3s; }
.bk-pl.is-on .bk-pl-bar i { width:var(--w); }

/* ask EZO */
.bk-ask { right:0; top:6%; width:min(360px, 100%); display:grid; gap:.6rem; z-index:5; transform:translateY(-20px); }
.bk-ask.is-on { transform:none; }
.bk-q { justify-self:end; max-width:86%; padding:.7rem .95rem; border-radius:18px 18px 4px 18px; background:var(--em); font-size:.86rem; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.bk-a { display:flex; align-items:flex-end; gap:.5rem; }
.bk-a img { width:64px; height:64px; flex:none; filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.bk-a p { padding:.75rem .95rem; border-radius:18px 18px 18px 4px; background:#f8f6ff; color:#1a0a3d; font-size:.84rem; line-height:1.5; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.bk-a p b { color:#a100a8; }
.story .st-sticker.s1 { top:auto; bottom:30%; right:auto; left:46%; background:#FFD166; color:#3a2a00; }
.story .st-sticker.s2 { bottom:auto; top:4%; right:auto; left:2%; }

/* ---------- try it: invoice builder ---------- */
.bk-items { display:grid; gap:.35rem; }
.bk-items button { display:grid; grid-template-columns:20px 1fr auto; gap:.6rem; align-items:center; font:inherit; font-size:.84rem; text-align:left; color:var(--dim); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:.55rem .75rem; cursor:pointer; transition:all .22s; }
.bk-items button:hover { border-color:rgba(244,92,255,.4); }
.bk-items i { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.2); color:transparent; transition:all .2s; }
.bk-items i svg { width:12px; height:12px; }
.bk-items b { font-family:var(--mono); font-size:.76rem; font-weight:500; }
.bk-items [aria-pressed="true"] { color:var(--txt); border-color:rgba(244,92,255,.55); background:rgba(209,0,217,.12); }
.bk-items [aria-pressed="true"] i { background:var(--em); border-color:transparent; color:#fff; }
.bk-sw { display:flex; align-items:center; gap:.7rem; margin-top:1rem; font-size:.84rem; color:var(--dim); cursor:pointer; }
.bk-sw input { position:absolute; opacity:0; }
.bk-sw span { position:relative; width:38px; height:22px; flex:none; border-radius:99px; background:rgba(255,255,255,.12); transition:background .2s; }
.bk-sw span::after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.34,1.5,.5,1); }
.bk-sw input:checked + span { background:var(--em); }
.bk-sw input:checked + span::after { transform:translateX(16px); }
.bk-sw input:focus-visible + span { outline:2px solid #f45cff; outline-offset:2px; }
.bk-send { margin-top:1.3rem; }
.bk-out { position:relative; flex-direction:column; gap:1rem; padding:1.2rem; }
.bk-paper { position:relative; padding:1.3rem 1.4rem; border-radius:14px; background:var(--paper); color:#1f1b2e; box-shadow:0 30px 70px rgba(0,0,0,.45); overflow:hidden; }
.bk-p-top { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.9rem; border-bottom:2px solid #1f1b2e; }
.bk-p-top span { display:block; font-size:.66rem; color:#6b6478; }
.bk-co { font-size:.82rem; letter-spacing:.02em; }
.bk-p-meta { text-align:right; }
.bk-p-meta > b { display:block; font-family:var(--hf); font-size:1.3rem; letter-spacing:.06em; background:linear-gradient(120deg,#290775,#F600FE); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bk-p-meta .mono { font-size:.72rem; color:#1f1b2e; }
.bk-p-meta em { font-style:normal; color:#1f1b2e; font-weight:600; }
.bk-billto { padding:.8rem 0; }
.bk-billto .mono { font-size:.56rem; letter-spacing:.2em; color:#8a8494; }
.bk-billto b { display:block; font-size:.9rem; margin-top:.15rem; }
.bk-billto span:last-child { font-size:.72rem; color:#6b6478; }
.bk-l { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid #ebe7f2; font-size:.82rem; }
.bk-l.hd { font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a8494; }
.bk-l b { font-family:var(--mono); font-weight:500; }
.bk-lrows .bk-l { animation:inUp .35s ease both; }
.bk-tot { margin-left:auto; width:min(240px, 100%); padding-top:.6rem; }
.bk-tot p { display:flex; justify-content:space-between; font-size:.8rem; color:#6b6478; padding:.2rem 0; }
.bk-tot b { font-family:var(--mono); font-weight:500; color:#1f1b2e; }
.bk-tot p.g { margin-top:.3rem; padding-top:.5rem; border-top:2px solid #1f1b2e; color:#1f1b2e; font-weight:700; }
.bk-tot p.g b { font-weight:700; font-size:1rem; }
.bk-sstrow[hidden] { display:none; }
.bk-stamp { position:absolute; right:12%; top:42%; padding:.2em .6em; border:4px solid #059669; border-radius:10px; color:#059669; font-family:var(--hf); font-weight:700; font-size:2.4rem; letter-spacing:.1em; opacity:0; transform:rotate(-14deg); pointer-events:none; }
.bk-out.paid .bk-stamp { animation:stampIn .45s cubic-bezier(.34,1.4,.5,1) both; }
.bk-track { list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; }
.bk-track li { position:relative; padding:.6rem .6rem .55rem; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); transition:all .35s; }
.bk-track i { display:block; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); margin-bottom:.4rem; transition:all .35s; }
.bk-track b { display:block; font-size:.78rem; color:var(--dim); }
.bk-track span { display:block; font-size:.64rem; color:var(--dim-2); line-height:1.35; margin-top:.15rem; }
.bk-track li.on { border-color:rgba(244,92,255,.45); background:rgba(209,0,217,.1); }
.bk-track li.on i { background:#f45cff; box-shadow:0 0 12px #f45cff; }
.bk-track li.on b { color:var(--txt); }
.bk-track li.on[data-s="3"] { border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.1); }
.bk-track li.on[data-s="3"] i { background:var(--ok); box-shadow:0 0 12px var(--ok); }
.bk-yay { position:absolute; right:-34px; top:-46px; width:110px; height:110px; opacity:0; transform:scale(.3) rotate(-12deg); transition:opacity .3s, transform .6s cubic-bezier(.34,1.6,.5,1); pointer-events:none; filter:drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.bk-out.paid .bk-yay { opacity:1; transform:none; }

/* ---------- the app ---------- */
.bk-dx { height:660px; }
.bk-dx .dx-side { gap:.6rem; overflow:hidden; }
.bk-dx .dx-navs { gap:.05rem; }
.bk-dx .dx-nav { padding:.42rem .7rem; }
.bk-dx .dx-nav.on { color:#ffd2ff; }
.bk-ng { display:block; font-size:.54rem; letter-spacing:.2em; color:var(--dim-2); padding:.7rem .7rem .25rem; }
.bk-org { display:flex !important; align-items:center; gap:.5rem; padding:.5rem .55rem !important; border-radius:12px; background:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important; cursor:default !important; }
.bk-org span { width:24px; height:24px; flex:none; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:.7rem; background:linear-gradient(135deg,#290775,#F600FE); color:#fff; }
.bk-org b { font-size:.74rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; text-align:left; }
.bk-org svg { width:14px; height:14px; color:var(--dim-2); }
.bk-bell { position:relative; display:grid; place-items:center; }
.bk-bell i { position:absolute; top:-2px; right:-3px; width:7px; height:7px; border-radius:50%; background:#f45cff; }
.bk-dgrid { display:grid; grid-template-columns:1.25fr 1fr; gap:.7rem; margin-top:.9rem; }
.bk-bars, .bk-over { padding:.9rem 1rem; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.015); }
.bk-bars-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; }
.bk-bars-h b { font-size:.82rem; }
.bk-bars-h span { display:flex; align-items:center; gap:.35rem; font-size:.66rem; color:var(--dim-2); }
.bk-bars-h span i { width:8px; height:8px; border-radius:2px; background:#34d399; }
.bk-bars-h span i.x { background:#f45cff; margin-left:.4rem; }
.bk-bars-c { display:grid; grid-template-columns:repeat(6, 1fr); gap:.5rem; height:170px; }
.bk-bm { display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.bk-bm span { font-size:.62rem; color:var(--dim-2); }
.bk-bb { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.bk-bb i { width:38%; max-width:16px; height:0; border-radius:4px 4px 0 0; background:#34d399; transition:height .8s cubic-bezier(.2,.6,.2,1); transition-delay:var(--d); }
.bk-bb i.x { background:#f45cff; }
.bk-dx.live .bk-bb i { height:var(--h); }
.bk-over .bk-bars-h .mono { font-size:.72rem; color:#fca5a5; }
.bk-orow { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-top:1px solid var(--line); }
.bk-orow > span { flex:1; min-width:0; }
.bk-orow b { display:block; font-size:.78rem; }
.bk-orow i { font-style:normal; font-size:.66rem; color:var(--dim-2); }
.bk-orow button { font-size:.7rem !important; font-weight:600 !important; padding:.4em .9em !important; border-radius:999px; background:rgba(244,92,255,.14) !important; color:#ffd2ff !important; white-space:nowrap; }
.bk-orow button.sent { background:rgba(52,211,153,.14) !important; color:#6ee7b7 !important; }
.bk-irow { grid-template-columns:1.5fr .7fr .8fr 90px; }
.bk-amt { text-align:right; color:var(--txt); font-size:.78rem; }
.bk-drop { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:1.4rem 1rem; border-radius:16px; border:1.5px dashed rgba(244,92,255,.45); background:rgba(209,0,217,.06); text-align:center; }
.bk-drop svg { width:24px !important; height:24px !important; color:#f45cff; margin-bottom:.2rem; }
.bk-drop b { font-size:.86rem; }
.bk-drop span { font-size:.72rem; color:var(--dim-2); }
.bk-crows { margin-top:.9rem; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.bk-crow { display:grid; grid-template-columns:34px 1.4fr .7fr auto; gap:.8rem; align-items:center; padding:.65rem .9rem; border-bottom:1px solid var(--line); color:var(--dim); animation:inUp .3s ease both; }
.bk-crow:last-child { border-bottom:0; }
.bk-cav { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:.62rem; font-weight:700; background:rgba(255,255,255,.06); color:var(--txt); }
.bk-cst { display:flex; align-items:center; gap:.4rem; justify-content:flex-end; min-width:150px; }
.bk-post { font-size:.68rem !important; font-weight:700 !important; padding:.35em .9em !important; border-radius:999px; background:var(--em) !important; color:#fff !important; }
.bk-crow[data-s="mute"] .pill::before { content:''; display:inline-block; width:8px; height:8px; margin-right:.4em; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; vertical-align:-1px; animation:spin .8s linear infinite; }
.bk-rtabs { align-items:center; }
.bk-rtabs .mono { margin-left:auto; font-size:.6rem; letter-spacing:.14em; color:var(--dim-2); }
.bk-st { border:1px solid var(--line); border-radius:14px; padding:.4rem 1rem .6rem; animation:inUp .35s ease both; max-height:420px; overflow:auto; }
.bk-st[hidden] { display:none; }
.bk-st-g { font-size:.56rem; letter-spacing:.2em; color:var(--dim-2); padding:.8rem 0 .3rem; }
.bk-st-r { display:flex; justify-content:space-between; padding:.38rem 0; font-size:.78rem; color:var(--dim); border-bottom:1px solid rgba(255,255,255,.04); }
.bk-st-r b { font-weight:500; color:var(--txt); font-size:.76rem; }
.bk-st-r.tot { color:var(--txt); font-weight:600; border-bottom:1px solid var(--line); }
.bk-st-r.tot:last-child { color:#6ee7b7; border-bottom:0; }
.bk-st-r.tot:last-child b { color:#6ee7b7; }
.bk-chat { display:flex; flex-direction:column; height:540px; }
.bk-chat-log { flex:1; display:flex; flex-direction:column; gap:.7rem; overflow:auto; padding:.2rem .2rem 1rem; }
.bk-msg { display:flex; align-items:flex-end; gap:.5rem; max-width:82%; animation:inUp .35s ease both; }
.bk-msg img { width:44px; height:44px; flex:none; }
.bk-msg p { padding:.7rem .9rem; border-radius:16px 16px 16px 4px; background:rgba(255,255,255,.05); border:1px solid var(--line); line-height:1.55; }
.bk-msg p b { color:#ffd2ff; }
.bk-msg.me { align-self:flex-end; }
.bk-msg.me p { background:var(--em); border-color:transparent; border-radius:16px 16px 4px 16px; }
.bk-msg ul { list-style:none; margin-top:.5rem; display:grid; gap:.25rem; }
.bk-msg li { display:flex; justify-content:space-between; gap:1rem; font-size:.74rem; padding:.3rem .5rem; border-radius:8px; background:rgba(255,255,255,.04); }
.bk-msg li b { font-family:var(--mono); font-weight:500; color:var(--txt); }
.bk-typing p { display:flex; gap:4px; }
.bk-typing p i { width:6px; height:6px; border-radius:50%; background:var(--dim); animation:typeDot 1s infinite; }
.bk-typing p i:nth-child(2) { animation-delay:.15s; } .bk-typing p i:nth-child(3) { animation-delay:.3s; }
.bk-sugs { display:flex; flex-wrap:wrap; gap:.4rem; padding-top:.7rem; border-top:1px solid var(--line); }
.bk-sugs button { font-size:.76rem; padding:.55em 1em; border-radius:999px; border:1px solid rgba(244,92,255,.4) !important; color:#ffd2ff !important; transition:background .2s; }
.bk-sugs button:hover { background:rgba(209,0,217,.14) !important; }

/* phone */
.bk-m { gap:.7rem; }
.bk-m-kpi { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.bk-m-kpi div { padding:.75rem; border-radius:16px; background:color-mix(in srgb, var(--c) 9%, transparent); border:1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.bk-m-kpi i { display:block; font-style:normal; font-size:.66rem; color:var(--dim-2); }
.bk-m-kpi b { font-family:var(--hf); font-size:1.05rem; }
.bk-m-snap { display:flex; align-items:center; gap:.8rem; padding:1rem; border-radius:18px; background:linear-gradient(120deg,#290775,#d100d9) !important; color:#fff; text-align:left; box-shadow:0 18px 40px -12px rgba(209,0,217,.7); }
.bk-m-snap svg { width:28px !important; height:28px !important; padding:6px; box-sizing:content-box; border-radius:12px; background:rgba(255,255,255,.18); }
.bk-m-snap b { display:block; font-size:.95rem; }
.bk-m-snap i { font-style:normal; font-size:.72rem; opacity:.8; }
.bk-m-list { flex:1; display:flex; flex-direction:column; gap:.4rem; }
.bk-m-list .mono { font-size:.56rem; letter-spacing:.2em; color:var(--dim-2); margin:.2rem 0; }
.bk-m-list div { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:.6rem; padding:.6rem .75rem; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.bk-m-list b { font-size:.8rem; }
.bk-m-list i { grid-row:2; font-style:normal; font-size:.68rem; color:var(--dim-2); }
.bk-m-list em { grid-row:1 / 3; grid-column:2; align-self:center; }
.bk-m-nav { display:grid; grid-template-columns:repeat(4, 1fr); padding:.5rem 0 0; border-top:1px solid var(--line); }
.bk-m-nav span { display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:.6rem; color:var(--dim-2); }
.bk-m-nav span.on { color:#f45cff; }
.bk-m-nav svg { width:18px; height:18px; }
.bk-m-cam { position:absolute; inset:0; z-index:9; display:flex; flex-direction:column; padding:58px 14px 18px; gap:.8rem; background:#07081a; animation:inUp .35s ease both; }
.bk-m-cam[hidden] { display:none; }
.bk-m-cam .bk-cam-view { border-radius:22px; }
.bk-m-res { display:grid; gap:.3rem; padding:.9rem; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); animation:inUp .4s ease both; }
.bk-m-res[hidden] { display:none; }
.bk-m-res .pill { justify-self:start; }
.bk-m-res b { font-size:.95rem; }
.bk-m-res i { font-style:normal; font-size:.74rem; color:var(--dim-2); }
.bk-m-res button { margin-top:.4rem; padding:.85rem; border-radius:14px; font-weight:700; }

/* ---------- key feature demos ---------- */
.kd-q { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:center; min-height:300px; }
.kd-doc { position:relative; padding:1rem; border-radius:16px; background:var(--paper); color:#1f1b2e; box-shadow:0 30px 70px rgba(0,0,0,.45); font-size:.74rem; }
.kd-doc > b { display:block; font-family:var(--hf); letter-spacing:.06em; }
.kd-doc .mono { display:block; font-size:.62rem; color:#6b6478; margin:.2rem 0 .7rem; }
.kd-doc p { display:flex; justify-content:space-between; gap:.6rem; padding:.35rem 0; border-bottom:1px solid #ebe7f2; }
.kd-doc p b { font-family:var(--mono); font-weight:500; }
.kd-doc p.t { border-bottom:0; font-weight:700; padding-top:.5rem; }
.kd-doc em { position:absolute; font-style:normal; font-weight:700; font-size:.7rem; padding:.25em .7em; border-radius:999px; }
.kd-acc { right:-10px; top:-10px; background:#059669; color:#fff; opacity:0; transform:scale(.4) rotate(8deg); }
.kf-panel.play .kd-acc { animation:pop2 .5s cubic-bezier(.34,1.6,.5,1) .9s forwards; }
@keyframes pop2 { to { opacity:1; transform:rotate(8deg); } }
.kd-arrow { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#05060f; opacity:0; }
.kd-arrow svg { width:20px; height:20px; }
.kf-panel.play .kd-arrow { animation:inUp .4s ease 1.6s forwards; }
.kd-doc.b { opacity:0; transform:translateX(-30px) rotate(-3deg); }
.kf-panel.play .kd-doc.b { animation:slideDoc .7s cubic-bezier(.34,1.3,.5,1) 2.1s forwards; }
@keyframes slideDoc { to { opacity:1; transform:none; } }
.kd-doc.b > b { color:#a100a8; }
.kd-from { left:1rem; bottom:-12px; background:var(--c); color:#05060f; }
.kd-cal2-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; }
.kd-cal2-h b { font-family:var(--hf); font-size:1.05rem; }
.kd-cal2-h span { display:flex; align-items:center; gap:.35rem; font-size:.7rem; color:var(--dim-2); }
.kd-cal2-h i { width:9px; height:9px; border-radius:3px; }
.kd-cal2-h i.r, .kd-days i.r { background:#60a5fa; }
.kd-cal2-h i.m { background:#f45cff; margin-left:.5rem; }
.kd-days { display:grid; grid-template-columns:repeat(7, 1fr); gap:.3rem; }
.kd-days em { font-style:normal; text-align:center; font-size:.6rem; color:var(--dim-2); }
.kd-days i { font-style:normal; display:grid; place-items:center; height:34px; border-radius:9px; font-size:.74rem; color:var(--dim); background:rgba(255,255,255,.03); }
.kd-days i.pad { background:none; }
.kd-days i.r { color:#05060f; font-weight:700; }
.kd-days i.m { box-shadow:inset 0 0 0 2px #f45cff; color:var(--txt); }
.kd-days i.today { outline:1px dashed rgba(255,255,255,.4); }
.kf-panel.play .kd-days i.r, .kf-panel.play .kd-days i.m { animation:pop3 .5s cubic-bezier(.34,1.6,.5,1) both; }
.kf-panel.play .kd-days i.m { animation-delay:.6s; }
@keyframes pop3 { from { transform:scale(.4); } to { transform:none; } }
.kd-ev { list-style:none; display:grid; gap:.4rem; margin-top:.9rem; }
.kd-ev li { display:flex; gap:.7rem; align-items:center; padding:.55rem .8rem; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); font-size:.82rem; color:var(--dim); opacity:0; }
.kd-ev b { font-family:var(--mono); font-size:.72rem; color:var(--c); width:52px; }
.kf-panel.play .kd-ev li { animation:inUp .4s ease forwards; animation-delay:calc(1s + var(--i) * .45s); }
.kd-ag-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; }
.kd-ag-h span { color:var(--dim); }
.kd-ag-h b { font-family:var(--hf); font-size:1.6rem; }
.kd-ags { display:grid; grid-template-columns:repeat(5, 1fr); gap:.7rem; align-items:end; height:280px; }
.kd-ag { height:100%; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.kd-ag > b { font-family:var(--mono); font-size:.7rem; font-weight:500; }
.kd-ag > b::before { content:'RM '; color:var(--dim-2); }
.kd-ag > div { flex:1; width:100%; display:flex; align-items:flex-end; border-radius:12px; background:rgba(255,255,255,.03); }
.kd-ag i { display:block; width:100%; height:0; border-radius:12px; background:var(--c); box-shadow:0 0 30px -6px var(--c); transition:height 1s cubic-bezier(.2,.6,.2,1); transition-delay:calc(.2s + var(--i) * .15s); }
.kf-panel.play .kd-ag i { height:max(var(--h), 4px); }
.kd-ag span { font-size:.66rem; color:var(--dim-2); text-align:center; }
.kd-rc-h { display:grid; grid-template-columns:1fr 34px 1fr; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim-2); font-family:var(--mono); margin-bottom:.5rem; }
.kd-rc-h span:last-child { grid-column:3; }
.kd-rc { display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; margin-bottom:.4rem; }
.kd-bank, .kd-book { padding:.5rem .7rem; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); font-size:.74rem; transition:all .4s; transition-delay:calc(.4s + var(--i) * .45s); }
.kd-bank { display:grid; grid-template-columns:auto 1fr; column-gap:.5rem; }
.kd-bank i { font-style:normal; grid-row:1 / 3; font-size:.62rem; color:var(--dim-2); align-self:center; width:40px; }
.kd-bank span, .kd-book span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dim); }
.kd-bank b, .kd-book b { font-size:.72rem; font-weight:500; }
.kd-book { transform:translateX(24px); opacity:.25; }
.kd-book b, .kd-book span { display:block; }
.kd-link { justify-self:center; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); color:transparent; transition:all .3s; transition-delay:calc(.6s + var(--i) * .45s); }
.kd-link svg { width:12px; height:12px; }
.kf-panel.play .kd-book { transform:none; opacity:1; border-color:rgba(251,191,36,.4); }
.kf-panel.play .kd-bank { border-color:rgba(251,191,36,.4); }
.kf-panel.play .kd-link { background:var(--c); color:#05060f; }
.kd-rc-ok { margin-top:.8rem; font-size:.84rem; color:var(--dim); }
.kd-rc-ok b { font-family:var(--hf); font-size:1.3rem; color:var(--c); }
.kd-rtabs { display:inline-flex; gap:.3rem; padding:.3rem; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); margin-bottom:1.1rem; }
.kd-rtabs button { font:inherit; font-size:.78rem; font-weight:600; padding:.4em 1em; border-radius:999px; border:0; cursor:pointer; color:var(--dim); background:none; transition:all .25s; }
.kd-rtabs button.on { background:var(--c); color:#05060f; }
.kd-rp { display:none; padding:1.2rem; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(56,189,248,.3); animation:inUp .4s ease both; }
.kd-rp.on { display:block; }
.kd-rp-t { display:block; font-family:var(--hf); font-size:1.15rem; margin-bottom:.8rem; }
.kd-rp-r { display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--dim); }
.kd-rp-r b { color:var(--txt); font-weight:500; }
.kd-rp-r.n { border-bottom:0; color:var(--txt); font-weight:600; }
.kd-rp-r.n b { color:var(--c); font-size:1.1rem; }
.kd-tm { display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:.5rem; align-items:center; padding:.6rem .7rem; border-radius:12px; margin-bottom:.4rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); opacity:0; }
.kd-tm.hd { background:none; border:0; opacity:1; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-2); text-align:center; padding-top:0; padding-bottom:0; }
.kf-panel.play .kd-tm:not(.hd) { animation:inUp .4s ease forwards; animation-delay:calc(.2s + var(--i) * .2s); }
.kd-who { display:flex; align-items:center; gap:.55rem; min-width:0; }
.kd-who i { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:.8rem; color:#05060f; }
.kd-who b { font-size:.84rem; }
.kd-who em { font-style:normal; font-size:.66rem; color:var(--dim-2); margin-left:auto; padding:.2em .6em; border-radius:999px; background:rgba(255,255,255,.05); white-space:nowrap; }
.kd-pm { justify-self:center; width:34px; height:20px; border-radius:99px; background:rgba(255,255,255,.1); position:relative; transition:background .3s; }
.kd-pm::after { content:''; position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .3s cubic-bezier(.34,1.5,.5,1); }
.kd-pm.on { background:var(--c); }
.kd-pm.on::after { transform:translateX(14px); }

/* ---------- malaysia-ready ---------- */
.bk-my { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:2rem; }
.bk-my li { display:flex; gap:.8rem; align-items:flex-start; padding:.9rem; border-radius:16px; background:var(--card); border:1px solid var(--line); transition:transform .3s, border-color .3s; }
.bk-my li:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.bk-my .chan-ic { width:40px; height:40px; border-radius:12px; color:var(--c); background:color-mix(in srgb, var(--c) 15%, transparent); }
.bk-my .chan-ic svg { width:20px; height:20px; }
.bk-my b { display:block; font-size:.92rem; margin-bottom:.15rem; }
.bk-my div span { font-size:.76rem; color:var(--dim); line-height:1.5; }
.feed-row .bk-fi { width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; color:#05060f; }
.feed-row .bk-fi svg { width:18px; height:18px; }
.feed-row b .mono { font-weight:500; color:var(--em-hi); }

/* ---------- before / after ---------- */
.bk-ba-sec { padding-top:6vh; padding-bottom:12vh; }
.bk-ba { position:relative; max-width:1100px; margin:0 auto; aspect-ratio:3 / 2; border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:0 50px 140px rgba(0,0,0,.5), 0 0 120px -50px rgba(209,0,217,.6); user-select:none; }
.bk-ba > img, .bk-ba-b img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bk-ba-b { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.bk-ba-h { position:absolute; top:0; bottom:0; left:var(--p); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 20px rgba(244,92,255,.9); pointer-events:none; }
.bk-ba-h i { position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.bk-ba-h i::before, .bk-ba-h i::after { content:''; position:absolute; top:50%; width:0; height:0; border:7px solid transparent; margin-top:-7px; }
.bk-ba-h i::before { left:8px; border-right-color:#290775; }
.bk-ba-h i::after { right:8px; border-left-color:#290775; }
.bk-ba input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.bk-ba-l { position:absolute; bottom:1.2rem; padding:.5em 1em; border-radius:999px; font-size:.78rem; font-weight:600; background:rgba(5,6,15,.72); backdrop-filter:blur(10px); pointer-events:none; transition:opacity .3s; }
.bk-ba-l.b { left:1.2rem; }
.bk-ba-l.a { right:1.2rem; background:rgba(209,0,217,.75); }
.bk-ba-pts { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; max-width:1100px; margin:1.6rem auto 0; }
.bk-ba-pts li { display:flex; gap:.8rem; align-items:flex-start; padding:1rem; border-radius:18px; background:var(--card); border:1px solid var(--line); }
.bk-ba-pts svg { width:22px; height:22px; flex:none; color:#f45cff; }
.bk-ba-pts b { display:block; font-size:.92rem; margin-bottom:.2rem; }
.bk-ba-pts span { font-size:.8rem; color:var(--dim); line-height:1.5; }

/* ---------- pricing, cta ---------- */
.bk-grid { grid-template-columns:repeat(3, 1fr); max-width:1100px; margin-left:auto; margin-right:auto; }
.price-foot a { color:var(--em-hi); text-decoration:none; }
.price-foot a:hover { text-decoration:underline; }
.bk-cta-ezo { display:block; width:150px; height:150px; margin:0 auto 1rem; filter:drop-shadow(0 20px 40px rgba(209,0,217,.35)); }
.bk-cta-ezo.in { animation:bob 5s ease-in-out infinite; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .bk-chip.c2 { display:none; } }
@media (max-width: 1024px) {
  .bk-dx { height:auto; }
  .bk-org, .bk-ng { display:none !important; }
  .bk-dx .dx-nav[disabled] { display:none; }
  .bk-chat { height:460px; }
}
@media (max-width: 920px) {
  .bk-float { display:none; }
  .story .st-stage { min-height:min(64vh, 560px); }
  .story .st-stage > [data-at], .story .st-stage > [data-only] { left:0; right:0; margin:0 auto; top:0; bottom:auto; transform:translateY(16px); }
  .story .st-stage > .is-on:not(.is-cur), .story .st-stage > .is-now:not(.is-cur) { opacity:0; pointer-events:none; }
  .story .st-stage > .is-cur { opacity:1; transform:none; }
  .story .st-stage > .st-sticker.is-cur { transform:scale(1) rotate(var(--rot,0deg)); }
  .bk-cam { width:240px; height:440px; }
  .bk-rcpt { width:170px; font-size:.52rem; }
  .bk-ask { top:4%; }
  .story .st-sticker.s1 { top:auto; bottom:6%; left:4%; right:auto; margin:0; }
  .story .st-sticker.s2 { top:auto; bottom:14%; right:4%; left:auto; margin:0; }
  .bk-dgrid { grid-template-columns:1fr; }
  .bk-irow { grid-template-columns:1fr auto; }
  .bk-irow .dx-kw, .bk-irow .bk-amt { display:none; }
  .bk-crow { grid-template-columns:34px 1fr auto; }
  .bk-crow .bk-amt { display:none; }
  .bk-cst { min-width:0; }
  .bk-track { grid-template-columns:repeat(2, 1fr); }
  .bk-yay { right:0; bottom:auto; top:-30px; width:90px; height:90px; }
  .kd-q { grid-template-columns:1fr; }
  .kd-arrow { justify-self:center; transform:rotate(90deg); }
  .kd-ags { height:220px; gap:.4rem; }
  .kd-tm { grid-template-columns:1.2fr repeat(4, 1fr); padding:.5rem; }
  .kd-who em { display:none; }
  .kd-tm.hd span { font-size:.5rem; letter-spacing:0; }
  .bk-my { grid-template-columns:1fr; }
  .bk-ba { aspect-ratio:4 / 5; border-radius:22px; }
  .bk-ba-l { font-size:.68rem; bottom:.8rem; }
  .bk-ba-l.b { left:.8rem; top:.8rem; bottom:auto; } .bk-ba-l.a { right:.8rem; }
  .bk-dx .dx-stats b { font-size:1.08rem; }
  .bk-ba-pts, .bk-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) { .footer-cols { flex-wrap:wrap; gap:1.6rem 2.2rem; } }
@media (max-width: 480px) {
  .bk-p-top { flex-direction:column; gap:.5rem; }
  .bk-p-meta { text-align:left; }
  .bk-paper { padding:1rem; }
  .kd-rc-h { display:none; }
  .kd-rc { grid-template-columns:1fr 26px 1fr; }
  .kd-bank { grid-template-columns:1fr; }
  .kd-bank i { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-chip, .bk-scanline, .bk-cta-ezo.in { animation:none !important; }
  .kf-panel .kd-doc.b, .kf-panel .kd-arrow, .kf-panel .kd-acc { opacity:1 !important; transform:none !important; }
}