/* ───────────────────────── Fonts ───────────────────────── */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: lemon; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/lemon-400.woff2) format("woff2"); }
@font-face { font-family: lemon; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/lemon-600.woff2) format("woff2"); }
@font-face { font-family: lemon; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/lemon-700.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/poppins-300.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/poppins-800.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 900; font-display: swap; src: url(assets/fonts/poppins-900.woff2) format("woff2"); }
@font-face { font-family: "Inter Fallback"; src: local(Arial); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }
@font-face { font-family: "lemon Fallback"; src: local(Arial); ascent-override: 165.52%; descent-override: 30.45%; line-gap-override: 0%; size-adjust: 48.94%; }
@font-face { font-family: "Poppins Fallback"; src: local(Arial); ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%; }

/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "lemon", "lemon Fallback", "Bebas Neue", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-accent: "Poppins", "Poppins Fallback", "Century Gothic", system-ui, sans-serif;

  --hero-deep: #2624df;
  --hero-ring-1: #2f2ddf;
  --hero-ring-2: #3331df;
  --hero-ring-3: #3938df;
  --brand: #3430e9;
  --brand-hover: #2825be;
  --lime: #d3feb6;
  --blush: #ffe8f1;
  --lilac: #ead3fc;
  --mint: #e2f7d4;

  --page: #fff;
  --subtle: #fafafa;
  --faint: #f8f8f8;
  --sunken: #f3f3f3;
  --contrast: #ebebeb;
  --inverse: #121212;

  --fg-primary: #1e1e1e;
  --fg-body: #353535;
  --fg-body-muted: #35353599;
  --fg-body-soft: #353535b3;
  --fg-body-strong: #353535cc;
  --fg-caption-soft: #5c5c5ccc;
  --fg-muted: #838383;

  --nav-fg: #353535;
  --nav-fg-hover: #1e1e1e;
  --nav-border: #efefef;

  --shadow-dropdown: 0 12px 32px -8px #0000001f;
  --shadow-hover-lift: 0 8px 20px -6px #0000001f;
  --shadow-card: 4px 4px 0 0 #0000000a;

  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-5xl: 32px;
  --radius-6xl: 36px;
  --radius-pill: 100px;
  --radius-bubble: 40px 30px 40px 0;

  --ease-in: cubic-bezier(.64, 0, .78, 0);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .64, 1);
  --motion-instant: 80ms;
  --motion-fast: .16s;
  --motion-base: .24s;
  --motion-slow: .36s;
  --motion-reveal: .52s;
  --motion-deck: .64s;
  --motion-stagger: 60ms;

  --gutter: 20px;
  --nav-h: 85px;
  --height-nav: 88px;

  /* type scale */
  --t-xs: .875rem;
  --t-sm: 1rem;
  --t-base: 1.125rem;
  --t-md: 1.25rem;
  --t-lg: 1.5rem;
  --t-xl: 1.75rem;
  --t-2xl: clamp(1.5rem, 1.3571rem + .7143vw, 2rem);
  --t-5xl: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem);
  --t-display-hero: clamp(1.875rem, .2143rem + 8.3036vw, 7.6875rem);
  --t-display-1: clamp(2.375rem, .5536rem + 9.1071vw, 8.75rem);
  --t-display-6: clamp(2rem, 1.4286rem + 2.8571vw, 4rem);
  --t-watermark: clamp(3rem, -.6071rem + 18.0357vw, 15.625rem);
}
@media (min-width: 30rem) { :root { --gutter: 24px; --nav-h: 89px; } }
@media (min-width: 40rem) { :root { --gutter: 32px; } }
@media (min-width: 48rem) { :root { --gutter: 40px; } }
@media (min-width: 64rem) { :root { --gutter: 48px; } }
@media (min-width: 80rem) { :root { --gutter: 80px; } }
@media not all and (min-width: 40rem) {
  :root {
    --t-base: 1rem;
    --t-md: 1.125rem;
    --t-lg: 1.25rem;
    --t-xl: 1.5rem;
    --t-display-1: clamp(3.1667rem, 2.1369rem + 5.1487vw, 4.1964rem);
    --radius-lg: 4px;
    --radius-xl: 8px;
    --radius-2xl: 12px;
    --radius-5xl: 24px;
    --radius-6xl: 28px;
  }
}
@media not all and (min-width: 64rem) {
  :root {
    --fg-body-muted: #5c5c5c;
    --fg-caption-soft: #5c5c5c;
    --fg-muted: #747474;
  }
}

/* ───────────────────────── Base ───────────────────────── */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: var(--height-nav);
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}
body {
  background-color: var(--page);
  color: var(--fg-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; font-weight: 600; }
ol, ul, menu { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; appearance: button; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-surface="inverse"] :focus-visible { outline-color: #fff; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; }
.skip:focus-visible { position: fixed; top: 16px; left: 16px; z-index: 50; display: inline-flex; width: auto; height: 44px; margin: 0; padding: 0 20px; align-items: center; clip-path: none; overflow: visible; border-radius: var(--radius-pill); background: #111; color: #fff; font-size: var(--t-sm); line-height: 1.21; letter-spacing: -.02em; font-weight: 600; }

.container { width: min(var(--container-w, 75rem), 100% - 2 * var(--gutter)); min-width: 0; margin-inline: auto; }

.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0s), transform var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0s);
}
.reveal[data-in="true"] { opacity: 1; transform: none; }

.section { width: 100%; padding-block: 56px; }
@media (min-width: 30rem) { .section { padding-block: 64px; } }
@media (min-width: 40rem) { .section { padding-block: 72px; } }
@media (min-width: 48rem) { .section { padding-block: 80px; } }

/* display headings: the one round "O" set in the accent face */
.display { font-family: var(--font-display); text-transform: uppercase; }
.display-1 { font-size: var(--t-display-1); line-height: .96; letter-spacing: -.01em; font-weight: 600; }
.accent-o { font-family: var(--font-accent); font-weight: 500; }

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; height: 48px; padding-inline: 20px;
  border-radius: var(--radius-pill);
  font-size: var(--t-sm); line-height: 1.21; letter-spacing: -.02em; font-weight: 600;
  user-select: none; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-spring), color var(--motion-fast) var(--ease-spring), transform var(--motion-fast) var(--ease-spring);
}
.btn:active { transform: translateY(1px); transition-duration: var(--motion-instant); transition-timing-function: var(--ease-out); }
.btn--chat { background: #1a1a1a; color: #fff; }
.btn--chat:focus-visible { background: #2f2f2f; }
.btn--chat:active { background: #000; }
.btn--primary { background: #111; color: #fff; }
.btn--primary:focus-visible { background: #2f2f2f; }
.btn--primary:active { background: #000; }
.btn--soft { height: 56px; background: #eaeaff; color: var(--brand); }
.btn--soft:focus-visible { background: #e4e4f2; }
.btn--soft:active { background: #acabeb; color: #1f1c9a; }
@media (hover: hover) and (pointer: fine) {
  .btn--chat:hover, .btn--primary:hover { background: #2f2f2f; }
  .btn--soft:hover { background: #e4e4f2; }
}

/* ───────────────────────── Nav ───────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--nav-border);
  background: #fff;
  box-shadow: var(--shadow-dropdown);
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.nav.is-overlay { border-color: transparent; background: transparent; box-shadow: none; }
.nav.is-overlay .nav_primary { --nav-fg: #fff; --nav-fg-hover: #fffc; }
.nav_bar { --container-w: 852px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.nav_left { display: flex; align-items: flex-end; gap: 32px; }
.nav_logo { display: inline-flex; align-items: center; margin-block: -12px; padding-block: 12px; }
.nav_links { display: none; align-items: center; gap: 32px; }
@media (min-width: 64rem) { .nav_links { display: flex; } }
.nav_links > li { position: relative; }
.nav_link {
  display: inline-flex; align-items: center; gap: 2px;
  margin-block: -12px; padding: 12px 0;
  font-size: var(--t-sm); line-height: 1.21; letter-spacing: -.02em; font-weight: 500;
  color: var(--nav-fg); cursor: pointer; text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}
.nav_link:focus-visible { color: var(--nav-fg-hover); }
@media (hover: hover) and (pointer: fine) { .nav_link:hover { color: var(--nav-fg-hover); } }
.nav_link .chev { transition: transform var(--motion-base) var(--ease-in-out); }
.nav_link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dd {
  position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 12px;
  width: 280px; padding: 8px;
  border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow-dropdown);
  pointer-events: none; opacity: 0; transform: translateY(-6px);
  transition: opacity var(--motion-fast) var(--ease-in), transform var(--motion-fast) var(--ease-in);
}
.dd--wide { width: 349px; }
.dd.is-open { pointer-events: auto; opacity: 1; transform: none; transition-duration: var(--motion-base); transition-timing-function: var(--ease-out); }
.dd ul { display: flex; flex-direction: column; gap: 4px; }
.dd--wide ul { gap: 8px; }
.dd_item {
  display: flex; align-items: center; gap: 12px; padding: 8px;
  border-radius: var(--radius-xl); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), scale var(--motion-fast) var(--ease-out);
}
.dd--wide .dd_item { padding: 12px; }
.dd_item:focus-visible { background: #f9f9f9; }
.dd_item:active { scale: .98; }
.dd_tile { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #f2f2f2; border-radius: var(--radius-lg); background: #fff; color: #868686; }
.dd_tile svg { grid-area: 1 / 1; }
.dd_tile svg:first-child { transition: opacity var(--motion-fast) var(--ease-out); }
.dd_tile svg:last-child:not(:first-child) { opacity: 0; scale: .85; transition: opacity var(--motion-fast) var(--ease-out), scale var(--motion-base) var(--ease-out); }
.dd_item:focus-visible .dd_tile svg:first-child:not(:last-child) { opacity: 0; }
.dd_item:focus-visible .dd_tile svg:last-child { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .dd_item:hover { background: #f9f9f9; }
  .dd_item:hover .dd_tile svg:first-child:not(:last-child) { opacity: 0; }
  .dd_item:hover .dd_tile svg:last-child { opacity: 1; scale: 1; }
}
.dd_text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd_label { font-size: var(--t-sm); line-height: 1.21; letter-spacing: -.02em; font-weight: 500; color: #353535; }
.dd_desc { font-size: var(--t-xs); line-height: 1.3; letter-spacing: -.02em; font-weight: 400; color: #35353599; }
.dd--wide .dd_label { line-height: 19px; }
.dd--wide .dd_desc { line-height: 17px; }

.nav_right { display: flex; align-items: center; gap: 8px; }
.nav_cta { display: none; }
.nav_cta--icon { display: inline-flex; width: 44px; height: 44px; padding-inline: 0; flex-shrink: 0; font-size: var(--t-xs); }
@media (min-width: 30rem) { .nav_cta { display: inline-flex; } .nav_cta--icon { display: none; } }
.nav_burger {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--radius-2xl);
  color: var(--nav-fg); cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}
@media (min-width: 64rem) { .nav_burger { display: none; } }
.nav_burger span { position: relative; display: block; width: 20px; height: 16px; }
.nav_burger i { position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: var(--radius-pill); background: currentColor; transition: transform var(--motion-base) var(--ease-in-out), opacity var(--motion-base) var(--ease-in-out); }
.nav_burger i:nth-child(1) { top: 0; }
.nav_burger i:nth-child(2) { top: 7px; }
.nav_burger i:nth-child(3) { top: 14px; }
.nav_burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav_burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav_burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sheet { position: fixed; inset: var(--nav-h) 0 0; z-index: 40; overflow: hidden; pointer-events: none; }
@media (min-width: 64rem) { .sheet { display: none; } }
.sheet.is-open { pointer-events: auto; }
.sheet_scrim { position: absolute; inset: 0; background: #00000080; opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
.sheet.is-open .sheet_scrim { opacity: 1; }
.sheet_panel {
  position: absolute; inset: 0 0 auto; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 24px; background: #fff;
  transform: translateY(-100%);
  transition: transform var(--motion-base) var(--ease-in);
}
.sheet.is-open .sheet_panel { transform: none; transition-timing-function: var(--ease-out); }
.sheet_cta { padding: 24px 24px 8px; }
.sheet_cta .btn { width: 100%; }
@media (min-width: 30rem) { .sheet_cta { display: none; } }
.sheet_list { display: flex; flex-direction: column; padding-block: 8px; }
.sheet_row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding-inline: 24px;
  font-size: var(--t-md); line-height: 1.3; letter-spacing: -.03em; font-weight: 500;
  color: #353535; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.sheet_row:focus-visible { background: #f1f1ff; }
.sheet_row .chev { transition: transform var(--motion-base) var(--ease-in-out); }
.sheet_row[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sheet_sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-base) var(--ease-in-out); }
.sheet_sub.is-open { grid-template-rows: 1fr; }
.sheet_sub > div { min-height: 0; overflow: hidden; }
.sheet_sub ul { display: flex; flex-direction: column; opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
.sheet_sub.is-open ul { opacity: 1; transition-duration: var(--motion-base); }
.sheet_sub a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 24px 8px 48px; text-decoration: none; transition: background-color var(--motion-fast) var(--ease-out); }
.sheet_sub a:focus-visible { background: #f1f1ff; }
.sheet_ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; }
.sheet_sub .dd_desc { display: none; }
@media (min-width: 30rem) { .sheet_sub .dd_desc { display: block; } }
@media (hover: hover) and (pointer: fine) {
  .nav_burger:hover { color: var(--nav-fg-hover); }
  .sheet_row:hover, .sheet_sub a:hover { background: #f1f1ff; }
}

/* ───────────────────────── Hero ───────────────────────── */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  width: 100%; min-height: 100svh; margin-top: calc(var(--nav-h) * -1);
  overflow: clip; background: var(--hero-deep);
}
.hero_layer { position: absolute; inset: 0; pointer-events: none; }
.hero_ring { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 9999px; }
.hero_ring--1 { top: -376px; width: 1346px; height: 1346px; background: var(--hero-ring-1); box-shadow: 0 4px 120px var(--hero-deep); }
.hero_ring--2 { top: -233.5px; width: 1061px; height: 1061px; background: var(--hero-ring-2); box-shadow: 0 4px 56px var(--hero-deep); }
.hero_ring--3 { top: -37px; width: 668px; height: 668px; background: var(--hero-ring-3); box-shadow: 0 4px 72px var(--hero-deep); }
.hero_skyline {
  position: absolute; inset: auto 0 0; height: 752px;
  background: url(assets/img/hero-buildings-skyline.svg) no-repeat bottom left / 185% auto;
}
@media (min-width: 64rem) { .hero_skyline { background-position: bottom center; background-size: 100% auto; } }

.float { position: absolute; display: none; align-items: center; justify-content: center; animation-duration: 3.1s; animation-iteration-count: infinite; }
@media (min-width: 80rem) { .float { display: flex; } }
.float > span { display: block; background-size: 100% 100%; background-repeat: no-repeat; }
.float--kenya { top: 194px; right: calc((100% - min(100%, 90rem)) / 2 + 36px); width: 166px; height: 155px; }
.float--kenya > span { width: 166px; height: 155px; background-image: url(assets/img/hero-coin-kenya-tilted.svg); }
.float--ghana { top: 565px; left: calc((100% - min(100%, 90rem)) / 2 + 71px); width: 145px; height: 158px; }
.float--ghana > span { width: 145px; height: 158px; background-image: url(assets/img/hero-coin-ghana-tilted.svg); }
.float--notes-l { top: 147px; left: calc((100% - min(100%, 90rem)) / 2 + 50px); width: 93px; height: 124px; }
.float--notes-l > span { width: 93px; height: 124px; background-image: url(assets/img/hero-notes-left.svg); }
.float--notes-r { top: 715px; right: calc((100% - min(100%, 90rem)) / 2 - 65.567px); width: 232.567px; height: 214.801px; }
.float--notes-r > span { flex: none; transform: rotate(51.693deg); }
.float--notes-r > span > span { display: block; width: 105.357px; height: 213.151px; background: url(assets/img/hero-notes-right.svg) no-repeat 0 0 / 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .float--kenya { animation-name: float-kenya; }
  .float--ghana { animation-name: float-ghana; }
  .float--notes-l { animation-name: float-notes-l; }
  .float--notes-r { animation-name: float-notes-r; }
}
@keyframes float-kenya {
  0% { animation-timing-function: linear; transform: translateY(0) rotate(0); }
  9.68% { animation-timing-function: ease-in-out; transform: translateY(0) rotate(0); }
  54.84% { animation-timing-function: ease-in-out; transform: translateY(-10px) rotate(2deg); }
  to { transform: translateY(0) rotate(0); }
}
@keyframes float-ghana {
  0% { animation-timing-function: ease-in-out; transform: translateY(0) rotate(0); }
  38.71% { animation-timing-function: ease-in-out; transform: translateY(-12px) rotate(-3deg); }
  77.42% { animation-timing-function: linear; transform: translateY(0) rotate(0); }
  to { transform: translateY(0) rotate(0); }
}
@keyframes float-notes-l {
  0% { animation-timing-function: linear; transform: translateY(0) rotate(0); }
  19.35% { animation-timing-function: ease-in-out; transform: translateY(0) rotate(0); }
  54.84% { animation-timing-function: ease-in-out; transform: translateY(-14px) rotate(-4deg); }
  90.32% { animation-timing-function: linear; transform: translateY(0) rotate(0); }
  to { transform: translateY(0) rotate(0); }
}
@keyframes float-notes-r {
  0% { animation-timing-function: linear; transform: translateY(0) rotate(0); }
  4.84% { animation-timing-function: ease-in-out; transform: translateY(0) rotate(0); }
  46.77% { animation-timing-function: ease-in-out; transform: translateY(-11px) rotate(3deg); }
  88.71% { animation-timing-function: linear; transform: translateY(0) rotate(0); }
  to { transform: translateY(0) rotate(0); }
}

.hero_body { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(var(--nav-h) + 4rem) 24px 56px; }
@media (min-width: 30rem) { .hero_body { padding-bottom: 64px; } }
@media (min-width: 40rem) { .hero_body { padding-bottom: 72px; } }
@media (min-width: 48rem) { .hero_body { padding-bottom: 80px; } }
@media (min-width: 64rem) { .hero_body { padding-bottom: 96px; } }
@media (min-width: 90rem) { .hero_body { padding-bottom: 0; } }
.hero_copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 709px; }
.hero_title { width: 100%; font-family: var(--font-display); text-align: center; text-transform: uppercase; }
.hero_title span span { display: block; width: 100%; }
.hero_title .salt { font-feature-settings: "salt" 1; }
.hero_title .salt-ss01 { font-feature-settings: "salt" 1, "ss01" 1; }
.hero_title--lg { display: none; flex-direction: column; align-items: center; gap: 4px; width: 100%; color: #fff; font-size: var(--t-display-hero); line-height: .82; letter-spacing: -.01em; font-weight: 700; }
.hero_title--sm { display: flex; flex-direction: column; align-items: center; width: 100%; color: #fff; font-size: min(100px, 25.641vw); line-height: .8; font-weight: 700; }
.hero_title--sm .lime { color: var(--lime); }
@media (min-width: 64rem) { .hero_title--lg { display: flex; } .hero_title--sm { display: none; } }
.hero_sub { max-width: 584px; margin-inline: auto; color: #fff; text-align: center; font-size: var(--t-md); line-height: 1.4; letter-spacing: -.02em; font-weight: 500; }
.hero_cta { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
.hero_cta .btn { width: 182px; }

.qr {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 120px; padding: 12px 0 14px;
  border-radius: var(--radius-xl); background: var(--contrast);
  transition: translate var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.qr:focus-visible { translate: 0 -4px; box-shadow: var(--shadow-hover-lift); }
@media (hover: hover) and (pointer: fine) { .qr:hover { translate: 0 -4px; box-shadow: var(--shadow-hover-lift); } }
.qr_code { position: relative; width: 102px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); }
.qr_code img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr_label { width: 92px; text-align: center; color: var(--fg-caption-soft); font-size: var(--t-xs); line-height: 1.21; letter-spacing: -.01em; font-weight: 600; }
.qr--inline { margin-top: 24px; }
.qr--side { display: none; position: absolute; top: calc(50vh - 87px); right: calc((100% - min(100%, 90rem)) / 2 + 120px); }
@media (min-width: 64rem) { .qr--inline { display: none; } .qr--side { display: flex; } }

/* ───────────────────────── Phone mock ───────────────────────── */
.phone { position: relative; max-width: 100%; }
.phone_frame { position: relative; width: 100%; aspect-ratio: 1002 / 2048; }
.phone_frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 9px 7px #0000001a); }
.phone_screen { position: absolute; left: 4.99%; top: 1.86%; width: 90.6%; height: 96.1%; overflow: hidden; border-radius: 12.59% / 5.807%; pointer-events: none; }
.phone_screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ───────────────────────── Features ───────────────────────── */
.features { overflow: clip; }
.features_inner { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.features_title { max-width: 661px; color: var(--fg-primary); font-size: var(--t-5xl); line-height: 1.13; letter-spacing: -.03em; font-weight: 500; }
.features_desk { display: none; width: 100%; }
@media (min-width: 64rem) { .features_desk { display: flex; flex-direction: row; justify-content: space-between; } }
.wheel_col { position: relative; width: 52.33%; }
.wheel_fade { position: absolute; inset-inline: 0; z-index: 10; pointer-events: none; }
.wheel_fade--top { top: 0; height: 274px; background: linear-gradient(to bottom, #fff, #fff0); }
.wheel_fade--bottom { bottom: 0; height: 262px; background: linear-gradient(to top, #fff, #fff0); }
.wheel { position: relative; height: 581px; overflow: clip; }
.wheel_track { display: flex; flex-direction: column; gap: 40px; }
.wheel_track.is-animated { transition: translate var(--motion-slow) var(--ease-in-out); }
.wheel_list { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 40px; padding-left: 68px; }
.wheel_list > li { position: relative; }
.wheel_row { opacity: .4; transition: opacity var(--motion-base) var(--ease-out); }
.wheel_row:has(:focus-visible) { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .wheel_row:hover { opacity: .7; } }
.wheel_row.is-active { opacity: 1; }
.wheel_row h3 { color: var(--fg-primary); font-size: var(--t-xl); line-height: 1.13; letter-spacing: -.03em; font-weight: 600; }
.wheel_row button { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; }
.wheel_row button::before { content: ""; position: absolute; inset: -6px 0; }
.wheel_panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--motion-slow) var(--ease-in-out), visibility var(--motion-slow) var(--ease-in-out); }
.wheel_row.is-active .wheel_panel { grid-template-rows: 1fr; visibility: visible; }
.wheel_panel > div { overflow: hidden; }
.wheel_panel p { padding-top: 16px; color: var(--fg-muted); font-size: var(--t-md); line-height: 1.28; letter-spacing: -.03em; font-weight: 400; opacity: 0; transition: opacity var(--motion-fast) var(--ease-in); }
.wheel_row.is-active .wheel_panel p { opacity: 1; transition-delay: 40ms; transition-timing-function: var(--ease-out); }
.wheel_marker { position: absolute; top: 50%; left: 0; z-index: 10; width: 22px; height: 23px; background: var(--brand); transform: translateY(-50%); pointer-events: none; }

.stage { position: relative; flex-shrink: 0; width: 43.17%; max-width: 518px; aspect-ratio: 518 / 653; overflow: hidden; background: var(--sunken); }
.stage_phone { position: absolute; top: 11.93%; left: 16.6%; width: 66.83%; z-index: 1; will-change: transform; }
.stage_phone .phone { width: 347px; }
@media (prefers-reduced-motion: no-preference) {
  .stage_phone { translate: 0 100%; transition: translate 280ms var(--ease-in); }
  .stage_phone.is-active { z-index: 2; translate: 0 0; transition: translate 480ms var(--ease-out) 160ms; }
}
@media (prefers-reduced-motion: reduce) {
  .stage_phone { opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
  .stage_phone.is-active { z-index: 2; opacity: 1; }
}

/* small screens: swipeable cards */
.features_mob { width: 100%; }
@media (min-width: 64rem) { .features_mob { display: none; } }
.snap { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.snap::-webkit-scrollbar { display: none; }
.snap > ul { display: flex; gap: 16px; }
.fcard { display: flex; flex-direction: column; gap: 24px; flex-shrink: 0; width: min(calc(100% - 24px), 420px); scroll-snap-align: start; }
.fcard_text { display: flex; flex-direction: column; gap: 16px; }
.fcard_text h3 { color: var(--fg-primary); font-size: var(--t-xl); line-height: 1.13; letter-spacing: -.03em; font-weight: 600; }
.fcard_text p { color: var(--fg-muted); font-size: var(--t-md); line-height: 1.28; letter-spacing: -.03em; font-weight: 400; }
.fcard_stage { display: flex; align-items: center; justify-content: center; height: 500px; margin-top: auto; overflow: clip; border-radius: 24px; background: var(--sunken); }
.fcard_stage .phone { width: 217px; }

/* ───────────────────────── Card deck ───────────────────────── */
.deck { overflow-x: clip; }
@media (min-width: 64rem) { .deck { padding-block: 96px; } }
@media (min-width: 80rem) { .deck { --gutter: 70px; padding-block: 100px; } }
.deck_inner { --container-w: 81.25rem; display: flex; flex-direction: column; align-items: center; }
.deck_inner > div { width: 100%; }

.surface-blush { background: var(--blush); }
.surface-lilac { background: var(--lilac); }
.surface-mint { background: var(--mint); }
.on-blush { color: #1e1e1e; }
.on-lilac { color: #25161a; }
.on-mint { color: #171007; }

.deck_scroll, .deck_fan { display: none; }
.fan { position: relative; width: 100%; margin-inline: auto; aspect-ratio: 13 / 7; }
.fan_list { position: absolute; inset: 0; }
.fan_item { position: absolute; inset: 0; pointer-events: none; }
.fan_shift { position: absolute; inset: 0; pointer-events: none; transform-origin: 7.6923% 50%; transition: transform var(--motion-deck) var(--ease-spring), z-index 0s linear calc(var(--motion-deck) / 2); }
.fan_card { position: absolute; left: 7.6923%; top: 5.2143%; width: 92.3077%; height: 89.2857%; overflow: hidden; border-radius: var(--radius-xl); container: deck / inline-size; pointer-events: auto; }
.fan_art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fan_art > * { position: absolute; }
.fan_text { position: absolute; left: 4%; top: 50%; z-index: 10; display: flex; flex-direction: column; gap: clamp(.75rem, 2cqw, 1.5rem); width: 46.0833%; transform: translateY(-50%); }
.fan_text h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 10.6667cqw, 8rem); line-height: 1; letter-spacing: -.01em; font-weight: 600; }
.fan_text p { font-size: clamp(1rem, 1.6667cqw, 1.25rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.fan_phone { position: absolute; left: 70.5385%; top: -.0214%; width: 26.3794%; }
.fan_phone .phone { width: 343px; }
.fan_phone .phone_screen img { object-position: center 42%; }
.fan_sliver { position: absolute; z-index: 20; min-width: 44px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); cursor: pointer; pointer-events: auto; }
.fade { transition: opacity var(--motion-base) var(--ease-out); }
.fade.is-off { opacity: 0; pointer-events: none; user-select: none; }

.art-usdt { left: 0; bottom: -.667cqw; width: 29.25cqw; aspect-ratio: 351 / 268; background: url(assets/img/coin-usdt-tilted.svg) no-repeat bottom left / contain; }
.art-usdc { left: 22.3333cqw; bottom: 0; width: 35.6667cqw; aspect-ratio: 428 / 299; background: url(assets/img/coin-usdc.svg) no-repeat bottom left / contain; }
.art-globe { left: 34.6667cqw; bottom: -42.9167cqw; width: 56.5cqw; aspect-ratio: 1; overflow: hidden; border-radius: 9999px; }
.art-ribbon { left: -2.1642cqw; top: -14.0833cqw; width: 105.97cqw; aspect-ratio: 1271.64 / 920.31; overflow: hidden; }
.art-globe img, .art-ribbon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (prefers-reduced-motion: no-preference) {
  /* wide screens: the fan is pinned and opens as you scroll */
  @media (min-width: 80rem) {
    .deck_scroll { display: block; }
    .deck_scroll_track { height: 400vh; }
    .deck_scroll_stage { position: sticky; top: var(--height-nav); height: calc(100dvh - var(--height-nav)); overflow: clip; }
    .deck_scroll .fan { max-width: calc((100dvh - var(--height-nav)) * 13 / 7); }
    .deck_scroll .fan_phone { z-index: 40; pointer-events: none; }
  }
  /* mid screens: a static fan, tap a sliver to bring a card forward */
  @media (min-width: 64rem) and (max-width: 79.999rem) {
    .deck_fan { display: block; }
    .deck_flow { display: none; }
  }
  @media (min-width: 80rem) { .deck_flow { display: none; } }
}

.dcard { position: relative; flex-shrink: 0; width: min(88vw, 380px); overflow: hidden; border-radius: var(--radius-2xl); container: deck / inline-size; scroll-snap-align: start; }
.dcard_body { position: relative; z-index: 10; aspect-ratio: 380 / 615; }
.dcard_text { position: absolute; inset-inline: 7.8947cqw; top: 49.7368cqw; z-index: 10; display: flex; flex-direction: column; gap: 16px; transform: translateY(-50%); }
.dcard_text h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 18.9474cqw, 4.5rem); line-height: .9; letter-spacing: -.01em; font-weight: 600; }
.dcard_text p { font-size: clamp(1rem, 4.7368cqw, 1.125rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.dcard .art-usdt { left: -23.1579cqw; bottom: 1.1842cqw; width: 86.7466cqw; }
.dcard .art-usdc { left: 42.2342cqw; bottom: 0; width: 83.0611cqw; }
.dcard .art-globe { left: -9.7368cqw; bottom: -96.5789cqw; width: 140.2456cqw; }
.dcard .art-ribbon { left: -42cqw; top: auto; bottom: -58cqw; width: 210cqw; }
.art-pin { aspect-ratio: 96.3066 / 167.126; }
.art-pin img { position: absolute; left: 0; width: 100%; height: 100%; }
.art-pin img:first-child { top: 0; }
.art-pin img:last-child { top: 3.95%; }
.dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.dots ul { display: flex; align-items: center; gap: 6px; }
.dots button { display: grid; place-items: center; width: 14px; height: 44px; cursor: pointer; }
.dots button span { display: block; width: 14px; height: 14px; border-radius: 9999px; background: #1e1e1e40; transition: background-color var(--motion-fast) var(--ease-out); }
.dots button[aria-current="true"] span { background: #1e1e1e; }
@media (prefers-reduced-motion: reduce) {
  .deck_flow .snap { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .deck_flow .snap > ul { flex-direction: column; gap: 24px; }
  .dcard { width: 100%; }
  .dcard[data-clone], .dots { display: none; }
}

/* ───────────────────────── Testimonials ───────────────────────── */
.said { background: var(--subtle); }
.said_inner { display: flex; flex-direction: column; align-items: center; }
.said_inner > .reveal { width: 100%; }
.said_title { color: var(--fg-primary); text-align: center; }
.said_grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin-top: 40px; overflow: clip; }
@media (min-width: 40rem) { .said_grid { margin-top: 48px; } }
@media (min-width: 64rem) { .said_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; } }
.poster { position: relative; isolation: isolate; min-height: 420px; overflow: clip; border-radius: var(--radius-6xl) var(--radius-6xl) 0 0; background: var(--hero-deep); }
@media (min-width: 40rem) { .poster { min-height: 480px; } }
@media (min-width: 64rem) { .poster { min-height: 580px; border-radius: var(--radius-6xl) 0 0 var(--radius-6xl); } }
.poster img { position: absolute; max-width: none; pointer-events: none; }
.poster_pattern { top: 50%; left: 50%; width: 735px; height: 735px; transform: translate(-50%, -50%); opacity: .2; mix-blend-mode: overlay; }
.poster_usdt { top: 0; right: 0; width: 192px; }
.poster_usdc { bottom: 0; left: 0; width: 220px; }
.poster_mark { top: 32px; left: 32px; width: 73px; height: 74px; }
@media (min-width: 64rem) {
  .poster_usdt { width: 266px; }
  .poster_usdc { width: 305px; }
  .poster_mark { top: 44px; left: 53px; width: 97px; height: 99px; }
}
.poster_words { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 36px; font-family: var(--font-accent); text-transform: uppercase; }
.poster_super { color: #fff; font-size: 44px; line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.poster_slot { position: relative; width: 100%; height: 76px; }
.poster_word { position: absolute; inset: 0; color: var(--lime); text-align: center; font-size: 68px; line-height: 1; letter-spacing: -.04em; font-weight: 700; font-style: italic; transform: translateX(102%); }
.poster_word:first-child { transform: translateX(0); }
@media (min-width: 64rem) {
  .poster_super { font-size: 64px; }
  .poster_slot { height: 110px; }
  .poster_word { font-size: 100px; }
}
@media (prefers-reduced-motion: no-preference) {
  .poster_word { animation: word-cycle 7.8s linear infinite backwards; animation-delay: calc(var(--word-slot, 0) * 2.6s); }
}
@keyframes word-cycle {
  0% { animation-timing-function: cubic-bezier(.16, 1, .3, 1); transform: translate(-102%); }
  11.538% { animation-timing-function: linear; transform: translate(0); }
  24.359% { animation-timing-function: cubic-bezier(.55, 0, .85, .36); transform: translate(0); }
  33.333% { transform: translate(102%); }
  33.334%, to { transform: translate(-102%); }
}

.wall { position: relative; isolation: isolate; height: 480px; overflow: clip; border-radius: 0 0 var(--radius-6xl) var(--radius-6xl); background: #fff; }
@media (min-width: 64rem) { .wall { height: 580px; border-radius: 0 var(--radius-6xl) var(--radius-6xl) 0; } }
.wall_track { display: flex; flex-direction: column; gap: 20px; width: 100%; padding-inline: 20px; }
@media (min-width: 40rem) { .wall_track { padding-inline: 40px; } }
@media (min-width: 64rem) { .wall_track { padding-inline: 56px; } }
.wall_track ul { display: flex; flex-direction: column; gap: 20px; }
.wall_track li { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .wall_track { animation: wall-scroll 90s linear infinite; }
  @media (hover: hover) and (pointer: fine) { .wall:hover .wall_track { animation-play-state: paused; } }
}
@keyframes wall-scroll { 0% { transform: translateY(0); } to { transform: translateY(calc(-50% - 10px)); } }
.wall_fade { position: absolute; inset-inline: 0; z-index: 10; height: 101px; pointer-events: none; }
.wall_fade--top { top: 0; background: linear-gradient(to bottom, #fafafa, rgba(250, 250, 250, .55) 45%, rgba(250, 250, 250, 0)); }
.wall_fade--bottom { bottom: 0; background: linear-gradient(to top, #fafafa, rgba(250, 250, 250, .55) 45%, rgba(250, 250, 250, 0)); }

.tweet { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 18px 24px; overflow: clip; border-radius: 18px; background: #000; }
.tweet_head { display: flex; align-items: center; gap: 12px; padding-inline-end: 48px; }
.tweet_avatar { flex-shrink: 0; width: 39px; height: 39px; border-radius: 9999px; background: #4642e2; object-fit: cover; }
.tweet figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; font-size: 18px; line-height: 24px; }
.tweet_name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tweet_name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600; }
.tweet_name img { flex-shrink: 0; width: 20px; height: 20px; }
.tweet_handle { flex-shrink: 0; color: #71767b; }
.tweet blockquote { color: #fff; font-size: 18px; line-height: 24px; white-space: pre-line; }
.tweet blockquote .at { color: #269dee; }
.tweet_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #71767b; font-size: 15px; line-height: 24px; }
.tweet_meta i { flex-shrink: 0; width: 3px; height: 3px; border-radius: 9999px; background: #71767b; }
.tweet_meta b { color: #fff; font-weight: inherit; }
.tweet_x { position: absolute; top: 18px; right: 24px; color: #fff; }

/* ───────────────────────── FAQ ───────────────────────── */
.faq { background: var(--subtle); }
.faq_inner { --container-w: 61.6875rem; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.faq_inner > .reveal:last-child { width: 100%; }
.faq_heading { color: var(--fg-body); font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -.03em; font-weight: 500; }
.faq_card { position: relative; width: 100%; overflow: hidden; }
.faq_pattern { display: none; position: absolute; top: -24px; left: -240px; width: 1374px; height: 1374px; background: var(--faint); opacity: .64; pointer-events: none; -webkit-mask: url(assets/img/pattern-lightning-bolt.webp) no-repeat 0 0 / 1374px 1374px; mask: url(assets/img/pattern-lightning-bolt.webp) no-repeat 0 0 / 1374px 1374px; }
.faq_brand { display: none; align-items: center; gap: 8px; }
.faq_brand span { color: #2c2124; font-family: var(--font-sans); font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; font-weight: 400; }
.faq_grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 32px 16px 40px; }
@media (min-width: 40rem) { .faq_grid { padding-inline: 20px; } }
.faq_panel { position: absolute; inset: 0; border-radius: var(--radius-6xl); background: #262626; pointer-events: none; }
.faq_title { position: relative; margin-bottom: 28px; padding-inline: 12px; color: #fff; font-family: var(--font-display); text-transform: uppercase; font-size: 3rem; line-height: .97; letter-spacing: 0; font-weight: 600; }
.faq_q { position: relative; margin-top: 12px; padding-inline: 12px; }
.faq_q button {
  width: 100%; min-height: 56px; padding: 16px;
  border: 1px solid #ffffff14; border-radius: var(--radius-2xl); background: #1e1e1e; color: #fff;
  text-align: left; cursor: pointer;
  font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.03em; font-weight: 500;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), translate var(--motion-fast) var(--ease-out), scale var(--motion-fast) var(--ease-out);
}
.faq_q button:active { scale: .99; transition-duration: var(--motion-instant); }
@media (hover: hover) and (pointer: fine) { .faq_q button:hover { background: #262626; } }
.faq_q button[aria-expanded="true"] { background: #2f2f2f; }
.faq_a { position: relative; display: grid; grid-template-rows: 0fr; visibility: hidden; padding-inline: 12px; transition: grid-template-rows var(--motion-base) var(--ease-in), visibility var(--motion-base) var(--ease-in); }
.faq_a.is-open { grid-template-rows: 1fr; visibility: visible; transition-timing-function: var(--ease-out); }
.faq_a > div { min-height: 0; overflow: hidden; }
.faq_a > div > div { padding-top: 12px; opacity: 0; transition: opacity var(--motion-fast) var(--ease-in); }
.faq_a.is-open > div > div { opacity: 1; transition-delay: 40ms; transition-timing-function: var(--ease-out); }
.faq_bubble { padding: 24px; border-radius: var(--radius-bubble); background: #fdf7ff; box-shadow: var(--shadow-card); color: #4a4a4a; font-size: var(--t-base); line-height: 1.44; letter-spacing: -.01em; font-weight: 400; }
@media (min-width: 40rem) {
  .faq_title, .faq_q, .faq_a { padding-inline: 16px; }
  .faq_q button { padding-inline: 24px; }
  .faq_bubble { padding: 32px 40px; }
}
@media not all and (min-width: 64rem) { .faq_heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 64rem) {
  .faq_card { padding: 68px 59px 24px 28px; border-radius: var(--radius-6xl); background: var(--contrast); }
  .faq_pattern { display: block; }
  .faq_brand { display: flex; position: absolute; top: 28px; right: 60px; }
  .faq_grid { grid-template-columns: 447fr 393fr; grid-template-rows: repeat(var(--faq-rows), auto) 40px; column-gap: 60px; padding: 0; }
  .faq_panel { position: static; grid-column-start: 1; grid-row: 1 / -1; margin-top: -40px; border-radius: var(--radius-5xl); }
  .faq_title { grid-column-start: 1; grid-row-start: 1; padding-inline: 40px; font-size: var(--t-display-6); font-weight: 400; }
  .faq_q { grid-column-start: 1; grid-row: var(--faq-row); padding-inline: 40px; }
  .faq_q button { border-radius: var(--radius-lg); }
  .faq_a {
    grid-column-start: 2; grid-row: 2 / -1; align-self: start;
    grid-template-rows: 1fr; margin-top: -8px; padding-inline: 0;
    opacity: 0; pointer-events: none; translate: 0 calc(var(--faq-position) * 8px);
    transition: opacity var(--motion-base) var(--ease-out), visibility var(--motion-base) var(--ease-out), translate var(--motion-base) var(--ease-out);
  }
  .faq_a.is-open { opacity: 1; pointer-events: auto; }
  .faq_a > div > div, .faq_a.is-open > div > div { padding-top: 0; opacity: 1; transition-delay: 0s; }
}

/* ───────────────────────── Closing CTA ───────────────────────── */
.cta { background: linear-gradient(to bottom, #fff, #f5f5f5); }
@media (min-width: 64rem) { .cta { padding-top: 96px; } }
@media (min-width: 80rem) { .cta { padding-top: 112px; padding-bottom: 44px; } }
.cta_inner { display: flex; flex-direction: column; align-items: center; }
.cta_head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.cta_pill { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 10px 16px; border: 1px solid #dcdcdc; border-radius: var(--radius-pill); background: #fff; color: var(--fg-body); font-size: var(--t-md); line-height: 1.3; letter-spacing: -.03em; font-weight: 500; }
.cta_copy { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 635px; text-align: center; }
.cta_copy > div { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cta_title { color: var(--fg-primary); }
.cta_copy p { max-width: 529px; color: var(--fg-body-muted); font-size: var(--t-md); line-height: 1.4; letter-spacing: -.02em; font-weight: 500; }
.cta_copy .btn { width: 100%; }
@media (min-width: 48rem) { .cta_copy .btn { width: auto; } }
.cta_coins { width: 100%; max-width: 1069px; margin-top: 16px; pointer-events: none; }
.cta_coins svg { display: block; width: 100%; height: auto; }
.cta-azza-glimmer { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-cta-coins="play"] .cta-coin-kenya, [data-cta-coins="play"] .cta-coin-ngn, [data-cta-coins="play"] .cta-coin-azza { transform-box: fill-box; transform-origin: 50%; }
  [data-cta-coins="play"] .cta-coin-kenya { animation: cta-coins-kenya 4.6s linear both; }
  [data-cta-coins="play"] .cta-coin-ngn { animation: cta-coins-ngn 4.6s linear both; }
  [data-cta-coins="play"] .cta-coin-azza { animation: cta-coins-azza 4.6s linear both; }
  [data-cta-coins="play"] .cta-pad-br { animation: cta-coins-pad-br 4.6s linear both; }
  [data-cta-coins="play"] .cta-pad-ngn { animation: cta-coins-pad-ngn 4.6s linear both; }
  [data-cta-coins="play"] .cta-pad-tl { animation: cta-coins-pad-tl 4.6s linear both; }
  [data-cta-coins="play"] .cta-azza-glimmer { animation: cta-coins-glimmer 4.6s linear both; }
}
@keyframes cta-coins-kenya {
  0% { animation-timing-function: var(--ease-out); transform: translate(0); }
  6.74% { animation-timing-function: var(--ease-in); transform: translate(-19px, 135.2px) scale(1.03); }
  13.48% { animation-timing-function: var(--ease-out); transform: translate(-37.9px, 303.3px); }
  16.52% { animation-timing-function: var(--ease-in); transform: translate(-37.9px, 278.3px); }
  18.91% { animation-timing-function: var(--ease-out); transform: translate(-37.9px, 300.3px); }
  20.43% { animation-timing-function: var(--ease-in); transform: translate(-37.9px, 292.3px); }
  21.74%, 31.74% { animation-timing-function: var(--ease-out); transform: translate(-37.9px, 298.3px); }
  33.91% { animation-timing-function: var(--ease-out); transform: translate(-37.9px, 303.3px); }
  36.96%, 56.52% { animation-timing-function: var(--ease-in-out); transform: translate(-37.9px, 298.3px); }
  66.52% { opacity: 1; animation-timing-function: var(--ease-in); }
  68.26%, to { opacity: 0; transform: translate(-605.8px, 138.2px); }
}
@keyframes cta-coins-ngn {
  19.13% { animation-timing-function: var(--ease-out); transform: translate(0); }
  25.43% { animation-timing-function: var(--ease-in); transform: translate(284.7px, -48px) scale(1.03); }
  31.74% { animation-timing-function: var(--ease-out); transform: translate(569.4px, -63px); }
  34.78% { animation-timing-function: var(--ease-in); transform: translate(569.4px, -86px); }
  37.17% { animation-timing-function: var(--ease-out); transform: translate(569.4px, -66px); }
  38.7% { animation-timing-function: var(--ease-in); transform: translate(569.4px, -73px); }
  40%, 56.52% { animation-timing-function: var(--ease-in-out); transform: translate(569.4px, -68px); }
  66.52% { opacity: 1; animation-timing-function: var(--ease-in); }
  68.26%, to { opacity: 0; transform: translate(1.5px, -228.1px); }
}
@keyframes cta-coins-azza {
  38.7% { animation-timing-function: var(--ease-out); transform: translate(0); }
  46.09% { animation-timing-function: var(--ease-in); transform: translate(-132.9px, -15px) scale(1.015); }
  53.48% { animation-timing-function: var(--ease-out); transform: translate(-265.8px, -5.9px); }
  56.3% { animation-timing-function: var(--ease-in); transform: translate(-265.8px, -17.9px); }
  58.48% { animation-timing-function: var(--ease-out); transform: translate(-265.8px, -8.4px); }
  60%, 68.26% { animation-timing-function: var(--ease-out); transform: translate(-265.8px, -9.9px); }
  70% { animation-timing-function: var(--ease-in-out); transform: translate(-265.8px, -17.9px) scale(1.02); }
  74.35%, 77.39% { animation-timing-function: var(--ease-out); transform: translate(-265.8px, -9.9px); }
  81.74% { animation-timing-function: var(--ease-in); transform: translate(-132.9px, -13px) scale(1.01); }
  86.52% { animation-timing-function: var(--ease-out); transform: translateY(7px) scale(.985); }
  88.26% { animation-timing-function: var(--ease-out); transform: translateY(7px) scale(.985); }
  90.87% { animation-timing-function: var(--ease-out); transform: translateY(-3px) scale(1.005); }
  93.26%, to { transform: translate(0); }
}
@keyframes cta-coins-pad-br { 0%, 21.74% { opacity: 1; animation-timing-function: var(--ease-in); } 25.65%, to { opacity: 0; } }
@keyframes cta-coins-pad-ngn { 20% { opacity: 1; animation-timing-function: var(--ease-in); } 25.22%, to { opacity: 0; } }
@keyframes cta-coins-pad-tl { 60.87% { opacity: 1; animation-timing-function: var(--ease-in); } 64.35%, to { opacity: 0; } }
@keyframes cta-coins-glimmer {
  0%, 90.87% { opacity: 1; animation-timing-function: var(--ease-in-out); transform: translate(-260px); }
  99.13% { opacity: 1; transform: translate(260px); }
  to { opacity: 0; transform: translate(260px); }
}

/* ───────────────────────── Footer ───────────────────────── */
.foot { padding: 107px 0 106px; overflow-x: clip; background: var(--inverse); }
.foot_inner { --container-w: 62.625rem; display: flex; flex-direction: column; gap: 89px; }
.foot_top { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.foot_row { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 64rem) {
  .foot_top { width: calc(100% + 14px); margin-inline: -7px; }
  .foot_row { flex-direction: row; gap: 100px; }
}
.foot_brand { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.foot_brand p { color: #fff; font-size: var(--t-sm); line-height: 1.21; letter-spacing: -.02em; font-weight: 500; }
.foot_nav { width: 100%; }
.foot_cols { display: flex; flex-direction: column; row-gap: 40px; }
@media (min-width: 30rem) { .foot_cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; } }
@media (min-width: 40rem) { .foot_cols { column-gap: 64px; } }
@media (min-width: 48rem) { .foot_cols { display: flex; flex-flow: row wrap; gap: 48px 40px; } }
@media (min-width: 64rem) { .foot_cols { column-gap: 48px; } }
@media (min-width: 80rem) { .foot_cols { column-gap: 68px; } }
.foot_col { display: flex; flex-direction: column; gap: 24px; }
.foot_col h3 { color: #fff; font-size: var(--t-base); line-height: 1.21; letter-spacing: -.02em; font-weight: 700; }
.foot_col ul { display: flex; flex-direction: column; gap: 24px; }
.foot_col li { display: flex; }
.foot_col a { display: inline-flex; align-items: center; margin-block: -12px; padding-block: 12px; color: #838383; font-size: var(--t-base); line-height: 1.21; letter-spacing: -.02em; font-weight: 500; transition: color var(--motion-fast) var(--ease-out); }
.foot_col a.is-brand { color: var(--brand); }
.foot_col a:focus-visible { color: #fff; }
@media (hover: hover) and (pointer: fine) { .foot_col a:hover { color: #fff; } }
.foot_legal { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (min-width: 48rem) { .foot_legal { flex-direction: row; align-items: center; justify-content: space-between; } }
.foot_legal p { color: #fffc; font-size: var(--t-base); line-height: 1.21; letter-spacing: -.02em; font-weight: 500; }
.foot_mark { position: relative; width: 100%; user-select: none; }
.foot_mark span { display: block; color: var(--fg-muted); text-align: center; white-space: nowrap; font-family: var(--font-accent); font-size: var(--t-watermark); line-height: 1.03; letter-spacing: -.05em; font-weight: 800; text-box: trim-both cap alphabetic; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .nav, .dd, .sheet_panel, .sheet_scrim, .wheel_track, .wheel_row, .wheel_panel, .wheel_panel p { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ───────────────────────── Small pieces ───────────────────────── */
.features_head { width: 100%; }
.body-soft { color: var(--fg-body-soft); }
.body-strong { color: var(--fg-body-strong); }
.wheel_pause:focus-visible { position: absolute; top: 0; left: 0; z-index: 20; display: inline-flex; width: auto; height: 44px; margin: 0; padding: 0 20px; align-items: center; clip-path: none; overflow: visible; border-radius: var(--radius-pill); background: #111; color: #fff; font-size: var(--t-sm); line-height: 1.21; letter-spacing: -.02em; font-weight: 600; }