/* Feature Shader Cards: original CSS interpretation for the WordPress theme.
 * No React/WebGL dependency. Text, icons and links remain server-rendered.
 */
main .sg-wave-cards { align-items: stretch; scroll-margin-top: 130px; }
main .sg-wave-cards .sg-wave-card {
  --sg-wave-light: #38bdf8;
  --sg-wave-mid: #087cf0;
  --sg-wave-deep: #093d84;
  --sg-wave-duration: 19s;
  --sg-wave-phase: -5s;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  height: auto;
  padding: clamp(1.6rem, 2.5vw, 2.1rem);
  overflow: hidden;
  border: 1px solid #31527b;
  border-radius: 28px;
  background: #091c35;
  box-shadow: 0 22px 45px -28px rgb(7 31 64 / 55%), inset 0 1px 0 #ffffff12;
  color: #fff;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
main .sg-wave-card:nth-child(2) {
  --sg-wave-light: #73e8ff;
  --sg-wave-mid: #139ccf;
  --sg-wave-deep: #084875;
  --sg-wave-duration: 23s;
  --sg-wave-phase: -12s;
}
main .sg-wave-card:nth-child(3) {
  --sg-wave-light: #48d8c5;
  --sg-wave-mid: #097ab1;
  --sg-wave-deep: #075367;
  --sg-wave-duration: 21s;
  --sg-wave-phase: -17s;
}
/* The large painted surface moves using transforms only. */
main .sg-wave-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -42%;
  width: auto;
  height: auto;
  pointer-events: none;
  border-radius: 45%;
  background:
    radial-gradient(ellipse at 28% 35%, transparent 22%, var(--sg-wave-light) 28%, transparent 34%),
    radial-gradient(ellipse at 80% 28%, transparent 24%, var(--sg-wave-mid) 31%, transparent 43%),
    conic-gradient(from 160deg at 48% 48%, #08172f, var(--sg-wave-deep) 22%, var(--sg-wave-light) 39%, #102a50 48%, var(--sg-wave-mid) 68%, #08172f 85%);
  filter: blur(17px);
  opacity: .85;
  transform-origin: 50% 35%;
  transform: translate3d(-3%, -8%, 0) rotate(-10deg) scale(1.04);
  animation: sg-card-wave var(--sg-wave-duration) ease-in-out var(--sg-wave-phase) infinite alternate;
  animation-play-state: paused;
  transition: opacity .4s ease;
}
main .sg-wave-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(5 20 42 / 38%), rgb(5 20 42 / 72%) 35%, rgb(5 20 42 / 94%) 78%);
  box-shadow: inset 0 1px 0 #ffffff1c;
}
main .sg-wave-card > * { position: relative; z-index: 2; }
main .sg-wave-card > .sg-icon {
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  margin: 0 0 2.7rem;
  padding: 12px;
  border: 1px solid #ffffff40;
  border-radius: 18px;
  background: #ffffff12;
  filter: drop-shadow(0 4px 10px #06142955);
}
main .sg-wave-card .sg-icon__stroke { stroke: #e4f5ff; }
main .sg-wave-card .sg-icon__dot { fill: var(--sg-wave-light); }
main .sg-wave-cards .sg-wave-card h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-size: clamp(1.35rem, 1.9vw, 1.55rem) !important;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin-bottom: 1rem !important;
}
main .sg-wave-cards .sg-wave-card p {
  color: #d8e6f6 !important;
  -webkit-text-fill-color: #d8e6f6;
  font-size: .96rem;
  line-height: 1.8;
  margin-bottom: 1.6rem;
}
main .sg-wave-card .sg-link {
  color: #f0f8ff !important;
  -webkit-text-fill-color: #f0f8ff;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.5;
  min-height: 44px;
  align-self: stretch;
  justify-content: space-between;
  gap: .8rem;
  padding: .35rem 0;
  border-top: 1px solid #ffffff30;
}
main .sg-wave-card .sg-link + br { display: none; }
main .sg-wave-card .sg-link ~ .sg-link { color: #a9d5ff !important; -webkit-text-fill-color: #a9d5ff; font-size: .8rem; }
main .sg-wave-card .sg-link::after { color: #8dddff; -webkit-text-fill-color: #8dddff; }
main .sg-wave-card .sg-link:focus-visible { outline: 3px solid #a8e6ff; outline-offset: 3px; border-radius: 4px; }
main .sg-wave-card.sg-wave-running::before { animation-play-state: running; }
@keyframes sg-card-wave {
  0% { transform: translate3d(-3%, -8%, 0) rotate(-10deg) scale(1.04); }
  50% { transform: translate3d(5%, 0, 0) rotate(10deg) scale(1.16); }
  100% { transform: translate3d(-5%, 5%, 0) rotate(27deg) scale(1.06); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main .sg-wave-cards .sg-wave-card:hover,
  main .sg-wave-cards .sg-wave-card:focus-within {
    transform: translateY(-6px);
    border-color: #87c8ff;
    box-shadow: 0 30px 58px -28px rgb(7 31 64 / 60%);
  }
  main .sg-wave-card:hover::before, main .sg-wave-card:focus-within::before { opacity: 1; }
}
@media (max-width: 782px) {
  main .sg-wave-cards { grid-template-columns: 1fr; gap: 1.2rem; }
  main .sg-wave-cards .sg-wave-card { padding: 1.6rem; border-radius: 24px; }
  main .sg-wave-card > .sg-icon { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  main .sg-wave-card::before { animation: none !important; }
  main .sg-wave-cards .sg-wave-card, main .sg-wave-card::before, main .sg-wave-card .sg-link::after { transition: none; }
  main .sg-wave-cards .sg-wave-card:hover { transform: none; }
}
