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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-solar-primary { background-color: #F59E0B; } /* Amber/Sun Yellow */
    .bg-solar-secondary { background-color: #0284C7; } /* Sky/Tech Blue */
    .bg-solar-dark { background-color: #0F172A; } /* Dark Blue */
    .bg-solar-light { background-color: #F0F9FF; }
    
    .text-solar-primary { color: #F59E0B; }
    .text-solar-secondary { color: #0284C7; }
    .text-solar-dark { color: #0F172A; }
    
    .font-outfit { font-family: 'Outfit', sans-serif; }
}

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

.solar-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#F59E0B] text-white font-bold rounded-xl hover:bg-[#D97706] transition-all duration-300 shadow-lg shadow-amber-500/30 transform hover:-translate-y-1;
}

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

/* Solar Panel Pattern Background */
.solar-pattern {
    background-color: #0F172A;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
}

/* Sun Glow Animation */
.sun-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245,158,11,0.4) 0%, rgba(245,158,11,0) 70%);
    border-radius: 50%;
    filter: blur(40px);
    animation: pulseSun 4s infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes pulseSun {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* Panel Card Hover */
.panel-card {
    @apply bg-white p-8 rounded-3xl shadow-sm border border-gray-100 transition-all duration-500 relative overflow-hidden z-10;
}

.panel-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s;
    z-index: -1;
}

.panel-card:hover::before {
    left: 150%;
    transition: all 0.7s;
}

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