:root {
  --color-bg-dark: #1f1d1b; 
  --color-text-light: #f3f0ec; 
  --color-accent-copper: #b8860b; 
  --color-card-brown: #363330; 
  --color-soft-light: #a39d94; 

  --font-display: 'Inter', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    font-family: var(--font-body);
    overflow-x: hidden;
}

.header-scrolled {
    background-color: rgba(31, 29, 27, 0.95);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.mobile-menu {
    background-color: var(--color-bg-dark);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
.mobile-menu.is-open {
    transform: translateX(0);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.5rem;
}

.reveal-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cta-form-bg {
    background: linear-gradient(135deg, var(--color-accent-copper) 0%, #d4af37 100%);
}

.deco-shape-1 {
    position: absolute;
    z-index: -1;
    opacity: 0.1;
    background-color: var(--color-accent-copper);
}

footer a, footer p {
    color: var(--color-soft-light);
    transition: color 0.3s;
}
footer a:hover {
    color: var(--color-accent-copper) !important;
}