.modern-header{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden}.header-background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.gradient-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#8458cc,#6a3cab,#342079);opacity:.9}.animated-shapes{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.shape{position:absolute;border-radius:50%;filter:blur(100px);animation:svelte-1ed5e2u-float 20s infinite ease-in-out}.shape-1{width:600px;height:600px;background:#8458cc4d;top:-300px;left:-300px}.shape-2{width:400px;height:400px;background:#6a3cab4d;bottom:-200px;right:-200px;animation-delay:-5s}.shape-3{width:500px;height:500px;background:#4f46e533;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-10s}@keyframes svelte-1ed5e2u-float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.header-content{position:relative;text-align:center;padding:80px 20px;max-width:1200px;margin:0 auto}.header-badge{display:inline-flex;align-items:center;gap:8px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 20px;border-radius:50px;margin-bottom:30px;font-size:14px;color:#fff;border:1px solid rgba(255,255,255,.2)}.main-title{font-size:clamp(32px,5vw,64px);font-weight:700;color:#fff;margin-bottom:20px;line-height:1.2}.main-subtitle{font-size:clamp(18px,2.5vw,24px);color:#ffffffe6;margin-bottom:50px;line-height:1.6}.stats-container{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.stat-item{text-align:center}.stat-number{font-size:48px;font-weight:700;color:#fff;line-height:1}.stat-label{font-size:16px;color:#fffc;margin-top:8px}.filter-section{background:#0a041a;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.filter-container{max-width:1400px;margin:0 auto;padding:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}.search-bar{flex:1;min-width:250px;position:relative}.search-bar i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#92969f}.search-bar input{width:100%;padding:12px 15px 12px 45px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:16px;transition:all .3s ease}.search-bar input:focus{outline:none;background:#ffffff14;border-color:#8458cc}.category-tabs{display:flex;gap:10px;flex-wrap:wrap}.tab-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffb3;font-size:14px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.tab-btn:hover{color:#fff;border-color:#ffffff4d}.tab-btn.active{color:#fff;background:#8458cc;border-color:#8458cc}.tab-indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background:#8458cc;transform:scaleX(0);transition:transform .3s ease}.tab-btn.active .tab-indicator{transform:scaleX(1)}.view-toggle{display:flex;gap:5px;background:#ffffff0d;padding:5px;border-radius:8px}.view-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#ffffff80;cursor:pointer;border-radius:6px;transition:all .3s ease}.view-btn:hover{color:#fff}.view-btn.active{background:#8458cc;color:#fff}.portfolio-section{padding:60px 0 120px;background:radial-gradient(ellipse at center,#342079,#0f0535 40%,#0a041a,#000)}.portfolio-container{max-width:1400px;margin:0 auto;padding:0 20px}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:30px}.portfolio-grid.list-view{grid-template-columns:1fr;gap:20px}.portfolio-item{background:linear-gradient(145deg,#1e1e2399,#141419cc);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.07);transition:all .5s cubic-bezier(.21,.67,.35,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}.portfolio-item:hover{transform:translateY(-10px);box-shadow:0 30px 60px -15px #00000080,0 0 40px #8458cc33;border-color:#8458cc4d}.portfolio-item.list-item{display:flex;align-items:center;gap:30px;padding:20px}.item-number{position:absolute;top:15px;right:15px;width:40px;height:40px;background:linear-gradient(135deg,#8458cc,#6a3cab);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;z-index:10;box-shadow:0 8px 20px #8458cc4d}.list-item .item-number{position:static;margin-right:20px}.item-image-container{position:relative;height:300px;overflow:hidden;cursor:pointer}.list-item .item-image-container{width:250px;height:180px;border-radius:12px;flex-shrink:0}.image-loader{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#8458cc;border-radius:50%;animation:svelte-1ed5e2u-spin 1s linear infinite}@keyframes svelte-1ed5e2u-spin{to{transform:rotate(360deg)}}.item-image-container img{width:100%;height:100%;object-fit:cover;opacity:0;transition:all .6s ease}.item-image-container img.loaded{opacity:1}.image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 60%,rgba(132,88,204,.8) 100%);opacity:0;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center}.portfolio-item:hover .image-overlay{opacity:1}.overlay-content{display:flex;flex-direction:column;align-items:center;gap:10px;background-color:linear-gradient(135deg,#8458cc,#6a3cab);color:#fff;transform:translateY(20px);transition:transform .3s ease}.portfolio-item:hover .overlay-content{transform:translateY(0)}.overlay-content i{font-size:32px}.item-content{padding:25px}.list-item .item-content{flex:1;padding:0}.item-category{display:inline-block;padding:5px 15px;background:#8458cc33;color:#8458cc;font-size:12px;font-weight:600;border-radius:20px;margin-bottom:15px}.item-title{font-size:22px;font-weight:600;color:#fff;margin-bottom:10px;line-height:1.3}.item-description{font-size:15px;color:#ffffffb3;margin-bottom:20px;line-height:1.6}.item-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.feature-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;font-size:13px;color:#fffc}.feature-tag i{color:#8458cc;font-size:10px}.item-actions{display:flex;gap:10px}.primary-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#8458cc,#6a3cab);color:#fff;border-radius:10px;font-weight:500;transition:all .3s ease;text-decoration:none;position:relative;overflow:hidden}.primary-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s ease}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px -5px #8458cc80}.primary-btn:hover:before{left:100%}.secondary-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;cursor:pointer;transition:all .3s ease}.secondary-btn:hover{background:#ffffff1a;border-color:#fff3}.no-results{text-align:center;padding:80px 20px;color:#ffffff80}.no-results i{font-size:64px;margin-bottom:20px;opacity:.3}.no-results h3{font-size:24px;margin-bottom:10px;color:#ffffffb3}.cta-section{background:linear-gradient(135deg,#8458cc,#6a3cab);padding:80px 20px;text-align:center}.cta-container h2{font-size:36px;color:#fff;margin-bottom:15px}.cta-container p{font-size:18px;color:#ffffffe6;margin-bottom:30px}.cta-button{display:inline-flex;align-items:center;gap:10px;padding:15px 40px;background:#fff;color:#8458cc!important;border-radius:50px;font-weight:600;font-size:18px;transition:all .3s ease;text-decoration:none}.cta-button:hover{transform:translateY(-3px);box-shadow:0 20px 40px #0003}.modern-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-inner{background:linear-gradient(145deg,#1e1e23f2,#141419f2);border-radius:20px;border:1px solid rgba(255,255,255,.1);max-width:90vw;max-height:90vh;overflow:hidden;box-shadow:0 30px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.zoom-controls{display:flex;align-items:center;gap:15px;background:#ffffff0d;padding:8px 16px;border-radius:10px}.zoom-controls button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#8458cc;border:none;border-radius:8px;color:#fff;cursor:pointer;transition:all .3s ease}.zoom-controls button:hover:not(:disabled){background:#6a3cab;transform:scale(1.1)}.zoom-controls button:disabled{opacity:.5;cursor:not-allowed}.zoom-indicator{color:#fff;font-size:14px;font-weight:600;min-width:60px;text-align:center}.close-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:none;border-radius:10px;color:#fff;cursor:pointer;transition:all .3s ease}.close-btn:hover{background:#ff000080;transform:rotate(90deg)}.modal-body{display:flex;align-items:center;justify-content:center;padding:20px;max-height:calc(90vh - 100px);overflow:auto}.modal-body img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s ease;-webkit-user-select:none;user-select:none}@media (max-width: 1200px){.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}@media (max-width: 768px){.filter-container{flex-direction:column;gap:15px}.search-bar{width:100%}.category-tabs{width:100%;justify-content:center}.portfolio-grid{grid-template-columns:1fr;gap:20px}.portfolio-item.list-item{flex-direction:column;text-align:center}.list-item .item-image-container{width:100%;height:200px}.stats-container{gap:20px}.stat-item{flex:1;min-width:80px}.stat-number{font-size:36px}.main-title{font-size:32px}.main-subtitle{font-size:18px}}@media (max-width: 480px){.portfolio-grid{padding:0 10px}.item-content{padding:20px}.item-actions{flex-direction:column}.secondary-btn{width:100%}.modal-header{flex-direction:column;gap:15px}.cta-section{padding:60px 20px}.cta-container h2{font-size:28px}}
