/* ===== Superfly premium cards – all CSS, no images except user photos ===== */
.sfc-card { --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg; position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 4.6%/7.3%; perspective: 1000px; user-select: none; -webkit-user-select: none; container-type: inline-size; }
.sfc-card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); transform: rotateX(var(--rx)) rotateY(var(--ry)); border-radius: inherit; }
.sfc-card.tilting .inner { transition: transform .08s linear; }
.sfc-card.flipped .inner { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.sfc-card .face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, .55), 0 7cqw 14cqw -4cqw rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sfc-card .back { transform: rotateY(180deg); }
.sfc-card .layer { position: absolute; inset: 0; border-radius: inherit; }
.sfc-card .photo { background-size: cover; background-repeat: no-repeat; }
.sfc-card .dim { background: linear-gradient(160deg, rgba(0, 0, 0, var(--dim, .25)), rgba(0, 0, 0, calc(var(--dim, .25) + .25))); }
.sfc-card .sheen { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%); mix-blend-mode: overlay; pointer-events: none; }
.sfc-card .glint { background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 230, .16) 48%, rgba(255, 250, 230, .05) 52%, transparent 62%); background-size: 300% 100%; animation: glint 7s ease-in-out infinite; pointer-events: none; }
@keyframes glint { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.sfc-card .edge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .5); pointer-events: none; }
.sfc-card.frozen .front { filter: grayscale(.85) brightness(.6); }
.sfc-card .ice { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; font-size: 4cqw; letter-spacing: 1cqw; font-weight: 800; color: #dfeaff; text-transform: uppercase; backface-visibility: hidden; background: linear-gradient(135deg, rgba(180, 210, 255, .18), rgba(255, 255, 255, .05)); border-radius: inherit; }

/* content */
.sfc-card .content { position: absolute; inset: 0; padding: 6.5cqw 7cqw; display: flex; flex-direction: column; color: var(--ink); z-index: 3; }
.sfc-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.sfc-card .brand { display: flex; align-items: center; gap: 2cqw; }
.sfc-card .brand svg { width: 9cqw; height: 9cqw; }
.sfc-card .wordmark { font-family: var(--serif); font-weight: 600; font-size: 5.6cqw; letter-spacing: .3cqw; line-height: 1; }
.sfc-card .wordmark small { display: block; font-family: var(--sans); font-size: 2cqw; letter-spacing: .9cqw; font-weight: 700; margin-top: .9cqw; opacity: .85; }
.sfc-card .badge { font-size: 2.3cqw; font-weight: 800; letter-spacing: .6cqw; padding: 1cqw 2.2cqw; border-radius: 1.5cqw; border: 1px solid currentColor; opacity: .9; display: flex; align-items: center; gap: 1cqw; }
.sfc-card .mid { display: flex; align-items: center; gap: 4cqw; margin-top: 5.5cqw; }
.sfc-card .chip { width: 13cqw; height: 10cqw; border-radius: 1.8cqw; }
.sfc-card .nfc { width: 6cqw; height: 6cqw; opacity: .85; }
.sfc-card .number { font-family: var(--mono); font-size: 6cqw; letter-spacing: .9cqw; margin-top: auto; white-space: nowrap; }
.sfc-card .bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 3cqw; }
.sfc-card .meta { display: flex; gap: 6cqw; }
.sfc-card .meta label { display: block; font-size: 1.8cqw; letter-spacing: .5cqw; opacity: .6; font-weight: 700; text-transform: uppercase; margin-bottom: .8cqw; }
.sfc-card .meta b { font-size: 3.4cqw; letter-spacing: .35cqw; font-weight: 700; text-transform: uppercase; font-family: var(--mono); white-space: nowrap; }
.sfc-card .network { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 6.5cqw; line-height: .9; text-align: right; letter-spacing: .2cqw; }
.sfc-card .network small { display: block; font-family: var(--sans); font-style: normal; font-size: 1.8cqw; letter-spacing: .6cqw; font-weight: 800; opacity: .75; }
.sfc-card .title { font-family: var(--serif); font-style: italic; font-size: 4cqw; opacity: .85; margin-top: 1cqw; }
.emboss { text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .25); }

/* back */
.sfc-card .stripe { position: absolute; left: 0; right: 0; top: 11%; height: 18%; background: linear-gradient(180deg, #0b0b0b, #1c1c1c 50%, #090909); }
.sfc-card .sig { position: absolute; left: 7%; right: 30%; top: 38%; height: 14%; border-radius: 1cqw; background: repeating-linear-gradient(-45deg, #f2eee4 0 1.2cqw, #e6dfcf 1.2cqw 2.4cqw); }
.sfc-card .cvv { position: absolute; right: 7%; top: 38%; height: 14%; width: 19%; border-radius: 1cqw; background: #fff; color: #111; font-family: var(--mono); font-weight: 700; display: grid; place-items: center; font-size: 4cqw; font-style: italic; }
.sfc-card .backinfo { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; justify-content: space-between; align-items: flex-end; font-size: 2.4cqw; line-height: 1.5; }
.sfc-card .backinfo .number { font-size: 4.6cqw; margin: 0 0 1cqw; }

/* ---------- foils (text/ink) ---------- */
.f-gold { --ink: #f1d38a; --foil: linear-gradient(135deg, #a27a35, #f9e2a2 30%, #c99b48 55%, #fff0c0 75%, #a27a35); }
.f-silver { --ink: #e8eaee; --foil: linear-gradient(135deg, #8e949c, #ffffff 30%, #a7adb5 55%, #f4f6f8 75%, #8e949c); }
.f-rose { --ink: #f4c1ae; --foil: linear-gradient(135deg, #a76b5a, #ffd9c9 30%, #c98a76 55%, #ffe8dd 75%, #a76b5a); }
.f-black { --ink: #17140d; --foil: linear-gradient(135deg, #000, #3a3428 35%, #050505 60%, #2b261c); }
.f-diamond { --ink: #ffffff; --foil: linear-gradient(135deg, #bfe6ff, #ffffff 25%, #ffd6f5 45%, #d4fff1 65%, #ffffff 80%, #c9d7ff); }
.sfc-card .foil-t { background: var(--foil); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foilMove 6s ease-in-out infinite alternate; }
.f-black .foil-t { animation: none; }
@keyframes foilMove { to { background-position: 100% 100%; } }
.sfc-card .foil-fill { fill: url(#none); }

/* ---------- bases ---------- */
.b-obsidian .base { background:
  radial-gradient(120% 90% at 15% 0%, #34312a 0%, transparent 55%),
  radial-gradient(90% 80% at 100% 100%, #1d1a14 0%, transparent 60%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
  linear-gradient(160deg, #191814, #070706); }
.b-obsidian .deco { background:
  radial-gradient(140% 120% at 110% 120%, transparent 59.4%, rgba(241, 211, 138, .55) 59.6%, rgba(241, 211, 138, .1) 60.2%, transparent 60.6%),
  radial-gradient(140% 120% at 110% 120%, transparent 64.4%, rgba(241, 211, 138, .3) 64.6%, transparent 65.2%),
  radial-gradient(140% 120% at 110% 120%, transparent 69.4%, rgba(241, 211, 138, .16) 69.6%, transparent 70.2%); }

.b-sapphire .base { background:
  radial-gradient(100% 80% at 20% 10%, #2a4fb4 0%, transparent 60%),
  radial-gradient(80% 90% at 100% 100%, #0a1c5c 0%, transparent 70%),
  linear-gradient(150deg, #10276e, #050d2c); }
.b-sapphire .deco { opacity: .5; background:
  repeating-linear-gradient(45deg, rgba(241, 211, 138, .35) 0 1px, transparent 1px 7cqw),
  repeating-linear-gradient(-45deg, rgba(241, 211, 138, .35) 0 1px, transparent 1px 7cqw); -webkit-mask: radial-gradient(120% 100% at 0% 0%, #000 20%, transparent 85%); mask: radial-gradient(120% 100% at 0% 0%, #000 20%, transparent 85%); }

.b-carbon .base { background:
  radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .12), transparent 55%),
  repeating-linear-gradient(45deg, #1a1a1a 0 2px, #0c0c0c 2px 4px),
  linear-gradient(#111, #111); background-blend-mode: normal; }
.b-carbon .deco { background:
  linear-gradient(45deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .04) 75%),
  linear-gradient(-45deg, rgba(0, 0, 0, .35) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .35) 75%);
  background-size: 2.4cqw 2.4cqw; }

.b-bordeaux .base { background:
  radial-gradient(110% 90% at 20% 0%, #8a1a33 0%, transparent 60%),
  radial-gradient(90% 90% at 100% 100%, #2a0410 0%, transparent 70%),
  linear-gradient(150deg, #5b0d20, #1a0208); }
.b-bordeaux .deco { opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

.b-champagne .base { background:
  radial-gradient(110% 80% at 20% 0%, rgba(255, 255, 255, .7), transparent 55%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, rgba(120, 90, 40, .06) 1px 2px, transparent 2px 4px),
  linear-gradient(150deg, #f6e4b8, #d7b673 45%, #f3dfae 70%, #c8a361); }

.b-rosegold .base { background:
  radial-gradient(110% 80% at 20% 0%, rgba(255, 255, 255, .65), transparent 55%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, rgba(120, 60, 40, .06) 1px 2px, transparent 2px 4px),
  linear-gradient(150deg, #f6d3c4, #d39a85 45%, #f2cdbd 70%, #b97b68); }

.b-liquid .base { background: linear-gradient(120deg, #8d6624, #f9e29f, #c2923d, #fff4cc, #a8782e, #f1d389, #8d6624); background-size: 400% 400%; animation: liquid 9s ease-in-out infinite; }
.b-liquid .deco { background: radial-gradient(60% 50% at 30% 30%, rgba(255, 255, 255, .45), transparent 70%), radial-gradient(50% 60% at 80% 80%, rgba(110, 70, 10, .35), transparent 70%); mix-blend-mode: soft-light; animation: liquid 11s ease-in-out infinite reverse; background-size: 200% 200%; }
@keyframes liquid { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.b-emerald .base { background:
  radial-gradient(110% 90% at 20% 0%, #1f7a5a 0%, transparent 60%),
  radial-gradient(90% 90% at 100% 100%, #021d14 0%, transparent 70%),
  linear-gradient(150deg, #0d5139, #031a12); }

.b-platinum .base { background:
  radial-gradient(110% 80% at 25% 0%, rgba(255, 255, 255, .9), transparent 55%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 1px, rgba(0, 0, 0, .04) 1px 2px, transparent 2px 4px),
  linear-gradient(150deg, #f2f3f5, #b9bdc3 45%, #eceef1 70%, #9da2a9); }

.b-blackdiamond .base { background:
  conic-gradient(from 210deg at 30% 40%, #0b0b0d, #232329, #0a0a0c, #1b1b22, #050506, #26262e, #0b0b0d),
  #070708; }
.b-blackdiamond .deco { background:
  conic-gradient(from 20deg at 75% 65%, transparent, rgba(255, 255, 255, .06), transparent 15%, rgba(255, 255, 255, .09) 30%, transparent 45%, rgba(255, 255, 255, .05) 60%, transparent 80%),
  linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .05) 41%, transparent 42%),
  linear-gradient(35deg, transparent 55%, rgba(255, 255, 255, .06) 56%, transparent 57%),
  linear-gradient(160deg, transparent 25%, rgba(255, 255, 255, .05) 26%, transparent 27%); }
.b-blackdiamond .sparkles i { position: absolute; width: 1.4cqw; height: 1.4cqw; background: radial-gradient(circle, #fff 0 20%, rgba(255, 255, 255, 0) 70%); animation: twinkle 2.6s ease-in-out infinite; }
.b-blackdiamond .sparkles i::before, .b-blackdiamond .sparkles i::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); border-radius: 1px; }
.b-blackdiamond .sparkles i { width: .9cqw; height: .9cqw; }
.b-blackdiamond .sparkles i::before { width: 260%; height: .5px; opacity: .7; } .b-blackdiamond .sparkles i::after { width: .5px; height: 260%; opacity: .7; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- patterns ---------- */
.p-lines .pattern { background: repeating-linear-gradient(115deg, var(--pat) 0 1px, transparent 1px 2.2cqw); opacity: .5; -webkit-mask: linear-gradient(100deg, transparent 30%, #000 100%); mask: linear-gradient(100deg, transparent 30%, #000 100%); }
.p-diamonds .pattern { background: repeating-linear-gradient(45deg, var(--pat) 0 1px, transparent 1px 5cqw), repeating-linear-gradient(-45deg, var(--pat) 0 1px, transparent 1px 5cqw); opacity: .45; }
.p-waves .pattern, .p-guilloche .pattern, .p-monogram .pattern { background-image: var(--pat-img); background-size: cover; opacity: .55; }
.p-monogram .pattern { background-size: 12cqw 12cqw; background-repeat: repeat; opacity: .14; }
.f-gold { --pat: rgba(241, 211, 138, .5); } .f-silver { --pat: rgba(240, 244, 250, .45); } .f-rose { --pat: rgba(255, 200, 180, .5); } .f-black { --pat: rgba(0, 0, 0, .22); } .f-diamond { --pat: rgba(255, 255, 255, .35); }

/* tint overlay */
.sfc-card .tint { mix-blend-mode: color; opacity: .75; }

/* small swatch versions */
.swatch .sfc-card { width: 100%; }
.swatch .sfc-card .content, .swatch .sfc-card .glint { display: none; }

/* stack in wallet */
.wallet-stack { position: relative; }
.wallet-stack .sfc-card { transition: transform .5s cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
.wallet-stack .sfc-card + .sfc-card { margin-top: -44%; }
.wallet-stack .sfc-card:hover { transform: translateY(-4%); }
.wallet-stack .sfc-card:last-child:hover { transform: none; }
.swatch .sfc-card { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 9px; }
.swatch .sfc-card .face { border-radius: 9px; }