/*
 * Pull People — 06 / FRONTEND V2
 * Capabilities · B8.1 Command Deck
 *
 * Visual-only ownership layer for the Home capability console.
 * Existing PHP structure and main.js interaction remain untouched.
 */

.section-capabilities {
  --cap-v2-ice: #eaf8ff;
  --cap-v2-blue: #58b6ff;
  --cap-v2-blue-2: #2f83ff;
  --cap-v2-deep: #020914;
  --cap-v2-line: rgba(151, 211, 255, .22);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(2.25rem, 3.2vw, 3.75rem) 0 clamp(5rem, 7vw, 7.5rem);
  background:
    radial-gradient(ellipse 66rem 28rem at 72% 32%,
      rgba(48, 131, 255, .10),
      transparent 70%),
    radial-gradient(ellipse 44rem 18rem at 20% 60%,
      rgba(65, 168, 255, .055),
      transparent 72%),
    linear-gradient(180deg,
      #061626 0%,
      #04111f 18%,
      #020914 72%,
      #020711 100%);
}

.section-capabilities::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  background:
    linear-gradient(90deg, rgba(93, 174, 255, .024) 1px, transparent 1px),
    linear-gradient(rgba(93, 174, 255, .018) 1px, transparent 1px);
  background-size: 5rem 5rem;
  -webkit-mask-image: radial-gradient(ellipse at 67% 42%, #000 0 22%, rgba(0,0,0,.58) 47%, transparent 75%);
  mask-image: radial-gradient(ellipse at 67% 42%, #000 0 22%, rgba(0,0,0,.58) 47%, transparent 75%);
  opacity: .72;
}

.section-capabilities::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(5rem, 8vw, 8rem);
  right: -10rem;
  width: min(56rem, 66vw);
  aspect-ratio: 1;
  border: 1px solid rgba(112, 191, 255, .045);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 4rem rgba(68, 147, 235, .014),
    0 0 0 10rem rgba(68, 147, 235, .009);
  opacity: .9;
}

.section-capabilities .capabilities-shell {
  width: min(92rem, calc(100% - 3rem));
}

.section-capabilities .capability-console {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.section-capabilities .capability-console::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: clamp(1rem, 2vw, 2rem) 0 auto 38%;
  height: clamp(28rem, 40vw, 39rem);
  border: 1px solid rgba(142, 207, 255, .09);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(61, 151, 255, .075), transparent 46%),
    transparent;
  opacity: .8;
  pointer-events: none;
}

.section-capabilities .capability-console__stage {
  position: relative;
  z-index: 2;
  padding: 0;
}

.section-capabilities .capability-console__counter {
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 20;
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0 .8rem;
  border: 1px solid rgba(145, 210, 255, .13);
  border-radius: 999px;
  color: rgba(158, 216, 255, .9);
  background: rgba(4, 16, 31, .52);
  font-size: .66rem;
  letter-spacing: .14em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 1.2rem rgba(53, 145, 255, .06);
}

.section-capabilities .capability-console__panes {
  margin-top: 0;
}

.section-capabilities .capability-pane {
  min-width: 0;
}

.section-capabilities .capability-scene {
  --scene-copy-width: 39%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  min-height: clamp(37rem, 48vw, 46rem);
  padding: clamp(4.5rem, 6vw, 6.4rem) clamp(.25rem, .7vw, .75rem) clamp(3rem, 4vw, 4rem);
  overflow: visible;
  background: transparent;
}

.section-capabilities .capability-scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 9% -3% 8% 34%;
  border: 1px solid rgba(184, 226, 255, .14);
  border-radius: clamp(2rem, 3.5vw, 3.4rem);
  background:
    radial-gradient(circle at 24% 10%, rgba(238, 250, 255, .10), transparent 15%),
    radial-gradient(circle at 76% 36%, rgba(75, 166, 255, .12), transparent 34%),
    linear-gradient(145deg,
      rgba(27, 72, 119, .44),
      rgba(4, 16, 32, .82) 54%,
      rgba(13, 44, 78, .48));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(82, 171, 255, .10),
    0 1.8rem 5rem rgba(0,0,0,.24),
    0 0 3rem rgba(45, 139, 238, .06);
  opacity: 1;
}

.section-capabilities .capability-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 11.5% -1% 5.5% 37%;
  border: 1px solid rgba(128, 201, 255, .08);
  border-radius: clamp(1.6rem, 3vw, 2.8rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 9%),
    linear-gradient(145deg, rgba(7, 24, 44, .46), rgba(2, 9, 19, .12));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 0 1px rgba(72, 163, 248, .02);
  opacity: .9;
}

.section-capabilities .capability-scene__copy {
  position: relative;
  z-index: 9;
  grid-column: 1;
  display: grid;
  align-content: center;
  gap: 1rem;
  min-width: 0;
  max-width: 34rem;
  padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(1.25rem, 2vw, 2rem) clamp(.2rem, 1vw, .9rem);
}

.section-capabilities .capability-scene__copy::before {
  content: "";
  position: absolute;
  top: -.6rem;
  left: clamp(.2rem, 1vw, .9rem);
  width: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(128, 205, 255, .9), transparent);
  box-shadow: 0 0 .7rem rgba(83, 171, 255, .23);
}

.section-capabilities .capability-scene__title {
  max-width: 11.5ch !important;
  margin: 0;
  color: #f7fbff;
  font-size: clamp(2.8rem, 4vw, 5.15rem) !important;
  font-weight: 790;
  line-height: .94;
  letter-spacing: -.058em;
  text-wrap: balance;
  text-shadow: 0 1rem 3rem rgba(0, 6, 16, .42);
}

.section-capabilities .capability-scene__text {
  max-width: 31rem;
  margin: 0;
  color: rgba(211, 226, 242, .78);
  font-size: clamp(1rem, 1vw, 1.08rem);
  line-height: 1.72;
}

.section-capabilities .capability-scene__title-rail {
  width: min(78%, 16rem);
  height: 1px;
  margin-top: .5rem;
  background: linear-gradient(90deg,
    rgba(119, 198, 255, .92),
    rgba(67, 148, 242, .35) 55%,
    transparent);
  box-shadow: 0 0 .75rem rgba(65, 157, 255, .10);
}

.section-capabilities .capability-scene__circuit {
  inset: 5% -1% 4% 33%;
  z-index: 3;
  width: 68%;
  height: 91%;
  opacity: .68;
  filter: none;
}

.section-capabilities .capability-scene__circuit-path {
  stroke: rgba(78, 143, 202, .12);
}

.section-capabilities .capability-scene__circuit-path--trunk {
  stroke: rgba(119, 192, 248, .22);
}

.section-capabilities .capability-scene__circuit-path--signal {
  stroke: rgba(151, 220, 255, .64);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 3px rgba(85, 176, 255, .16));
}

.section-capabilities .capability-scene__glass-anchor {
  z-index: 8;
  box-shadow:
    0 0 0 1px rgba(198, 235, 255, .11),
    0 0 1.3rem rgba(77, 166, 255, .12);
}

.section-capabilities .capability-scene .capability-diagram {
  position: relative;
  z-index: 6;
  grid-column: 2;
  align-self: center;
  width: 112% !important;
  max-width: none;
  height: auto !important;
  margin-left: -8%;
  overflow: visible;
  aspect-ratio: 640 / 420;
  transform-origin: 54% 52%;
  filter:
    drop-shadow(0 2rem 3.2rem rgba(0,0,0,.30))
    drop-shadow(0 0 1.6rem rgba(65, 154, 255, .07));
}

.section-capabilities .capability-diagram__surface,
.section-capabilities .capability-diagram__format,
.section-capabilities .capability-diagram__endpoint,
.section-capabilities .capability-diagram__logic {
  fill: rgba(17, 54, 92, .28);
  stroke: rgba(143, 205, 255, .34);
}

.section-capabilities .capability-diagram__surface--primary,
.section-capabilities .capability-diagram__surface--accent,
.section-capabilities .capability-diagram__format--accent,
.section-capabilities .capability-diagram__endpoint--accent,
.section-capabilities .capability-diagram__endpoint--output {
  fill: rgba(40, 115, 194, .27);
  stroke: rgba(159, 221, 255, .60);
  filter: drop-shadow(0 0 7px rgba(75, 168, 255, .12));
}

.section-capabilities .capability-diagram__node--active,
.section-capabilities .capability-diagram__status--active {
  fill: rgba(87, 176, 255, .44);
  stroke: rgba(193, 235, 255, .92);
  filter: drop-shadow(0 0 7px rgba(87, 181, 255, .26));
}

/* Satellite-style capability switcher */
.section-capabilities .capability-index {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin: clamp(-1.1rem, -1vw, -.6rem) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: min(100%, 72rem);
}

.section-capabilities .capability-index__item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-height: 4rem;
  padding: .75rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(171, 220, 255, .18);
  border-radius: 999px;
  color: rgba(160, 181, 206, .84);
  background:
    radial-gradient(circle at 84% 48%, rgba(110, 192, 255, .055), transparent 18%),
    linear-gradient(180deg, rgba(18, 52, 91, .68), rgba(5, 18, 35, .90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(86, 170, 245, .06),
    0 .8rem 1.8rem rgba(0,0,0,.10);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(.22,.82,.18,1);
}

.section-capabilities .capability-index__item::before {
  content: "";
  position: absolute;
  inset: .25rem;
  border: 1px solid rgba(212, 240, 255, .06);
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 24% 74%, rgba(117,195,255,.04));
  opacity: .72;
  pointer-events: none;
}

.section-capabilities .capability-index__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .8rem;
  bottom: auto;
  left: auto;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(115, 184, 245, .34);
  box-shadow: 0 0 0 .25rem rgba(75, 153, 233, .045);
  opacity: .72;
  transform: translateY(-50%);
  transition: background 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.section-capabilities .capability-index__number,
.section-capabilities .capability-index__label {
  position: relative;
  z-index: 1;
}

.section-capabilities .capability-index__number {
  color: rgba(103, 167, 230, .86);
  font-size: .65rem;
}

.section-capabilities .capability-index__label {
  padding-right: .8rem;
  color: inherit;
  font-size: clamp(.66rem, .72vw, .76rem);
  letter-spacing: .045em;
}

.section-capabilities .capability-index__item.is-active,
.section-capabilities .capability-index__item[aria-current="true"] {
  color: #f0f8ff;
  border-color: rgba(207, 237, 255, .48);
  background:
    radial-gradient(circle at 84% 48%, rgba(137, 211, 255, .10), transparent 19%),
    linear-gradient(180deg, rgba(31, 88, 151, .78), rgba(6, 25, 48, .94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(104, 190, 255, .10),
    0 0 0 1px rgba(97, 181, 255, .06),
    0 1rem 2.2rem rgba(0,0,0,.14),
    0 0 1.5rem rgba(69, 158, 255, .10);
}

.section-capabilities .capability-index__item.is-active::after,
.section-capabilities .capability-index__item[aria-current="true"]::after {
  background: #cfefff;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(222, 246, 255, .16),
    0 0 .7rem rgba(137, 214, 255, .42);
}

@media (hover: hover) and (pointer: fine) {
  .section-capabilities .capability-index__item:hover {
    color: #dbeafa;
    border-color: rgba(191, 229, 255, .32);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 1rem 2.2rem rgba(0,0,0,.13),
      0 0 1.25rem rgba(65, 157, 255, .07);
  }
}

.section-capabilities .capability-index__item:focus-visible {
  outline: 2px solid rgba(151, 215, 255, .96);
  outline-offset: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(114, 197, 255, .14),
    0 0 1.5rem rgba(72, 170, 255, .12);
}

/* CTA becomes a compact system control rather than a generic button */
.section-capabilities .capability-console__footer {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: center;
  margin: clamp(2rem, 3vw, 3rem) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}


.section-capabilities .capabilities__cta {
  position: relative;
  min-height: 3.75rem;
  padding: 0 1.8rem;
  overflow: hidden;
  border: 1px solid rgba(210, 239, 255, .28);
  border-radius: 999px;
  color: #f7fbff;
  background:
    radial-gradient(circle at 86% 48%, rgba(124, 204, 255, .10), transparent 18%),
    linear-gradient(180deg, rgba(28, 77, 132, .88), rgba(7, 25, 47, .96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(92, 179, 255, .09),
    0 .8rem 2rem rgba(0,0,0,.16),
    0 0 1.5rem rgba(69, 159, 255, .09);
}

.section-capabilities .capabilities__cta::before {
  content: "";
  position: absolute;
  inset: .25rem;
  border: 1px solid rgba(221, 244, 255, .08);
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 28% 74%, rgba(122,203,255,.04));
  pointer-events: none;
}

.section-capabilities .capabilities__cta:focus-visible {
  outline: 2px solid #78c8ff;
  outline-offset: 4px;
}

/* Tablet */
@media (max-width: 64rem) {
  .section-capabilities {
    padding-top: 3.25rem;
  }

  .section-capabilities .capabilities-shell {
    width: min(100% - 2rem, 74rem);
  }

  .section-capabilities .capability-scene {
    grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
    gap: 2rem;
    min-height: 35rem;
    padding-top: 4.6rem;
  }

  .section-capabilities .capability-scene::before {
    inset: 11% -2% 9% 34%;
  }

  .section-capabilities .capability-scene::after {
    inset: 14% 0 7% 37%;
  }

  .section-capabilities .capability-scene__title {
    font-size: clamp(2.45rem, 5vw, 4.1rem) !important;
  }

  .section-capabilities .capability-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 46rem);
  }
}

/* Mobile: same story, shorter scene, no horizontal squeeze */
@media (max-width: 48rem) {
  .section-capabilities {
    padding: 2.5rem 0 5rem;
    background:
      radial-gradient(ellipse 28rem 18rem at 58% 34%, rgba(48, 131, 255, .09), transparent 72%),
      linear-gradient(180deg, #061626 0%, #04111f 22%, #020914 74%, #020711 100%);
  }

  .section-capabilities::after {
    top: 8rem;
    right: -15rem;
    width: 32rem;
  }

  .section-capabilities .capabilities-shell {
    width: min(100% - 1.25rem, 34rem);
  }

  .section-capabilities .capability-console::before {
    inset: 8rem -11rem auto 8%;
    height: 26rem;
  }

  .section-capabilities .capability-console__counter {
    position: relative;
    top: auto;
    left: auto;
    width: fit-content;
    margin: 0 0 .8rem .2rem;
  }

  .section-capabilities .capability-scene {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(18rem, auto);
    gap: 1rem;
    min-height: 0;
    padding: 0;
  }

  .section-capabilities .capability-scene::before {
    inset: 34% -2% 3%;
    border-radius: 1.7rem;
  }

  .section-capabilities .capability-scene::after {
    inset: 37% 1.5% 5.5%;
    border-radius: 1.45rem;
  }

  .section-capabilities .capability-scene__copy {
    grid-column: 1;
    gap: .8rem;
    max-width: none;
    padding: 0 .35rem .6rem;
  }

  .section-capabilities .capability-scene__copy::before {
    left: .35rem;
  }

  .section-capabilities .capability-scene__title {
    max-width: 9.5ch !important;
    font-size: clamp(2.35rem, 11vw, 3.6rem) !important;
  }

  .section-capabilities .capability-scene__text {
    max-width: 29rem;
    font-size: .92rem;
    line-height: 1.6;
  }

  .section-capabilities .capability-scene__circuit {
    inset: 35% -5% 0 0;
    width: 108%;
    height: 61%;
    opacity: .46;
  }

  .section-capabilities .capability-scene .capability-diagram {
    grid-column: 1;
    width: 116% !important;
    margin: -.4rem 0 0 -8%;
    aspect-ratio: 640 / 430;
    filter:
      drop-shadow(0 1.2rem 2rem rgba(0,0,0,.24))
      drop-shadow(0 0 1rem rgba(65, 154, 255, .05));
  }

  .section-capabilities .capability-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    width: 100%;
    margin-top: 1.2rem;
  }

  .section-capabilities .capability-index__item {
    min-height: 3.45rem;
    padding: .62rem .8rem;
  }

  .section-capabilities .capability-index__label {
    font-size: .64rem;
  }

  .section-capabilities .capability-console__footer {
    margin-top: 1.65rem;
  }

  .section-capabilities .capability-console__footer::before {
    width: 88%;
  }

  .section-capabilities .capabilities__cta {
    width: min(100%, 24rem);
  }
}

@media (max-width: 25rem) {
  .section-capabilities .capabilities-shell {
    width: min(100% - .9rem, 31rem);
  }

  .section-capabilities .capability-scene__title {
    font-size: clamp(2rem, 10.7vw, 3rem) !important;
  }

  .section-capabilities .capability-index {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-index__item,
  .section-capabilities .capabilities__cta {
    transition: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   B8.2 — WEB PILOT: cinematic entrance/exit + CTA Neon Zone
   ========================================================================== */

.section-capabilities .capability-visual--web .capability-scene__visual-entrance {
  position: relative;
  z-index: 7;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 112%;
  max-width: none;
  margin-left: -8%;
  aspect-ratio: 640 / 420;
  perspective: 76rem;
  transform-origin: 54% 50%;
  opacity: 1;
}

.section-capabilities .capability-visual--web .capability-scene__visual-entrance .capability-diagram {
  grid-column: auto;
  grid-row: auto;
  grid-area: 1 / 1;
  width: 100% !important;
  max-width: none;
  height: auto !important;
  margin: 0 !important;
  transform-origin: 54% 52%;
}

.section-capabilities .capability-visual--web .capability-scene__visual-entrance::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% 6% 13% 10%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 58% 50%,
      rgba(94, 183, 255, .15) 0%,
      rgba(53, 143, 241, .065) 37%,
      rgba(19, 65, 117, .02) 58%,
      transparent 74%);
  opacity: .68;
  transform: translateZ(-1px) scale(.95);
}

.section-capabilities.has-web-pilot-motion
.capability-visual--web .capability-scene__copy,
.section-capabilities.has-web-pilot-motion
.capability-visual--web .capability-scene__visual-entrance {
  transition:
    transform 860ms cubic-bezier(.16, .82, .18, 1),
    opacity 560ms ease,
    filter 720ms ease;
  backface-visibility: hidden;
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="before"]
.capability-visual--web .capability-scene__copy {
  opacity: .72;
  transform: translate3d(-1.15rem, 0, 0);
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="before"]
.capability-visual--web .capability-scene__visual-entrance {
  opacity: 0;
  transform:
    translate3d(52vw, 1.1rem, 0)
    rotateY(-5deg)
    scale(.965);
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="active"]
.capability-visual--web .capability-scene__copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="active"]
.capability-visual--web .capability-scene__visual-entrance {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    rotateY(0deg)
    scale(1);
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="after"]
.capability-visual--web .capability-scene__copy {
  opacity: 0;
  transform: translate3d(-38vw, -.7rem, 0);
  transition-duration: 690ms, 430ms, 520ms;
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="after"]
.capability-visual--web .capability-scene__visual-entrance {
  opacity: 0;
  transform:
    translate3d(46vw, -1.1rem, 0)
    rotateY(-3.5deg)
    scale(.982);
  transition-duration: 760ms, 460ms, 620ms;
}

/* CTA NEON ZONE */
.section-capabilities .capability-console__footer {
  isolation: isolate;
}

.section-capabilities .capability-console__footer::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: min(116rem, 138vw);
  height: clamp(19rem, 34vw, 31rem);
  transform: translate(-50%, -50%) scale(.88);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 54%,
      rgba(90, 186, 255, .34) 0%,
      rgba(49, 142, 245, .20) 24%,
      rgba(28, 103, 196, .10) 44%,
      rgba(10, 45, 92, .03) 59%,
      rgba(6, 29, 58, 0) 78%);
  opacity: 0;
  filter: saturate(1.14) blur(.15rem);
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(.16,.82,.18,1),
    filter 360ms ease;
}

.section-capabilities .capability-index {
  transition:
    filter 320ms ease,
    box-shadow 320ms ease;
}

.section-capabilities .capability-console__footer:has(.capabilities__cta:hover)::after,
.section-capabilities .capability-console__footer:focus-within::after {
  opacity: 1;
  filter: saturate(1.24) blur(0);
  transform: translate(-50%, -50%) scale(1.18);
}

.section-capabilities .capability-console:has(.capabilities__cta:hover) .capability-index,
.section-capabilities .capability-console:has(.capabilities__cta:focus-visible) .capability-index {
  filter: brightness(1.08);
  box-shadow:
    0 3.8rem 7rem -3rem rgba(69, 161, 255, .42),
    0 0 3rem rgba(65, 156, 255, .12);
}

.section-capabilities .capabilities__cta {
  transition:
    transform 220ms cubic-bezier(.2,.78,.2,1),
    border-color 220ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .section-capabilities .capabilities__cta:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 246, 255, .52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(105, 194, 255, .18),
      0 1.4rem 2.8rem rgba(0,0,0,.18),
      0 0 2.8rem rgba(72, 174, 255, .34),
      0 0 6.6rem rgba(55, 148, 255, .24),
      0 0 11rem rgba(47, 136, 255, .16);
  }
}

.section-capabilities .capabilities__cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(229, 246, 255, .58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 2px rgba(120, 200, 255, .92),
    0 0 0 8px rgba(71, 161, 255, .18),
    0 0 2.8rem rgba(72, 174, 255, .34),
    0 0 7rem rgba(55, 148, 255, .24),
    0 0 11rem rgba(47, 136, 255, .16);
}

@media (max-width: 64rem) {
  .section-capabilities .capability-visual--web .capability-scene__visual-entrance {
    width: 108%;
    margin-left: -5%;
  }

  .section-capabilities.has-web-pilot-motion[data-web-pilot-state="before"]
  .capability-visual--web .capability-scene__visual-entrance {
    transform: translate3d(58vw, .8rem, 0) rotateY(-4deg) scale(.97);
  }

  .section-capabilities.has-web-pilot-motion[data-web-pilot-state="after"]
  .capability-visual--web .capability-scene__visual-entrance {
    transform: translate3d(54vw, -.8rem, 0) rotateY(-3deg) scale(.984);
  }
}

@media (max-width: 48rem) {
  .section-capabilities .capability-visual--web .capability-scene__visual-entrance {
    grid-column: 1;
    grid-row: 2;
    width: 116%;
    margin: -.4rem 0 0 -8%;
    aspect-ratio: 640 / 430;
  }

  .section-capabilities .capability-visual--web .capability-scene__visual-entrance .capability-diagram {
    width: 100% !important;
    margin: 0 !important;
  }

  .section-capabilities.has-web-pilot-motion
  .capability-visual--web .capability-scene__copy,
  .section-capabilities.has-web-pilot-motion
  .capability-visual--web .capability-scene__visual-entrance {
    transition:
      transform 680ms cubic-bezier(.18,.80,.20,1),
      opacity 430ms ease;
  }

  .section-capabilities.has-web-pilot-motion[data-web-pilot-state="before"]
  .capability-visual--web .capability-scene__copy {
    opacity: .82;
    transform: translate3d(-.5rem, 0, 0);
  }

  .section-capabilities.has-web-pilot-motion[data-web-pilot-state="before"]
  .capability-visual--web .capability-scene__visual-entrance {
    opacity: 0;
    transform: translate3d(108vw, .4rem, 0) scale(.975);
  }

  .section-capabilities.has-web-pilot-motion[data-web-pilot-state="after"]
  .capability-visual--web .capability-scene__copy {
    opacity: 0;
    transform: translate3d(-105vw, -.35rem, 0);
  }

  .section-capabilities.has-web-pilot-motion[data-web-pilot-state="after"]
  .capability-visual--web .capability-scene__visual-entrance {
    opacity: 0;
    transform: translate3d(106vw, -.5rem, 0) scale(.985);
  }

  .section-capabilities .capability-console__footer::after {
    width: 144vw;
    height: 19rem;
    background:
      radial-gradient(ellipse at 50% 58%,
        rgba(84, 180, 255, .30) 0%,
        rgba(40, 130, 230, .14) 28%,
        rgba(8, 43, 87, 0) 76%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-visual--web .capability-scene__copy,
  .section-capabilities .capability-visual--web .capability-scene__visual-entrance,
  .section-capabilities .capability-console__footer::after,
  .section-capabilities .capability-index,
  .section-capabilities .capabilities__cta {
    transition: none !important;
    transform: none !important;
  }

  .section-capabilities .capability-visual--web .capability-scene__copy,
  .section-capabilities .capability-visual--web .capability-scene__visual-entrance {
    opacity: 1 !important;
  }

  .section-capabilities .capability-console__footer::after {
    opacity: 0 !important;
  }
}


/* ==========================================================================
   B8.3 — WEB visual free-flight refinement
   - stronger/exaggerated CTA neon;
   - remove the rigid card feeling behind the WEB pilot visual.
   ========================================================================== */

.section-capabilities .capability-visual--web {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.section-capabilities .capability-visual--web::before,
.section-capabilities .capability-visual--web::after {
  opacity: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border-color: transparent !important;
}

.section-capabilities .capability-visual--web .capability-scene__visual-entrance {
  width: 118%;
  margin-left: -11%;
  perspective: 90rem;
  filter:
    drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, .16))
    drop-shadow(0 3.4rem 6rem rgba(44, 123, 255, .11));
}

.section-capabilities .capability-visual--web .capability-scene__visual-entrance::before {
  inset: 21% 11% 19% 15%;
  background:
    radial-gradient(ellipse at 54% 50%,
      rgba(101, 188, 255, .16) 0%,
      rgba(50, 137, 240, .08) 32%,
      rgba(12, 50, 97, .02) 56%,
      transparent 76%);
  opacity: .72;
}

.section-capabilities .capability-visual--web .capability-diagram--web {
  filter:
    drop-shadow(0 2.2rem 4rem rgba(0, 0, 0, .14))
    drop-shadow(0 .4rem 1rem rgba(120, 205, 255, .10));
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="before"]
.capability-visual--web .capability-scene__visual-entrance {
  opacity: 0;
  transform:
    translate3d(54vw, .8rem, 0)
    rotateY(-6deg)
    rotateX(1deg)
    scale(.955);
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="active"]
.capability-visual--web .capability-scene__visual-entrance {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    rotateY(0deg)
    rotateX(0deg)
    scale(1);
}

.section-capabilities.has-web-pilot-motion[data-web-pilot-state="after"]
.capability-visual--web .capability-scene__visual-entrance {
  opacity: 0;
  transform:
    translate3d(48vw, -.9rem, 0)
    rotateY(-4deg)
    rotateX(-1deg)
    scale(.978);
}

.section-capabilities .capability-console__footer::before {
  content: "";
  position: absolute;
  z-index: -3;
  left: 50%;
  top: 56%;
  width: min(128rem, 156vw);
  height: clamp(20rem, 38vw, 35rem);
  transform: translate(-50%, -50%) scale(.84);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 52%,
      rgba(112, 199, 255, .10) 0%,
      rgba(46, 138, 242, .09) 30%,
      rgba(18, 72, 139, .05) 46%,
      rgba(5, 22, 44, 0) 76%);
  opacity: 0;
  transition:
    opacity 260ms ease,
    transform 560ms cubic-bezier(.16,.82,.18,1);
}

.section-capabilities .capability-console__footer:has(.capabilities__cta:hover)::before,
.section-capabilities .capability-console__footer:focus-within::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.22);
}

@media (max-width: 64rem) {
  .section-capabilities .capability-visual--web .capability-scene__visual-entrance {
    width: 113%;
    margin-left: -7%;
  }
}

@media (max-width: 48rem) {
  .section-capabilities .capability-visual--web .capability-scene__visual-entrance {
    width: 104%;
    margin: 0 0 0 -2%;
    filter:
      drop-shadow(0 .8rem 1.4rem rgba(0,0,0,.14))
      drop-shadow(0 2rem 3.6rem rgba(44,123,255,.08));
  }

  .section-capabilities .capability-visual--web .capability-scene__visual-entrance::before {
    inset: 20% 10% 20% 10%;
    opacity: .62;
  }

  .section-capabilities .capability-console__footer::before {
    width: 156vw;
    height: 20rem;
  }
}


/* ==========================================================================
   B8.5 — Scroll accordion pilot · 01 WEB → 02 CONTENIDO
   Ownership:
   - semantic accordion state + IntersectionObserver: home-capabilities-v2.js
   - sticky stacking, side choreography and finite micro-motion: CSS
   - no scroll hijacking, no synthetic clicks
   ========================================================================== */

.section-capabilities .capability-accordion-shell {
  position: relative;
}

.section-capabilities .capability-accordion {
  position: relative;
  display: block !important;
  margin: 0;
  padding: 0 0 clamp(1rem, 2vw, 2rem);
  overflow: visible;
}

.section-capabilities .capability-console__counter {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.section-capabilities .capability-accordion__trigger {
  --cap-acc-top: clamp(4.75rem, 6vw, 6rem);
  position: relative;
  z-index: calc(30 + var(--cap-acc-index));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  width: min(100%, 72rem);
  min-height: 4.25rem;
  margin: .65rem auto;
  padding: .8rem 1.1rem;
  border: 1px solid rgba(160, 213, 255, .18);
  border-radius: clamp(.82rem, 1vw, 1.05rem);
  color: rgba(171, 193, 216, .82);
  background:
    radial-gradient(circle at 88% 50%, rgba(95, 184, 255, .055), transparent 19%),
    linear-gradient(180deg, rgba(17, 51, 88, .72), rgba(4, 17, 33, .94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(86, 170, 245, .05),
    0 .8rem 2rem rgba(0,0,0,.12);
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 220ms ease,
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(.2,.8,.2,1);
}

.section-capabilities .capability-accordion__trigger--sequence {
  position: sticky;
  top: calc(var(--cap-acc-top) + (var(--cap-acc-index) * 4.75rem));
}

.section-capabilities .capability-accordion__trigger::before {
  content: "";
  position: absolute;
  inset: .22rem;
  border: 1px solid rgba(220, 244, 255, .055);
  border-radius: inherit;
  pointer-events: none;
}

.section-capabilities .capability-accordion__trigger::after {
  content: "";
  position: absolute;
  inset: 12% 5%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 60%, rgba(70, 157, 255, .16), transparent 68%);
  opacity: 0;
  filter: blur(1rem);
  transition: opacity 220ms ease;
}

.section-capabilities .capability-accordion__trigger.is-active,
.section-capabilities .capability-accordion__trigger[aria-expanded="true"] {
  color: #f1f8ff;
  border-color: rgba(195, 232, 255, .50);
  background:
    radial-gradient(circle at 88% 50%, rgba(136, 211, 255, .11), transparent 20%),
    linear-gradient(180deg, rgba(32, 91, 154, .83), rgba(5, 25, 48, .96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(100, 189, 255, .11),
    0 0 0 1px rgba(91, 177, 255, .055),
    0 1rem 2.2rem rgba(0,0,0,.14),
    0 0 1.9rem rgba(69, 158, 255, .12);
}

.section-capabilities .capability-accordion__trigger.is-active::after,
.section-capabilities .capability-accordion__trigger[aria-expanded="true"]::after {
  opacity: 1;
}

.section-capabilities .capability-accordion__number {
  color: rgba(102, 173, 240, .95);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.section-capabilities .capability-accordion__label {
  font-size: clamp(.72rem, .78vw, .82rem);
  font-weight: 780;
  letter-spacing: .045em;
}

.section-capabilities .capability-accordion__state {
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: rgba(105, 181, 242, .35);
  box-shadow: 0 0 0 .25rem rgba(75, 153, 233, .04);
}

.section-capabilities .capability-accordion__trigger[aria-expanded="true"] .capability-accordion__state {
  background: #d9f4ff;
  box-shadow:
    0 0 0 1px rgba(221, 246, 255, .18),
    0 0 .75rem rgba(127, 211, 255, .48);
}

.section-capabilities .capability-accordion__trigger:focus-visible {
  outline: 3px solid rgba(111, 196, 255, .96);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .section-capabilities .capability-accordion__trigger:hover {
    color: #e8f5ff;
    border-color: rgba(195, 232, 255, .38);
    transform: translateY(-2px);
  }
}

.section-capabilities .capability-accordion__panel {
  grid-area: auto !important;
  position: relative !important;
  display: block !important;
  min-width: 0;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

.section-capabilities .capability-accordion__panel::before,
.section-capabilities .capability-accordion__panel::after {
  content: none !important;
}

.section-capabilities .capability-accordion__panel--sequence {
  min-height: clamp(38rem, 76svh, 50rem);
  overflow: visible;
}


.section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] {
  pointer-events: none !important;
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene {
  min-height: clamp(36rem, 70svh, 47rem);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene::before,
.section-capabilities .capability-accordion__panel--sequence .capability-scene::after {
  opacity: 0 !important;
  visibility: hidden !important;
  box-shadow: none !important;
  background: none !important;
  border-color: transparent !important;
}

.section-capabilities .capability-accordion__panel--sequence .capability-spatial-stack {
  opacity: .20;
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene__copy {
  transition:
    opacity 300ms ease,
    transform 560ms cubic-bezier(.16,.84,.2,1);
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene__visual-entrance,
.section-capabilities .capability-accordion__panel--sequence .capability-diagram--desktop,
.section-capabilities .capability-accordion__panel--sequence .capability-diagram--mobile {
  transition:
    opacity 300ms ease,
    transform 620ms cubic-bezier(.16,.84,.2,1),
    filter 420ms ease;
}

.section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-scene__copy {
  opacity: 0;
  transform: translate3d(-5.4rem, 0, 0);
}

.section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-scene__copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-scene__visual-entrance,
.section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-diagram--desktop,
.section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-diagram--mobile {
  opacity: 0;
  transform: translate3d(7.5rem, 0, 0) scale(.985);
  filter: blur(.2rem) saturate(.9);
}

.section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-scene__visual-entrance,
.section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-diagram--desktop,
.section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-diagram--mobile {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.section-capabilities .capability-accordion__panel--sequence .capability-visual--web,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--content,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--continuity,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--automation {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.section-capabilities .capability-accordion__panel--sequence .capability-visual--web::before,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--web::after,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--content::before,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--content::after,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--continuity::before,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--continuity::after,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--automation::before,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--automation::after {
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="web"] .capability-diagram--web {
    transform-origin: 50% 50%;
    animation: pp-b85-web-drift 2.3s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="web"] .capability-diagram__node--active {
    transform-origin: 50% 50%;
    animation: pp-b85-node-pulse 1.55s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="web"] .capability-diagram__signal--active {
    animation: pp-b85-signal-breathe 1.8s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="content"] .capability-diagram__content-core {
    transform-origin: 50% 50%;
    animation: pp-b85-content-core 1.8s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="content"] .capability-diagram__content-formats {
    transform-origin: 50% 50%;
    animation: pp-b85-content-float 2.2s ease-in-out 2;
  }
}

@keyframes pp-b85-web-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1); }
  50% { transform: translate3d(.18rem, -.28rem, 0) rotateZ(.18deg) scale(1.006); }
}

@keyframes pp-b85-node-pulse {
  0%, 100% { opacity: .88; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.09); }
}

@keyframes pp-b85-signal-breathe {
  0%, 100% { opacity: .68; }
  50% { opacity: 1; }
}

@keyframes pp-b85-content-core {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(87, 181, 255, 0)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 .7rem rgba(87, 181, 255, .22)); }
}

@keyframes pp-b85-content-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(.18rem, -.22rem, 0); }
}

@media (max-width: 64rem) {
  .section-capabilities .capability-accordion__trigger {
    --cap-acc-top: 4.1rem;
    width: 100%;
    min-height: 3.9rem;
    margin-block: .5rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence {
    top: calc(var(--cap-acc-top) + (var(--cap-acc-index) * 4.25rem));
  }

  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(32rem, 66svh, 40rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
    min-height: clamp(31rem, 62svh, 38rem);
    padding: clamp(2rem, 6vw, 3rem) 0 clamp(2rem, 6vw, 3rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene__copy {
    grid-column: 1;
    max-width: 42rem;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-scene__copy {
    transform: translate3d(-2.7rem, 0, 0);
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-scene__visual-entrance,
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-diagram--desktop,
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] .capability-diagram--mobile {
    transform: translate3d(3rem, 0, 0) scale(.99);
  }
}

@media (max-width: 30rem) {
  .section-capabilities .capability-accordion__trigger {
    --cap-acc-top: 3.8rem;
    min-height: 3.6rem;
    padding: .7rem .9rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence {
    top: calc(var(--cap-acc-top) + (var(--cap-acc-index) * 3.9rem));
  }

  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(29rem, 61svh, 36rem);
  }

  .section-capabilities .capability-accordion__label {
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-accordion__trigger {
    position: relative !important;
    top: auto !important;
    transition: none !important;
  }

  .section-capabilities .capability-accordion__panel--sequence {
    min-height: 0;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] {
    display: none !important;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] {
    display: block !important;
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene__copy,
  .section-capabilities .capability-accordion__panel--sequence .capability-scene__visual-entrance,
  .section-capabilities .capability-accordion__panel--sequence .capability-diagram--desktop,
  .section-capabilities .capability-accordion__panel--sequence .capability-diagram--mobile {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   B8.6 — Full 4-step scroll accordion
   Approved B8.5 pattern extended to 03 CONTINUIDAD + 04 AUTOMATIZACIÓN.
   Accordion headers become rounded rectangles instead of pills.
   ========================================================================== */

.section-capabilities .capability-accordion__trigger {
  border-radius: clamp(.82rem, 1vw, 1.05rem);
}

.section-capabilities .capability-accordion__trigger::before,
.section-capabilities .capability-accordion__trigger::after {
  border-radius: clamp(.62rem, .8vw, .82rem);
}

/* All four steps get the same real scroll runway. */
.section-capabilities .capability-accordion__panel--sequence {
  min-height: clamp(38rem, 76svh, 50rem);
  overflow: visible;
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene {
  min-height: clamp(36rem, 70svh, 47rem);
}

/* Keep the floating-reference language consistent for the four visual systems. */
.section-capabilities .capability-accordion__panel--sequence .capability-visual--continuity,
.section-capabilities .capability-accordion__panel--sequence .capability-visual--automation {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Finite active-state motion only. No infinite decorative loops. */
@media (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="continuity"] .capability-diagram__continuity-core {
    transform-origin: 50% 50%;
    animation: pp-b86-continuity-core 1.9s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="continuity"] .capability-diagram__continuity-cycles {
    transform-origin: 50% 50%;
    animation: pp-b86-continuity-cycle 2.35s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="continuity"] .capability-diagram__continuity-checks {
    animation: pp-b86-check-pulse 1.65s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="automation"] .capability-diagram__automation-engine {
    transform-origin: 50% 50%;
    animation: pp-b86-automation-engine 1.85s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="automation"] .capability-diagram__automation-paths {
    animation: pp-b86-automation-paths 1.55s ease-in-out 2;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"][data-capability-key="automation"] .capability-diagram__automation-output {
    transform-origin: 50% 50%;
    animation: pp-b86-automation-output 1.75s ease-in-out 2;
  }
}

@keyframes pp-b86-continuity-core {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes pp-b86-continuity-cycle {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .78; }
  50% { transform: translate3d(.16rem, -.18rem, 0); opacity: 1; }
}

@keyframes pp-b86-check-pulse {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

@keyframes pp-b86-automation-engine {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(89, 181, 255, 0)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 .8rem rgba(89, 181, 255, .22)); }
}

@keyframes pp-b86-automation-paths {
  0%, 100% { opacity: .68; }
  50% { opacity: 1; }
}

@keyframes pp-b86-automation-output {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(.18rem, -.12rem, 0) scale(1.035); }
}

@media (max-width: 64rem) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(32rem, 66svh, 40rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(31rem, 62svh, 38rem);
  }

  .section-capabilities .capability-accordion__trigger {
    border-radius: .9rem;
  }
}

@media (max-width: 30rem) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(29rem, 61svh, 36rem);
  }

  .section-capabilities .capability-accordion__trigger {
    border-radius: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="true"] {
    display: none !important;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] {
    display: block !important;
    min-height: 0;
  }

  .section-capabilities .capability-accordion__panel--sequence [class*="capability-diagram__"] {
    animation: none !important;
  }
}


/* ==========================================================================
   B8.7 — Collision Dock Rail
   Goal:
   - stop four wide sticky headers from obscuring the scene;
   - completed steps collapse into compact numbered squares;
   - current step occupies the remaining rail;
   - future steps stay in normal flow until promoted.
   ========================================================================== */

.section-capabilities {
  --cap-dock-size: 3.2rem;
  --cap-dock-gap: .45rem;
  --cap-dock-step: calc(var(--cap-dock-size) + var(--cap-dock-gap));
  --cap-dock-top: clamp(4.8rem, 6vw, 5.9rem);
  --cap-active-index: 0;
}

/* Reset the B8.6 "all headers sticky" behavior. */
.section-capabilities .capability-accordion__trigger--sequence {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 72rem);
  min-height: 3.9rem;
  margin-inline: auto;
  transform: none;
}

/* Past + current headers meet on one single compact sticky rail. */
.section-capabilities .capability-accordion__trigger--sequence.is-past,
.section-capabilities .capability-accordion__trigger--sequence.is-current {
  position: sticky;
  top: var(--cap-dock-top);
  margin-top: .55rem;
  margin-bottom: .55rem;
  z-index: 72;
}

/* Completed steps become small square numbered chips. */
.section-capabilities .capability-accordion__trigger--sequence.is-past {
  width: var(--cap-dock-size);
  min-width: var(--cap-dock-size);
  max-width: var(--cap-dock-size);
  min-height: var(--cap-dock-size);
  height: var(--cap-dock-size);
  margin-left: calc(var(--cap-acc-index) * var(--cap-dock-step));
  margin-right: auto;
  padding: 0;
  border-radius: .72rem;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(130, 207, 255, .10), transparent 52%),
    linear-gradient(180deg, rgba(21, 63, 106, .88), rgba(5, 23, 43, .97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(85, 174, 248, .08),
    0 .55rem 1.2rem rgba(0,0,0,.13),
    0 0 1rem rgba(54, 151, 255, .08);
}

.section-capabilities .capability-accordion__trigger--sequence.is-past::before {
  inset: .2rem;
  border-radius: .54rem;
}

.section-capabilities .capability-accordion__trigger--sequence.is-past::after {
  inset: 18%;
  border-radius: .55rem;
}

.section-capabilities .capability-accordion__trigger--sequence.is-past .capability-accordion__number {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(184, 228, 255, .92);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
}

.section-capabilities .capability-accordion__trigger--sequence.is-past .capability-accordion__label,
.section-capabilities .capability-accordion__trigger--sequence.is-past .capability-accordion__state {
  display: none;
}

/* Current step occupies the rest of the rail, right after past chips. */
.section-capabilities .capability-accordion__trigger--sequence.is-current {
  width: min(
    calc(100% - (var(--cap-active-index) * var(--cap-dock-step))),
    calc(72rem - (var(--cap-active-index) * var(--cap-dock-step)))
  );
  margin-left: calc(var(--cap-active-index) * var(--cap-dock-step));
  margin-right: auto;
  min-height: var(--cap-dock-size);
  padding: .6rem 1rem;
  border-radius: .78rem;
  z-index: 76;
  grid-template-columns: auto minmax(0, 1fr) auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(102, 190, 255, .10),
    0 .8rem 1.8rem rgba(0,0,0,.13),
    0 0 1.6rem rgba(63, 157, 255, .10);
}

.section-capabilities .capability-accordion__trigger--sequence.is-current .capability-accordion__label {
  text-align: left;
}

/* Future capability headers are regular blocks, so they cannot cover the
   current text/illustration before their section is reached. */
.section-capabilities .capability-accordion__trigger--sequence.is-future {
  position: relative;
  top: auto;
  width: min(100%, 72rem);
  margin-left: auto;
  margin-right: auto;
  opacity: .78;
  z-index: 24;
}

/* Subtle rail bridge, only where the compact chips/current bar live. */
.section-capabilities .capability-accordion::before {
  content: "";
  position: sticky;
  top: calc(var(--cap-dock-top) + (var(--cap-dock-size) / 2));
  z-index: 68;
  display: block;
  width: min(100%, 72rem);
  height: 1px;
  margin: 0 auto -1px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(93, 180, 255, .15),
      rgba(93, 180, 255, .08) 45%,
      transparent 90%);
  opacity: .55;
}

/* Keep the scene visibly below the compact dock without wasting a second row. */
.section-capabilities .capability-accordion__panel--sequence .capability-scene {
  padding-top: clamp(2.6rem, 4.5vw, 4.4rem);
}

/* Manual focus/click states on compact chips stay obvious. */
.section-capabilities .capability-accordion__trigger--sequence.is-past:focus-visible,
.section-capabilities .capability-accordion__trigger--sequence.is-current:focus-visible {
  outline: 3px solid rgba(121, 205, 255, .98);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .section-capabilities .capability-accordion__trigger--sequence.is-past:hover {
    transform: translateY(-2px);
    border-color: rgba(204, 237, 255, .48);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 .8rem 1.5rem rgba(0,0,0,.15),
      0 0 1.4rem rgba(70, 166, 255, .16);
  }
}

/* Tablet/mobile: same collision idea, with smaller numbered chips. */
@media (max-width: 64rem) {
  .section-capabilities {
    --cap-dock-size: 2.85rem;
    --cap-dock-gap: .34rem;
    --cap-dock-top: 4.1rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-current {
    min-height: var(--cap-dock-size);
    padding-inline: .82rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-current .capability-accordion__number {
    font-size: .62rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-current .capability-accordion__label {
    font-size: .68rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-past {
    border-radius: .64rem;
  }
}

@media (max-width: 30rem) {
  .section-capabilities {
    --cap-dock-size: 2.48rem;
    --cap-dock-gap: .24rem;
    --cap-dock-top: 3.8rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-past {
    border-radius: .58rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-past .capability-accordion__number {
    font-size: .6rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-current {
    border-radius: .66rem;
    padding-inline: .68rem;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-current .capability-accordion__number {
    display: none;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-current .capability-accordion__label {
    font-size: .64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-accordion__trigger--sequence.is-past,
  .section-capabilities .capability-accordion__trigger--sequence.is-current,
  .section-capabilities .capability-accordion__trigger--sequence.is-future {
    position: relative !important;
    top: auto !important;
    width: min(100%, 72rem) !important;
    height: auto !important;
    min-height: 3.6rem !important;
    margin-inline: auto !important;
    padding: .75rem 1rem !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .section-capabilities .capability-accordion__trigger--sequence.is-past .capability-accordion__label,
  .section-capabilities .capability-accordion__trigger--sequence.is-past .capability-accordion__state {
    display: block;
  }

  .section-capabilities .capability-accordion::before {
    display: none;
  }
}


/* ==========================================================================
   B8.8 — True collision + slower processing
   The next capability does NOT become active in the middle of the scene.
   It activates only when its normal-flow sentinel reaches the compact dock.
   ========================================================================== */

.section-capabilities {
  --cap-dock-top: clamp(4.7rem, 8.5svh, 6rem);
}

/* A zero-content normal-flow marker placed directly before each heading.
   JS observes this marker, so sticky positioning cannot distort activation. */
.section-capabilities .capability-accordion__collision-sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
}

/* Give every capability almost a full viewport to breathe before the next
   heading physically reaches the dock. This is the main "slower" change. */
.section-capabilities .capability-accordion__panel--sequence {
  min-height: clamp(48rem, 98svh, 63rem);
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene {
  min-height: clamp(43rem, 86svh, 56rem);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Slow the visual handoff slightly so the eye has time to register it.
   Scroll remains entirely native; this only affects CSS choreography. */
.section-capabilities .capability-accordion__panel--sequence .capability-scene__copy {
  transition-duration: 520ms, 820ms;
}

.section-capabilities .capability-accordion__panel--sequence .capability-scene__visual-entrance,
.section-capabilities .capability-accordion__panel--sequence .capability-diagram--desktop,
.section-capabilities .capability-accordion__panel--sequence .capability-diagram--mobile {
  transition-duration: 520ms, 980ms, 620ms;
}

/* The collision is now literal: past chips and the active title share the
   exact same sticky top line. */
.section-capabilities .capability-accordion__trigger--sequence.is-past,
.section-capabilities .capability-accordion__trigger--sequence.is-current {
  top: var(--cap-dock-top);
}

/* Extra breathing between the active bar and its scene. */
.section-capabilities .capability-accordion__trigger--sequence.is-current + .capability-accordion__panel--sequence,
.section-capabilities .capability-accordion__collision-sentinel + .capability-accordion__trigger--sequence.is-current + .capability-accordion__panel--sequence {
  scroll-margin-top: calc(var(--cap-dock-top) + var(--cap-dock-size) + 1.2rem);
}

@media (max-width: 64rem) {
  .section-capabilities {
    --cap-dock-top: clamp(4rem, 7.5svh, 4.8rem);
  }

  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(39rem, 90svh, 50rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(35rem, 78svh, 44rem);
    padding-bottom: clamp(3rem, 8vw, 5rem);
  }
}

@media (max-width: 30rem) {
  .section-capabilities {
    --cap-dock-top: clamp(3.65rem, 6.8svh, 4.2rem);
  }

  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(34rem, 86svh, 43rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(31rem, 74svh, 39rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: 0;
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: 0;
    padding-block: 2rem;
  }
}


/* ==========================================================================
   B8.9 — Fast-scroll state recovery + mobile density
   ========================================================================== */

/* State animation is cosmetic only. It never gates the active index. */
.section-capabilities .capability-accordion__trigger--sequence,
.section-capabilities .capability-accordion__panel--sequence {
  transition-behavior: normal;
}

@media (max-width: 48rem) {
  /*
   * Preserve the slower accordion runway at panel level, but stop stretching
   * the internal scene. This removes the large empty gap between copy + visual.
   */
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(34rem, 82svh, 41rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    align-content: start !important;
    gap: clamp(.75rem, 3vw, 1.15rem) !important;
    min-height: 0 !important;
    padding-top: clamp(1.35rem, 4vw, 2rem) !important;
    padding-bottom: clamp(1.25rem, 4vw, 2rem) !important;
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene__copy {
    width: min(100%, 30rem);
    max-width: 30rem;
    margin-inline: auto;
    padding: 0 .35rem .25rem;
    align-content: start;
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene .capability-diagram {
    width: min(108%, 30rem) !important;
    max-width: 30rem;
    margin: .15rem auto 0 !important;
    justify-self: center;
    align-self: start;
  }

  .section-capabilities .capability-accordion__panel--sequence
  .capability-visual--web .capability-scene__visual-entrance {
    width: min(106%, 30rem) !important;
    margin: .15rem auto 0 !important;
    justify-self: center;
    align-self: start;
  }

  /* Decorative circuit follows the compact content group instead of
     occupying the old full-height scene. */
  .section-capabilities .capability-accordion__panel--sequence .capability-scene__circuit {
    inset: 31% -4% 3% -4%;
    width: 108%;
    height: 68%;
  }
}

@media (max-width: 30rem) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(31rem, 78svh, 37rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    gap: .7rem !important;
    padding-top: 1.15rem !important;
    padding-bottom: 1.25rem !important;
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene__copy {
    width: min(100%, 27rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene .capability-diagram,
  .section-capabilities .capability-accordion__panel--sequence
  .capability-visual--web .capability-scene__visual-entrance {
    width: min(104%, 27rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: 0 !important;
  }
}


/* ==========================================================================
   B8.10 — Mobile scene safety after fast-scroll state fix
   The panel may provide scroll runway, but the visible copy + visual group
   itself must never stretch vertically.
   ========================================================================== */

@media (max-width: 48rem) {
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-scene {
    min-height: 0 !important;
    height: auto !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
  }

  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-scene__copy,
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-diagram,
  .section-capabilities .capability-accordion__panel--sequence[aria-hidden="false"] .capability-scene__visual-entrance {
    align-self: start !important;
  }
}


/* ==========================================================================
   B8.12 — AUTOMATIZACIÓN · Aggressive Crystal Reactor
   Pilot only for capability 04.
   Desktop-safe: all new layers are absolute and do not affect document flow.
   ========================================================================== */

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-visual--automation {
  /* Position is owned by .capability-scene:
     relative by default, sticky on desktop B8.18. */
  isolation: isolate;
  overflow: visible;
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* Dedicated field behind the SVG: no layout footprint. */
.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field {
  position: absolute;
  z-index: 4;
  top: 8%;
  right: -2%;
  bottom: 8%;
  left: 39%;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1200px;
  overflow: visible;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__halo {
  position: absolute;
  inset: 16% 9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(183, 236, 255, .18) 0%,
      rgba(103, 190, 255, .13) 22%,
      rgba(53, 121, 255, .08) 42%,
      rgba(4, 18, 39, 0) 72%);
  transform: translateZ(-60px) scale(.92);
  filter: blur(.45rem);
  opacity: .92;
  animation: pp-b812-halo-breathe 4.8s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__ring {
  position: absolute;
  top: 50%;
  left: 56%;
  border: 1px solid rgba(186, 233, 255, .34);
  border-radius: 50%;
  background:
    conic-gradient(
      from 18deg,
      rgba(255,255,255,.22),
      rgba(103,187,255,.04) 14%,
      rgba(43,111,238,.16) 28%,
      rgba(255,255,255,.08) 43%,
      rgba(58,144,255,.04) 58%,
      rgba(207,241,255,.20) 78%,
      rgba(255,255,255,.04)
    );
  -webkit-mask:
    radial-gradient(circle, transparent 60%, #000 61% 68%, transparent 69%);
  mask:
    radial-gradient(circle, transparent 60%, #000 61% 68%, transparent 69%);
  box-shadow:
    inset 0 0 1rem rgba(160, 218, 255, .06),
    0 0 1.4rem rgba(74, 163, 255, .10);
  transform-style: preserve-3d;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__ring--outer {
  width: min(29rem, 40vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0deg);
  animation: pp-b812-ring-outer 11s linear infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__ring--inner {
  width: min(20rem, 29vw);
  aspect-ratio: 1;
  opacity: .76;
  transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg);
  animation: pp-b812-ring-inner 7.2s linear infinite reverse;
}

/* Floating crystal shards — intentionally obvious. */
.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__shard {
  position: absolute;
  width: clamp(3.2rem, 5vw, 5.4rem);
  aspect-ratio: .78;
  clip-path: polygon(50% 0%, 100% 31%, 78% 100%, 18% 83%, 0% 29%);
  border: 1px solid rgba(210, 241, 255, .40);
  background:
    linear-gradient(145deg,
      rgba(242, 251, 255, .22) 0%,
      rgba(135, 208, 255, .17) 22%,
      rgba(46, 118, 220, .16) 49%,
      rgba(7, 25, 49, .12) 74%,
      rgba(164, 224, 255, .18) 100%);
  box-shadow:
    inset .3rem .35rem 1rem rgba(255,255,255,.10),
    inset -.25rem -.35rem .85rem rgba(42, 97, 177, .12),
    0 1rem 2.3rem rgba(0,0,0,.20),
    0 0 1.25rem rgba(76, 169, 255, .12);
  opacity: .88;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__shard::before {
  content: "";
  position: absolute;
  inset: 7%;
  clip-path: inherit;
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,0) 34% 62%,
      rgba(117,202,255,.18));
  mix-blend-mode: screen;
  opacity: .72;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__shard--a {
  top: 16%;
  left: 23%;
  transform: translateZ(55px) rotate(-17deg) rotateY(18deg);
  animation: pp-b812-shard-a 6.8s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__shard--b {
  top: 54%;
  left: 16%;
  width: clamp(2.8rem, 4.3vw, 4.6rem);
  opacity: .70;
  transform: translateZ(-12px) rotate(31deg) rotateY(-22deg);
  animation: pp-b812-shard-b 7.6s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__shard--c {
  top: 28%;
  right: 9%;
  width: clamp(2.5rem, 3.8vw, 4rem);
  opacity: .66;
  transform: translateZ(24px) rotate(-34deg) rotateY(26deg);
  animation: pp-b812-shard-c 6.2s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-crystal-field__flare {
  position: absolute;
  top: 46%;
  left: 56%;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #dff7ff;
  box-shadow:
    0 0 .7rem rgba(225, 248, 255, .90),
    0 0 1.8rem rgba(125, 208, 255, .55),
    0 0 4.5rem rgba(65, 136, 255, .30);
  transform: translate(-50%, -50%) translateZ(90px);
  opacity: .9;
  animation: pp-b812-flare 3.3s ease-in-out infinite;
}

/* Reinterpret the existing SVG itself as a glass reactor. */
.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-diagram--automation {
  filter:
    drop-shadow(0 1.8rem 2.8rem rgba(0,0,0,.24))
    drop-shadow(0 0 1.5rem rgba(76, 158, 255, .18))
    saturate(1.10);
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-diagram__automation-engine,
.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-diagram__automation-engine-inner {
  transform-box: fill-box;
  transform-origin: center;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-diagram__automation-engine {
  animation: pp-b812-engine-prism 4.4s cubic-bezier(.37,.02,.22,1) infinite;
  filter:
    drop-shadow(0 0 .8rem rgba(137, 213, 255, .26))
    drop-shadow(0 .9rem 1.5rem rgba(0,0,0,.26));
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-diagram__automation-engine-inner {
  animation: pp-b812-engine-core 2.9s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-diagram__automation-paths {
  animation: pp-b812-paths-energy 2.35s ease-in-out infinite;
  filter: drop-shadow(0 0 .45rem rgba(107, 192, 255, .24));
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-diagram__automation-integrations {
  transform-box: fill-box;
  transform-origin: center;
  animation: pp-b812-integrations-orbit 6.4s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-diagram__automation-output {
  transform-box: fill-box;
  transform-origin: center;
  animation: pp-b812-output-crystal 3.15s ease-in-out infinite;
  filter:
    drop-shadow(0 0 .7rem rgba(143, 218, 255, .30))
    drop-shadow(0 0 1.3rem rgba(70, 148, 255, .18));
}

/* Existing glass materials become much more crystalline in 04 only. */
.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-diagram__material-glass {
  fill-opacity: .46;
  stroke: rgba(202, 238, 255, .68);
  stroke-width: 1.15;
  filter:
    drop-shadow(0 0 .35rem rgba(113, 196, 255, .15))
    drop-shadow(0 .55rem .75rem rgba(0,0,0,.16));
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-diagram__signature-caustic--automation {
  opacity: .74;
  animation: pp-b812-svg-caustic 5.6s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-diagram__signature-reflection--automation {
  opacity: .62;
  animation: pp-b812-svg-reflection 4.7s ease-in-out infinite;
}

/* Finite ambient layer around the active automation scene, no layout effect. */
.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"][aria-hidden="false"]
.capability-spatial-stack {
  opacity: .62;
  transform-style: preserve-3d;
  animation: pp-b812-spatial-drift 8.4s ease-in-out infinite;
}

.section-capabilities
.capability-accordion__panel--sequence[data-capability-key="automation"]
.capability-spatial-plane {
  border-color: rgba(177, 225, 255, .22);
  background:
    linear-gradient(145deg,
      rgba(222, 245, 255, .10),
      rgba(75, 151, 235, .06) 35%,
      rgba(7, 25, 47, .08) 70%,
      rgba(137, 208, 255, .09));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(75, 151, 235, .08),
    0 1rem 2.4rem rgba(0,0,0,.16),
    0 0 1.2rem rgba(78, 161, 255, .08);
}

@keyframes pp-b812-halo-breathe {
  0%,100% { transform: translateZ(-60px) scale(.90); opacity: .66; }
  50% { transform: translateZ(-60px) scale(1.08); opacity: 1; }
}

@keyframes pp-b812-ring-outer {
  from { transform: translate(-50%,-50%) rotateX(65deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(65deg) rotateZ(360deg); }
}

@keyframes pp-b812-ring-inner {
  from { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(360deg); }
}

@keyframes pp-b812-shard-a {
  0%,100% { transform: translate3d(0,0,55px) rotate(-17deg) rotateY(18deg); }
  50% { transform: translate3d(.55rem,-.85rem,85px) rotate(-8deg) rotateY(38deg); }
}

@keyframes pp-b812-shard-b {
  0%,100% { transform: translate3d(0,0,-12px) rotate(31deg) rotateY(-22deg); }
  50% { transform: translate3d(-.35rem,.75rem,20px) rotate(42deg) rotateY(-8deg); }
}

@keyframes pp-b812-shard-c {
  0%,100% { transform: translate3d(0,0,24px) rotate(-34deg) rotateY(26deg); }
  50% { transform: translate3d(.25rem,-.55rem,52px) rotate(-21deg) rotateY(45deg); }
}

@keyframes pp-b812-flare {
  0%,100% { transform: translate(-50%,-50%) translateZ(90px) scale(.82); opacity: .56; }
  42% { transform: translate(-50%,-50%) translateZ(105px) scale(1.22); opacity: 1; }
  68% { transform: translate(-50%,-50%) translateZ(96px) scale(.94); opacity: .76; }
}

@keyframes pp-b812-engine-prism {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  28% { transform: translate3d(.16rem,-.22rem,0) rotate(.8deg) scale(1.025); }
  58% { transform: translate3d(-.12rem,.12rem,0) rotate(-.55deg) scale(.99); }
  78% { transform: translate3d(.08rem,-.08rem,0) rotate(.3deg) scale(1.015); }
}

@keyframes pp-b812-engine-core {
  0%,100% { opacity: .74; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes pp-b812-paths-energy {
  0%,100% { opacity: .54; }
  35% { opacity: 1; }
  68% { opacity: .72; }
}

@keyframes pp-b812-integrations-orbit {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(.25rem,-.18rem,0) rotate(.38deg); }
}

@keyframes pp-b812-output-crystal {
  0%,100% { transform: translate3d(0,0,0) scale(.96); opacity: .78; }
  45% { transform: translate3d(.2rem,-.08rem,0) scale(1.10); opacity: 1; }
}

@keyframes pp-b812-svg-caustic {
  0%,100% { opacity: .36; transform: translate3d(0,0,0); }
  45% { opacity: .88; transform: translate3d(.18rem,-.16rem,0); }
  72% { opacity: .56; transform: translate3d(-.08rem,.12rem,0); }
}

@keyframes pp-b812-svg-reflection {
  0%,100% { opacity: .24; }
  38% { opacity: .72; }
  60% { opacity: .42; }
}

@keyframes pp-b812-spatial-drift {
  0%,100% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translate3d(.15rem,-.25rem,0) rotateX(.6deg) rotateY(-.85deg); }
}

/* Mobile keeps the current stable layout. Crystal field is simplified. */
@media (max-width: 48rem) {
  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"]
  .capability-crystal-field {
    top: 38%;
    right: -3%;
    bottom: 0;
    left: -3%;
    opacity: .74;
  }

  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"]
  .capability-crystal-field__ring--outer {
    width: min(24rem, 86vw);
  }

  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"]
  .capability-crystal-field__ring--inner {
    width: min(17rem, 64vw);
  }

  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"]
  .capability-crystal-field__shard--b,
  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"]
  .capability-crystal-field__shard--c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"] * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"]
  .capability-crystal-field__ring {
    opacity: .32;
  }
}

/* ==========================================================================
   B8.13 — Continuous scroll handoff
   Scroll position is the visual source of truth between adjacent capabilities.
   - Decorative/diagram presence overlaps before the next sentinel reaches dock.
   - aria-hidden/inert and rail ownership remain collision-based in JS.
   - No timers, transition locks, scroll interception or extra dependency.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Non-WEB scenes already move through normal document flow. Only their
   * diagram opacity is driven by the handoff, preserving each authored transform
   * and all finite build animations on descendant groups.
   */
  .section-capabilities[data-capability-handoff="continuous"]
  .capability-accordion__panel--sequence:not([data-capability-key="web"])
  .capability-diagram--desktop,
  .section-capabilities[data-capability-handoff="continuous"]
  .capability-accordion__panel--sequence:not([data-capability-key="web"])
  .capability-diagram--mobile {
    opacity: var(--cap-handoff-alpha, 0) !important;
    transform: translate3d(var(--cap-handoff-shift, 0px), 0, 0) scale(1) !important;
    filter: none !important;
    transition: none !important;
  }

  /*
   * WEB owns a wrapper around both desktop/mobile diagrams. Driving the wrapper
   * avoids multiplying opacity while leaving its internal diagram build intact.
   */
  .section-capabilities[data-capability-handoff="continuous"]
  .capability-accordion__panel--sequence[data-capability-key="web"]
  .capability-scene__visual-entrance {
    opacity: var(--cap-handoff-alpha, 0) !important;
    transform:
      translate3d(var(--cap-handoff-shift, 0px), 0, 0)
      rotateY(0deg)
      scale(1) !important;
    filter: none !important;
    transition: none !important;
  }

  .section-capabilities[data-capability-handoff="continuous"]
  .capability-accordion__panel--sequence[data-capability-key="web"]
  .capability-scene__visual-entrance
  .capability-diagram--desktop,
  .section-capabilities[data-capability-handoff="continuous"]
  .capability-accordion__panel--sequence[data-capability-key="web"]
  .capability-scene__visual-entrance
  .capability-diagram--mobile {
    opacity: 1 !important;
  }
}

/* ==========================================================================
   B8.15 — Fluid pacing runway for overlapping capability builds
   Feedback target:
   - keep native scrolling;
   - give each scene enough physical scroll distance to complete its authored build;
   - preserve the B8.13 overlap and collision semantics.
   ========================================================================== */

@media (min-width: 64.001rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(62rem, 146svh, 104rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(46rem, 96svh, 66rem);
  }
}

@media (max-width: 64rem) and (min-width: 48.001rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(48rem, 132svh, 70rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(38rem, 88svh, 50rem);
  }
}

@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(39rem, 118svh, 56rem);
  }
}

@media (max-width: 30rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(36rem, 112svh, 48rem);
  }
}

/* ==========================================================================
   B8.16 — Slower native-scroll pacing + mobile header clearance
   The browser still owns wheel/touch scrolling. Perceived speed is reduced by
   mapping each scene across more physical document distance and by starting the
   incoming build earlier. Mobile also receives a larger dock/title clearance so
   the authored build can resolve before copy reaches the sticky header.
   ========================================================================== */

@media (min-width: 64.001rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(74rem, 172svh, 124rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(48rem, 100svh, 70rem);
  }
}

@media (max-width: 64rem) and (min-width: 48.001rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(54rem, 150svh, 82rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    min-height: clamp(40rem, 92svh, 54rem);
  }
}

@media (max-width: 48rem) {
  .section-capabilities {
    --cap-dock-top: clamp(4.9rem, 11.5svh, 5.8rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    padding-top: clamp(2.8rem, 8vw, 3.8rem) !important;
  }
}

@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(44rem, 136svh, 64rem);
  }
}

@media (max-width: 30rem) {
  .section-capabilities {
    --cap-dock-top: clamp(4.7rem, 11svh, 5.4rem);
  }
}

@media (max-width: 30rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(40rem, 128svh, 56rem);
  }
}



/* ==========================================================================
   B8.17 — Mobile sticky-header / capability-title clearance
   Scope: mobile only.
   The current capability rail is sticky, so its painted box can overlap the
   beginning of the active scene even though normal-flow spacing is preserved.
   Reserve explicit visual clearance below the sticky rail instead of changing
   the build timing or intercepting scroll.
   ========================================================================== */

@media (max-width: 48rem) {
  .section-capabilities {
    --cap-dock-top: calc(5.55rem + env(safe-area-inset-top, 0px));
  }

  .section-capabilities
  .capability-accordion__panel--sequence[aria-hidden="false"]
  .capability-scene__copy {
    margin-top: clamp(2rem, 7vw, 2.75rem);
  }
}

@media (max-width: 30rem) {
  .section-capabilities {
    --cap-dock-top: calc(5.35rem + env(safe-area-inset-top, 0px));
  }

  .section-capabilities
  .capability-accordion__panel--sequence[aria-hidden="false"]
  .capability-scene__copy {
    margin-top: clamp(2.15rem, 8.5vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 48rem) {
  .section-capabilities
  .capability-accordion__panel--sequence[aria-hidden="false"]
  .capability-scene__copy {
    margin-top: clamp(1.6rem, 6vw, 2.2rem);
  }
}

/* ==========================================================================
   B8.18 — Desktop sticky scene pacing
   Scope: desktop only, no reduced motion.
   Why:
   - previous builds increased panel height but the scene itself continued
     travelling normally, so the extra distance did not slow the visible story;
   - keep the active scene under the compact dock while its panel supplies
     native scroll runway;
   - pair that hold with the wider JS handoff window (1.28 → .04 viewport)
     so 01→02, 02→03 and 03→04 require materially more scroll distance.
   No wheel/touch interception, scroll snap or transition lock is introduced.
   ========================================================================== */

@media (min-width: 64.001rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-accordion__panel--sequence {
    min-height: clamp(82rem, 190svh, 136rem);
  }

  .section-capabilities .capability-accordion__panel--sequence .capability-scene {
    position: sticky;
    top: calc(var(--cap-dock-top) + var(--cap-dock-size) + 1.35rem);
    min-height: clamp(38rem, 76svh, 54rem);
    align-content: center;
  }
}

/* ==========================================================================
   Shared visual OUTRO after capability 04
   Four semantic capabilities remain unchanged. The existing closing CTA becomes
   a fifth visual state inside the same scroll flow so 04 uses the same
   next-boundary handoff formula as 01–03.
   The OUTRO has no 05 label/trigger/count; its CTA remains a real link and
   reduced motion renders the closing state statically.
   ========================================================================== */

.section-capabilities .capability-console__outro-sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
}

.section-capabilities .capability-console__outro {
  position: relative;
  z-index: 8;
  display: block;
  min-height: clamp(36rem, 96svh, 62rem);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  isolation: isolate;
}

.section-capabilities .capability-console__outro-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  min-height: clamp(30rem, 72svh, 46rem);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 10vw, 8rem);
}

.section-capabilities .capability-console__outro::before,
.section-capabilities .capability-console__outro::after {
  content: none;
}

/*
 * Preserve the already-approved CTA neon zone after moving the footer into a
 * long visual stage. The glow follows the sticky OUTRO content rather than the
 * outer runway, so hover/focus remains centered on the actual CTA.
 */
.section-capabilities .capability-console__outro-stage::before,
.section-capabilities .capability-console__outro-stage::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 54%;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  transition:
    opacity 260ms ease,
    transform 540ms cubic-bezier(.16,.82,.18,1),
    filter 360ms ease;
}

.section-capabilities .capability-console__outro-stage::before {
  width: min(128rem, 156vw);
  height: clamp(20rem, 38vw, 35rem);
  background:
    radial-gradient(ellipse at 50% 52%,
      rgba(112, 199, 255, .10) 0%,
      rgba(46, 138, 242, .09) 30%,
      rgba(18, 72, 139, .05) 46%,
      rgba(5, 22, 44, 0) 76%);
}

.section-capabilities .capability-console__outro-stage::after {
  width: min(116rem, 138vw);
  height: clamp(19rem, 34vw, 31rem);
  background:
    radial-gradient(ellipse at 50% 54%,
      rgba(90, 186, 255, .34) 0%,
      rgba(49, 142, 245, .20) 24%,
      rgba(28, 103, 196, .10) 44%,
      rgba(10, 45, 92, .03) 59%,
      rgba(6, 29, 58, 0) 78%);
  filter: saturate(1.14) blur(.15rem);
}

.section-capabilities .capability-console__outro-stage:has(.capabilities__cta:hover)::before,
.section-capabilities .capability-console__outro-stage:focus-within::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.22);
}

.section-capabilities .capability-console__outro-stage:has(.capabilities__cta:hover)::after,
.section-capabilities .capability-console__outro-stage:focus-within::after {
  opacity: 1;
  filter: saturate(1.24) blur(0);
  transform: translate(-50%, -50%) scale(1.18);
}

.section-capabilities .capability-console__outro-separator {
  position: relative;
  display: block;
  width: min(42rem, 74%);
  height: 1px;
  margin: 0 auto;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(105, 189, 255, .18) 12%,
    rgba(141, 213, 255, .58) 50%,
    rgba(105, 189, 255, .18) 88%,
    transparent
  );
  box-shadow:
    0 0 .9rem rgba(76, 167, 255, .16),
    0 0 2.4rem rgba(48, 137, 255, .09);
}

.section-capabilities .capability-console__outro-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .42rem;
  height: .42rem;
  border: 1px solid rgba(197, 234, 255, .72);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(112, 194, 255, .62);
  box-shadow:
    0 0 .7rem rgba(117, 202, 255, .42),
    0 0 1.6rem rgba(75, 165, 255, .16);
}

/*
 * Desktop mirrors the capability scene hold: the OUTRO stage sticks beneath
 * the compact rail and receives the SAME --cap-handoff-* variables written by
 * syncVisualHandoff(). No independent terminal animation exists.
 */
@media (min-width: 64.001rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities .capability-console__outro {
    min-height: clamp(46rem, 112svh, 76rem);
  }

  .section-capabilities[data-capability-handoff="continuous"]
  .capability-console__outro-stage {
    position: sticky;
    top: calc(var(--cap-dock-top) + var(--cap-dock-size) + 1.35rem);
    min-height: clamp(38rem, 76svh, 54rem);
    opacity: var(--cap-handoff-alpha, 0);
    transform: translate3d(var(--cap-handoff-shift, 0px), 0, 0);
    transition: none;
    will-change: opacity, transform;
  }
}

/*
 * Tablet/mobile keep the OUTRO in normal flow. It still receives the shared
 * opacity/shift handoff, but no extra sticky layer is introduced.
 */
@media (max-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities[data-capability-handoff="continuous"]
  .capability-console__outro-stage {
    opacity: var(--cap-handoff-alpha, 0);
    transform: translate3d(var(--cap-handoff-shift, 0px), 0, 0);
    transition: none;
  }

  .section-capabilities .capability-console__outro {
    min-height: clamp(30rem, 82svh, 50rem);
  }
}

/* The closing CTA is never motion-gated when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .section-capabilities .capability-console__outro {
    min-height: 0;
    margin-top: clamp(2rem, 6vw, 4rem);
  }

  .section-capabilities .capability-console__outro-stage {
    position: relative !important;
    top: auto !important;
    min-height: 0;
    padding: clamp(2.5rem, 8vw, 4.5rem) 0;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Mobile terminal density after 04 + OUTRO
   Scope: mobile only. Desktop keeps the approved sticky 04 -> OUTRO choreography.
   The final capability uses a compact runway and the OUTRO returns to normal
   flow so separator + CTA do not reserve an extra empty viewport.
   ========================================================================== */

@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"] {
    min-height: clamp(31rem, 82svh, 42rem);
  }

  .section-capabilities .capability-console__outro {
    min-height: 0;
  }

  .section-capabilities .capability-console__outro-stage {
    min-height: 0;
    gap: clamp(1.25rem, 5vw, 1.75rem);
    padding: clamp(2rem, 8vw, 3rem) 0 clamp(2.75rem, 10vw, 4rem);
  }
}

@media (max-width: 30rem) and (prefers-reduced-motion: no-preference) {
  .section-capabilities
  .capability-accordion__panel--sequence[data-capability-key="automation"] {
    min-height: clamp(29rem, 78svh, 38rem);
  }

  .section-capabilities .capability-console__outro-stage {
    gap: 1.15rem;
    padding: 1.75rem 0 2.75rem;
  }
}