:root {
  --ink: #f4f1ef;
  --muted: #aaa19c;
  --paper: #030303;
  --white: #fff;
  --green: #eab394;
  --deep: #080808;
  --line: #282321;
  --coral: #e99b7b;
  --blue: #d9b09a;
  --lilac: #151312;
  --peach: #151210;
  --font: 'Montserrat', Arial, sans-serif;
  --display: 'Montserrat', Arial, sans-serif;
}
body { background: #030303; color: #f4f1ef; }
.site-header { background: rgba(3,3,3,.94); border-color: #282321; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; display: block; }
.brand-name { border-left: 1px solid #d69a7a; padding-left: 6px; color: #f5efeb; font-size: 8px; letter-spacing: .12em; }
.language-switch { position: relative; z-index: 25; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; padding: 3px; border: 1px solid #392d27; border-radius: 999px; background: #0d0b0a; }
.language-option { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border: 0; border-radius: 999px; background: transparent; color: #d0c5be; font: 700 8px/1 Montserrat, Arial, sans-serif; cursor: pointer; }
.language-option[aria-pressed="true"] { background: #e5a07e; color: #160e0a; }
.language-option:focus-visible { outline: 2px solid #e5a07e; outline-offset: 2px; }
.africa-header-icon { display: block; flex: 0 0 auto; width: 36px; height: 36px; margin-left: 24px; object-fit: contain; opacity: .96; }
.main-nav { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; }
.registered-mark { font-size: .3em; vertical-align: super; line-height: 0; letter-spacing: 0; margin-left: .04em; }
.main-nav a { color: #c6bfba; }
.main-nav a:hover, .text-link:hover, .underlined-link:hover { color: #e9a582; }
.nav-cta { border-color: #665047; color: #f4efec; }
.nav-cta:hover, .button-dark, .button-dark:hover { background: #d79777; border-color: #d79777; color: #090807; }
.menu-toggle span { background: #f4f1ef; }
.hero { background: #030303; }
.hero h1, .intro h2, .experience h2, .services h2, .intel-header h2, .id-copy h2 { color: #faf7f5; }
.hero h1 em, .id-copy h2 em, .intel-header h2 em, .closing-content h2 em { color: #e5a482; }
.hero-lede, .intro-copy p, .experience-heading p, .id-copy > p, .services-aside p, .intel-header > p { color: #b8b0aa; }
.eyebrow, .section-kicker, .hero-proof p, .visual-caption { color: #bca69b; }
.eyebrow-dot { background: #e8a180; box-shadow: 0 0 0 4px rgba(232,161,128,.13); }
.hero-proof strong { color: #efe9e5; }
.hero-proof { gap: 12px; }
.africa-service-icons { display: flex; align-items: center; gap: 8px; }
.africa-service-icons img { display: block; width: 25px; height: 25px; object-fit: contain; opacity: .9; }
.africa-service-icons img + img { border-left: 1px solid #392d27; padding-left: 8px; }
.text-link { color: #e5d9d2; }
.hero-visual:before { background: radial-gradient(circle, #17100d 0, #0a0807 57%, #030303 74%); }
.orbit { border-color: rgba(222,159,127,.22); }
.orb-coral { background: #df9a7d; color: #23110b; }
.orb-blue { background: #b99e8d; color: #16100d; }
.orb-yellow { background: #e5c3a6; color: #27190f; }
.phone-device { position: relative; width: 267px; aspect-ratio: 409 / 814; z-index: 3; filter: drop-shadow(0 30px 65px rgba(216,151,119,.12)); }
.phone-screen { position: absolute; z-index: 1; inset: 3.9% 9% 3.7%; border-radius: 27px 27px 23px 23px; clip-path: inset(0 round 27px 27px 23px 23px); overflow: hidden; background: #000; display: grid; place-items: center; }
.demo-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.phone-frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.video-toggle { position: absolute; z-index: 4; right: calc(9% + 8px); bottom: calc(3.7% + 8px); width: 29px; height: 29px; border-radius: 50%; border: 1px solid rgba(242,209,192,.55); background: rgba(7,6,6,.82); color: #f3ddd1; font: 900 14px/1 Arial, sans-serif; letter-spacing: -.08em; padding: 0; cursor: pointer; opacity: .72; transition: opacity .2s, transform .2s; }
.video-toggle:hover, .video-toggle:focus-visible { opacity: 1; transform: scale(1.06); outline: 2px solid #e9a17e; outline-offset: 2px; }
.sound-toggle { position: absolute; z-index: 4; left: calc(9% + 8px); bottom: calc(3.7% + 8px); width: 29px; height: 29px; border-radius: 50%; border: 1px solid rgba(242,209,192,.55); background: rgba(7,6,6,.82); color: #f3ddd1; font-size: 15px; cursor: pointer; opacity: .82; transition: opacity .2s, transform .2s; }
.sound-toggle:hover, .sound-toggle:focus-visible { opacity: 1; transform: scale(1.06); outline: 2px solid #e9a17e; outline-offset: 2px; }
.sound-toggle[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}
.float-card { background: rgba(15,13,12,.94); color: #f4efeb; border: 1px solid #392d27; box-shadow: 0 15px 35px rgba(0,0,0,.55); }
.float-card small { color: #bd9d8b; }
.float-card img { width: 34px; height: 34px; object-fit: contain; }
.float-credit { left: 1%; top: clamp(24px, 4vw, 30px); }
.float-pay { right: 0; }
.caption-line { background: #dc9c79; }
.hero-bottom { color: #92857e; }
.hero-bottom i { color: #e09d7b; }
.intro, .id-section, .intelligence { background: #030303; color: #f4f1ef; }
.intro h2 span, .services h2 span { color: #e0a081; }
.underlined-link { border-color: #5a463c; color: #f0e9e4; }
.feature-card, .feature-dark, .feature-lilac, .feature-peach { background: #0b0a09; color: #f4efec; border: 1px solid #2b2522; }
.feature-card p { color: #b9b0aa; opacity: 1; }
.feature-icon { background: #17120f; color: #e6a181; border: 1px solid #47342b; }
.feature-dark .feature-icon { color: #f0b493; border-color: #8d604c; }
.feature-number { color: #b8a198; }
.feature-card > a { color: #e5a17e; }
.feature-asset { position: absolute; right: 14px; bottom: 4px; width: 100px; height: 92px; object-fit: contain; opacity: .94; filter: drop-shadow(0 0 16px rgba(228,158,125,.12)); animation: icon-breathe 4s ease-in-out infinite; }
.feature-card:nth-child(2) .feature-asset { width: 112px; height: 90px; }
.feature-card:nth-child(3) .feature-asset { width: 104px; height: 90px; }
.money-icon-set { height: 31px; display: flex; align-items: center; gap: 8px; }
.money-icon-set img { display: block; width: 29px; height: 29px; object-fit: contain; opacity: .94; filter: drop-shadow(0 0 10px rgba(228,158,125,.12)); }
.experience, .services { background: #080706; color: #f4f1ef; }
.journey-list, .journey-item { border-color: #332c28; }
.journey-item { color: #f4efec; }
.journey-item small, .journey-index { color: #a99c94; }
.journey-item.active i { color: #e5a17e; }
.journey-stage { background: #100d0b; border: 1px solid #332720; }
.stage-glow { border-color: rgba(230,165,130,.2); box-shadow: 0 0 0 28px rgba(230,165,130,.025),0 0 0 58px rgba(230,165,130,.02); }
.stage-label, .stage-art > small, .stage-art > p, .stage-footer { color: #c2a995; }
.stage-art > small { color: #e4a17f; }
.stage-art > b { color: #fff8f4; }
.stage-verify .scan-ring { width: 138px; height: 138px; }
.scan-face { width: 100px; height: 100px; object-fit: contain; border-radius: 0; background: transparent; overflow: visible; transform: scale(2); transform-origin: center; }
.stage-dots span { background: #5f4c41; }
.stage-dots span.active { background: #e99c79; }
.stage-footer span { color: #e99c79; }
.journey-stage .stage-card { inset: 58px 38px 84px; }
.pocket-services { position: absolute; z-index: 2; left: 50%; bottom: 48px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.pocket-services img { width: 23px; height: 23px; object-fit: contain; opacity: .9; }
.stage-profile { background: #15100d; color: #f1e8e2; border: 1px solid #51392b; }
.profile-head { color: #c99c81; }
.profile-avatar { background: #34231a; color: #f0b18e; }
.profile-bars i { background: #3c3029; }
.market-visual { background: #17110e; }
.market-visual span { background: #231a15; color: #e2a181; }
.market-visual span:nth-child(2) { background: #2a1b14; color: #e99b7b; }
.market-visual span:nth-child(3) { background: #171b20; color: #d0b4a3; }
.market-visual span:nth-child(4) { background: #201916; color: #e5c3ac; }
.market-visual img { width: 34px; height: 34px; justify-self: center; align-self: center; object-fit: contain; }
.market-visual { width: min(250px, 100%); height: 88px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px 14px; justify-items: center; align-items: center; transform: none; }
.id-halo { background: radial-gradient(circle, #19110d, #0b0908 67%, #030303); }
.id-halo:after, .id-halo:before { border-color: #3d2b22; }
.id-twin-art, .id-card { background: #0e0c0b; border: 1px solid #523a2d; }
.id-visual img.id-twin-art { position: relative; z-index: 1; display: block; width: auto; height: min(405px, 88%); max-width: 78%; object-fit: contain; border: 0; border-radius: 22px; background: transparent; filter: drop-shadow(0 18px 44px rgba(228,158,125,.13)); }
.id-twin-art:before { border-color: rgba(232,167,134,.25); box-shadow: 0 0 0 17px rgba(232,167,134,.03); }
.twin-label small, .twin-label span, .id-card-top, .id-card-bottom { color: #e4a17f; }
.data-bubble { background: #14100e; border: 1px solid #3e2e25; color: #bba69a; }
.data-bubble b { color: #f0d7c7; }
.id-visual-note { color: #ad9a8e; }
.id-visual-note i, .services-aside-mark { color: #e99c79; }
.trust-points, .trust-points > div { border-color: #302925; }
.trust-points b { color: #f4efec; }
.trust-points small, .trust-points > div > span { color: #a99d95; }
.services-aside p { color: #bdb3ac; }
.service-tile { background: #100e0c; border: 1px solid #302720; }
.tile-bank, .tile-health, .tile-mobility, .tile-shop, .tile-public { background: #100e0c; }
.tile-top { color: #aa9a90; }
.tile-top b { color: #e4a07e; }
.service-tile h3 { color: #f5efeb; }
.service-tile p { color: #afa59e; }
.service-grid .tile-art { filter: saturate(.68) brightness(.82); }
.service-tile .tile-art { display: grid; place-items: center; }
.service-tile .tile-art { height: 104px; }
.service-domain-icon { width: 84px; height: 84px; object-fit: contain; opacity: .94; filter: drop-shadow(0 0 12px rgba(227,158,126,.08)); }
.services-foot { border-color: #39302b; color: #9c8e85; }
.services-foot b { color: #e7a17e; }
.service-platform-icon { width: 54px; height: 54px; object-fit: contain; opacity: .96; animation: icon-breathe 4s ease-in-out infinite; }
.service-carousel { margin-top: 42px; }
.carousel-toolbar, .carousel-footer { display: flex; align-items: center; justify-content: space-between; }
.carousel-toolbar { margin-bottom: 15px; color: #9c8e85; font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.carousel-controls { display: flex; gap: 8px; }
.carousel-controls button { width: 34px; height: 34px; border: 1px solid #49372d; border-radius: 50%; background: #100d0b; color: #f3e8e1; font-size: 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.carousel-controls button:hover:not(:disabled), .carousel-controls button:focus-visible { background: #e5a07e; border-color: #e5a07e; color: #130b08; outline: none; }
.carousel-controls button:disabled { opacity: .35; cursor: default; }
.service-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-inline: contain; scrollbar-width: none; }
.service-viewport::-webkit-scrollbar { display: none; }
.service-grid { display: flex; gap: 13px; margin-top: 0; }
.service-tile, .service-tile:nth-child(4), .service-tile:nth-child(5) { flex: 0 0 calc((100% - 26px) / 3); grid-column: auto; scroll-snap-align: start; }
.carousel-footer { padding-top: 17px; }
.carousel-dots { display: flex; align-items: center; gap: 6px; }
.carousel-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 8px; background: #54443a; cursor: pointer; transition: width .2s, background .2s; }
.carousel-dot[aria-current="true"] { width: 20px; background: #e5a07e; }
.carousel-dot:focus-visible { outline: 2px solid #e5a07e; outline-offset: 3px; }
.carousel-position { color: #a99a90; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.stage-art-illustration { display: flex; align-items: center; justify-content: center; width: 100%; }
.ai-grid article { background: #0d0b0a; border-color: #302722; }
.ai-no, .ai-grid p, .ai-note { color: #a99c93; }
.ai-grid h3 { color: #f7f0eb; }
.ai-arrow, .ai-note span { color: #e9a17e; }
.fraud-visual i, .onboard-visual div { background: #1f1713; color: #e6a07c; }
.fraud-visual span { border-color: #443229; }
.risk-ring { border-color: #aa806a; color: #f1c0a2; }
.risk-ring:before, .risk-ring:after { border-color: #49362c; }
.closing-cta { background: #0c0908; border: 1px solid #3a2b23; }
.closing-content .section-kicker { color: #c9a895; }
.closing-content h2 em { color: #e6a280; }
.closing-content p { color: #c2b2a8; }
.button-light { background: #e5a07e; color: #1b100b; }
.button-light:hover { background: #f1b896; }
.closing-mark { color: rgba(232,164,129,.25); }
.closing-orbit { border-color: rgba(232,164,129,.2); }
.closing-spark { color: #e7a07e; }
.site-footer { color: #a99d94; }
.site-footer .brand-name { color: #f5efeb; }
.site-footer .brand-logo { width: 31px; height: 31px; }
@media (min-width: 681px) and (max-width: 1100px) {
  .site-header { gap: 14px; }
  .main-nav { position: static; flex: 1 1 auto; justify-content: center; gap: clamp(10px, 1.8vw, 18px); margin: 0; transform: none; }
  .main-nav a { font-size: clamp(9px, 1vw, 11px); }
  .language-switch { margin-left: 0; }
  .africa-header-icon { margin-left: 0; }
}
@media (min-width: 681px) and (max-width: 900px) {
  .hero-copy { position: relative; z-index: 5; }
  .hero-visual { z-index: 0; }
  .hero-visual:before { opacity: .28; }
  .hero h1 { font-size: clamp(50px, 6.2vw, 58px); }
}
@keyframes icon-breathe { 0%,100% { transform: translateY(0); filter: drop-shadow(0 0 6px rgba(228,158,125,.12)); } 50% { transform: translateY(-3px); filter: drop-shadow(0 0 16px rgba(228,158,125,.28)); } }
@media (max-width: 680px) {
  .main-nav { left: 0; right: 0; transform: none; background: #090807; border-color: #302722; }
  .hero-visual { height: 580px; }
  .brand-logo { width: 33px; height: 33px; }
  .language-switch { margin-left: auto; gap: 1px; padding: 2px; }
  .language-option { gap: 2px; padding: 4px 5px; font-size: 7px; }
  .africa-header-icon { width: 30px; height: 30px; margin-left: 8px; order: 2; }
  .brand-name { font-size: 7px; }
  .phone-device { width: min(270px, 76vw); }
  .video-toggle { right: calc(9% + 8px); bottom: calc(3.7% + 8px); }
  .sound-toggle { left: calc(9% + 8px); bottom: calc(3.7% + 8px); }
  .float-credit { left: 4%; top: clamp(24px, 6vw, 30px); }
  .float-pay { right: -3px; bottom: 80px; }
  .feature-asset { width: 83px; height: 80px; }
  .hero-proof { align-items: flex-start; }
  .africa-service-icons { gap: 4px; }
  .africa-service-icons img { width: 20px; height: 22px; }
  .africa-service-icons img + img { padding-left: 4px; }
  .journey-stage { height: 338px; }
  .journey-stage .stage-card { inset: 50px 20px 82px; }
  .pocket-services { bottom: 48px; gap: 8px; }
  .pocket-services img { width: 21px; height: 21px; }
  .service-domain-icon { width: 70px; height: 70px; }
  .service-tile .tile-art { height: 86px; }
  .service-carousel { margin-top: 30px; }
  .service-grid { gap: 9px; }
  .service-tile, .service-tile:nth-child(4), .service-tile:nth-child(5) { flex-basis: 82%; min-height: 248px; }
  .carousel-controls button { width: 31px; height: 31px; }
  .id-visual img.id-twin-art { height: min(340px, 88%); max-width: 72%; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .feature-asset, .service-platform-icon { animation: none; } }

/* Content-led layouts: allow translated copy to wrap without clipping. */
.feature-card {
  height: auto;
  min-height: 265px;
  padding-bottom: 108px;
}
.feature-card h3,
.feature-card p,
.service-tile h3,
.service-tile p,
.ai-grid h3,
.ai-grid p {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.service-tile {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.service-tile .tile-art { flex: 0 0 auto; }
.service-tile p { flex: 1 0 auto; }
.ai-grid article { height: auto; padding-bottom: 46px; }
.closing-cta { height: auto; min-height: 390px; }
.closing-content { min-width: 0; max-width: 58%; }
.closing-content h2 { overflow-wrap: anywhere; hyphens: auto; }
.closing-content p { line-height: 1.65; max-width: 38em; }
.services-foot { flex-wrap: wrap; gap: 12px 24px; line-height: 1.6; }

@media (max-width: 680px) {
  .feature-card { min-height: 229px; padding-bottom: 104px; }
  .feature-card h3 { max-width: calc(100% - 48px); }
  .feature-card p { max-width: min(100%, 34em); }
  .service-grid { align-items: stretch; }
  .service-tile,
  .service-tile:nth-child(4),
  .service-tile:nth-child(5) {
    min-height: 0;
    height: auto;
    padding: 14px;
  }
  .service-tile .tile-art { height: 86px; }
  .service-tile h3 { line-height: 1.25; }
  .service-tile p { font-size: 9px; line-height: 1.55; }
  .services-foot { align-items: flex-start; font-size: clamp(6px, 1.8vw, 8px); }
  .services-foot > span { max-width: 100%; }
  .ai-grid article { min-height: 0; padding: 13px 13px 42px; }
  .ai-grid h3 { max-width: none; line-height: 1.3; }
  .ai-grid p { font-size: 9px; line-height: 1.55; }
  .closing-cta {
    width: calc(100% - 28px);
    height: auto;
    min-height: 0;
    padding: clamp(25px, 7vw, 34px);
    margin-bottom: 38px;
    align-items: center;
  }
  .closing-content { width: 100%; max-width: 100%; padding-top: 0; }
  .closing-content h2 {
    font-size: clamp(32px, 9.6vw, 40px);
    line-height: 1.08;
    margin: 14px 0;
    max-width: 100%;
  }
  .closing-content p { font-size: 11px; line-height: 1.65; max-width: 34em; }
  .closing-content .button { max-width: 100%; white-space: normal; }
  .closing-mark { font-size: clamp(84px, 25vw, 112px); right: 9%; top: auto; bottom: 2%; }
  .closing-orbit { right: -53%; top: 47%; width: 360px; }
  .c-orbit-two { right: -55%; top: 38%; width: 350px; }
  .closing-spark { right: 8%; top: 39%; }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .site-footer > span:nth-child(2),
  .site-footer > span:nth-child(3) { grid-column: 1; grid-row: auto; text-align: left; font-size: 8px; }
}

@media (max-width: 380px) {
  .closing-cta { padding: 24px; }
  .closing-content h2 { font-size: clamp(30px, 9vw, 35px); }
  .service-tile, .service-tile:nth-child(4), .service-tile:nth-child(5) { flex-basis: 88%; }
  .carousel-toolbar { font-size: 6px; letter-spacing: .1em; }
}

/* Keep the stage caption and step navigation on one clear baseline. */
.journey-visual { min-width: 0; }
.journey-visual .journey-stage .stage-card { inset: 58px 38px 58px; }
.journey-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 0;
  color: #c2a995;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-align: center;
}
.journey-tagline span { flex: 0 0 auto; color: #e99c79; }
@media (max-width: 680px) {
  .journey-visual .journey-stage .stage-card { inset: 46px 18px 54px; }
  .journey-visual .journey-tagline {
    max-width: 100%;
    margin-top: 10px;
    font-size: clamp(6px, 1.75vw, 7px);
    letter-spacing: .09em;
  }
}

@media (max-width: 680px) {
  .journey-stage .stage-art.stage-profile-layout {
    display: grid;
    grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: center;
    justify-items: stretch;
    column-gap: 12px;
    row-gap: 5px;
    text-align: left;
  }
  .stage-profile-layout > .stage-art-illustration.profile {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 100%;
    align-self: center;
  }
  .stage-profile-layout .stage-profile {
    width: 100%;
    max-width: 128px;
    height: 132px;
    padding: 10px;
  }
  .stage-profile-layout .profile-head { font-size: 6px; letter-spacing: .06em; }
  .stage-profile-layout .profile-avatar {
    width: 38px;
    height: 38px;
    margin: 11px auto 7px;
  }
  .stage-profile-layout .profile-bars i { height: 4px; margin: 5px auto; }
  .stage-profile-layout > small {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 6px;
    line-height: 1.4;
  }
  .stage-profile-layout > b {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0;
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.12;
  }
.stage-profile-layout > p {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin: 0;
    font-size: clamp(8px, 2.2vw, 9px);
    line-height: 1.45;
  }
}

/* Center the divider vertically in each ME® / MOBILE ECOSYSTEMS lockup. */
.brand-name {
  position: relative;
  border-left: 0;
  padding-left: 12px;
  line-height: 1.12;
}
.brand-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 28px;
  transform: translateY(-50%);
  background: #d69a7a;
}
.site-footer .brand-name::before { height: 23px; }
@media (max-width: 680px) {
  .brand-name::before { height: 23px; }
}
.platform-cta { gap: 12px; letter-spacing: 0; word-spacing: normal; }
.hero-id-twin { white-space: nowrap; }
.closing-id-term { white-space: nowrap; }
