/* Interactive capabilities map */
.capabilities-map-section {
  position: relative;
  overflow: hidden;
  padding: 104px 0 88px;
  background: #fff;
}

.capabilities-map-header {
  max-width: 1120px;
  margin: 0 auto 48px;
  text-align: center;
}

.capabilities-map-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6752e8;
}

.capabilities-map-header h2 {
  margin: 15px 0 0;
  font-size: clamp(42px, 4.7vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  color: #111319;
}

.capabilities-map-header p {
  max-width: 900px;
  margin: 20px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: #667085;
}

.capabilities-map-shell {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}

.capabilities-map {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(6, 132px);
  grid-auto-flow: row dense;
  gap: 1px;
  background: #e7e9ed;
}

.capability-card {
  position: relative;
  min-width: 0;
  border: 0;
  background: #fff;
  color: #34405a;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.capability-card::after {
  display: none;
}

.capability-card:hover {
  z-index: 2;
  color: #111319;
  background: #fafaff;
}

.capability-card:focus-visible {
  z-index: 4;
  outline: 3px solid rgba(103, 82, 232, .45);
  outline-offset: -3px;
}

.capability-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 7px 11px;
  text-align: center;
}

.capability-tool-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #47536d;
  transition: color .22s ease, transform .22s ease;
}

.capability-custom-icon {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capability-dialog-icon .capability-custom-icon {
  width: 29px;
  height: 29px;
}

.capability-tool:hover .capability-tool-icon {
  color: var(--card-accent, #6752e8);
  transform: translateY(-2px) scale(1.06);
}

.capability-tool-title {
  max-width: 112px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.28;
  text-wrap: balance;
}

.capability-main {
  --card-accent: #6752e8;
  --card-accent-rgb: 103, 82, 232;
  order: -1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(var(--card-accent-rgb), .14);
  background:
    radial-gradient(circle at 85% 12%, rgba(var(--card-accent-rgb), .18), transparent 46%),
    linear-gradient(150deg, rgba(var(--card-accent-rgb), .1), #fff 68%);
  box-shadow: 0 0 46px -6px rgba(var(--card-accent-rgb), .38), 0 10px 22px -14px rgba(17,19,25,.22);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}

.capability-main:hover {
  background:
    radial-gradient(circle at 85% 12%, rgba(var(--card-accent-rgb), .24), transparent 48%),
    linear-gradient(150deg, rgba(var(--card-accent-rgb), .13), #fff 70%);
  border-color: rgba(var(--card-accent-rgb), .26);
  box-shadow: 0 0 56px -4px rgba(var(--card-accent-rgb), .46), 0 16px 30px -14px rgba(17,19,25,.28);
  transform: translateY(-3px);
}

.capability-main[data-feature-id="0"] { grid-column: 4 / 6; grid-row: 2 / 4; }
.capability-main[data-feature-id="12"] { grid-column: 6 / 8; grid-row: 2 / 4; }
.capability-main[data-feature-id="24"] { grid-column: 4 / 6; grid-row: 4 / 6; }
.capability-main[data-feature-id="36"] { grid-column: 6 / 8; grid-row: 4 / 6; }

.capability-main.theme-content,
.capability-dialog[data-theme="content"] { --card-accent: #199af4; --card-accent-rgb: 25, 154, 244; }
.capability-main.theme-traffic,
.capability-dialog[data-theme="traffic"] { --card-accent: #20b988; --card-accent-rgb: 32, 185, 136; }
.capability-main.theme-competitors,
.capability-dialog[data-theme="competitors"] { --card-accent: #ff7b21; --card-accent-rgb: 255, 123, 33; }
.capability-main.theme-ai,
.capability-dialog[data-theme="ai"] { --card-accent: #6752e8; --card-accent-rgb: 103, 82, 232; }

.capability-main-preview {
  position: relative;
  flex: 1;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid rgba(var(--card-accent-rgb), .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(31,38,58,.04), 0 16px 34px -10px rgba(31, 38, 58, .16);
}

.capability-main-label {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr) 20px;
  gap: 9px;
  align-items: center;
  padding-top: 13px;
}

.capability-main-label > span:first-child {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--card-accent), rgba(var(--card-accent-rgb), .72));
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(17,19,25,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

.capability-main-label b {
  overflow: hidden;
  font-family: "Manrope", "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #17204a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-main-arrow {
  color: var(--card-accent);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s ease, transform .2s ease;
}

.capability-main:hover .capability-main-arrow { opacity: 1; transform: translateX(0); }

.map-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 27px;
  padding: 0 10px;
  border-bottom: 1px solid #edf0f4;
  background: rgba(248,249,252,.6);
  font-size: 6.5px;
  font-weight: 800;
  color: #58647a;
}

.map-preview-head i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 8px 0 0 rgba(var(--card-accent-rgb), .3), 16px 0 0 rgba(var(--card-accent-rgb), .14);
}

.map-preview-body { padding: 11px 10px; }
.map-preview-kicker { font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--card-accent); }
.map-preview-title { margin-top: 4px; font-size: 8px; font-weight: 800; color: #1a2032; letter-spacing: -.01em; }
.map-preview-lines { display: grid; gap: 4px; margin-top: 7px; }
.map-preview-lines i { display: block; height: 4px; border-radius: 99px; background: #edf0f5; }
.map-preview-lines i:nth-child(1) { width: 90%; }
.map-preview-lines i:nth-child(2) { width: 70%; }
.map-preview-lines i:nth-child(3) { width: 82%; }
.map-preview-chart { width: 100%; height: 41px; margin-top: 7px; }
.map-preview-chart path { fill: none; stroke: var(--card-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(var(--card-accent-rgb), .3)); }
.map-preview-chart path:first-child { stroke: #edf0f4; stroke-width: 1; filter: none; }
.map-preview-chips { display: flex; gap: 4px; margin-top: 8px; }
.map-preview-chips span { padding: 3px 6px; border-radius: 6px; background: rgba(var(--card-accent-rgb), .12); font-size: 5.5px; font-weight: 800; color: var(--card-accent); box-shadow: inset 0 0 0 1px rgba(var(--card-accent-rgb), .12); }
.map-preview-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.map-preview-panel { padding: 7px; border: 1px solid #edf0f4; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(17,19,25,.03); }
.map-preview-panel b { display: block; font-size: 6px; color: #34405a; }
.map-preview-panel strong { display: block; margin-top: 5px; font-family: "Manrope","Inter",Arial,sans-serif; font-size: 11.5px; letter-spacing: -.02em; color: var(--card-accent); }
.map-preview-bars { display: flex; height: 38px; align-items: end; gap: 4px; margin-top: 8px; }
.map-preview-bars i { width: 11%; min-height: 8px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--card-accent), rgba(var(--card-accent-rgb), .3)); box-shadow: 0 2px 5px -2px rgba(var(--card-accent-rgb), .5); }
.map-preview-list { display: grid; gap: 5px; margin-top: 8px; }
.map-preview-list span { display: grid; grid-template-columns: 12px 1fr 28px; gap: 5px; align-items: center; padding: 5px; border-radius: 7px; background: #f7f8fa; font-size: 5.5px; font-weight: 700; color: #48546a; }
.map-preview-list span::before { content: ''; width: 12px; height: 12px; border-radius: 5px; background: linear-gradient(150deg, rgba(var(--card-accent-rgb), .3), rgba(var(--card-accent-rgb), .12)); }
.map-preview-list em { font-style: normal; text-align: right; color: var(--card-accent); }

.capabilities-map-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 0;
  font-size: 12px;
  color: #8a93a3;
}

body.modal-open { overflow: hidden; }

.capability-dialog {
  --card-accent: #6752e8;
  --card-accent-rgb: 103, 82, 232;
  width: min(680px, calc(100% - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
  border: 0;
  border-radius: 28px;
  padding: 0;
  background: transparent;
  color: #111319;
  box-shadow: 0 34px 110px rgba(17, 19, 25, .28);
}

.capability-dialog::backdrop {
  background: rgba(14, 16, 22, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.capability-dialog[open] { animation: capabilityDialogIn .28s cubic-bezier(.16, 1, .3, 1); }
.capability-dialog[open]::backdrop { animation: capabilityBackdropIn .22s ease-out; }

@keyframes capabilityDialogIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes capabilityBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.capability-dialog-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: inherit;
  background:
    radial-gradient(circle at 92% 0, rgba(var(--card-accent-rgb), .15), transparent 35%),
    #fff;
}

.capability-dialog-close-form { position: absolute; z-index: 3; right: 18px; top: 18px; }
.capability-dialog-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #576174;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.capability-dialog-close:hover { background: #111319; color: #fff; transform: rotate(4deg); }
.capability-dialog-close:focus-visible { outline: 3px solid rgba(var(--card-accent-rgb), .3); outline-offset: 2px; }

.capability-dialog-accent { display: flex; align-items: center; gap: 11px; padding-right: 52px; }
.capability-dialog-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; background: rgba(var(--card-accent-rgb), .12); color: var(--card-accent); }
.capability-dialog-category { font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--card-accent); }
.capability-dialog h3 { max-width: 560px; margin: 23px 0 0; font-size: clamp(31px, 5vw, 46px); font-weight: 700; line-height: 1.04; }
.capability-dialog-description { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: #667085; }
.capability-dialog-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.capability-dialog-result { min-height: 96px; padding: 14px; border: 1px solid #e7e9ef; border-radius: 15px; background: rgba(248, 249, 251, .86); }
.capability-dialog-result span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: rgba(var(--card-accent-rgb), .11); color: var(--card-accent); }
.capability-dialog-result b { display: block; margin-top: 10px; font-size: 12px; line-height: 1.4; color: #34405a; }
.capability-dialog-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-top: 26px; padding: 20px; border-radius: 19px; background: #111319; color: #fff; }
.capability-dialog-cta b { display: block; font-size: 15px; }
.capability-dialog-cta p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.capability-dialog-cta a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; border-radius: 999px; padding: 0 18px; background: var(--card-accent); font-size: 12px; font-weight: 800; color: #fff; transition: filter .2s ease, transform .2s ease; }
.capability-dialog-cta a:hover { filter: brightness(1.08); transform: translateY(-1px); }
.capability-dialog-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 1119px) {
  .capabilities-map { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 140px; }
  .capability-main[data-feature-id] { grid-column: span 2 !important; grid-row: span 2 !important; }
  .capability-tool-title { max-width: 150px; font-size: 12px; }
}

@media (max-width: 700px) {
  .capabilities-map-section { padding: 72px 0 64px; }
  .capabilities-map-header { margin-bottom: 34px; }
  .capabilities-map-kicker { font-size: 11px; }
  .capabilities-map-header h2 { font-size: clamp(36px, 11vw, 48px); }
  .capabilities-map-header h2 br { display: none; }
  .capabilities-map-header p { font-size: 15px; line-height: 1.6; }
  .capabilities-map-shell {
    border-radius: 0;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  }
  .capabilities-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 124px; }
  .capability-main[data-feature-id] { grid-column: span 2 !important; grid-row: span 2 !important; }
  .capability-main { padding: 13px; }
  .capability-main-preview { min-height: 164px; }
  .capability-main-label b { font-size: 16px; }
  .capability-tool { padding-inline: 10px; }
  .capability-tool-title { font-size: 11.5px; }
  .capabilities-map-hint { align-items: flex-start; text-align: center; }
  .capability-dialog { width: min(100% - 20px, 680px); max-height: calc(100vh - 20px); border-radius: 22px; }
  .capability-dialog-card { padding: 26px 21px 22px; }
  .capability-dialog-close-form { right: 13px; top: 13px; }
  .capability-dialog-close { width: 38px; height: 38px; }
  .capability-dialog-icon { width: 44px; height: 44px; border-radius: 13px; }
  .capability-dialog-category { font-size: 10px; }
  .capability-dialog h3 { margin-top: 19px; font-size: 32px; }
  .capability-dialog-description { margin-top: 14px; font-size: 14px; line-height: 1.65; }
  .capability-dialog-results { grid-template-columns: 1fr; gap: 7px; margin-top: 18px; }
  .capability-dialog-result { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; min-height: 0; padding: 11px 12px; }
  .capability-dialog-result b { margin: 0; }
  .capability-dialog-cta { grid-template-columns: 1fr; gap: 15px; margin-top: 18px; padding: 17px; }
  .capability-dialog-cta a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .capability-tool-icon,
  .capability-main-arrow,
  .capability-dialog[open],
  .capability-dialog[open]::backdrop { animation: none !important; transition: none !important; }
}