/* ===== Tanzanian palette ===== */
:root{
  --tz-green:#1EB53A; --tz-yellow:#FCD116; --tz-black:#000000; --tz-blue:#00A3E0;
  --bg:#0b1220; --muted:#a8b2c8; --card:#0f1930; --text:#e9eeff; --ring: rgba(0,163,224,.28);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:linear-gradient(180deg,#0a0f1c 0%,#0b1220 100%); color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial;}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== Nav ===== */
.nav{position:sticky; top:0; z-index:60; background:rgba(10,15,28,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand img{width:36px; height:36px; border-radius:8px}
.nav-links a{padding:8px 12px; color:#dbe6ff; font-weight:600}
.nav-links a[aria-current="page"]{text-decoration:underline; text-underline-offset:4px}
.nav-links a:hover{color:#fff}

/* ===== Announcements Widget ===== */
.annc-widget{
  position: fixed; top: 84px; right: 18px; width: 360px; z-index: 70;
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  overflow:hidden; backdrop-filter: blur(6px);
}
@media (max-width: 760px){
  .annc-widget{ position: static; width:auto; margin:12px 20px 0; }
}
.annc-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08)}
.annc-title{font-weight:900; letter-spacing:.2px}
.annc-controls{display:flex; gap:8px}
.annc-nav{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#dbe6ff;
  padding:4px 8px; border-radius:8px; cursor:pointer}
.annc-nav:hover{filter:brightness(1.15)}
.annc-slider{position:relative; min-height:120px}
.annc-slide{padding:12px 14px; display:none}
.annc-slide.active{display:block; animation: fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none}}
.annc h3{margin:0 0 6px; font-size:16px}
.annc .meta{font-size:12px; color:#9fb2d4; margin-bottom:6px}
.annc .body{color:#dbe6ff; white-space:pre-wrap}
.annc .dismiss{position:absolute; top:8px; right:8px; border:0; background:transparent; color:#cfe2ff; cursor:pointer; font-weight:900}
.annc{position:relative; border-radius:12px; border:1px solid rgba(255,255,255,.08); padding:12px; background:rgba(0,0,0,.16)}
.annc.info{border-left:4px solid var(--tz-blue)}
.annc.success{border-left:4px solid var(--tz-green)}
.annc.warning{border-left:4px solid var(--tz-yellow)}
.annc.danger{border-left:4px solid #ff5252}

/* ===== Hero with African feel ===== */
.hero{padding:78px 0 36px; position:relative}
.pill{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#b7c6e6; font-size:13px}
.pill-tz{border-color: var(--tz-yellow); color:#ffeaa7}
.hero-title{font-size: clamp(32px,5vw,56px); line-height:1.08; margin:12px 0 10px; font-weight:900; letter-spacing:.2px}
.brand-gradient{
  background:linear-gradient(90deg,var(--tz-green),var(--tz-yellow),var(--tz-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{color:var(--muted); max-width:900px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:0 0 0 0 var(--ring); transition: box-shadow .35s ease, transform .2s ease;}
.btn:hover{ transform: translateY(-1px); box-shadow:0 0 0 8px var(--ring) }
.btn-primary{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(30,181,58,.25), transparent 70%),
    radial-gradient(120% 120% at 0% 100%, rgba(0,163,224,.25), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
}
.btn-outline{color:#eaf2ff}

/* Two-column hero layout */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} }
.hero-visual{position:relative; min-height:280px}
.hero-img{width:100%; height:auto; display:block; border-radius:16px; border:1px solid rgba(255,255,255,.08)}

/* Tanzanian ribbon + textile pattern for fallback visual */
.tz-hero{
  background-image:
    radial-gradient(1100px 650px at -10% -20%, rgba(30,181,58,.14), transparent 55%),
    radial-gradient(900px 600px at 120% -10%, rgba(0,163,224,.12), transparent 55%),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 40 40'>\
        <rect width='40' height='40' fill='rgba(0,0,0,0)'/>\
        <circle cx='6' cy='6' r='1.6' fill='%23FCD116'/>\
        <circle cx='26' cy='6' r='1.6' fill='%2300A3E0'/>\
        <circle cx='6' cy='26' r='1.6' fill='%2300A3E0'/>\
        <circle cx='26' cy='26' r='1.6' fill='%231EB53A'/>\
        <path d='M0 40 L40 0' stroke='%23000' stroke-width='0.6' opacity='.3'/>\
      </svg>");
  background-repeat: repeat;
}
.tz-panel{position:relative; height:320px; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));}
.tz-ribbon{
  content:""; position:absolute; inset:-20% -30% auto -30%; height:80%;
  background:
    linear-gradient(135deg, var(--tz-green) 0 25%, var(--tz-yellow) 25% 35%, var(--tz-black) 35% 65%, var(--tz-yellow) 65% 75%, var(--tz-blue) 75% 100%);
  transform: rotate(-8deg); opacity:.85; filter: saturate(110%);
}
.tz-card{position:absolute; inset:12px; border-radius:14px; background:#0f162d; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 40px rgba(0,0,0,.25)}
.tz-card-header{height:42px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.06)}
.tz-card-header .dot{width:10px;height:10px;border-radius:50%}
.tz-card-header .dot:nth-child(1){background:var(--tz-green)}
.tz-card-header .dot:nth-child(2){background:var(--tz-yellow)}
.tz-card-header .dot:nth-child(3){background:var(--tz-blue)}
.tz-card-body{padding:14px}
.tz-card-body .bar{height:10px; border-radius:8px; margin:10px 0; background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06))}
.tz-card-body .w1{width:80%}.tz-card-body .w2{width:65%}.tz-card-body .w3{width:40%}
.tz-card-body .chip{display:inline-block; padding:6px 10px; border-radius:999px; background:var(--tz-green); color:#03210b; font-weight:800; font-size:12px}

/* ===== Portals (bigger cards) ===== */
.portals-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.section-title{margin:22px 0 8px; font-size:28px; font-weight:900}
.section-title.big{font-size: clamp(28px,4.2vw,42px)}
.section-sub{margin:0 0 18px; color:#94a3b8}

.grid{display:grid; gap:22px}
.grid-xl{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:780px){ .grid-xl{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1160px){ .grid-xl{grid-template-columns:repeat(3,1fr);} }

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden; position:relative;
  transform-style:preserve-3d; will-change:transform; transition:transform .2s ease, box-shadow .3s ease;
}
.card:hover{box-shadow: 0 12px 40px rgba(0,0,0,.25)}
.card-xl{display:grid; grid-template-rows:auto 1fr;}
.badge{position:absolute; top:12px; right:12px; font-size:12px; color:#e9f3ff; border:1px solid rgba(255,255,255,.15);
  padding:4px 8px; border-radius:12px; background:rgba(12,40,80,.42); backdrop-filter: blur(6px)}
.badge-tz{border-color:var(--tz-yellow)}

/* Media area — bigger for your images */
.card-media{background:linear-gradient(180deg, rgba(0,163,224,.10), rgba(30,181,58,.10)); border-bottom:1px solid rgba(255,255,255,.06)}
.media-wrap{height:240px; display:flex; align-items:center; justify-content:center; position:relative}
.media-img{max-height:170px; max-width:82%; object-fit:contain; opacity:0; animation: fadeIn .5s ease forwards}
@keyframes fadeIn{to{opacity:1}}
.avatar{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:900; letter-spacing:.5px; font-size:26px; color:#0b1020;
  background:conic-gradient(from 180deg, var(--tz-green), var(--tz-yellow), var(--tz-blue), var(--tz-green));
}

/* Content */
.card-body{padding:18px}
.u-names{display:flex; flex-direction:column; gap:2px}
.u-name{font-size:20px; font-weight:900; letter-spacing:.2px}
.u-abbr{font-size:12px; color:#9fb2d4; letter-spacing:.4px}
.u-desc{font-size:14px; color:#a9b9d6; margin-top:8px}
.u-actions{display:flex; gap:12px; margin-top:14px}
.btn-lg{padding:14px 20px; border-radius:14px}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.06); padding:28px 0; color:#8ea3c7; font-size:13px}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}