:root {
    --sun: #f4b400;
    --sun-deep: #e08a00;
    --leaf: #1f7a4d;
    --leaf-deep: #14523a;
    --ink: #0e1a14;
}
html, body {
    height: 100%;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ink);
    background: linear-gradient(135deg,
        #81663a 0%,      /* light warm */
        #db8310 28%,    /* soft orange */
        #2d4592 65%,    /* light green */
        #ce9853 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.app-bg {
    min-height: 100vh;
}

h1,h2,h3,.display-1,.display-2,.display-3,.display-4 { font-family: 'Fraunces', serif; letter-spacing: -.02em; }
.tricolour-strip { height: 4px; background: linear-gradient(90deg,#FF9933 0 33%, #fff 33% 66%, #138808 66%); }
.brand-sun { color: var(--sun-deep); font-size: 1.4rem; }
.btn-sun { background: var(--sun); color: #1a1200; border:none; }
.btn-sun:hover { background: var(--sun-deep); color:#fff; }
.btn-leaf { background: var(--leaf); border:none; }
.btn-leaf:hover { background: var(--leaf-deep); color:#fff; }
.hero {
    background: radial-gradient(900px 500px at 80% -10%, rgba(31,122,77,.3), transparent 60%),
                linear-gradient(135deg, #14523a 0%, #1f7a4d 50%, #2d9a5e 100%);
    color: #fff; padding: 6rem 0; position: relative; overflow: hidden;
}
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.eyebrow { letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: #db2777; }
.card-soft { border:1px solid #e7ece8; border-radius: 16px; box-shadow: 0 6px 24px rgba(20,82,58,.06); }
.stat { font-family:'Fraunces',serif; font-size:2.25rem; color: var(--sun-deep); }
.site-footer { background: #16218338; color: #ffffff !important; }
.site-footer ul, .site-footer li, .site-footer p { color: #ffffff !important; }


.site-footer h5, .site-footer h6 { color: #ffffff; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: #ffffff; }
.site-footer .text-muted { color: #ffffff !important; opacity: 0.9; }
.site-footer .social-links a { color: #ffffff; font-size: 1.5rem; margin-right: 0.75rem; }
.site-footer .social-links a:hover { color: #fff; }
.site-footer .social-links a[title="Facebook"] { color: #ffffff; }
.site-footer .social-links a[title="YouTube"] { color: #ffffff; }
.site-footer .social-links a[title="LinkedIn"] { color: #ffffff; }
.badge-leaf { background: #e6f3ec; color: var(--leaf-deep); }
a { color: var(--leaf-deep); }
.kpi { border-left: 4px solid var(--sun); padding-left: 1rem; }
.main-container {
    background: rgba(255,255,255,0.85);
    padding: 20px;
    border-radius: 10px;
}