/* Capability gallery: scoped to the homepage to avoid legacy laurel-card styles. */
#ai-capabilities {
  padding: 6.25rem 0 7rem;
  background: radial-gradient(ellipse at 50% 0, #e8f4ff 0, transparent 55%), #f7f8fc;
}
#ai-capabilities .ai-section-heading { margin-bottom: 1.25rem; }
#ai-capabilities .ai-section-heading h2 {
  max-width: 62.5rem;
  margin: 1.125rem auto 0;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1.25;
  letter-spacing: -.045em;
}
#ai-capabilities .ai-capabilities__source {
  margin: 0 auto 3rem;
  max-width: 37.5rem;
  color: #777287;
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: 0;
}
#ai-capabilities .ai-badge-grid { gap: 1.375rem; perspective: none; }
#ai-capabilities .ai-capability-card {
  --cap-accent: #272fc7;
  --cap-tint: #eaf3ff;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5625rem;
  overflow: hidden;
  border: 1px solid #e2e7ed;
  border-radius: 1.375rem;
  background: #fff;
  box-shadow: none;
  transition: border-color .35s ease;
}
#ai-capabilities .ai-capability-card[data-capability="DATA"] { --cap-accent: #21847f; --cap-tint: #e4f3ef; }
#ai-capabilities .ai-capability-card[data-capability="RUN"] { --cap-accent: #4076cb; --cap-tint: #e9f0ff; }
#ai-capabilities .ai-capability-card::after {
  content: "";
  position: absolute;
  inset: auto 1.5625rem 0;
  height: 0.1875rem;
  background: var(--cap-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
#ai-capabilities .cap-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #817a99;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: .13em;
}
#ai-capabilities .cap-head > span:first-child { color: var(--cap-accent); font-size: 0.8125rem; letter-spacing: .04em; }
#ai-capabilities .cap-head > span:first-child::after { content: "/"; margin-left: 0.75rem; color: #c1cbd8; }
#ai-capabilities .cap-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 10.375rem;
  margin: 1.25rem 0 1.375rem;
  border: 1px solid #ecf0f4;
  border-radius: 0.875rem;
  overflow: hidden;
  color: var(--cap-accent);
  background-color: #f7f9fb;
  background-image: radial-gradient(#9ea1e633 .7px, transparent .7px);
  background-size: 0.75rem 0.75rem;
}
#ai-capabilities .ai-capability-card > h3 { margin: 0 0 0.75rem; color: #30334b; font-family: Claritycity, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 400; line-height: 1.4; letter-spacing: 0; }
#ai-capabilities .ai-capability-card > p { min-height: 0; margin: 0 0 1.5rem; color: #797384; font-size: 0.8125rem; line-height: 1.85; }
#ai-capabilities .cap-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; width: 100%; padding-top: 1.0625rem; margin-top: auto; border-top: 1px solid #ecf0f4; }
#ai-capabilities .cap-tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
#ai-capabilities .cap-tags > span { padding: 0.25rem 0.4375rem; color: #777083; background: #f4f6f8; border-radius: 0.3125rem; font-size: 0.625rem; font-weight: 500; }
#ai-capabilities .cap-link { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.375rem; height: 2.375rem; border: 1px solid #e2ebf5; border-radius: 50%; color: var(--cap-accent); text-decoration: none; transition: background .25s, color .25s, transform .25s; }
#ai-capabilities .cap-link > span:last-child { font-size: 1.25rem; transition: transform .25s; }
#ai-capabilities .cap-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#ai-capabilities .cap-link:focus-visible { outline: 0.1875rem solid var(--cap-accent); outline-offset: 0.25rem; }
#ai-capabilities .ai-capability-card:focus-within { border-color: var(--cap-accent); }
#ai-capabilities .ai-capability-card:focus-within::after { transform: scaleX(1); }
#ai-capabilities .ai-capability-card:focus-within .cap-link { background: var(--cap-accent); color: #fff; }
#ai-capabilities .cap-browser, #ai-capabilities .cap-table, #ai-capabilities .cap-runtime {
  position: relative;
  width: 80%;
  max-width: 16.5rem;
  border: 1px solid #dfe5ed;
  border-radius: 0.5625rem;
  background: #fff;
  box-shadow: none;
}
#ai-capabilities .cap-chrome { display: flex; align-items: center; gap: 0.25rem; padding: 0.5625rem 0.625rem; border-bottom: 1px solid #ecf0f4; }
#ai-capabilities .cap-chrome > i { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #cfdae8; }
#ai-capabilities .cap-chrome > span { margin-left: 0.5625rem; color: #a49cb6; font-size: 0.4375rem; }
#ai-capabilities .cap-record { display: flex; align-items: center; gap: 0.3125rem; padding: 0.625rem 0.75rem 0.375rem; font-size: 0.5rem; color: #9c6aac; }
#ai-capabilities .cap-record b { margin-left: auto; font-size: 0.5rem; font-weight: 500; color: #a299b3; }
#ai-capabilities .cap-record-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #e87992; }
#ai-capabilities .cap-step { display: flex; align-items: center; gap: 0.4375rem; margin: 0.25rem 0.625rem 0.5rem; padding: 0.375rem; background: #f2f8ff; border-radius: 0.25rem; font-size: 0.5rem; }
#ai-capabilities .cap-step i { font-style: normal; opacity: .55; }
#ai-capabilities .cap-step > span { margin-left: auto; }
#ai-capabilities .cap-cursor { position: absolute; right: 12%; bottom: 6%; color: #272fc7; font-size: 1.75rem; }
#ai-capabilities .cap-flow, #ai-capabilities .cap-hub { position: relative; width: 18.75rem; max-width: 100%; height: 9.375rem; }
#ai-capabilities .cap-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#ai-capabilities .cap-visual svg path { fill: none; stroke: currentColor; stroke-width: 1.5; }
#ai-capabilities .cap-track { opacity: .2; }
#ai-capabilities .cap-visual svg .cap-signal { stroke-dasharray: 6 12; opacity: .5; }
#ai-capabilities .cap-node { position: absolute; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: #fff; border: 1px solid #d7e4f3; border-radius: 0.625rem; font-size: 1rem; }
#ai-capabilities .cap-node small { position: absolute; top: 2.4375rem; color: #8d839f; font-size: 0.5rem; white-space: nowrap; }
#ai-capabilities .cap-node--start { left: calc(18% - 1.125rem); top: 3.5625rem; }
#ai-capabilities .cap-node--branch { left: calc(48% - 1.125rem); top: 3.5625rem; background: var(--cap-accent); border-color: var(--cap-accent); color: #fff; }
#ai-capabilities .cap-node--top { left: calc(82% - 1.125rem); top: 1.375rem; }
#ai-capabilities .cap-node--bottom { left: calc(82% - 1.125rem); top: 5.75rem; }
#ai-capabilities .cap-table { overflow: hidden; }
#ai-capabilities .cap-table__bar, #ai-capabilities .cap-runtime__title { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.75rem; font-size: 0.5625rem; }
#ai-capabilities .cap-table__bar b, #ai-capabilities .cap-runtime__title b { padding: 2px 0.3125rem; border-radius: 0.25rem; background: var(--cap-tint); font-size: 0.4375rem; font-weight: 500; }
#ai-capabilities .cap-table__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: center; gap: 0.875rem; min-height: 1.375rem; padding: 0 0.75rem; border-top: 1px solid #edf2f0; font-size: 0.4375rem; }
#ai-capabilities .cap-table__row--head { background: #f6faf8; color: #90a29c; }
#ai-capabilities .cap-table__row b { font-size: 0.4375rem; font-weight: 500; }
#ai-capabilities .cap-line { width: 85%; height: 0.25rem; border-radius: 0.1875rem; background: #dbeae6; }
#ai-capabilities .cap-scan { position: absolute; top: 2.25rem; bottom: 0; width: 30%; opacity: 0; background: linear-gradient(90deg, transparent, #76cdb52b); border-right: 1px solid #76cdb5; }
#ai-capabilities .cap-hub__core, #ai-capabilities .cap-hub__app { position: absolute; display: grid; place-items: center; border: 1px solid #dee9f6; background: #fff; border-radius: 0.625rem; }
#ai-capabilities .cap-hub__core { top: 3.125rem; left: calc(50% - 1.5625rem); width: 3.125rem; height: 3.125rem; background: var(--cap-accent); color: #fff; font-size: 1.875rem; }
#ai-capabilities .cap-hub__app { width: 3rem; height: 2rem; font-size: 0.625rem; }
#ai-capabilities .cap-hub__app--a { left: calc(22% - 1.5rem); top: 1.5rem; }
#ai-capabilities .cap-hub__app--b { left: calc(78% - 1.5rem); top: 1.5rem; }
#ai-capabilities .cap-hub__app--c { left: calc(22% - 1.5rem); top: 5.875rem; }
#ai-capabilities .cap-hub__app--d { left: calc(78% - 1.5rem); top: 5.875rem; }
#ai-capabilities .cap-runtime { padding-bottom: 0.5rem; }
#ai-capabilities .cap-job { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.75rem; }
#ai-capabilities .cap-job > i { font-size: 0.4375rem; font-style: normal; opacity: .6; }
#ai-capabilities .cap-job > span { flex: 1; height: 0.3125rem; background: #edf1fa; border-radius: 0.1875rem; overflow: hidden; }
#ai-capabilities .cap-job b { display: block; height: 100%; background: #96b2e6; transform: scaleX(.72); transform-origin: left; border-radius: inherit; }
#ai-capabilities .cap-job:nth-child(3) b { transform: scaleX(.48); }
#ai-capabilities .cap-job:nth-child(4) b { transform: scaleX(.86); }
#ai-capabilities .cap-job small { font-size: 0.4375rem; }
#ai-capabilities .cap-ai { display: flex; align-items: center; justify-content: center; gap: 0.5625rem; width: 92%; }
#ai-capabilities .cap-ai__input, #ai-capabilities .cap-ai__output { width: 4.75rem; padding: 0.75rem 0.5625rem; border: 1px solid #dee9f6; border-radius: 0.5rem; background: #fff; }
#ai-capabilities .cap-ai__input span, #ai-capabilities .cap-ai__output span { display: block; margin-bottom: 0.75rem; font-size: 0.5rem; color: #988aaa; white-space: nowrap; }
#ai-capabilities .cap-ai__input i { display: block; height: 0.25rem; margin: 0.5625rem 0; border-radius: 0.1875rem; background: #dde7f3; }
#ai-capabilities .cap-ai__input i:nth-child(3) { width: 70%; }
#ai-capabilities .cap-ai__output b { display: block; margin: 0.375rem 0; color: #7074c0; font-size: 0.5rem; font-weight: 500; }
#ai-capabilities .cap-ai__core { flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: #272fc7; color: #fff; font-size: 1.6875rem; box-shadow: 0 0 0 0.3125rem #5057dc0b; }
#ai-capabilities .cap-ai__arrow { font-size: 0.75rem; opacity: .4; }
#ai-capabilities .is-pending { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  #ai-capabilities .ai-capability-card:hover { border-color: var(--cap-accent); }
  #ai-capabilities .ai-capability-card:hover::after { transform: scaleX(1); }
  #ai-capabilities .ai-capability-card:hover .cap-link { color: #fff; background: var(--cap-accent); }
  #ai-capabilities .cap-link:hover > span:last-child { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #ai-capabilities .ai-capability-card:focus-within { --cap-dash: cap-dash; --cap-click: cap-click; --cap-scan: cap-scan; --cap-progress: cap-progress; --cap-pulse: cap-pulse; --cap-result: cap-result; }
  #ai-capabilities .cap-signal { animation: var(--cap-dash, none) 2s linear infinite; }
  #ai-capabilities .cap-cursor { animation: var(--cap-click, none) 2.2s ease-in-out infinite; }
  #ai-capabilities .cap-record-dot, #ai-capabilities .cap-hub__core, #ai-capabilities .cap-ai__core { animation: var(--cap-pulse, none) 2s ease-in-out infinite; }
  #ai-capabilities .cap-scan { animation: var(--cap-scan, none) 2.4s ease-in-out infinite; }
  #ai-capabilities .cap-job b { animation: var(--cap-progress, none) 2.5s ease-in-out infinite alternate; }
  #ai-capabilities .cap-job:nth-child(3) b { animation-delay: -.8s; }
  #ai-capabilities .cap-job:nth-child(4) b { animation-delay: -1.5s; }
  #ai-capabilities .cap-ai__output b { animation: var(--cap-result, none) 2.4s ease infinite; }
  #ai-capabilities .cap-ai__output b:nth-child(3) { animation-delay: .18s; }
  #ai-capabilities .cap-ai__output b:nth-child(4) { animation-delay: .36s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #ai-capabilities .ai-capability-card:hover { --cap-dash: cap-dash; --cap-click: cap-click; --cap-scan: cap-scan; --cap-progress: cap-progress; --cap-pulse: cap-pulse; --cap-result: cap-result; }
}
@keyframes cap-dash { to { stroke-dashoffset: -72; } }
@keyframes cap-click { 0%, 100% { transform: translate(0, 0); } 45%, 65% { transform: translate(-1.75rem, -0.5625rem); } 55% { transform: translate(-1.75rem, -0.5625rem) scale(.85); } }
@keyframes cap-scan { 0% { transform: translateX(-100%); opacity: 0; } 15%, 75% { opacity: 1; } 100% { transform: translateX(340%); opacity: 0; } }
@keyframes cap-progress { from { transform: scaleX(.2); } to { transform: scaleX(.95); } }
@keyframes cap-pulse { 50% { box-shadow: 0 0 0 0.4375rem #5057dc10; transform: scale(1.06); } }
@keyframes cap-result { 0%, 100% { opacity: 1; transform: translateY(0); } 35% { opacity: .3; transform: translateY(0.1875rem); } 65% { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) and (min-width: 768px) { #ai-capabilities .ai-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  #ai-capabilities { padding: 4rem 0; }
  #ai-capabilities .ai-section-heading h2 { font-size: 2rem; }
  #ai-capabilities .ai-capabilities__source { margin-bottom: 1.75rem; font-size: 0.8125rem; }
  #ai-capabilities .ai-badge-grid { grid-template-columns: 1fr; gap: 1rem; }
  #ai-capabilities .ai-capability-card { padding: 1.375rem; border-radius: 1.125rem; }
  #ai-capabilities .cap-visual { height: 9.75rem; margin-block: 1.0625rem 1.25rem; }
  #ai-capabilities .ai-capability-card > h3 { font-size: 1.375rem; }
  #ai-capabilities .cap-link { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #ai-capabilities *, #ai-capabilities *::after { animation: none !important; transition: none !important; }
  #ai-capabilities .ai-capability-card:hover { transform: none; }
  #ai-capabilities .is-pending { opacity: 1; }
}

@media (min-width: 768px) {
  #ai-capabilities .cap-visual { height: 11.875rem; }
}