.capability-passport {
  position: relative;
  scroll-margin-top: 86px;
  margin-top: 48px;
  padding: 28px 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 5%, rgba(239,202,113,.15), transparent 28%),
    linear-gradient(150deg, rgba(13,18,27,.97), rgba(4,6,11,.98));
  box-shadow: 0 34px 90px rgba(0,0,0,.38);
  color: #f7f4ed;
  isolation: isolate;
}

.capability-passport::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(#000, transparent 78%);
  content: "";
}

.capability-passport__head { display: grid; gap: 12px; }
.capability-passport__head > p { margin: 0; color: #f2d48d; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.capability-passport__head h2 { margin: 0; font-size: clamp(32px, 9vw, 58px); font-weight: 380; line-height: .96; letter-spacing: -.045em; }
.capability-passport__head h2 em { color: #fff0b7; font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.capability-passport__head > div { display: flex; gap: 10px; align-items: center; width: max-content; margin-top: 4px; padding: 9px 12px; border: 1px solid rgba(239,202,113,.28); border-radius: 14px; background: rgba(239,202,113,.055); }
.capability-passport__head > div strong { color: #fff0b7; font-size: 30px; font-weight: 400; line-height: 1; }
.capability-passport__head > div span { display: grid; color: #c9c3b7; font-size: 10px; line-height: 1.1; }
.capability-passport__head > div small { margin-top: 3px; color: #7f8692; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.capability-passport__explanation { max-width: 650px; margin: 18px 0 20px; color: #a8aeb8; font-size: 11px; line-height: 1.55; }
.capability-passport__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.capability-passport__item { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 8px; min-width: 0; min-height: 66px; align-items: center; padding: 10px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(255,255,255,.018); color: #656b75; text-decoration: none; }
.capability-passport__item.is-applied { grid-template-columns: 28px minmax(0,1fr) 14px; border-color: rgba(239,202,113,.34); background: linear-gradient(115deg, rgba(239,202,113,.075), rgba(255,255,255,.025), rgba(239,202,113,.09)); background-size: 220% 100%; color: #eee9df; box-shadow: inset 0 1px rgba(255,255,255,.055); animation: capability-signal 7s ease-in-out infinite; }
.capability-passport__mark { display: grid; width: 27px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; color: #5f6570; font-size: 11px; }
.is-applied .capability-passport__mark { border-color: rgba(255,237,178,.58); background: linear-gradient(145deg,#f4d88e,#b77b25); color: #171007; box-shadow: 0 0 18px rgba(239,202,113,.18); font-weight: 900; }
.capability-passport__copy { display: grid; min-width: 0; gap: 4px; }
.capability-passport__copy strong { overflow-wrap: normal; word-break: normal; font-size: 9px; font-weight: 720; line-height: 1.18; }
.capability-passport__copy small { color: #565c66; font-size: 7px; line-height: 1.25; }
.is-applied .capability-passport__copy small { color: #a29a8d; }
.capability-passport__route { color: #f2d48d; font-size: 12px; }
a.capability-passport__item { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.capability-passport__item:active { transform: scale(.975); border-color: rgba(255,237,178,.72); box-shadow: 0 0 24px rgba(239,202,113,.1); }

@keyframes capability-signal { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

@media (min-width: 760px) {
  .capability-passport { padding: 40px; }
  .capability-passport__head { grid-template-columns: 1fr auto; }
  .capability-passport__head > p { grid-column: 1 / -1; }
  .capability-passport__head > div { grid-column: 2; grid-row: 2; align-self: end; }
  .capability-passport__list { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .capability-passport__item.is-applied { animation: none; }
}