/* Elyon IoT — Services wheel (scoped to .swheel so it can't leak into the site) */
.swheel{
  --wbg:#F4F2F6;
  --wink:#2A2A30;
  --wmuted:#8A8892;
  --wease:cubic-bezier(.22,1,.36,1);
  --t-in:.22s;
  --t-out:.45s;
  --dim-seg:.10;
  --dim-stripe:.06;
  --dim-text:.13;
  width:100%;
  display:flex;flex-direction:column;align-items:center;
}
.swheel .wrap{width:100%;}

.swheel .bar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:38px;margin-bottom:6px;
}
.swheel .back{
  display:none;align-items:center;gap:8px;
  background:transparent;border:0;padding:10px 12px;
  min-height:44px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--wmuted);cursor:pointer;
  letter-spacing:.14em;text-transform:uppercase;
  transition:color .25s ease;
  border-radius:999px;
}
.swheel .back.show{display:inline-flex;}
.swheel .back:hover{color:var(--wink);background:rgba(42,42,48,.04);}
.swheel .back svg{transition:transform .3s var(--wease);}
@media (min-width:48rem) and (max-width:63.99rem){
  .swheel .back.show{
    padding:12px 16px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(42,42,48,.08);
  }
}
.swheel .back:hover{color:var(--wink);}
.swheel .back:hover svg{transform:translateX(-4px);}

@media (max-width: 47.99rem) {
  .swheel .bar {
    min-height: 44px;
    margin-bottom: 14px;
    position: relative;
    z-index: 5;
  }
  .swheel .back.show {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 999px;
  }
}

.swheel .wheel{width:100%;height:auto;display:block;touch-action:manipulation;}

.swheel .seg,
.swheel .stripe,
.swheel text{
  transition-property:opacity, fill-opacity, filter;
  transition-duration:var(--t-out);
  transition-timing-function:var(--wease);
}
.swheel .wheel.active .seg,
.swheel .wheel.active .stripe,
.swheel .wheel.active text{
  transition-duration:var(--t-in);
}

.swheel .seg{stroke:var(--wbg);stroke-width:1.6;cursor:pointer;}
.swheel .r3{stroke-width:.9;}
.swheel .stripe{stroke-width:1.1;opacity:.85;pointer-events:none;}
.swheel text{pointer-events:none;font-family:var(--font-body),sans-serif;}
.swheel .t1{font-weight:700;fill:#fff;letter-spacing:.07em;text-transform:uppercase;}
.swheel .t2{font-weight:600;fill:#fff;letter-spacing:.05em;text-transform:uppercase;}
.swheel .t3{font-weight:600;fill:#5A5468;letter-spacing:.05em;text-transform:uppercase;}

.swheel .wheel.active .seg{opacity:.2;}
.swheel .wheel.active .stripe{opacity:.14;}
.swheel .wheel.active text{opacity:.18;}
.swheel .wheel.active .seg.lit{opacity:1;filter:none;}
.swheel .wheel.active .r3.lit{fill-opacity:.46;}
.swheel .wheel.active .stripe.lit{opacity:1;filter:none;}
.swheel .wheel.active text.lit{opacity:1;filter:none;}

.swheel .seg.focus{
  filter:drop-shadow(0 3px 10px rgba(60,45,80,.22));
  transition:filter var(--t-in) var(--wease), opacity var(--t-in) var(--wease);
}

@media (prefers-reduced-motion:reduce){
  .swheel .seg,.swheel .stripe,.swheel text,.swheel .back svg{transition:none !important;}
  .swheel .seg.focus{filter:none;}
}

.swheel .hub{cursor:pointer;}
.swheel .hub-t{font-weight:700;fill:var(--wink);letter-spacing:-.01em;font-family:var(--font-mono);}
.swheel .hub-s{font-weight:600;fill:var(--wmuted);letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-mono);}

.swheel .readout{margin-top:12px;text-align:center;min-height:46px;}
.swheel .readout b{display:block;font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wink);}
.swheel .readout span{display:block;font-size:12px;color:var(--wmuted);margin-top:3px;letter-spacing:.05em;}

.swheel .hint{
  margin-top:4px;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--wmuted);
  letter-spacing:.08em;text-transform:uppercase;
}