/* BatwaPay enhancements: layered on top of styles.css, nothing there is changed */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--g1),var(--accent));z-index:200;pointer-events:none}
/* store badges */
.store{display:inline-flex;align-items:center;gap:11px;min-width:172px;height:56px;padding:0 20px 0 15px;border-radius:14px;background:#000;color:#fff;border:1px solid #ffffff4d;text-align:left;cursor:pointer;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.store:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 30px -12px var(--accent)}
.store>svg{width:28px;height:28px;flex:none}
.store small{display:block;font:500 10.5px/1.1 var(--inter);opacity:.85}
.store b{display:block;font:600 19px/1.15 var(--sora);letter-spacing:-.01em}
:root[data-theme=light] .store{border-color:#06201a40}
.hero-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.hero-stores .store{height:50px;min-width:150px}.hero-stores .store b{font-size:17px}
.art-stores .store{width:100%}
/* sms form */
.sms{width:100%;max-width:460px;margin:26px auto 0;text-align:left}
.sms-l{display:block;font:500 13px var(--inter);color:var(--soft);margin:0 0 8px 6px}
.sms-f{display:flex;align-items:center;gap:8px;padding:6px;border-radius:99px;border:1px solid var(--glass-line);background:var(--veil);transition:border-color .25s,box-shadow .25s}
.sms-f:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--halo)}
.sms-p{font:600 14px var(--inter);color:var(--soft);padding-left:14px;white-space:nowrap}
.sms-f input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 16px var(--inter);padding:12px 4px}
.sms-go{border:0;cursor:pointer;white-space:nowrap;height:46px;padding:0 20px;border-radius:99px;background:var(--btn-bg);color:var(--btn-ink);font:600 14.5px var(--inter);transition:transform .25s,box-shadow .25s}
.sms-go:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px var(--accent)}
.sms-m{min-height:22px;margin:8px 0 0 6px;font-size:13.5px;color:var(--accent)}.sms-m.er{color:#ff8f8f}
.or{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;margin:12px auto 4px;font-size:13px;color:var(--muted)}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--divider)}
.getapp-card .sms,.getapp-card .or{margin-inline:0}
.getapp-card .sms{margin-top:22px}
/* calculator */
.calc{border-radius:32px;padding:clamp(22px,4vw,44px);max-width:960px;margin:auto}
.calc-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.calc label{display:block;font:500 13px var(--inter);color:var(--soft);margin:0 0 8px 4px}
.calc-i{display:flex;align-items:center;gap:8px;padding:0 18px;border-radius:18px;border:1px solid var(--glass-line);background:var(--veil)}
.calc-i:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--halo)}
.calc-i span{font:700 20px var(--sora);color:var(--accent)}
.calc-i input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:700 24px var(--sora);padding:16px 0}
.calc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.calc-chips button{cursor:pointer;border:1px solid var(--glass-line);background:none;color:var(--text);border-radius:99px;padding:8px 14px;font:500 14px var(--inter);transition:.25s}
.calc-chips button:hover,.calc-chips button.on{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent}
.calc-o{padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--bal-bg);color:var(--bal-ink)}
.calc-o small{opacity:.85;font-size:14px}.calc-o b{display:block;font:800 clamp(32px,4.4vw,52px)/1.1 var(--sora);letter-spacing:-.03em;margin:6px 0 18px;font-variant-numeric:tabular-nums}
.calc-o p{font-size:13px;opacity:.85;margin-top:16px}
.calc-bar{height:8px;border-radius:99px;background:#00000026;overflow:hidden}.calc-bar i{display:block;height:100%;width:0;border-radius:inherit;background:#fff;transition:width .8s var(--ease)}
/* cursor glow on cards */
.glow-card{position:relative}
.spot-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--halo),transparent 70%)}
.glow-card:hover>.spot-glow{opacity:1}
/* mobile dock */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;display:none;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:99px;background:var(--nav2,#071411ee);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 50px -16px #000;transform:translate(-50%,140%);transition:transform .5s var(--ease)}
.dock span{font:600 14px var(--sora);color:var(--text);margin-right:4px}
.dock .dk{width:42px;height:42px;border-radius:50%;background:#000;border:1px solid #ffffff4d;color:#fff;display:grid;place-items:center}
.dock .dk svg{width:22px;height:22px}
.dock.show{transform:translate(-50%,0)}
@media(max-width:760px){.dock{display:flex}.calc-in{grid-template-columns:1fr}}
@media(max-width:520px){.sms-f{flex-wrap:wrap;border-radius:24px}.sms-p{padding-left:12px}.sms-go{width:100%}.hero-stores .store{flex:1;min-width:0;padding:0 12px 0 10px}.hero-stores .store b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.dock,.calc-bar i{transition:none}}
/* ===== New hero ===== */
.hx{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;padding:120px 0 70px;overflow:hidden}
.hx-bg{position:absolute;inset:0;pointer-events:none;mask:linear-gradient(#000 70%,transparent)}
.hx-bg i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(100px);opacity:.3;background:#0f7f60;top:-25%;left:-12%;animation:hxd 20s ease-in-out infinite alternate}
.hx-bg i+i{background:#22e3a6;opacity:.16;top:auto;left:auto;bottom:-35%;right:-15%;animation-delay:-9s}
:root[data-theme=light] .hx-bg i{opacity:.16}
@keyframes hxd{to{transform:translate(9%,10%) scale(1.15)}}
.hx-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:32px;align-items:center}
.hx-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;font:500 13.5px var(--inter);color:var(--soft);background:var(--card-bg);border:1px solid var(--card-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hx-pill b{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:hxp 1.9s infinite}
@keyframes hxp{0%{box-shadow:0 0 0 0 #22e3a699}70%,100%{box-shadow:0 0 0 9px #22e3a600}}
.hx-h1{font:800 clamp(40px,5vw,68px)/1.02 var(--sora);letter-spacing:-.035em;color:var(--text);margin:22px 0 0;text-wrap:balance}
.hx-l{display:block;overflow:hidden;padding:0 0 .1em}.hx-l>span{display:block}
.hx-lead{max-width:520px;margin-top:22px;color:var(--soft);font-size:clamp(16px,1.35vw,18.5px)}
.hx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hx-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hx-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hx-proof li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font:500 13.5px var(--inter);color:var(--soft);border:1px solid var(--card-line);background:var(--veil)}
.hx-proof .i{width:17px;height:17px;color:var(--accent)}
.hx-stage{position:relative;display:grid;place-items:center;min-height:640px;perspective:1200px;translate:0 calc(var(--sy,0)*-.07px)}
.hx-halo{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(var(--halo),transparent 66%);animation:hxh 5s ease-in-out infinite}
@keyframes hxh{50%{transform:scale(1.16);opacity:.8}}
.hx-tilt{transform-style:preserve-3d;transition:transform .25s ease-out}
.hx-phone{position:relative;width:292px;height:598px;padding:11px;border-radius:48px;background:linear-gradient(145deg,#33423d,#0a110f);box-shadow:0 50px 90px -30px #000c,inset 0 0 0 1.5px #ffffff30;transform:rotate(-3deg);animation:hxb 7s ease-in-out infinite}
@keyframes hxb{50%{transform:rotate(-1.5deg) translateY(-14px)}}
.hx-scr{position:relative;height:100%;border-radius:38px;background:#06120f;color:#eef4f1;padding:14px 16px 16px;overflow:hidden;display:flex;flex-direction:column;gap:13px}
.hx-scr:before{content:"";position:absolute;top:10px;left:50%;width:86px;height:25px;border-radius:99px;background:#000;transform:translateX(-50%);z-index:3}
.hx-sb{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--inter);padding:2px 8px 0}
.hx-bat{width:22px;height:11px;border-radius:4px;border:1px solid #ffffff66;position:relative}.hx-bat:after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;border-radius:2px;background:#eef4f1}
.hx-hi{margin-top:14px}.hx-hi small{display:block;color:#9db3ab;font-size:12px}.hx-hi b{font:600 16px var(--sora)}
.hx-bal{position:relative;overflow:hidden;border-radius:22px;padding:16px;background:linear-gradient(135deg,#0b5e48,#169a73 60%,#2bebaf);color:#04140f}
.hx-bal:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff59 50%,transparent 70%);transform:translateX(-130%);animation:hxg 5s 1.5s infinite}
@keyframes hxg{55%,100%{transform:translateX(130%)}}
.hx-bal small{font-size:12px;opacity:.8}.hx-amt{font:700 28px var(--sora);color:#fff;font-variant-numeric:tabular-nums}.hx-amt s{text-decoration:none;font-size:14px;margin-right:5px;opacity:.85}
.hx-amt.pop{animation:hxpop .6s}@keyframes hxpop{40%{transform:scale(1.06)}}
.hx-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;font-size:11px;color:#9db3ab}
.hx-acts span{display:grid;place-items:center;height:44px;border-radius:14px;background:#ffffff12;color:#22e3a6;margin-bottom:5px}
.hx .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-cap{font:600 12px var(--inter);color:#9db3ab}
.hx-rows{height:168px;overflow:hidden;margin-top:-6px}
.hx-r{display:flex;align-items:center;gap:10px;height:56px;border-top:1px solid #ffffff14;font-size:12.5px}.hx-r>div{flex:1}.hx-r b{display:block;font-weight:600}.hx-r small{color:#9db3ab;font-size:11px}.hx-r em{font-style:normal;font-weight:600}.hx-r em.p,.hx-r.new>svg{color:#22e3a6}
.hx-r.new{animation:hxin .7s var(--ease)}@keyframes hxin{from{opacity:0;transform:translateY(-18px)}}
.hx-toast{position:absolute;left:12px;right:12px;top:44px;z-index:4;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:#10231dee;border:1px solid #2bebaf40;box-shadow:0 14px 30px -10px #000;transform:translateY(-140%);opacity:0;transition:transform .6s var(--ease),opacity .4s}
.hx-toast.in{transform:none;opacity:1}.hx-toast b{display:block;font:600 13px var(--sora)}.hx-toast small{font-size:11px;color:#9db3ab}
.hx-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#22e3a62e;color:var(--accent)}
.hx-fl{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--card-bg);border:1px solid var(--card-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--card-shadow);font-size:12.5px;color:var(--text);white-space:nowrap;translate:calc(var(--px,0)*var(--d,20)*1px) calc(var(--py,0)*var(--d,20)*.7px);transition:translate .3s ease-out}
.hx-fl b{display:flex;align-items:center;gap:6px;font:600 14px var(--sora)}.hx-fl b .i{width:14px;height:14px}.hx-fl small{display:block;color:var(--soft)}
.hx-fl.a{top:56px;right:-14px;animation:hxf 6s ease-in-out infinite}
.hx-fl.b{bottom:150px;left:-44px;animation:hxf 7s -2s ease-in-out infinite}
.hx-fl.c{bottom:46px;right:-10px;animation:hxf 6.5s -4s ease-in-out infinite}
@keyframes hxf{50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:no-preference){
.hx-l>span{transform:translateY(112%);animation:hxu 1.1s var(--ease) .15s forwards}.hx-l+.hx-l>span{animation-delay:.3s}
.hx-a{opacity:0;transform:translateY(16px);animation:hxa .9s var(--ease) forwards}.hx-pill{animation-delay:.05s}.hx-lead{animation-delay:.5s}.hx-cta{animation-delay:.62s}.hx-stores{animation-delay:.74s}.hx-proof{animation-delay:.86s}
.hx-stage{animation:hxs 1.2s var(--ease) .3s backwards}}
@keyframes hxu{to{transform:none}}@keyframes hxa{to{opacity:1;transform:none}}@keyframes hxs{from{opacity:0;transform:translateY(40px) scale(.96)}}
@media(max-width:940px){.hx{padding:104px 0 56px;min-height:0}.hx-grid{grid-template-columns:1fr}.hx-copy{text-align:center;display:flex;flex-direction:column;align-items:center}.hx-cta,.hx-stores,.hx-proof{justify-content:center}.hx-stage{min-height:600px;margin-top:20px}.hx-fl.b{left:-6px}.hx-fl.a,.hx-fl.c{right:-4px}}
@media(max-width:520px){.hx-stores .store{flex:1;min-width:0;padding:0 12px 0 10px}.hx-stores .store b{font-size:15px}.hx-stage{min-height:560px}.hx-phone{transform:rotate(-3deg) scale(.92)}.hx-fl{padding:10px 12px 10px 10px}.hx-fl.b{bottom:140px;left:-12px}}

/* ===== Inverted hero phone: white phone on dark theme, dark phone on light theme ===== */
:root[data-theme=dark] .hx-phone{background:linear-gradient(145deg,#1b2421,#000);box-shadow:0 50px 90px -30px #000c,inset 0 0 0 1.5px #ffffff30}
:root[data-theme=dark] .hx-scr{background:#f6faf8;color:#06201a}
:root[data-theme=dark] .hx-bat{border-color:#06201a66}
:root[data-theme=dark] .hx-bat:after{background:#06201a}
:root[data-theme=dark] .hx-hi small,:root[data-theme=dark] .hx-acts,:root[data-theme=dark] .hx-cap,:root[data-theme=dark] .hx-r small,:root[data-theme=dark] .hx-toast small{color:#5b736c}
:root[data-theme=dark] .hx-acts span{background:#06201a0f;color:#0a8c66}
:root[data-theme=dark] .hx-r{border-top-color:#06201a17}
:root[data-theme=dark] .hx-r em.p,:root[data-theme=dark] .hx-r.new>svg{color:#0a8c66}
:root[data-theme=dark] .hx-toast{background:#ffffffee;border-color:#0a8c6640;box-shadow:0 14px 30px -10px #06201a55;color:#06201a}
:root[data-theme=dark] .hx-toast .hx-ic{background:#0a8c6624;color:#0a8c66}

:root[data-theme=light] .hx-phone{background:linear-gradient(145deg,#33423d,#0a110f);box-shadow:0 50px 90px -30px #06201a99,inset 0 0 0 1.5px #ffffff30}
:root[data-theme=light] .hx-scr{background:#06120f;color:#eef4f1}

/* ===== Inverted footer: light footer on dark theme, dark footer on light theme ===== */
.foot{color:var(--f-soft);border-top:0;margin-top:40px;padding-block:68px 34px;isolation:isolate}
/* full-bleed curved panel with cursor-following light */
.foot:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);border-radius:56px 56px 0 0;background:var(--f-bg);transition:background-color .5s}
@media(max-width:700px){.foot:before{border-radius:32px 32px 0 0}}
.foot .foot-bot{border-top-color:var(--f-line)}
.foot .foot-brand p{color:var(--f-soft)}
.foot .foot-col h3{color:var(--f-muted)}
.foot .foot-col a{color:var(--f-soft)}
.foot .foot-col a:hover{color:var(--f-text)}
.foot .foot-bot{color:var(--f-muted)}
:root[data-theme=dark]{--f-bg:#eef4f1;--f-text:#06201a;--f-soft:#2f4a43;--f-muted:#667c75;--f-line:#06201a24;--f-glow:#22e3a666}
:root[data-theme=light]{--f-bg:#030807;--f-text:#f2f5f3;--f-soft:#c8d2cd;--f-muted:#7e918a;--f-line:#ffffff1f;--f-glow:#22e3a638}
/* wordmark inside footer is flipped vs. the page theme */
:root[data-theme=dark] .foot .brand-word .word-dark{display:none}
:root[data-theme=dark] .foot .brand-word .word-light{display:block}
:root[data-theme=light] .foot .brand-word .word-light{display:none}
:root[data-theme=light] .foot .brand-word .word-dark{display:block}

/* floating cards stay readable over the inverted phone */
:root[data-theme=dark] .hx-fl{background:#0b1d18f2;border-color:#2bebaf40;color:#f2f5f3;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme=dark] .hx-fl small{color:#a9bdb5}
:root[data-theme=light] .hx-fl{background:#fffffff5;border-color:#0b5e4833;color:#06201a;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme=light] .hx-fl small{color:#4c6660}

/* remove wallet shade / glow */
.batwa,:root[data-theme=light] .batwa{filter:none}
.batwa-body{box-shadow:0 0 0 1px #9bffe238,inset 0 2px #ffffff24,inset 0 -22px 40px #0006}
.final-card:before{display:none}

/* ===== Light theme footer = brand dark green (not black) ===== */
:root[data-theme=light]{--f-bg:linear-gradient(160deg,#11402f 0%,#0a2b21 100%);--f-text:#f2f8f5;--f-soft:#cfe0d8;--f-muted:#8fb0a3;--f-line:#ffffff24}

/* ===== Interactive wallet (final CTA) ===== */
.final-art{gap:22px}
.final-art .protect-state{margin-top:6px}
.final-art button.batwa-snap{position:absolute}
.final-art button.batwa-snap:after{content:"";position:absolute;inset:-9%;border-radius:50%;border:2px solid #22e3a6;opacity:0;animation:snapRing 2.4s ease-out infinite;pointer-events:none}
.final-art .batwa.touched button.batwa-snap:after{animation:none}
@keyframes snapRing{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.45)}}
.final-art button.batwa-snap:focus-visible{outline:2px solid var(--accent,#22e3a6);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.final-art button.batwa-snap:after{animation:none}}

/* ===== Mobile / tablet menu ===== */
.menu-btn{display:none;cursor:pointer;width:44px;height:44px;border-radius:14px;color:var(--text);background:var(--veil);border:1px solid var(--veil-line);place-items:center;align-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .2s}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}
@media(max-width:1080px){
 .menu-btn{display:grid}
 .nav .mnav{position:absolute;top:calc(100% + 10px);left:0;right:0;display:grid;gap:4px;padding:12px;border-radius:24px;border:1px solid var(--glass-line);box-shadow:0 30px 60px -20px #000a;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
 :root[data-theme=dark] .nav .mnav{background:#07130f}
 :root[data-theme=light] .nav .mnav{background:#f6fbf8;box-shadow:0 30px 60px -24px #0a2b2166}
 .nav .mnav.open{opacity:1;visibility:visible;transform:none}
 .mnav a{display:block;padding:14px 16px;border-radius:14px;font:600 16px var(--sora);color:var(--text)}
 .mnav a:active,.mnav a:hover{background:var(--veil)}
 .nav .mnav .btn{display:flex;width:100%;justify-content:space-between;margin-top:6px;height:52px}
}

/* ===== Mobile fixes ===== */
html,body{overflow-x:clip}
.dock span{white-space:nowrap}
.store small,.store b{white-space:nowrap}
@media(max-width:760px){
 .calc-f,.calc-i,.calc-o,.calc-in,.calc-chips{min-width:0;max-width:100%}
 .calc-i input{min-width:0;width:100%}
 .calc-chips{flex-wrap:wrap}
 .story-steps{max-width:100%;min-width:0}
 .story-steps li{min-width:0}
 .story-steps li.on{flex:1 1 auto}
 .story-steps .on b{white-space:normal;font-size:13px;line-height:1.25}
 .final-art{padding-top:28px}
}
@media(max-width:520px){
 .store{padding:0 12px 0 10px;gap:8px}
 .store b{font-size:14.5px}
 .store small{font-size:9.5px}
 .hx-fl.a,.hx-fl.c{right:6px}
 .hx-fl.b{left:6px}
 .hx-fl{transform-origin:center;zoom:.94}
}

@media(max-width:520px){
 .hx-stores .store b,.hero-stores .store b,.store b{font-size:14px}
 .hx-stores .store,.hero-stores .store,.store{padding:0 14px 0 10px;gap:7px}
}