:root {
    --night: #101b19;
    --night-elevated: #162621;
    --forest: #183a30;
    --forest-muted: #55665d;
    --lime: #d6ef8b;
    --lime-hover: #e5f8ab;
    --cream: #f6f4e9;
    --muted-sage: #b7c4b8;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--night);
    color: var(--cream);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Utilities */
.py-6 {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.section-night {
    background-color: var(--night);
}

.section-cream {
    background-color: var(--cream);
    color: var(--night);
}

.text-lime { color: var(--lime) !important; }
.text-cream { color: var(--cream) !important; }
.text-night { color: var(--night) !important; }
.text-forest { color: #4a6b35 !important; }
.text-forest-muted { color: var(--forest-muted) !important; }
.text-muted-sage { color: var(--muted-sage) !important; }

.eyebrow {
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Navigation */
.nav-glass {
    background-color: rgba(16, 27, 25, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-glass .nav-link {
    color: #e1e8dc;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.nav-glass .nav-link:hover,
.nav-glass .nav-link:focus {
    color: var(--lime);
}

/* Buttons */
.btn-lime {
    background-color: var(--lime);
    color: #141f18;
    border: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-lime:hover,
.btn-lime:focus {
    background-color: var(--lime-hover);
    color: #141f18;
    transform: translateY(-2px);
}

.btn-outline-cream {
    color: var(--cream);
    border: 1px solid rgba(246, 244, 233, 0.28);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-outline-cream:hover {
    color: var(--lime);
    border-color: var(--lime);
    background-color: rgba(214, 239, 139, 0.06);
}

/* Hero Section */
.hero-section {
    min-height: 85vh;
    background:
        radial-gradient(ellipse at 74% 38%, #2e563f 0%, transparent 38%),
        radial-gradient(ellipse at 85% 88%, #204130 0%, transparent 38%),
        linear-gradient(125deg, #101b19 25%, #142a22 72%, #193629 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-title {
    letter-spacing: -0.04em;
}

.hero-orbit {
    position: absolute;
    width: 540px;
    height: 540px;
    right: 6%;
    top: 10%;
    border: 1px solid rgba(214, 239, 139, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(214, 239, 139, 0.03), 0 0 0 110px rgba(214, 239, 139, 0.02);
    pointer-events: none;
}

.hero-stars {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 18%;
    top: 20%;
    border-radius: 50%;
    background: var(--lime);
    box-shadow:
        85px 75px 0 -3px rgba(255, 255, 255, 0.5),
        -150px 115px 0 -4px rgba(255, 255, 255, 0.45),
        55px 215px 0 -4px rgba(255, 255, 255, 0.45),
        -85px -60px 0 -4px rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.moon {
    position: absolute;
    right: 21%;
    top: 15%;
    width: clamp(130px, 18vw, 230px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f6f3d7, #d8e3a7 68%, #9eb879);
    box-shadow: 0 0 80px rgba(214, 239, 139, 0.25);
    pointer-events: none;
}

.moon::before,
.moon::after {
    content: "";
    position: absolute;
    background: rgba(162, 177, 125, 0.22);
    border-radius: 50%;
}

.moon::before {
    width: 18%;
    height: 18%;
    left: 26%;
    top: 25%;
}

.moon::after {
    width: 11%;
    height: 11%;
    left: 64%;
    top: 60%;
}

/* Galago CSS Illustration */
.creature-stage {
    width: 280px;
    height: 300px;
}

.creature {
    position: relative;
    width: 280px;
    height: 300px;
    animation: float 4.5s ease-in-out infinite;
}

.body-shape {
    position: absolute;
    width: 146px;
    height: 182px;
    left: 72px;
    bottom: 6px;
    border-radius: 48% 48% 40% 40%;
    background: linear-gradient(145deg, #bd9a68, #77513b);
    box-shadow: inset -18px -12px 0 #593d32;
}

.ear {
    position: absolute;
    top: 42px;
    width: 90px;
    height: 110px;
    border-radius: 50%;
    background: #a67b55;
    border: 11px solid #704a39;
}

.ear.left { left: 32px; transform: rotate(-24deg); }
.ear.right { right: 28px; transform: rotate(24deg); }

.face {
    position: absolute;
    z-index: 1;
    left: 57px;
    top: 62px;
    width: 166px;
    height: 148px;
    border-radius: 48% 48% 52% 52%;
    background: linear-gradient(145deg, #d3ad78, #a77952);
}

.eye {
    position: absolute;
    top: 49px;
    width: 52px;
    height: 60px;
    border-radius: 50%;
    background: #f3e5b8;
    box-shadow: inset 0 0 0 4px #75503d;
}

.eye.left { left: 20px; }
.eye.right { right: 20px; }

.eye::after {
    content: "";
    position: absolute;
    width: 23px;
    height: 31px;
    top: 14px;
    left: 14px;
    border-radius: 50%;
    background: #17241d;
}

.eye::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    top: 19px;
    left: 19px;
    border-radius: 50%;
    background: #ffffff;
}

.nose {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 12px;
    left: 74px;
    top: 118px;
    border-radius: 50%;
    background: #49332d;
}

.branch {
    position: absolute;
    z-index: 2;
    left: -15px;
    bottom: 6px;
    width: 310px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(#806344, #4c3a2b);
    transform: rotate(-4deg);
}

.status-pill {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--lime);
    box-shadow: 0 0 10px var(--lime);
}

/* Feature Cards (Cream Section) */
.feature-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(16, 27, 25, 0.08);
}

.card-sage { background-color: #e9ecdc; }
.card-mint { background-color: #dce7cf; }
.card-sand { background-color: #e9e1cf; }

.feature-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: rgba(16, 27, 25, 0.07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Stats & Contact */
.stat-box {
    background-color: var(--night-elevated);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.cta-banner {
    background: linear-gradient(125deg, #214635 0%, #162c23 100%);
    border: 1px solid rgba(214, 239, 139, 0.18);
}

.contact-card {
    background-color: rgba(16, 27, 25, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.form-control-night {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--cream);
}

.form-control-night::placeholder {
    color: rgba(183, 196, 184, 0.55);
}

.form-control-night:focus {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: var(--lime);
    color: var(--cream);
    box-shadow: 0 0 0 0.2rem rgba(214, 239, 139, 0.18);
}

/* Footer & Modals */
.footer-link {
    color: var(--muted-sage);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--lime);
}

.modal-night {
    background-color: var(--night-elevated);
    color: var(--cream);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

@media (max-width: 991.98px) {
    .moon {
        right: 8%;
        top: 6%;
        opacity: 0.75;
    }
    .hero-orbit {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}