* { font-family: 'Inter', sans-serif; }
.projects-hero-bg { background: linear-gradient(135deg,#1a2940 0%,#2d3748 50%,#4a5568 100%); }
.project-card { transition: all 0.4s ease; transform-style: preserve-3d; cursor: pointer; }
.project-card:hover { transform: translateY(-12px) rotateX(5deg); box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.project-card .project-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(135deg, rgba(79,195,247,0.9), rgba(102,126,234,0.9)); opacity:0; transition:opacity 0.3s ease; display:flex; align-items:center; justify-content:center; border-radius:0.75rem; }
.project-card:hover .project-overlay { opacity:1; }
.filter-btn { transition: all 0.3s ease; }
.filter-btn.active { background: linear-gradient(135deg,#4fc3f7,#667eea); color:white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(79,195,247,0.3); }
.tech-tag { background: linear-gradient(135deg, rgba(79,195,247,0.1), rgba(102,126,234,0.1)); border:1px solid rgba(79,195,247,0.3); transition:all 0.3s ease; }
.tech-tag:hover { background: linear-gradient(135deg, rgba(79,195,247,0.2), rgba(102,126,234,0.2)); transform: translateY(-1px); }
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background: linear-gradient(90deg,#4fc3f7,#667eea); transition: width 0.3s ease; }
.nav-link:hover::after { width:100%; }
.scroll-reveal { opacity:0; transform: translateY(30px); transition: all 0.6s ease; }
.scroll-reveal.revealed { opacity:1; transform: translateY(0); }
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); }
.modal.active { display:flex; align-items:center; justify-content:center; }
.modal-content { background:white; border-radius:1rem; max-width:800px; max-height:90vh; overflow-y:auto; margin:2rem; animation: modalSlideIn 0.3s ease; }
@keyframes modalSlideIn { from { opacity:0; transform: translateY(-50px) scale(0.9); } to { opacity:1; transform: translateY(0) scale(1); } }
.splide__slide img { width:100%; height:300px; object-fit:cover; border-radius:0.75rem; }