/* Motion shared by the marketing pages and service detail pages. */
@media (hover:hover) and (pointer:fine) {
  html,body,body *,body *::before,body *::after {cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2232%22%20viewBox%3D%220%200%2028%2032%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22c%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23277bff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23943aff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M3%202%2022%2019%2013%2020%209%2028Z%22%20fill%3D%22url%28%23c%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2,default!important}
}
.motion-enter {animation:section-arrive .65s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--entrance-delay,0ms)}
@keyframes section-arrive {
  from {opacity:0;translate:0 18px}
  to {opacity:1;translate:0 0}
}
.template-card,.insight-card,.bento-card,.step-card,.value-card,.industry-card,.template-rail>a,.contact-details>div {
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.template-icon svg {transform-origin:center;transition:transform .35s ease}
.motion-visible .template-icon svg {animation:icon-breathe 5s ease-in-out infinite}
@keyframes icon-breathe {
  0%,100% {scale:1;translate:0 0}
  50% {scale:1.07;translate:0 -2px}
}
.template-industry-grid img,.insight-card>img,.feature-image img,.story-image img {
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn {position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s,background .25s}
.btn::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,#ffffff35 50%,transparent 75%);
  transform:translateX(-130%);transition:transform .6s ease;
}
.btn:active {transform:translateY(1px) scale(.98)}
.btn:focus-visible::before {transform:translateX(130%)}
.card-link {transition:translate .25s ease}
.site-nav a {position:relative}
.site-nav a::after {
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:linear-gradient(90deg,#438dff,#ad62ff);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.site-nav a.active::after,.site-nav a:focus-visible::after {transform:scaleX(1)}
.cta-panel {background-size:180% 180%}
.cta-panel.motion-visible {animation:cta-light-flow 10s ease-in-out infinite alternate}
.cta-panel.motion-enter {animation:section-arrive .65s ease both,cta-light-flow 10s ease-in-out infinite alternate}
@keyframes cta-light-flow {from{background-position:0% 50%}to{background-position:100% 50%}}
.field input,.field textarea,.field select {transition:border-color .2s,box-shadow .2s}
details[open]>p {animation:detail-arrive .3s ease}
@keyframes detail-arrive {from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.menu-toggle span {transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
@media (hover:hover) and (pointer:fine) {
  .template-card:hover,.insight-card:hover,.bento-card:hover,.step-card:hover,.value-card:hover,.industry-card:hover,.template-rail>a:hover,.contact-details>div:hover {
    transform:translateY(-5px);border-color:#d9ceff;box-shadow:0 14px 32px #45328212;
  }
  .template-card:hover .template-icon svg,.template-rail>a:hover .template-icon svg {transform:rotate(-8deg) scale(1.1)}
  .template-card:hover img,.insight-card:hover>img,.feature:hover .feature-image img,.story-image:hover img {transform:scale(1.045)}
  .btn:hover::before {transform:translateX(130%)}
  .btn:hover {box-shadow:0 8px 24px #5934ff26}
  a:hover .card-link {translate:4px 0}
  .site-nav a:hover::after {transform:scaleX(1)}
}
@media (max-width:980px) {
  .site-nav.open {animation:detail-arrive .22s ease}
}
.effects-paused *,.effects-paused *::before,.effects-paused *::after {animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce) {
  .motion-enter {opacity:1;translate:none}
  *,*::before,*::after {animation:none!important;transition:none!important}
}
@media (forced-colors:active) {
  html,body,body *,body *::before,body *::after {cursor:auto!important}
}