*{margin: 0;padding: 0;box-sizing: border-box} body{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background-color: #0a0a0a;color: #ffffff;line-height: 1.6;overflow-x: hidden} .container{max-width: 1200px;margin: 0 auto;padding: 0 20px;text-align: center} .navbar{position: fixed;top: 0;width: 100%;background: rgba(10, 10, 10, 0.95);backdrop-filter: blur(10px);border-bottom: 1px solid rgba(255, 255, 255, 0.1);z-index: 1000;padding: 1rem 0} .nav-container{max-width: 1200px;margin: 0 auto;padding: 0 20px;display: flex;justify-content: space-between;align-items: center;position: relative} .nav-logo{display: flex;align-items: center;z-index: 1001} .nav-logo h2{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-weight: 700;font-size: 1.5rem} .mobile-menu-toggle{display: none;flex-direction: column;cursor: pointer;padding: 5px;z-index: 1001} .mobile-menu-toggle span{width: 25px;height: 3px;background: #ffffff;margin: 3px 0;transition: 0.3s;border-radius: 2px} .mobile-menu-toggle.active span:nth-child(1){transform: rotate(-45deg) translate(-5px, 6px)} .mobile-menu-toggle.active span:nth-child(2){opacity: 0} .mobile-menu-toggle.active span:nth-child(3){transform: rotate(45deg) translate(-5px, -6px)} .nav-menu{display: flex;list-style: none;gap: 2rem;align-items: center} .nav-menu a{color: #ffffff;text-decoration: none;font-weight: 500;transition: color 0.3s ease;padding: 0.5rem 1rem} .nav-menu a:hover{color: #667eea} .nav-cta{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 25px;padding: 0.75rem 1.5rem !important;transition: transform 0.3s ease} .nav-cta:hover{transform: translateY(-2px);color: #ffffff !important} .language-switcher{margin-left: 1rem} .lang-btn{background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 20px;padding: 0.5rem 1rem;color: #ffffff;cursor: pointer;transition: all 0.3s ease;font-size: 0.9rem;font-weight: 500} .lang-btn:hover{background: rgba(255, 255, 255, 0.2);transform: translateY(-1px)} .hero{min-height: 100vh;display: flex;flex-direction: column;justify-content: space-between;background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 30%, rgba(10, 10, 10, 1) 70%);position: relative;overflow: hidden;padding: 0} .hero-container{flex: 1;display: flex;align-items: center;justify-content: center;width: 100%;margin: 0 auto;padding: 0 20px;text-align: center} .hero-content{display: flex;flex-direction: column;align-items: center;gap: 2.5rem;width: 100%} .hero-logo{display: flex;align-items: center;gap: 1rem;margin-bottom: 1rem} .hero-title{font-size: 2.5rem !important;font-weight: 600;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;-webkit-background-clip: text !important;-webkit-text-fill-color: transparent !important;background-clip: text !important;color: transparent !important;margin: 0;letter-spacing: -0.02em} .main-input-container{width: 1000px;max-width: 90vw} .input-box{background: rgba(40, 44, 52, 1);border: 1px solid rgba(255, 255, 255, 0.15);border-radius: 12px;padding: 2.5rem 3rem;backdrop-filter: blur(20px);transition: all 0.3s ease;cursor: text;display: flex;align-items: center;position: relative;min-height: 90px;font-size: 1.2rem;width: 100%} .input-box:hover{border-color: rgba(255, 255, 255, 0.25);background: rgba(45, 49, 57, 1)} .input-box.focused{border-color: rgba(102, 126, 234, 0.5);background: rgba(50, 54, 62, 1);box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1)} .main-input{background: transparent;border: none;outline: none;color: #ffffff;font-size: 1.2rem;font-weight: 400;width: 100%;font-family: inherit} .main-input::placeholder{color: rgba(255, 255, 255, 0.5)} .typing-placeholder{color: rgba(255, 255, 255, 0.7);font-size: 1.2rem;font-weight: 400;flex: 1} .cursor{color: rgba(255, 255, 255, 0.8);font-size: 1.2rem;font-weight: 400;animation: blink 1s infinite;margin-left: 2px} @keyframes blink{0%, 50%{opacity: 1} 51%, 100%{opacity: 0} } .input-arrow{color: rgba(255, 255, 255, 0.7);display: flex;align-items: flex-end;justify-content: center;transition: all 0.3s ease;cursor: pointer;align-self: flex-end;margin-bottom: 2px} .input-box:hover .input-arrow{color: rgba(255, 255, 255, 0.9);transform: scale(1.1)} .user-input-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);backdrop-filter: blur(10px);z-index: 1000;display: flex;align-items: center;justify-content: center} .user-input-modal{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 2rem;backdrop-filter: blur(20px);width: 90%;max-width: 500px} .user-textarea{width: 100%;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 1rem;color: #ffffff;font-size: 1rem;line-height: 1.5;resize: none;outline: none;font-family: inherit;margin-bottom: 1.5rem} .user-textarea::placeholder{color: #a0a0a0;opacity: 0.8} .modal-actions{display: flex;gap: 1rem;justify-content: flex-end} .btn-cancel, .btn-confirm{padding: 0.75rem 1.5rem;border: none;border-radius: 10px;font-size: 0.9rem;font-weight: 500;cursor: pointer;transition: all 0.3s ease} .btn-cancel{background: rgba(255, 255, 255, 0.1);color: #ffffff;border: 1px solid rgba(255, 255, 255, 0.2)} .btn-cancel:hover{background: rgba(255, 255, 255, 0.2)} .btn-confirm{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white} .btn-confirm:hover{transform: translateY(-1px);box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3)} .hero-bottom{padding: 2rem 0 3rem 0;text-align: center} .bottom-text{margin-bottom: 1.5rem} .bottom-text span{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;color: rgba(255, 255, 255, 0.6);font-size: 0.9rem;font-weight: 400;letter-spacing: normal;line-height: 1.4} .company-logos{display: flex;align-items: center;justify-content: center;gap: 3rem;flex-wrap: wrap;opacity: 0.6;max-width: 1200px;margin: 0 auto;padding: 0 20px} .logo-item{color: rgba(255, 255, 255, 0.7);font-size: 1rem;font-weight: 500;display: flex;align-items: center;gap: 0.5rem;transition: opacity 0.3s ease} .logo-item:hover{opacity: 1} .logo-item:first-child{font-family: 'Times New Roman', serif;font-size: 1.2rem;font-weight: 400} .logo-item:nth-child(3){font-weight: 600;letter-spacing: 0.05em} .logo-item:nth-child(4){font-weight: 300;font-style: italic} .logo-item:last-child{font-weight: 400} .suggestion-tags{display: flex;flex-wrap: wrap;align-items: center;gap: 0.75rem;margin-bottom: 2rem} .suggestion-label{color: #a0a0a0;font-size: 0.9rem;font-weight: 500} .suggestion-tag{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 0.4rem 0.8rem;color: #ffffff;font-size: 0.85rem;cursor: pointer;transition: all 0.3s ease;backdrop-filter: blur(10px)} .suggestion-tag:hover{background: rgba(102, 126, 234, 0.2);border-color: rgba(102, 126, 234, 0.4);transform: translateY(-2px)} .hero-stats{display: flex;gap: 3rem;margin-top: 2rem} .stat-item{text-align: center} .stat-number{display: block;font-size: 2rem;font-weight: 700;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 0.25rem} .stat-label{color: #a0a0a0;font-size: 0.9rem;font-weight: 500} .btn-primary, .btn-secondary{padding: 1rem 2rem;border: none;border-radius: 50px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;text-decoration: none;display: inline-block} .btn-primary{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white} .btn-primary:hover{transform: translateY(-3px);box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3)} .btn-secondary{background: transparent;color: #ffffff;border: 2px solid rgba(255, 255, 255, 0.2)} .btn-secondary:hover{background: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.4)} .hero-visual{display: flex;justify-content: center;align-items: center;position: relative} .ai-brain-container{width: 400px;height: 400px;position: relative;display: flex;align-items: center;justify-content: center} .ai-brain{width: 200px;height: 200px;position: relative;z-index: 2} .brain-core{width: 60px;height: 60px;background: radial-gradient(circle, #667eea 0%, #764ba2 70%);border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: brainPulse 3s ease-in-out infinite;box-shadow: 0 0 40px rgba(102, 126, 234, 0.8)} .neural-layer{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)} .layer-1{width: 120px;height: 120px} .layer-2{width: 160px;height: 160px} .layer-3{width: 200px;height: 200px} .neuron-dot{width: 8px;height: 8px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50%;position: absolute;animation: neuronFlicker 2s ease-in-out infinite;box-shadow: 0 0 10px rgba(102, 126, 234, 0.6)} .layer-1 .neuron-dot:nth-child(1){top: 0;left: 50%;transform: translateX(-50%);animation-delay: 0s} .layer-1 .neuron-dot:nth-child(2){right: 0;top: 50%;transform: translateY(-50%);animation-delay: 0.5s} .layer-1 .neuron-dot:nth-child(3){bottom: 0;left: 50%;transform: translateX(-50%);animation-delay: 1s} .layer-1 .neuron-dot:nth-child(4){left: 0;top: 50%;transform: translateY(-50%);animation-delay: 1.5s} .layer-2 .neuron-dot:nth-child(1){top: 20px;right: 20px;animation-delay: 0.2s} .layer-2 .neuron-dot:nth-child(2){bottom: 20px;right: 20px;animation-delay: 0.7s} .layer-2 .neuron-dot:nth-child(3){bottom: 20px;left: 20px;animation-delay: 1.2s} .layer-3 .neuron-dot:nth-child(1){top: 10px;left: 50%;transform: translateX(-50%);animation-delay: 0.3s} .layer-3 .neuron-dot:nth-child(2){bottom: 10px;left: 50%;transform: translateX(-50%);animation-delay: 0.8s} .data-stream{position: absolute;width: 2px;height: 40px;background: linear-gradient(180deg, transparent, #667eea, transparent);animation: streamFlow 2s ease-in-out infinite} .stream-1{top: 30px;left: 50%;transform: translateX(-50%);animation-delay: 0s} .stream-2{top: 50%;right: 30px;transform: translateY(-50%) rotate(90deg);animation-delay: 0.7s} .stream-3{bottom: 30px;left: 50%;transform: translateX(-50%) rotate(180deg);animation-delay: 1.4s} .orbit-ring{position: absolute;border: 1px solid rgba(102, 126, 234, 0.3);border-radius: 50%;animation: orbitRotate 20s linear infinite} .ring-1{width: 250px;height: 250px;animation-duration: 15s} .ring-2{width: 300px;height: 300px;animation-duration: 25s;animation-direction: reverse} .ring-3{width: 350px;height: 350px;animation-duration: 35s} .hero-background{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: 0} .gradient-orb{position: absolute;border-radius: 50%;filter: blur(120px);opacity: 0.4;animation: float 25s ease-in-out infinite} .orb-1{width: 600px;height: 600px;background: radial-gradient(circle, #667eea 0%, transparent 60%);top: -10%;left: -10%;animation-delay: 0s} .orb-2{width: 400px;height: 400px;background: radial-gradient(circle, #764ba2 0%, transparent 60%);bottom: -10%;right: -10%;animation-delay: 8s} .orb-3{width: 300px;height: 300px;background: radial-gradient(circle, #4ade80 0%, transparent 60%);top: 50%;left: 50%;transform: translate(-50%, -50%);animation-delay: 16s} @keyframes brainPulse{0%, 100%{transform: translate(-50%, -50%) scale(1);box-shadow: 0 0 40px rgba(102, 126, 234, 0.8)} 50%{transform: translate(-50%, -50%) scale(1.1);box-shadow: 0 0 60px rgba(102, 126, 234, 1)} } @keyframes neuronFlicker{0%, 100%{opacity: 0.6;transform: scale(1)} 50%{opacity: 1;transform: scale(1.2)} } @keyframes streamFlow{0%{opacity: 0;transform: translateY(-20px)} 50%{opacity: 1} 100%{opacity: 0;transform: translateY(20px)} } @keyframes orbitRotate{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } @keyframes matrixMove{0%{transform: translateX(0)} 100%{transform: translateX(100px)} } @keyframes float{0%, 100%{transform: translateY(0px)} 50%{transform: translateY(-20px)} } @keyframes pulse{0%, 100%{opacity: 0.3} 50%{opacity: 1} } .features, .solutions, .about, .contact{padding: 6rem 0} .section-title{font-size: 2.5rem;font-weight: 700;text-align: center;margin-bottom: 3rem;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .features{background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);position: relative;overflow: hidden;padding: 6rem 0;display: flex;flex-direction: column;align-items: center} .features-slider-container{position: relative;width: 1040px;max-width: calc(100vw - 40px);margin: 0 auto;padding: 0 20px;overflow: hidden;cursor: grab;touch-action: pan-y;-webkit-overflow-scrolling: touch} .features-slider-container:active{cursor: grabbing} .features-slider-container.dragging .features-slider{transition: none} .features-slider{display: flex;gap: 2rem;padding: 2rem 0;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);width: calc(340px * 5);will-change: transform;justify-content: flex-start} .feature-slide{min-width: 320px;max-width: 320px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 2rem;backdrop-filter: blur(10px);transition: all 0.4s ease;position: relative;overflow: hidden} .feature-slide::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);transition: left 0.6s ease} .feature-slide:hover::before{left: 100%} .feature-slide:hover{transform: translateY(-10px);border-color: rgba(102, 126, 234, 0.4);box-shadow: 0 25px 50px rgba(102, 126, 234, 0.2)} .feature-icon-large{width: 100px;height: 100px;margin: 0 auto 1.5rem;position: relative;display: flex;align-items: center;justify-content: center} .feature-content{text-align: left} .feature-content h3{font-size: 1.4rem;font-weight: 600;margin-bottom: 1rem;color: #ffffff;text-align: center !important} .feature-content p{color: #a0a0a0;line-height: 1.6;font-size: 0.95rem;margin-bottom: 1.5rem;text-align: left} .feature-tags{display: flex;flex-wrap: wrap;gap: 0.5rem} .tag{background: rgba(102, 126, 234, 0.2);color: #667eea;padding: 0.3rem 0.8rem;border-radius: 15px;font-size: 0.8rem;font-weight: 500;border: 1px solid rgba(102, 126, 234, 0.3)} .slider-controls{display: flex;justify-content: center;align-items: center;gap: 2rem;margin-top: 2rem} .slider-btn{width: 50px;height: 50px;border: 1px solid rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.05);color: #ffffff;border-radius: 50%;font-size: 1.5rem;cursor: pointer;transition: all 0.3s ease;backdrop-filter: blur(10px);outline: none} .slider-btn:hover{background: rgba(102, 126, 234, 0.2);border-color: rgba(102, 126, 234, 0.4);transform: scale(1.1)} .slider-btn:active{transform: scale(0.95)} .slider-btn:disabled{opacity: 0.5;cursor: not-allowed} .slider-dots{display: flex;gap: 0.8rem} .dot{width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.3);cursor: pointer;transition: all 0.3s ease} .dot.active, .dot:hover{background: #667eea;transform: scale(1.2)} .neural-network-large{width: 100px;height: 100px;position: relative} .neuron-large{width: 20px;height: 20px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50%;position: absolute;animation: neuronPulseLarge 2s ease-in-out infinite;box-shadow: 0 0 20px rgba(102, 126, 234, 0.6)} .neuron-large:nth-child(1){top: 15px;left: 15px;animation-delay: 0s} .neuron-large:nth-child(2){top: 15px;right: 15px;animation-delay: 0.3s} .neuron-large:nth-child(3){bottom: 15px;left: 50%;transform: translateX(-50%);animation-delay: 0.6s} .connection-large{position: absolute;height: 3px;background: linear-gradient(90deg, #667eea, #764ba2);animation: dataFlowLarge 2s ease-in-out infinite;border-radius: 2px} .connection-large:nth-child(4){top: 25px;left: 35px;width: 30px} .connection-large:nth-child(5){top: 45px;left: 25px;width: 40px;transform: rotate(-45deg)} .model-control{width: 100px;height: 100px;position: relative;display: flex;align-items: center;justify-content: center} .control-panel{width: 60px;height: 60px;background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));border-radius: 10px;position: relative;border: 1px solid rgba(102, 126, 234, 0.3);display: flex;flex-direction: column;align-items: center;justify-content: space-around;padding: 8px} .control-knob{width: 12px;height: 12px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50%;animation: controlPulse 2s ease-in-out infinite} .control-slider{width: 30px;height: 3px;background: rgba(102, 126, 234, 0.4);border-radius: 2px;position: relative} .control-slider::after{content: '';position: absolute;left: 0;top: 0;width: 60%;height: 100%;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 2px;animation: sliderMove 3s ease-in-out infinite} .control-button{width: 20px;height: 6px;background: rgba(102, 126, 234, 0.6);border-radius: 3px;animation: buttonBlink 1.5s ease-in-out infinite} .model-output{position: absolute;right: -25px;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;gap: 4px} .output-stream{width: 20px;height: 2px;background: linear-gradient(90deg, transparent, #667eea, transparent);animation: streamFlow 2s linear infinite} .output-stream:nth-child(2){animation-delay: 0.5s} @keyframes controlPulse{0%, 100%{transform: scale(1);opacity: 0.8} 50%{transform: scale(1.2);opacity: 1} } @keyframes sliderMove{0%, 100%{width: 60%} 50%{width: 90%} } @keyframes buttonBlink{0%, 100%{opacity: 0.6} 50%{opacity: 1} } @keyframes streamFlow{0%{transform: translateX(-100%);opacity: 0} 50%{opacity: 1} 100%{transform: translateX(100%);opacity: 0} } transform: translate(-50%, -50%);animation: collaborationPulse 2s ease-in-out infinite} .enterprise-ready{width: 100px;height: 100px;position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column} .workflow-container{display: flex;align-items: center;justify-content: center;gap: 8px;margin-bottom: 10px} .workflow-step{width: 16px;height: 16px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 4px;position: relative;animation: workflowPulse 2s ease-in-out infinite} .workflow-step:nth-child(1){animation-delay: 0s} .workflow-step:nth-child(3){animation-delay: 0.5s} .workflow-step:nth-child(5){animation-delay: 1s} .workflow-arrow{width: 8px;height: 2px;background: rgba(102, 126, 234, 0.6);position: relative} .workflow-arrow::after{content: '';position: absolute;right: -3px;top: -2px;width: 0;height: 0;border-left: 4px solid rgba(102, 126, 234, 0.6);border-top: 3px solid transparent;border-bottom: 3px solid transparent} .workflow-data-flow{width: 80px;height: 3px;background: rgba(102, 126, 234, 0.2);border-radius: 2px;position: relative;overflow: hidden} .data-flow-line{position: absolute;top: 0;left: -100%;width: 30px;height: 100%;background: linear-gradient(90deg, transparent, #667eea, transparent);animation: dataFlowMove 2s linear infinite} @keyframes workflowPulse{0%, 100%{transform: scale(1);opacity: 0.7} 50%{transform: scale(1.2);opacity: 1} } @keyframes dataFlowMove{0%{left: -100%} 100%{left: 100%} } @keyframes pipelineFlow{0%{left: -100%} 100%{left: 100%} } @keyframes pipelineStep{0%, 100%{transform: scale(1);opacity: 0.6} 50%{transform: scale(1.3);opacity: 1} } .data-sharing{width: 100px;height: 100px;position: relative;display: flex;align-items: center;justify-content: center} .globe-icon{width: 50px;height: 50px;border: 2px solid #667eea;border-radius: 50%;position: relative;animation: globeRotate 4s linear infinite} .globe-icon::before{content: '';position: absolute;top: 50%;left: 50%;width: 30px;height: 2px;background: #667eea;transform: translate(-50%, -50%)} .privacy-shield{position: absolute;top: 10px;right: 10px;width: 20px;height: 20px;background: #4ade80;border-radius: 50%;animation: shieldPulse 2s ease-in-out infinite} .data-particles{position: absolute;width: 100%;height: 100%} .particle{width: 4px;height: 4px;background: #667eea;border-radius: 50%;position: absolute;animation: particleOrbit 3s linear infinite} .particle:nth-child(1){top: 20%;left: 20%;animation-delay: 0s} .particle:nth-child(2){top: 20%;right: 20%;animation-delay: 1s} .particle:nth-child(3){bottom: 20%;left: 50%;animation-delay: 2s} .quality-assurance{width: 100px;height: 100px;position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column} .quality-circle{width: 60px;height: 60px;border: 3px solid rgba(102, 126, 234, 0.3);border-top-color: #667eea;border-radius: 50%;animation: qualityRotate 2s linear infinite;margin-bottom: 1rem} .quality-metrics{display: flex;flex-direction: column;gap: 0.3rem;width: 40px} .metric-bar{height: 4px;background: linear-gradient(90deg, #667eea, #764ba2);border-radius: 2px;animation: metricPulse 2s ease-in-out infinite} .metric-bar:nth-child(1){width: 100%;animation-delay: 0s} .metric-bar:nth-child(2){width: 80%;animation-delay: 0.5s} .metric-bar:nth-child(3){width: 90%;animation-delay: 1s} @keyframes neuronPulseLarge{0%, 100%{transform: scale(1);opacity: 0.8} 50%{transform: scale(1.2);opacity: 1} } @keyframes dataFlowLarge{0%{opacity: 0.3} 50%{opacity: 1} 100%{opacity: 0.3} } @keyframes collaborationPulse{0%, 100%{transform: translate(-50%, -50%) scale(1);opacity: 0.6} 50%{transform: translate(-50%, -50%) scale(1.1);opacity: 1} } @keyframes globeRotate{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } @keyframes particleOrbit{0%{transform: rotate(0deg) translateX(30px) rotate(0deg)} 100%{transform: rotate(360deg) translateX(30px) rotate(-360deg)} } @keyframes qualityRotate{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } @keyframes metricPulse{0%, 100%{opacity: 0.6} 50%{opacity: 1} } .neural-network{width: 80px;height: 80px;position: relative} .neuron{width: 12px;height: 12px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50%;position: absolute;animation: neuronPulse 2s ease-in-out infinite;box-shadow: 0 0 15px rgba(102, 126, 234, 0.6)} .neuron:nth-child(1){top: 10px;left: 10px;animation-delay: 0s} .neuron:nth-child(2){top: 10px;right: 10px;animation-delay: 0.3s} .neuron:nth-child(3){bottom: 10px;left: 50%;transform: translateX(-50%);animation-delay: 0.6s} .connection{position: absolute;height: 2px;background: linear-gradient(90deg, #667eea, #764ba2);animation: dataFlow 2s ease-in-out infinite} .connection:nth-child(4){top: 16px;left: 22px;width: 36px;transform: rotate(0deg)} .connection:nth-child(5){top: 35px;left: 16px;width: 30px;transform: rotate(-45deg)} @keyframes neuronPulse{0%, 100%{transform: scale(1);opacity: 0.8} 50%{transform: scale(1.3);opacity: 1} } @keyframes dataFlow{0%{opacity: 0.3} 50%{opacity: 1} 100%{opacity: 0.3} } .security-shield{width: 80px;height: 80px;position: relative;display: flex;align-items: center;justify-content: center} .shield-core{width: 30px;height: 35px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;position: relative;z-index: 3} .shield-ring{position: absolute;border: 2px solid rgba(102, 126, 234, 0.4);border-radius: 50%;animation: shieldPulse 3s ease-in-out infinite} .shield-ring:nth-child(2){width: 50px;height: 50px;animation-delay: 0s} .shield-ring:nth-child(3){width: 70px;height: 70px;animation-delay: 1s} @keyframes shieldPulse{0%, 100%{transform: scale(1);opacity: 0.6} 50%{transform: scale(1.2);opacity: 0.2} } .cloud-architecture{width: 80px;height: 80px;position: relative} .cloud-node{width: 16px;height: 16px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50%;position: absolute;animation: cloudFloat 4s ease-in-out infinite} .cloud-node:nth-child(1){top: 15px;left: 15px;animation-delay: 0s} .cloud-node:nth-child(2){top: 15px;right: 15px;animation-delay: 1.3s} .cloud-node:nth-child(3){bottom: 15px;left: 50%;transform: translateX(-50%);animation-delay: 2.6s} .data-flow{position: absolute;top: 50%;left: 50%;width: 60px;height: 60px;border: 2px solid rgba(102, 126, 234, 0.3);border-radius: 50%;border-top-color: #667eea;animation: rotate 2s linear infinite;transform: translate(-50%, -50%)} @keyframes cloudFloat{0%, 100%{transform: translateY(0px)} 50%{transform: translateY(-8px)} } @keyframes rotate{0%{transform: translate(-50%, -50%) rotate(0deg)} 100%{transform: translate(-50%, -50%) rotate(360deg)} } .api-integration{width: 80px;height: 80px;position: relative;display: flex;align-items: center;justify-content: center} .api-circle{width: 20px;height: 20px;background: linear-gradient(135deg, #667eea, #764ba2);border-radius: 50%;position: relative;z-index: 2} .api-line{position: absolute;width: 30px;height: 2px;background: linear-gradient(90deg, #667eea, transparent);animation: apiPulse 2s ease-in-out infinite} .api-line:nth-child(2){top: 50%;left: 25px;animation-delay: 0s} .api-line:nth-child(3){top: 30%;right: 25px;transform: rotate(45deg);animation-delay: 0.5s} .api-line:nth-child(4){bottom: 30%;right: 25px;transform: rotate(-45deg);animation-delay: 1s} @keyframes apiPulse{0%, 100%{opacity: 0.3;transform: scaleX(1)} 50%{opacity: 1;transform: scaleX(1.2)} } .quality-meter{width: 80px;height: 80px;position: relative;display: flex;align-items: center;justify-content: center} .meter-arc{width: 60px;height: 30px;border: 3px solid rgba(102, 126, 234, 0.3);border-bottom: none;border-radius: 60px 60px 0 0;position: relative} .meter-needle{position: absolute;bottom: 0;left: 50%;width: 2px;height: 25px;background: #667eea;transform-origin: bottom;animation: meterSweep 3s ease-in-out infinite;transform: translateX(-50%) rotate(-45deg)} .meter-center{position: absolute;bottom: -2px;left: 50%;width: 6px;height: 6px;background: #764ba2;border-radius: 50%;transform: translateX(-50%)} @keyframes meterSweep{0%{transform: translateX(-50%) rotate(-45deg)} 50%{transform: translateX(-50%) rotate(45deg)} 100%{transform: translateX(-50%) rotate(-45deg)} } .compliance-check{width: 80px;height: 80px;position: relative;display: flex;align-items: center;justify-content: center} .check-mark{width: 30px;height: 30px;position: relative;z-index: 2} .check-mark::before{content: '✓';font-size: 24px;color: #667eea;font-weight: bold;animation: checkPulse 2s ease-in-out infinite} .compliance-ring{position: absolute;width: 60px;height: 60px;border: 2px solid rgba(102, 126, 234, 0.4);border-radius: 50%;animation: complianceRotate 4s linear infinite} @keyframes checkPulse{0%, 100%{transform: scale(1)} 50%{transform: scale(1.2)} } @keyframes complianceRotate{0%{transform: rotate(0deg);border-color: rgba(102, 126, 234, 0.4)} 50%{border-color: rgba(118, 75, 162, 0.6)} 100%{transform: rotate(360deg);border-color: rgba(102, 126, 234, 0.4)} } .solutions{background: #0a0a0a} .solutions-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 2rem} .solution-item{background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 2rem;transition: all 0.3s ease} .solution-item:hover{transform: translateY(-5px);border-color: rgba(102, 126, 234, 0.3)} .solution-item h3{font-size: 1.5rem;font-weight: 600;margin-bottom: 1rem;color: #ffffff} .solution-item p{color: #a0a0a0;line-height: 1.6} .about{background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%)} .about-text{font-size: 1.2rem;color: #a0a0a0;text-align: center;max-width: 800px;margin: 0 auto;line-height: 1.8} .contact{background: #0a0a0a} .contact-content{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: start} .contact-info h3{font-size: 2rem;font-weight: 600;margin-bottom: 1rem;color: #ffffff} .contact-info p{color: #a0a0a0;margin-bottom: 2rem;line-height: 1.6} .contact-details p{margin-bottom: 0.5rem;font-size: 1.1rem} .contact-form{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 2rem;backdrop-filter: blur(10px)} .contact-form input, .contact-form textarea{width: 100%;padding: 1rem;margin-bottom: 1rem;background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 10px;color: #ffffff;font-size: 1rem} .contact-form input::placeholder, .contact-form textarea::placeholder{color: #a0a0a0} .contact-form input:focus, .contact-form textarea:focus{outline: none;border-color: #667eea;box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2)} .footer{background: #111111;border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 3rem 0 1rem} .footer-content{display: grid;grid-template-columns: 1fr 2fr;gap: 3rem;margin-bottom: 2rem} .footer-logo h3{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-size: 1.5rem;margin-bottom: 0.5rem} .footer-logo p{color: #a0a0a0} .footer-links{display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem} .footer-column h4{color: #ffffff;font-weight: 600;margin-bottom: 1rem} .footer-column a{display: block;color: #a0a0a0;text-decoration: none;margin-bottom: 0.5rem;transition: color 0.3s ease} .footer-column a:hover{color: #667eea} .footer-bottom{text-align: center;padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);color: #a0a0a0} @media (max-width: 768px){.hero-title{font-size: 2.5rem} .hero-logo{flex-direction: column;gap: 0.5rem} .nav-menu{display: none} .contact-content{grid-template-columns: 1fr;gap: 2rem} .footer-content{grid-template-columns: 1fr;gap: 2rem} .footer-links{grid-template-columns: 1fr;gap: 1rem} .features-slider-container{width: 100%;padding: 0 10px} .feature-slide{min-width: 280px;max-width: 280px} .features-slider{width: calc(300px * 5)} .slider-controls{gap: 1rem} .slider-btn{width: 40px;height: 40px;font-size: 1.2rem} .hero-container{padding: 0 15px} .main-input-container{width: 95%} .input-box{padding: 1.4rem 1.5rem;min-height: 70px;font-size: 1rem} .main-input{font-size: 1rem} .typing-placeholder{font-size: 1rem} .company-logos{gap: 2rem;padding: 0 15px} .company-logos{gap: 2rem} .logo-item{font-size: 0.9rem} .user-input-modal{margin: 1rem;padding: 1.5rem} .gradient-orb{filter: blur(80px)} } .contact-form{max-width: 500px;margin: 0 auto} .form-row{display: flex;gap: 1rem;margin-bottom: 0} .form-group{flex: 1;margin-bottom: 0.8rem} .form-group label{display: block;margin-bottom: 0.3rem;color: #ffffff;font-weight: 500;font-size: 0.85rem;text-align: left} .required{color: #ff6b6b} .form-group input, .form-group select, .form-group textarea{width: 100%;padding: 0.5rem 0.75rem;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 6px;background: rgba(255, 255, 255, 0.05);color: #ffffff;font-size: 0.85rem;transition: all 0.3s ease;box-sizing: border-box;height: 42px} .form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline: none;border-color: #667eea;background: rgba(255, 255, 255, 0.1);box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2)} .form-group select{cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 0.7rem center;background-size: 1rem;padding-right: 2.5rem} .form-group select option{background: #1a1a1a;color: #ffffff} .checkbox-group{margin: 0.8rem 0;text-align: left} .checkbox-label{display: flex;align-items: flex-start;gap: 0.5rem;cursor: pointer;font-size: 0.8rem;line-height: 1.3;color: rgba(255, 255, 255, 0.8)} .checkbox-label input[type="checkbox"]{width: 16px;height: 16px;margin: 0;margin-top: 2px;flex-shrink: 0} .checkbox-label a{color: #667eea;text-decoration: underline;cursor: pointer;position: relative;z-index: 10;transition: color 0.3s ease} .checkbox-label a:hover{color: #764ba2;text-decoration: underline} @media (max-width: 768px){.form-row{flex-direction: column;gap: 0} .contact-form{padding: 0 1rem} } .for m-group textarea{resize: vertical;min-height: 80px} .btn-primary{width: 100%;padding: 0.8rem 2rem;margin-top: 0.3rem;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;border-radius: 6px;color: white;font-weight: 600;font-size: 0.9rem;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 0.5px} .btn-primary:hover{transform: translateY(-1px);box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3)} .features .feature-slide h3{text-align: center !important} .features .feature-slide p{text-align: left !important} .features .feature-slide .feature-tags{justify-content: flex-start !important} .form-group textarea{height: auto;min-height: 70px;resize: vertical} .form-group select{height: 42px;line-height: 1.2} .lab-item{display: flex;align-items: center;gap: 1rem;padding: 1rem 1.5rem;background: transparent;border: none;transition: all 0.3s ease;min-width: 300px} .lab-item:hover{background: transparent;transform: none} .lab-logo{flex-shrink: 0;display: flex;align-items: center;justify-content: center} .lab-logo img{filter: brightness(0) invert(1) opacity(0.6);transition: all 0.3s ease} .lab-item:hover .lab-logo img{filter: brightness(0) invert(1) opacity(0.8)} .lab-info{flex: 1;text-align: left} .company-logos{display: flex;justify-content: center;gap: 2rem;flex-wrap: wrap;margin-top: 2rem} @media (max-width: 768px){.company-logos{flex-direction: column;gap: 1rem;align-items: center} .lab-item{min-width: auto;max-width: 350px;width: 100%;justify-content: flex-start;text-align: left;padding: 1rem} .lab-name{font-size: 0.8rem !important} } .university-logo{display: flex;align-items: center;justify-content: center} .university-logo img{border-radius: 50%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)} .lab-name{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;font-size: 0.8rem !important;font-weight: 400 !important;color: rgba(255, 255, 255, 0.6) !important;line-height: 1.4 !important;letter-spacing: normal !important;text-align: left !important} .lab-item{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif} .lab-item .lab-name{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;font-size: 0.8rem !important;font-weight: 400 !important;color: rgba(255, 255, 255, 0.6) !important;letter-spacing: normal !important;line-height: 1.4 !important} .hero-bottom .bottom-text span{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;font-size: 0.9rem !important;font-weight: 400 !important;color: rgba(255, 255, 255, 0.6) !important;letter-spacing: normal !important;line-height: 1.4 !important} .hero-bottom .lab-name, .company-logos .lab-name, .lab-item .lab-name{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;font-size: 0.8rem !important;font-weight: 400 !important;color: rgba(255, 255, 255, 0.6) !important;letter-spacing: normal !important;line-height: 1.4 !important} @media (max-width: 768px){.hero-bottom .lab-name, .company-logos .lab-name, .lab-item .lab-name{font-size: 0.8rem !important} } @media (max-width: 768px){.hero{min-height: 100vh;padding: 0} .hero-content{gap: 2rem} .hero-bottom{padding: 1.5rem 0 2rem 0} .bottom-text{margin-bottom: 1rem} } .hero .hero-bottom .company-logos .lab-item .lab-name, .hero .company-logos .lab-item .lab-name, .company-logos .lab-item .lab-name{font-size: 0.8rem !important;font-weight: 400 !important;color: rgba(255, 255, 255, 0.6) !important} .nav-dropdown{position: relative} .nav-dropdown:hover .dropdown-menu{opacity: 1;visibility: visible;transform: translateY(0)} .dropdown-menu{position: absolute;top: 100%;left: 0;background: rgba(10, 10, 10, 0.95);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 8px;padding: 0.5rem 0;min-width: 200px;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;z-index: 1000} .dropdown-menu a{display: block;padding: 0.75rem 1rem;color: #ffffff;text-decoration: none;font-size: 0.9rem;transition: background-color 0.3s ease} .dropdown-menu a:hover{background: rgba(102, 126, 234, 0.2);color: #667eea} .dropdown-menu a.active{background: rgba(102, 126, 234, 0.3);color: #667eea;font-weight: 600} @media (max-width: 768px){.nav-dropdown{position: static} .dropdown-menu{position: static;opacity: 1;visibility: visible;transform: none;background: transparent;border: none;padding: 0;min-width: auto;margin-left: 1rem} .dropdown-menu a{padding: 0.5rem 0;font-size: 0.85rem;border-left: 2px solid rgba(102, 126, 234, 0.3);padding-left: 1rem;margin-bottom: 0.25rem} .dropdown-menu a.active{border-left-color: #667eea} } .datasets-page{padding: 120px 0 80px;background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);min-height: 100vh} .datasets-header{text-align: center;margin-bottom: 60px} .page-title{font-size: 3.5rem;font-weight: 700;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 20px} .page-subtitle{font-size: 1.2rem;color: #a0a0a0;max-width: 600px;margin: 0 auto;line-height: 1.6} .datasets-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));gap: 40px;margin-top: 60px} .dataset-card{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 30px;backdrop-filter: blur(10px);transition: all 0.3s ease;position: relative;overflow: hidden} .dataset-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);opacity: 0;transition: opacity 0.3s ease} .dataset-card:hover{transform: translateY(-5px);border-color: rgba(102, 126, 234, 0.3);box-shadow: 0 20px 40px rgba(102, 126, 234, 0.1)} .dataset-card:hover::before{opacity: 1} .dataset-header{display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 30px;gap: 20px} .dataset-info{flex: 1} .dataset-title{font-size: 1.8rem;font-weight: 600;color: #ffffff;margin-bottom: 10px} .dataset-description{color: #a0a0a0;line-height: 1.6;font-size: 1rem} .dataset-image{flex-shrink: 0} .image-placeholder{width: 120px;height: 80px;border-radius: 8px;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.1);transition: transform 0.3s ease} .dataset-card:hover .image-placeholder{transform: scale(1.05)} .image-placeholder.synthetic{border-color: rgba(74, 222, 128, 0.3)} .dataset-stats{display: flex;justify-content: space-around;margin: 30px 0;padding: 20px 0;border-top: 1px solid rgba(255, 255, 255, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.1)} .stat-item{text-align: center} .stat-number{display: block;font-size: 1.8rem;font-weight: 700;color: #667eea;margin-bottom: 5px} .stat-label{font-size: 0.9rem;color: #a0a0a0;text-transform: uppercase;letter-spacing: 0.5px} .dataset-actions{display: flex;gap: 15px;align-items: center} .btn-download{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border: none;padding: 12px 24px;border-radius: 8px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;font-size: 0.95rem} .btn-download:hover{transform: translateY(-2px);box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3)} .btn-code{color: #667eea;text-decoration: none;font-weight: 500;padding: 12px 20px;border: 1px solid rgba(102, 126, 234, 0.3);border-radius: 8px;transition: all 0.3s ease;font-size: 0.95rem} .btn-code:hover{background: rgba(102, 126, 234, 0.1);border-color: rgba(102, 126, 234, 0.5)} .download-modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);backdrop-filter: blur(5px);z-index: 1000;align-items: center;justify-content: center} .download-modal.active{display: flex} .modal-content{background: rgba(26, 26, 46, 0.95);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 40px;max-width: 500px;width: 90%;text-align: center;position: relative} .modal-close{position: absolute;top: 15px;right: 20px;background: none;border: none;color: #a0a0a0;font-size: 1.5rem;cursor: pointer;transition: color 0.3s ease} .modal-close:hover{color: #ffffff} .modal-title{font-size: 1.5rem;font-weight: 600;color: #ffffff;margin-bottom: 15px} .modal-description{color: #a0a0a0;margin-bottom: 30px;line-height: 1.6} .download-options{display: flex;flex-direction: column;gap: 15px} .download-option{display: flex;justify-content: space-between;align-items: center;padding: 15px 20px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 10px;transition: all 0.3s ease} .download-option:hover{background: rgba(255, 255, 255, 0.08);border-color: rgba(102, 126, 234, 0.3)} .option-info{text-align: left} .option-name{font-weight: 600;color: #ffffff;margin-bottom: 5px} .option-size{font-size: 0.9rem;color: #a0a0a0} .option-download{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border: none;padding: 8px 16px;border-radius: 6px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;font-size: 0.9rem} .option-download:hover{transform: translateY(-1px);box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3)} @media (max-width: 768px){.datasets-page{padding: 100px 0 60px} .page-title{font-size: 2.5rem} .page-subtitle{font-size: 1.1rem;padding: 0 20px} .datasets-grid{grid-template-columns: 1fr;gap: 30px;margin-top: 40px} .dataset-card{padding: 25px} .dataset-header{flex-direction: column;align-items: center;text-align: center;gap: 15px} .dataset-info{order: 2} .dataset-image{order: 1} .dataset-stats{flex-direction: column;gap: 15px} .dataset-actions{flex-direction: column;align-items: stretch} .btn-code{text-align: center} .modal-content{padding: 30px 20px;margin: 20px} .download-option{flex-direction: column;gap: 10px;text-align: center} } @media (max-width: 480px){.page-title{font-size: 2rem} .dataset-title{font-size: 1.5rem} .stat-number{font-size: 1.5rem} } .dataset-card .stat-number{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .dataset-card:nth-child(2) .stat-number{background: linear-gradient(135deg, #4ade80 0%, #06d6a0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .dataset-card:nth-child(3) .stat-number{background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .dataset-card:nth-child(4) .stat-number{background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .dataset-card{opacity: 0;transform: translateY(30px);animation: fadeInUp 0.6s ease forwards} .dataset-card:nth-child(1){animation-delay: 0.1s} .dataset-card:nth-child(2){animation-delay: 0.2s} .dataset-card:nth-child(3){animation-delay: 0.3s} .dataset-card:nth-child(4){animation-delay: 0.4s} @keyframes fadeInUp{to{opacity: 1;transform: translateY(0)} } .dataset-image{position: relative;overflow: hidden} .dataset-image::after{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));opacity: 0;transition: opacity 0.3s ease} .dataset-card:hover .dataset-image::after{opacity: 1} .modal-content::-webkit-scrollbar{width: 6px} .modal-content::-webkit-scrollbar-track{background: rgba(255, 255, 255, 0.1);border-radius: 3px} .modal-content::-webkit-scrollbar-thumb{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 3px} .modal-content::-webkit-scrollbar-thumb:hover{background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%)} .datasets-controls{display: flex;justify-content: center;align-items: center;gap: 30px;margin-top: 40px;flex-wrap: wrap} .search-box{position: relative;max-width: 400px;width: 100%} .search-box input{width: 100%;padding: 15px 50px 15px 20px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 12px;color: #ffffff;font-size: 1rem;transition: all 0.3s ease;backdrop-filter: blur(10px)} .search-box input:focus{outline: none;border-color: rgba(102, 126, 234, 0.5);box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);background: rgba(255, 255, 255, 0.08)} .search-box input::placeholder{color: #a0a0a0} .search-icon{position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: #a0a0a0;pointer-events: none} .filter-buttons{display: flex;gap: 10px;flex-wrap: wrap} .filter-btn{padding: 10px 20px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 8px;color: #a0a0a0;font-size: 0.9rem;font-weight: 500;cursor: pointer;transition: all 0.3s ease;backdrop-filter: blur(10px)} .filter-btn:hover{background: rgba(255, 255, 255, 0.08);border-color: rgba(102, 126, 234, 0.3);color: #ffffff} .filter-btn.active{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-color: transparent;color: #ffffff;box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3)} .dataset-card.hidden{opacity: 0;transform: scale(0.8);pointer-events: none;margin: 0;height: 0;overflow: hidden;transition: all 0.3s ease} .dataset-card.visible{opacity: 1;transform: scale(1);pointer-events: auto;transition: all 0.3s ease} .no-results{text-align: center;padding: 60px 20px;color: #a0a0a0;font-size: 1.1rem;grid-column: 1 / -1} .no-results-icon{font-size: 3rem;margin-bottom: 20px;opacity: 0.5} @media (max-width: 768px){.datasets-controls{flex-direction: column;gap: 20px;margin-top: 30px} .search-box{max-width: 100%} .filter-buttons{justify-content: center;width: 100%} .filter-btn{flex: 1;min-width: 80px;text-align: center} } @media (max-width: 480px){.filter-buttons{flex-direction: column;width: 100%} .filter-btn{width: 100%} } .back-to-top{position: fixed;bottom: 30px;right: 30px;width: 50px;height: 50px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;border-radius: 50%;color: white;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);transition: all 0.3s ease;opacity: 0;visibility: hidden;transform: translateY(20px);z-index: 1000} .back-to-top.visible{opacity: 1;visibility: visible;transform: translateY(0)} .back-to-top:hover{transform: translateY(-3px);box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4)} .back-to-top:active{transform: translateY(-1px)} @media (max-width: 768px){.back-to-top{bottom: 20px;right: 20px;width: 45px;height: 45px} } .datasets-stats-overview{margin: 50px 0;padding: 40px 0;background: rgba(255, 255, 255, 0.02);border-radius: 20px;border: 1px solid rgba(255, 255, 255, 0.05)} .stats-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 30px;max-width: 800px;margin: 0 auto;padding: 0 20px} .stat-card{text-align: center;padding: 30px 20px;background: rgba(255, 255, 255, 0.03);border-radius: 15px;border: 1px solid rgba(255, 255, 255, 0.08);transition: all 0.3s ease;position: relative;overflow: hidden} .stat-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);transform: translateX(-100%);transition: transform 0.6s ease} .stat-card:hover::before{transform: translateX(0)} .stat-card:hover{transform: translateY(-5px);background: rgba(255, 255, 255, 0.05);border-color: rgba(102, 126, 234, 0.2)} .stat-icon{font-size: 2.5rem;margin-bottom: 15px;display: block} .stat-value{font-size: 2.2rem;font-weight: 700;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 10px;display: block} .stat-label{color: #a0a0a0;font-size: 0.95rem;font-weight: 500;text-transform: uppercase;letter-spacing: 0.5px} .stat-value{opacity: 0;transform: translateY(20px);animation: countUp 0.8s ease forwards} .stat-card:nth-child(1) .stat-value{animation-delay: 0.1s} .stat-card:nth-child(2) .stat-value{animation-delay: 0.2s} .stat-card:nth-child(3) .stat-value{animation-delay: 0.3s} .stat-card:nth-child(4) .stat-value{animation-delay: 0.4s} @keyframes countUp{to{opacity: 1;transform: translateY(0)} } @media (max-width: 768px){.datasets-stats-overview{margin: 30px 0;padding: 30px 0} .stats-grid{grid-template-columns: repeat(2, 1fr);gap: 20px;padding: 0 15px} .stat-card{padding: 25px 15px} .stat-icon{font-size: 2rem;margin-bottom: 10px} .stat-value{font-size: 1.8rem} .stat-label{font-size: 0.85rem} } @media (max-width: 480px){.stats-grid{grid-template-columns: 1fr;gap: 15px} } .dataset-detail-page{padding: 100px 0 5px;background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);min-height: 100vh} .breadcrumb{display: flex;align-items: center;margin-bottom: 2px;font-size: 0.7rem} .breadcrumb a{color: #667eea;text-decoration: none;transition: color 0.3s ease} .breadcrumb a:hover{color: #ffffff} .breadcrumb-separator{margin: 0 10px;color: #a0a0a0} .breadcrumb-current{color: #ffffff;font-weight: 500} .dataset-detail-header{display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 3px;gap: 12px} .dataset-info{flex: 1;text-align: left} .dataset-name{font-size: 1.2rem;font-weight: 700;color: #ffffff;margin-bottom: 2px;text-align: left} .dataset-tagline{font-size: 0.75rem;color: #a0a0a0;margin-bottom: 3px;line-height: 1.2;text-align: left} .dataset-meta{display: flex;flex-wrap: wrap;gap: 14px;margin-bottom: 6px} .meta-item{display: flex;flex-direction: row;align-items: baseline;gap: 6px} .meta-label{font-size: 0.75rem;color: #a0a0a0;text-transform: none;letter-spacing: 0.3px;white-space: nowrap} .meta-value{font-size: 0.8rem;color: #ffffff;font-weight: 500} .dataset-tags{display: flex;flex-wrap: wrap;gap: 6px} .tag{padding: 4px 8px;background: rgba(102, 126, 234, 0.2);border: 1px solid rgba(102, 126, 234, 0.3);border-radius: 12px;color: #667eea;font-size: 0.7rem;font-weight: 500} .dataset-actions{display: flex !important;flex-direction: column;gap: 5px;flex-shrink: 0;min-width: 150px} .btn-primary, .btn-secondary{display: flex;align-items: center;gap: 6px;padding: 6px 16px;border-radius: 5px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;border: none;font-size: 0.75rem;min-width: 80px;justify-content: center} .btn-primary{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white} .btn-primary:hover{transform: translateY(-2px);box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3)} .btn-secondary{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);color: #ffffff} .btn-secondary:hover{background: rgba(255, 255, 255, 0.08);border-color: rgba(102, 126, 234, 0.3)} .dataset-tabs{display: flex;border-bottom: 1px solid rgba(255, 255, 255, 0.1);margin-bottom: 25px;overflow-x: auto} .dataset-tab{padding: 12px 20px;background: none;border: none;color: #a0a0a0;font-weight: 500;cursor: pointer;transition: all 0.3s ease;border-bottom: 2px solid transparent;white-space: nowrap} .dataset-tab:hover{color: #ffffff} .dataset-tab.active{color: #667eea;border-bottom-color: #667eea} .tab-content{min-height: 400px} .tab-panel{display: none} .tab-panel.active{display: block} .overview-grid{display: grid;grid-template-columns: 1fr 280px;gap: 30px} .overview-section h2{color: #ffffff;font-size: 1.3rem;font-weight: 600;margin-bottom: 15px} .overview-section h3{color: #ffffff;font-size: 1.1rem;font-weight: 600;margin: 20px 0 10px 0} .about-content p{color: #a0a0a0;line-height: 1.5;margin-bottom: 10px} .statistics-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 20px;margin-bottom: 30px} .stat-card{text-align: center;padding: 20px;background: rgba(255, 255, 255, 0.05);border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease} .stat-card:hover{transform: translateY(-3px);background: rgba(255, 255, 255, 0.08);border-color: rgba(102, 126, 234, 0.3)} .stat-number{font-size: 1.8rem;font-weight: 700;color: #667eea;margin-bottom: 8px;display: block} .stat-label{color: #a0a0a0;font-size: 0.85rem;text-transform: uppercase;letter-spacing: 0.5px} .classes-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px} .class-item{display: flex;align-items: center;gap: 15px;padding: 12px 15px;background: rgba(255, 255, 255, 0.05);border-radius: 8px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease} .class-item:hover{background: rgba(255, 255, 255, 0.08);border-color: rgba(102, 126, 234, 0.3)} .class-id{width: 30px;height: 30px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-weight: 600;font-size: 0.9rem;flex-shrink: 0} .class-name{color: #ffffff;font-weight: 500} .sidebar-info{display: flex;flex-direction: column;gap: 25px} .info-card{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 25px;backdrop-filter: blur(10px)} .info-card h3{color: #ffffff;font-size: 1.1rem;font-weight: 600;margin-bottom: 15px} .usability-score{font-size: 2rem;font-weight: 700;color: #4ade80;text-align: center} .file-structure{margin-top: 15px} .file-item{display: flex;align-items: center;gap: 10px;padding: 8px 0;color: #a0a0a0;font-size: 0.9rem} .file-item.nested{margin-left: 20px} .file-icon{font-size: 1rem} .file-name{color: #ffffff} .preview-section h2{color: #ffffff;font-size: 1.3rem;font-weight: 600;margin-bottom: 10px} .preview-description{color: #a0a0a0;margin-bottom: 15px;line-height: 1.4} .image-comparison-container{background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 8px;padding: 8px;backdrop-filter: blur(10px)} .comparison-viewer{position: relative;width: 100%;max-width: 550px;height: 400px;margin: 0 auto 8px;border-radius: 6px;overflow: hidden;background: #1a1a1a} .image-wrapper{position: relative;width: 100%;height: 100%;background: #1a1a1a} .original-image, .synthetic-image{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;object-position: center;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;transition: opacity 0.3s ease} .image-loading-placeholder{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #2a2a2a;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 5;transition: opacity 0.3s ease} .image-loading-placeholder.hidden{opacity: 0;pointer-events: none} .loading-skeleton{position: relative;width: 80%;height: 60%;background: #333;border-radius: 8px;overflow: hidden;margin-bottom: 20px} .skeleton-shimmer{position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent );animation: shimmer 1.5s infinite} @keyframes shimmer{0%{left: -100%} 100%{left: 100%} } .loading-text{color: #888;font-size: 14px;font-weight: 500} .synthetic-image{clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);transition: clip-path 0.1s ease} .comparison-slider{position: absolute;top: 0;left: 50%;width: 2px;height: 100%;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);cursor: ew-resize;transform: translateX(-50%);z-index: 10} .slider-handle{position: absolute;top: 50%;left: 50%;width: 28px;height: 28px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 50%;transform: translate(-50%, -50%);display: flex;align-items: center;justify-content: center;color: white;box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);transition: all 0.3s ease} .slider-handle:hover{transform: translate(-50%, -50%) scale(1.1);box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4)} .image-labels{position: absolute;top: 15px;left: 15px;right: 15px;display: flex;justify-content: space-between;z-index: 5} .label-original, .label-synthetic{padding: 8px 15px;background: rgba(0, 0, 0, 0.7);color: white;border-radius: 20px;font-size: 0.85rem;font-weight: 500;backdrop-filter: blur(10px)} .image-selection h3{color: #ffffff;font-size: 1.1rem;font-weight: 600;margin-bottom: 20px} .image-thumbnails{display: flex;gap: 15px;overflow-x: auto;padding-bottom: 10px} .thumbnail{flex-shrink: 0;cursor: pointer;transition: all 0.3s ease;border-radius: 8px;overflow: hidden;border: 2px solid transparent} .thumbnail:hover{transform: translateY(-3px)} .thumbnail.active{border-color: #667eea;box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3)} .thumbnail img{width: 120px;height: 80px;object-fit: cover;display: block} .thumbnail-label{display: block;text-align: center;padding: 8px;background: rgba(255, 255, 255, 0.05);color: #a0a0a0;font-size: 0.8rem} .thumbnail.active .thumbnail-label{background: rgba(102, 126, 234, 0.2);color: #667eea} .comparison-stats{display: flex;justify-content: space-around;margin-top: 30px;padding-top: 25px;border-top: 1px solid rgba(255, 255, 255, 0.1)} .comparison-stats .stat-item{text-align: center} .comparison-stats .stat-label{display: block;color: #a0a0a0;font-size: 0.85rem;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 0.5px} .comparison-stats .stat-value{display: block;color: #667eea;font-size: 1.3rem;font-weight: 700} .discussion-section, .suggestions-section{text-align: center;padding: 60px 20px} .discussion-section h2, .suggestions-section h2{color: #ffffff;font-size: 1.5rem;font-weight: 600;margin-bottom: 20px} .discussion-placeholder, .suggestions-placeholder{color: #a0a0a0;font-size: 1.1rem} @media (max-width: 768px){.dataset-detail-page{padding: 80px 0 15px} .dataset-detail-header{flex-direction: column;gap: 6px;margin-bottom: 6px} .dataset-name{font-size: 1.2rem} .dataset-meta{flex-direction: column;gap: 8px} .dataset-actions{flex-direction: row;justify-content: center;gap: 6px} .btn-primary, .btn-secondary{min-width: 150px} .overview-grid{grid-template-columns: 1fr;gap: 30px} .sidebar-info{order: -1} .statistics-grid{grid-template-columns: repeat(2, 1fr)} .classes-grid{grid-template-columns: 1fr} .comparison-stats{flex-direction: column;gap: 20px} } @media (max-width: 480px){.dataset-name{font-size: 1.1rem} .dataset-actions{flex-direction: column} .btn-primary, .btn-secondary{min-width: auto;width: 100%} .statistics-grid{grid-template-columns: 1fr} .image-thumbnails{justify-content: center} } .original-image, .synthetic-image{transition: opacity 0.3s ease} .slider-handle{cursor: ew-resize;user-select: none} .slider-handle svg{pointer-events: none} .comparison-viewer.dragging{user-select: none} .comparison-viewer.dragging .slider-handle{transform: translate(-50%, -50%) scale(1.2)} .comparison-viewer:focus-within{outline: 2px solid rgba(102, 126, 234, 0.5);outline-offset: 4px;border-radius: 12px} .thumbnail{position: relative;overflow: hidden} .thumbnail::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));opacity: 0;transition: opacity 0.3s ease;z-index: 1} .thumbnail:hover::before{opacity: 1} .thumbnail.active::before{opacity: 0.3} .image-wrapper.loading::after{content: '';position: absolute;top: 50%;left: 50%;width: 40px;height: 40px;border: 3px solid rgba(102, 126, 234, 0.3);border-top: 3px solid #667eea;border-radius: 50%;transform: translate(-50%, -50%);animation: spin 1s linear infinite} @keyframes spin{0%{transform: translate(-50%, -50%) rotate(0deg)} 100%{transform: translate(-50%, -50%) rotate(360deg)} } @media (max-width: 768px){.comparison-viewer{max-width: 100%;height: 320px} .slider-handle{width: 35px;height: 35px} .image-labels{top: 10px;left: 10px;right: 10px} .label-original, .label-synthetic{padding: 6px 12px;font-size: 0.8rem} .image-thumbnails{justify-content: flex-start;padding: 0 10px} .thumbnail img{width: 100px;height: 67px} } @media (max-width: 480px){.comparison-viewer{margin-bottom: 20px;height: 280px} .slider-handle{width: 30px;height: 30px} .image-labels{flex-direction: column;align-items: flex-start;gap: 5px} .thumbnail img{width: 80px;height: 53px} .thumbnail-label{font-size: 0.7rem;padding: 6px} } .comparison-slider:focus{outline: 2px solid rgba(102, 126, 234, 0.8);outline-offset: 2px} .thumbnail:focus{outline: 2px solid rgba(102, 126, 234, 0.8);outline-offset: 2px} @media (prefers-contrast: high){.comparison-slider{background: #000;border: 2px solid #fff} .slider-handle{background: #000;border: 2px solid #fff} .image-labels span{background: rgba(0, 0, 0, 0.9);border: 1px solid #fff} } @media (prefers-reduced-motion: reduce){.original-image, .synthetic-image{transition: none} .slider-handle{transition: none} .thumbnail{transition: none} .comparison-stats .stat-value{transition: none} } .usage-instructions{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 15px;margin: 25px 0;padding: 20px;background: rgba(102, 126, 234, 0.1);border: 1px solid rgba(102, 126, 234, 0.2);border-radius: 12px} .instruction-item{display: flex;align-items: center;gap: 10px;padding: 10px;background: rgba(255, 255, 255, 0.05);border-radius: 8px;transition: all 0.3s ease} .instruction-item:hover{background: rgba(255, 255, 255, 0.08);transform: translateY(-2px)} .instruction-icon{font-size: 1.2rem;flex-shrink: 0} .instruction-text{color: #a0a0a0;font-size: 0.9rem;line-height: 1.4} @media (max-width: 768px){.usage-instructions{grid-template-columns: 1fr;gap: 10px;padding: 15px} .instruction-item{padding: 8px} .instruction-icon{font-size: 1rem} .instruction-text{font-size: 0.85rem} } .dataset-stats-bar{display: flex;justify-content: space-around;align-items: center;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 25px 20px;margin: 40px 0;backdrop-filter: blur(10px);flex-wrap: wrap;gap: 20px} .dataset-stats-bar .stat-item{text-align: center;min-width: 120px} .dataset-stats-bar .stat-number{display: block;font-size: 1.8rem;font-weight: 700;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 5px} .dataset-stats-bar .stat-label{display: block;color: #a0a0a0;font-size: 0.85rem;text-transform: uppercase;letter-spacing: 0.5px;font-weight: 500} .comparison-section{background: rgba(255, 255, 255, 0.03);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 8px;padding: 8px;margin-top: 3px} .section-header{text-align: center;margin-bottom: 15px} .section-header h2{color: #ffffff;font-size: 1.3rem;font-weight: 600;margin-bottom: 5px} .section-description{color: #a0a0a0;font-size: 0.9rem;line-height: 1.3;max-width: 350px;margin: 0 auto} .nav-btn{position: absolute;top: 50%;transform: translateY(-50%);width: 45px;height: 45px;background: rgba(0, 0, 0, 0.7);border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50%;color: white;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;z-index: 20;backdrop-filter: blur(10px)} .nav-btn:hover{background: rgba(102, 126, 234, 0.8);border-color: rgba(255, 255, 255, 0.6);transform: translateY(-50%) scale(1.1);box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4)} .nav-btn:disabled{background: rgba(0, 0, 0, 0.3);border-color: rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.3);cursor: not-allowed;transform: translateY(-50%);box-shadow: none} .prev-btn{left: 15px} .next-btn{right: 15px} .image-counter-overlay{position: absolute;bottom: 15px;right: 15px;background: rgba(0, 0, 0, 0.8);color: white;padding: 8px 15px;border-radius: 20px;font-size: 0.9rem;font-weight: 600;z-index: 15;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2)} .image-info-header{text-align: left;margin: 5px 0 0 0;padding: 5px;background: rgba(255, 255, 255, 0.05);border-radius: 5px;border: 1px solid rgba(255, 255, 255, 0.1)} .image-name{color: #ffffff;font-size: 0.85rem;font-weight: 600;margin-bottom: 2px;text-align: left} .image-description{color: #a0a0a0;font-size: 0.75rem;margin: 0;text-align: left} .comparison-stats{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px;padding: 20px;background: rgba(255, 255, 255, 0.05);border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.1)} .comparison-stats .stat-item{text-align: left;padding: 15px;background: rgba(255, 255, 255, 0.03);border-radius: 8px;transition: all 0.3s ease} .comparison-stats .stat-item:hover{background: rgba(255, 255, 255, 0.08);transform: translateY(-2px)} .comparison-stats .stat-label{display: block;color: #a0a0a0;font-size: 0.9rem;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 0.5px} .comparison-stats .stat-value{display: block;color: #667eea;font-size: 1.4rem;font-weight: 700} .thumbnail-gallery{margin-top: 40px} .thumbnail-gallery h3{color: #ffffff;font-size: 1.3rem;font-weight: 600;margin-bottom: 20px;text-align: left} .thumbnail-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 15px;max-height: 300px;overflow-y: auto;padding: 20px;background: rgba(255, 255, 255, 0.03);border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.08)} .thumbnail-item{position: relative;cursor: pointer;border-radius: 8px;overflow: hidden;border: 2px solid transparent;transition: all 0.3s ease;background: rgba(255, 255, 255, 0.05)} .thumbnail-item:hover{transform: translateY(-3px);border-color: rgba(102, 126, 234, 0.5);box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2)} .thumbnail-item.active{border-color: #667eea;box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4)} .thumbnail-item img{width: 100%;height: 100px;object-fit: cover;display: block} .thumbnail-label{position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));color: white;padding: 15px 8px 8px;font-size: 0.8rem;text-align: center;font-weight: 500} .comparison-viewer.loading::after{content: '';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;border: 4px solid rgba(102, 126, 234, 0.3);border-top: 4px solid #667eea;border-radius: 50%;transform: translate(-50%, -50%);animation: spin 1s linear infinite;z-index: 100} @media (max-width: 768px){.dataset-stats-bar{grid-template-columns: repeat(3, 1fr);gap: 15px;padding: 20px 15px} .dataset-stats-bar .stat-number{font-size: 1.4rem} .comparison-section{padding: 8px;margin-top: 5px} .nav-btn{width: 40px;height: 40px} .prev-btn{left: 10px} .next-btn{right: 10px} .image-counter-overlay{bottom: 10px;right: 10px;padding: 6px 12px;font-size: 0.8rem} .image-info-header{padding: 6px;margin: 5px 0;text-align: left} .image-name{font-size: 0.95rem;text-align: left} .comparison-stats{grid-template-columns: repeat(2, 1fr);gap: 15px;padding: 20px} .thumbnail-grid{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 10px;padding: 15px} .thumbnail-item img{height: 80px} } @media (max-width: 480px){.dataset-stats-bar{grid-template-columns: repeat(2, 1fr)} .comparison-stats{grid-template-columns: 1fr} .nav-btn{width: 35px;height: 35px} .prev-btn{left: 8px} .next-btn{right: 8px} .image-counter-overlay{bottom: 8px;right: 8px;padding: 5px 10px;font-size: 0.75rem} .thumbnail-grid{grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))} } @media (max-width: 768px){.mobile-menu-toggle{display: flex} .nav-menu{position: fixed !important;top: 0 !important;left: -100% !important;width: 100% !important;height: 100vh !important;background: rgba(10, 10, 10, 0.98) !important;backdrop-filter: blur(20px) !important;flex-direction: column !important;justify-content: center !important;align-items: center !important;gap: 2rem !important;transition: left 0.3s ease !important;z-index: 1000 !important;display: flex !important} .nav-menu.active{left: 0 !important} .nav-menu li{margin: 0 !important;text-align: center !important} .nav-menu a{font-size: 1.2rem !important;padding: 1rem 2rem !important;display: block !important;width: 100% !important} .nav-cta{margin-top: 1rem !important} .language-switcher{margin-left: 0 !important;margin-top: 1rem !important} .nav-dropdown .dropdown-menu{position: static !important;background: rgba(255, 255, 255, 0.1) !important;border-radius: 10px !important;margin-top: 1rem !important;padding: 1rem !important} .hero-container{padding: 0 15px !important} .main-input-container{width: 95% !important;max-width: 400px !important;margin: 2rem auto !important} .input-box{padding: 1rem 1.5rem !important;font-size: 1rem !important} .features-slider-container{width: 100% !important;max-width: 100% !important;padding: 0 10px !important} .features-slider{gap: 1rem !important} .feature-slide{min-width: 280px !important;max-width: 280px !important;padding: 1.5rem !important} .feature-icon-large{width: 60px !important;height: 60px !important;margin-bottom: 1rem !important} .feature-content h3{font-size: 1.2rem !important;margin-bottom: 0.5rem !important} .feature-content p{font-size: 0.9rem !important;line-height: 1.5 !important} .feature-tags{gap: 0.5rem !important;margin-top: 1rem !important} .tag{font-size: 0.8rem !important;padding: 0.3rem 0.8rem !important} .solutions-grid{grid-template-columns: 1fr !important;gap: 1.5rem !important;margin-top: 2rem !important} .solution-item{padding: 2rem 1.5rem !important} .solution-item h3{font-size: 1.3rem !important;margin-bottom: 1rem !important} .solution-item p{font-size: 0.95rem !important;line-height: 1.6 !important} .contact-content{flex-direction: column !important;gap: 2rem !important} .contact-info{text-align: center !important} .contact-form{max-width: 100% !important;padding: 0 1rem !important} .form-group input, .form-group select, .form-group textarea{font-size: 16px !important;padding: 0.8rem !important} } @media (max-width: 480px){.container{padding: 0 15px !important} .nav-container{padding: 0 15px !important} .hero-title{font-size: 2rem !important;margin-bottom: 1.5rem !important} .nav-logo h2{font-size: 1.3rem !important} .main-input-container{width: 100% !important;margin: 1.5rem auto !important} .input-box{padding: 0.8rem 1rem !important;font-size: 0.9rem !important} .feature-slide{min-width: 260px !important;max-width: 260px !important;padding: 1rem !important} .section-title{font-size: 2rem !important;margin-bottom: 1.5rem !important} .solution-item{padding: 1.5rem 1rem !important} .about-text{font-size: 0.95rem !important;padding: 0 0.5rem !important} } @media (max-width: 768px){.dataset-detail-header{flex-direction: column !important;gap: 2rem !important;text-align: center !important} .dataset-actions{justify-content: center !important;flex-wrap: wrap !important;gap: 1rem !important} .dataset-tabs{flex-wrap: wrap !important;gap: 0.5rem !important;justify-content: center !important} .dataset-tab{font-size: 0.9rem !important;padding: 0.5rem 1rem !important} .overview-grid{grid-template-columns: 1fr !important;gap: 2rem !important} .statistics-grid{grid-template-columns: repeat(2, 1fr) !important;gap: 1rem !important} .classes-grid{grid-template-columns: repeat(2, 1fr) !important;gap: 0.5rem !important} .comparison-viewer{max-width: 100% !important;height: 250px !important} .image-thumbnails{grid-template-columns: repeat(3, 1fr) !important;gap: 0.5rem !important} .comparison-stats{grid-template-columns: 1fr !important;gap: 1rem !important} .usage-instructions{grid-template-columns: 1fr !important;gap: 1rem !important} .instruction-item{padding: 1rem !important} .instruction-text{font-size: 0.9rem !important} } @media (max-width: 480px){.dataset-detail-page{padding: 80px 0 15px !important} .breadcrumb{font-size: 0.9rem !important;margin-bottom: 1rem !important} .dataset-name{font-size: 1.8rem !important;margin-bottom: 1rem !important} .dataset-tagline{font-size: 0.95rem !important;line-height: 1.5 !important} .dataset-meta{grid-template-columns: 1fr !important;gap: 1rem !important} .dataset-tags{justify-content: center !important;flex-wrap: wrap !important} .statistics-grid{grid-template-columns: 1fr !important;gap: 1rem !important} .stat-card{padding: 1rem !important} .stat-number{font-size: 1.5rem !important} .classes-grid{grid-template-columns: 1fr !important;gap: 0.5rem !important} .comparison-viewer{height: 200px !important} .image-thumbnails{grid-template-columns: repeat(2, 1fr) !important} } @media (max-width: 768px){button, .btn-primary, .btn-secondary, .nav-menu a, .lang-btn{min-height: 44px !important;min-width: 44px !important;touch-action: manipulation !important} .features-slider-container, .comparison-viewer, .image-thumbnails{-webkit-user-select: none !important;-moz-user-select: none !important;-ms-user-select: none !important;user-select: none !important;-webkit-touch-callout: none !important} .nav-menu, .features-slider, .comparison-viewer{-webkit-overflow-scrolling: touch !important} button, a, .clickable{-webkit-tap-highlight-color: rgba(102, 126, 234, 0.3) !important} input, select, textarea{font-size: 16px !important} .nav-menu.active{animation: slideInFromLeft 0.3s ease-out !important} @keyframes slideInFromLeft{from{transform: translateX(-100%) !important} to{transform: translateX(0) !important} } .features-slider{will-change: transform !important} .comparison-slider{will-change: left !important} .feature-slide:active, .solution-item:active, .dataset-card:active{transform: scale(0.98) !important;transition: transform 0.1s ease !important} body{-webkit-text-size-adjust: 100% !important;-ms-text-size-adjust: 100% !important} .form-group input:focus, .form-group select:focus, .form-group textarea:focus{transform: scale(1.02) !important;transition: transform 0.2s ease !important} .btn-primary:active, .btn-secondary:active{transform: scale(0.95) !important;transition: transform 0.1s ease !important} .nav-menu a:active{background: rgba(102, 126, 234, 0.2) !important;border-radius: 8px !important} .section{padding: 3rem 0 !important} .container{padding: 0 1rem !important} .user-input-modal{width: 95% !important;max-width: 400px !important;margin: 0 auto !important} img{max-width: 100% !important;height: auto !important} .mobile-menu-toggle{z-index: 1001 !important} .nav-menu.active{z-index: 1000 !important} } @media (max-width: 768px) and (orientation: landscape){.hero{min-height: 100vh !important;padding: 60px 0 20px !important} .hero-title{font-size: 2rem !important;margin-bottom: 1rem !important} .main-input-container{margin: 1rem auto !important} .company-logos{margin-top: 1.5rem !important} .nav-menu{padding-top: 60px !important} } @media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2){.hero-title, .section-title{-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important} } :root{--vh: 1vh} @media (max-width: 768px){.hero{min-height: calc(var(--vh, 1vh) * 100) !important} .nav-menu{height: calc(var(--vh, 1vh) * 100) !important} } .reduce-motion *{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important} .mobile-device{-webkit-overflow-scrolling: touch} .mobile-device .feature-slide, .mobile-device .solution-item, .mobile-device .dataset-card{transition: transform 0.2s ease} .mobile-device .feature-slide:active, .mobile-device .solution-item:active, .mobile-device .dataset-card:active{transform: scale(0.98)} @supports (-webkit-touch-callout: none){.nav-menu{padding-bottom: env(safe-area-inset-bottom, 0) !important} .hero{padding-bottom: calc(40px + env(safe-area-inset-bottom, 0)) !important} .footer{padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)) !important} } @media screen and (max-width: 768px){.navbar{position: fixed !important;top: 0 !important} body{padding-top: 80px !important} } @media (max-width: 768px){*{-webkit-transform: translateZ(0);transform: translateZ(0)} .features-slider, .comparison-slider, .nav-menu{-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000;perspective: 1000} }