.manga-icon {
  --icon-ink: var(--product-accent-2, #6657df);
  --icon-soft: var(--product-soft, #eafbf5);
  position: relative;
  isolation: isolate;
  display: grid !important;
  width: 74px !important;
  height: 68px !important;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--icon-ink) 16%, transparent);
  border-radius: 23px 23px 23px 10px !important;
  background:
    radial-gradient(circle at 78% 19%, color-mix(in srgb, var(--icon-ink) 22%, transparent) 0 5px, transparent 6px),
    linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--icon-soft) 88%, #fff) 100%) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--icon-ink) 12%, transparent), inset 0 0 0 4px rgba(255,255,255,.45);
  overflow: hidden;
  transform: rotate(-1.5deg);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}

.manga-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--icon-ink) 22%, transparent) .8px, transparent .8px);
  background-size: 7px 7px;
  mask-image: linear-gradient(135deg, transparent 30%, #000);
  opacity: .65;
}

.manga-icon::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--icon-ink);
  transform: rotate(45deg);
  opacity: .35;
}

.manga-icon-art {
  position: relative;
  z-index: 2;
  width: 47px;
  height: 47px;
  color: var(--icon-ink);
  filter: drop-shadow(0 3px 3px rgba(20, 31, 61, .08));
}

.problem-card:nth-child(2) .manga-icon,
.standalone-feature-card:nth-child(2) .manga-icon,
.standalone-feature-card:nth-child(5) .manga-icon,
.capability-card:nth-child(2) .manga-icon,
.company-capability-grid article:nth-child(2) .manga-icon { transform: rotate(1.8deg); }

.problem-card:nth-child(3) .manga-icon,
.standalone-feature-card:nth-child(3) .manga-icon,
.standalone-feature-card:nth-child(6) .manga-icon,
.capability-card:nth-child(3) .manga-icon,
.company-capability-grid article:nth-child(3) .manga-icon { transform: rotate(-.5deg); }

.problem-card:hover .manga-icon,
.standalone-feature-card:hover .manga-icon,
.capability-card:hover .manga-icon,
.company-capability-grid article:hover .manga-icon,
.mission-cards article:hover .manga-icon {
  transform: translateY(-5px) rotate(0deg) scale(1.04);
  box-shadow: 0 18px 30px color-mix(in srgb, var(--icon-ink) 18%, transparent), inset 0 0 0 4px rgba(255,255,255,.52);
}

.problem-icon.manga-icon,
.feature-icon.manga-icon { margin-top: 19px; color: inherit; font-size: 0; }

.capability-symbol.manga-icon,
.company-capability-icon.manga-icon,
.mission-cards i.manga-icon { margin: 0; font-size: 0; font-style: normal; }

.company-capability-icon.manga-icon {
  --icon-soft: #17284f;
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)) !important;
  box-shadow: 0 14px 30px rgba(0,4,20,.28), inset 0 0 0 4px rgba(255,255,255,.025);
}

.company-capability-icon.manga-icon::before { opacity: .32; }
.company-capability-icon.manga-icon .manga-icon-art { color: inherit; }

@media (max-width: 620px) {
  .manga-icon { width: 66px !important; height: 61px !important; border-radius: 20px 20px 20px 9px !important; }
  .manga-icon-art { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .manga-icon { transition: none; }
}


/* Page-level compact icon variants */
.principle-mini-icon {
  --icon-ink: #6355d9;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(99,85,217,.13);
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff, #eafbf5) !important;
  box-shadow: 0 8px 18px rgba(47,56,89,.08) !important;
  font-size: 0 !important;
  font-style: normal;
}

.principle-mini-icon .manga-icon-art { width: 29px; height: 29px; color: var(--icon-ink); }
.shared-principles .principle-mini-icon { margin: 0 auto 9px; }

.collaboration-promise > .promise-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(124,230,186,.22);
  border-radius: 14px;
  background: rgba(124,230,186,.08);
}

.collaboration-promise .manga-icon-art { width: 31px; height: 31px; color: var(--mint); }
.mission-cards i.manga-icon { --icon-ink: #5c50cd; --icon-soft: #eafbf5; }
.science-cap.manga-icon { --icon-ink: #65e1df; }
.story-cap.manga-icon { --icon-ink: #ffb2a8; }
.ai-cap.manga-icon { --icon-ink: #b9b0ff; }
.engineering-cap.manga-icon { --icon-ink: #7ce6ba; }