.projects-page{background:linear-gradient(135deg,#0a0d16 0%,#0e1222 100%);padding:8rem 0;position:relative;overflow:hidden}.projects-page:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 80%,#7aa2ff1a 0%,#0000 50%),radial-gradient(circle at 80% 20%,#bb9af71a 0%,#0000 50%);position:absolute;inset:0}.projects-page__inner{max-width:1400px;margin:0 auto;padding:0 2rem}.projects-page__header{text-align:center;margin-bottom:4rem}.projects-page__title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#7aa2ff 0%,#bb9af7 50%,#7aa2ff 100%) text;margin-bottom:1.5rem;font-size:4rem;font-weight:800}.projects-page__subtitle{color:#a9b1d6;max-width:600px;margin:0 auto;font-size:1.4rem}.projects-filter{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:3rem;display:flex}.filter-btn{color:#a9b1d6;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff29;border-radius:50px;padding:10px 20px;font-weight:600;transition:all .3s}.filter-btn:hover,.filter-btn.active{color:#0a0d16;background:#4d7cff;border-color:#4d7cff}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;display:grid}.project-card{opacity:1;background:#15151c;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;transition:opacity .3s,transform .3s;display:flex;position:relative;overflow:hidden}.project-card:hover{border-color:#7aa2ff4d;transform:translateY(-8px);box-shadow:0 20px 40px #0006}.project-card__media{cursor:pointer;background:#1a1a24;justify-content:center;align-items:center;width:100%;height:280px;padding:20px;display:flex;position:relative;overflow:hidden}.project-card__image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;display:block}.project-card__icon-placeholder{color:#fff;text-align:center;z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:15px;display:flex;position:relative}.project-icon{text-shadow:0 2px 10px #0000004d;font-size:3rem;line-height:1;transition:all .3s}.project-icon-label{color:#fff;text-shadow:0 1px 3px #0000004d;font-size:1.1rem;font-weight:600}.project-card:hover .project-icon{transform:scale(1.1)}.project-media--dating{background:linear-gradient(135deg,#ff6b9d,#c44569)}.project-media--environment{background:linear-gradient(135deg,#4ecdc4,#44a08d)}.project-media--business{background:linear-gradient(135deg,#fd746c,#ff9068)}.project-media--clones{background:linear-gradient(135deg,#6a11cb,#2575fc)}.project-media--management{background:linear-gradient(135deg,#ffeaa7,#fab1a0)}.project-media--games{background:linear-gradient(135deg,#a29bfe,#6c5ce7)}.project-media--dating:before,.project-media--environment:before,.project-media--business:before,.project-media--clones:before,.project-media--management:before,.project-media--games:before{content:"";opacity:.3;background-image:radial-gradient(circle at 25% 25%,#ffffff1a 2px,#0000 2px),radial-gradient(circle at 75% 75%,#ffffff1a 2px,#0000 2px);background-size:30px 30px;position:absolute;inset:0}.project-card__view-overlay{color:#fff;opacity:0;z-index:3;background:#4d7cff00;justify-content:center;align-items:center;width:100%;height:100%;text-decoration:none;transition:all .3s;display:flex;position:absolute;top:0;left:0}.project-card__view-overlay:hover{opacity:1;background:#4d7cffe6}.project-card__view-text{font-size:1.1rem;font-weight:600;transition:transform .3s;transform:translateY(10px)}.project-card__view-overlay:hover .project-card__view-text{transform:translateY(0)}.project-card__media:hover .project-card__view-overlay{opacity:1}.project-card__content{flex-direction:column;flex-grow:1;padding:24px;display:flex}.project-card__title{color:#eaeaea;margin:0 0 12px;font-size:1.4rem}.project-card__description{color:#a9b1d6;flex-grow:1;margin-bottom:20px;line-height:1.6}.project-card__tech{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.project-card__tech-item{color:#7aa2ff;background:#7aa2ff1a;border-radius:20px;padding:6px 12px;font-size:.85rem;font-weight:500}.project-card__link-container{text-align:center;border-top:1px solid #ffffff1a;margin-top:auto;padding-top:15px}.project-card__link{color:#4d7cff;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s}.project-card__link:hover{color:#7aa2ff}.modal{backdrop-filter:blur(10px);z-index:2000;opacity:0;background:#000000e6;width:100%;height:100%;padding:40px 20px;transition:opacity .4s cubic-bezier(.4,0,.2,1);display:none;position:fixed;top:0;left:0;overflow-y:auto}.modal--visible{opacity:1}.modal__content{background:linear-gradient(145deg,#15151c 0%,#1a1a24 100%);border:1px solid #7aa2ff1a;border-radius:20px;max-width:1000px;margin:0 auto;transition:transform .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;transform:translateY(-30px)scale(.95);box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #7aa2ff0d,inset 0 1px #ffffff1a}.modal--visible .modal__content{transform:translateY(0)scale(1)}.modal__close{color:#fff;cursor:pointer;z-index:10;backdrop-filter:blur(10px);background:linear-gradient(145deg,#4d7cff33,#7aa2ff1a);border:1px solid #7aa2ff33;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;font-size:1.5rem;transition:all .3s;display:flex;position:absolute;top:25px;right:25px}.modal__close:hover{background:linear-gradient(145deg,#4d7cff66,#7aa2ff4d);border-color:#4d7cff;transform:rotate(90deg)scale(1.1);box-shadow:0 0 20px #4d7cff4d}.modal__header{background:linear-gradient(#7aa2ff0d 0%,#0000 100%);padding:50px 50px 30px;position:relative}.modal__header:after{content:"";background:linear-gradient(90deg,#0000,#7aa2ff4d,#0000);height:1px;position:absolute;bottom:0;left:50px;right:50px}.modal__title{color:#fff;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#7aa2ff 0%,#bb9af7 100%) text;margin:0 0 15px;font-size:2.5rem;font-weight:700}.modal__subtitle{color:#a9b1d6;margin-bottom:20px;font-size:1.1rem;font-weight:400}.modal__carousel{background:linear-gradient(145deg,#0f0f15,#1a1a24);border:1px solid #7aa2ff1a;border-radius:16px;width:100%;height:500px;margin-bottom:40px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 20px 40px #0000004d}.modal__carousel-track{width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);display:flex}.modal__carousel-slide{opacity:0;flex:0 0 100%;justify-content:center;align-items:center;height:100%;padding:30px;transition:opacity .5s;display:flex}.modal__carousel-slide.active{opacity:1}.modal__image{object-fit:contain;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:100%;display:block;box-shadow:0 10px 30px #0000004d}.modal__carousel-nav{z-index:10;pointer-events:none;justify-content:space-between;padding:0 20px;display:flex;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.modal__carousel-nav-btn{pointer-events:all;color:#fff;cursor:pointer;backdrop-filter:blur(10px);background:linear-gradient(145deg,#4d7cff33,#7aa2ff1a);border:1px solid #7aa2ff4d;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.modal__carousel-nav-btn:before{content:"";opacity:0;z-index:-1;background:linear-gradient(135deg,#7aa2ff,#bb9af7);transition:opacity .3s;position:absolute;inset:0}.modal__carousel-nav-btn:hover{border-color:#7aa2ff;transform:scale(1.06);box-shadow:0 0 30px #7aa2ff66,0 0 60px #7aa2ff33}.modal__carousel-nav-btn:hover:before{opacity:1}.modal__carousel-nav-btn:hover .modal__carousel-nav-icon{transform:scale(1.2)}.modal__carousel-nav-btn:hover .modal__carousel-nav-text{opacity:1;transform:translate(0)}.modal__carousel-nav-icon{fill:#fff;width:24px;height:24px;transition:transform .3s}.modal__carousel-nav-text{color:#fff;opacity:0;font-size:.8rem;font-weight:600;transition:all .3s;position:absolute}.modal__carousel-prev .modal__carousel-nav-text{right:calc(100% + 10px);transform:translate(-10px)}.modal__carousel-next .modal__carousel-nav-text{left:calc(100% + 10px);transform:translate(10px)}.modal__carousel-dots{z-index:10;backdrop-filter:blur(10px);background:#0f0f15b3;border:1px solid #7aa2ff1a;border-radius:50px;gap:12px;padding:10px 20px;display:flex;position:absolute;bottom:25px;left:50%;transform:translate(-50%)}.modal__carousel-dot{cursor:pointer;background:0 0;border:2px solid #7aa2ff80;border-radius:50%;width:14px;height:14px;padding:0;transition:all .3s;position:relative;overflow:hidden}.modal__carousel-dot:hover{border-color:#7aa2ff;transform:scale(1.2)}.modal__carousel-dot.active{background:#7aa2ff33;border-color:#7aa2ff}.modal__carousel-dot-progress{background:linear-gradient(135deg,#7aa2ff,#bb9af7);border-radius:50%;width:100%;height:100%;transition:transform .3s;position:absolute;top:0;left:0;transform:scale(0)}.modal__carousel-dot.active .modal__carousel-dot-progress{transform:scale(.7)}.modal__carousel-counter{color:#fff;backdrop-filter:blur(10px);z-index:10;background:#0f0f15b3;border:1px solid #7aa2ff1a;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:1.1rem;font-weight:600;display:flex;position:absolute;bottom:25px;right:30px}.modal__carousel-current{color:#7aa2ff;font-size:1.3rem}.modal__carousel-divider{color:#ffffff4d}.modal__carousel-total{color:#ffffffb3}.modal__image-container{background:linear-gradient(145deg,#0f0f15,#1a1a24);border:1px solid #7aa2ff1a;border-radius:16px;justify-content:center;align-items:center;width:100%;height:500px;margin-bottom:40px;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 20px 40px #0000004d}.modal__image-single{object-fit:contain;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 10px 30px #0000004d}.modal__icon-display{color:#7aa2ff;text-align:center;background:linear-gradient(145deg,#7aa2ff0d,#bb9af70d);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:25px;width:100%;height:100%;padding:40px;display:flex}.modal-icon{opacity:.9;filter:drop-shadow(0 0 20px #7aa2ff4d);font-size:5rem}.modal__section{margin-bottom:35px}.modal__section-title{color:#fff;border-bottom:2px solid #7aa2ff33;margin-bottom:20px;padding-bottom:10px;font-size:1.5rem;font-weight:600;position:relative}.modal__section-title:after{content:"";background:linear-gradient(90deg,#7aa2ff,#bb9af7);width:60px;height:2px;position:absolute;bottom:-2px;left:0}.modal__features{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.modal__feature{background:linear-gradient(145deg,#7aa2ff0d,#bb9af70d);border:1px solid #7aa2ff1a;border-radius:12px;padding:20px;transition:all .3s}.modal__feature:hover{border-color:#7aa2ff4d;transform:translateY(-3px);box-shadow:0 10px 20px #0003}.modal__tech{flex-wrap:wrap;gap:12px;display:flex}.modal__tech-item{color:#7aa2ff;background:linear-gradient(145deg,#7aa2ff1a,#bb9af71a);border:1px solid #7aa2ff33;border-radius:20px;padding:10px 18px;font-size:.9rem;font-weight:500;transition:all .3s}.modal__tech-item:hover{background:linear-gradient(145deg,#7aa2ff33,#bb9af733);transform:translateY(-2px);box-shadow:0 5px 15px #7aa2ff1a}@media (width<=1024px){.modal__content{max-width:90%}.modal__carousel,.modal__image-container{height:400px}}@media (width<=768px){.projects-grid{grid-template-columns:1fr}.modal__header,.modal__body{padding:30px}.modal__title{font-size:2rem}.projects-page__title{font-size:2.5rem}.modal__carousel,.modal__image-container{height:300px}.modal__carousel-nav-btn{width:50px;height:50px}.modal__carousel-nav-text{display:none}.modal__carousel-counter{font-size:1rem;bottom:20px;right:20px}.modal__carousel-dots{padding:8px 15px;bottom:20px}.modal__carousel-dot{width:12px;height:12px}.modal__features{grid-template-columns:1fr}.project-icon{font-size:2.5rem}.project-icon-label{font-size:1rem}.modal__carousel-nav{padding:0 10px}}@media (width<=480px){.modal__carousel,.modal__image-container{height:250px}.modal__carousel-nav-btn{width:40px;height:40px}.modal__carousel-nav-icon{width:18px;height:18px}.modal__carousel-dots{gap:8px}.modal__carousel-dot{width:10px;height:10px}}.modal__carousel[data-slides="1"] .modal__carousel-nav,.modal__carousel[data-slides="1"] .modal__carousel-dots,.modal__carousel[data-slides="1"] .modal__carousel-counter{display:none}.modal__demo-link{margin:1.5rem 0}.modal__demo-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;align-items:center;gap:.75rem;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #667eea4d}.modal__demo-btn:hover{background:linear-gradient(135deg,#764ba2 0%,#667eea 100%);transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.modal__demo-icon{font-size:1.25rem}.modal__demo-arrow{margin-left:.25rem;transition:transform .3s}.modal__demo-btn:hover .modal__demo-arrow{transform:translate(4px)}.modal{padding:clamp(10px,2vw,28px)}.modal__content{max-width:min(94vw,1050px)}.modal__header{padding:34px clamp(22px,4vw,50px) 22px}.modal__body{padding:0 clamp(16px,3vw,42px) 42px}.modal__carousel,.modal__image-container{height:min(74vh,720px)}.modal__carousel-slide{padding:clamp(8px,1.6vw,22px)}.modal__image,.modal__image-single{object-fit:contain;cursor:pointer;width:100%;height:100%}.project-card__media{height:340px;padding:12px}.project-card__image{object-fit:contain;width:100%;height:100%}.modal__carousel-nav-btn:hover{transform:scale(1.06)}.image-zoom-overlay{z-index:4000;cursor:pointer;opacity:0;-webkit-user-select:none;user-select:none;touch-action:pan-y;background:#000000f5;justify-content:center;align-items:center;padding:24px;animation:.18s forwards imageZoomFadeIn;display:flex;position:fixed;inset:0}.image-zoom-overlay img{object-fit:contain;pointer-events:auto;border-radius:10px;width:auto;max-width:98vw;height:auto;max-height:96vh;box-shadow:0 30px 80px #000000b3}@keyframes imageZoomFadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.modal{padding:8px}.modal__content{max-width:100%}.modal__header,.modal__body{padding-left:16px;padding-right:16px}.modal__carousel,.modal__image-container{height:min(58vh,430px)}.project-card__media{height:260px}.modal__carousel-dots{max-width:70%;overflow-x:auto}.modal__carousel-counter{bottom:18px;right:16px}.modal__carousel-nav{padding:0 10px}}@media (width<=480px){.modal__carousel,.modal__image-container{height:52vh}.project-card__media{height:230px}.image-zoom-overlay{padding:10px}}