/* ============================================================
   NJANGI CLOUD — SKIN B "ANKARA"
   A bolder, warmer alternative to the default navy/gold skin.
   Signature elements:
     1. The "gathering ring" — abstracted silhouette figures in a
        circle around a central calabash (the pooled pot), replacing
        Skin A's minimal tick-mark dial with a more figurative,
        communal image.
     2. A repeating geometric stripe band (an original triangle/
        diamond composition in the spirit of woven textile patterns —
        not a reproduction of any specific named cloth) used as a
        section divider throughout.
     3. Two Adinkra symbols used as small decorative accents —
        Sankofa (return and reclaim what's needed — apt for savings)
        and Nkonsonkonson (the chain link — unity and cooperation).
        Both are traditional, centuries-old Akan symbols in the
        public domain, commonly used in African-heritage branding.
   Same class names/structure as the default skin's style.css so
   existing page markup can point at this stylesheet with minimal
   changes.
   ============================================================ */
:root{
  --clay-600:#B5431E;
  --clay-500:#C1502E;
  --clay-300:#E08256;
  --indigo-900:#16204A;
  --indigo-700:#223A70;
  --ochre-500:#DE9A22;
  --ochre-300:#F0C169;
  --leaf-600:#3F6B3F;
  --sand-100:#FBF3E7;
  --sand-050:#FEFAF3;
  --ink-900:#241C15;
  --ink-600:#5B4D3E;
  --ink-400:#9A8B77;
  --line:#EAD9BE;

  --font-display:'Bricolage Grotesque', 'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius:16px;
  --radius-sm:9px;
  --shadow-1:0 2px 3px rgba(36,28,21,.07), 0 10px 28px -14px rgba(36,28,21,.28);
  --container:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--sand-050);color:var(--ink-900);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em;}
h1{font-size:clamp(2.5rem,5.4vw,3.9rem);}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem);}
h3{font-size:1.28rem;}
p{margin:0 0 1em;color:var(--ink-600);}
.mono{font-family:var(--font-mono);}

body:not(.show-fr) .fr{display:none;}
body.show-fr .en{display:none;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:92px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--sand-100);}
.section-dark{background:var(--indigo-900);color:var(--sand-050);}
.section-dark p{color:#C7CCE2;}
.section-dark h2,.section-dark h3{color:var(--sand-050);}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-600);display:inline-block;margin-bottom:14px;font-weight:600;
}
.lede{font-size:1.16rem;max-width:56ch;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* ---- pattern band divider (signature element #2) ---- */
.pattern-band{
  height:14px;width:100%;
  background:
    repeating-linear-gradient(115deg,
      var(--clay-500) 0 18px,
      var(--ochre-500) 18px 36px,
      var(--indigo-700) 36px 54px,
      var(--leaf-600) 54px 72px);
}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(254,250,243,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;text-decoration:none;color:var(--ink-900);}
.brand .mark{width:28px;height:28px;flex:none;}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:.92rem;text-decoration:none;color:var(--ink-600);font-weight:600;}
.nav-links a:hover{color:var(--ink-900);}
.nav-links a.active{color:var(--clay-600);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.toggle-btn{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  background:none;border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;color:var(--ink-600);
}
.toggle-btn:hover{border-color:var(--ink-400);color:var(--ink-900);}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:'';display:block;width:20px;height:2px;background:var(--ink-900);position:relative;transition:.2s;}
.menu-btn span::before{position:absolute;top:-6px;}
.menu-btn span::after{position:absolute;top:6px;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:.94rem;
  padding:13px 26px;border-radius:12px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--indigo-900);color:var(--sand-050);}
.btn-primary:hover{box-shadow:var(--shadow-1);}
.btn-gold{background:var(--ochre-500);color:var(--ink-900);}
.btn-gold:hover{box-shadow:var(--shadow-1);}
.btn-clay{background:var(--clay-500);color:#fff;}
.btn-clay:hover{box-shadow:var(--shadow-1);}
.btn-ghost{background:transparent;color:var(--indigo-900);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink-400);}
.btn-block{width:100%;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* hero */
.hero{padding:76px 0 0;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:44px;}
.hero-copy h1{margin-bottom:20px;}
.trust-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.trust-chip{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.03em;
  border:1px solid var(--line);border-radius:20px;padding:6px 12px;color:var(--ink-600);background:#fff;
}

/* ---- gathering ring (signature element #1) ---- */
.ring-stage{position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto;}
.ring-stage svg{width:100%;height:100%;}
.ring-pulse{animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1);} 50%{opacity:1;transform:scale(1.06);}}
.ring-caption{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.72rem;color:var(--ink-400);white-space:nowrap;}
@media (prefers-reduced-motion: reduce){.ring-pulse{animation:none;}}

/* feature grid */
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--clay-500),var(--ochre-500),var(--indigo-700),var(--leaf-600));}
.card .num{font-family:var(--font-mono);color:var(--clay-600);font-size:.78rem;letter-spacing:.06em;display:block;margin-bottom:10px;font-weight:700;}

/* adinkra accent icons */
.adinkra{width:30px;height:30px;color:var(--indigo-700);margin-bottom:14px;}

/* steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:16px;}
.steps li{counter-increment:step;position:relative;padding-left:54px;padding-top:4px;padding-bottom:4px;}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--sand-100);border:2px solid var(--ochre-500);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.88rem;color:var(--indigo-900);
}
.steps h4{margin-bottom:2px;}

/* footer */
footer{background:var(--indigo-900);color:#C7CCE2;padding:64px 0 32px;}
footer a{text-decoration:none;color:#C7CCE2;font-size:.88rem;}
footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:44px;}
.footer-grid h4{color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem;color:#9AA1C0;}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .nav-links,.nav-actions .toggle-btn{display:none;}
  .menu-btn{display:block;}
  .grid-4,.grid-3,.grid-2,.footer-grid{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  h1{font-size:2.2rem;}
}