/* Verimont card art — the one payment-card visual, shared by every surface:
   the marketing pages, /cards, and online banking.

   Sizing is container-relative (cqw), so a single set of markup reads correctly
   at 240px or 480px wide with no second scale. The card declares the container
   itself, so its own radius and shadow stay in px — an element cannot query
   itself, only its descendants can.

   A variant overrides three custom properties and nothing else. */

.paycard {
  --pc-base: linear-gradient(135deg, #0b1220 0%, #253451 52%, #0e1626 100%);
  --pc-bloom: rgba(78, 222, 163, .34);
  --pc-metal: linear-gradient(140deg, #fdf4d6 4%, #e3c26b 44%, #a87f28 78%, #d8b45f);

  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.586;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(118% 118% at 86% -16%, rgba(255, 255, 255, .20), transparent 46%),
    radial-gradient(96% 96% at -12% 114%, var(--pc-bloom), transparent 54%),
    var(--pc-base);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 18px 44px -14px rgba(8, 14, 28, .62),
    0 4px 12px rgba(8, 14, 28, .26);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1);
}

/* Fine guilloché lines plus a faint grain — the minted, security-print feel of
   a real card rather than a flat gradient. */
.paycard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .55;
  mix-blend-mode: soft-light;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(65deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 9px);
}

/* Specular gloss. Parked off the left edge and swept across on hover. */
.paycard::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .30) 51%, transparent 62%);
  transform: translateX(-46%);
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
}

/* Embossed concentric arcs sweeping out of the lower-right corner, plus a small
   holographic foil patch. Both are decoration only. */
.paycard__foil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.paycard__foil::before {
  content: "";
  position: absolute;
  right: -46cqw;
  bottom: -62cqw;
  width: 128cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: .5cqw solid rgba(255, 255, 255, .11);
  box-shadow:
    0 0 0 6cqw rgba(255, 255, 255, .045),
    0 0 0 12cqw rgba(255, 255, 255, .03);
}
.paycard__foil::after {
  content: "";
  position: absolute;
  right: 5.5cqw;
  top: 42%;
  width: 9cqw;
  height: 6.4cqw;
  border-radius: 1.2cqw;
  opacity: .5;
  mix-blend-mode: screen;
  background: conic-gradient(from 210deg, #6ffbbe, #7cc4ff, #d2a8ff, #ffd88a, #6ffbbe);
  filter: blur(.15cqw);
}

.paycard__body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 6.4cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3cqw;
}

.paycard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; }
.paycard__label { font-size: 3.6cqw; font-weight: 700; letter-spacing: .03em; }
.paycard__sub { font-size: 2.9cqw; opacity: .68; margin-top: .5cqw; }

/* Row holding the EMV chip and the contactless mark. */
.paycard__row { display: flex; align-items: center; gap: 3.4cqw; }

/* EMV chip: metal gradient, contact traces, and a soft top gloss. */
.paycard__chip {
  position: relative;
  width: 12.4cqw;
  height: 9.2cqw;
  border-radius: 1.6cqw;
  overflow: hidden;
  flex: none;
  background: var(--pc-metal);
  box-shadow: inset 0 0 0 .22cqw rgba(0, 0, 0, .18), 0 .3cqw .6cqw rgba(0, 0, 0, .25);
}
.paycard__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)) no-repeat 0 32% / 100% .32cqw,
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)) no-repeat 0 68% / 100% .32cqw,
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)) no-repeat 30% 0 / .32cqw 100%,
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)) no-repeat 70% 0 / .32cqw 100%;
}
.paycard__chip::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(rgba(255, 255, 255, .42), transparent);
}

/* Contactless mark: repeating rings clipped to a right-facing wedge. Scales
   cleanly and needs no icon font. */
.paycard__wifi {
  width: 5.6cqw;
  height: 6.6cqw;
  flex: none;
  opacity: .92;
  background: repeating-radial-gradient(circle at 0 50%,
    transparent 0 1.15cqw, currentColor 1.15cqw 1.63cqw);
  clip-path: polygon(0 8%, 100% 20%, 100% 80%, 0 92%);
}

.paycard__pan {
  font-family: var(--mono, ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace);
  font-size: 5.4cqw;
  letter-spacing: .13em;
  font-variant-numeric: tabular-nums;
  /* Embossed: a light top edge over a dropped shadow. */
  text-shadow: 0 -.1cqw 0 rgba(255, 255, 255, .22), 0 .28cqw .5cqw rgba(0, 0, 0, .48);
}

.paycard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; margin-top: 2.6cqw; }
.paycard__fields { display: flex; gap: 5cqw; }
.paycard__meta-label { display: block; font-size: 1.95cqw; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.paycard__meta { display: block; font-size: 3cqw; letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-top: .4cqw; }

/* Network marks. Typographic Visa, interlocking circles for Mastercard. */
.paycard__mark { flex: none; display: inline-flex; align-items: center; }
.paycard__mark--visa {
  font-size: 6cqw;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 .2cqw .4cqw rgba(0, 0, 0, .35);
}
.paycard__mark--mc i { width: 6.6cqw; aspect-ratio: 1; border-radius: 50%; display: block; }
.paycard__mark--mc i:first-child { background: #eb001b; }
.paycard__mark--mc i:last-child { background: #f79e1b; margin-left: -2.6cqw; mix-blend-mode: screen; }

/* Small status/product tag, e.g. DEBIT or VIRTUAL. */
.paycard__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: .9cqw 2.2cqw;
  border-radius: 999px;
  font-size: 2.3cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 .18cqw rgba(255, 255, 255, .22);
  backdrop-filter: blur(2px);
}

/* ---------- Colorways ---------- */
.paycard--mastercard {
  --pc-base: linear-gradient(135deg, #141416 0%, #34343b 54%, #17171a 100%);
  --pc-bloom: rgba(255, 185, 95, .30);
}
.paycard--virtual {
  --pc-base: linear-gradient(135deg, #04231c 0%, #0d5843 52%, #05261f 100%);
  --pc-bloom: rgba(111, 251, 190, .40);
}

/* ---------- Frozen ---------- */
.paycard--frozen { filter: grayscale(.82) brightness(.92) contrast(.97); }
.paycard--frozen .paycard__body::after {
  content: "FROZEN";
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: .4em;
  text-indent: .4em;
  color: rgba(255, 255, 255, .92);
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(1.5px);
}

/* ---------- Motion ---------- */
@media (hover: hover) {
  .paycard:hover {
    transform: translateY(-4px) perspective(900px) rotateX(2.2deg) rotateY(-2.6deg);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24),
      inset 0 0 0 1px rgba(255, 255, 255, .08),
      0 30px 60px -16px rgba(8, 14, 28, .66),
      0 6px 16px rgba(8, 14, 28, .28);
  }
  .paycard:hover::after { transform: translateX(46%); }
}

@media (prefers-reduced-motion: reduce) {
  .paycard, .paycard::after { transition: none; }
  .paycard:hover { transform: none; }
  .paycard:hover::after { transform: translateX(-46%); }
}

/* In forced-colors mode the gradients are dropped, so keep an explicit edge. */
@media (forced-colors: active) {
  .paycard { border: 1px solid CanvasText; }
  .paycard__foil, .paycard::before, .paycard::after { display: none; }
}