/* Theme: Mzimkhulu Digital Lab - Light Elegant Theme */
:root{
    --bg: #f3efe6;
    --card: #ffffff;
    --muted: #7a746b;
    --accent: #c9a76b; /* gold */
    --accent-2: #9ab7c3; /* soft blue */
    --text: #1b1a18;
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Lato', sans-serif;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:var(--body-font);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

.container{width:90%;max-width:1200px;margin:0 auto;padding:48px 0}

/* Header */
.header{
    background:transparent;
    padding:18px 0;
    position:sticky;top:0;z-index:1000;backdrop-filter: blur(4px);
}
.logo{color:var(--text);font-weight:700;font-family:var(--heading-font);letter-spacing:0.02em}
.nav ul{display:flex;gap:22px;list-style:none}
.nav ul li a{color:var(--text);text-decoration:none;font-weight:600}

/* Hero / Section headings */
h1,h2,h3{font-family:var(--heading-font);color:var(--text);}
h1{font-size:2.8rem}
h2{font-size:1.9rem;margin-bottom:8px}
.text-center{ text-align:center }

/* Key Outcomes section */
#key-outcomes{padding:40px 0}
.key-headline{font-size:2.4rem;margin-bottom:6px}
.key-sub{color:var(--muted);margin-bottom:24px}
.outcomes-wrap{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center}
@media (max-width:900px){.outcomes-wrap{grid-template-columns:1fr;}}

.outcome-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.outcome-cards{grid-template-columns:1fr}}
.outcome-card{background:var(--card);border-radius:12px;padding:22px;box-shadow:0 8px 24px rgba(25,22,18,0.06);border:1px solid rgba(28,24,20,0.06)}
.outcome-card .icon{width:64px;height:64px;border-radius:10px;background:linear-gradient(180deg,rgba(0,0,0,0.03),rgba(0,0,0,0.01));display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.outcome-card h3{margin-bottom:8px;font-size:1.1rem}
.outcome-card p{color:var(--muted);font-size:0.98rem}

/* Right column: ring stat + description */
.stat-panel{display:flex;flex-direction:column;align-items:center;gap:18px}
.ring{--pct:90;width:160px;height:160px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--pct)*1%), #e9e4dd 0);position:relative}
.ring::before{content:'';width:110px;height:110px;background:var(--card);border-radius:50%;position:absolute}
.ring .value{position:relative;font-size:2.6rem;font-weight:700;color:var(--text)}
.stat-label{font-weight:700;font-size:1.1rem}
.stat-desc{color:var(--muted);text-align:center}

/* Flow boxes */
.flow{display:flex;gap:12px;align-items:center;margin-top:10px}
.flow .box{background:linear-gradient(180deg,#f8f6f2,#f2efe8);border-radius:8px;padding:10px 12px;border:1px solid rgba(0,0,0,0.06);font-size:0.9rem;color:var(--muted);}
.flow .box.primary{background:var(--accent);color:white;font-weight:700}

/* Card list and general content overrides to ensure light theme */
.service-card, .stat-box, .partner-card{background:transparent;border:none;padding:14px;border-radius:8px}
.stat-box{background:transparent;color:var(--muted)}
.footer{background:transparent;color:var(--muted);padding:24px 0}

/* Small polish */
a{color:var(--text)}

/* Footer + social links */
.footer{background:transparent;color:var(--muted);padding:24px 0}
.footer .social-links{margin-top:8px;display:flex;gap:12px;justify-content:center;align-items:center}
.footer .social-link{display:inline-flex;width:36px;height:36px;background:var(--card);border-radius:50%;align-items:center;justify-content:center;text-decoration:none;color:var(--text);box-shadow:0 4px 8px rgba(0,0,0,0.06);transition:transform 0.15s ease,box-shadow 0.15s}
.footer .social-link:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.1)}
.footer .social-link svg{width:18px;height:18px;fill:currentColor}

/* Make sure any previously dark background elements are overridden */
#services, #tracker-info{background:transparent;border:none}

/* Accessibility */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
