/* ====================================
   Services Offered — horizontal scroll rail (4 cards)
   ==================================== */

.services-offered {
  padding: 140px 0 144px;
  background: var(--bg-page);
  position: relative;
  z-index: 1;
  overflow: hidden; /* keep the scroll rail contained */
}

/* Override the global .container so the rail spans most of the viewport
   on wide monitors instead of being marooned with huge side gutters.
   max-width none + zero side padding lets the rail's own 64px padding
   sit ~64px from the viewport edge regardless of screen width. */
.services-offered > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Header — centered, with generous breathing room above the grid */
.services-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 88px;   /* the auto centers; 88px pushes cards down */
}

.services-header .section-title {
  margin-bottom: 18px;
}

.services-header .section-subtitle {
  margin: 0 auto;
}

/* Horizontal swipe rail — same pattern as testimonials.
   --rail-pad scales with the viewport so gutters stay comfortable on
   both narrow laptops and wide monitors (clamps between 48 and 160px). */
.services-grid {
  --rail-pad: clamp(56px, 9vw, 200px);
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  padding: 4px var(--rail-pad) 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 140px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 140px),
    transparent 100%
  );
}

.services-grid::-webkit-scrollbar { display: none; }

.services-grid > .service-tile {
  flex: 0 0 380px;
  max-width: 380px;
  scroll-snap-align: start;
}

/* Service tile — image on top, then body (heading, desc, CTA). */
.service-tile {
  display: flex;
  flex-direction: column;
  padding: 0;            /* body provides its own internal padding */
  background: #ffffff;
  border: 1px solid rgba(20, 16, 8, 0.06);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Image header — sits flush against the top edge of the card */
.service-tile-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f5efe4 0%, #e8d5b8 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(20, 16, 8, 0.06);
}

.service-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-tile:hover .service-tile-image img {
  transform: scale(1.04);
}

/* Per-service fallback gradients (visible if no image is provided yet) */
.service-tile--rag .service-tile-image {
  background: linear-gradient(135deg, #fdfaf2 0%, #f3eadb 100%);
}
.service-tile--whatsapp .service-tile-image {
  background: linear-gradient(135deg, #f1f5e8 0%, #d6e8c4 100%);
}
.service-tile--chatbots .service-tile-image {
  background: linear-gradient(180deg, #fbf6ec 0%, #f1e6d0 100%);
}
.service-tile--workflow .service-tile-image {
  background: linear-gradient(135deg, #fdfaf2 0%, #f3eadb 100%);
}

/* Body — name, description, CTA stacked with consistent padding */
.service-tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 28px 28px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.service-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(232, 201, 136, 0.16), rgba(232, 201, 136, 0));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.service-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 16, 8, 0.12);
  box-shadow: 0 16px 36px rgba(20, 16, 8, 0.08),
              0 4px 10px rgba(20, 16, 8, 0.04);
}

.service-tile:hover::before {
  opacity: 1;
}

.service-tile-name {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.service-tile-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* Bottom CTA — text + arrow. Pinned to the bottom of the card so all
   four CTAs line up across the rail (flex stretches cards to equal height). */
.service-tile-cta {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.service-tile-cta .cta-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-tile:hover .service-tile-cta .cta-arrow {
  transform: translateX(4px);
}

/* Tablet — tighter padding, slightly smaller cards on the rail. */
@media (max-width: 900px) {
  .services-grid {
    gap: 18px;
    padding: 4px 24px 20px;
    scroll-padding-left: 24px;
  }
  .services-grid > .service-tile {
    flex: 0 0 340px;
    max-width: 340px;
  }
  .services-header {
    margin-bottom: 64px;
  }
}

/* Mobile — same rail, smaller cards that show next-card peek. */
@media (max-width: 600px) {
  .services-offered {
    padding: 72px 0 80px;
  }
  .services-grid {
    gap: 14px;
    padding: 4px 20px 20px;
    scroll-padding-left: 20px;
  }
  .services-grid > .service-tile {
    flex: 0 0 82%;
    max-width: 320px;
  }
  .service-tile-body {
    padding: 22px 22px 24px;
    gap: 12px;
  }
  .service-tile-name { font-size: 18px; }
  .service-tile-desc { font-size: 14px; }
  .services-header {
    margin-bottom: 40px;
  }
}

/* ====================================
   Rail scroll hint — animated hand indicator below horizontal-scroll
   sections (services + testimonials). Hides itself on first scroll.
   ==================================== */

.rail-scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin: 28px auto 0;
  padding: 9px 18px 9px 14px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(20, 16, 8, 0.07);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--text-muted);
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.06);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rail-scroll-hint.is-hidden {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.rail-scroll-hand {
  color: var(--text-primary);
  flex-shrink: 0;
  animation: handSwipe 2.4s ease-in-out infinite;
}

@keyframes handSwipe {
  0%, 100% { transform: translateX(-7px) rotate(-4deg); opacity: 0.85; }
  50%      { transform: translateX(7px) rotate(4deg);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-scroll-hand { animation: none; }
}

@media (max-width: 600px) {
  .rail-scroll-hint {
    margin-top: 18px;
    font-size: 12.5px;
    padding: 8px 16px 8px 12px;
  }
}

/* ====================================
   RAG card — custom animated illustration in place of an image.
   Three "document" cards floating in a fanned layout, each with an
   accent line that glows in sequence; a query dot below pulses out
   a ring to suggest retrieval.
   ==================================== */

.rag-anim {
  position: relative;
  background: linear-gradient(135deg, #fdfaf2 0%, #f3eadb 100%);
  overflow: hidden;
}

/* Hide any leftover <img> if the markup keeps it */
.rag-anim > img { display: none; }

/* Subtle dotted-grid background suggesting vector space */
.rag-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196, 158, 95, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 158, 95, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  opacity: 0.65;
  pointer-events: none;
}

/* Document cards */
.rag-doc {
  position: absolute;
  top: 50%;
  width: 28%;
  aspect-ratio: 3 / 4;
  background: #ffffff;
  border: 1px solid rgba(20, 16, 8, 0.07);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(60, 40, 20, 0.10),
              0 2px 6px rgba(60, 40, 20, 0.04);
  padding: 9% 10%;
  display: flex;
  flex-direction: column;
  gap: 9%;
  pointer-events: none;
}

.rag-doc-1 {
  left: 22%;
  z-index: 1;
  animation: ragFloat1 5.2s ease-in-out infinite;
}
.rag-doc-2 {
  left: 50%;
  z-index: 3;
  animation: ragFloat2 5.2s ease-in-out infinite 0.4s;
}
.rag-doc-3 {
  left: 78%;
  z-index: 1;
  animation: ragFloat3 5.2s ease-in-out infinite 0.8s;
}

@keyframes ragFloat1 {
  0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
  50%      { transform: translate(-50%, calc(-50% - 6px)) rotate(-8deg); }
}
@keyframes ragFloat2 {
  0%, 100% { transform: translate(-50%, -56%) rotate(0deg); }
  50%      { transform: translate(-50%, calc(-56% - 6px)) rotate(0deg); }
}
@keyframes ragFloat3 {
  0%, 100% { transform: translate(-50%, -50%) rotate(8deg); }
  50%      { transform: translate(-50%, calc(-50% - 6px)) rotate(8deg); }
}

/* Doc lines (representing text) */
.rag-line {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(20, 16, 8, 0.13);
  width: 90%;
}
.rag-line:nth-child(3) { width: 75%; }
.rag-line:nth-child(4) { width: 65%; }

/* Top accent line that periodically glows */
.rag-line-accent {
  height: 4px;
  width: 60%;
  background: linear-gradient(90deg, #c49e5f 0%, #e8c97f 100%);
  position: relative;
  animation: ragGlow 6s ease-in-out infinite;
}

.rag-doc-1 .rag-line-accent { animation-delay: 0s; }
.rag-doc-2 .rag-line-accent { animation-delay: 1.4s; }
.rag-doc-3 .rag-line-accent { animation-delay: 2.8s; }

@keyframes ragGlow {
  0%, 80%, 100% { box-shadow: 0 0 0 rgba(196, 158, 95, 0); }
  10%, 25%     { box-shadow: 0 0 12px rgba(196, 158, 95, 0.75); }
}

/* Query node — pulsing dot at the bottom */
.rag-query {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.rag-query-dot {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d4a86a 0%, #b58a48 100%);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(196, 158, 95, 0.55),
              0 2px 6px rgba(60, 40, 20, 0.20);
}

.rag-query-ring {
  position: absolute;
  inset: 0;
  border: 2px solid #c49e5f;
  border-radius: 50%;
  animation: ragRing 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes ragRing {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Subtle hover cue — speed up the ring on card hover */
.service-tile--rag:hover .rag-query-ring {
  animation-duration: 1.4s;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .rag-doc,
  .rag-line-accent,
  .rag-query-ring {
    animation: none;
  }
}

/* ====================================
   WhatsApp Agents card — agent constellation animation.
   The WhatsApp brand mark sits at the center, breathing softly with three
   concentric ripple rings emanating outward. Six "satellite" customer
   nodes pulse around it on staggered timers, suggesting many concurrent
   conversations being handled by one always-on agent. A live ops meter
   anchors the bottom.
   ==================================== */

.wa-anim {
  position: relative;
  background: linear-gradient(135deg, #f3f7ec 0%, #d9e9c5 100%);
  overflow: hidden;
}

/* Soft dot grid in the background */
.wa-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(37, 211, 102, 0.10) 1.4px, transparent 1.8px),
    radial-gradient(circle at 75% 70%, rgba(37, 211, 102, 0.06) 1.4px, transparent 1.8px);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
}

.wa-anim > img { display: none; }

/* ---- Central WhatsApp brand mark ---- */
.wa-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.wa-mark {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35),
              0 2px 8px rgba(18, 140, 126, 0.25);
  animation: waMarkBreathe 3s ease-in-out infinite;
}

.wa-mark svg {
  width: 30px;
  height: 30px;
}

@keyframes waMarkBreathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35),
                0 2px 8px rgba(18, 140, 126, 0.25);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5),
                0 4px 12px rgba(18, 140, 126, 0.3);
  }
}

/* Three concentric ripple rings, staggered */
.wa-ring {
  position: absolute;
  inset: 0;
  border: 2px solid #25d366;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.wa-ring-1 { animation: waRing 3.6s ease-out infinite 0s; }
.wa-ring-2 { animation: waRing 3.6s ease-out infinite 1.2s; }
.wa-ring-3 { animation: waRing 3.6s ease-out infinite 2.4s; }

@keyframes waRing {
  0%   { transform: scale(0.85); opacity: 0.5; border-width: 2px; }
  80%  { opacity: 0.05; }
  100% { transform: scale(2.6); opacity: 0; border-width: 1px; }
}

/* ---- Satellite customer nodes ---- */
.wa-sat {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 1.4px solid #25d366;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.2);
}

/* Inner dot — represents the "active" indicator */
.wa-sat::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #25d366;
  border-radius: 50%;
  opacity: 0.7;
}

.wa-sat-1 { top: 16%;  left: 14%; animation: waSat 3.2s ease-in-out infinite 0s;   }
.wa-sat-2 { top: 22%;  right: 16%; animation: waSat 3.2s ease-in-out infinite 0.4s; }
.wa-sat-3 { bottom: 30%; left: 10%; animation: waSat 3.2s ease-in-out infinite 0.9s; }
.wa-sat-4 { bottom: 28%; right: 12%; animation: waSat 3.2s ease-in-out infinite 1.4s; }
.wa-sat-5 { top: 42%;  left: 22%; animation: waSat 3.2s ease-in-out infinite 1.9s; }
.wa-sat-6 { top: 44%;  right: 24%; animation: waSat 3.2s ease-in-out infinite 2.4s; }

@keyframes waSat {
  0%, 100% {
    transform: scale(1);
    opacity: 0.65;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.2);
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
    box-shadow: 0 0 14px rgba(37, 211, 102, 0.65),
                0 2px 6px rgba(37, 211, 102, 0.3);
  }
}

/* ---- Live ops meter at the bottom ---- */
.wa-meter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(20, 60, 20, 0.7);
  letter-spacing: 0.15px;
  font-family: 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(60, 90, 60, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.wa-meter-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.6);
  animation: waMeterDot 1.6s ease-in-out infinite;
}

@keyframes waMeterDot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.wa-meter-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #128c7e;
  letter-spacing: -0.1px;
}

.wa-meter-label {
  color: rgba(20, 60, 20, 0.65);
}

/* Hover — accelerate everything for a more "alive" feel */
.service-tile--whatsapp:hover .wa-mark {
  animation-duration: 1.8s;
}
.service-tile--whatsapp:hover .wa-ring-1,
.service-tile--whatsapp:hover .wa-ring-2,
.service-tile--whatsapp:hover .wa-ring-3 {
  animation-duration: 2.2s;
}
.service-tile--whatsapp:hover .wa-sat-1,
.service-tile--whatsapp:hover .wa-sat-2,
.service-tile--whatsapp:hover .wa-sat-3,
.service-tile--whatsapp:hover .wa-sat-4,
.service-tile--whatsapp:hover .wa-sat-5,
.service-tile--whatsapp:hover .wa-sat-6 {
  animation-duration: 2s;
}
.service-tile--whatsapp:hover .wa-meter-dot {
  animation-duration: 1s;
}

@media (prefers-reduced-motion: reduce) {
  .wa-mark, .wa-ring, .wa-sat, .wa-meter-dot {
    animation: none;
  }
  .wa-ring { opacity: 0.2; transform: scale(1.4); }
}

@media (max-width: 600px) {
  .wa-core { width: 54px; height: 54px; }
  .wa-mark svg { width: 26px; height: 26px; }
  .wa-sat { width: 12px; height: 12px; }
  .wa-meter { font-size: 9px; padding: 4px 11px 4px 8px; }
}

/* ====================================
   Chatbots card — streamed answer with citations + sources.
   Five lines stream in left-to-right (some with [N] citation badges),
   then three source pills cascade in at the bottom. 11s loop.
   ==================================== */

.cb-anim {
  position: relative;
  background: linear-gradient(180deg, #fbf6ec 0%, #f1e6d0 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 18px 14px;
  gap: 12px;
}

.cb-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(196,158,95,0.10) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(196,158,95,0.07) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.65;
  pointer-events: none;
}

.cb-anim > img { display: none; }

/* Streaming answer */
.cb-response {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 1;
}

.cb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 7px;
}

.cb-line {
  display: block;
  height: 6px;
  border-radius: 3px;
  width: 0;
  opacity: 0;
  background: rgba(20, 16, 8, 0.14);
}

/* First line gets the brand-warm accent — like a section heading */
.cb-row-1 .cb-line {
  height: 7px;
  background: linear-gradient(90deg, #c49e5f 0%, #e8c97f 100%);
}

.cb-row-1 .cb-line { animation: cbLine1 11s ease-out infinite; }
.cb-row-2 .cb-line { animation: cbLine2 11s ease-out infinite; }
.cb-row-3 .cb-line { animation: cbLine3 11s ease-out infinite; }
.cb-row-4 .cb-line { animation: cbLine4 11s ease-out infinite; }
.cb-row-5 .cb-line { animation: cbLine5 11s ease-out infinite; }

/* Each line streams in 0.6-1s after the previous one. */
@keyframes cbLine1 {
  0%, 4%    { width: 0;   opacity: 0; }
  10%, 90%  { width: 78%; opacity: 1; }
  94%, 100% { width: 0;   opacity: 0; }
}
@keyframes cbLine2 {
  0%, 14%   { width: 0;    opacity: 0; }
  20%, 90%  { width: 100%; opacity: 1; }
  94%, 100% { width: 0;    opacity: 0; }
}
@keyframes cbLine3 {
  0%, 24%   { width: 0;   opacity: 0; }
  30%, 90%  { width: 84%; opacity: 1; }
  94%, 100% { width: 0;   opacity: 0; }
}
@keyframes cbLine4 {
  0%, 34%   { width: 0;   opacity: 0; }
  40%, 90%  { width: 95%; opacity: 1; }
  94%, 100% { width: 0;   opacity: 0; }
}
@keyframes cbLine5 {
  0%, 44%   { width: 0;   opacity: 0; }
  50%, 90%  { width: 70%; opacity: 1; }
  94%, 100% { width: 0;   opacity: 0; }
}

/* Inline citation badges — small numbered circles next to lines */
.cb-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(196, 158, 95, 0.18);
  color: #b58a48;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.5);
}

.cb-row-1 .cb-cite { animation: cbCite1 11s ease-out infinite; }
.cb-row-3 .cb-cite { animation: cbCite2 11s ease-out infinite; }
.cb-row-5 .cb-cite { animation: cbCite3 11s ease-out infinite; }

@keyframes cbCite1 {
  0%, 11%   { opacity: 0; transform: scale(0.5); }
  16%, 90%  { opacity: 1; transform: scale(1);   }
  94%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes cbCite2 {
  0%, 31%   { opacity: 0; transform: scale(0.5); }
  36%, 90%  { opacity: 1; transform: scale(1);   }
  94%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes cbCite3 {
  0%, 51%   { opacity: 0; transform: scale(0.5); }
  56%, 90%  { opacity: 1; transform: scale(1);   }
  94%, 100% { opacity: 0; transform: scale(0.5); }
}

/* Sources block at the bottom */
.cb-sources {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(196, 158, 95, 0.25);
  z-index: 1;
}

.cb-sources-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: rgba(20, 16, 8, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cb-sources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cb-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(196, 158, 95, 0.3);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  color: rgba(20, 16, 8, 0.75);
  letter-spacing: 0.05px;
  font-family: 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.06);
  opacity: 0;
  transform: translateY(4px);
}

.cb-source svg {
  width: 9px;
  height: 9px;
  color: #b58a48;
  flex-shrink: 0;
}

.cb-source-1 { animation: cbSource1 11s ease-out infinite; }
.cb-source-2 { animation: cbSource2 11s ease-out infinite; }
.cb-source-3 { animation: cbSource3 11s ease-out infinite; }

@keyframes cbSource1 {
  0%, 60%   { opacity: 0; transform: translateY(4px); }
  66%, 90%  { opacity: 1; transform: translateY(0);   }
  94%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes cbSource2 {
  0%, 65%   { opacity: 0; transform: translateY(4px); }
  71%, 90%  { opacity: 1; transform: translateY(0);   }
  94%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes cbSource3 {
  0%, 70%   { opacity: 0; transform: translateY(4px); }
  76%, 90%  { opacity: 1; transform: translateY(0);   }
  94%, 100% { opacity: 0; transform: translateY(4px); }
}

/* Hover — accelerate the whole stream */
.service-tile--chatbots:hover .cb-line,
.service-tile--chatbots:hover .cb-cite,
.service-tile--chatbots:hover .cb-source {
  animation-duration: 7s;
}

@media (prefers-reduced-motion: reduce) {
  .cb-line, .cb-cite, .cb-source {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .cb-line { width: 80%; }
}

@media (max-width: 600px) {
  .cb-anim { padding: 14px 14px 12px; gap: 10px; }
  .cb-cite { width: 13px; height: 13px; font-size: 7.5px; }
  .cb-source { font-size: 8.5px; padding: 3px 8px 3px 6px; }
  .cb-source svg { width: 8px; height: 8px; }
  .cb-sources-label { font-size: 7.5px; }
}

/* ====================================
   Workflow Automation card — parallel agent lanes.
   Four horizontal "lanes", one per agent, each independently filling its
   progress bar at its own cadence. When a lane completes, a green check
   pulses on the right and the bar resets. Agents run out of sync — the
   card always feels alive, like a fleet of workers chewing through a
   queue. A live ops counter anchors the bottom.
   ==================================== */

.wf-anim {
  position: relative;
  background: linear-gradient(135deg, #fdfaf2 0%, #f3eadb 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px 12px;
}

/* Match the RAG background grid: brand-warm dotted-grid tint at 28px. */
.wf-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196, 158, 95, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 158, 95, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  opacity: 0.65;
  pointer-events: none;
}

.wf-anim > img { display: none; }

.wf-lanes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 1;
}

.wf-lane {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wf-agent {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #d4a86a 0%, #b58a48 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(196, 158, 95, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.wf-agent svg {
  width: 12px;
  height: 12px;
}

/* Progress bar — fills left-to-right, then resets on each cycle */
.wf-bar {
  position: relative;
  flex: 1;
  height: 7px;
  background: rgba(196, 158, 95, 0.16);
  border-radius: 4px;
  overflow: hidden;
}

.wf-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #c49e5f 0%, #e8c97f 100%);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(196, 158, 95, 0.4);
}

/* Subtle moving sheen on the active fill */
.wf-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: wfShimmer 1.4s linear infinite;
  border-radius: inherit;
}

@keyframes wfShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Completion check — fades in when bar hits 100%, fades out on reset */
.wf-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.18);
  color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.55);
}

.wf-tick svg {
  width: 11px;
  height: 11px;
}

/* Each lane runs at its own cadence — out-of-sync feels organic. */
.wf-lane-1 .wf-bar-fill { animation: wfFill 4.6s ease-in-out infinite 0s;   }
.wf-lane-2 .wf-bar-fill { animation: wfFill 5.9s ease-in-out infinite 1.3s; }
.wf-lane-3 .wf-bar-fill { animation: wfFill 3.4s ease-in-out infinite 0.6s; }
.wf-lane-4 .wf-bar-fill { animation: wfFill 6.3s ease-in-out infinite 2.1s; }

.wf-lane-1 .wf-tick { animation: wfTickPop 4.6s ease-out infinite 0s;   }
.wf-lane-2 .wf-tick { animation: wfTickPop 5.9s ease-out infinite 1.3s; }
.wf-lane-3 .wf-tick { animation: wfTickPop 3.4s ease-out infinite 0.6s; }
.wf-lane-4 .wf-tick { animation: wfTickPop 6.3s ease-out infinite 2.1s; }

.wf-lane-1 .wf-agent { animation: wfAgentNudge 4.6s ease-out infinite 0s;   }
.wf-lane-2 .wf-agent { animation: wfAgentNudge 5.9s ease-out infinite 1.3s; }
.wf-lane-3 .wf-agent { animation: wfAgentNudge 3.4s ease-out infinite 0.6s; }
.wf-lane-4 .wf-agent { animation: wfAgentNudge 6.3s ease-out infinite 2.1s; }

@keyframes wfFill {
  0%       { width: 0; }
  82%      { width: 100%; }
  87%      { width: 100%; }
  88%      { width: 0; }
  100%     { width: 0; }
}

@keyframes wfTickPop {
  0%, 80%, 95%, 100% { opacity: 0; transform: scale(0.55); }
  84%, 92%           { opacity: 1; transform: scale(1);    }
}

@keyframes wfAgentNudge {
  0%, 80%, 92%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(196, 158, 95, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  85% {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(196, 158, 95, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* Status pill — live ops counter pinned to the bottom */
.wf-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 9px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(196, 158, 95, 0.25);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(20, 16, 8, 0.7);
  letter-spacing: 0.15px;
  font-family: 'DM Sans', system-ui, sans-serif;
  align-self: center;
  margin-top: 2px;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.wf-status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.6);
  animation: wfStatusDot 1.5s ease-in-out infinite;
}

@keyframes wfStatusDot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.wf-status-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #b58a48;
  letter-spacing: -0.1px;
}

.wf-status-label {
  color: rgba(20, 16, 8, 0.6);
}

/* Hover speeds the whole fleet up */
.service-tile--workflow:hover .wf-lane-1 .wf-bar-fill,
.service-tile--workflow:hover .wf-lane-1 .wf-tick,
.service-tile--workflow:hover .wf-lane-1 .wf-agent { animation-duration: 3s; }

.service-tile--workflow:hover .wf-lane-2 .wf-bar-fill,
.service-tile--workflow:hover .wf-lane-2 .wf-tick,
.service-tile--workflow:hover .wf-lane-2 .wf-agent { animation-duration: 3.8s; }

.service-tile--workflow:hover .wf-lane-3 .wf-bar-fill,
.service-tile--workflow:hover .wf-lane-3 .wf-tick,
.service-tile--workflow:hover .wf-lane-3 .wf-agent { animation-duration: 2.2s; }

.service-tile--workflow:hover .wf-lane-4 .wf-bar-fill,
.service-tile--workflow:hover .wf-lane-4 .wf-tick,
.service-tile--workflow:hover .wf-lane-4 .wf-agent { animation-duration: 4s; }

.service-tile--workflow:hover .wf-status-dot { animation-duration: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .wf-bar-fill, .wf-tick, .wf-agent, .wf-status-dot, .wf-bar-fill::after {
    animation: none;
  }
  .wf-bar-fill { width: 70%; }
  .wf-tick { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
  .wf-anim     { padding: 14px 14px 10px; gap: 6px; }
  .wf-lanes    { gap: 6px; }
  .wf-agent    { width: 22px; height: 22px; border-radius: 6px; }
  .wf-agent svg { width: 11px; height: 11px; }
  .wf-bar      { height: 6px; }
  .wf-tick     { width: 16px; height: 16px; }
  .wf-tick svg { width: 10px; height: 10px; }
  .wf-status   { font-size: 9px; padding: 4px 11px 4px 8px; }
}