/* ── Reset & Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* ── Hero Gradient ──────────────────────────────── */
.hero-gradient {
    background: linear-gradient(
        135deg,
        #0a1710 0%,
        #11261c 15%,
        #1a3a2a 30%,
        #2a4a34 45%,
        #1e3d2e 60%,
        #152e22 75%,
        #0d1f16 90%,
        #0a1710 100%
    );
}

.hero-vignette {
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(6, 14, 9, 0.4) 100%
    );
}

/* ── Hero Animations ────────────────────────────── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-ornament { animation: heroFadeIn 0.8s ease forwards; animation-delay: 0.2s; }
.hero-label { animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.4s; }
.hero-headline { animation: heroFadeUp 0.9s ease forwards; animation-delay: 0.6s; }
.hero-subtitle { animation: heroFadeUp 0.9s ease forwards; animation-delay: 0.8s; }
.hero-ctas { animation: heroFadeUp 0.9s ease forwards; animation-delay: 1s; }
.hero-scroll { animation: heroFadeIn 0.8s ease forwards; animation-delay: 1.4s; }

/* ── Buttons ────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    background: #f5f0e8;
    color: #1a3a2a;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border: 2px solid #f5f0e8;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.35s ease;
    cursor: pointer;
}
.btn-primary:hover {
    background: transparent;
    color: #f5f0e8;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #f5f0e8;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border: 1px solid rgba(245, 240, 232, 0.35);
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.35s ease;
}
.btn-secondary:hover {
    border-color: #f5f0e8;
    background: rgba(245, 240, 232, 0.08);
}

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

/* ── Service Cards ──────────────────────────────── */
.service-card { perspective: 800px; }
@media (prefers-reduced-motion: no-preference) {
    .service-card .group:hover {
        transform: translateY(-4px);
    }
}

/* ── Navbar Transition ──────────────────────────── */
#navbar.scrolled {
    background: rgba(10, 23, 16, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(245, 240, 232, 0.06);
}
#navbar.scrolled #nav-logo-text,
#navbar.scrolled #nav-subtitle {
    color: #f5f0e8;
}
#navbar.scrolled #nav-divider {
    background: rgba(245, 240, 232, 0.2);
}