/* SAFA ONE — liquid-glass accents.
   Applied ONLY over imagery / scrolling content, so the clean light layout is
   never deformed. Visual-only: no box-model / layout changes. Override via !important.
   Inline-style anchors use the browser-normalized form (space after :/,). */

/* 1) STICKY HEADER -> refined liquid glass (sits over scrolling content) */
header {
  background: rgba(255, 255, 255, .66) !important;
  -webkit-backdrop-filter: saturate(185%) blur(22px) !important;
  backdrop-filter: saturate(185%) blur(22px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px -22px rgba(60, 30, 90, .35) !important;
}

/* 2) HERO SECONDARY CTA (last button in the hero CTA row, over the 3D image) -> clear glass.
      The primary CTA stays solid for a crisp hierarchy. */
[style*="gap: 13px"] > a:last-child {
  background: rgba(255, 255, 255, .34) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 22px -12px rgba(60, 30, 90, .4) !important;
}
[style*="gap: 13px"] > a:last-child:hover { background: rgba(255, 255, 255, .5) !important; }

/* 3) HOVER GLASS CHIP on image cards — Company carousel + Platform modules.
      Resting state is untouched; the chip only fades in over the picture on hover. */
.svc-track > div > div:first-child,
#modules a > div:first-child { position: relative !important; }

.svc-track > div > div:first-child::after,
#modules a > div:first-child::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%;
  background-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 20px -10px rgba(60, 30, 90, .45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 11L11 5M6 5h5v5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  opacity: 0; transform: translateY(-8px) scale(.9);
  transition: opacity .32s ease, transform .32s ease; pointer-events: none;
}
.svc-track > div:hover > div:first-child::after,
#modules a:hover > div:first-child::after { opacity: 1; transform: none; }

/* 4) FEATURE ICON BADGES -> glossy liquid-glass chips.
      These sit on flat cards (nothing to refract), so the glass look comes from a
      gradient fill + specular highlight + soft depth rather than backdrop blur. */
.ic-badge {
  position: relative !important;
  background: linear-gradient(140deg, rgba(255, 255, 255, .92), rgba(236, 225, 250, .6)) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, .95),
    inset 0 -3px 6px rgba(112, 52, 192, .10),
    0 10px 20px -10px rgba(112, 52, 192, .5) !important;
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  overflow: hidden;
}
.ic-badge::before {           /* diagonal specular sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 44%);
}
.ic-glyph { position: relative; z-index: 1; }