/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, video, svg { display: block; max-width: 100%; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* ── Navigation ── */
#nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 249, 246, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}
#nav.scrolled {
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

/* ── Mobile Menu ── */
#mobileMenu.open {
    opacity: 1;
    pointer-events: all;
}
#mobileMenu.closed {
    opacity: 0;
    pointer-events: none;
}

/* ── Hero Gradient ── */
.hero-gradient {
    background: linear-gradient(
        135deg,
        #0f1a0a 0%,
        #1f3316 20%,
        #2d4a24 40%,
        #3d622d 60%,
        #4d7a39 80%,
        #6a9856 100%
    );
    position: relative;
}
.hero-overlay {
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(106, 152, 86, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(77, 122, 57, 0.2) 0%, transparent 50%);
}

/* ── Marquee ── */
.marquee-track {
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Service Cards ── */
.card-service {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-service:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

/* ── Scroll Reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }
}

/* ── Focus Styles ── */
a:focus-visible, button:focus-visible {
    outline: 2px solid #4d7a39;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Selection ── */
::selection {
    background: rgba(77, 122, 57, 0.2);
    color: #1f3316;
}