:root {
    --lux-emerald: #1a3c34;
    --lux-olive: #2F6A5F;
    --lux-olive-light: #3A8173;
    --lux-gold: linear-gradient(135deg, #BFA380 0%, #8E7356 100%);
    --lux-cream: #FBF9F6;
    --lux-text: #1F2937;
}

body {
    background-color: var(--lux-cream);
    color: var(--lux-text);
    font-family: "Manrope", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.serif {
    font-family: "Playfair Display", serif;
}

.btn-gold-metallic {
    background: var(--lux-gold);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(142, 115, 86, 0.2);
}

.btn-gold-metallic:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(142, 115, 86, 0.3);
}

.search-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.search-container:focus-within {
    border-color: var(--lux-olive);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.hero-bg {
    background: linear-gradient(135deg, #132a24 0%, #2c4e58 100%);
}

.certificate-frame {
    border: 12px solid #ffffff;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.15);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}