.glass-icon {
  position: relative;
  display: inline-flex;
  width: var(--gi-size, 56px);
  height: var(--gi-size, 56px);
  perspective: 18em;
  transform-style: preserve-3d;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.glass-icon--lg { --gi-size: 64px; }
.glass-icon--sm { --gi-size: 42px; }

.glass-icon__back,
.glass-icon__front {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  transition: transform .35s cubic-bezier(0.83, 0, 0.17, 1);
  will-change: transform;
}
.glass-icon--sm .glass-icon__back,
.glass-icon--sm .glass-icon__front { border-radius: 11px; }

.glass-icon__back {
  transform: rotate(13deg);
  transform-origin: 100% 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.glass-icon__front {
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 80% 50%;
}

.glass-icon__svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46%;
  height: 46%;
  color: #fff;
}
.glass-icon__svg svg { width: 100%; height: 100%; display: block; }

/* brand color variants */
.glass-icon--blue   .glass-icon__back { background: linear-gradient(145deg, #3B82F6, #2563EB); }
.glass-icon--cyan   .glass-icon__back { background: linear-gradient(145deg, #22D3EE, #06B6D4); }
.glass-icon--accent .glass-icon__back { background: linear-gradient(145deg, var(--accent, #2563EB), var(--accent2, #06B6D4)); }
.glass-icon--indigo .glass-icon__back { background: linear-gradient(145deg, #6366F1, #4F46E5); }

/* hover / focus on the icon itself or its containing card */
.glass-icon:hover .glass-icon__back,
.glass-icon:focus-visible .glass-icon__back,
.service-card:hover .glass-icon__back,
.step-card:hover .glass-icon__back {
  transform: rotate(22deg) translate3d(-0.4em, -0.4em, 0.4em);
}
.glass-icon:hover .glass-icon__front,
.glass-icon:focus-visible .glass-icon__front,
.service-card:hover .glass-icon__front,
.step-card:hover .glass-icon__front {
  transform: translate3d(0, 0, 1.4em);
}

a.glass-icon { text-decoration: none; outline: none; }
a.glass-icon:focus-visible { outline: 2px solid var(--accent2, #06B6D4); outline-offset: 4px; border-radius: 14px; }

.footer-social { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .glass-icon__back,
  .glass-icon__front { transition: none; }
}