/* ── Base & Utilities ── */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ── Navbar ── */
#navbar {
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}
#navbar.scrolled {
    background: rgba(26, 18, 16, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
#navbar.scrolled #nav-logo { color: #FDF0E6; }

/* ── Hero Gradient ── */
.hero-gradient {
    background: linear-gradient(135deg, #1A1210 0%, #3D2E24 25%, #8C442D 55%, #C0603A 80%, #E9A55A 100%);
}
.hero-pattern {
    background-image: radial-gradient(circle at 20% 80%, rgba(253, 240, 235, 0.08) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(233, 165, 90, 0.12) 0%, transparent 50%);
}
.hero-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #C0603A, transparent 70%);
    top: -100px; right: -100px;
    animation: float 8s ease-in-out infinite;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #E9A55A, transparent 70%);
    bottom: -50px; left: -80px;
    animation: float 10s ease-in-out infinite reverse;
}
.hero-orb-3 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #F4BDB2, transparent 70%);
    top: 40%; left: 15%;
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* ── Service Cards ── */
.service-card { cursor: default; }

/* ── CTA Gradient ── */
.cta-gradient {
    background: linear-gradient(135deg, #8C442D 0%, #C0603A 50%, #E9A55A 100%);
}

/* ── Scroll Reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fallback: always visible if JS is disabled */
@media not all and (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 1; transform: none; }
}

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

/* ── Success Message ── */
#form-success {
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}