:root {
    --orange: #C3A5DC;
    --pink: #F64477;
    --purple: #652D86;
    --purple-light: #9B5FC4;
    --purple-deep: #4E256B;
    --purple-dark: #28123A;
    --bg: #180A22;
    --bg-2: #28123A;
    --ink: rgba(255,255,255,0.95);
    --ink-soft: rgba(255,255,255,0.62);
    --line: rgba(255,255,255,0.12);
    --grad: linear-gradient(135deg, #F64477 0%, #9B5FC4 100%);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
      radial-gradient(ellipse 100% 80% at 50% 0%, #3A1B52 0%, transparent 55%),
      radial-gradient(ellipse 60% 50% at 0% 100%, rgba(246,68,119,0.14) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 50%, rgba(195,165,220,0.10) 0%, transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    background-attachment: fixed;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }
  img, svg { display: block; max-width: 100%; }
  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }

  /* ───── Nav ───── */
  nav.top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 22px 48px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(24, 10, 34, 0.6);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .neo-logo img { height: 30px; }
  .nav-links { display: flex; gap: 32px; list-style: none; }
  .nav-links a {
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.02em;
  }
  .nav-links a:hover { color: var(--orange); }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600; font-size: 13px;
    border: 1px solid transparent;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-ghost {
    color: var(--ink);
    border-color: var(--line);
    background: rgba(255,255,255,0.04);
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--purple-light); }
  .btn-primary {
    background: var(--grad); color: white;
    box-shadow: 0 10px 24px rgba(246, 68, 119, 0.28);
  }
  .btn-primary:hover { box-shadow: 0 14px 32px rgba(246, 68, 119, 0.42); }
  .btn-arrow svg { width: 14px; height: 14px; }

  /* ───── Hero with globe ───── */
  #hero {
    position: relative;
    min-height: 100vh;
    padding: 160px 0 80px;
    display: flex; align-items: center;
    overflow: hidden;
  }
  .hero-illu .ring {
    fill: none;
    stroke: rgba(155,95,196,0.18);
    stroke-width: 1;
  }
  .hero-illu .node { fill: rgba(195,165,220,0.5); }
  .hero-illu .node.pink { fill: rgba(246,68,119,0.6); }
  .hero-illu .conn { stroke: rgba(246,68,119,0.14); stroke-width: 1; stroke-dasharray: 3 5; }
  #hero .wrap { position: relative; z-index: 1; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
  }
  #globe-canvas {
    position: relative;
    width: 100%;
    height: 640px;
    cursor: grab;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 26px;
  }
  .eyebrow::before {
    content: ''; width: 40px; height: 1px;
    background: linear-gradient(90deg, var(--orange), var(--pink));
  }
  h1.hero-h {
    font-size: clamp(40px, 4.4vw, 66px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: white;
    margin-bottom: 26px;
    text-wrap: balance;
  }
  h1.hero-h .accent {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-style: normal;
  }
  .hero-sub {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 468px;
    line-height: 1.7;
    letter-spacing: 0.005em;
    margin-bottom: 36px;
    font-weight: 300;
    text-wrap: pretty;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-meta {
    display: flex; gap: 44px;
    margin-top: 48px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .hero-meta .item .n {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.03em; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .hero-meta .item .l {
    font-size: 10.5px; color: var(--ink-soft);
    margin-top: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 600;
  }
  .globe-anno .lbl {
    color: var(--ink-soft);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .globe-anno .val { color: var(--orange); font-weight: 700; font-size: 13px; }

  /* Scroll cue */
  .scroll-cue {
    position: absolute;
    left: 48px; bottom: 36px;
    display: flex; align-items: center; gap: 12px;
    font-size: 10px; letter-spacing: 0.24em;
    color: var(--ink-soft);
    text-transform: uppercase; font-weight: 600;
  }
  .scroll-cue .arrow {
    width: 22px; height: 22px;
    border: 1px solid var(--ink-soft);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    animation: bob 2s ease-in-out infinite;
  }@keyframes bob{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }}
  .scroll-cue svg { width: 11px; height: 11px; transform: rotate(90deg); }
  .bk-card .chip {
    position: absolute; left: 26px; top: 80px;
    width: 48px; height: 36px; border-radius: 6px;
    background: linear-gradient(135deg, #F8D78A, #C99B3D 50%, #8E6422);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  }
  .bk-card .num {
    position: absolute; left: 26px; bottom: 52px;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 18px; letter-spacing: 0.08em;
    color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  }
  .bk-card .holder {
    position: absolute; left: 26px; bottom: 20px;
    font-size: 10px; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.92);
    font-weight: 700;
  }
  .bk-card .holder small {
    display: block; font-size: 8px; opacity: 0.55;
    margin-bottom: 4px; letter-spacing: 0.2em;
    font-weight: 600;
  }
  .bk-card .brand {
    position: absolute; right: 22px; top: 22px;
    text-align: right;
  }
  .bk-card .brand .nm {
    font-size: 18px; font-weight: 800;
    color: white; letter-spacing: -0.02em;
    line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  }
  .bk-card .brand .tag {
    display: block; font-size: 8px; letter-spacing: 0.2em;
    color: rgba(255,255,255,0.7); font-weight: 600;
    margin-top: 3px; text-transform: uppercase;
  }
  .bank-txn .icn {
    width: 32px; height: 32px; border-radius: 8px;
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 10px; letter-spacing: 0.04em;
  }
  .bank-txn .icn.nic   { background: linear-gradient(135deg, #E84C1C, #B83617); }
  .bank-txn .icn.nabil { background: linear-gradient(135deg, #8E1623, #5F0C18); }
  .bank-txn .icn.gime  { background: linear-gradient(135deg, #1B3A8C, #0E2456); }
  .bank-txn .body { min-width: 0; }
  .bank-txn .nm { color: white; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bank-txn .meta { color: var(--ink-soft); font-size: 10px; margin-top: 2px; }
  .bank-txn .val {
    color: var(--orange); font-weight: 700;
    font-variant-numeric: tabular-nums; font-size: 13px;
    text-align: right;
  }
  .bank-txn .val .ccy { display: block; font-size: 9px; color: var(--ink-soft); letter-spacing: 0.1em; font-weight: 600; margin-top: 1px; }@keyframes dash-flow{ to { stroke-dashoffset: -24; }}
  .cash-receipt .head {
    text-align: center;
    border-bottom: 1px dashed rgba(31,21,48,0.3);
    padding-bottom: 10px; margin-bottom: 10px;
  }
  .cash-receipt .head .brand {
    font-family: 'Manrope', sans-serif;
    font-size: 13px; font-weight: 800;
    background: linear-gradient(135deg, #E84C1C, #B83617);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -0.02em; margin-bottom: 3px;
  }
  .cash-receipt .head .out {
    font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
    color: rgba(31,21,48,0.6);
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
  }
  .cash-receipt .row {
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.04em;
    color: rgba(31,21,48,0.7);
    padding: 3px 0;
  }
  .cash-receipt .row b { color: #1F1530; font-weight: 700; }
  .cash-receipt .amount {
    margin: 10px 0 10px;
    padding: 10px 0;
    border-top: 1px dashed rgba(31,21,48,0.3);
    border-bottom: 1px dashed rgba(31,21,48,0.3);
    text-align: center;
  }
  .cash-receipt .amount .lbl {
    font-size: 8px; letter-spacing: 0.2em;
    color: rgba(31,21,48,0.55);
    font-weight: 700; text-transform: uppercase;
    font-family: 'Manrope', sans-serif; margin-bottom: 3px;
  }
  .cash-receipt .amount .val {
    font-size: 24px; font-weight: 800;
    color: #1F1530; letter-spacing: -0.03em;
    line-height: 1; font-family: 'Manrope', sans-serif;
  }
  .cash-receipt .amount .val .ccy {
    font-size: 11px; color: rgba(31,21,48,0.55);
    margin-left: 4px; font-weight: 600;
  }
  .cash-receipt .ref {
    font-size: 8px; text-align: center;
    color: rgba(31,21,48,0.65);
    margin-top: 6px; letter-spacing: 0.12em;
  }
  .cash-receipt .status {
    margin-top: 8px; text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.18em; color: #1F1530;
  }
  .cash-receipt .status .dot {
    display: inline-block; width: 7px; height: 7px;
    background: #16A34A; border-radius: 50%;
    margin-right: 5px; vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
    animation: cash-pulse 1.4s ease-in-out infinite;
  }@keyframes cash-pulse{
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(22,163,74,0); }}
  .cash-led .lbl {
    font-size: 8px; letter-spacing: 0.22em;
    color: rgba(195,165,220,0.7);
    font-weight: 700; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .cash-led .nums {
    font-size: 18px; font-weight: 800;
    color: #FFB85C; letter-spacing: 0.08em;
    text-shadow: 0 0 12px rgba(255,184,92,0.6);
    font-variant-numeric: tabular-nums;
  }
  .outlet {
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(40,18,58,0.78);
    border: 1px solid rgba(195,165,220,0.3);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.02em;
  }
  .outlet b { color: var(--orange); font-weight: 800; margin-right: 4px; }
  .coop-passbook .head {
    text-align: center;
    padding: 28px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .coop-passbook .nm {
    color: white;
    font-family: 'Manrope', sans-serif;
    font-size: 14px; font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }
  .coop-passbook .sub {
    font-size: 9px; letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    text-transform: uppercase;
  }
  .coop-passbook .member {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: ui-monospace, 'SF Mono', monospace;
  }
  .coop-passbook .member .lbl {
    font-size: 8px; letter-spacing: 0.2em;
    color: rgba(255,255,255,0.45);
    font-weight: 700; text-transform: uppercase;
    font-family: 'Manrope', sans-serif; margin-bottom: 4px;
  }
  .coop-passbook .member .v {
    color: white; font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
  }
  .coop-passbook .ledger-row .date {
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.02em;
  }
  .coop-passbook .ledger-row .desc {
    color: rgba(255,255,255,0.78);
    font-size: 10px;
  }
  .coop-passbook .ledger-row .amt {
    color: var(--orange);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
  }
  .coop-passbook .ledger-row .amt.neg { color: #C99BFF; }
  .coop-id .top {
    padding: 12px 16px;
    background: linear-gradient(135deg, #C3A5DC, #F64477);
    color: white;
    font-family: 'Manrope', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .coop-id .top small { font-size: 9px; opacity: 0.85; letter-spacing: 0.14em; font-weight: 700; }
  .coop-id .body {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
  }
  .coop-id .avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background:
      radial-gradient(ellipse 60% 70% at 50% 65%, #B57F4A, transparent 70%),
      radial-gradient(circle at 50% 38%, #D9A578 0 20px, transparent 22px),
      linear-gradient(135deg, #C99B6B, #8B5E2F);
    border: 2px solid #C3A5DC;
  }
  .coop-id .who {
    font-family: 'Manrope', sans-serif;
  }
  .coop-id .who .nm {
    font-size: 13px; font-weight: 800;
    color: #1F1530; letter-spacing: -0.01em;
  }
  .coop-id .who .role {
    font-size: 9px; letter-spacing: 0.14em;
    color: rgba(31,21,48,0.6);
    font-weight: 700; text-transform: uppercase;
    margin-top: 3px;
  }
  .coop-id .meta {
    padding: 8px 16px 12px;
    border-top: 1px dashed rgba(31,21,48,0.2);
    display: flex; justify-content: space-between;
    font-size: 9px;
    color: rgba(31,21,48,0.6);
    letter-spacing: 0.02em;
    font-family: ui-monospace, monospace;
  }
  .coop-id .meta b { color: #1F1530; font-weight: 700; }
  .coop-mem-row .ava {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C3A5DC, #F64477);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 13px;
  }
  .coop-mem-row .body { min-width: 0; }
  .coop-mem-row .nm { color: white; font-size: 12px; font-weight: 700; }
  .coop-mem-row .meta { color: rgba(255,255,255,0.55); font-size: 10px; margin-top: 2px; letter-spacing: 0.04em; }
  .coop-mem-row .amt {
    color: var(--orange); font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    text-align: right;
  }
  .coop-mem-row .amt small { display: block; font-size: 9px; color: var(--ink-soft); font-weight: 600; }
  .cash-receipt .head {
    text-align: center;
    border-bottom: 1px dashed rgba(31,21,48,0.3);
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .cash-receipt .head .brand {
    font-family: 'Manrope', sans-serif;
    font-size: 14px; font-weight: 800;
    background: linear-gradient(135deg, #E84C1C, #B83617);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .cash-receipt .head .out {
    font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
    color: rgba(31,21,48,0.6);
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
  }
  .cash-receipt .row {
    display: flex; justify-content: space-between;
    font-size: 10px; letter-spacing: 0.04em;
    color: rgba(31,21,48,0.7);
    padding: 4px 0;
  }
  .cash-receipt .row b {
    color: #1F1530; font-weight: 700;
  }
  .cash-receipt .amount {
    margin: 14px 0 12px;
    padding: 12px 0;
    border-top: 1px dashed rgba(31,21,48,0.3);
    border-bottom: 1px dashed rgba(31,21,48,0.3);
    text-align: center;
  }
  .cash-receipt .amount .lbl {
    font-size: 9px; letter-spacing: 0.2em;
    color: rgba(31,21,48,0.55);
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 4px;
  }
  .cash-receipt .amount .val {
    font-size: 28px; font-weight: 800;
    color: #1F1530;
    letter-spacing: -0.03em;
    line-height: 1;
    font-family: 'Manrope', sans-serif;
  }
  .cash-receipt .amount .val .ccy {
    font-size: 13px;
    color: rgba(31,21,48,0.55);
    margin-left: 6px;
    font-weight: 600;
  }
  .cash-receipt .qr {
    margin: 0 auto;
    width: 70px; height: 70px;
    background:
      conic-gradient(from 0deg at 25% 25%, #1F1530 0 25%, transparent 0 50%, #1F1530 0 75%, transparent 0),
      conic-gradient(from 0deg at 75% 75%, #1F1530 0 25%, transparent 0 50%, #1F1530 0 75%, transparent 0),
      repeating-conic-gradient(#1F1530 0% 12.5%, transparent 0% 25%);
    background-size: 14px 14px;
    border: 2px solid #1F1530;
    margin-top: 4px;
    image-rendering: pixelated;
  }
  .cash-receipt .ref {
    font-size: 9px; text-align: center;
    color: rgba(31,21,48,0.65);
    margin-top: 8px;
    letter-spacing: 0.12em;
  }
  .cash-receipt .status {
    margin-top: 12px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.2em;
    color: #1F1530;
  }
  .cash-receipt .status .dot {
    display: inline-block; width: 8px; height: 8px;
    background: #16A34A; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
    animation: cash-pulse 1.4s ease-in-out infinite;
  }@keyframes cash-pulse{
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(22,163,74,0); }}
  .outlet {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(40,18,58,0.7);
    border: 1px solid rgba(195,165,220,0.25);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
  }
  .outlet b { color: var(--orange); font-weight: 800; margin-right: 4px; }
  .cash-led .lbl {
    font-size: 9px; letter-spacing: 0.24em;
    color: rgba(195,165,220,0.7);
    font-weight: 700; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .cash-led .nums {
    font-size: 22px; font-weight: 800;
    color: #FFB85C;
    letter-spacing: 0.1em;
    text-shadow: 0 0 12px rgba(255,184,92,0.6);
    font-variant-numeric: tabular-nums;
  }
  /* ───── How to send money — 4-step flow ───── */
  .send-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 80px;
    padding-top: 60px;
    perspective: 1400px;
  }
  .send-line {
    position: absolute;
    left: 60px; right: 60px; top: 60px;
    height: 8px;
    width: calc(100% - 120px);
    pointer-events: none;
  }
  .send-line .send-line-bg { stroke-dasharray: 4 6; }
  .send-line .send-line-fg {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
  }
  .step-card-v2 {
    position: relative;
    padding: 60px 32px 36px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 22px;
    text-align: left;
    transition: border-color 0.3s, transform 0.3s;
    overflow: hidden;
    will-change: transform, opacity;
  }
  .step-card-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(195,165,220,0.0), rgba(246,68,119,0.05));
    opacity: 0;
    transition: opacity 0.3s;
  }
  .step-card-v2:hover { border-color: var(--orange); transform: translateY(-4px); }
  .step-card-v2:hover::before { opacity: 1; }
  .step-num-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: var(--orange);
    padding: 5px 10px;
    border: 1px solid rgba(195,165,220,0.4);
    border-radius: 999px;
    text-transform: uppercase;
    margin-bottom: 22px;
    background: rgba(195,165,220,0.06);
  }
  .step-icn {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--orange);
    margin-bottom: 22px;
    position: relative;
  }
  .step-icn svg { width: 24px; height: 24px; }
  .step-card-v2 h4 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.15;
  }
  .step-card-v2 p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 22px;
  }
  .step-meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--orange);
    text-transform: uppercase;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    width: 100%;
  }
  .step-meta .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 8px var(--orange);
    animation: step-pulse 1.6s ease-in-out infinite;
  }@keyframes step-pulse{
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }}@media (max-width: 980px){
    .send-flow { grid-template-columns: 1fr 1fr; }
    .send-line { display: none; }}@media (max-width: 560px){
    .send-flow { grid-template-columns: 1fr; }}
  .ut-panel .head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
  }
  .ut-panel .head .ttl { font-size: 13px; font-weight: 700; color: white; letter-spacing: 0.04em; }
  .ut-panel .head .live {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; color: var(--ink-soft);
    letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  }
  .ut-panel .head .live .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: pulse-live 1.6s ease-in-out infinite;
  }@keyframes pulse-live{
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.35); }}
  .ut-input .submit {
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    border-radius: 10px;
    color: white; font-size: 12px; font-weight: 700;
    border: none; cursor: pointer; letter-spacing: 0.02em;
  }
  .fx-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    font-size: 13px;
  }
  .fx-row .pair { color: white; font-weight: 700; letter-spacing: 0.04em; }
  .fx-row .src { font-size: 11px; color: var(--ink-soft); }
  .fx-row .rate {
    color: var(--orange); font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 70px; text-align: right;
  }

  /* ───── Why Neo 4-stage Section ───── */
  #why-neo { padding: 140px 0; position: relative; }
  .why-pill {
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: 0.12em; text-transform: uppercase;
    transition: all 0.3s;
  }
  .why-pill.active {
    background: var(--grad); color: white;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(246,68,119,0.35);
  }
  .why-stage {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
    padding: 60px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 26px;
  }
  .why-stage.reverse { direction: rtl; }
  .why-stage.reverse > * { direction: ltr; }
  .why-stage .lbl {
    font-size: 11px; font-weight: 800; color: var(--orange);
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 22px;
  }
  .why-stage h3 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800; line-height: 1.0;
    letter-spacing: -0.035em;
    color: white; margin-bottom: 18px;
  }
  .why-stage h3 .accent {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-style: normal;
    padding-bottom: 0.1em; display: inline-block;
  }
  .why-stage p {
    font-size: 16px; color: var(--ink-soft);
    line-height: 1.6; margin-bottom: 26px;
  }
  .why-stage .stat-row { display: flex; gap: 28px; flex-wrap: wrap; }
  .why-stage .stat-row .n {
    font-size: 28px; font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -0.03em; line-height: 1;
  }
  .why-stage .stat-row .l {
    font-size: 11px; color: var(--ink-soft);
    margin-top: 6px; text-transform: uppercase;
    font-weight: 600; letter-spacing: 0.06em;
  }@keyframes float-vis{
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }}

  /* ───── Testimonials — cinematic rotating reviews ───── */
  #testimonials { padding: 140px 0; overflow: hidden; }
  .review-stage {
    position: relative;
    max-width: 860px;
    margin: 70px auto 0;
    min-height: 320px;
    text-align: center;
  }
  .review-quotemark {
    font-family: Georgia, serif;
    font-size: 200px;
    line-height: 0.6;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0.18;
    position: absolute;
    top: -40px; left: 50%; transform: translateX(-50%);
    pointer-events: none;
  }
  .review-track { position: relative; min-height: 280px; }
  .review-slide {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    pointer-events: none;
    will-change: transform, opacity;
  }
  .review-slide.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .r-stars { color: var(--orange); letter-spacing: 4px; font-size: 16px; margin-bottom: 26px; }
  .r-quote {
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 500;
    line-height: 1.45;
    color: white;
    letter-spacing: -0.015em;
    max-width: 760px;
    margin-bottom: 34px;
    text-wrap: balance;
  }
  .r-person { display: inline-flex; align-items: center; gap: 14px; }
  .r-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--grad); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px;
    box-shadow: 0 8px 22px rgba(246,68,119,0.35);
  }
  .r-nm { font-size: 15px; font-weight: 700; color: white; text-align: left; }
  .r-where { font-size: 12px; color: var(--ink-soft); margin-top: 3px; text-align: left; }

  .review-dots { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
  .review-dots .d {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.2); cursor: pointer;
    transition: all 0.4s;
  }
  .review-dots .d.active {
    width: 28px; border-radius: 4px;
    background: var(--grad);
    box-shadow: 0 0 12px rgba(246,68,119,0.5);
  }

  /* Marquee strip */
  .review-marquee {
    margin-top: 80px;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    overflow: hidden;
  }
  .rm-track {
    display: flex; gap: 18px;
    width: max-content;
    animation: marquee 32s linear infinite;
  }
  .review-marquee:hover .rm-track { animation-play-state: paused; }@keyframes marquee{
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }}
  .rm-card {
    flex: 0 0 auto;
    width: 280px;
    padding: 22px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  .rm-card .rm-stars { color: var(--orange); letter-spacing: 2px; font-size: 12px; margin-bottom: 12px; }
  .rm-card p { font-size: 15px; color: white; font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
  .rm-card span { font-size: 12px; color: var(--ink-soft); }@media (max-width: 980px){
    .why-stage { grid-template-columns: 1fr; gap: 30px; padding: 40px; }}@media (max-width: 560px){
    .review-quotemark { font-size: 120px; }}

  /* ───── Story Section ───── */
  #story {
    position: relative;
    background: #180A22;
  }
  .story-dot {
    display: flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,0.4);
    font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; font-weight: 700;
    transition: color 0.4s;
  }
  .story-dot::after {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: all 0.4s;
  }
  .story-dot.active { color: var(--orange); }
  .story-dot.active::after {
    width: 20px; height: 6px; border-radius: 4px;
    background: var(--grad);
    box-shadow: 0 0 12px rgba(246,68,119,0.5);
  }

  /* Vignette ring grain overlay over story */
  .story-grain {
    position: absolute; inset: 0; z-index: 3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
  }@media (max-width: 700px){
    .story-pin { height: 100vh; }
    .story-dot span { display: none; }}

  /* ───── Section base ───── */
  section { padding: 180px 0; position: relative; isolation: isolate; }
  .section-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    will-change: transform;
  }
  .section-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
  }
  section .section-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent, rgba(24,10,34,0.7) 90%);
  }
  .section-head {
    margin-bottom: 96px;
    max-width: 920px;
  }
  .section-label {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--orange);
    margin-bottom: 30px;
    display: inline-block;
  }
  h2.section-h2 {
    font-size: clamp(40px, 5.2vw, 82px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: white;
    text-wrap: balance;
    margin-bottom: 32px;
  }
  h2.section-h2 .accent {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-style: normal;
    padding-bottom: 0.1em;
    display: inline-block;
  }

  /* GLOBAL FIX — gradient accent text was clipping italic descenders.
     Give every accent generous line-height + bottom padding so nothing cuts. */
  .accent {
    padding-bottom: 0.04em;
    display: inline-block;
  }
  .accent .w {
    padding-bottom: 0.04em;
  }
  h1.hero-h .accent {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-style: normal;
    padding-bottom: 0.14em;
    line-height: 1.12;
    display: inline-block;
  }
  .section-lead {
    font-size: 20px;
    color: var(--ink-soft);
    line-height: 1.62;
    max-width: 640px;
    font-weight: 300;
  }
  .horizon .num {
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 28px;
  }
  .horizon .num .lbl {
    display: block;
    font-size: 10px;
    color: var(--ink-soft);
    opacity: 0.7;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .horizon .cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.04em;
    transition: gap 0.25s;
  }
  .horizon .cta:hover { gap: 16px; }
  .horizon .cta svg { width: 14px; height: 14px; }
  .h-progress .bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--orange), var(--pink));
    width: 25%;
    transform-origin: left;
    box-shadow: 0 0 12px rgba(246,68,119,0.5);
  }
  .h-pager .cur { color: var(--orange); font-size: 22px; vertical-align: -2px; }
  .h-hint .arrow {
    width: 28px; height: 1px;
    background: var(--orange);
    position: relative;
  }
  .h-hint .arrow::after {
    content: '';
    position: absolute;
    right: 0; top: -3px;
    border-left: 5px solid var(--orange);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
  }
  .horizon h3 .accent {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-style: normal;
  }
  .horizon .cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.04em;
    transition: gap 0.2s;
  }
  .horizon:hover .cta { gap: 14px; }
  .horizon .cta svg { width: 14px; height: 14px; }

  /* ───── Discipline / 4-phase model ───── */
  .discipline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 60px;
  }
  .phase {
    padding: 40px 28px;
    border-right: 1px solid var(--line);
    position: relative;
  }
  .phase:last-child { border-right: none; }
  .phase .num {
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    font-variant-numeric: tabular-nums;
  }
  .phase .icn {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--orange);
    margin-bottom: 24px;
  }
  .phase .icn svg { width: 22px; height: 22px; }
  .phase h4 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    line-height: 1.15;
  }
  .phase p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
  }

  /* ───── Leadership team ───── */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
  }
  .member {
    padding: 36px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 22px;
    transition: border-color 0.3s, transform 0.3s;
  }
  .member:hover {
    border-color: var(--purple-light);
    transform: translateY(-4px);
  }
  .member .role {
    font-size: 11px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .member h4 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
  }
  .member p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
  }

  /* ───── Stat strip ───── */
  .stat-strip {
    padding: 80px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
  .stat .n {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .stat .l {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* ───── Final CTA ───── */
  .final-cta {
    padding: 200px 0;
    text-align: center;
  }
  .final-cta h2 {
    font-size: clamp(48px, 7vw, 110px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: white;
    text-wrap: balance;
    max-width: 1000px;
    margin: 0 auto 32px;
  }
  .final-cta h2 .accent {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-style: normal;
  }
  .final-cta .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  /* ───── Footer ───── */
  footer {
    background: var(--purple-dark);
    color: rgba(255,255,255,0.6);
    padding: 80px 0 32px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .ft-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
  }
  .ft-col h5 {
    font-size: 11px; font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
  }
  .ft-col a {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    padding: 5px 0;
  }
  .ft-col a:hover { color: var(--orange); }
  .ft-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
  }
  .phase { opacity: 1; }
  .member { opacity: 1; }
  .stat { opacity: 1; }

  /* Reveal state */
  .reveal { opacity: 0; transform: translateY(40px); will-change: transform, opacity; }@media (max-width: 980px){
    .hero-grid, .horizon { grid-template-columns: 1fr; gap: 40px; }
    .discipline-grid, .team-grid, .stat-grid { grid-template-columns: 1fr 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .phase { border-right: none; border-bottom: 1px solid var(--line); }
    .ft-grid { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
    #globe-canvas { height: 480px; }}@media (max-width: 560px){
    .wrap { padding: 0 24px; }
    section { padding: 90px 0; }
    .discipline-grid, .team-grid, .stat-grid { grid-template-columns: 1fr; }
    .news-list .news-card { grid-template-columns: 110px 1fr; }
    .ft-grid { grid-template-columns: 1fr; }}

/* Numbers read as data, not as decoration */
.hero-meta .item .n, .why-stage .stat-row .n, .stat .n {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff; font-weight: 500; letter-spacing: -0.035em;
}
.r-avatar, .why-pill.active { background: var(--purple-light); }
.review-dots .d.active, .story-dot.active::after, .h-progress .bar { background: var(--orange); }

/* 2. Kill the coloured glow ────────────────────────────────── */
.btn-primary { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.r-avatar, .cash-led, .review-dots .d.active, .story-dot.active::after,
.h-progress .bar, .why-pill.active, .coop-passbook .logo { box-shadow: none; }

/* 3. Give the page flat ground to stand on ─────────────────── */
body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #331748 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: scroll;
}

/* 4. Crisper geometry — hairlines and tighter corners ──────── */
:root { --line: rgba(255,255,255,0.09); }
.eyebrow { flex-wrap: nowrap; white-space: nowrap; }
.eyebrow::before { flex: 0 0 40px; }
.section-label { margin-bottom: 22px; }
.section-head { margin-bottom: 72px; }
h2.section-h2 { font-size: clamp(36px, 3.9vw, 58px); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 26px; }
#why-neo, #leadership { padding: 112px 0; }

/* ══════════════════════════════════════════════════════════════
   CLIENT REVISION LAYER — nav behaviour, hero corridor ticker,
   why-neo cards, remittance impact, payout finder
   ══════════════════════════════════════════════════════════════ */

/* Nav: rides with the page, retreats on scroll, leaves the N mark */
nav.top {
  position: absolute; padding: 14px 48px;
  background: transparent; -webkit-backdrop-filter:none;backdrop-filter:none; border-bottom: none;
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
nav.top.condensed { padding-top: 14px; padding-bottom: 14px; background: transparent; }
nav.top.nav-hidden { transform: translateY(-118%); opacity: 0; pointer-events: none; }
.neo-logo img { height: 26px; }
.nav-links { gap: 26px; }
.nav-links a { font-size: 12.5px; }
nav.top .btn { padding: 10px 18px; font-size: 12px; }
.nav-mark {
  position: fixed; top: 14px; left: 22px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(24,10,34,0.72); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity: 0; transform: scale(.7) translateY(-8px); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
}
.nav-mark img { width: 22px; height: auto; }
.nav-mark.show { opacity: 1; transform: none; pointer-events: auto; }
.nav-mark:hover { border-color: var(--purple-light); }

/* Hero corridor ticker */
.corridor-strip {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid; gap: 2px; max-width: 560px;
}
.corridor-row { display: grid; grid-template-columns: max-content 1fr; align-items: center; height: 34px; }
.cr-label {
  min-width: 0; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500; white-space: nowrap; padding-right: 16px;
}
.cr-label b { color: #fff; font-weight: 600; }
.cr-marquee {
  overflow: hidden; position: relative; height: 100%;
  display: flex; align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
}
.cr-track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: crScroll 26s linear infinite; }
.cr-track.rev { animation-duration: 32s; }
.cr-item { font-size: 12.5px; color: rgba(255,255,255,0.62); letter-spacing: 0.01em; }
.cr-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); opacity: .55; margin: 0 16px; flex: none; }@keyframes crScroll{ from { transform: translateX(0); } to { transform: translateX(-50%); }}
.cr-marquee:hover .cr-track { animation-play-state: paused; }

/* Remittance impact */
#impact { padding: 112px 0; }
.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.impact-card {
  position: relative; padding: 40px 38px 36px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02);
  transition: border-color .3s, background .3s;
}
.impact-card:hover { border-color: var(--purple-light); background: rgba(255,255,255,0.04); }
.ic-num {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--orange); margin-bottom: 18px;
}
.ic-kicker { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 14px; }
.impact-card h3 {
  font-family: 'Poppins', sans-serif; font-size: 25px; font-weight: 500; color: #fff;
  line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; text-wrap: pretty;
}
.impact-card p { font-size: 15px; line-height: 1.68; color: var(--ink-soft); font-weight: 300; }

/* Payout finder strip */
#payout-finder {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.022);
}
.payout-inner { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding-top: 52px; padding-bottom: 52px; flex-wrap: wrap; }
.payout-copy { max-width: 520px; }
.payout-h {
  font-family: 'Poppins', sans-serif; font-size: clamp(26px, 2.6vw, 36px); font-weight: 500;
  color: #fff; letter-spacing: -0.028em; line-height: 1.1; margin-bottom: 14px;
}
.payout-copy p { font-size: 15px; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }
.payout-form { display: flex; align-items: flex-end; gap: 12px; }
.pf-field { display: grid; gap: 8px; }
.pf-field span { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.pf-field input {
  width: 268px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.04);
  color: #fff; font-family: inherit; font-size: 14px;
}
.pf-field input::placeholder { color: rgba(255,255,255,0.34); }
.pf-field input:focus { outline: none; border-color: var(--purple-light); background: rgba(255,255,255,0.07); }
.payout-form .btn { height: 45px; }@media (max-width: 1080px){
  .why-cards { grid-template-columns: 1fr 1fr; }
  .why-card, .why-card:nth-child(4), .why-card:nth-child(5) { grid-column: span 1; }
  .impact-grid { grid-template-columns: 1fr; }}@media (max-width: 760px){
  nav.top { padding: 14px 22px; }
  .nav-mark { left: 14px; width: 42px; height: 42px; }
  .why-cards { grid-template-columns: 1fr; }
  .corridor-strip { max-width: none; }
  .corridor-row { grid-template-columns: 1fr; height: auto; gap: 4px; padding: 8px 0; }
  .cr-label { padding-right: 0; }
  .payout-inner { padding-top: 40px; padding-bottom: 40px; gap: 32px; }
  .payout-form { flex-direction: column; align-items: stretch; width: 100%; }
  .pf-field input { width: 100%; }}

/* ── Ncell brand tokens (single source of truth) ───────────────
   Change these five values and the whole site follows. */
:root{
  --nc-purple:#652D86;
  --nc-purple-deep:#4E256B;
  --nc-magenta:#F64477;
  --nc-magenta-ink:#8D2341;
  --nc-offwhite:#F2F0F3;
  --nc-lilac:#C3A5DC; /* small-caps labels: legible tint of the brand purple */
}
h1.hero-h .accent, h1.page-h .accent, .hero h1 .accent{ color:var(--nc-magenta); }

/* Flat brand fills — no gradient pills */
.btn-primary{ background:var(--nc-magenta-ink); color:#fff; }
.btn-primary:hover{ background:#6A1830; }
#scroll-progress span{ background:var(--nc-magenta) !important; box-shadow:none !important; }
.r-avatar,.why-pill.active,.seg button.active{ background:var(--nc-purple); }
.cat-card .cap b{ color:var(--nc-offwhite); }

.story-vignette{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 66% at 38% 48%, transparent 0%, rgba(10,4,14,0.42) 72%, rgba(10,4,14,0.82) 100%),
    linear-gradient(90deg, rgba(10,4,14,0.55) 0%, transparent 42%);
}
.story-grain{ opacity:0.05 !important; z-index:5; }
.story-rail{
  position:absolute; right:clamp(20px,3.4vw,54px); top:50%;
  transform:translateY(-50%); z-index:7;
  display:flex; align-items:stretch; gap:16px; height:190px;
}
.story-rail-line{ position:relative; width:1px; background:rgba(255,255,255,0.16); flex:none; }
.story-rail-fill{
  position:absolute; left:-1px; top:0; width:3px; height:0%;
  background:var(--nc-magenta);
}
.story-rail-labels{ display:flex; flex-direction:column; justify-content:space-between; }
.story-dot{
  display:block; font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(255,255,255,0.34);
  transition:color .45s ease;
}
.story-dot::after{ display:none; }
.story-dot.active{ color:var(--nc-offwhite); }

.story-counter{
  position:absolute; left:clamp(24px,5vw,88px); bottom:clamp(56px,11vh,120px);
  z-index:7; display:flex; align-items:baseline; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:0.16em;
  color:rgba(255,255,255,0.34); font-variant-numeric:tabular-nums;
}
.story-counter .cur{ font-size:22px; color:var(--nc-offwhite); letter-spacing:-0.02em; }@media (max-width:760px){
  .story-rail{ height:140px; right:16px; }
  .story-dot{ font-size:0; letter-spacing:0; }
  .story-dot.active{ font-size:0; }
  .story-rail-labels{ display:none; }
  .story-chapter .lines{ padding-left:18px; }
  .story-counter{ bottom:52px; }}

/* ── Payout finder: flat surface ────────────────────────────────
   Was picking up the page's radial washes through a translucent
   fill. Now an opaque panel with hairline rules. */
#payout-finder{
  background:#1E0F2B !important;
  border-top:1px solid rgba(255,255,255,0.09);
  border-bottom:1px solid rgba(255,255,255,0.09);
}
#payout-finder::before{ content:none; }
.pf-field input{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.14); }
.pf-field input:focus{ background:rgba(255,255,255,0.08); border-color:var(--nc-magenta); }
.payout-copy .section-label{ white-space:nowrap; margin-bottom:16px; }
.payout-h{ margin-bottom:14px; }

/* ── Contain section backdrops ──────────────────────────────────
   .section-bg is parallax-scaled past its own box, and as an
   absolutely-positioned child it paints above the in-flow
   background of whatever follows — which is how the "how to send
   money" photo was bleeding into the payout strip. Clip it, and
   give the payout strip its own layer. */
section:has(> .section-bg){ overflow:hidden; }
#payout-finder{ position:relative; z-index:2; overflow:hidden; }

/* The pinned story fills the viewport itself; the global section padding
   just added dead colour above and below it. */
#story{ padding:0; }
/* Connector track for the four-step flow. Lives in CSS, not as an SVG
   presentation attribute, so the light theme can restyle it. */
.send-line-bg{ stroke: rgba(255,255,255,0.08); }

/* ══════════════════════════════════════════════════════════════
   SERVICES — EDITORIAL VARIANT (#services-alt)
   An alternative treatment shown alongside the existing scroller:
   kicker + large split headline, a 3-up row of image-topped cards,
   then the full seven services as a large indexed list.
   ══════════════════════════════════════════════════════════════ */

#services-alt{ padding:150px 0 160px; }
.fs-head{
  display:grid; grid-template-columns:1.25fr 1fr; gap:60px;
  align-items:end; margin-bottom:76px;
}
.fs-kicker{
  grid-column:1/-1; font-size:11px; font-weight:600; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--nc-lilac); margin-bottom:8px;
}
.fs-h{
  font-family:'Poppins',sans-serif;
  font-size:clamp(38px,5.2vw,74px); font-weight:500; line-height:1.03;
  letter-spacing:-0.035em; color:var(--nc-offwhite); margin:0;
}
.fs-h .accent{ color:var(--nc-magenta); }
.fs-lead{
  font-size:17px; font-weight:300; line-height:1.65;
  color:var(--ink-soft); max-width:420px; margin:0 0 8px;
}

/* ── Sticky card stack ──────────────────────────────────────────
   Cards sit in normal flow but each pins near the top; the next
   card scrolls up over it. Increasing z-index makes later cards
   paint above, and neo-main.js scrubs scale/opacity on the buried
   card so the stack reads as depth rather than a hard cut. ─────── */
.fs-stack{ margin-bottom:130px; }
/* A sticky child is constrained by its parent's CONTENT box, so
   padding-bottom on .fs-stack does nothing for it — the range has to
   be extended by real in-flow height. This spacer lets every card
   hold its pin to the end: card 03 sits flush while 01 and 02 show
   as 20px edges behind it, instead of the stack sliding away as one. */
.fs-stack-end{ height:30vh; }
.fs-card{
  position:sticky; top:calc(104px + var(--i) * 13px);
  z-index:calc(var(--i) + 1); padding-bottom:26px; margin-bottom:15vh;
}

.fs-inner{
  display:grid; grid-template-columns:0.92fr 1.08fr; align-items:stretch;
  /* min-height, not height. This was a fixed clamp with overflow:hidden, so
     any card whose copy ran past 448px had its stat row sliced in half by
     the card edge — which is exactly what the longer Neo Direct and Smart
     QR descriptions do. The clamp still sets the floor so short cards keep
     their generous proportions; taller copy now grows the card instead of
     being cut off. overflow:hidden stays for the 26px radius. */
  min-height:clamp(384px,48vh,448px); border-radius:26px; overflow:hidden;
  background:#251038; border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.6);
  transform-origin:50% 0%; will-change:transform;
}
.fs-card:nth-child(2) .fs-inner{ background:#2a1240; }
.fs-card:nth-child(3) .fs-inner{ background:#2e1444; }
.fs-card:nth-child(4) .fs-inner{ background:#321648; }
.fs-card:nth-child(5) .fs-inner{ background:#36184c; }
.fs-card:nth-child(6) .fs-inner{ background:#3a1a50; }
.fs-card:nth-child(7) .fs-inner{ background:#3e1c54; }
.fs-media{ position:relative; overflow:hidden; background:rgba(255,255,255,0.04); min-height:0; }
/* The image is absolutely positioned so it fills its column WITHOUT
   contributing height. As a normal-flow child, height:100% inside an
   auto-height grid row is circular and falls back to the file's
   intrinsic height — that made every card ~870px tall instead of 432,
   taller than the viewport, so no card could hold its sticky pin. */
.fs-media img{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.fs-card:hover .fs-media img{ transform:scale(1.05); }
/* Client-supplied service art is flat illustration on a white field: cover would
   crop the subject and the dark card tint would fight the linework, so these are
   contained on their own light panel. */
.fs-media--illus{ background:#FFFFFF; }
.fs-media--illus img{ object-fit:contain; padding:26px; }
.fs-card:hover .fs-media--illus img{ transform:scale(1.03); }
.fs-body{ display:flex; flex-direction:column; padding:52px 54px; }
.fs-body h3{
  font-family:'Poppins',sans-serif; font-size:clamp(28px,3.2vw,42px);
  font-weight:500; line-height:1.1; letter-spacing:-0.03em;
  color:var(--nc-offwhite); margin:36px 0 16px;
}
.fs-body p{
  font-size:16px; font-weight:300; line-height:1.65;
  color:var(--ink-soft); margin:0 0 30px; max-width:44ch;
}
.fs-card:hover .fs-go svg{ transform:translateX(4px); }

/* The stack now runs on mobile too. It used to be flattened here
   (position:static, and transform/opacity pinned with !important) which
   killed both the pin and the GSAP scrub — inline tweens cannot beat an
   !important declaration, so the recede animation had nothing to write to.

   Height is content-driven, not a fixed fraction of the viewport. A fixed
   card height has to fit the WORST case, and these seven cards do not have
   equal copy — cards 03 and 05 have three-line headlines, so a height tuned
   on the average clipped their stat row. Letting the body size itself and
   bounding only the image keeps every card intact. Sticky still works: the
   only requirement is that a card is shorter than the screen, which the
   4:3 media plus a two-line clamp guarantees down to 320x700. */
@media (max-width:980px){
  #services-alt{ padding:110px 0 120px; }
  .fs-head{ grid-template-columns:1fr; gap:28px; align-items:start; margin-bottom:56px; }
  .fs-lead{ max-width:none; }
  .fs-stack{ margin-bottom:90px; }
  .fs-stack-end{ display:block; height:26vh; }
  .fs-card{
    position:-webkit-sticky; position:sticky;
    top:calc(78px + var(--i) * 9px);
    padding-bottom:0; margin-bottom:13vh;
  }
  .fs-inner{ grid-template-columns:1fr; grid-template-rows:auto auto; height:auto; }
  /* .flip reverses the columns on desktop; in a single-column layout that
     would push the image below the copy on alternating cards only, which
     reads as an inconsistency rather than a rhythm. Keep media first. */
  .fs-inner.flip{ grid-template-columns:1fr; }
  .fs-inner.flip .fs-media{ order:0; }
  /* The source art is square (1254x1254). object-fit:contain sizes it by the
     SHORT axis, so in the old 16:10 panel the illustration rendered about
     160px wide inside a 348px card and read as an empty white block. 4:3 plus
     a smaller inset gives it the room back; the faint tint keeps the panel
     distinguishable from the white card behind it in the light theme.

     Height comes from a padding-ratio spacer, NOT from aspect-ratio.
     Reported symptom: fine on Android Chrome, "too small like an icon" on
     iOS Chrome — and iOS Chrome is WebKit, not Blink, because Apple requires
     every iOS browser to use the system engine. This panel is a grid item
     with min-height:0 whose only child is position:absolute, so it has no
     in-flow content at all and aspect-ratio was its single height source.
     Where WebKit declines to resolve that (grid item + competing max-height),
     the box collapses and the contained image shrinks to a thumbnail.
     A ::before spacer is real in-flow content and every engine sizes it the
     same way, so the panel can no longer collapse. min-height is a floor of
     last resort. */
  .fs-media{ aspect-ratio:auto; max-height:min(42vh, 320px); min-height:150px; }
  .fs-media::before{ content:''; display:block; padding-top:75%; }
  .fs-media--illus{ background:#FBF7FE; }
  .fs-media--illus img{ padding:12px; }
  .fs-body{ padding:22px 22px 24px; overflow:visible; }
  .fs-body h3{ margin:14px 0 10px; }
  /* Bounds the one variable that can run away on a narrow screen. */
  /* No clamp. The card height follows the copy, so a longer description
     (Neo Direct, Smart QR) simply makes a taller card rather than losing
     its last line. */
  .fs-body p{ margin-bottom:16px; }
  .fs-foot{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* Short viewports (iPhone SE and similar, and any phone in landscape) have
   little vertical room to spare once the pin offset is subtracted, so the
   offset and the image both give some back. Without this the tallest card
   was a few px taller than the screen and could never hold its pin. */
@media (max-width:980px) and (max-height:740px){
  /* Cards grew when the line-clamp came off, so the pin offset and the
     image both give more back — otherwise the tallest card is a few px
     taller than a 320x700 screen and can never hold its pin. */
  .fs-card{ top:calc(38px + var(--i) * 4px); }
  .fs-media{ max-height:min(28vh, 200px); }
  .fs-body{ padding:14px 16px 16px; }
  .fs-body h3{ font-size:20px; margin:8px 0 6px; }
  .fs-body p{ font-size:13.5px; line-height:1.45; }
}

/* Phone landscape. A card with an image, a headline, copy and a stat cannot
   be made shorter than ~440px and still say anything, so on a 375px-tall
   viewport there is no height at which it could hold a pin. Rather than ship
   a stack that visibly fails, this falls back to the flat scrolling layout.
   neo-main.js skips building the scrub at the same breakpoint. */
@media (max-width:980px) and (max-height:480px){
  .fs-card{ position:static; margin-bottom:20px; top:auto; }
  .fs-stack-end{ display:none; }
  .fs-media{ max-height:none; aspect-ratio:16/9; }
}

/* Small phones. Nothing here is about fitting a fixed box any more — it is
   just proportion, so the card does not eat the whole screen on a 320x700. */
@media (max-width:380px){
  .fs-media{ aspect-ratio:3/2; }
  .fs-body{ padding:18px 18px 20px; }
  .fs-body h3{ font-size:22px; margin:10px 0 8px; }
  .fs-body p{ font-size:14px; margin-bottom:12px; }
  .fs-icn{ width:40px; height:40px; }
  .fs-icn svg{ width:20px; height:20px; }
}

/* ── Services-page card anatomy on the homepage stack ─────────────────────
   The stacked cards now use the same parts as the Services rows — icon tile,
   SERVICE nn label, headline with accent tail, copy, stat — while keeping the
   sticky-stack geometry. The photo side alternates, as it does on Services. */
.fs-inner.flip{ grid-template-columns:1.08fr 0.92fr; }
.fs-inner.flip .fs-media{ order:2; }
.fs-icn{
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#652D86; color:#fff; margin-bottom:26px;
}
.fs-icn svg{ width:28px; height:28px; }
.fs-num{
  font-size:12px; font-weight:700; letter-spacing:0.2em;
  color:var(--nc-lilac,#C3A5DC); margin-bottom:12px;
}
.fs-body h3{ font-size:clamp(24px,2.3vw,34px); font-weight:500; letter-spacing:-0.02em; line-height:1.14; margin:0 0 14px; }
.fs-body h3 .accent{ color:var(--nc-magenta,#F64477); }
.fs-stat{ display:flex; align-items:baseline; gap:12px; margin-top:22px; }
.fs-stat .n{ font-size:30px; font-weight:600; letter-spacing:-0.03em; color:var(--nc-offwhite,#F2F0F3); }
.fs-stat .l{ font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }@media (max-width:980px){
  .fs-inner.flip{ grid-template-columns:1fr; }
  .fs-inner.flip .fs-media{ order:0; }
  .fs-icn{ width:52px; height:52px; margin-bottom:20px; }
  .fs-icn svg{ width:24px; height:24px; }}