.capabilities-section {
  --art-ink: #252a2b;
  --art-blue: #6285b8;
  --art-paper: #f5f5f2;
  --art-line: #d5d8d4;
  --art-ease: cubic-bezier(.45, 0, .2, 1);
  padding-top: 7vw;
  padding-bottom: 6vw;
  background: #fff;
}
.capabilities-section .section-heading { margin-bottom: 3vw; }
.capabilities-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 1.5vw; padding-top: 1.5vw; border-top: 1px solid #e4e5e8; }
.capabilities-index { display: flex; align-items: center; gap: 10px; color: #70737b; font-size: clamp(12px, .8vw, 18px); }
.capabilities-index > span { color: var(--art-blue); font-size: 23px; }
.capabilities-actions { display: flex; align-items: center; }
.capabilities-motion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: #60646d; font-size: clamp(12px, .8vw, 18px); }
.capabilities-motion:hover:not(:disabled) { color: #111; }
.capabilities-motion:disabled { cursor: default; }
.capabilities-motion svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.capabilities-motion .play-symbol { display: none; }
.capabilities-section[data-user-paused='true'] .pause-symbol { display: none; }
.capabilities-section[data-user-paused='true'] .play-symbol { display: block; }
.capabilities-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.8vw 1.2vw; }
.capability-card { min-width: 0; }
.capability-card h3 { margin: 1.6vw 0 .9vw; font-size: clamp(21px, 1.35vw, 34px); line-height: 1.2; }
.capability-card > p { max-width: 94%; }
.capability-link { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-right: 5px; }
.capability-link > span { flex-shrink: 0; color: #9299a6; font-size: .9em; transition: transform 250ms ease, color 250ms ease; }
.capability-link:hover > span, .capability-link:focus-visible > span { color: var(--art-blue); transform: translate(2px, -2px); }

/* One sculptural gesture per capability; the copy carries the product detail. */
.capability-visual { position: relative; aspect-ratio: 1.35; overflow: hidden; border-radius: 5px; background: var(--art-paper); }
.capability-number { position: absolute; top: 7%; left: 7%; color: #858b87; font: 400 clamp(10px, .65vw, 16px)/1 'Space Mono', monospace; letter-spacing: -.03em; }
.capability-art { position: absolute; inset: 8% 6% 12%; width: 88%; height: 80%; overflow: visible; transition: transform 800ms var(--art-ease); }
.capability-visual figcaption { position: absolute; inset: auto 7% 7%; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #626964; font-size: clamp(10px, .7vw, 16px); line-height: 1.3; }
.capability-visual figcaption > span { color: #8b928d; font-size: .8em; }
.art-solid { fill: var(--art-ink); }
.art-paper { fill: var(--art-paper); }
.art-accent { fill: var(--art-blue); }
.art-guide { fill: none; stroke: var(--art-line); stroke-width: 1; }

.intelligence-rotor { transform-origin: 200px 150px; animation: intelligence-turn 18s var(--art-ease) infinite; }
.intelligence-core { transform-origin: 200px 150px; animation: intelligence-breathe 6s ease-in-out infinite; }
.signal-bars rect { transform-box: fill-box; transform-origin: center; animation: signal-wave 5s ease-in-out infinite; }
.signal-bars rect:nth-child(2), .signal-bars rect:nth-child(10) { animation-delay: -.4s; }
.signal-bars rect:nth-child(3), .signal-bars rect:nth-child(9) { animation-delay: -.8s; }
.signal-bars rect:nth-child(4), .signal-bars rect:nth-child(8) { animation-delay: -1.2s; }
.signal-bars rect:nth-child(5), .signal-bars rect:nth-child(7) { animation-delay: -1.6s; }
.signal-bars rect:nth-child(6) { animation-delay: -2s; }
.loop-bed { fill: none; stroke: #e7e9e4; stroke-width: 22; }
.process-loop { fill: none; stroke: var(--art-ink); stroke-width: 22; stroke-linecap: round; stroke-dasharray: 28 72; animation: process-flow 10s linear infinite; }
.process-loop-accent { stroke: var(--art-blue); stroke-width: 4; stroke-dasharray: 5 95; stroke-dashoffset: -53; animation-name: process-flow-accent; }
.process-arrow { fill: none; stroke: #919892; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.guard-layer { fill: none; stroke: var(--art-ink); stroke-width: 1.2; transform-origin: 200px 150px; animation: guard-settle 7s var(--art-ease) infinite; }
.guard-layer:nth-child(1) { stroke: #b8bfba; }
.guard-layer:nth-child(2) { stroke: #89968d; animation-delay: -.35s; }
.guard-layer:nth-child(3) { animation-delay: -.7s; }
.guard-check { fill: none; stroke: #cadbf1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.connection-ring { fill: none; stroke: var(--art-ink); stroke-width: 1.3; }
.connection-left { animation: connection-meet-left 8s var(--art-ease) infinite; }
.connection-right { animation: connection-meet-right 8s var(--art-ease) infinite; }
.connection-line { stroke: var(--art-blue); stroke-width: 1; opacity: .5; }
.connection-pulse { animation: connection-travel 8s var(--art-ease) infinite; }
.value-edge { fill: var(--art-ink); stroke: var(--art-ink); stroke-width: 1.2; }
.value-face { fill: var(--art-paper); stroke: var(--art-ink); stroke-width: 1.2; }
.value-inset { fill: none; stroke: #bec5bd; stroke-width: 1; }
.value-top { animation: value-rise 7s var(--art-ease) infinite; }
.value-middle { animation: value-balance 7s var(--art-ease) infinite; }
.value-bottom { animation: value-ground 7s var(--art-ease) infinite; }

@keyframes intelligence-turn { 0%, 12% { transform: rotate(0); } 40%, 55% { transform: rotate(120deg); } 85%, 100% { transform: rotate(240deg); } }
@keyframes intelligence-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); } }
@keyframes signal-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes process-flow { to { stroke-dashoffset: -100; } }
@keyframes process-flow-accent { to { stroke-dashoffset: -153; } }
@keyframes guard-settle { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82) rotate(8deg); } }
@keyframes connection-meet-left { 0%, 100% { transform: translateX(-12px); } 50% { transform: translateX(12px); } }
@keyframes connection-meet-right { 0%, 100% { transform: translateX(12px); } 50% { transform: translateX(-12px); } }
@keyframes connection-travel { 0%, 100% { transform: translateX(-35px); } 50% { transform: translateX(35px); } }
@keyframes value-rise { 0%, 100% { transform: translateY(12px); } 50% { transform: translateY(-12px); } }
@keyframes value-balance { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
@keyframes value-ground { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }

/* Existing observer and pause control govern every animated SVG element. */
.capabilities-section .motion-element { animation-play-state: paused; }
.capabilities-section[data-motion-paused='false'] .capability-card.is-visible .motion-element { animation-play-state: running; }
.capabilities-section .section-closing { padding-top: 4vw; margin-top: 4vw; border-top: 1px solid #ddd; color: #151515; font-size: clamp(24px, 2.1vw, 52px); line-height: 1.2; letter-spacing: -.025em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .capability-card:hover .capability-art { transform: scale(1.04); }
}
@media (max-width: 1100px) {
  .capabilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 18px; }
  .capability-card h3 { margin: 22px 0 14px; font-size: 23px; }
  .capability-card > p { max-width: none; }
  .capabilities-toolbar { margin-bottom: 24px; padding-top: 24px; }
  .capability-visual figcaption { font-size: 11px; }
}
@media (max-width: 760px) {
  .capabilities-section { padding-top: 64px; padding-bottom: 64px; }
  .capabilities-section .section-heading { margin-bottom: 28px; }
  .capabilities-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .capabilities-actions { width: 100%; }
  .capabilities-index, .capabilities-motion { font-size: 12px; }
  .capabilities-section .section-closing { margin-top: 40px; padding-top: 32px; font-size: 26px; }
}
@media (max-width: 700px) {
  .capabilities-grid { grid-template-columns: 1fr; gap: 38px; }
  .capability-card h3 { font-size: 24px; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .capabilities-section .motion-element { animation: none !important; }
  .capabilities-section *, .capabilities-section *::before, .capabilities-section *::after { transition: none !important; }
  .capability-link:hover > span, .capability-link:focus-visible > span { transform: none; }
}