/* =========================================================
   CodeChaps — Finance / FinTech Software Development page
   Page-specific styles (banking app phone + fraud-shield hero).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:540px;align-items:center}
.fin-wrap{position:relative;width:520px;height:520px}
.js .fin-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .fin-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.fin-wrap .float{z-index:4}

/* ---- banking phone ---- */
.bank{position:absolute;left:20px;top:0;width:250px;height:510px;border-radius:40px;background:#05070B;padding:10px;box-shadow:0 50px 90px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 8s ease-in-out infinite;z-index:2}
.bank::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#05070B;z-index:3}
.bank-screen{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden;background:#F8FAFC;color:#0F172A;display:flex;flex-direction:column}
.b-head{display:flex;align-items:center;gap:8px;padding:42px 14px 10px}
.b-head .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#FDE68A,#F59E0B);flex:none}
.b-head small{display:block;font-size:8.5px;color:#64748B}
.b-head b{display:block;font-size:11.5px}
.b-head .bell{position:relative;margin-left:auto;color:#334155}
.b-head .bell .ico{width:16px;height:16px}
.b-head .bell::after{content:"";position:absolute;right:-1px;top:-1px;width:6px;height:6px;border-radius:50%;background:#EF4444;border:1.5px solid #F8FAFC}

.b-card{position:relative;margin:0 12px;height:120px;flex:none;border-radius:18px;padding:13px 14px;color:#fff;background:linear-gradient(135deg,#1D4ED8,#4F46E5 55%,#7C3AED);overflow:hidden;box-shadow:0 14px 28px rgba(37,99,235,.35)}
.b-card::before{content:"";position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.1)}
.b-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg)}
.js.loaded .b-card::after{animation:shine 5s ease-in-out infinite 1.4s}
@keyframes shine{0%{left:-60%}35%,100%{left:130%}}
.b-card small{position:relative;display:flex;align-items:center;gap:5px;font-size:9px;color:#C7D2FE}
.b-card small .ico{width:11px;height:11px}
.b-bal{position:relative;font-family:var(--display);font-weight:900;font-size:24px;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.b-bal sup{font-size:12px;vertical-align:top;margin-right:1px}
.b-bal em{font-style:normal;font-size:14px;opacity:.75}
.b-delta{position:relative;display:inline-block;font-size:8.5px;font-weight:700;color:#BBF7D0;background:rgba(34,197,94,.22);padding:2px 7px;border-radius:999px;margin-top:4px}
.b-foot{position:absolute;left:14px;right:14px;bottom:11px;display:flex;justify-content:space-between;align-items:center;font-size:9.5px;letter-spacing:.12em}
.b-foot .chip{width:22px;height:16px;border-radius:4px;background:linear-gradient(135deg,#FDE68A,#D97706)}

.b-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:12px 10px 4px}
.b-acts div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8.5px;font-weight:600;color:#334155}
.b-acts span{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--blue);box-shadow:0 4px 10px rgba(15,23,42,.08)}
.b-acts .ico{width:15px;height:15px}
.b-acts div:first-child span{background:var(--blue);color:#fff}

.b-list{padding:6px 12px 0}
.b-lh{display:flex;justify-content:space-between;font-size:10px;font-weight:700;margin-bottom:5px}
.b-lh span{font-size:8.5px;color:var(--blue)}
.tx{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #EEF2F7;font-size:9.5px}
.tx:last-child{border-bottom:0}
.tx .ti{width:26px;height:26px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.tx .ti .ico{width:13px;height:13px}
.tx b{display:block;font-size:9.5px}
.tx small{position:relative;display:block;font-size:8px;color:#64748B;height:11px}
.tx .amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.tx .amt.in{color:#15803D}
.js .tx{opacity:0;transform:translateX(18px)}
.js.loaded .tx{opacity:1;transform:none;transition:opacity .6s ease,transform .7s var(--ease)}
.js.loaded .tx:nth-child(2){transition-delay:1.1s}.js.loaded .tx:nth-child(3){transition-delay:1.25s}.js.loaded .tx:nth-child(4){transition-delay:1.4s}.js.loaded .tx:nth-child(5){transition-delay:1.55s}
/* pending → completed swap */
.tx .sp,.tx .sd{position:absolute;left:0;top:0;display:flex;align-items:center;gap:3px;white-space:nowrap}
.tx .sp i{width:7px;height:7px;border:1.5px solid #F59E0B;border-left-color:transparent;border-radius:50%;animation:spin360 1s linear infinite}
.tx .sd{color:#15803D;opacity:0}
.tx .sd .ico{width:9px;height:9px}
.js.loaded .tx .sp{animation:swapOut 7s ease-in-out infinite 1.6s}
.js.loaded .tx .sd{animation:swapIn 7s ease-in-out infinite 1.6s}
@keyframes spin360{to{transform:rotate(360deg)}}
@keyframes swapOut{0%,38%{opacity:1}44%,92%{opacity:0}100%{opacity:1}}
@keyframes swapIn{0%,38%{opacity:0}44%,92%{opacity:1}100%{opacity:0}}
.b-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 14px;border-top:1px solid #E2E8F0;background:#fff;color:#94A3B8}
.b-tabs .ico{width:17px;height:17px}
.b-tabs .on{color:var(--blue)}

/* ---- fraud shield card ---- */
.risk{position:absolute;right:-10px;top:84px;width:232px;border-radius:22px;background:linear-gradient(160deg,#111A2B,#0B111C);border:1px solid #263244;padding:16px;color:#fff;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:floatY 7s ease-in-out infinite reverse;z-index:1}
.rk-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#94A3B8}
.rk-top b{display:flex;align-items:center;gap:6px;color:#fff;font-size:11.5px}
.rk-top b .ico{width:14px;height:14px;color:#4ADE80}
.rk-live{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:800;letter-spacing:.08em;color:#86EFAC}
.rk-live i{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:livePing 1.6s ease-out infinite}
@keyframes livePing{to{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.rk-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px}
.rk-kpis div{background:rgba(255,255,255,.05);border:1px solid #1F2A3D;border-radius:12px;padding:8px 10px}
.rk-kpis small{display:block;font-size:9px;color:#94A3B8}
.rk-kpis b{font-size:16px;font-variant-numeric:tabular-nums}
.rk-kpis .bad b{color:#FCA5A5}
.rk-bars{position:relative;height:62px;display:flex;align-items:flex-end;gap:5px;padding-bottom:1px;border-bottom:1px solid #1F2A3D;overflow:hidden}
.rk-bars span{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#60A5FA,#2563EB);transform-origin:bottom;transform:scaleY(0)}
.rk-bars span.flag{background:linear-gradient(180deg,#F87171,#DC2626)}
.js.loaded .rk-bars span{transform:scaleY(1);transition:transform .8s var(--ease);transition-delay:calc(1s + var(--i) * .05s)}
.rk-bars .scan{position:absolute;top:0;bottom:0;left:-20%;width:18%;background:linear-gradient(90deg,transparent,rgba(74,222,128,.3));border-right:1.5px solid #4ADE80}
.js.loaded .rk-bars .scan{animation:scanX 3.6s linear infinite 1.8s}
@keyframes scanX{to{left:105%}}
.rk-axis{display:flex;justify-content:space-between;font-size:8.5px;color:#64748B;margin-top:4px}
.rk-ev{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.rk-ev>div{display:flex;align-items:center;gap:8px;font-size:9px;color:#94A3B8;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid #1F2A3D}
.rk-ev .dot{width:22px;height:22px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.16);color:#4ADE80}
.rk-ev .dot .ico{width:12px;height:12px}
.rk-ev b{display:block;font-size:9.5px;color:#fff}
.rk-ev .st{margin-left:auto;font-weight:800;font-size:8.5px;color:#4ADE80}
.rk-ev .alert .dot{background:rgba(239,68,68,.16);color:#F87171}
.rk-ev .alert .st{color:#F87171}
.js.loaded .rk-ev .alert{animation:alertFlash 3.6s ease-in-out infinite 2.2s}
@keyframes alertFlash{0%,100%{border-color:#1F2A3D;background:rgba(255,255,255,.04)}12%,30%{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.1)}}

.float--1{right:-60px;top:-14px}
.float--2{right:-40px;top:auto;bottom:6px}
.float--3{left:-60px;top:auto;bottom:-34px}
@media (max-width:1240px) and (min-width:961px){.fin-wrap{transform-origin:left center;scale:.9}.float--1{right:-20px}.float--2{right:-10px}.float--3{left:-40px}.risk{right:-44px}}
@media (max-width:960px){.hero-visual{min-height:0}.fin-wrap{width:100%;max-width:520px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}.bank,.risk{position:relative;left:auto;right:auto;top:auto}.risk{margin-top:60px}}
@media (max-width:560px){.risk{display:none}}
@media (prefers-reduced-motion:reduce){.rk-bars span{transform:none}.rk-bars .scan{display:none}.tx .sp{opacity:0}.tx .sd{opacity:1}}