.filter-btn{padding:.75rem 1.5rem;background-color:#1f293780;color:#d1d5db;border-radius:.5rem;border:1px solid rgba(55,65,81,.5);transition:all .3s ease;cursor:pointer;font-weight:500}.filter-btn:hover{background-color:#37415180;color:#fff;border-color:#3b82f680}.filter-btn.active{background:linear-gradient(to right,#3b82f6,#06b6d4);color:#fff;border:transparent}.project-card{background-color:#1f293780;backdrop-filter:blur(4px);border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;transition:all .5s ease;opacity:0;transform:translateY(2rem)}.project-card:hover{transform:translateY(-.5rem)}.project-card.animate-in{opacity:1;transform:translateY(0)}.project-image{position:relative;aspect-ratio:16 / 9;overflow:hidden}.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,24,39,.9) 0%,rgba(17,24,39,.5) 50%,transparent 100%);opacity:0;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.project-card:hover .project-overlay{opacity:1}.project-actions{display:flex;gap:1rem}.btn-demo,.btn-code{padding:.5rem 1.5rem;border-radius:.5rem;font-weight:600;transition:all .3s ease;font-size:.875rem;text-decoration:none}.btn-demo{background-color:#3b82f6;color:#fff}.btn-demo:hover{background-color:#2563eb}.btn-code{border:1px solid rgb(209,213,219);color:#d1d5db}.btn-code:hover{background-color:#d1d5db;color:#111827}.project-content{padding:1.5rem}.project-title{font-size:1.25rem;font-weight:700;margin-bottom:.75rem;color:#fff}.project-description{color:#d1d5db;font-size:.875rem;margin-bottom:1rem;line-height:1.625}.project-tech{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.tech-tag{padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:.5rem}.tech-tag.react{background-color:#06b6d433;color:#67e8f9}.tech-tag.node{background-color:#22c55e33;color:#4ade80}.tech-tag.mongo{background-color:#10b98133;color:#34d399}.tech-tag.stripe{background-color:#a855f733;color:#c4b5fd}.tech-tag.react-native{background-color:#3b82f633;color:#93c5fd}.tech-tag.typescript{background-color:#2563eb33;color:#60a5fa}.tech-tag.firebase{background-color:#f9731633;color:#fb923c}.tech-tag.vue{background-color:#22c55e33;color:#4ade80}.tech-tag.python{background-color:#eab30833;color:#facc15}.tech-tag.postgres{background-color:#1d4ed833;color:#93c5fd}.tech-tag.chartjs{background-color:#ec489933;color:#f472b6}.tech-tag.astro{background-color:#f9731633;color:#fb923c}.tech-tag.tailwind{background-color:#14b8a633;color:#5eead4}.tech-tag.gsap{background-color:#16a34a33;color:#4ade80}.tech-tag.express{background-color:#6b728033;color:#d1d5db}.tech-tag.jwt{background-color:#ef444433;color:#f87171}.tech-tag.swagger{background-color:#22c55e33;color:#4ade80}.tech-tag.next{background-color:#0003;color:#d1d5db}.tech-tag.socket{background-color:#9333ea33;color:#c4b5fd}.tech-tag.redis{background-color:#dc262633;color:#f87171}.tech-tag.docker{background-color:#3b82f633;color:#93c5fd}.project-meta{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}.project-date{color:#9ca3af}.project-status{padding:.25rem .5rem;border-radius:.5rem;font-weight:600}.project-status.completed{background-color:#22c55e33;color:#4ade80}.project-status.in-progress{background-color:#eab30833;color:#facc15}.pagination-btn{padding:.5rem 1rem;background-color:#1f293780;color:#d1d5db;border-radius:.5rem;border:1px solid rgba(55,65,81,.5);transition:all .3s ease;cursor:pointer}.pagination-btn:hover:not(:disabled){background-color:#37415180;color:#fff}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.cta-primary{background:linear-gradient(to right,#3b82f6,#06b6d4);padding:1rem 2rem;border-radius:.5rem;font-weight:600;transition:all .3s ease;transform:scale(1);color:#fff;text-decoration:none;display:inline-block}.cta-primary:hover{background:linear-gradient(to right,#2563eb,#0891b2);transform:scale(1.05)}.cta-secondary{border:1px solid #22d3ee;padding:1rem 2rem;border-radius:.5rem;font-weight:600;transition:all .3s ease;color:#22d3ee;text-decoration:none;display:inline-block}.cta-secondary:hover{background-color:#22d3ee1a;color:#67e8f9}@media (max-width: 768px){.project-card:hover{transform:translateY(0)}.filter-btn{padding:.5rem 1rem;font-size:.875rem}}