:root {
      --ink: #1a1029;
      --muted: rgba(26, 16, 41, .62);
      --card: rgba(255, 255, 255, .78);
      --stroke: rgba(124, 58, 237, .18);
      --p1: #7c3aed;
      --p2: #a78bfa;
      --shadow: 0 22px 60px rgba(26, 16, 41, .10);
      --shadowHover: 0 30px 80px rgba(26, 16, 41, .14);
  }

  /* GRID */
  .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 26px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 0;
  }

  @media (max-width: 980px) {
      .svc-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

  @media (max-width: 640px) {
      .svc-grid {
          grid-template-columns: 1fr;
      }
  }

  /* CARD */
  .svc-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 28px 26px 26px;
      border-radius: 22px;
      background: var(--card);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      text-decoration: none;
      color: var(--ink);
      overflow: hidden;
      transform: translateZ(0);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      backdrop-filter: blur(10px);
  }

  .svc-card::before {
      content: "";
      position: absolute;
      inset: -2px;
      background:
          radial-gradient(260px 160px at 50% 18%,
              rgba(124, 58, 237, .20),
              transparent 65%),
          radial-gradient(240px 160px at 20% 30%,
              rgba(167, 139, 250, .10),
              transparent 60%);
      opacity: .55;
      pointer-events: none;
  }

  .svc-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadowHover);
      border-color: rgba(124, 58, 237, .26);
  }

  /* MEDIA (image area) */
  .svc-media {
      position: relative;
      width: min(360px, 92%);
      aspect-ratio: 16 / 9;
      border-radius: 18px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .55);
      border: 1px solid rgba(124, 58, 237, .12);
      box-shadow: 0 14px 40px rgba(26, 16, 41, .08);
      transform: translateZ(0);
  }

  .svc-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: translateZ(0);
      animation: svc-float 4.8s ease-in-out infinite;
      transition: transform .18s ease;
      will-change: transform;
      /* Extra padding to prevent cutting off */
      padding: 10px;
  }

  .svc-card:hover .svc-media img {
      transform: scale(1.035);
  }

  /* Universal overlay + shine sweep */
  .svc-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
  }

  .svc-media::after {
      content: "";
      position: absolute;
      inset: -30% -30%;
      background: linear-gradient(115deg,
              transparent 30%,
              rgba(255, 255, 255, .55) 45%,
              rgba(167, 139, 250, .20) 50%,
              rgba(255, 255, 255, .30) 55%,
              transparent 70%);
      transform: translateX(-35%) translateY(0) rotate(0deg);
      opacity: 0;
      transition: opacity .18s ease;
      pointer-events: none;
  }

  .svc-card:hover .svc-media::after {
      opacity: .85;
      animation: svc-shine .75s ease-out 1;
  }

  /* TEXT */
  .svc-text {
      text-align: center;
      margin-top: 18px;
  }

  .svc-text h3 {
      margin: 0 0 8px;
      font-size: 20px;
      letter-spacing: -.01em;
      font-weight: 800;
  }

  .svc-text p {
      margin: 0;
      font-size: 16px;
      color: var(--muted);
      line-height: 1.5;
  }

  /* Mobile text sizes */
  @media (max-width: 640px) {
      .svc-text h3 {
          font-size: 18px;
      }

      .svc-text p {
          font-size: 14px;
      }

      .svc-card {
          padding: 20px 18px 18px;
      }

      .svc-media {
          width: 100%;
          aspect-ratio: 16 / 10;
      }
  }

  /* IDLE FLOAT (very subtle) */
  @keyframes svc-float {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-6px);
      }
  }

  @keyframes svc-shine {
      0% {
          transform: translateX(-45%) rotate(0deg);
      }

      100% {
          transform: translateX(45%) rotate(0deg);
      }
  }

  /* ============================================================
     PER-CARD MOTION OVERLAYS
     We draw extra motion on top without changing your images.
  ============================================================ */

  /* 1) AI AGENTS: pulse rings + visor scan */
  .svc-card.is-agents .svc-overlay::before,
  .svc-card.is-agents .svc-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 180px;
      height: 180px;
      transform: translate(-50%, -55%);
      border-radius: 999px;
      border: 1px solid rgba(124, 58, 237, .25);
      opacity: 0;
      animation: svc-pulse 2.6s ease-out infinite;
      filter: drop-shadow(0 0 14px rgba(124, 58, 237, .18));
  }

  .svc-card.is-agents .svc-overlay::after {
      width: 230px;
      height: 230px;
      animation-delay: .8s;
      opacity: .0;
  }

  .svc-card.is-agents .svc-overlay {
      background:
          linear-gradient(180deg,
              transparent 0%,
              rgba(124, 58, 237, .00) 48%,
              rgba(167, 139, 250, .18) 52%,
              rgba(124, 58, 237, .00) 56%,
              transparent 100%);
      background-size: 100% 260%;
      background-position: 0% 0%;
      animation: svc-scan 3.8s ease-in-out infinite;
      mix-blend-mode: screen;
      opacity: .55;
  }

  @keyframes svc-pulse {
      0% {
          transform: translate(-50%, -55%) scale(.92);
          opacity: 0;
      }

      18% {
          opacity: .75;
      }

      100% {
          transform: translate(-50%, -55%) scale(1.12);
          opacity: 0;
      }
  }

  @keyframes svc-scan {

      0%,
      100% {
          background-position: 0% 0%;
          opacity: .35;
      }

      50% {
          background-position: 0% 100%;
          opacity: .62;
      }
  }

  /* 2) CHATBOTS: bubbles + typing dots */
  .svc-card.is-chatbots .svc-overlay {
      position: absolute;
      inset: 0;
  }

  .svc-card.is-chatbots .svc-overlay .bubble {
      display: none;
  }

  /* safety */

  .svc-card.is-chatbots .svc-overlay::before {
      content: "";
      position: absolute;
      left: 14%;
      top: 22%;
      width: 54px;
      height: 22px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .80);
      border: 1px solid rgba(124, 58, 237, .22);
      box-shadow: 0 16px 30px rgba(26, 16, 41, .10);
      animation: svc-bob 3.8s ease-in-out infinite;
  }

  .svc-card.is-chatbots .svc-overlay::after {
      content: "";
      position: absolute;
      right: 12%;
      top: 14%;
      width: 74px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(124, 58, 237, .20);
      box-shadow: 0 16px 30px rgba(26, 16, 41, .10);
      animation: svc-bob 4.4s ease-in-out infinite;
      animation-delay: .25s;
  }

  /* typing dots pill */
  .svc-card.is-chatbots .svc-media .svc-typing {
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .70);
      border: 1px solid rgba(124, 58, 237, .20);
      box-shadow: 0 18px 44px rgba(26, 16, 41, .10);
      pointer-events: none;
  }

  .svc-card.is-chatbots .svc-media .svc-typing span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--p2), var(--p1));
      opacity: .9;
      animation: svc-dot 1.05s ease-in-out infinite;
  }

  .svc-card.is-chatbots .svc-media .svc-typing span:nth-child(2) {
      animation-delay: .12s;
  }

  .svc-card.is-chatbots .svc-media .svc-typing span:nth-child(3) {
      animation-delay: .24s;
  }

  @keyframes svc-dot {

      0%,
      100% {
          transform: translateY(0);
          opacity: .55;
      }

      50% {
          transform: translateY(-4px);
          opacity: 1;
      }
  }

  @keyframes svc-bob {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-9px);
      }
  }

  /* 3) VOICE: EQ waveform bars + rotating sound ring */
  .svc-card.is-voice .svc-media .svc-eq {
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .68);
      border: 1px solid rgba(124, 58, 237, .20);
      box-shadow: 0 18px 44px rgba(26, 16, 41, .10);
      pointer-events: none;
  }

  .svc-card.is-voice .svc-media .svc-eq span {
      width: 4px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--p2), var(--p1));
      transform-origin: bottom;
      animation: svc-eq 1.15s ease-in-out infinite;
      opacity: .9;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(2) {
      animation-delay: .10s;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(3) {
      animation-delay: .20s;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(4) {
      animation-delay: .30s;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(5) {
      animation-delay: .40s;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(6) {
      animation-delay: .28s;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(7) {
      animation-delay: .18s;
  }

  .svc-card.is-voice .svc-media .svc-eq span:nth-child(8) {
      animation-delay: .08s;
  }

  .svc-card.is-voice .svc-overlay {
      position: absolute;
      inset: 0;
  }

  .svc-card.is-voice .svc-overlay::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 240px;
      height: 240px;
      transform: translate(-50%, -55%);
      border-radius: 999px;
      border: 1px solid rgba(167, 139, 250, .18);
      box-shadow: 0 0 0 1px rgba(124, 58, 237, .10) inset;
      opacity: .65;
      animation: svc-spin 10s linear infinite;
  }

  .svc-card.is-voice .svc-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 240px;
      height: 240px;
      transform: translate(-50%, -55%);
      border-radius: 999px;
      border-top: 2px solid rgba(124, 58, 237, .22);
      border-right: 2px solid rgba(124, 58, 237, .10);
      border-bottom: 2px solid transparent;
      border-left: 2px solid transparent;
      opacity: .6;
      animation: svc-spin 6.5s linear infinite reverse;
  }

  @keyframes svc-eq {

      0%,
      100% {
          transform: scaleY(.65);
      }

      50% {
          transform: scaleY(2.2);
      }
  }

  @keyframes svc-spin {
      0% {
          transform: translate(-50%, -55%) rotate(0deg);
      }

      100% {
          transform: translate(-50%, -55%) rotate(360deg);
      }
  }

  /* 4) AUTOMATION: moving dot along a path + node glow */
  .svc-card.is-automation .svc-overlay {
      position: absolute;
      inset: 0;
  }

  .svc-card.is-automation .svc-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(6px 6px at 26% 34%, rgba(124, 58, 237, .55), transparent 60%),
          radial-gradient(6px 6px at 68% 30%, rgba(167, 139, 250, .55), transparent 60%),
          radial-gradient(6px 6px at 74% 68%, rgba(124, 58, 237, .50), transparent 60%),
          radial-gradient(6px 6px at 34% 70%, rgba(167, 139, 250, .45), transparent 60%);
      opacity: .55;
      animation: svc-nodes 2.8s ease-in-out infinite;
      mix-blend-mode: screen;
  }

  .svc-card.is-automation .svc-overlay::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(124, 58, 237, .85);
      box-shadow: 0 0 18px rgba(124, 58, 237, .35);
      left: 22%;
      top: 32%;
      animation: svc-flow 3.4s ease-in-out infinite;
  }

  @keyframes svc-nodes {

      0%,
      100% {
          opacity: .35;
          filter: blur(0px);
      }

      50% {
          opacity: .65;
          filter: blur(.2px);
      }
  }

  @keyframes svc-flow {
      0% {
          transform: translate(0, 0) scale(.9);
          opacity: .0;
      }

      12% {
          opacity: .95;
      }

      33% {
          transform: translate(160px, -18px) scale(1.05);
      }

      66% {
          transform: translate(190px, 120px) scale(.98);
      }

      100% {
          transform: translate(40px, 155px) scale(.9);
          opacity: 0;
      }
  }

  /* 5) VISUALS: sparkles + render sweep */
  .svc-card.is-visuals .svc-overlay {
      position: absolute;
      inset: 0;
  }

  .svc-card.is-visuals .svc-overlay::before {
      content: "";
      position: absolute;
      inset: -20% -20%;
      background: linear-gradient(125deg,
              transparent 35%,
              rgba(167, 139, 250, .18) 48%,
              rgba(255, 255, 255, .30) 52%,
              rgba(124, 58, 237, .10) 56%,
              transparent 70%);
      opacity: .0;
      animation: svc-render 4.2s ease-in-out infinite;
      mix-blend-mode: screen;
  }

  .svc-card.is-visuals .svc-overlay::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(3px 3px at 22% 28%, rgba(255, 255, 255, .9), transparent 60%),
          radial-gradient(2px 2px at 62% 22%, rgba(167, 139, 250, .9), transparent 60%),
          radial-gradient(3px 3px at 74% 52%, rgba(255, 255, 255, .85), transparent 60%),
          radial-gradient(2px 2px at 40% 70%, rgba(124, 58, 237, .85), transparent 60%);
      opacity: .0;
      animation: svc-spark 2.8s ease-in-out infinite;
  }

  @keyframes svc-render {

      0%,
      100% {
          transform: translateX(-18%);
          opacity: .0;
      }

      20% {
          opacity: .55;
      }

      50% {
          transform: translateX(18%);
          opacity: .22;
      }
  }

  @keyframes svc-spark {

      0%,
      100% {
          opacity: .05;
          filter: blur(0px);
      }

      40% {
          opacity: .62;
          filter: blur(.2px);
      }

      70% {
          opacity: .25;
      }
  }

  /* 6) AVATARS: blink + soft light pass */
  .svc-card.is-avatars .svc-overlay {
      position: absolute;
      inset: 0;
  }

  .svc-card.is-avatars .svc-overlay::before {
      content: "";
      position: absolute;
      inset: -30% -30%;
      background: radial-gradient(260px 160px at 55% 28%,
              rgba(255, 255, 255, .55),
              transparent 70%);
      opacity: .25;
      animation: svc-lightpass 5.8s ease-in-out infinite;
      mix-blend-mode: screen;
  }

  .svc-card.is-avatars .svc-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 46%;
      width: 140px;
      height: 38px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: rgba(26, 16, 41, .22);
      opacity: 0;
      animation: svc-blink 9.5s ease-in-out infinite;
      mix-blend-mode: multiply;
      filter: blur(1px);
  }

  @keyframes svc-lightpass {

      0%,
      100% {
          transform: translateX(-12%) translateY(0);
          opacity: .18;
      }

      45% {
          opacity: .35;
      }

      70% {
          transform: translateX(12%) translateY(3px);
          opacity: .22;
      }
  }

  /* quick eyelid "blink" */
  @keyframes svc-blink {

      0%,
      86%,
      100% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleY(.15);
      }

      88% {
          opacity: .45;
          transform: translate(-50%, -50%) scaleY(1);
      }

      90% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleY(.15);
      }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {

      .svc-card,
      .svc-media img,
      .svc-overlay,
      .svc-media::after {
          animation: none !important;
          transition: none !important;
      }
  }