/* ========================================================================= */
/* SpecularButton Styles — Strictly Scoped to Hero Service Buttons           */
/* Section: Homepage Hero "WHAT CAN I CREATE FOR YOU?" (.service-link-grid-top) */
/* ========================================================================= */

.service-link-grid-top .service-link {
  position: relative;
  isolation: isolate;
  overflow: visible !important; /* Allow specular glow to radiate without clipping */
  border: 1px solid transparent !important; /* Replaces dull border; hairline drawn by WebGL */
  border-radius: 18px;
  background: linear-gradient(rgba(34, 211, 238, 0.04), rgba(34, 211, 238, 0.04)), #10172ab8 !important;
  color: #f5f5f5 !important;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease !important;
  -webkit-tap-highlight-color: transparent;
}

/* Disable old slide-up full-color gradient overlay */
.service-link-grid-top .service-link:before {
  display: none !important;
}

/* Specular light canvas overlay — taken out of CSS grid flow */
.service-link-grid-top .service-link > .specular-button__light,
.service-link-grid-top .specular-button__light {
  position: absolute !important;
  inset: -24px !important;
  width: calc(100% + 48px) !important;
  height: calc(100% + 48px) !important;
  display: block !important;
  pointer-events: none !important; /* Never intercept user clicks or gestures */
  z-index: 0 !important;
}

/* Ensure button content sits above canvas */
.service-link-grid-top .service-link > * {
  position: relative;
  z-index: 1;
}

/* Hover lift and restrained ambient bloom */
.service-link-grid-top .service-link:hover {
  transform: translateY(-4px) !important;
  color: #f5f5f5 !important;
  border-color: transparent !important;
  box-shadow: 
    0 16px 34px -10px rgba(0, 0, 0, 0.65), 
    0 0 20px rgba(85, 221, 255, 0.12), 
    0 0 20px rgba(236, 72, 153, 0.10) !important;
}

/* Title text */
.service-link-grid-top .service-link strong {
  color: #f5f5f5 !important;
  font-weight: 650;
  letter-spacing: -0.015em;
}

/* Subtitle remains muted color as required */
.service-link-grid-top .service-link small {
  color: #8f98ad !important;
  margin-top: 4px;
  font-size: 11.5px;
  transition: color 0.28s ease !important;
}

/* Icon box styling */
.service-link-grid-top .service-link .service-link-icon {
  color: #c2ccff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: color 0.28s, background 0.28s, border-color 0.28s !important;
}

.service-link-grid-top .service-link:hover .service-link-icon {
  color: #55ddff !important;
  background: rgba(85, 221, 255, 0.08) !important;
  border-color: rgba(85, 221, 255, 0.3) !important;
}

/* Top-right arrow indicator */
.service-link-grid-top .service-link .service-link-arrow {
  color: #8f98ad !important;
  opacity: 0.55;
  transition: color 0.26s, opacity 0.26s, transform 0.26s !important;
}

.service-link-grid-top .service-link:hover .service-link-arrow {
  color: #55ddff !important;
  opacity: 1;
  transform: translate(0) !important;
}

/* Keyboard focus accessibility — clearly illuminated border matching gradient endpoints */
.service-link-grid-top .service-link:focus,
.service-link-grid-top .service-link:focus-visible {
  outline: 2px solid #55ddff !important;
  outline-offset: 3px !important;
  box-shadow: 
    0 0 25px rgba(85, 221, 255, 0.40), 
    0 0 25px rgba(236, 72, 153, 0.30), 
    0 10px 24px -10px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-2px) !important;
}

/* CSS fallback when WebGL2 is unavailable */
.service-link-grid-top .service-link.sb-fallback {
  border: 1px solid transparent !important;
  background: 
    linear-gradient(#10172ab8, #10172ab8) padding-box,
    linear-gradient(135deg, #55ddff 0%, #3b82f6 30%, #8467ff 65%, #ec4899 100%) border-box !important;
}

.service-link-grid-top .service-link.sb-fallback:hover,
.service-link-grid-top .service-link.sb-fallback:focus,
.service-link-grid-top .service-link.sb-fallback:focus-visible {
  box-shadow: 
    0 0 20px rgba(85, 221, 255, 0.25), 
    0 0 20px rgba(236, 72, 153, 0.20) !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .service-link-grid-top .service-link {
    transition: none !important;
    transform: none !important;
  }
  .service-link-grid-top .service-link:hover {
    transform: none !important;
  }
}