.service-desk{--sd-ink:#090a26;--sd-muted:#61678e;--sd-blue:#4167ff;--sd-ease:cubic-bezier(.22,1,.36,1);position:relative;isolation:isolate;overflow:hidden;padding:48px 0 28px;background:#f3edfc;color:var(--sd-ink);scroll-margin-top:80px}
.service-desk::before{content:"";position:absolute;z-index:-1;width:950px;height:760px;left:-120px;top:-10px;border:1px solid #e7dcf633;border-radius:50%;transform:rotate(16deg)}
.service-desk .sd-wrap{width:91%;max-width:1600px;margin:auto}.service-desk .sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.service-desk .sd-copy{position:relative;padding:30px 12px 8px 8px;min-width:0}.service-desk .sd-eyebrow{font-size:16px;font-weight:650;letter-spacing:.12em;color:var(--sd-blue)}
.service-desk h2{font-size:clamp(38px,4.2vw,70px);line-height:.99;letter-spacing:-.048em;font-weight:720;margin:18px 0 24px;position:relative;z-index:1}
.service-desk .sd-description{font-size:clamp(17px,1.24vw,21px);line-height:1.5;color:var(--sd-muted);max-width:650px;position:relative;z-index:1;margin:0}
.service-desk .sd-benefits{display:grid;gap:5px;margin:22px 0 0;position:relative;z-index:1}.service-desk .sd-benefits li{display:flex;align-items:center;gap:16px;font-size:clamp(15px,1.15vw,19px);line-height:1.4}.service-desk .sd-check{width:40px;height:40px;flex:none;background:#e5eaff;border-radius:50%;padding:9px;color:var(--sd-blue)}
.service-desk .sd-orbit{position:absolute;inset:0;pointer-events:none;z-index:0}.service-desk .sd-orbit>svg{width:100%;height:100%;fill:#6374ff}.service-desk .sd-orbit-path{stroke:#6675ff;stroke-width:1;stroke-dasharray:3 3;fill:none}.service-desk .sd-tile{position:absolute;display:grid;place-items:center;width:64px;height:64px;border-radius:17px;background:#ffffffcf;box-shadow:0 8px 25px #555de80a;color:#7045ff;pointer-events:auto;transition:transform 200ms ease,box-shadow 200ms ease}.service-desk .sd-tile svg{width:30px;height:30px}.service-desk .sd-tile-headset{right:4%;top:20%}.service-desk .sd-tile-document{right:4%;top:64%;width:54px;height:54px}.service-desk .sd-tile-people{right:18%;bottom:4%;width:54px;height:54px}
.service-desk .sd-card{min-width:0;background:#ffffffed;border:1px solid white;border-radius:20px;box-shadow:0 14px 40px -22px #6477d84d;overflow:hidden}.service-desk .sd-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-bottom:1px solid #e8ebf6;background:linear-gradient(110deg,#fdfdff,#f4f6ff)}.service-desk .sd-card-head h3{font-size:18px;font-weight:600;letter-spacing:0;line-height:1.5;margin:0}
.service-desk .sd-badge{display:inline-flex;gap:9px;align-items:center;justify-content:center;border-radius:30px;padding:8px 16px;font-size:14px;white-space:nowrap;line-height:1.5}.service-desk .sd-badge::before{content:"";width:10px;height:10px;background:var(--sd-dot,#4167ff);border-radius:50%;flex:none}.service-desk .sd-card-head .sd-badge{padding:4px 13px;border:1px solid #e3e7ff;color:#505b89;font-weight:550}.service-desk .sd-blue{--sd-dot:#4167ff;color:#283ab0;background:#f1f4ff}.service-desk .sd-orange{--sd-dot:#ff9800;color:#a65a00;background:#fff7eb}.service-desk .sd-green{--sd-dot:#00b97d;color:#08735f;background:#edfbf5}.service-desk .sd-red{--sd-dot:#ff2547;color:#ce1735;background:#fff0f3}
.service-desk .sd-dashboard-body{padding:0 22px 12px}.service-desk .sd-overview{display:grid;grid-template-columns:126px 1fr 148px;gap:18px;align-items:center;min-height:163px}.service-desk .sd-ring{position:relative;width:126px;aspect-ratio:1}.service-desk .sd-ring svg{width:100%;height:100%;fill:none;stroke-width:18}.service-desk .sd-ring-track{stroke:#e3e5f3}.service-desk .sd-meter{stroke:url(#sd-ring-gradient)}.service-desk .sd-ring strong{position:absolute;inset:0;display:grid;place-items:center;font-size:25px;font-weight:700;font-variant-numeric:tabular-nums}
.service-desk .sd-targets{display:grid;gap:12px;padding-left:20px;border-left:1px solid #e2e6f3}.service-desk .sd-targets>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.service-desk .sd-targets dt{font-size:14px;white-space:nowrap}.service-desk .sd-clock{position:relative;width:148px;height:148px;border-radius:50%;border:1px solid #eceaff;background:radial-gradient(circle,#eaeaff 0,#f8f8ff 62%,transparent 64%)}.service-desk .sd-clock::before,.service-desk .sd-clock::after{content:"";position:absolute;inset:10px;border:1px solid #e9e6ff;border-radius:50%}.service-desk .sd-clock::after{inset:18px}.service-desk .sd-clock svg{position:absolute;inset:15px;width:118px;height:118px;fill:#e1e0ff;stroke:#b9b3ff;stroke-width:1.5}.service-desk .sd-clock-hand{fill:none;stroke:#694bff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform-origin:50px 50px}
.service-desk .sd-ticket{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:18px;min-height:67px;border-top:1px solid #e8ebf6;transition:background 180ms ease}.service-desk .sd-ticket-icon{width:62px;height:54px;display:grid;place-items:center;border-radius:15px;color:var(--sd-dot)}.service-desk .sd-ticket-icon svg{width:32px;height:32px}.service-desk .sd-ticket strong{font-size:16px;line-height:1.4;font-weight:600}.service-desk .sd-ticket p{font-size:16px;color:var(--sd-muted);margin:2px 0 0;line-height:1.4}.service-desk .sd-status{min-width:118px}
.service-desk .sd-resolved-body{display:grid;grid-template-columns:42% 58%;padding:18px 22px 22px;min-height:240px}.service-desk .sd-gauge{position:relative;padding:0 24px 0 0;border-right:1px solid #e2e6f3;text-align:center}.service-desk .sd-gauge svg{width:100%;height:132px;fill:none;stroke-width:21;stroke-linecap:round}.service-desk .sd-gauge-track{stroke:#e7eaf5}.service-desk .sd-gauge-fill{stroke:url(#sd-gauge-gradient)}.service-desk .sd-gauge strong{position:absolute;top:56px;left:0;right:24px;font-size:46px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}.service-desk figcaption{font-size:16px;line-height:1.4;color:var(--sd-muted)}.service-desk .sd-gauge figcaption{max-width:240px;margin:0 auto}.service-desk .sd-trend{position:relative;margin-left:20px;align-self:end}.service-desk .sd-trend svg{width:100%;display:block}.service-desk .sd-decor-bar{fill:url(#sd-pale);transform-box:fill-box;transform-origin:bottom}.service-desk .sd-trend-line{fill:none;stroke:#4167ff;stroke-width:1.5;stroke-dasharray:3 4}.service-desk .sd-success{position:absolute;right:6%;top:0;width:52px;height:52px;display:grid;place-items:center;color:#00c594;background:linear-gradient(130deg,#eefcf5,#e3f1fc);border:2px solid white;border-radius:14px;box-shadow:0 7px 20px #6677b522}.service-desk .sd-success svg{width:36px;height:36px}
.service-desk .sd-category-figure{padding:20px 22px 12px}.service-desk .sd-chart{display:block;width:100%;height:auto;overflow:visible}.service-desk .sd-gridline{stroke:#eef0f8;stroke-dasharray:2 2}.service-desk .sd-axis{stroke:#dce0ef;fill:none}.service-desk .sd-axis-label{fill:var(--sd-muted);font-size:14px}.service-desk .sd-value{fill:var(--sd-ink);font-size:16px;font-weight:650}.service-desk .sd-bar{fill:url(#sd-bar-gradient);transform-box:fill-box;transform-origin:bottom;transition:filter 180ms ease}.service-desk .sd-category-figure figcaption{margin-top:4px;font-size:15px}
@media(hover:hover) and (pointer:fine){.service-desk .sd-ticket:hover{background:#f7f8ff}.service-desk .sd-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px #6970cf20}.service-desk .sd-bar-item:hover .sd-bar{filter:brightness(1.09)}}
@media(max-width:1400px){.service-desk .sd-overview{grid-template-columns:110px 1fr 100px;gap:12px}.service-desk .sd-ring{width:110px}.service-desk .sd-clock{width:100px;height:100px}.service-desk .sd-clock svg{inset:0;width:100px;height:100px}.service-desk .sd-targets{padding-left:12px}.service-desk .sd-targets dt{font-size:12px}.service-desk .sd-targets .sd-badge{font-size:12px;padding:7px 10px}.service-desk .sd-tile-headset{right:0;top:16%}.service-desk .sd-tile-people{right:4%;bottom:2%}.service-desk .sd-tile-document{right:0;top:62%}.service-desk .sd-copy{padding-right:36px}.service-desk .sd-ticket{gap:12px}.service-desk .sd-gauge strong{font-size:40px}.service-desk .sd-gauge figcaption{font-size:14px}}
@media(max-width:1100px){.service-desk .sd-grid{grid-template-columns:1fr}.service-desk .sd-copy{padding:12px 100px 20px 0}.service-desk h2{font-size:58px}.service-desk .sd-description{font-size:20px}.service-desk .sd-benefits li{font-size:18px}.service-desk .sd-overview{grid-template-columns:126px 1fr 148px}.service-desk .sd-ring{width:126px}.service-desk .sd-clock{width:148px;height:148px}.service-desk .sd-clock svg{inset:15px;width:118px;height:118px}.service-desk .sd-targets dt{font-size:15px}.service-desk .sd-targets .sd-badge{font-size:14px}.service-desk .sd-resolved-body{min-height:260px}.service-desk .sd-gauge svg{height:150px}.service-desk .sd-gauge strong{font-size:50px;top:65px}.service-desk .sd-gauge figcaption{font-size:16px}.service-desk .sd-chart{max-height:250px}}
@media(max-width:600px){.service-desk{padding:32px 0}.service-desk .sd-wrap{width:calc(100% - 32px)}.service-desk .sd-copy{padding:0 0 12px}.service-desk h2{font-size:clamp(33px,8.5vw,50px);line-height:1.04;margin:16px 0 20px}.service-desk .sd-description{font-size:17px}.service-desk .sd-benefits{gap:12px}.service-desk .sd-benefits li{font-size:15px;gap:12px}.service-desk .sd-check{width:32px;height:32px;padding:6px}.service-desk .sd-orbit{display:none}.service-desk .sd-card-head{padding:12px}.service-desk .sd-card-head h3{font-size:13px}.service-desk .sd-card-head .sd-badge{font-size:10px;padding:4px 7px;gap:5px}.service-desk .sd-dashboard-body{padding:0 12px 8px}.service-desk .sd-overview{grid-template-columns:84px 1fr;gap:12px;min-height:140px}.service-desk .sd-ring{width:84px}.service-desk .sd-ring strong{font-size:21px}.service-desk .sd-clock{display:none}.service-desk .sd-targets{padding-left:10px;gap:12px}.service-desk .sd-targets>div{display:block}.service-desk .sd-targets dt{font-size:11px;margin-bottom:4px}.service-desk .sd-targets .sd-badge{font-size:11px;padding:3px 8px}.service-desk .sd-ticket{grid-template-columns:38px 1fr auto;gap:8px;padding:10px 0}.service-desk .sd-ticket-icon{width:38px;height:40px;border-radius:10px}.service-desk .sd-ticket-icon svg{width:24px;height:24px}.service-desk .sd-ticket strong{font-size:12px}.service-desk .sd-ticket p{font-size:11px}.service-desk .sd-status{min-width:0;padding:5px 7px;font-size:10px;gap:5px}.service-desk .sd-badge::before{width:7px;height:7px}.service-desk .sd-resolved-body{padding:16px 12px;grid-template-columns:1fr;gap:18px}.service-desk .sd-gauge{padding:0;border:0}.service-desk .sd-gauge svg{width:260px;max-width:100%;height:145px}.service-desk .sd-gauge strong{right:0;top:62px;font-size:46px}.service-desk .sd-trend{margin:0 auto;width:100%;max-width:350px}.service-desk .sd-category-figure{padding:16px 12px}.service-desk .sd-chart{min-height:155px}.service-desk .sd-category-figure figcaption{font-size:13px;margin-top:10px}}
/* Final artwork is the default. Animation classes are added only on intersection. */
@media(prefers-reduced-motion:no-preference){
.service-desk .sd-playing [data-sd-reveal],.service-desk .sd-playing[data-sd-reveal]{animation:sd-enter 650ms var(--sd-ease) var(--sd-delay,0ms) backwards}
.service-desk .sd-playing .sd-check path{animation:sd-check 450ms var(--sd-ease) 450ms backwards;stroke-dasharray:30}
.service-desk .sd-playing .sd-orbit-path{animation:sd-path 1200ms var(--sd-ease) backwards}
.service-desk .sd-playing .sd-clock-hand{animation:sd-hand 900ms var(--sd-ease) 400ms backwards}
.service-desk .sd-playing .sd-bar,.service-desk .sd-playing .sd-decor-bar{animation:sd-grow 800ms var(--sd-ease) var(--sd-delay,0ms) backwards}
.service-desk .sd-playing .sd-trend-mask{animation:sd-wipe 1200ms var(--sd-ease) 200ms backwards}
.service-desk .sd-playing .sd-success path{stroke-dasharray:30;animation:sd-check 450ms var(--sd-ease) 1200ms backwards}
.service-desk .sd-playing .sd-status{animation:sd-enter 400ms var(--sd-ease) calc(var(--sd-delay) + 180ms) backwards}
}
@keyframes sd-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sd-grow{from{transform:scaleY(.001)}to{transform:scaleY(1)}}
@keyframes sd-path{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes sd-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sd-check{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes sd-hand{from{transform:rotate(-45deg)}to{transform:rotate(0)}}
.service-desk .sd-orbit-path{stroke-dasharray:.5 .7}
@media(min-width:1101px){.service-desk h2{line-height:.96;margin:16px 0 20px}.service-desk .sd-copy{padding-top:24px}.service-desk .sd-benefits{margin-top:18px}.service-desk .sd-category-figure{padding-top:14px}.service-desk .sd-chart{height:195px}.service-desk .sd-resolved-body{min-height:240px}.service-desk .sd-trend{max-height:190px}.service-desk .sd-trend>svg{height:190px}}
@media(max-width:600px){.service-desk .sd-chart .sd-axis-label{font-size:23px}.service-desk .sd-chart .sd-value{font-size:26px}}
@media(prefers-reduced-motion:reduce){.service-desk *{animation:none!important;transition:none!important}}