/* One continuous LED edge. Animate the paint angle, never the text or frame. */
@property --ew-edge-angle {
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
#main .compact-service-card {
  border:1px solid var(--border)!important;
  background:var(--surface)!important;
  box-shadow:0 5px 20px #2467e812!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#main .compact-service-card:before { content:none!important; }
#main .compact-service-card>.gradient-border {
  padding:2px; opacity:.85!important;
  transition:opacity .2s ease;
}
#main .compact-service-card>.gradient-border:before {
  inset:0; width:100%; height:100%; min-width:0; aspect-ratio:auto;
  transform:none!important;
  background:conic-gradient(from var(--ew-edge-angle),#3978db,#52cbe0 22%,#a9def7 38%,#4482e8 58%,#72afef 78%,#3978db)!important;
  animation:ew-solution-edge 9s linear infinite;
  animation-play-state:paused;
}
#main .compact-service-card.gradient-in-view>.gradient-border:before { animation-play-state:running; }
.effects-paused #main .compact-service-card>.gradient-border:before { animation-play-state:paused; }
@keyframes ew-solution-edge { to { --ew-edge-angle:360deg; } }
#main .compact-service-card .compact-art-frame {
  cursor:pointer; text-decoration:none; color:inherit;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
#main .compact-art-frame>.gradient-border { display:none; }
#main .compact-art-frame:before { display:none; }
#main .compact-art-frame:focus-visible {
  outline:3px solid var(--primary); outline-offset:3px;
}
#main .compact-service-card:focus-within {
  border-color:var(--primary)!important;
  box-shadow:0 0 0 1px var(--primary),0 10px 28px #2467e826!important;
}
[data-theme=dark] #main .compact-service-card { box-shadow:0 5px 20px #00000030!important; }
[data-theme=dark] #main .compact-service-card>.gradient-border { opacity:.78!important; }
@media(hover:hover) and (pointer:fine) {
  #main .compact-service-card:hover {
    transform:translateY(-3px);
    box-shadow:0 0 0 1px #67b9ed66,0 12px 30px #2467e824!important;
  }
  #main .compact-service-card:hover>.gradient-border,
  #main .compact-service-card:focus-within>.gradient-border { opacity:1!important; }
}
.solution-detail { scroll-margin-top:110px; }
@media(prefers-reduced-motion:reduce) {
  #main .compact-service-card>.gradient-border:before { animation:none!important; }
  #main .compact-service-card { transition:none!important; transform:none!important; }
}
