.portfolio{background:var(--bg-primary);padding:5rem 2rem;position:relative}.container{max-width:1200px;margin:0 auto}.section-header{text-align:center;margin-bottom:3rem}.section-badge{color:var(--accent-primary);background:#3b82f626;border-radius:30px;margin-bottom:1rem;padding:.3rem 1rem;font-size:.85rem;font-weight:500;display:inline-block}.section-header h2{margin-bottom:1rem;font-size:2.5rem}.gradient-text{background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.section-subtitle{color:var(--text-secondary);font-size:1.1rem}.portfolio-filters{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:3rem;display:flex}.filter-btn{border:2px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:0 0;border-radius:50px;align-items:center;gap:.5rem;padding:.7rem 1.5rem;font-weight:500;transition:all .3s;display:inline-flex}.filter-icon{font-size:1.1rem}.filter-btn.active,.filter-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;transform:translateY(-2px)}.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2rem;display:grid}.portfolio-card{background:var(--bg-card);cursor:pointer;border:1px solid var(--border-color);border-radius:15px;transition:all .3s;overflow:hidden}.portfolio-card:hover{border-color:var(--accent-primary);transform:translateY(-10px);box-shadow:0 20px 40px #0000004d}.card-image{height:250px;position:relative;overflow:hidden}.card-image img{object-fit:cover;width:100%;height:100%;transition:transform .5s}.portfolio-card:hover .card-image img{transform:scale(1.1)}.card-overlay{opacity:0;background:#3b82f6e6;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.portfolio-card:hover .card-overlay{opacity:1}.view-project{color:#fff;border:2px solid #fff;border-radius:50px;padding:.8rem 1.5rem;font-size:1.1rem;font-weight:600;transition:transform .3s;transform:translateY(20px)}.portfolio-card:hover .view-project{transform:translateY(0)}.card-content{padding:1.5rem}.card-content h3{color:var(--text-primary);margin-bottom:.8rem;font-size:1.3rem}.card-content p{color:var(--text-secondary);margin-bottom:1rem;font-size:.9rem;line-height:1.5}.card-tech{flex-wrap:wrap;gap:.5rem;display:flex}.tech-tag{color:#fff;background:#3b82f61a;border-radius:20px;padding:.2rem .7rem;font-size:.75rem;font-weight:500}.popup-overlay{z-index:2000;background:#000000e6;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.popup-container{background:var(--bg-card);border-radius:20px;width:100%;max-width:1000px;max-height:90vh;animation:.3s slideUp;position:relative;overflow-y:auto}.popup-close{float:right;color:#fff;cursor:pointer;z-index:10;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin:1rem;transition:all .3s;display:flex;position:sticky;top:1rem;right:1rem}.popup-close:hover{background:var(--accent-primary);transform:rotate(90deg)}.popup-content{padding:2rem}.popup-image{border-radius:15px;width:100%;height:400px;margin-bottom:2rem;overflow:hidden}.popup-image img{object-fit:cover;width:100%;height:100%}.popup-details h2{color:var(--text-primary);margin-bottom:1.5rem;font-size:2rem}.project-meta{border-bottom:1px solid var(--border-color);gap:2rem;margin-bottom:2rem;padding-bottom:1rem;display:flex}.meta-item{color:var(--text-secondary)}.meta-item strong{color:var(--text-primary);margin-right:.5rem}.project-description,.project-challenge,.project-solution,.project-technologies{margin-bottom:1.5rem}.project-description h4,.project-challenge h4,.project-solution h4,.project-technologies h4{color:var(--accent-primary);margin-bottom:.8rem;font-size:1.1rem}.project-description p,.project-challenge p,.project-solution p{color:var(--text-secondary);line-height:1.6}.tech-stack{flex-wrap:wrap;gap:.8rem;display:flex}.tech-badge{color:#fff;background:#3b82f626;border-radius:25px;padding:.4rem 1rem;font-size:.85rem;font-weight:500}.popup-buttons{border-top:1px solid var(--border-color);gap:1rem;margin-top:2rem;padding-top:1rem;display:flex}.popup-buttons button{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-weight:500;transition:all .3s;display:inline-flex}.popup-buttons .btn-primary{background:var(--accent-primary);color:#fff}.popup-buttons .btn-primary:hover{background:var(--hover-color);transform:translateY(-2px)}.popup-buttons .btn-secondary{border:2px solid var(--accent-primary);color:var(--accent-primary);background:0 0}.popup-buttons .btn-secondary:hover{background:#3b82f61a;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.portfolio{padding:3rem 1rem}.portfolio-grid{grid-template-columns:1fr}.filter-btn{padding:.5rem 1rem;font-size:.9rem}.popup-container{max-height:95vh}.popup-content{padding:1rem}.popup-image{height:250px}.popup-details h2{font-size:1.5rem}.project-meta{flex-direction:column;gap:.5rem}.popup-buttons{flex-direction:column}.popup-buttons button{justify-content:center;width:100%}}