.showcase-filter{padding: 24px 0 0 0;position: relative}.filter-controls{display: flex;flex-wrap: wrap;gap: 12px;justify-content: center;margin-bottom: 32px}.filter-btn{background: #f1f5f9;border: none;border-radius: 20px;padding: 8px 20px;font-size: 1rem;color: #4361ee;cursor: pointer;transition: background 0.2s, color 0.2s}.filter-btn.active,.filter-btn:hover{background: linear-gradient(90deg, #4361ee, #7209b7);color: #fff}.showcase-grid,.case-studies-showcase,.case-studies-grid{padding: var(--spacing-xxl) 0;background-color: var(--light-gray)}.case-studies-grid .grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px}.case-study-item{display: flex;flex-direction: column}@media (max-width: 1100px){.case-studies-grid .grid{grid-template-columns: repeat(2, 1fr)}}@media (max-width: 768px){.case-studies-grid .grid{grid-template-columns: 1fr}}.case-study-card{background-color: #fff;border-radius: 16px;overflow: hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;cursor: pointer;height: 100%;display: flex;flex-direction: column}.case-study-card:hover{transform: translateY(-8px);box-shadow: 0 12px 40px rgba(67, 97, 238, 0.15)}.case-study-image{height: 220px;overflow: hidden;position: relative}.case-study-image img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease}.case-study-card:hover .case-study-image img{transform: scale(1.08)}.case-study-image .overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(67, 97, 238, 0.85), rgba(114, 9, 183, 0.85));display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease}.case-study-card:hover .case-study-image .overlay{opacity: 1}.case-study-image .overlay .btn{background: #ffffff;color: #4361ee;padding: 12px 28px;border-radius: 30px;font-weight: 600;font-size: 0.95rem;text-decoration: none;transform: translateY(20px);opacity: 0;transition: all 0.3s ease 0.1s;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)}.case-study-card:hover .case-study-image .overlay .btn{transform: translateY(0);opacity: 1}.case-study-image .overlay .btn:hover{background: #f0f4ff;transform: scale(1.05)}.case-study-content{padding: 24px;flex: 1;display: flex;flex-direction: column}.case-study-content .industry{display: inline-block;padding: 6px 14px;background: linear-gradient(135deg, #4361ee, #7209b7);color: #fff;border-radius: 20px;font-size: 0.75rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 12px;width: fit-content}.case-study-content h3{font-size: 1.25rem;font-weight: 700;margin-bottom: 10px;color: #1a1a2e;line-height: 1.3}.case-study-content p{color: #6c757d;font-size: 0.9rem;line-height: 1.6;margin-bottom: 16px;flex: 1}.tech-icons{display: flex;gap: 8px;flex-wrap: wrap;margin-top: auto}.tech-icons .tech-name{display: inline-block;padding: 6px 12px;background: #f1f5f9;color: #4361ee;border-radius: 6px;font-size: 0.8rem;font-weight: 500;transition: all 0.2s ease}.tech-icons .tech-name:hover{background: #4361ee;color: #ffffff}.project-popup-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(26, 26, 46, 0.85);backdrop-filter: blur(8px);z-index: 9998;display: none;justify-content: center;align-items: center;padding: 24px}.project-popup-overlay.active{display: flex;animation: fadeIn 0.3s ease}@keyframes fadeIn{from{opacity: 0} to{opacity: 1}}.project-popup{background: #ffffff;border-radius: 24px;max-width: 950px;width: 100%;max-height: 90vh;overflow: hidden;position: relative;animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);display: flex;flex-direction: column}body.no-scroll{overflow: hidden !important;position: fixed;width: 100%;height: 100%}@keyframes slideUp{from{opacity: 0;transform: translateY(30px) scale(0.98)} to{opacity: 1;transform: translateY(0) scale(1)}}.project-popup-header{padding: 28px 36px;border-bottom: 1px solid rgba(0, 0, 0, 0.06);display: flex;justify-content: space-between;align-items: center;position: sticky;top: 0;background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);z-index: 10;border-radius: 24px 24px 0 0}.project-popup-header::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, #4361ee 0%, #7209b7 50%, #4361ee 100%);border-radius: 24px 24px 0 0}.project-popup-header h2{margin: 0;font-size: 1.35rem;font-weight: 700;color: #1a1a2e;letter-spacing: -0.02em}.project-popup-close{width: 36px;height: 36px;background: transparent;border: 1px solid #e9ecef;border-radius: 10px;font-size: 1.1rem;cursor: pointer;color: #6c757d;transition: all 0.2s ease;display: flex;align-items: center;justify-content: center}.project-popup-close:hover{background: #f8f9fa;border-color: #dee2e6;color: #1a1a2e}.project-popup-content{display: grid;grid-template-columns: 1fr 1fr;gap: 40px;padding: 36px;background: #ffffff;flex: 1;overflow: hidden;min-height: 0}.project-popup-media{position: relative;align-self: start;position: sticky;top: 0}.project-popup-image{width: 100%;height: auto;min-height: 280px;max-height: 350px;object-fit: cover;border-radius: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)}.carousel-container{position: relative;border-radius: 16px;overflow: hidden;background: #f8f9fa}.carousel-slides{position: relative}.carousel-slide{display: none}.carousel-slide.active{display: block}.carousel-slide img,.carousel-slide iframe{width: 100%;height: 300px;object-fit: cover;display: block}.carousel-slide .video-container{position: relative;padding-bottom: 56.25%;height: 0}.carousel-slide .video-container iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%}.carousel-nav{position: absolute;top: 50%;transform: translateY(-50%);width: 36px;height: 36px;background: #ffffff;border: 1px solid #e9ecef;border-radius: 10px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 0.9rem;color: #6c757d;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);transition: all 0.2s ease;z-index: 5}.carousel-nav:hover{background: #f8f9fa;border-color: #dee2e6;color: #1a1a2e}.carousel-nav.prev{left: 10px}.carousel-nav.next{right: 10px}.project-source-link{margin-top: 20px}.project-source-link .btn-outline{display: inline-flex;align-items: center;gap: 10px;padding: 12px 24px;background: #ffffff;color: #1a1a2e;border: 2px solid #e9ecef;border-radius: 12px;font-weight: 600;font-size: 0.95rem;text-decoration: none;transition: all 0.3s ease}.project-source-link .btn-outline i{font-size: 1.2rem}.project-source-link .btn-outline:hover{background: #1a1a2e;color: #ffffff;border-color: #1a1a2e;transform: translateY(-2px);box-shadow: 0 8px 20px rgba(26, 26, 46, 0.2)}.project-popup-details{display: flex;flex-direction: column;overflow-y: auto;max-height: calc(70vh - 140px);padding-right: 10px;scrollbar-width: none;-ms-overflow-style: none}.project-popup-details::-webkit-scrollbar{display: none}.project-popup-details .industry,.project-popup-details .category{display: inline-block;padding: 6px 16px;background: linear-gradient(135deg, #4361ee, #7209b7);color: #ffffff;border-radius: 20px;font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 16px;width: fit-content}.project-popup-details h3{font-size: 1.5rem;font-weight: 700;margin-bottom: 16px;color: #1a1a2e;line-height: 1.3}.project-popup-details>p{color: #6c757d;line-height: 1.75;margin-bottom: 24px;font-size: 1rem}.project-popup-details .implementation{margin-bottom: 24px}.project-popup-details .implementation h4{font-size: 1rem;font-weight: 700;color: #1a1a2e;margin-bottom: 10px;display: flex;align-items: center;gap: 8px}.project-popup-details .implementation h4::before{content: '⚙️';font-size: 0.9rem}.project-popup-details .implementation p{color: #6c757d;line-height: 1.7;font-size: 0.95rem}.project-popup-details .tech-stack{margin-bottom: 24px}.project-popup-details .tech-stack h4{font-size: 1rem;font-weight: 700;color: #1a1a2e;margin-bottom: 12px;display: flex;align-items: center;gap: 8px}.project-popup-details .tech-stack h4::before{content: '🛠️';font-size: 0.9rem}.tech-tags{display: flex;flex-wrap: wrap;gap: 10px}.tech-tags .tech-tag{display: inline-block;padding: 8px 16px;background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);color: #4361ee;border-radius: 10px;font-size: 0.85rem;font-weight: 600;border: 1px solid rgba(67, 97, 238, 0.1);transition: all 0.2s ease}.tech-tags .tech-tag:hover{background: linear-gradient(135deg, #4361ee, #7209b7);color: #ffffff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25)}.project-popup-details .results{background: linear-gradient(135deg, #f8f9ff 0%, #f8f9fa 100%);padding: 20px 24px;border-radius: 16px;border: 1px solid rgba(67, 97, 238, 0.08)}.project-popup-details .results h4{font-size: 1rem;font-weight: 700;margin-bottom: 14px;color: #1a1a2e;display: flex;align-items: center;gap: 8px}.project-popup-details .results h4::before{content: '📊';font-size: 0.9rem}.project-popup-details .results ul{padding-left: 0;margin: 0;list-style: none}.project-popup-details .results ul li{color: #444;margin-bottom: 10px;font-size: 0.95rem;line-height: 1.6;padding-left: 24px;position: relative}.project-popup-details .results ul li::before{content: '✓';position: absolute;left: 0;color: #4361ee;font-weight: bold}.project-popup-details .results ul li:last-child{margin-bottom: 0}.project-tech-tags{display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 24px}.project-tech-tags span{display: inline-block;padding: 8px 16px;background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);color: #4361ee;border-radius: 10px;font-size: 0.85rem;font-weight: 600;border: 1px solid rgba(67, 97, 238, 0.1)}.project-results{background: linear-gradient(135deg, #f8f9ff 0%, #f8f9fa 100%);padding: 20px 24px;border-radius: 16px;margin-bottom: 24px;border: 1px solid rgba(67, 97, 238, 0.08)}.project-results h4{font-size: 1rem;font-weight: 700;margin-bottom: 14px;color: #1a1a2e}.project-results ul{padding-left: 0;margin: 0;list-style: none}.project-results ul li{color: #444;margin-bottom: 10px;padding-left: 24px;position: relative}.project-results ul li::before{content: '✓';position: absolute;left: 0;color: #4361ee;font-weight: bold}@media (max-width: 768px){.project-popup-overlay{padding: 16px} .project-popup{border-radius: 20px;max-height: 90vh;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none} .project-popup::-webkit-scrollbar{display: none} .project-popup-header{padding: 20px 24px;border-radius: 20px 20px 0 0} .project-popup-header::before{border-radius: 20px 20px 0 0} .project-popup-header h2{font-size: 1.25rem} .project-popup-content{grid-template-columns: 1fr;padding: 24px;gap: 24px;overflow: visible} .project-popup-media{position: relative} .project-popup-details{overflow: visible;max-height: none;padding-right: 0} .project-popup-image{min-height: 200px;max-height: 250px} .carousel-slide img, .carousel-slide iframe{height: 220px}}.interactive-demo{padding: var(--spacing-xxl) 0;background-color: var(--light-gray)}.demo-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: var(--spacing-xl)}.demo-card{background: var(--light-gray);border-radius: var(--border-radius-lg);overflow: hidden;box-shadow: var(--shadow-md);transition: all var(--transition-normal);cursor: pointer}.demo-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-lg)}.demo-preview{height: 200px;overflow: hidden;position: relative}.demo-preview img{width: 100%;height: 100%;object-fit: cover}.play-overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.4);display: flex;justify-content: center;align-items: center;opacity: 0;transition: opacity 0.3s}.demo-card:hover .play-overlay{opacity: 1}.play-overlay i{font-size: 3rem;color: #fff}.demo-content{padding: var(--spacing-xl)}.demo-content h3{font-size: 1.2rem;margin-bottom: var(--spacing-sm)}.demo-content p{color: var(--text-muted);font-size: 0.95rem}.demo-popup-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.9);z-index: 9999;display: none;justify-content: center;align-items: center}.demo-popup-overlay.active{display: flex;padding: 20px}.demo-popup{position: relative;max-width: 900px;width: 100%}.demo-popup-close{position: absolute;top: -40px;right: 0;background: none;border: none;color: #fff;font-size: 2rem;cursor: pointer;transition: transform 0.2s}.demo-popup-close:hover{transform: scale(1.1)}.demo-video-wrapper{position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;border-radius: var(--border-radius-lg);background: #000}.demo-video-wrapper video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain}.showcase-particles{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1}@media (max-width: 992px){.project-popup-content{grid-template-columns: 1fr}}@media (max-width: 768px){.case-studies-grid{grid-template-columns: 1fr} .demo-grid{grid-template-columns: 1fr} .project-popup{max-height: 80vh} .project-popup-header{padding: var(--spacing-lg)} .project-popup-content{padding: var(--spacing-lg)}}