@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-acc-primary { background-color: #0F172A; } /* Deep Navy */
    .bg-acc-accent { background-color: #D4AF37; } /* Metallic Gold */
    .bg-acc-light { background-color: #F8FAFC; } /* Slate 50 */
    .bg-acc-card { background-color: #FFFFFF; }
    
    .text-acc-primary { color: #0F172A; }
    .text-acc-accent { color: #D4AF37; }
    .text-acc-muted { color: #64748B; } /* Slate 500 */
    
    .font-playfair { font-family: 'Playfair Display', serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
}

body {
    font-family: 'Inter', sans-serif;
    color: #334155;
    background-color: #F8FAFC;
}

.acc-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#D4AF37] text-white font-inter font-medium tracking-wide hover:bg-[#B5952F] transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
}

.acc-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border border-[#0F172A] text-[#0F172A] font-inter font-medium tracking-wide hover:bg-[#0F172A] hover:text-white transition-all duration-300;
}

/* Subtle Graph Pattern Background */
.pattern-graph {
    background-image: linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Service Card Hover */
.acc-card {
    @apply bg-white p-8 border border-gray-100 transition-all duration-500 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.1)] hover:-translate-y-2 relative overflow-hidden;
}

.acc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: #D4AF37;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
}

.acc-card:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* Golden Gradient Text */
.gold-text-gradient {
    background: linear-gradient(45deg, #B5952F, #F3E5AB, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 4s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}