:root { --bg: #F8FAFC; --fg: #1E293B; --muted: #64748B; --accent: #F97316; --primary: #1E3A5F; --card: #FFFFFF; --border: #E2E8F0; }
* { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--fg); margin: 0; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-slide-in { animation: slideInRight 0.4s ease-out forwards; }

/* THIS IS YOUR DARK BLUE HERO BACKGROUND */
.hero-gradient { 
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 50%, #1E3A5F 100%); 
    position: relative; 
    overflow: hidden; 
}
.hero-gradient::before { 
    content: ''; 
    position: absolute; 
    top: -50%; left: -50%; width: 200%; height: 200%; 
    background: radial-gradient(circle, rgba(249, 115, 22, 0.1) 0%, transparent 60%); 
    animation: rotate 20s linear infinite; 
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.chip { transition: all 0.2s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15); background: var(--primary); color: white; }
.pro-card { transition: all 0.3s ease; border: 1px solid var(--border); }
.pro-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); border-color: var(--accent); }
.nav-active { color: var(--accent) !important; font-weight: 600; border-bottom: 2px solid var(--accent); }
.modal-overlay { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.toast { animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards; }
@keyframes fadeOut { to { opacity: 0; transform: translateX(20px); } }
.dash-link { transition: all 0.2s ease; border-left: 3px solid transparent; }
.dash-link:hover, .dash-link.active { background: rgba(249, 115, 22, 0.1); border-left-color: var(--accent); color: var(--accent); }

/* Image Upload Placeholder */
.img-upload-box { border: 2px dashed var(--border); transition: all 0.2s; }
.img-upload-box:hover { border-color: var(--accent); background: rgba(249, 115, 22, 0.05); }