CASE STUDY

/* ===== BASE STYLES ===== */
.usp-wrapper{background:#000000;padding:10px 20px;font-family:Arial,sans-serif;text-align:center;color:#fff;box-sizing:border-box}
.usp-title{font-size:16px;font-weight:700;letter-spacing:3px;color:#00cfff;text-transform:uppercase;margin-bottom:8px}
.usp-title-line{width:60px;height:2px;background:#00cfff;margin:0 auto 20px}
.usp-center-logo span{color:#e8003d}
.usp-center-sub{font-size:10px;letter-spacing:2px;color:#00cfff;margin-top:4px}
.usp-icon{border-radius:50%;border:2px solid #00cfff;box-shadow:0 0 12px rgba(0,207,255,.35);display:flex;align-items:center;justify-content:center;background:#0d1a2e;font-size:24px;color:#00cfff;line-height:1}
.usp-nt{font-size:12px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:2px}
.usp-ns{font-size:11px;color:#99aabb;line-height:1.3}

/* ===== DESKTOP: Radial diagram ===== */
.usp-desktop{position:relative;display:flex;align-items:center;justify-content:center;max-width:860px;margin:0 auto;min-height:500px}
.usp-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;border:3px solid #00cfff;box-shadow:0 0 30px rgba(0,207,255,.4),0 0 60px rgba(0,207,255,.15),inset 0 0 20px rgba(0,207,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;background:radial-gradient(circle,#0d1a2e 60%,#0a0e1a 100%)}
.usp-center-logo{font-size:14px;font-weight:900;letter-spacing:2px;color:#fff}
.usp-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.usp-node{position:absolute;display:flex;flex-direction:column;align-items:center;width:130px}
.usp-icon{width:60px;height:60px;margin-bottom:8px}
.usp-top{top:0;left:50%;transform:translateX(-50%)}
.usp-tr{top:40px;right:10px}
.usp-right{top:50%;right:0;transform:translateY(-50%)}
.usp-br{bottom:40px;right:10px}
.usp-bot{bottom:0;left:50%;transform:translateX(-50%)}
.usp-bl{bottom:40px;left:10px}
.usp-left{top:50%;left:0;transform:translateY(-50%)}
.usp-tl{top:40px;left:10px}

/* ===== MOBILE: hidden by default, shown via JS ===== */
.usp-mobile{display:none}
.usp-mobile .usp-center-mob{width:120px;height:120px;border-radius:50%;border:3px solid #00cfff;box-shadow:0 0 25px rgba(0,207,255,.4),inset 0 0 15px rgba(0,207,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#0d1a2e 60%,#0a0e1a 100%);margin:0 auto 28px}
.usp-mobile .usp-center-logo{font-size:12px;font-weight:900;letter-spacing:2px;color:#fff}
.usp-mobile .usp-center-sub{font-size:9px;letter-spacing:1px;color:#00cfff;margin-top:3px}
.usp-nodes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;width:100%;max-width:340px;margin:0 auto}
.usp-node-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.usp-mobile .usp-icon{width:52px;height:52px;font-size:20px;margin-bottom:6px}
.usp-mobile .usp-nt{font-size:11px}
.usp-mobile .usp-ns{font-size:10px}

(function(){
function uspResponsive(){
var d=document.querySelector(‘.usp-desktop’);
var m=document.querySelector(‘.usp-mobile’);
if(!d||!m)return;
if(window.innerWidth<=767){d.style.display='none';m.style.display='block';}
else{d.style.display='';m.style.display='none';}
}
uspResponsive();
window.addEventListener('resize',uspResponsive);
})();