.card-icon {
  position: relative;
  display: grid !important;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(4, 217, 255, 0.24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(4, 217, 255, 0.1), rgba(57, 120, 255, 0.05));
  color: var(--cyan) !important;
  font: 500 22px/1 "Space Grotesk", sans-serif !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.16);
}

.card-icon::before,
.card-icon::after { content: ""; position: absolute; }

/* Search / discovery */
.card-icon[data-icon="⌕"]::before { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; transform: translate(-2px, -2px); }
.card-icon[data-icon="⌕"]::after { width: 8px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(7px, 7px) rotate(45deg); }

/* Document / content */
.card-icon[data-icon="≡"]::before { width: 17px; height: 21px; border: 2px solid currentColor; border-radius: 3px; }
.card-icon[data-icon="≡"]::after { width: 9px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 5px currentColor, 0 10px currentColor; }

/* Code / construction */
.card-icon[data-icon="◆"]::before { left: 13px; width: 8px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.card-icon[data-icon="◆"]::after { right: 13px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* Launch / growth */
.card-icon[data-icon="↗"]::before { width: 20px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.card-icon[data-icon="↗"]::after { top: 13px; right: 13px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }

/* Connected workflow */
.card-icon[data-icon="⇄"]::before { width: 22px; height: 2px; background: currentColor; }
.card-icon[data-icon="⇄"]::after { width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; background: #09101d; box-shadow: 15px -7px 0 -2px #09101d, 15px -7px 0 0 currentColor, 15px 7px 0 -2px #09101d, 15px 7px 0 0 currentColor; transform: translateX(-8px); }

/* Connected data */
.card-icon[data-icon="▦"]::before { width: 20px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }
.card-icon[data-icon="▦"]::after { width: 20px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }

/* Architecture */
.card-icon[data-icon="⌘"]::before { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(90deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%), linear-gradient(transparent 46%, currentColor 46%, currentColor 54%, transparent 54%); }
.card-icon[data-icon="⌘"]::after { width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 10px 0 currentColor, 0 10px currentColor, 10px 10px currentColor; transform: translate(-5px, -5px); }

/* Speed */
.card-icon[data-icon="⚡"]::before { width: 15px; height: 24px; background: currentColor; clip-path: polygon(55% 0, 100% 0, 69% 39%, 100% 39%, 28% 100%, 43% 55%, 9% 55%); }

/* Personalization controls */
.card-icon[data-icon="◫"]::before { width: 22px; height: 16px; background: linear-gradient(currentColor,currentColor) 0 2px/22px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 7px/22px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 12px/22px 2px no-repeat; }
.card-icon[data-icon="◫"]::after { width: 5px; height: 5px; border: 2px solid currentColor; border-radius: 50%; background: #09101d; box-shadow: 9px 5px 0 -2px #09101d, 9px 5px 0 0 currentColor, -1px 10px 0 -2px #09101d, -1px 10px 0 0 currentColor; transform: translate(-5px, -5px); }

/* Continuous evolution */
.card-icon[data-icon="↻"]::before { width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; transform: rotate(-25deg); }
.card-icon[data-icon="↻"]::after { top: 12px; right: 11px; width: 8px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 45%, 20% 100%); transform: rotate(18deg); }
.icon-cards h3 { margin-top: 38px; }
.steps.icon-cards h3 { margin-top: 38px; }
.icon-cards article { text-align: center; }
.icon-cards .card-icon { margin-inline: auto; }

@media (max-width: 580px) {
  .card-icon { margin-inline: auto; }
}

/* Shared main-site pattern for label, title and description cards */
#entrega .cards,
#aplicacoes .cards { gap: 18px; }

#entrega .cards article,
#aplicacoes .cards article {
  min-height: 304px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: #0d1121;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#entrega .cards article:hover,
#aplicacoes .cards article:hover {
  transform: translateY(-4px);
  border-color: rgba(4, 217, 255, 0.22);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.25);
}

#entrega .cards article > span,
#aplicacoes .cards article > span {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

#entrega .cards h3,
#aplicacoes .cards h3 {
  margin: 68px 0 18px;
  color: #edf0f8;
  font: 600 23px/1.25 "Space Grotesk";
}

#entrega .cards p,
#aplicacoes .cards p {
  margin: 0;
  color: #959db0;
  font-size: 13px;
  line-height: 1.72;
}

@media (max-width: 900px) {
  #entrega .cards article,
  #aplicacoes .cards article { min-height: 240px; }

  #entrega .cards h3,
  #aplicacoes .cards h3 { margin-top: 45px; }
}

@media (max-width: 580px) {
  #entrega .cards article,
  #aplicacoes .cards article { min-height: 0; padding: 26px; }

  #entrega .cards h3,
  #aplicacoes .cards h3 { margin-top: 38px; font-size: 21px; }
}