body { background: linear-gradient(135deg, var(--cosmic-dark), var(--cosmic-bg-light)); color: var(--cosmic-light); }
.hero-section {
background: linear-gradient(135deg, rgba(79, 195, 247, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 20px;
padding: 4rem 2rem;
margin-bottom: 3rem;
text-align: center;
}
.catalogue-card {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s, border-color 0.3s;
}
.catalogue-card:hover {
transform: translateY(-5px);
border-color: var(--cosmic-primary);
}
.solved-badge { background: linear-gradient(90deg, var(--cosmic-success), var(--cosmic-success)); }
.potential-badge { background: linear-gradient(90deg, var(--cosmic-warning), var(--cosmic-warning)); }
.job-badge { background: linear-gradient(90deg, var(--cosmic-primary), var(--cosmic-primary)); }
.space-badge { background: linear-gradient(90deg, var(--cosmic-purple), var(--cosmic-purple)); }
.badge { padding: 8px 15px; border-radius: 20px; font-weight: bold; margin-right: 10px; margin-bottom: 10px; display: inline-block; }
.solution-list { list-style: none; padding-left: 0; }
.solution-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.solution-list li:last-child { border-bottom: none; }
.impact-meter { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 10px 0; }
.impact-fill { height: 100%; border-radius: 5px; }
.category-icon { font-size: 2rem; margin-bottom: 15px; }
.nav-pills .nav-link { color: var(--cosmic-light); border: 1px solid rgba(255,255,255,0.2); margin: 5px; }
.nav-pills .nav-link.active { background: linear-gradient(90deg, var(--cosmic-primary), var(--cosmic-purple)); border: none; }