:root {
  --deep: #07100f;
  --copper: #d77838;
  --blue: #61d7d0;
  --signal: #8df5cf;
}

.hero:after {
  width: 60%; height: 90%;
  background: radial-gradient(circle, rgba(55,207,190,.14), transparent 65%);
}
.hero h1 em { color: var(--blue); text-shadow: 0 0 38px rgba(97,215,208,.12); }
.technology { background: linear-gradient(180deg,#edf0ec,#e8e7e1); }

.hero-system { height:560px; position:relative; display:grid; place-items:center; z-index:2; }
.worker-radar { position:absolute; width:410px; height:410px; border:1px solid rgba(97,215,208,.28); border-radius:50%; box-shadow:inset 0 0 90px rgba(97,215,208,.035),0 0 80px rgba(97,215,208,.035); }
.worker-radar:before,.worker-radar:after,.worker-radar span { content:""; position:absolute; border-radius:50%; border:1px solid rgba(97,215,208,.13); }
.worker-radar:before { inset:56px; }
.worker-radar:after { inset:112px; border-style:dashed; }
.worker-radar span:nth-child(1) { width:7px; height:7px; background:var(--signal); border:0; top:62px; right:58px; box-shadow:0 0 18px var(--signal); }
.worker-radar span:nth-child(2) { width:5px; height:5px; background:var(--copper); border:0; bottom:82px; left:37px; box-shadow:0 0 14px var(--copper); }
.worker-radar span:nth-child(3) { inset:-13px; border-style:dashed; animation:radarSpin 24s linear infinite; }

.worker-figure { position:relative; width:180px; height:330px; filter:drop-shadow(0 0 28px rgba(97,215,208,.13)); }
.helmet { position:absolute; top:9px; left:55px; width:72px; height:36px; border:2px solid var(--blue); border-radius:50px 50px 8px 8px; border-bottom:0; }
.helmet:after { content:""; position:absolute; left:-10px; bottom:-3px; width:88px; height:2px; background:var(--blue); }
.head { position:absolute; top:45px; left:67px; width:49px; height:57px; border:1px solid rgba(194,234,229,.7); border-radius:45% 45% 48% 48%; }
.torso { position:absolute; top:106px; left:39px; width:105px; height:142px; border:1px solid rgba(194,234,229,.7); border-radius:45px 45px 15px 15px; background:linear-gradient(90deg,transparent,rgba(97,215,208,.05),transparent); }
.torso:before,.torso:after { content:""; position:absolute; top:141px; width:45px; height:90px; border:1px solid rgba(194,234,229,.55); border-top:0; }
.torso:before { left:3px; transform:skewX(-4deg); }
.torso:after { right:3px; transform:skewX(4deg); }
.arm { position:absolute; top:119px; width:32px; height:144px; border:1px solid rgba(194,234,229,.55); border-radius:20px; }
.arm.left { left:9px; transform:rotate(8deg); }
.arm.right { right:6px; transform:rotate(-9deg); }
.sensor { position:absolute; width:9px; height:9px; border:2px solid var(--signal); border-radius:50%; box-shadow:0 0 0 5px rgba(141,245,207,.08),0 0 16px var(--signal); animation:sensorPulse 2.2s infinite; }
.sensor-head { top:61px; left:104px; }
.sensor-chest { top:151px; left:86px; }
.sensor-wrist { top:220px; right:3px; }

.data-card { position:absolute; width:142px; padding:12px 14px; border:1px solid rgba(97,215,208,.24); background:rgba(9,22,21,.72); backdrop-filter:blur(8px); box-shadow:0 16px 45px rgba(0,0,0,.22); }
.data-card:before { content:""; position:absolute; width:24px; height:1px; background:rgba(97,215,208,.45); top:50%; }
.data-card small { display:block; font-size:.55rem; letter-spacing:.16em; color:#75928f; }
.data-card strong { display:block; font:600 1.5rem Manrope; color:#d8f5f0; margin-top:4px; }
.data-card strong span { font-size:.65rem; color:var(--signal); margin-left:2px; }
.data-card i { display:block; height:2px; background:#263b38; margin-top:8px; }
.data-card i b { display:block; width:92%; height:100%; background:var(--signal); box-shadow:0 0 8px var(--signal); }
.data-card em { font-size:.55rem; color:#738b88; font-style:normal; letter-spacing:.12em; }
.card-readiness { left:0; top:135px; }
.card-readiness:before { right:-24px; }
.card-environment { right:-5px; top:120px; }
.card-environment:before { left:-24px; }
.card-environment strong { color:var(--signal); font-size:1.1rem; }
.card-signal { right:-2px; bottom:100px; width:165px; }
.card-signal:before { left:-24px; }
.card-signal svg { width:100%; margin-top:5px; }
.card-signal polyline { fill:none; stroke:var(--copper); stroke-width:1.5; }
.hero-system .system-label { position:absolute; text-transform:uppercase; letter-spacing:.17em; font-size:.62rem; color:#839794; }
.hero-system .system-label i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 9px var(--signal); margin-right:8px; }
.hero-system .top-label { top:28px; }
.hero-system .bottom-label { bottom:20px; }
.hero-system .coordinate { position:absolute; font-size:.58rem; color:#536965; letter-spacing:.15em; }
.hero-system .c1 { left:5%; top:auto; bottom:73px; }
.hero-system .c2 { right:1%; top:72px; bottom:auto; }

@keyframes sensorPulse { 50% { box-shadow:0 0 0 10px rgba(141,245,207,0),0 0 22px var(--signal); } }
@keyframes radarSpin { to { transform:rotate(360deg); } }

@media(max-width:900px) {
  .hero-system { right:-120px; opacity:.62; }
}
@media(max-width:600px) {
  .hero-system { right:-230px; bottom:-80px; }
  .data-card { transform:scale(.9); }
}
@media(prefers-reduced-motion:reduce) {
  .worker-radar span:nth-child(3),.sensor { animation:none; }
}