/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root{
  --gold:#f0c040;--gold2:#e08000;--green:#22c55e;--red:#ef4444;
  --blue:#3b82f6;--pink:#f472b6;--radius:16px;
}
[data-theme="dark"]{
  --bg:#0f0f1a;--card:#1a1a2e;--card2:#16162a;--border:#2a2a40;
  --text:#ffffff;--text2:#e0e0f0;--muted:#9aa0b2;--shadow:rgba(0,0,0,.45);
  --header-bg:rgba(26,26,46,.96);
}
[data-theme="light"]{
  --bg:#f2f3fb;--card:#ffffff;--card2:#f7f8ff;--border:#d8daea;
  --text:#14162a;--text2:#2a2a4e;--muted:#667085;--shadow:rgba(0,0,0,.10);
  --header-bg:rgba(255,255,255,.96);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:#0f0f1a}
body{
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  overflow:hidden;transition:background .3s,color .3s;
}
.app-wrapper{
  width:100%;max-width:430px;height:100dvh;
  margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
}

/* ═══════════════════════════════════════
   TOPBAR
═══════════════════════════════════════ */
.topbar{
  padding:10px 14px;display:flex;align-items:center;justify-content:space-between;
  background:var(--header-bg);border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-title{font-size:14px;font-weight:900;color:var(--text);line-height:1.1}
.topbar-sub{font-size:10px;color:var(--muted);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:8px}

.cur-badge{
  padding:4px 10px;border-radius:999px;
  background:var(--card2);border:1px solid rgba(240,192,64,.4);
  font-size:11px;font-weight:900;color:var(--gold);
}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--card2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.icon-btn svg{width:18px;height:18px;fill:var(--text)}

/* Theme toggle */
.theme-btn{position:relative;overflow:hidden}
.theme-btn .sun,
.theme-btn .moon{
  position:absolute;transition:.25s transform,.25s opacity;
  width:17px;height:17px;
}
.theme-btn .sun{opacity:0;transform:rotate(-90deg) scale(.6);fill:var(--gold)}
.theme-btn .moon{opacity:1;transform:rotate(0) scale(1);fill:var(--gold)}
[data-theme="light"] .theme-btn .sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-btn .moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.toast{
  position:fixed;z-index:9999;top:16px;left:50%;
  transform:translateX(-50%) translateY(-140%);
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-radius:14px;border:1px solid var(--border);background:var(--card);
  box-shadow:0 10px 32px var(--shadow);font-size:13px;
  min-width:240px;max-width:90%;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;flex-shrink:0}
.toast.success{border-color:rgba(34,197,94,.5)}.toast.success svg{fill:var(--green)}
.toast.error{border-color:rgba(239,68,68,.5)}.toast.error svg{fill:var(--red)}
.toast.info{border-color:rgba(59,130,246,.5)}.toast.info svg{fill:var(--blue)}

/* ═══════════════════════════════════════
   PAGE SCROLL
═══════════════════════════════════════ */
.page{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:12px 12px 110px;
}
.page::-webkit-scrollbar{display:none}

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.sec-hdr{display:flex;align-items:center;gap:9px;margin:16px 0 10px}
.sec-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:rgba(240,192,64,.12);border:1px solid rgba(240,192,64,.3);
  display:flex;align-items:center;justify-content:center;
}
.sec-icon svg{width:17px;height:17px;fill:var(--gold)}
.sec-title{font-size:13px;font-weight:900;color:var(--text);white-space:nowrap}
.sec-line{flex:1;height:1px;background:var(--border)}

/* ═══════════════════════════════════════
   HERO — MARQUEE IMAGE SYSTEM
═══════════════════════════════════════ */
.hero-img-track{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0;
}
.hero-img-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.hero-img-slide.active{opacity:1}
.hero-img-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    180deg,
    rgba(10,10,20,.72) 0%,
    rgba(10,10,20,.55) 40%,
    rgba(10,10,20,.82) 80%,
    rgba(10,10,20,.97) 100%
  );
}
[data-theme="light"] .hero-img-overlay{
  background:linear-gradient(
    180deg,
    rgba(240,236,220,.6) 0%,
    rgba(240,236,220,.4) 40%,
    rgba(240,236,220,.75) 80%,
    rgba(240,236,220,.95) 100%
  );
}

/* ═══════════════════════════════════════
   HERO CARD
═══════════════════════════════════════ */
.hero-card{
  position:relative;border-radius:20px;overflow:hidden;
  padding:0;margin-bottom:14px;
  border:1px solid rgba(240,192,64,.22);
  box-shadow:0 8px 32px rgba(0,0,0,.55);
}
.hero-inner{position:relative;z-index:2;padding:18px 15px 15px}

/* Slide dots */
.slide-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;gap:4px;align-items:center;
}
.slide-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.3);transition:.3s;
}
.slide-dot.active{width:12px;border-radius:2px;background:#f0c040}
[data-theme="light"] .slide-dot{background:rgba(0,0,0,.2)}

/* Logo row */
.hero-logos{
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin-bottom:12px;
}
.hero-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-logo-box{
  width:48px;height:48px;border-radius:13px;overflow:hidden;
  border:1.5px solid rgba(240,192,64,.4);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.hero-logo-box img{width:100%;height:100%;object-fit:cover;display:block}
.hero-logo-lbl{
  font-size:8px;font-weight:700;color:rgba(255,255,255,.7);
  text-align:center;max-width:60px;line-height:1.2;letter-spacing:.2px;
}
[data-theme="light"] .hero-logo-lbl{color:rgba(20,18,10,.6)}
.hero-sep{display:flex;flex-direction:column;align-items:center;gap:3px}
.hero-sep-lbl{
  font-size:7px;font-weight:800;color:rgba(240,192,64,.7);
  text-transform:uppercase;letter-spacing:.6px;
}
[data-theme="light"] .hero-sep-lbl{color:rgba(184,130,10,.85)}
.hero-ring{
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid rgba(240,192,64,.6);
  background:rgba(240,192,64,.1);
  display:flex;align-items:center;justify-content:center;
}
.hero-ring svg{width:13px;height:13px;fill:#f0c040}
.logo-fb-blue{font-size:13px;font-weight:900;color:#3b82f6}
.logo-fb-gold{font-size:13px;font-weight:900;color:#f0c040}

/* Hero text */
.hero-title{
  font-size:18px;font-weight:900;text-align:center;margin-bottom:6px;
  background:linear-gradient(135deg,#f0c040 0%,#22c55e 50%,#f472b6 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-.3px;line-height:1.2;
}
.hero-sub{
  font-size:10.5px;color:rgba(255,255,255,.65);text-align:center;
  line-height:1.55;margin-bottom:10px;
}
[data-theme="light"] .hero-sub{color:rgba(20,18,10,.65)}

/* Partner pill wrapper — converts inline style="text-align:center" */
.partner-pill-wrap{text-align:center}

.partner-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.4);
  border-radius:999px;padding:5px 11px;
  font-size:9.5px;font-weight:700;color:#93c5fd;
  margin-bottom:12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.partner-pill svg{width:11px;height:11px;fill:#93c5fd;flex-shrink:0}
[data-theme="light"] .partner-pill{
  background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:#1d4ed8;
}
[data-theme="light"] .partner-pill svg{fill:#1d4ed8}

/* Currency strip */
.cur-strip{
  display:flex;align-items:center;gap:6px;justify-content:center;
  margin-bottom:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:5px 12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  width:fit-content;margin-left:auto;margin-right:auto;
}
[data-theme="light"] .cur-strip{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.1)}
.cur-strip-flag{font-size:14px;line-height:1}
.cur-strip-name{
  font-size:9px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.3px;
}
[data-theme="light"] .cur-strip-name{color:rgba(0,0,0,.45)}
.cur-strip-code{
  font-size:11px;font-weight:900;color:#f0c040;letter-spacing:.4px;
  border-left:1px solid rgba(255,255,255,.15);padding-left:7px;
}
[data-theme="light"] .cur-strip-code{color:#b8820a;border-color:rgba(0,0,0,.12)}

/* Hero stats */
.hero-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.stat-cell{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:9px 5px;text-align:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .stat-cell{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.1)}
.stat-val{font-size:16px;font-weight:900;line-height:1;margin-bottom:3px}
.stat-lbl{
  font-size:8px;color:rgba(255,255,255,.5);
  font-weight:700;line-height:1.2;letter-spacing:.2px;
}
[data-theme="light"] .stat-lbl{color:rgba(0,0,0,.45)}

/* Colour utilities */
.gold{color:#f0c040}
.green{color:#22c55e}
.pink{color:#f472b6}
.blue{color:#60a5fa}

/* ═══════════════════════════════════════
   SIMULATOR
═══════════════════════════════════════ */
.simulator-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:15px;padding:14px;margin-bottom:14px;
}
.sim-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sim-top-left{display:flex;align-items:center;gap:7px}
.sim-icon{width:14px;height:14px;fill:var(--green);flex-shrink:0}
.sim-lbl{font-size:11px;color:var(--muted)}
.sim-cur-pill{
  padding:4px 10px;border-radius:999px;
  background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.3);
  font-size:11px;font-weight:900;color:var(--gold);
}
.sim-note{
  background:var(--card2);border-radius:8px;
  padding:9px 10px;font-size:11px;color:var(--muted);
  line-height:1.5;margin-bottom:12px;
}
.sim-input-wrap{position:relative;margin-bottom:12px}
.sim-prefix{
  position:absolute;left:0;top:0;bottom:0;
  display:flex;align-items:center;padding:0 12px;
  font-size:12px;font-weight:700;color:var(--muted);
  border-right:1px solid var(--border);pointer-events:none;white-space:nowrap;
}
.sim-input{
  width:100%;background:var(--card2);border:1px solid var(--border);
  border-radius:10px;padding:12px 12px 12px 88px;
  font-size:15px;font-weight:700;color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;
}
.sim-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,192,64,.14);
}
.sim-input::placeholder{color:var(--muted);font-weight:400;font-size:13px}
.sim-results-lbl{
  font-size:9px;font-weight:900;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;
}
.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-cell{
  background:var(--card2);border:1px solid var(--border);
  border-radius:11px;padding:11px 10px;text-align:center;
}
.sim-cell-val{font-size:15px;font-weight:900;margin-bottom:3px}
.sim-cell-lbl{font-size:9px;color:var(--muted);font-weight:700}

/* ═══════════════════════════════════════
   TIMELINE
═══════════════════════════════════════ */
.timeline-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:15px;padding:14px;margin-bottom:14px;
}
.tl-label{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.tl-bar-wrap{margin-bottom:6px}
.tl-bar{
  height:8px;border-radius:999px;overflow:hidden;
  display:flex;background:var(--card2);
}
.tl-seg{height:100%}
/* Phase 1 = 14 days of 180: 14/180 × 100 = 7.78% */
.gold-seg{width:7.78%;background:linear-gradient(90deg,#f0c040,#e08000)}
.green-seg{flex:1;background:linear-gradient(90deg,#22c55e,#16a34a)}
.tl-markers{
  display:flex;justify-content:space-between;
  font-size:9px;color:var(--muted);margin-bottom:10px;margin-top:4px;
}
.tl-mid{font-weight:900;color:var(--gold)}
.tl-legend{display:flex;flex-direction:column;gap:5px}
.tl-leg-item{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}
.tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.gold-dot{background:#f0c040}
.green-dot{background:#22c55e}

/* ═══════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════ */
.how-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;margin-bottom:14px;
}
.how-steps{display:flex;flex-direction:column}
.how-step{display:flex;gap:12px}
.how-left{display:flex;flex-direction:column;align-items:center}
.how-num{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#000;
}
.how-line{
  width:2px;flex:1;min-height:24px;
  background:linear-gradient(to bottom,var(--gold),var(--border));
  margin:4px 0;
}
.how-body{flex:1;padding-bottom:18px}
.how-step:last-child .how-body{padding-bottom:0}
.how-title{font-size:13px;font-weight:900;color:var(--text2);margin-bottom:4px;margin-top:5px}
.how-desc{font-size:11px;color:var(--muted);line-height:1.55}

/* ═══════════════════════════════════════
   PARTNERSHIP
═══════════════════════════════════════ */
.partner-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.partner-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:15px;padding:14px;display:flex;gap:12px;align-items:flex-start;
}
.partner-logo-box{
  width:52px;height:52px;border-radius:13px;overflow:hidden;
  border:1px solid var(--border);background:var(--card2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.partner-logo-box img{width:100%;height:100%;object-fit:cover;display:block}
.partner-info{flex:1;min-width:0}
.partner-name{font-size:13px;font-weight:900;color:var(--gold);margin-bottom:6px}
.partner-addr{
  font-size:10px;color:var(--muted);line-height:1.5;
  border-left:2px solid var(--gold);padding-left:8px;margin-bottom:8px;
}
.partner-desc{font-size:11px;color:var(--muted);line-height:1.55}

/* ═══════════════════════════════════════
   BENEFITS GRID
═══════════════════════════════════════ */
.benefits-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;
}
.benefit-card{
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:13px 10px;display:flex;flex-direction:column;
  align-items:center;text-align:center;transition:transform .18s;
}
.benefit-card:active{transform:scale(.97)}
.benefit-icon{font-size:26px;margin-bottom:7px}
.benefit-title{font-size:11px;font-weight:900;color:var(--text2);margin-bottom:4px;line-height:1.2}
.benefit-desc{font-size:10px;color:var(--muted);line-height:1.45}

/* ═══════════════════════════════════════
   CTA
═══════════════════════════════════════ */
.cta-card{
  position:relative;background:var(--card);
  border:2px solid rgba(34,197,94,.35);border-radius:18px;
  padding:20px 16px;overflow:hidden;margin-bottom:14px;text-align:center;
}
.cta-bg{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,197,94,.06) 0%,rgba(240,192,64,.05) 100%);
}
.cta-title{
  font-size:16px;font-weight:900;margin-bottom:8px;
  background:linear-gradient(135deg,var(--gold),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  position:relative;z-index:1;
}
.cta-sub{
  font-size:11px;color:var(--muted);line-height:1.55;
  margin-bottom:16px;position:relative;z-index:1;
}
.cta-btn{
  width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;
  font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#0d9488,#059669);
  display:flex;align-items:center;justify-content:center;gap:7px;
  position:relative;z-index:1;transition:opacity .2s,transform .15s;
}
.cta-btn:active{transform:scale(.98)}
.cta-btn svg{width:18px;height:18px;fill:#fff}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.cp-footer{
  text-align:center;border-top:1px solid var(--border);padding:14px 0 10px;
}
.cp-footer-brand{font-size:14px;font-weight:900;color:var(--gold);margin-bottom:5px}
.cp-footer-copy{font-size:10px;color:var(--muted);line-height:1.5}