/* ==========================================================================
   Magengrim — payments card
   An interactive product card for the "Payments Engineering" section: a
   Blender-rendered card that tilts under the pointer and flips to its back.
   Sits on the section's black background.
   ========================================================================== */

.mg-paycard {
  --mg-pc-dim: rgba(255, 255, 255, 0.52);
  --mg-pc-faint: rgba(255, 255, 255, 0.32);
  --mg-pc-accent: #63d8ff;
  --mg-pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  color: #fff;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Stage -------------------------------------------------------------- */

.mg-paycard__stage {
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

/* Soft iridescent bloom so a near-black card separates from a black section */
.mg-paycard__stage::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(52% 58% at 32% 30%, rgba(120, 190, 255, 0.20), rgba(0, 0, 0, 0) 70%),
    radial-gradient(48% 54% at 72% 74%, rgba(255, 90, 180, 0.16), rgba(0, 0, 0, 0) 72%);
  filter: blur(26px);
  opacity: 0.85;
  transition: opacity 420ms var(--mg-pc-ease);
}

.mg-paycard[data-hover="true"] .mg-paycard__stage::before {
  opacity: 1;
}

/* --- Card --------------------------------------------------------------- */

.mg-paycard__card {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1100 / 694;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)))
    translateZ(0);
  transition: transform 620ms var(--mg-pc-ease);
  will-change: transform;
  cursor: pointer;
  border-radius: 4.2%/6.6%;
  outline: none;
}

/* while the pointer is tracking, follow it tightly instead of easing */
.mg-paycard[data-tilting="true"] .mg-paycard__card {
  transition: transform 90ms linear;
}

.mg-paycard__card:focus-visible {
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--mg-pc-accent);
}

.mg-paycard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
}

.mg-paycard__face--back {
  transform: rotateY(180deg);
}

.mg-paycard__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.7));
}

/* Pointer-tracked specular sweep, clipped to the card's rounded rectangle */
.mg-paycard__sheen {
  position: absolute;
  inset: 2.6% 2.2%;
  border-radius: 4.2%/6.6%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--mg-pc-ease);
  background:
    radial-gradient(
      42% 62% at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.30) 0%,
      rgba(120, 220, 255, 0.16) 34%,
      rgba(255, 90, 180, 0.12) 58%,
      rgba(255, 255, 255, 0) 78%
    );
  mix-blend-mode: screen;
}

.mg-paycard[data-hover="true"] .mg-paycard__sheen {
  opacity: 1;
}

/* --- Hint --------------------------------------------------------------- */

.mg-paycard__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mg-pc-faint);
  transition: color 320ms var(--mg-pc-ease);
}

.mg-paycard[data-hover="true"] .mg-paycard__hint {
  color: var(--mg-pc-dim);
}

.mg-paycard__hint svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: currentColor;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 767px) {
  .mg-paycard { max-width: 400px; }
  .mg-paycard__hint { font-size: 0.68rem; }
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mg-paycard__card,
  .mg-paycard__sheen,
  .mg-paycard__stage::before {
    transition-duration: 1ms !important;
  }
}

/* ==========================================================================
   Payments Engineering row
   The copy block and the card share one vertically-centred row; the three
   assurances sit beneath it as pills so the card keeps its full size.
   ========================================================================== */

.elementor-element-62d6d86 > .elementor-widget-wrap,
.elementor-element-81bace4 > .elementor-widget-wrap {
  align-content: center;
}

.mg-payrails {
  padding: 30px 20px 6px;
}

.mg-payrails__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-payrails__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  line-height: 1.2;
}

.mg-payrails__pill svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
  opacity: 0.8;
}

@media (max-width: 767px) {
  .mg-payrails { padding: 22px 16px 4px; }
  .mg-payrails__pill { font-size: 0.8rem; padding: 8px 14px; }
}