
/* Shared motion service cards */
.motion-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.motion-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:30px 28px 30px;
  border-radius:28px;
  background:linear-gradient(180deg,#0f2a53 0%,#0b2344 100%);
  border:1px solid rgba(158,183,255,.18);
  box-shadow:0 22px 50px rgba(6,24,54,.12);
  color:#fff;
  isolation:isolate;
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.motion-card::before{
  content:"";
  position:absolute;
  inset:-30% auto auto -10%;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(85,139,255,.34) 0%, rgba(85,139,255,0) 70%);
  opacity:.9;
  transform:translate3d(0,0,0);
  animation:motionCardFloat 7s ease-in-out infinite;
  z-index:-1;
}
.motion-card::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-60px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(73,108,226,.22) 0%, rgba(73,108,226,0) 72%);
  animation:motionCardFloatAlt 9s ease-in-out infinite;
  z-index:-1;
}
.motion-card:hover,
.motion-card:focus-within{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(6,24,54,.18);
  border-color:rgba(158,183,255,.34);
}
.motion-card .motion-card-icon{
  width:64px;
  height:64px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(88,152,255,.26),rgba(145,193,255,.09));
  border:1px solid rgba(167,196,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 24px rgba(5,19,40,.22);
  margin-bottom:18px;
  color:#9bd0ff;
  backdrop-filter:blur(4px);
}
.motion-card .motion-card-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.motion-card .price,
.motion-card .motion-card-kicker,
.motion-card small{
  display:block;
  color:#82c6ff;
  font-weight:800;
  letter-spacing:-.01em;
  font-size:15px;
  margin-bottom:14px;
}
.motion-card h3{
  color:#fff;
  margin:0 0 12px;
  font-size:clamp(28px,2vw,32px);
  line-height:1.08;
}
.motion-card p{
  color:rgba(236,243,255,.9)!important;
  line-height:1.68;
  margin:0 0 24px;
  max-width:40ch;
}
.motion-card .button,
.motion-card .btn,
.motion-card .tl-service-action{
  margin-top:auto;
}
.motion-card .button,
.motion-card .btn{
  border-radius:16px;
  background:linear-gradient(180deg,#4266e7 0%,#3657cf 100%);
  border:1px solid rgba(148,182,255,.26);
  box-shadow:0 12px 24px rgba(20,44,112,.28);
}
.motion-card .button:hover,
.motion-card .btn:hover,
.motion-card .button:focus-visible,
.motion-card .btn:focus-visible{
  transform:translateY(-1px);
}
.motion-card .tl-service-action{
  color:#9fd3ff;
  font-weight:800;
}
.motion-card-grid .tl-service-link,
.motion-card-grid .tl-service{
  text-decoration:none;
}
.motion-card-grid .tl-service small{
  display:block;
  color:#82c6ff;
  margin-bottom:14px;
  font-weight:800;
  font-size:15px;
}
.motion-card-grid .tl-service h3,
.motion-card-grid .tl-service p,
.motion-card-grid .tl-service .tl-service-action{
  position:relative;
  z-index:1;
}
.motion-card-grid .tl-service p:last-of-type{margin-bottom:0}
.motion-card-grid .tl-service-link .tl-service-action{margin-top:auto;display:inline-block}
@keyframes motionCardFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(16px,12px,0)}
}
@keyframes motionCardFloatAlt{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-18px,-12px,0) scale(1.05)}
}
@media (max-width:1020px){
  .motion-card-grid{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
  .motion-card p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .motion-card,.motion-card::before,.motion-card::after{animation:none!important;transition:none!important}
}
