/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; overflow-x: hidden; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #D4A853; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #EDC652; }

/* ── Selection ── */
::selection { background: rgba(212, 168, 83, 0.3); color: #FDFCF8; }

/* ── Navbar ── */
#navbar {
    background: rgba(4, 11, 22, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 168, 83, 0.08);
}
#navbar.scrolled {
    background: rgba(4, 11, 22, 0.95);
    border-bottom-color: rgba(212, 168, 83, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ── Mobile Menu ── */
#mobileMenu.open { opacity: 1 !important; pointer-events: all !important; }
#mobileMenu .menu-line.active:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
#mobileMenu .menu-line.active:nth-child(2) { opacity: 0; }
#mobileMenu .menu-line.active:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); width: 24px; }
.mobile-link { font-family: 'Playfair Display', Georgia, serif; }

/* ── Gold Gradient Text ── */
.text-gold-gradient {
    background: linear-gradient(135deg, #D4A853 0%, #EDC652 50%, #C49A3C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Button Hover Glow ── */
button:hover, a:hover {
    transition: all 0.3s ease;
}

/* ── Image Hover ── */
img {
    transition: filter 0.3s ease;
}
img:hover {
    filter: brightness(1.05);
}

/* ── Service Card Shine ── */
.reveal .group:hover {
    box-shadow: 0 8px 40px rgba(212, 168, 83, 0.08);
}

/* ── Anchor Scroll Offset ── */
[id] {
    scroll-margin-top: 80px;
}

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

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .group img { transition: none !important; }
    .group:hover img { transform: none !important; }
}