.intro-123 {
  --num-duration: .4s;      /* Faster circle animations (was .7s) */
  --line-duration: .3s;     /* Faster line animations (was .5s) */
  --num-gap: .4s;           /* Faster stagger between numbers (was .7s) */
  --cards-start: .5s;       /* Cards start almost immediately (was 2.6s) */
  text-align: center;
  margin-top: 10px;
}
.intro-123__inner {
  margin-inline: auto;
  max-width: 1100px;
  padding: clamp(24px, 5vw, 32px) 16px;
}
.intro-123__heading {
  margin: 0 0 .4em;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}
/* Horizontal 3-column grid */
.intro-123__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(40px, 5vw, 60px);
  list-style-type: none !important;
  padding: 0;
  margin-left: 0;
  align-items: stretch;
  counter-reset: list-item;
}

.intro-123__list::before,
.intro-123__list::after {
  display: none !important;
}

.intro-123__item {
  position: relative;
  list-style-type: none !important;
  display: flex;
  flex-direction: column;
  counter-increment: list-item;
  padding-top: 28px;
}

.intro-123__item::marker {
  content: none !important;
  display: none !important;
}

/* Number badge above each card */
.intro-123__item::before {
  content: counter(list-item);
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 53px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 26.085px;
  font-weight: 700;
  line-height: 34.78px;
  letter-spacing: -0.8695px;
  color: #FFFFFF;
  opacity: 0;
  will-change: transform, opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='52' viewBox='0 0 53 52' fill='none'%3E%3CforeignObject x='-34.5254' y='-35' width='121.803' height='121.424'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(17.5px);clip-path:url(%23bgblur_0_2625_618_clip_path);height:100%25;width:100%25'%3E%3C/div%3E%3C/foreignObject%3E%3Cg data-figma-bg-blur-radius='35'%3E%3Crect x='0.474609' width='51.803' height='51.4241' rx='25.712' fill='%23D4D4D4' fill-opacity='0.1'/%3E%3Crect x='1.97461' y='1.5' width='48.803' height='48.4241' rx='24.212' stroke='url(%23paint0_linear_2625_618)' stroke-opacity='0.5' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='bgblur_0_2625_618_clip_path' transform='translate(34.5254 35)'%3E%3Crect x='0.474609' width='51.803' height='51.4241' rx='25.712'/%3E%3C/clipPath%3E%3ClinearGradient id='paint0_linear_2625_618' x1='0.312725' y1='0.1607' x2='26.0241' y2='26.0615' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23BDBDBD' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Dotted line connecting numbers */
.intro-123__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -56px;
  left: calc(50% + 24px);
  width: calc(100% - 48px + clamp(20px, 3vw, 32px));
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(67, 184, 201, 0.6) 0,
    rgba(67, 184, 201, 0.6) 8px,
    transparent 8px,
    transparent 16px
  );
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  will-change: clip-path;
}

/* Animate numbered circles */
.intro-123.is-in .intro-123__item:nth-child(1)::before {
  animation: intro123-circle var(--num-duration) ease both;
  animation-delay: 0s;
}

.intro-123.is-in .intro-123__item:nth-child(2)::before {
  animation: intro123-circle var(--num-duration) ease both;
  animation-delay: var(--num-gap);
}

.intro-123.is-in .intro-123__item:nth-child(3)::before {
  animation: intro123-circle var(--num-duration) ease both;
  animation-delay: calc(2 * var(--num-gap));
}

/* Animate dotted lines */
.intro-123.is-in .intro-123__item:nth-child(1)::after {
  animation: intro123-line var(--line-duration) ease-out both;
  animation-delay: calc(var(--num-duration));
}

.intro-123.is-in .intro-123__item:nth-child(2)::after {
  animation: intro123-line var(--line-duration) ease-out both;
  animation-delay: calc(var(--num-gap) + var(--num-duration));
}

@keyframes intro123-circle {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes intro123-line {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Mobile-only horizontal badges row */
.intro-123__mobile-badges {
  display: none;
  position: relative;
  width: 100%;
  max-width: 528px;
  height: 52px;
  margin: 0 auto 32px;
}

/* Hide mobile badges on desktop */
@media (min-width: 821px) {
  .intro-123__mobile-badges {
    display: none !important;
  }
}

.intro-123__mobile-badge {
  position: absolute;
  top: 0;
  width: 53px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 26.085px;
  font-weight: 700;
  line-height: 34.78px;
  letter-spacing: -0.8695px;
  color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='52' viewBox='0 0 53 52' fill='none'%3E%3CforeignObject x='-34.5254' y='-35' width='121.803' height='121.424'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(17.5px);clip-path:url(%23bgblur_0_2625_618_clip_path);height:100%25;width:100%25'%3E%3C/div%3E%3C/foreignObject%3E%3Cg data-figma-bg-blur-radius='35'%3E%3Crect x='0.474609' width='51.803' height='51.4241' rx='25.712' fill='%23D4D4D4' fill-opacity='0.1'/%3E%3Crect x='1.97461' y='1.5' width='48.803' height='48.4241' rx='24.212' stroke='url(%23paint0_linear_2625_618)' stroke-opacity='0.5' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='bgblur_0_2625_618_clip_path' transform='translate(34.5254 35)'%3E%3Crect x='0.474609' width='51.803' height='51.4241' rx='25.712'/%3E%3C/clipPath%3E%3ClinearGradient id='paint0_linear_2625_618' x1='0.312725' y1='0.1607' x2='26.0241' y2='26.0615' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23BDBDBD' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Badge positioning: left edge, center, right edge within 528px container */
.intro-123__mobile-badge:nth-child(1) {
  left: 0;
}

.intro-123__mobile-badge:nth-child(2) {
  left: calc(50% - 26.5px);
}

.intro-123__mobile-badge:nth-child(3) {
  right: 0;
}

/* Mobile dotted lines connecting badges */
.intro-123__mobile-badge:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(100% + 4px);
  width: calc(min(100vw - 112px, 528px) / 2 - 91.5px);
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(67, 184, 201, 0.6) 0,
    rgba(67, 184, 201, 0.6) 8px,
    transparent 8px,
    transparent 16px
  );
}

@media (max-width: 820px) {
  .intro-123__mobile-badges {
    display: block;
  }

  .intro-123__list {
    grid-template-columns: 1fr;
    max-width: 336px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hide desktop badges and lines on mobile */
  .intro-123__item::before,
  .intro-123__item::after {
    display: none;
  }

  .intro-123__item {
    padding-top: 0;
  }

  .intro-123__card {
    width: 100%;
  }

  /* Disable animations on mobile - badges are static */
  .intro-123.is-in .intro-123__item::before,
  .intro-123.is-in .intro-123__item::after {
    animation: none;
  }

  /* Keep card animations on mobile */
  .intro-123.is-in .intro-123__card {
    animation: intro123-card .6s ease both;
    animation-delay: 0s;
  }
}

/* Additional mobile constraints for smaller viewports */
@media (max-width: 640px) {
  .intro-123__inner {
    max-width: 640px;
    padding: clamp(24px, 5vw, 32px) 56px;
  }

  .intro-123__mobile-badges {
    max-width: 528px;
  }

  .intro-123__list {
    max-width: 336px;
  }
}
.intro-123__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 16px;
  position: relative;
  border-radius: 15px;
  background: rgba(212, 212, 212, 0.1);
  backdrop-filter: blur(17.5px);
  text-align: left;
  color: #FFFFFF;
  text-decoration: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(14px);
}

.intro-123__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(135deg, rgba(189, 189, 189, 0.6) 0%, rgba(189, 189, 189, 0.05) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.intro-123__card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 70px; /* Customizer CSS - mobile default */
}

@media (min-width: 769px) {
  .intro-123__card-header {
    min-height: 90px; /* Customizer CSS - desktop */
  }
}

.intro-123__card-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #FFFFFF !important;
}

.intro-123__card-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intro-123__card-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #FFFFFF;
}

.intro-123__card-checklist li::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.324219' y='0.423828' width='16' height='16' rx='8' fill='url(%23paint0_linear_2_3)'/%3E%3Cpath d='M11.2939 5.3935C11.5867 5.1006 12.0616 5.1006 12.3545 5.3935C12.6438 5.6828 12.6474 6.14964 12.3652 6.4433L8.37295 11.4336C8.36719 11.4408 8.36103 11.4476 8.35451 11.4542C8.06162 11.7471 7.58675 11.7471 7.29385 11.4542L4.6474 8.80771C4.35451 8.51482 4.35451 8.03994 4.6474 7.74705C4.9403 7.45416 5.41517 7.45416 5.70806 7.74705L7.80158 9.84057L11.274 5.41593C11.2801 5.40806 11.2868 5.40057 11.2939 5.3935Z' fill='%23202020'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2_3' x1='8.32422' y1='0.423828' x2='8.32422' y2='16.4238' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23038DBF'/%3E%3Cstop offset='1' stop-color='%2373D0B9'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Animations - numbers/lines first, then all cards at once */
.intro-123.is-in .intro-123__card {
  animation: intro123-card .6s ease both;
  animation-delay: var(--cards-start);
}

@keyframes intro123-card {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-123__item::before,
  .intro-123__item::after,
  .intro-123__card {
    animation: none!important;
    opacity: 1;
    transform: none;
  }
}

/* Override any conflicting styles - must be last */
.intro-123__card-highlight {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  color: #31D3DB !important;
}

/* Customizer CSS - AI capabilities specific override */
#ai-capabilities-cards .intro-123__card-highlight {
  line-height: 20px !important;
}

.intro-123__card-subtitle {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #FFFFFF !important;
}