{
“@context”: “https://schema.org”,
“@type”: “WebSite”,
“name”: “Ajwang”,
“url”: “https://ajwang.org/”,
“description”: “Global directory for doing business with Africa”,
“potentialAction”: {
“@type”: “SearchAction”,
“target”: “https://ajwang.org/?s={search_term_string}”,
“query-input”: “required name=search_term_string”
}
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: ‘Segoe UI’, system-ui, -apple-system, sans-serif; background: #0a0f1e; color: #e8e8e8; line-height: 1.6; }
a { color: #d4a843; text-decoration: none; }
a:hover { color: #f0c75e; }

/* Hero */
.hero {
background: linear-gradient(135deg, #0a0f1e 0%, #1a2744 50%, #0a0f1e 100%);
padding: 80px 20px 60px;
text-align: center;
border-bottom: 2px solid #d4a843;
}
.hero h1 {
font-size: 2.8rem; font-weight: 700; margin-bottom: 12px;
background: linear-gradient(135deg, #d4a843, #f0c75e);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p { font-size: 1.25rem; color: #b0b8c8; max-width: 640px; margin: 0 auto 32px; }
.search-box {
display: flex; max-width: 480px; margin: 0 auto;
border: 1px solid #2a3a5c; border-radius: 8px; overflow: hidden;
}
.search-box input {
flex: 1; padding: 14px 18px; background: #111827; border: none;
color: #e8e8e8; font-size: 1rem; outline: none;
}
.search-box input::placeholder { color: #6b7280; }
.search-box button {
padding: 14px 24px; background: #d4a843; color: #0a0f1e;
border: none; font-weight: 600; cursor: pointer; font-size: 1rem;
}
.search-box button:hover { background: #f0c75e; }

/* Stats bar */
.stats-bar {
display: flex; justify-content: center; gap: 48px;
padding: 32px 20px; background: #111827; border-bottom: 1px solid #1e293b;
}
.stats-bar .stat-item { text-align: center; }
.stats-bar .stat-num { font-size: 2rem; font-weight: 700; color: #d4a843; }
.stats-bar .stat-lbl { font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }

/* Featured */
.featured {
padding: 60px 20px; max-width: 1200px; margin: 0 auto;
}
.section-title {
font-size: 1.8rem; margin-bottom: 8px; color: #f0f0f0;
}
.section-subtitle { color: #94a3b8; margin-bottom: 32px; }
.featured-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.featured-card {
display: block; background: #111827; border: 1px solid #1e293b;
border-radius: 10px; padding: 24px; transition: all 0.2s;
}
.featured-card:hover { border-color: #d4a843; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-flag { font-weight: 700; font-size: 0.9rem; background: #1e293b; padding: 4px 10px; border-radius: 4px; color: #d4a843; }
.card-region { font-size: 0.8rem; color: #64748b; }
.featured-card h3 { font-size: 1.3rem; margin-bottom: 16px; color: #f0f0f0; }
.card-stats { display: flex; gap: 16px; }
.card-stats .stat { display: flex; flex-direction: column; }
.card-stats .stat-val { font-weight: 600; color: #e2e8f0; }
.card-stats .stat-label { font-size: 0.75rem; color: #64748b; }

/* Regions */
.regions {
padding: 60px 20px; max-width: 1200px; margin: 0 auto;
border-top: 1px solid #1e293b;
}
.region-group { margin-bottom: 32px; }
.region-group h3 { font-size: 1.2rem; color: #d4a843; margin-bottom: 12px; }
.region-grid {
display: flex; flex-wrap: wrap; gap: 8px;
}
.country-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; background: #111827; border: 1px solid #1e293b;
border-radius: 20px; font-size: 0.9rem; transition: all 0.2s;
}
.country-chip:hover { border-color: #d4a843; background: #1a2744; }
.chip-gdp { font-size: 0.75rem; color: #64748b; }

/* Features */
.features {
padding: 60px 20px; background: #111827; border-top: 1px solid #1e293b;
}
.features-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px; max-width: 1200px; margin: 0 auto;
}
.feature-item {
padding: 24px; border-radius: 8px; border: 1px solid #1e293b;
}
.feature-icon { font-size: 2rem; margin-bottom: 12px; }
.feature-item h4 { font-size: 1.1rem; margin-bottom: 8px; color: #f0f0f0; }
.feature-item p { font-size: 0.9rem; color: #94a3b8; }

/* CTA */
.cta {
padding: 60px 20px; text-align: center;
border-top: 1px solid #1e293b;
}
.cta h2 { font-size: 2rem; margin-bottom: 12px; color: #f0f0f0; }
.cta p { color: #94a3b8; margin-bottom: 24px; }
.cta-btn {
display: inline-block; padding: 14px 32px;
background: #d4a843; color: #0a0f1e; font-weight: 600;
border-radius: 8px; font-size: 1.1rem;
}
.cta-btn:hover { background: #f0c75e; color: #0a0f1e; }

/* Footer */
footer {
padding: 32px 20px; text-align: center;
border-top: 1px solid #1e293b; color: #64748b; font-size: 0.85rem;
}

@media (max-width: 768px) {
.hero h1 { font-size: 2rem; }
.stats-bar { gap: 24px; flex-wrap: wrap; }
.stats-bar .stat-num { font-size: 1.5rem; }
}

function filterCountries(q) {
q = q.toLowerCase().trim();
document.querySelectorAll(‘.country-chip’).forEach(chip => {
const text = chip.textContent.toLowerCase();
chip.style.display = (!q || text.includes(q)) ? ” : ‘none’;
});
// Also filter region headers
document.querySelectorAll(‘.region-group’).forEach(group => {
const visible = group.querySelectorAll(‘.country-chip[style=””], .country-chip:not([style])’);
group.style.display = (visible.length > 0 || !q) ? ” : ‘none’;
});
}