@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-appliance-primary { background-color: #0284C7; } /* Sky Blue */
    .bg-appliance-secondary { background-color: #EF4444; } /* Red (Heating) */
    .bg-appliance-dark { background-color: #0F172A; }
    .bg-appliance-light { background-color: #F0F9FF; }
    
    .text-appliance-primary { color: #0284C7; }
    .text-appliance-secondary { color: #EF4444; }
    .text-appliance-dark { color: #0F172A; }
    
    .font-outfit { font-family: 'Outfit', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
}

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

.appliance-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#0284C7] text-white font-outfit font-bold tracking-wide rounded-xl hover:bg-[#0369A1] hover:shadow-lg transition-all duration-300;
}

.appliance-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border-2 border-[#0284C7] text-[#0284C7] font-outfit font-bold tracking-wide rounded-xl hover:bg-[#0284C7] hover:text-white transition-all duration-300;
}

/* Service Card Hover */
.service-card {
    @apply bg-white p-8 rounded-2xl border border-gray-100 shadow-sm transition-all duration-300 relative overflow-hidden;
}

.service-card:hover {
    @apply shadow-xl border-[#0284C7] -translate-y-2;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #0284C7, #EF4444);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

/* Wrench Animation */
.wrench-spin:hover i {
    animation: spin-wrench 1s ease-in-out;
}

@keyframes spin-wrench {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-45deg); }
    75% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
}

/* Background Pattern (Blueprint) */
.blueprint-bg {
    background-color: #0F172A;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}