/* Icon design system — Lucide outline SVGs for cards */

:root {
  --icon-stroke: 2;
  --icon-card-stroke: 1.45;
  --icon-accent: #e8457a;
  --icon-fg: rgba(244, 244, 245, 0.72);
  --card-pad: 1.45rem 1.4rem 1.5rem;
  --card-radius: var(--radius-xl);
  --card-icon: 7.5rem;
}

/* UI chrome still uses inline SVG */
.status__benefit svg,
.status__note svg,
.status__metric-icon svg,
.status__qr-icon svg,
.hero__trust-item svg,
.faq__icon svg,
.floating-actions__btn svg,
.modal__close svg,
.modal__success-icon svg,
.btn svg,
.navbar__toggle svg,
.contact__map-pin svg,
.contact__map-action svg,
.hero__scroll-hint svg {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card Lucide icons — size controlled by art containers */
.card-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-card-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    filter var(--duration-normal) var(--ease-out);
}

.svc__art,
.process__art,
.contact__item-art {
  color: var(--icon-fg);
}

/* Services — compact top icons (size set in services.css) */
.svc__art .card-icon {
  width: 100%;
  height: auto;
  filter: none;
  opacity: 0.9;
}

.process__art {
  width: 5.85rem;
  max-width: 5.85rem;
}

.contact__item-art {
  width: 6.5rem;
  max-width: 6.5rem;
}

.contact__item-art .card-icon {
  opacity: 0.78;
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover .card-icon,
  .process__step:hover .card-icon,
  a.contact__item:hover .card-icon {
    opacity: 1;
  }

  .svc:hover .card-icon {
    transform: translateY(-2px);
  }
}

/* PROCESS — icons slightly lower */
.process__art {
  transform: translateY(0.55rem);
}

.process__top {
  align-items: flex-start;
  padding-top: 0.15rem;
}

/* CONTACT — email less dominant */
.contact__item--email .contact__item-art {
  width: 5.5rem;
  max-width: 5.5rem;
  top: 1.45rem;
  right: 0.85rem;
}

.contact__item--email .card-icon {
  transform: scale(0.85);
  opacity: 0.72;
}

@media (hover: hover) and (pointer: fine) {
  .contact__item--email:hover .card-icon {
    transform: scale(0.85) translateY(-2px);
    opacity: 0.9;
  }

  .process__step:hover .process__art {
    transform: translateY(0.35rem);
  }
}