/* ===== AFRICA NETWORK PAGE ===== */
.hero-word { display: inline-block; opacity: 0; animation: heroWordIn 0.85s cubic-bezier(.16,.84,.32,1) forwards; }
.hero-sub { opacity: 0; animation: heroWordIn 0.85s cubic-bezier(.16,.84,.32,1) forwards; animation-delay: 0.4s; }
@media (max-width: 640px) { .hero-word, .hero-sub { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }

.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .map-grid { grid-template-columns: 1fr; } }
.map-card { position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; gap: 18px; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid transparent; border-radius: 18px; padding: 20px; transition: background 0.3s ease; }
.map-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px; pointer-events: none; background: rgba(255,255,255,0.1); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.map-card.card-blue::before { background: radial-gradient(120% 100% at 100% 0%, rgba(46,59,224,0.85), rgba(255,255,255,0.1) 60%); }
.map-card.card-red::before { background: radial-gradient(120% 100% at 0% 100%, rgba(232,18,46,0.7), rgba(255,255,255,0.1) 60%); }
.map-card:hover { background: rgba(255,255,255,0.05); }
.map-thumb-wrap { width: 210px; height: 210px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.map-thumb-wrap img { width: 100%; height: auto; display: block; }
.map-card-text { flex: 1; min-width: 0; }
.map-card-body { margin-top: 10px; }
@media (max-width: 560px) { .map-card { flex-direction: column; text-align: center; padding: 18px; } .map-thumb-wrap { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 340px; } }

.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; } }
.why-2grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.why-row { position: relative; display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid transparent; border-radius: 14px; padding: 18px 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.why-row::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1px; background: radial-gradient(160% 140% at 100% 0%, rgba(46,59,224,0.6), rgba(255,255,255,0.08) 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.why-row:hover { transform: translateY(-4px); background: rgba(255,255,255,0.08); box-shadow: 0 0 14px rgba(255,255,255,0.14), 0 10px 24px rgba(0,0,0,0.3); }
.why-icon-box { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-icon-box svg { transition: transform 0.3s ease; }
.why-row:hover .why-icon-box svg { transform: scale(1.2); }

.af-country { fill: #14152a; fill-opacity: 0.55; stroke: rgba(255,255,255,0.32); stroke-width: 0.9; transition: fill 0.25s ease, stroke 0.25s ease, fill-opacity 0.25s ease; }
.af-country.present { fill: #3548c9; fill-opacity: 1; stroke: rgba(255,255,255,0.55); cursor: pointer; transition: fill 0.3s cubic-bezier(.2,.8,.3,1), stroke 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.3,1), fill-opacity 0.25s ease; transform-box: fill-box; transform-origin: center; }
.af-country.present:hover { fill: #E8122E; stroke: rgba(255,255,255,0.85); filter: drop-shadow(0 0 14px rgba(232,18,46,0.85)); transform: scale(1.05); }
.map-svg { width: 100%; height: auto; display: block; transition: filter 0.35s ease; filter: drop-shadow(0 30px 70px rgba(0,0,0,0.5)) drop-shadow(0 0 55px rgba(46,72,255,0.45)) drop-shadow(0 0 90px rgba(46,72,255,0.28)); }
.map-svg.hovered { filter: drop-shadow(0 30px 70px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(255,255,255,0.22)) drop-shadow(0 0 65px rgba(232,18,46,0.16)); }

.af-popup { position: absolute; transform: translate(-50%, calc(-100% - 18px)); background: rgba(255,255,255,0.07); border: 1px solid transparent; border-radius: 17px; padding: 26px 30px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-width: 260px; pointer-events: none; opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 5; box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12); }
.af-popup::before { content: ''; position: absolute; inset: 0; border-radius: 17px; padding: 1px; background: radial-gradient(120% 90% at 50% 100%, rgba(232,18,46,0.95), rgba(255,255,255,0.06) 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.af-popup.show { opacity: 1; transform: translate(-50%, calc(-100% - 26px)); }
.af-venue-row { display: flex; align-items: center; gap: 11px; margin-top: 11px; opacity: 0; transform: translateY(8px); }
.af-popup.show .af-venue-row { animation: afRowIn 0.4s ease forwards; }
@keyframes afRowIn { to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .af-popup { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(0.96) !important; width: min(80vw, 300px); max-width: min(80vw, 300px); box-sizing: border-box; padding: 20px 22px; }
  .af-popup.show { transform: translate(-50%, -50%) scale(1) !important; }
}