:root {
  --cap-bg: #f5f7fb;
  --cap-surface: #ffffff;
  --cap-surface-blue: #edf2ff;
  --cap-navy: #071522;
  --cap-blue: #3157ff;
  --cap-blue-dark: #1e3bbf;
  --cap-muted: rgba(7, 21, 34, .62);
  --cap-faint: rgba(7, 21, 34, .46);
  --cap-border: rgba(7, 21, 34, .12);
}

.capabilities {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(96px, 11vw, 164px);
  background: var(--cap-bg);
  color: var(--cap-navy);
  container-type: inline-size;
  isolation: isolate;
}
.capabilities::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 5%, rgba(49, 87, 255, .1), transparent 25%),
    radial-gradient(circle at 7% 84%, rgba(49, 87, 255, .055), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, .7), transparent 35%);
}
.capabilities::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(42vw, 620px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(49, 87, 255, .5));
}
.cap-shell {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cap-intro {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.cap-kicker {
  width: max-content;
  max-width: 100%;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(49, 87, 255, .18);
  border-radius: 999px;
  color: var(--cap-blue-dark);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 8px 22px rgba(7, 21, 34, .04);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cap-kicker-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cap-blue);
  box-shadow: 0 0 0 4px rgba(49, 87, 255, .12);
}
.cap-heading {
  justify-self: end;
  width: min(100%, 850px);
}
.cap-heading h2 {
  max-width: 850px;
  margin: 0;
  color: var(--cap-navy);
  font-size: clamp(2.85rem, 5.55vw, 5.8rem);
  font-weight: 560;
  line-height: .91;
  letter-spacing: -.07em;
  text-wrap: balance;
}
.cap-heading p {
  max-width: 590px;
  margin: 24px 0 0;
  color: var(--cap-muted);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 430;
  line-height: 1.52;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(248px, auto);
  grid-auto-flow: dense;
  gap: 13px;
}
.capability-card {
  position: relative;
  min-width: 0;
  min-height: 248px;
  padding: clamp(22px, 2.35vw, 34px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cap-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(7, 21, 34, .04);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .32s var(--ease-standard), box-shadow .32s ease, border-color .28s ease;
}
.capability-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(49, 87, 255, .06), transparent 38%);
  opacity: 0;
  transition: opacity .3s ease;
}
.capability-card:hover,
.capability-card:focus-within {
  z-index: 2;
  border-color: rgba(49, 87, 255, .3);
  box-shadow: 0 18px 40px rgba(7, 21, 34, .11);
  transform: translateY(-4px);
}
.capability-card:hover::before,
.capability-card:focus-within::before { opacity: 1; }
.capability-card-feature {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 510px;
  border-color: transparent;
  color: #f6f9ff;
  background: linear-gradient(125deg, #071522 0%, #0c2745 58%, #2045bf 100%);
  box-shadow: 0 16px 42px rgba(7, 21, 34, .16);
}
.capability-card-feature::before {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 15%, rgba(142, 161, 255, .2), transparent 28%),
    linear-gradient(125deg, transparent 42%, rgba(49, 87, 255, .22));
}
.capability-card-feature:hover,
.capability-card-feature:focus-within {
  border-color: rgba(142, 161, 255, .65);
  box-shadow: 0 24px 54px rgba(7, 21, 34, .23);
}
.capability-card-wide {
  grid-column: span 2;
  min-height: 248px;
  background: var(--cap-surface-blue);
}
.capability-card-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.capability-index {
  display: none;
}
.capability-card-top { justify-content: flex-end; }
.capability-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(49, 87, 255, .18);
  border-radius: 12px;
  color: var(--cap-blue);
  background: rgba(255, 255, 255, .74);
  transition: color .25s ease, background-color .25s ease, transform .32s var(--ease-standard);
}
.capability-card:hover .capability-icon,
.capability-card:focus-within .capability-icon {
  color: #fff;
  background: var(--cap-blue);
  transform: translateY(-2px);
}
.capability-card-feature .capability-icon {
  border-color: rgba(255, 255, 255, .24);
  color: #a9b9ff;
  background: rgba(255, 255, 255, .08);
}
.capability-card-feature:hover .capability-icon,
.capability-card-feature:focus-within .capability-icon { color: var(--cap-navy); background: #fff; }
.capability-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.capability-card-copy {
  position: relative;
  z-index: 3;
  max-width: 310px;
  margin-top: auto;
  padding: 0 28px 30px 0;
}
.capability-card-feature .capability-card-copy,
.capability-card-wide .capability-card-copy { max-width: 50%; }
.capability-card h3 {
  margin: 0;
  color: var(--cap-navy);
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.048em;
  text-wrap: balance;
}
.capability-card-feature h3 {
  color: #fff;
  font-size: clamp(2rem, 3.15vw, 3.55rem);
}
.capability-card p {
  max-width: 34em;
  margin: 13px 0 0;
  color: var(--cap-muted);
  font-size: clamp(12.5px, .9vw, 14px);
  font-weight: 430;
  line-height: 1.46;
  letter-spacing: -.006em;
  text-wrap: pretty;
}
.capability-card-feature p { color: rgba(246, 249, 255, .72); }
.capability-card-arrow {
  position: absolute;
  right: clamp(20px, 2.35vw, 34px);
  bottom: clamp(20px, 2.35vw, 34px);
  z-index: 4;
  color: var(--cap-blue);
  font-size: 22px;
  font-weight: 450;
  line-height: 1;
  transition: transform .32s var(--ease-standard), color .25s ease;
}
.capability-card-feature .capability-card-arrow { color: #a9b9ff; }
.capability-card:hover .capability-card-arrow,
.capability-card:focus-within .capability-card-arrow { transform: translate(4px, -3px); }

.capability-card-art {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.capability-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(7, 21, 34, .04), rgba(7, 21, 34, .2) 64%, rgba(7, 21, 34, .64));
}
.capability-card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(.62) saturate(.72) contrast(1.05);
  transform: scale(1.02);
  transition: transform .8s var(--ease-standard), filter .8s ease;
}
.capability-card:hover .capability-card-art img,
.capability-card:focus-within .capability-card-art img {
  filter: grayscale(.22) saturate(.9) contrast(1.05);
  transform: scale(1.08);
}
.capability-card-art-feature {
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  border-radius: 0 20px 20px 0;
}
.capability-card-art-feature::after {
  background: linear-gradient(90deg, #071522 0%, rgba(7, 21, 34, .72) 24%, rgba(7, 21, 34, .06) 75%), linear-gradient(180deg, rgba(7, 21, 34, .02), rgba(7, 21, 34, .42));
}
.capability-art-meter {
  position: absolute;
  right: 24px;
  bottom: 25px;
  z-index: 2;
  width: 82px;
  height: 35px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 9px;
  display: flex;
  align-items: end;
  gap: 4px;
  background: rgba(7, 21, 34, .38);
  backdrop-filter: blur(10px);
}
.capability-art-meter span {
  width: 10px;
  height: 9px;
  display: block;
  background: rgba(255, 255, 255, .78);
}
.capability-art-meter span:nth-child(2) { height: 15px; }
.capability-art-meter span:nth-child(3) { height: 23px; background: #8ea1ff; }
.capability-art-meter span:nth-child(4) { height: 18px; }
.capability-card-art-wide {
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  border-radius: 0 20px 20px 0;
}
.capability-card-art-wide::after {
  background: linear-gradient(90deg, #edf2ff 0%, rgba(237, 242, 255, .14) 44%, rgba(7, 21, 34, .2)), linear-gradient(180deg, rgba(7, 21, 34, .02), rgba(7, 21, 34, .4));
}
.capability-art-scan {
  position: absolute;
  top: 27%;
  left: 21%;
  right: 10%;
  height: 1px;
  z-index: 2;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 35px rgba(255, 255, 255, .42), 0 70px rgba(255, 255, 255, .22);
  transform: rotate(-8deg);
}

@container (max-width: 1100px) {
  .cap-intro { grid-template-columns: minmax(155px, .34fr) minmax(0, 1fr); gap: 34px; }
  .cap-heading h2 { font-size: clamp(2.8rem, 6.2vw, 5.2rem); }
  .capability-card { padding: 24px; }
  .capability-card-feature { min-height: 470px; }
}

@media (max-width: 899px) {
  .capabilities { padding-block: clamp(86px, 13vw, 126px); }
  .cap-intro { display: block; margin-bottom: 48px; }
  .cap-kicker { margin-bottom: 22px; }
  .cap-heading { width: 100%; }
  .cap-heading h2 { max-width: 680px; }
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(232px, auto);
  }
  .capability-card-feature {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 400px;
  }
  .capability-card-wide {
    grid-column: span 2;
    min-height: 274px;
  }
  .capability-card-feature .capability-card-copy,
  .capability-card-wide .capability-card-copy { max-width: 47%; }
  .capability-card h3 { font-size: clamp(1.45rem, 3.2vw, 2rem); }
  .capability-card-feature h3 { font-size: clamp(2.15rem, 5.4vw, 3.45rem); }
}

@media (max-width: 767px) {
  .capabilities { padding-block: var(--section-y); }
  .cap-intro { margin-bottom: 38px; }
  .cap-kicker { font-size: 9px; }
  .cap-heading h2 {
    max-width: 440px;
    font-size: clamp(2.65rem, 11.7vw, 4rem);
    line-height: .94;
  }
  .cap-heading p {
    max-width: 360px;
    margin-top: 17px;
    font-size: clamp(13.5px, 3.9vw, 14.5px);
    line-height: 1.48;
  }
  .capability-grid { grid-template-columns: 1fr; gap: 11px; }
  .capability-card,
  .capability-card-feature,
  .capability-card-wide {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 232px;
    padding: 20px;
    border-radius: 17px;
  }
  .capability-card-feature { min-height: 420px; }
  .capability-card-wide { min-height: 292px; }
  .capability-card-feature .capability-card-copy,
  .capability-card-wide .capability-card-copy { max-width: 72%; }
  .capability-card-feature h3 { font-size: clamp(2.2rem, 10.2vw, 3.4rem); }
  .capability-card h3 { font-size: clamp(1.6rem, 6.6vw, 2.1rem); }
  .capability-card p { font-size: 13px; }
  .capability-card-art-feature {
    top: auto;
    right: 0;
    bottom: 0;
    width: 58%;
    height: 58%;
    border-radius: 0 0 17px 0;
  }
  .capability-card-art-feature::after { background: linear-gradient(180deg, #071522 0%, rgba(7, 21, 34, .22) 60%), linear-gradient(90deg, rgba(7, 21, 34, .18), rgba(7, 21, 34, .52)); }
  .capability-art-meter { right: 14px; bottom: 15px; transform: scale(.82); transform-origin: bottom right; }
  .capability-card-art-wide { width: 56%; border-radius: 0 0 17px 0; }
  .capability-card-wide .capability-card-copy { max-width: 65%; }
}

@media (max-width: 430px) {
  .capability-card,
  .capability-card-feature,
  .capability-card-wide { padding: 18px; }
  .capability-card-feature { min-height: 402px; }
  .capability-card-wide { min-height: 284px; }
  .capability-card-copy { padding-right: 22px; }
  .capability-card-feature .capability-card-copy { max-width: 78%; }
  .capability-card-wide .capability-card-copy { max-width: 68%; }
  .capability-card-arrow { right: 18px; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .capability-card-arrow,
  .capability-icon,
  .capability-card-art img { transition: none !important; }
}