/* FinancePortal v171 — "Modern fintech" design system: tokens, type, header, footer, shared components */
:root{
  --ink:#0B1B3F;--ink-2:#33415C;--muted:#64748B;--line:#E6EBF2;--line-2:#EEF2F7;
  --bg:#F6F8FC;--surface:#FFFFFF;--tint:#EEF3FF;
  --brand:#2E5BFF;--brand-2:#1D44D8;--brand-soft:#E8EEFF;--violet:#7B61FF;
  --coral:#FF6B4A;--coral-soft:#FFF1EC;--green:#0FA37A;--green-soft:#E7F7F0;--amber:#F59E0B;--amber-soft:#FFF6E0;--red:#D92D20;
  --r-sm:10px;--r:16px;--r-lg:22px;--r-xl:28px;
  --sh-1:0 1px 2px rgba(11,27,63,.05),0 2px 8px rgba(11,27,63,.04);
  --sh-2:0 2px 6px rgba(11,27,63,.05),0 12px 32px rgba(11,27,63,.08);
  --sh-3:0 20px 60px rgba(29,68,216,.18);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-d:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --w:1240px;
}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.fi{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.25em;flex:0 0 auto}
.fx-w{width:min(var(--w),calc(100% - 40px));margin:0 auto}
.fx-illus{display:block;width:100%;height:auto}

/* ---------- Header ---------- */
.fx-header{position:relative;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(230,235,242,.9)}
.fx-header .fx-w{display:flex;align-items:center;gap:22px;height:70px}
.fx-logo{display:flex;align-items:center;gap:10px;text-decoration:none!important;color:var(--ink)!important;font-family:var(--font-d);font-weight:800;font-size:21px;letter-spacing:-.4px;white-space:nowrap}
.fx-logo .mk{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--brand) 0%,var(--violet) 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(46,91,255,.35)}
.fx-logo .mk svg{width:20px;height:20px}
.fx-logo b{color:var(--coral);font-weight:800}
.fx-nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.fx-nav a{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:10px;text-decoration:none!important;color:var(--ink-2)!important;font-weight:600;font-size:14.5px;white-space:nowrap}
.fx-nav a .fi{color:var(--muted);width:18px;height:18px}
.fx-nav a:hover,.fx-nav a.on{background:var(--brand-soft);color:var(--brand-2)!important}
.fx-nav a:hover .fi,.fx-nav a.on .fi{color:var(--brand)}
.fx-search{margin-left:auto;display:flex;align-items:center;gap:8px;height:42px;width:280px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:.15s}
.fx-search:focus-within{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(46,91,255,.12)}
.fx-search .fi{color:var(--muted)}
.fx-search input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;width:100%;color:var(--ink)}
.fx-cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;background:var(--ink);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:14px;white-space:nowrap}
.fx-cta:hover{background:var(--brand-2)}
.fx-burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.fx-burger .fi{width:22px;height:22px}
@media(max-width:1180px){.fx-search{width:210px}.fx-cta{display:none}}
@media(max-width:980px){
  .fx-header .fx-w{height:62px}
  .fx-burger{display:inline-flex}
  .fx-nav,.fx-search{display:none}
  .fx-header.open .fx-nav{display:flex;position:absolute;left:0;right:0;top:62px;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px 14px 14px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-2)}
  .fx-header.open .fx-nav a{padding:13px 12px;font-size:15.5px}
  .fx-header.open .fx-mobile-search{display:flex}
}
.fx-mobile-search{display:none;gap:8px;align-items:center;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin:6px 0 2px}
.fx-mobile-search input{border:0;outline:0;background:transparent;font:inherit;font-size:15px;width:100%}

/* ---------- Shared components ---------- */
.fx-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-1)}
.fx-eyebrow .dot{width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}
.fx-eyebrow .dot .fi{width:14px;height:14px}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:14px;border:0;background:var(--brand);color:#fff!important;font:inherit;font-weight:700;font-size:15px;text-decoration:none!important;cursor:pointer;box-shadow:0 8px 20px rgba(46,91,255,.28);transition:.15s}
.fx-btn:hover{background:var(--brand-2);transform:translateY(-1px)}
.fx-btn.ghost{background:#fff;color:var(--ink)!important;border:1px solid var(--line);box-shadow:var(--sh-1)}
.fx-btn.ghost:hover{border-color:var(--brand);color:var(--brand-2)!important}
.fx-btn.light{background:#fff;color:var(--brand-2)!important;box-shadow:none}
.fx-btn .fi{width:18px;height:18px}
.fx-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand-2)!important;text-decoration:none!important;white-space:nowrap}
.fx-link .fi{width:16px;height:16px;transition:.15s}.fx-link:hover .fi{transform:translateX(3px)}
.fx-badge{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.3px;flex:0 0 40px}
.fx-spark{color:var(--green);display:block}.fx-spark.dn{color:var(--red)}
.fx-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--green-soft);color:var(--green)}
.fx-pill.dn{background:#FEF0EF;color:var(--red)}.fx-pill.blue{background:var(--brand-soft);color:var(--brand-2)}.fx-pill.amber{background:var(--amber-soft);color:#B45309}
.fx-pill .fi{width:13px;height:13px}

/* Illustrative credit card artwork */
.fx-cardart{position:relative;aspect-ratio:1.586/1;border-radius:14px;color:#fff;overflow:hidden;box-shadow:0 14px 30px rgba(11,27,63,.22);isolation:isolate}
.fx-cardart::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.28),transparent 55%),radial-gradient(80% 80% at 0% 100%,rgba(0,0,0,.18),transparent 60%);z-index:-1}
.fx-cardart::after{content:"";position:absolute;right:-30%;top:-40%;width:90%;height:120%;border-radius:50%;border:26px solid rgba(255,255,255,.07);z-index:-1}
.fx-cardart .ca-bank{position:absolute;left:7%;top:9%;font-weight:800;font-size:.8em;letter-spacing:.2px;opacity:.95}
.fx-cardart .ca-chip{position:absolute;left:7%;top:36%;width:15%;height:17%;border-radius:4px;background:linear-gradient(135deg,#F7D67A,#C99A2E);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.fx-cardart .ca-nfc{position:absolute;left:26%;top:38%;width:6%;height:13%;border:2px solid rgba(255,255,255,.7);border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:0 50% 50% 0}
.fx-cardart .ca-name{position:absolute;left:7%;bottom:10%;right:30%;font-weight:700;font-size:.78em;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.fx-cardart .ca-net{position:absolute;right:7%;bottom:10%;font-weight:800;font-style:italic;font-size:.72em;opacity:.9}
.fx-cardart.is-metal .ca-bank,.fx-cardart.is-metal .ca-name{color:#F2D492}
.fx-cardart{font-size:15px}

/* ---------- Footer (restyle of v169 footer) ---------- */
footer.fp-foot{background:#081530;position:relative;font-family:var(--font)}
footer.fp-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--violet),var(--coral))}
.fp-foot-safe{background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07)}
.fp-foot-help a{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:999px!important}
.fp-foot .fx-logo{color:#fff!important;font-size:22px}
.fp-foot-col h2{font-family:var(--font-d);letter-spacing:.8px!important;font-size:12.5px!important;color:#8FA3C7!important}
.fp-foot-col a{color:#D5DEEE}
.fp-foot-brand p{color:#9FB0CC!important}
.fp-foot-social a{background:rgba(255,255,255,.08)!important}
.fp-foot-bottom{background:#060F24!important}
.fp-consent-box{border-radius:20px!important;font-family:var(--font)}
.fp-cbtn{border-radius:12px!important;background:var(--brand)!important;border-color:var(--brand)!important}
.fp-cbtn.ghost{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
/* v172: no sticky header or sub-navigation (keeps ads fully visible) */
.ss-tabs{position:static!important}
.ss-aside{position:static!important}
/* v173 uploaded logo */
.fx-logo-img{display:block;width:auto;max-width:220px;object-fit:contain}
.fp-foot .fx-logo-img{max-width:240px}
/* v173 banners */
.fx-ann{background:var(--bn,linear-gradient(90deg,#1D44D8,#7B61FF));color:#fff;font-size:14px}
.fx-ann .fx-w{display:flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:6px 36px 6px 0;position:relative;text-align:center}
.fx-ann em{font-style:normal;opacity:.85}
.fx-ann a{color:#fff!important;font-weight:800;text-decoration:underline;white-space:nowrap}
.fx-ann button{position:absolute;right:0;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:0;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
.fx-bn{position:relative;display:block;border-radius:22px;overflow:hidden;text-decoration:none!important;color:#fff!important;background:var(--bn,linear-gradient(120deg,#1D44D8,#7B61FF));box-shadow:var(--sh-1);transition:.2s}
a.fx-bn:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.fx-bn img{display:block;width:100%;height:auto}
.fx-bn.no-img{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 30px}
.fx-bn .tx b{display:block;font-family:var(--font-d);font-size:22px;font-weight:800;letter-spacing:-.3px}
.fx-bn .tx span{display:block;opacity:.88;margin-top:4px;font-size:15px}
.fx-bn .bt{flex:0 0 auto;background:#fff;color:var(--brand-2);font-weight:800;border-radius:12px;padding:11px 18px;font-size:14px}
.fx-bn-home{margin-top:28px}.fx-bn-home.mid{margin-top:0;margin-bottom:10px;padding-top:40px}
.fx-bn-wrap{margin-bottom:20px}
.fx-bn--sidebar.no-img{flex-direction:column;align-items:flex-start;padding:22px}
.fx-bn-side{margin-bottom:16px}
@media(max-width:980px){.fx-bn-side{display:none}}
.fx-car{position:relative;overflow:hidden;border-radius:22px}
.fx-car-track{display:flex;transition:transform .5s ease}
.fx-car-slide{flex:0 0 100%}
.fx-car-slide .fx-bn{border-radius:0;box-shadow:none;transform:none!important}
.fx-car-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--sh-1)}
.fx-car-btn.prev{left:12px}.fx-car-btn.next{right:12px}
.fx-car-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.fx-car-dots button{width:8px;height:8px;border-radius:99px;border:0;background:rgba(255,255,255,.6);cursor:pointer;padding:0;transition:.2s}
.fx-car-dots button.on{width:24px;background:#fff}
@media(max-width:700px){.fx-ann .fx-w{flex-direction:column;gap:2px;font-size:13px}.fx-bn.no-img{flex-direction:column;align-items:flex-start;padding:20px}.fx-bn .tx b{font-size:18px}.fx-car-btn{display:none}}
/* v173: header fits any logo width */
.fx-search{flex:1 1 170px;min-width:150px;max-width:280px;width:auto}
@media(max-width:1280px){.fx-nav a{padding:9px 9px;font-size:14px}.fx-nav a .fi{display:none}}
@media(max-width:980px){.fx-logo-img{max-width:170px}.fx-logo-img+span{display:none}.fx-header .fx-w{gap:12px}}