/* Custom styles beyond Tailwind */
:root {
    --navy: #0f172a;
    --navy-light: #1e293b;
    --gold: #d4a017;
    --gold-light: #f3cf55;
    --cream: #fefce8;
}

body {
    font-family: 'DM Sans', sans-serif;
    color: var(--navy);
    background-color: var(--cream);
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

.hero-bg {
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('https://images.pexels.com/photos/8922188/pexels-photo-8922188.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=1080');
    background-size: cover;
    background-position: center;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.card-shadow {
    box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
}

.card-shadow:hover {
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.15);
}

.btn-primary {
    background-color: var(--gold);
    color: var(--navy);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--gold-light);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--gold);
    color: var(--navy);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
    }
}