/* ── Base & Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }

/* ── Hero Geometric Shapes ── */
.hero-shape { position: absolute; pointer-events: none; }

.geo-circle-1 {
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,0.15) 0%, transparent 70%);
    top: -100px; right: -100px;
    animation: float-slow 8s ease-in-out infinite;
}
.geo-circle-2 {
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,191,124,0.2) 0%, transparent 70%);
    bottom: 10%; left: 5%;
    animation: float-slow 10s ease-in-out infinite reverse;
}
.geo-rect-1 {
    width: 120px; height: 120px;
    background: rgba(212,160,23,0.12);
    border-radius: 24px;
    top: 20%; left: 8%;
    transform: rotate(25deg);
    animation: float-medium 6s ease-in-out infinite;
}
.geo-triangle-1 {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(124,191,124,0.12);
    top: 60%; right: 12%;
    animation: float-medium 7s ease-in-out infinite reverse;
}
.geo-dots {
    width: 100px; height: 100px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    bottom: 25%; left: 15%;
    animation: float-slow 9s ease-in-out infinite;
}

/* ── Floating Stat Cards ── */
.floating-card {
    animation: float-card 4s ease-in-out infinite;
}
.stat-card-1 { animation-delay: 0s; }
.stat-card-2 { animation-delay: 1.3s; }
.stat-card-3 { animation-delay: 2.6s; }

@keyframes float-card {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes float-slow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(12px, -18px) rotate(3deg); }
    66% { transform: translate(-8px, 10px) rotate(-2deg); }
}
@keyframes float-medium {
    0%, 100% { transform: translate(0, 0) rotate(var(--r, 25deg)); }
    50% { transform: translate(15px, -20px) rotate(calc(var(--r, 25deg) + 5deg)); }
}
.geo-rect-1 { --r: 25deg; }

/* ── Scroll Reveal ── */
.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(32px);
    }
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Navbar scroll state ── */
#navbar.scrolled {
    background: rgba(253,252,248,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(27,94,32,0.08), 0 4px 24px rgba(0,0,0,0.06);
}

/* ── Mobile menu animation ── */
#mobile-menu {
    animation: slideDown 0.25s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDFCF8; }
::-webkit-scrollbar-thumb { background: #a8d4a8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7cbf7c; }

/* ── Selection color ── */
::selection { background: #a8d4a8; color: #1B5E20; }