/* ===== Beta — Ethiopian community portal =====
   Palette shared with KabaRent ("Cotton & Thread") = the Ethiopian flag: green / gold / red. */
:root {
  --green:#1C7C49; --green-d:#155F38;
  --gold:#FFC233; --gold-d:#E9A400;
  --red:#E24A3B; --red-t:#B5392D;
  --clay:#B5651D; --clay-d:#8F4F16;
  --plum:#7A3E8F; --plum-d:#5F2F70;
  --sky:#2F6FB0; --sky-d:#245488;
  --teal:#0E7C86; --teal-d:#0A5F66;
  --surface:#FDFBF5; --cream:#F8F3E7; --cream-2:#F3ECD9; --white:#FFFFFF;
  --ink:#1C1B16; --muted:#5A5443; --line:#ECE4CB;
  --shadow:0 6px 24px rgba(28,124,73,.09);
  --shadow-lg:0 14px 36px rgba(28,124,73,.14);
  --r:18px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--surface); color:var(--ink);
  font-family:"Heebo","Rubik",system-ui,sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand-text { font-family:"Rubik","Heebo",sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1160px,92vw); margin-inline:auto; }
.btn {
  display:inline-block; padding:13px 26px; border-radius:999px; font-weight:600;
  font-family:"Rubik",sans-serif; cursor:pointer; border:2px solid transparent; transition:.18s;
}
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-d); transform:translateY(-2px); }
.btn-gold { background:var(--gold); color:var(--ink); }
.btn-gold:hover { background:var(--gold-d); transform:translateY(-2px); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-t); transform:translateY(-2px); }
.btn-clay { background:var(--clay); color:#fff; }
.btn-clay:hover { background:var(--clay-d); transform:translateY(-2px); }
.btn-plum { background:var(--plum); color:#fff; }
.btn-plum:hover { background:var(--plum-d); transform:translateY(-2px); }
.btn-sky { background:var(--sky); color:#fff; }
.btn-sky:hover { background:var(--sky-d); transform:translateY(-2px); }
.btn-teal { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-d); transform:translateY(-2px); }
.btn.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; filter:grayscale(.4); }
.btn-ghost { border-color:var(--green); color:var(--green); }
.btn-ghost:hover { background:var(--green); color:#fff; }

/* ===== NAV ===== */
.nav {
  position:sticky; top:0; z-index:50; background:rgba(253,251,245,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; }
.brand-text { font-weight:800; font-size:22px; line-height:1; display:flex; flex-direction:column; gap:3px; }
.brand-text small { font-weight:500; font-size:11px; color:var(--muted); font-family:"Heebo"; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-weight:500; color:var(--muted); transition:.15s; }
.nav-links a:hover { color:var(--green); }
.nav-cta { background:var(--green); color:#fff !important; padding:9px 20px; border-radius:999px; }
.nav-cta:hover { background:var(--green-d); }
.nav-toggle { display:none; background:none; border:none; font-size:26px; color:var(--ink); cursor:pointer; }

/* ===== HERO ===== */
.hero { padding:72px 0 84px; background:
  radial-gradient(1200px 400px at 90% -10%, rgba(255,194,51,.16), transparent 60%),
  radial-gradient(1000px 400px at 0% 10%, rgba(28,124,73,.10), transparent 55%); }
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
  padding:7px 15px; border-radius:999px; font-size:13px; font-weight:600; color:var(--muted); box-shadow:var(--shadow);
}
.eyebrow .flag { width:22px; height:14px; border-radius:3px; display:inline-block;
  background:linear-gradient(var(--green) 0 33%, var(--gold) 33% 66%, var(--red) 66% 100%); }
.hero h1 { font-size:clamp(32px,5vw,52px); font-weight:800; line-height:1.12; margin:20px 0 16px; letter-spacing:-.5px; }
.hero h1 .hl { color:var(--green); position:relative; }
.hero h1 .hl::after { content:""; position:absolute; inset-inline:0; bottom:4px; height:10px; background:rgba(255,194,51,.5); z-index:-1; border-radius:4px; }
.lead { font-size:18px; color:var(--muted); max-width:34em; margin:0 0 28px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:34px; margin-top:38px; }
.hero-stats div { display:flex; flex-direction:column; }
.hero-stats b { font-family:"Rubik"; font-size:28px; color:var(--green); }
.hero-stats span { font-size:13px; color:var(--muted); }

/* hero art: three flag-colored rings + badge */
.hero-art { position:relative; aspect-ratio:1; max-width:360px; margin-inline:auto; display:grid; place-items:center; }
.emblem { width:100%; max-width:300px; height:auto; display:block; filter:drop-shadow(0 12px 30px rgba(28,124,73,.16)); }
.ring { position:absolute; border-radius:50%; border:14px solid; }
.ring-green { inset:0; border-color:rgba(28,124,73,.85); }
.ring-gold { inset:34px; border-color:rgba(255,194,51,.9); }
.ring-red { inset:68px; border-color:rgba(226,74,59,.85); }
.hero-badge { font-family:"Rubik"; font-weight:800; font-size:34px; color:var(--green);
  background:var(--white); width:120px; height:120px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow-lg); }

/* ===== SECTIONS ===== */
.section { padding:74px 0; }
.section-cream { background:var(--cream); }
.section-head { text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head h2 { font-size:clamp(26px,3.6vw,36px); margin:0 0 12px; }
.section-head p { color:var(--muted); font-size:17px; margin:0; }

/* ===== PODS ===== */
.pods { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:26px; }
.pod {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px;
  box-shadow:var(--shadow); position:relative; overflow:hidden; transition:.2s;
  display:flex; flex-direction:column;
}
.pod:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pod::before { content:""; position:absolute; inset-inline:0; top:0; height:5px; }
.pod-green::before { background:var(--green); }
.pod-gold::before { background:var(--gold); }
.pod-red::before { background:var(--red); }
.pod-clay::before { background:var(--clay); }
.pod-plum::before { background:var(--plum); }
.pod-sky::before { background:var(--sky); }
.pod-teal::before { background:var(--teal); }
.pod-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pod-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; }
.pod-green .pod-icon { background:rgba(28,124,73,.12); color:var(--green); }
.pod-gold .pod-icon { background:rgba(255,194,51,.20); color:var(--gold-d); }
.pod-red .pod-icon { background:rgba(226,74,59,.12); color:var(--red); }
.pod-clay .pod-icon { background:rgba(181,101,29,.14); color:var(--clay); }
.pod-plum .pod-icon { background:rgba(122,62,143,.14); color:var(--plum); }
.pod-sky .pod-icon { background:rgba(47,111,176,.14); color:var(--sky); }
.pod-teal .pod-icon { background:rgba(14,124,134,.14); color:var(--teal); }
.pod-tag { font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; }
.pod-tag.live { background:rgba(28,124,73,.12); color:var(--green); }
.pod-tag.partner { background:rgba(14,124,134,.14); color:var(--teal); }
.pod h3 { font-size:23px; margin:0 0 10px; }
.pod > p { color:var(--muted); margin:0 0 16px; }
.pod-points { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px; }
.pod-points li { position:relative; padding-inline-start:26px; font-size:15px; color:var(--ink); }
.pod-points li::before { content:"✓"; position:absolute; inset-inline-start:0; color:var(--green); font-weight:800; }
.pod-btn { margin-top:auto; align-self:flex-start; }

/* ===== ABOUT ===== */
.about { display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }
.about-copy h2 { font-size:clamp(26px,3.6vw,36px); margin:0 0 16px; }
.about-copy p { color:var(--muted); font-size:17px; }
.about-copy b { color:var(--ink); }
.values { display:flex; flex-direction:column; gap:16px; }
.value { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.value b { display:block; font-family:"Rubik"; font-size:18px; margin-top:6px; }
.value small { color:var(--muted); }
.v-dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.v-dot.green { background:var(--green); } .v-dot.gold { background:var(--gold); } .v-dot.red { background:var(--red); }

/* ===== COMING SOON ===== */
.soon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.soon { background:var(--white); border:1px dashed var(--line); border-radius:var(--r); padding:24px; position:relative; transition:.2s; }
.soon:hover { border-style:solid; transform:translateY(-3px); box-shadow:var(--shadow); }
.soon-ic { font-size:30px; display:block; margin-bottom:12px; }
.soon h4 { font-size:19px; margin:0 0 8px; }
.soon p { color:var(--muted); font-size:14.5px; margin:0 0 34px; }
.soon-badge { position:absolute; bottom:20px; inset-inline-start:24px; font-size:12px; font-weight:700;
  color:var(--red-t); background:rgba(226,74,59,.10); padding:4px 12px; border-radius:999px; }

/* ===== CTA ===== */
.cta { padding:70px 0; background:
  linear-gradient(120deg, var(--green) 0%, var(--green-d) 100%); color:#fff; text-align:center; }
.cta h2 { font-size:clamp(26px,3.6vw,34px); margin:0 0 12px; }
.cta p { opacity:.92; font-size:17px; max-width:40em; margin:0 auto 26px; }

/* ===== FOOTER ===== */
.footer { background:var(--ink); color:#EDE7D6; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:34px 0; flex-wrap:wrap; }
.brand-footer .brand-text { color:#fff; }
.brand-footer small { color:#B6AF9C; }
.footer-links { display:flex; gap:22px; }
.footer-links a { color:#CFC8B6; font-weight:500; }
.footer-links a:hover { color:var(--gold); }
.footer-note { font-size:13px; color:#B6AF9C; margin:0; }
.flag-strip { display:flex; height:6px; }
.flag-strip i { flex:1; }
.flag-strip i:nth-child(1){ background:var(--green); }
.flag-strip i:nth-child(2){ background:var(--gold); }
.flag-strip i:nth-child(3){ background:var(--red); }

/* ===== RESPONSIVE ===== */
@media (max-width:860px) {
  .nav-links { position:fixed; inset:70px 0 auto 0; flex-direction:column; background:var(--white);
    border-bottom:1px solid var(--line); padding:18px 24px; gap:16px; align-items:flex-start;
    transform:translateY(-140%); transition:.25s; box-shadow:var(--shadow); }
  .nav-links.open { transform:translateY(0); }
  .nav-toggle { display:block; }
  .hero-inner { grid-template-columns:1fr; }
  .hero-art { order:-1; max-width:260px; }
  .hero-stats { gap:24px; }
  .pods { grid-template-columns:1fr; }
  .about { grid-template-columns:1fr; gap:28px; }
  .soon-grid { grid-template-columns:1fr; }
}