/* ==========================================================================
   WORLD 02 — BA CHAMA
   A financial product, and it should feel like one: calm, precise, numerate.
   Tabular figures, ledger rules, deep green. Trust before excitement.
   ========================================================================== */
:root{
  --ink:#06231B;
  --paper:#FBFDFC;
  --surface:#FFFFFF;
  --surface-2:#EFF6F2;
  --muted:#4A6259;
  --line:rgba(6,35,27,.13);
  --brand:#0E7A57;
  --brand-ink:#FFFFFF;
  --accent:#0E7A57;
  --mint:#2FCF92;
  --deep:#06231B;
  --gold:#C79A2E;
  --focus:#0B5C42;
  --foot-bg:#06231B;
  --foot-fg:#EAF4EF;

  --font-display:"Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
h1,h2,h3{ letter-spacing:-.03em; font-weight:800; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--brand); }
.site-header{ background:rgba(251,253,252,.86); }
.worldbar{ background:var(--deep); color:#EAF4EF; }
.btn--solid{ --btn-bg:var(--deep); --btn-fg:#fff; }
.imgph{ --ph-a:#2FCF92; --ph-b:#06231B; }

/* --------------------------------------------------------------- HERO */
.chero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(47,207,146,.22), transparent 60%),
    linear-gradient(168deg,#06231B 0%, #0B3B2E 62%, #0E4A38 100%);
  color:#EAF4EF;
  padding-block:clamp(3rem,8vw,6rem) clamp(3rem,7vw,5.5rem);
}
.chero::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:52px 52px; pointer-events:none;
}
.chero > *{ position:relative; z-index:1; }
.chero h1{ font-size:var(--step-5); max-width:18ch; line-height:1.02; }
.chero .lede{ color:rgba(234,244,239,.82); max-width:52ch; }
.chero__grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:960px){ .chero__grid{ grid-template-columns:1.1fr .9fr; } }

/* --------------------------------------------------------- ACCOUNT CARD */
.acct{
  background:linear-gradient(150deg,#0E7A57,#06231B 85%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px; padding:1.5rem;
  color:#fff; box-shadow:0 40px 90px -45px rgba(0,0,0,.9);
}
.acct__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; }
.acct__label{ font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase; opacity:.7; font-weight:700; }
.acct__bal{ font-family:var(--font-display); font-size:var(--step-4); line-height:1; margin-top:.35rem; display:block; }
.acct__top .ni{ font-size:.6rem; color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.acct__chip{
  width:44px; height:32px; border-radius:6px; flex:none;
  background:linear-gradient(140deg,#E9D8A6,#C79A2E);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.acct__rows{ display:grid; gap:.55rem; margin-top:1.2rem; }
.acct__row{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:.7rem .9rem; border-radius:12px;
  background:rgba(255,255,255,.08); font-size:var(--step--1);
}
.acct__row b{ font-variant-numeric:tabular-nums; }
.acct__row .ni{ font-size:.62rem; color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.08); }

/* ------------------------------------------------------------- LEDGER */
.ledger{ width:100%; border-collapse:collapse; font-size:var(--step--1); }
.ledger caption{ text-align:left; font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; padding-bottom:.8rem; }
.ledger th{ text-align:left; font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:.7rem .8rem; border-bottom:1.5px solid var(--line); }
.ledger td{ padding:.85rem .8rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.ledger tr:last-child td{ border-bottom:0; }
.ledger .amt{ text-align:right; font-weight:700; }
.ledger .in{ color:var(--brand); }

/* ------------------------------------------------------------- GROWTH */
.growth{ display:flex; align-items:flex-end; gap:.5rem; height:180px; padding-top:1rem; }
.growth__bar{
  flex:1; border-radius:8px 8px 3px 3px; position:relative;
  background:linear-gradient(180deg, var(--mint), var(--brand));
  min-height:8px; height:var(--h,20%);
}
.growth__bar--ghost{ background:repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px); border:1px dashed var(--line); }
.growth__labels{ display:flex; gap:.5rem; margin-top:.5rem; }
.growth__labels span{ flex:1; text-align:center; font-size:var(--step--2); color:var(--muted); }

/* --------------------------------------------------------------- STEPS */
.steps{ counter-reset:s; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.step{ background:var(--surface); padding:clamp(1.3rem,3vw,2rem); counter-increment:s; position:relative; }
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--font-display); font-size:var(--step-2); font-weight:800;
  color:var(--mint); display:block; margin-bottom:.6rem; letter-spacing:-.04em;
}
.step h3{ font-size:var(--step-1); margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:var(--step--1); margin:0; }
@media (min-width:800px){ .steps--3{ grid-template-columns:repeat(3,1fr); } }

/* ------------------------------------------------------------- PRODUCTS */
.plan{
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:1.7rem;
  background:var(--surface); display:flex; flex-direction:column; gap:.8rem;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.plan--feature{ border-color:var(--brand); box-shadow:var(--shadow-md); }
.plan__tag{ font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--brand); }
.plan__amt{ font-family:var(--font-display); font-size:var(--step-3); letter-spacing:-.04em; }
.plan ul{ padding-left:1.1em; font-size:var(--step--1); color:var(--muted); margin:0; }

/* ------------------------------------------------------------ TRUST BAR */
.trust{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.trust__item{ background:var(--paper); padding:1.4rem clamp(1rem,2.5vw,1.6rem); display:grid; gap:.35rem; }
.trust__item strong{ font-family:var(--font-display); font-size:var(--step-0); }
.trust__item span{ font-size:var(--step--1); color:var(--muted); }

/* -------------------------------------------------------------- BANDS */
.band-deep{ background:var(--deep); color:#EAF4EF; }
.band-deep .lede,.band-deep p{ color:rgba(234,244,239,.8); }
.band-deep .eyebrow{ color:var(--mint); }
.band-deep .card,.band-deep .panel{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:#EAF4EF; }
.band-deep .stats{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.18); }
.band-deep .stat{ background:#0A3125; color:#EAF4EF; }
.band-deep .stat__label{ color:rgba(234,244,239,.72); }
.band-mint{ background:var(--surface-2); }

.pill-note{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--step--2); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand); background:rgba(14,122,87,.1);
  padding:.4rem .85rem; border-radius:var(--r-pill);
}