:root{--cube-size:280px;--itracks-blue:#0045ad;--itracks-orange:#ff5800;--itracks-light-blue:#0099d8;--itracks-green:#28a745;--itracks-purple:#6f42c1;--itracks-gray:#777}.layout{align-items:center;display:flex;flex-direction:row;gap:20px;height:600px;justify-content:space-between;max-width:1600px;min-height:65vh;padding:20px;width:95%}.text-box{flex:1.2;max-width:450px}.text-box h1{color:#fff;font-size:48px;line-height:1.1;margin-bottom:15px}.text-box p{color:#cbd5e1;font-size:20px;line-height:1.5;margin-bottom:30px}.btns{display:flex;gap:15px}.btn{border-radius:6px;font-size:16px;font-weight:700;padding:14px 24px;text-decoration:none;transition:.2s}.btn-orange{background:var(--itracks-orange);color:#fff}.btn-white{border:2px solid #fff;color:#fff}.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.cube-wrapper{align-items:center;display:flex;flex:1;justify-content:center;min-width:350px}.cube-container{cursor:grab;height:var(--cube-size);perspective:1000px;width:var(--cube-size)}.cube{height:100%;position:relative;transform:rotateX(-20deg) rotateY(25deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.175,.885,.32,1.275);width:100%}.face{background:#000;border:1px solid hsla(0,0%,100%,.1);box-sizing:border-box;display:grid;gap:5px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:var(--cube-size);padding:5px;position:absolute;width:var(--cube-size)}.piece{align-items:center;border-radius:3px;box-shadow:inset 0 0 10px rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;font-size:10px;font-weight:700;justify-content:center;line-height:1.1;padding:2px;text-align:center;text-transform:uppercase;transition:.2s}.piece:hover{filter:brightness(1.3);transform:scale(1.05)}.front{transform:rotateY(0deg) translateZ(140px)}.back{transform:rotateY(180deg) translateZ(140px)}.right{transform:rotateY(90deg) translateZ(140px)}.left{transform:rotateY(-90deg) translateZ(140px)}.top{transform:rotateX(90deg) translateZ(140px)}.bottom{transform:rotateX(-90deg) translateZ(140px)}.qual{background-color:var(--itracks-orange)}.quant{background-color:var(--itracks-blue)}.recruit{background-color:var(--itracks-green)}.video{background-color:var(--itracks-purple)}.hybrid{background-color:var(--itracks-light-blue)}.analytics{background-color:var(--itracks-gray)}.legend{display:flex;flex:0.8;flex-direction:column;gap:10px;max-width:250px}.legend-btn{align-items:center;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:15px;font-weight:500;padding:12px;transition:.3s}.legend-btn:hover{background:hsla(0,0%,100%,.15);transform:translateX(5px)}.key-dot{border-radius:3px;flex-shrink:0;height:14px;margin-right:12px;width:14px}.modal-overlay{align-items:center;background:rgba(15,23,42,.9);background-color:#fff;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;transform:translateY(100%);transition:transform .4s ease-out;width:100%;z-index:9999}.modal-overlay.active{transform:translateY(0)}.modal-content{background:#fff;border-radius:20px;max-height:85vh;max-width:650px;overflow:hidden;position:relative;width:95%}.modal-body-scroll,.modal-content{display:flex;flex-direction:column}.modal-body-scroll{align-items:center;padding:30px;-webkit-overflow-scrolling:touch}#mImage{border-radius:12px;margin-bottom:20px;max-height:260px;object-fit:contain;width:100%}#mTitle{color:#0045ad;font-size:clamp(22px,5vw,32px);font-weight:800;line-height:1.2;margin-bottom:15px}#mBody,#mTitle{text-align:center}#mBody{color:#475569;font-size:clamp(15px,3vw,18px);line-height:1.6;margin:0}.modal-footer{align-items:center;background:#fff;border-top:1px solid #f0f1f3;display:flex;justify-content:space-between;padding:20px 24px}.button-group{display:flex;gap:12px}.modal-footer button{align-items:center;border:none;cursor:pointer;display:flex;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;justify-content:center;transition:all .2s ease}.btn-icon{background-color:#d1d9e6;border-radius:50%;color:#4b5563;height:45px;padding:0;width:45px}.btn-icon:hover{background-color:#cbd5e1;transform:scale(1.05)}.button-group button:first-child{background-color:#f0f4f8;border-radius:8px;color:#334155;padding:12px 24px}.button-group button:first-child:hover{background-color:#e2e8f0}.button-group button:nth-child(2){background-color:#3b82f6;border-radius:8px;box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff;padding:12px 24px}.button-group button:nth-child(2):hover{background-color:#2563eb;box-shadow:0 6px 15px rgba(59,130,246,.4);transform:translateY(-1px)}.modal-close-x{align-items:center;background-color:#fff;border:none;border-radius:100%;box-shadow:0 2px 8px rgba(0,0,0,.2);color:grey;cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;line-height:0;padding:0;position:absolute;right:15px;top:15px;width:32px;z-index:100}@media (max-width:600px){.modal-body-scroll{padding:20px}#mImage{max-height:180px}}@media (max-width:1100px){.layout{flex-direction:column;height:auto;min-height:auto;padding-top:50px;text-align:center}.cube-wrapper{height:350px;margin:30px 0;min-width:unset}.legend{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:100%}}