:root { --ink:#17211b; --muted:#607067; --green:#0c8f67; --green-dark:#075c45; --mint:#e3f3e9; --paper:#f7f8f3; --line:#d6e0d8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header, .hero, .feature-strip, .how-it-works, .site-footer { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.brand { display:inline-flex; align-items:center; gap:10px; font:800 1.05rem 'Trebuchet MS',sans-serif; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--green); color:white; font-size:.68rem; letter-spacing:.04em; }
.main-nav { display:flex; align-items:center; gap:28px; color:var(--muted); font:600 .78rem Arial,sans-serif; }
.main-nav a:hover { color:var(--green-dark); }
.nav-signup { border:1px solid var(--ink); border-radius:999px; color:var(--ink); padding:11px 17px; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); gap:9%; align-items:center; padding:84px 0 72px; }
.eyebrow { color:var(--green); font:700 .67rem Arial,sans-serif; letter-spacing:.17em; margin:0 0 20px; }
h1 { max-width:650px; font-size:clamp(3.4rem,6.6vw,6.7rem); font-weight:800; letter-spacing:-.065em; line-height:.91; margin:0; }
.hero-text { max-width:470px; color:var(--muted); font-size:1.12rem; line-height:1.6; margin:22px 0 16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.button { display:inline-flex; align-items:center; gap:18px; border-radius:999px; font:700 .82rem Arial,sans-serif; padding:15px 21px; }
.button { border:0; cursor:pointer; }
.button-primary { background:var(--green); color:white; box-shadow:0 8px 18px rgba(12,143,103,.18); }
.button-primary:hover { background:var(--green-dark); }
.button-quiet { color:var(--muted); padding-left:7px; }
.button-quiet:hover { color:var(--ink); }
.trust-line { color:var(--muted); font:.7rem Arial,sans-serif; margin-top:25px; }
.trust-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:7px; }
.hero-visual { position:relative; padding:30px; background:var(--green-dark); color:white; box-shadow:18px 18px 0 var(--mint); }
.visual-label { color:#a9ddc7; font:700 .63rem Arial,sans-serif; letter-spacing:.17em; margin-bottom:21px; }
.balance-card { background:#f0faf2; color:var(--ink); padding:23px; margin-bottom:13px; }
.balance-top, .balance-meta, .currency-row, .currency-row > div { display:flex; align-items:center; justify-content:space-between; }
.balance-top { color:var(--muted); font:.7rem Arial,sans-serif; }
.balance-card strong { display:block; font-size:2.9rem; font-weight:800; letter-spacing:-.07em; margin:17px 0 22px; }
.balance-meta { border-top:1px solid var(--line); color:var(--muted); font:.68rem Arial,sans-serif; padding-top:12px; }
.balance-meta span:last-child { color:var(--green); font-weight:700; }
.live-pill { background:#ccebd8; border-radius:99px; color:var(--green-dark); font-size:.55rem; padding:5px 8px; }
.currency-row { border-bottom:1px solid rgba(255,255,255,.18); padding:13px 0; font:.85rem Arial,sans-serif; }
.currency-row > div { gap:10px; justify-content:flex-start; }
.currency-row small, .currency-row b { display:block; }
.currency-row small { color:#a9ddc7; font-size:.62rem; margin-top:3px; }
.currency-row strong { font-size:.8rem; font-weight:800; }
.currency-more { border-bottom:1px solid rgba(255,255,255,.18); color:#a9ddc7; font:700 .7rem Arial,sans-serif; padding:14px 0; }
.currency-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-weight:700; }
.usd { background:#ccebd8; color:var(--green-dark); } .usdc { background:#b9d9f0; color:#14527a; font-size:.72rem; } .ngn { background:#f2dfb9; color:#754e10; } .ugx { background:#f3c9c2; color:#87382e; font-size:.52rem; } .ghs { background:#e3d4ee; color:#5b3d74; }
.visual-footer { color:#a9ddc7; font:.68rem Arial,sans-serif; padding-top:22px; }
.footer-line { display:inline-block; width:24px; border-top:1px solid #a9ddc7; margin:0 7px 3px 0; }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:27px 0; }
.feature-strip div { padding:0 30px; border-left:1px solid var(--line); }
.feature-strip div:first-child { padding-left:0; border-left:0; }
.feature-strip strong, .feature-strip span { display:block; }
.feature-strip strong { font:700 .78rem Arial,sans-serif; margin-bottom:7px; } .feature-strip span { color:var(--muted); font-size:.85rem; }
.how-it-works { padding:105px 0 115px; }
.section-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:48px; }
.section-heading h2 { max-width:570px; font-size:clamp(2.4rem,4vw,4.3rem); font-weight:800; letter-spacing:-.06em; line-height:.98; margin:0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.step { border-top:1px solid var(--ink); padding:21px 28px 0 0; margin-right:28px; }
.step-number { color:var(--green); font:700 .7rem Arial,sans-serif; letter-spacing:.12em; }
.step h3 { font-size:1.45rem; font-weight:800; margin:30px 0 12px; } .step p { max-width:240px; color:var(--muted); font-size:.95rem; line-height:1.55; margin:0; }
.site-footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font:.7rem Arial,sans-serif; padding:22px 0 30px; }
.site-footer span:first-child { color:var(--ink); font-weight:700; }
.onboarding-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:rgba(7,42,31,.7); z-index:10; }
.onboarding-backdrop[hidden] { display:none; }
.onboarding-modal { position:relative; width:min(100%,520px); max-height:90vh; overflow:auto; background:var(--paper); padding:42px; box-shadow:14px 14px 0 var(--mint); }
.modal-close { position:absolute; top:16px; right:18px; border:0; background:none; color:var(--muted); cursor:pointer; font-size:1.7rem; line-height:1; }
.onboarding-modal h2 { max-width:390px; font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800; letter-spacing:-.06em; line-height:.98; margin:0; }
.modal-copy { color:var(--muted); font-size:.95rem; line-height:1.5; margin:16px 0 24px; }
.onboarding-step label, .step-label { display:block; color:var(--muted); font:700 .7rem Arial,sans-serif; margin-bottom:8px; }
.onboarding-step select { width:100%; border:1px solid var(--line); background:white; color:var(--ink); font: .95rem Arial,sans-serif; padding:14px; }
.modal-action { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:18px; border:0; border-radius:999px; background:var(--green); color:white; cursor:pointer; font:700 .8rem Arial,sans-serif; padding:15px 20px; }
.modal-action:hover { background:var(--green-dark); }
.document-options { display:grid; gap:9px; }
.document-option { display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:white; cursor:pointer; padding:14px; }
.document-option:has(input:checked) { border-color:var(--green); background:var(--mint); }
.document-option input { accent-color:var(--green); }
.document-option strong, .document-option small { display:block; } .document-option strong { font:700 .82rem Arial,sans-serif; } .document-option small { color:var(--muted); font: .7rem Arial,sans-serif; margin-top:4px; }
.modal-back { display:block; margin:13px auto 0; border:0; background:none; color:var(--muted); cursor:pointer; font: .72rem Arial,sans-serif; }
.onboarding-error { min-height:18px; color:#b42318; font:700 .72rem Arial,sans-serif; margin:12px 0 0; }
@keyframes hero-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.hero-copy > *, .hero-visual { opacity:0; animation:hero-reveal .65s ease-out forwards; }
.hero-copy > :nth-child(1) { animation-delay:.05s; }
.hero-copy > :nth-child(2) { animation-delay:.12s; }
.hero-copy > :nth-child(3) { animation-delay:.19s; }
.hero-copy > :nth-child(4) { animation-delay:.26s; }
.hero-copy > :nth-child(5) { animation-delay:.33s; }
.hero-visual { animation-delay:.2s; }
@media (max-width:760px) { .site-header,.hero,.feature-strip,.how-it-works,.site-footer { width:min(100% - 32px,560px); } .main-nav { gap:12px; } .main-nav a:first-child { display:none; } .hero { grid-template-columns:1fr; gap:58px; padding:55px 0 65px; } h1 { font-size:clamp(3.4rem,16vw,5.5rem); } .hero-visual { box-shadow:10px 10px 0 var(--mint); } .feature-strip,.steps { grid-template-columns:1fr; gap:24px; } .feature-strip div { border-left:0; padding:0; } .section-heading { display:block; } .section-heading h2 { margin-top:20px; } .step { margin:0; } .site-footer { display:block; line-height:1.8; } }

/* Reference hero treatment */
:root { --bg:#F4F5F0; --ink:#0E1A16; --ink-soft:#4B5750; --forest:#0B3B2E; --forest-light:#12513F; --mint:#DCEDE6; --mint-dim:#9FBBB0; --line:#D8DAD1; --amber:#C98A3D; }
body { background:var(--bg); color:var(--ink); font-family:"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { width:auto; max-width:1180px; margin:0 auto; padding:0 48px; }
.site-header { width:auto; max-width:none; margin:0; display:flex; align-items:center; justify-content:space-between; padding:28px 48px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:700; font-size:20px; letter-spacing:.02em; }
.brand-mark { width:36px; height:36px; border-radius:50%; background:var(--forest); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.main-nav { display:flex; align-items:center; gap:28px; font-size:14px; color:var(--ink-soft); }
.main-nav a { color:inherit; text-decoration:none; }
.nav-signup { color:var(--ink) !important; border:1px solid var(--ink); padding:8px 18px; border-radius:999px; font-size:13px; }
.nav-get-started { border:0; background:var(--forest); color:#fff !important; border-radius:999px; padding:9px 16px; font:600 13px "Helvetica Neue",Arial,sans-serif; cursor:pointer; }
.nav-get-started:hover { background:var(--forest-light); }
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; padding:76px 48px 96px; align-items:start; }
.hero > div:first-child { min-width:0; }
.eyebrow { font-size:14px; color:var(--forest); font-weight:600; letter-spacing:0; margin:0 0 18px; opacity:0; animation:rise .5s ease-out forwards; }
.hero h1 { font-size:56px; line-height:1.06; letter-spacing:-.015em; margin:0 0 24px; font-weight:700; max-width:11ch; opacity:0; animation:rise .6s .08s ease-out forwards; }
.sub { font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:42ch; margin:0 0 32px; opacity:0; animation:rise .6s .16s ease-out forwards; }
.cta-row { display:flex; align-items:center; gap:22px; margin-bottom:40px; opacity:0; animation:rise .6s .24s ease-out forwards; }
.btn-primary { background:var(--forest); color:#fff; border:none; padding:14px 26px; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:var(--forest-light); }
.link-secondary { font-size:15px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink-soft); padding-bottom:2px; }
.trust { display:flex; flex-direction:column; gap:8px; padding-top:24px; border-top:1px solid var(--line); max-width:38ch; opacity:0; animation:rise .6s .32s ease-out forwards; }
.trust-item { display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--ink-soft); }
.trust-item::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); flex:none; transform:translateY(-3px); }
.card { background:var(--forest); border-radius:20px; padding:32px; color:var(--mint); opacity:0; animation:rise .6s .2s ease-out forwards; }
.card-label { font-size:12.5px; color:var(--mint-dim); margin:0 0 18px; font-weight:500; }
.balance-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.balance { font-size:38px; font-weight:700; letter-spacing:-.01em; }
.balance-change { font-size:13px; color:var(--mint); background:rgba(255,255,255,.1); padding:4px 10px; border-radius:999px; }
.available { font-size:13px; color:var(--mint-dim); margin:0 0 26px; }
.curr-list { display:flex; flex-direction:column; }
.curr { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid rgba(255,255,255,.1); }
.curr-left { display:flex; align-items:center; gap:12px; }
.dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex:none; }
.usd-dot { background:#1F6F54; } .gbp-dot { background:#4169A1; } .eur-dot { background:#B8860B; }
.curr-name { font-size:14px; font-weight:600; } .curr-sub { font-size:12px; color:var(--mint-dim); } .curr-amt { font-size:14px; font-weight:600; }
.more-row { padding-top:14px; border-top:1px solid rgba(255,255,255,.1); font-size:12.5px; color:var(--mint-dim); }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:860px) { .hero { grid-template-columns:1fr; padding:48px 24px; } .hero h1 { font-size:40px; max-width:none; } .site-header { padding:20px 24px; } .main-nav { gap:12px; font-size:12px; } .brand { font-size:18px; } .brand-mark { width:32px; height:32px; font-size:12px; } .nav-get-started,.nav-signup { padding:8px 11px; } }
@media (max-width:600px) { .site-header { align-items:flex-start; gap:16px; } .main-nav { flex-wrap:wrap; justify-content:flex-end; } .main-nav a:first-child { flex-basis:100%; text-align:right; } }
@media (prefers-reduced-motion:reduce) { .eyebrow,.hero h1,.sub,.cta-row,.trust,.card { animation:none; opacity:1; } }
.how-page { width:min(1180px, calc(100% - 96px)); margin:0 auto; padding:76px 0 110px; }
.how-intro { max-width:700px; padding-bottom:70px; }
.how-intro h1 { max-width:none; margin-bottom:24px; }
.how-lead { max-width:600px; color:var(--ink-soft); font-size:20px; line-height:1.55; margin:0; }
.how-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.how-step-card { border-top:2px solid var(--forest); padding:20px 20px 0 0; }
.how-step-number { color:var(--amber); font-size:13px; font-weight:700; letter-spacing:.08em; }
.how-step-card h2 { color:var(--ink); font-size:26px; line-height:1.1; margin:28px 0 14px; }
.how-step-card p { max-width:280px; color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0; }
.how-cta { background:var(--forest); color:var(--mint); margin-top:90px; padding:42px; border-radius:20px; }
.how-cta .eyebrow { color:var(--mint-dim); opacity:1; animation:none; }
.how-cta h2 { max-width:540px; font-size:42px; line-height:1.05; letter-spacing:-.02em; margin:0 0 26px; }
@media (max-width:860px) { .how-page { width:min(100% - 48px, 600px); padding:52px 0 80px; } .how-steps { grid-template-columns:1fr; gap:38px; } .how-cta { margin-top:64px; } }

/* Three-step onboarding modal */
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(14,26,22,.5); z-index:50; }
.overlay[hidden] { display:none; }
.modal { width:100%; max-width:440px; padding:36px 36px 28px; position:relative; background:#fff; border-radius:20px; box-shadow:0 24px 60px rgba(14,26,22,.25); animation:modal-in .28s ease-out; }
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.modal-close { position:absolute; top:20px; right:20px; width:28px; height:28px; border:0; background:none; color:var(--ink-soft); font-size:18px; cursor:pointer; line-height:1; }
.progress { display:flex; gap:6px; margin-bottom:22px; }
.progress span { height:4px; flex:1; border-radius:999px; background:var(--line); }
.progress span.done { background:var(--forest); }
.step { display:none; }
.step.active { display:block; }
.step-eyebrow { color:var(--forest); font-size:12.5px; font-weight:600; margin:0 0 6px; }
.step h2 { color:var(--ink); font-size:22px; margin:0 0 8px; letter-spacing:-.01em; }
.step p.step-sub { color:var(--ink-soft); font-size:14px; line-height:1.5; margin:0 0 24px; }
select.country-select { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; font:15px inherit; margin-bottom:24px; cursor:pointer; }
select.country-select:focus { outline:2px solid var(--forest); outline-offset:1px; }
.doc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
.doc-option { display:flex; flex-direction:column; gap:8px; padding:16px 14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.doc-option:hover { border-color:var(--forest-light); }
.doc-option input { position:absolute; opacity:0; pointer-events:none; }
.doc-option.selected { border-color:var(--forest); background:rgba(11,59,46,.05); }
.doc-icon { color:var(--forest); font-size:14px; font-weight:700; }
.doc-label { color:var(--ink); font-size:14px; font-weight:600; }
.step-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.btn-back { padding:10px 0; border:0; background:none; color:var(--ink-soft); font-size:14px; cursor:pointer; }
.btn-continue { flex:none; padding:13px 24px; border:0; border-radius:999px; background:var(--forest); color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; }
.btn-continue:disabled { background:var(--line); color:var(--ink-soft); cursor:not-allowed; }
.btn-continue:not(:disabled):hover { background:var(--forest-light); }
.confirm-row { padding:16px 18px; border-radius:12px; background:var(--bg); color:var(--ink-soft); font-size:14px; line-height:1.6; margin-bottom:26px; }
.confirm-row b { color:var(--ink); }
.onboarding-error { min-height:18px; color:#b42318; font-size:12px; font-weight:700; margin:12px 0 0; }
@media (max-width:520px) { .modal { padding:30px 22px 22px; } .doc-grid { grid-template-columns:1fr; } }