.portfolio-page{background:#0a0a14;min-height:100vh;padding:50px 20px}.portfolio-container{max-width:1100px;margin:0 auto}.portfolio-header{margin-bottom:40px}.portfolio-header h1{color:#fff;margin-bottom:10px;font-size:42px}.portfolio-header p{color:#aaa;max-width:600px}.portfolio-filters{flex-wrap:wrap;gap:12px;margin-bottom:40px;display:flex}.portfolio-filters button{color:#aaa;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:20px;padding:8px 16px;transition:all .2s}.portfolio-filters button:hover{color:#fff}.portfolio-filters .active{background:var(--blue);color:#fff;border-color:var(--blue)}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;display:grid}.portfolio-card{cursor:pointer;border-radius:14px;position:relative;overflow:hidden}.portfolio-image img{object-fit:cover;width:100%;height:220px;display:block}.portfolio-overlay{opacity:0;background:linear-gradient(#0000,#000000b3);flex-direction:column;justify-content:flex-end;padding:16px;transition:all .3s;display:flex;position:absolute;inset:0}.portfolio-card:hover .portfolio-overlay{opacity:1}.portfolio-overlay h3{color:#fff;font-size:18px}.portfolio-overlay span{color:var(--blue);font-size:12px}@media (max-width:768px){.portfolio-header h1{font-size:30px}}