.portfolio-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--gradient-bg-dark);padding-top:120px}.portfolio-hero-background{position:absolute;inset:0;z-index:0;overflow:hidden}.portfolio-hero-svg{position:absolute;width:100%;height:100%;opacity:.8}.portfolio-hero-content{position:relative;z-index:1;text-align:center;max-width:900px;padding:0 var(--container-padding)}.portfolio-hero-title{margin-bottom:var(--space-5);font-size:var(--text-5xl);line-height:var(--leading-tight);letter-spacing:-.02em}.portfolio-hero-subtitle{font-size:var(--text-xl);color:var(--text-secondary);margin-bottom:var(--space-8);line-height:var(--leading-relaxed);max-width:700px;margin-left:auto;margin-right:auto}.portfolio-stats{display:flex;gap:var(--space-8);justify-content:center;flex-wrap:wrap;margin-top:var(--space-10)}.portfolio-stat-item{text-align:center}.portfolio-stat-number{display:block;font-size:var(--text-4xl);font-weight:var(--weight-bold);background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-2)}.portfolio-stat-label{display:block;font-size:var(--text-sm);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}@media (max-width:767px){.portfolio-hero{padding-top:100px}}.section-portfolio-filter{background:var(--bg-secondary);padding:var(--space-16) 0 var(--space-8)}.portfolio-filter-wrapper{display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-12)}.filter-btn{padding:var(--space-3) var(--space-6);border:1px solid var(--card-border);background:var(--card-bg);color:var(--text-secondary);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--duration-fast) var(--ease-in-out);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.filter-btn:hover{border-color:var(--color-cyan);color:var(--color-cyan);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,212,255,.2)}.filter-btn.active{background:var(--gradient-primary);border-color:transparent;color:var(--color-white);box-shadow:0 4px 12px rgba(0,212,255,.3)}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-bottom:var(--space-16)}.project-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--duration-base) var(--ease-in-out);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.project-card:hover{transform:translateY(-8px);box-shadow:var(--card-shadow-lg);border-color:var(--color-cyan)}.project-card-image{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--bg-tertiary)}.project-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}.project-card:hover .project-card-image img{transform:scale(1.1)}.project-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 100%);opacity:0;transition:opacity var(--duration-base) var(--ease-in-out);display:flex;align-items:center;justify-content:center}.project-card:hover .project-card-overlay{opacity:1}.project-card-overlay-text{color:var(--color-white);font-size:var(--text-lg);font-weight:var(--weight-semibold);display:flex;align-items:center;gap:var(--space-2)}.project-card-overlay-text svg{width:20px;height:20px}.project-card-content{padding:var(--space-6)}.project-card-category{display:inline-block;padding:var(--space-1) var(--space-3);background:rgba(0,212,255,.1);color:var(--color-cyan);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3)}.project-card-title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-2);line-height:var(--leading-tight)}.project-card-description{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-4)}.project-card-tech{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tech-tag{padding:var(--space-1) var(--space-2);background:var(--bg-secondary);color:var(--text-tertiary);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--weight-medium)}.project-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--space-6);opacity:0;visibility:hidden;transition:opacity var(--duration-base) var(--ease-in-out),visibility var(--duration-base) var(--ease-in-out)}.project-modal.active{opacity:1;visibility:visible}.project-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.project-modal-content{position:relative;z-index:1;width:100%;max-width:1000px;max-height:90vh;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-2xl);overflow-y:auto;transform:scale(.9);transition:transform var(--duration-base) var(--ease-out)}.project-modal.active .project-modal-content{transform:scale(1)}.project-modal-close{position:absolute;top:var(--space-4);right:var(--space-4);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:1px solid var(--card-border);border-radius:var(--radius-full);color:var(--color-white);cursor:pointer;transition:all var(--duration-fast) var(--ease-in-out);z-index:10}.project-modal-close:hover{background:var(--gradient-primary);border-color:transparent;transform:rotate(90deg)}.project-modal-close svg{width:24px;height:24px}.project-modal-image{width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--bg-tertiary)}.project-modal-image img{width:100%;height:100%;object-fit:cover}.project-modal-body{padding:var(--space-8)}.project-modal-header{margin-bottom:var(--space-6)}.project-modal-category{display:inline-block;padding:var(--space-2) var(--space-4);background:rgba(0,212,255,.1);color:var(--color-cyan);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.project-modal-title{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-4);line-height:var(--leading-tight)}.project-modal-description{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}.project-modal-section{margin-bottom:var(--space-6)}.project-modal-section:last-child{margin-bottom:0}.project-modal-section-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-3)}.project-modal-tech{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.project-modal-tech .tech-tag{padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}.project-modal-features{list-style:none;padding:0;margin:0}.project-modal-features li{padding:var(--space-3) 0;padding-left:var(--space-6);color:var(--text-secondary);line-height:var(--leading-relaxed);position:relative}.project-modal-features li:before{content:"✓";position:absolute;left:0;color:var(--color-cyan);font-weight:var(--weight-bold)}.project-modal-cta{display:flex;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--card-border)}.section-portfolio-cta{background:var(--bg-primary);text-align:center;padding:var(--space-20) 0}.portfolio-cta-content{max-width:700px;margin:0 auto}.portfolio-cta-content h2{margin-bottom:var(--space-4)}.portfolio-cta-content p{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-8)}.portfolio-cta-buttons{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}.project-card.hidden{display:none}.project-card.fade-out{opacity:0;transform:scale(.9);transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.project-card.fade-in{animation:fadeInScale var(--duration-base) var(--ease-out)}@keyframes fadeInScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:1024px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}.portfolio-hero-title{font-size:var(--text-4xl)}.project-modal-content{max-width:90%}}@media (max-width:767px){.portfolio-hero{min-height:80vh}.portfolio-hero-title{font-size:var(--text-3xl)}.portfolio-hero-subtitle{font-size:var(--text-base)}.portfolio-stats{gap:var(--space-6)}.portfolio-stat-number{font-size:var(--text-3xl)}.section-portfolio-filter{padding:var(--space-12) 0 var(--space-6)}.portfolio-filter-wrapper{gap:var(--space-2)}.filter-btn{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.portfolio-grid{grid-template-columns:1fr;gap:var(--space-6)}.project-card-title{font-size:var(--text-lg)}.project-modal{padding:var(--space-4)}.project-modal-content{max-width:100%;max-height:85vh}.project-modal-body{padding:var(--space-6)}.project-modal-title{font-size:var(--text-2xl)}.project-modal-cta{flex-direction:column}.project-modal-cta .btn{width:100%}.section-portfolio-cta{padding:var(--space-16) 0}.portfolio-cta-buttons{flex-direction:column}.portfolio-cta-buttons .btn{width:100%}}@media (max-width:480px){.portfolio-hero-title{font-size:var(--text-2xl)}.project-card-content{padding:var(--space-4)}.project-modal-body{padding:var(--space-4)}}