/* Card faces (2026-10-27): every card drawn in CSS, same theme as the site (Poppins, soft depth, one accent).
   Used on the cards grid, card details and the dashboard. Themes set --cf-a/--cf-b/--cf-c (gradient) and --cf-fg. */

.cface {
    --cf-a: #16161a; --cf-b: #26262c; --cf-c: #3a3a43; --cf-fg: #fff; --cf-soft: rgba(255, 255, 255, .66);
    --cf-glow: rgba(255, 255, 255, .20); --cf-orb: rgba(255, 255, 255, .10);
    --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 0%;
    position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 6.4% / 10%;
    color: var(--cf-fg); font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    container-type: inline-size; isolation: isolate; overflow: hidden;
    background:
        radial-gradient(70% 95% at 96% 0%, var(--cf-glow) 0%, transparent 62%),
        radial-gradient(85% 110% at 0% 100%, rgba(0, 0, 0, .34) 0%, transparent 62%),
        linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, .07) 46%, transparent 60%),
        linear-gradient(145deg, var(--cf-a) 0%, var(--cf-b) 58%, var(--cf-c) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 2px 4px rgba(0, 0, 0, .08), 0 16px 32px -14px rgba(0, 0, 0, .42);
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
    user-select: none;
}
/* two large soft orbs in the corner (no line patterns) */
.cface::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 88% 128%, var(--cf-orb) 0 37%, transparent 37.6%),
        radial-gradient(circle at 112% 62%, var(--cf-orb) 0 29%, transparent 29.6%);
}
/* glare (follows the pointer when tilting) */
.cface::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
    background: radial-gradient(55% 70% at var(--mx) var(--my), rgba(255, 255, 255, .6), transparent 60%);
    transition: opacity .3s ease;
}
.cface.is-tilting { transition: transform .08s linear, box-shadow .3s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 52px -20px rgba(0, 0, 0, .5); }
.cface.is-tilting::after { opacity: .9; }

.cface__inner { position: absolute; inset: 0; padding: 7cqw 7.4cqw 6.4cqw; display: grid; grid-template-rows: auto auto 1fr auto; }
.cface__top { display: flex; align-items: center; justify-content: space-between; }
.cface__brand { font-size: 5.4cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.cface__brand b { font-weight: 600; color: var(--cf-accent, #F9A23A); }
.cface__tag { font-size: 2.9cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--cf-soft); }
.cface__mid { display: flex; align-items: center; gap: 3.6cqw; margin-top: 6.6cqw; }
.cface__chip {
    display: block; width: 12.6cqw; aspect-ratio: 4 / 3; border-radius: 1.8cqw; overflow: hidden;
    background: linear-gradient(135deg, #f9e7b3 0%, #e2bf6a 38%, #c39a45 62%, #f1d995 100%);
    box-shadow: inset 0 0 0 1px rgba(110, 78, 18, .28), 0 1px 1.5px rgba(0, 0, 0, .28);
}
.cface__chip svg { display: block; width: 100%; height: 100%; fill: none; stroke: rgba(110, 78, 18, .42); stroke-width: 1.1; }
.cface__nfc { width: 5.6cqw; height: 5.6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .72; }
.cface__num { align-self: center; font-size: 6cqw; font-weight: 500; letter-spacing: .13em; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.cface__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.cface__who { display: grid; min-width: 0; gap: .7cqw; }
.cface__name { font-size: 3.7cqw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cface__label { font-size: 3.3cqw; color: var(--cf-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.cface__net { flex: none; line-height: 1; }
.cface__net--visa { font-size: 8cqw; font-weight: 600; font-style: italic; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.cface__net--mc, .cface__net--maestro { width: 14.6cqw; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.cface__net--amex { font-size: 4cqw; font-weight: 600; letter-spacing: .08em; padding: 1.2cqw 2cqw; background: #2E77BC; color: #fff; border-radius: 1cqw; }
.cface__net--mir { font-size: 6.2cqw; font-weight: 600; letter-spacing: .02em; color: #3fd28c; }
.cface__net--none { font-size: 3cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cf-soft); }

/* sizes */
.cface--lg { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 0 0 1px rgba(0, 0, 0, .06), 0 34px 60px -28px rgba(0, 0, 0, .55); }
.cface--sm { border-radius: 6.4% / 10%; }

/* themes */
.cface--graphite  { --cf-a: #121214; --cf-b: #26262b; --cf-c: #3d3d45; }
.cface--slate     { --cf-a: #1e293b; --cf-b: #334155; --cf-c: #64748b; }
.cface--navy      { --cf-a: #0b1a3a; --cf-b: #16336e; --cf-c: #2a5bb8; --cf-accent: #ffb547; }
.cface--crimson   { --cf-a: #3d0710; --cf-b: #8f1426; --cf-c: #d6283f; --cf-accent: #ffd27a; }
.cface--sky       { --cf-a: #0d4f8b; --cf-b: #3a8fd6; --cf-c: #8cc8f2; --cf-accent: #ffe08a; }
.cface--teal      { --cf-a: #053b3f; --cf-b: #0b7477; --cf-c: #1fb1a8; --cf-accent: #ffd27a; }
.cface--jade      { --cf-a: #0b3b2e; --cf-b: #156b53; --cf-c: #3aa57d; --cf-accent: #ffd27a; }
.cface--emerald   { --cf-a: #052e1c; --cf-b: #0f6b3f; --cf-c: #22a061; --cf-accent: #ffe08a; }
.cface--ocean     { --cf-a: #062a4d; --cf-b: #0d5c99; --cf-c: #1c9bd6; --cf-accent: #ffd27a; }
.cface--azure     { --cf-a: #0a2a66; --cf-b: #1d55c4; --cf-c: #4d8cf5; --cf-accent: #ffd27a; }
.cface--indigo    { --cf-a: #17134a; --cf-b: #312c91; --cf-c: #5b52d6; --cf-accent: #ffc56b; }
.cface--plum      { --cf-a: #2a0b3d; --cf-b: #5b1a7e; --cf-c: #9b3fbf; --cf-accent: #ffc56b; }
.cface--sakura    { --cf-a: #5a1030; --cf-b: #b02a5c; --cf-c: #ef7aa1; --cf-accent: #fff1b5; }
.cface--sunset    { --cf-a: #5a1a05; --cf-b: #c2410c; --cf-c: #f59e0b; --cf-accent: #fff1b5; }
.cface--sand      { --cf-a: #4a3410; --cf-b: #9a7330; --cf-c: #d8b06a; --cf-accent: #fff6d6; }
.cface--silver    { --cf-a: #9aa0a8; --cf-b: #cfd4da; --cf-c: #f1f3f5; --cf-fg: #1d2430; --cf-soft: rgba(29, 36, 48, .62); --cf-glow: rgba(255, 255, 255, .7); --cf-orb: rgba(255, 255, 255, .35); --cf-accent: #B45F06; }
.cface--platinum  { --cf-a: #0e0e10; --cf-b: #24242a; --cf-c: #4a4650; --cf-accent: #e9c46a; --cf-orb: rgba(233, 196, 106, .09); --cf-glow: rgba(233, 196, 106, .16); }
.cface--platinum .cface__brand b, .cface--platinum .cface__label { color: #e9c46a; }
.cface--openai    { --cf-a: #04261d; --cf-b: #0b5e47; --cf-c: #10a37f; --cf-accent: #d9fff2; }
.cface--claude    { --cf-a: #3b1d10; --cf-b: #9c4a2c; --cf-c: #d97757; --cf-accent: #fff1e0; }
.cface--youtube   { --cf-a: #2a0606; --cf-b: #8a0f0f; --cf-c: #ff2a2a; --cf-accent: #fff1e0; }
.cface--microsoft { --cf-a: #062a54; --cf-b: #0b5cad; --cf-c: #2b88d8; --cf-accent: #ffc83d; }

/* contexts: product grids and wallet tiles show the face edge to edge */
.site-product__img:has(.cface), .dash-product__img:has(.cface) { padding: 14px; background: linear-gradient(180deg, #fafafa, #f3f3f2); display: block; aspect-ratio: auto; }
.site-product:hover .cface, .dash-product:hover .cface { transform: perspective(900px) rotateX(2deg) rotateY(-4deg) translateY(-2px); }
.site-buy__media:has(.cface) { padding: clamp(18px, 4vw, 44px); border: 0; background: radial-gradient(120% 120% at 50% 0%, #fff4e6 0%, #fafafa 60%); }

@media (prefers-reduced-motion: reduce) { .cface, .cface.is-tilting { transition: none; transform: none; } }

/* spec chips under the large face on card details */
.cface-specs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.cface-specs li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e7e7e7; font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.cface-specs span { font-size: 12px; color: #6b6b6b; line-height: 1.4; }
.cface-specs strong { font-size: 14px; font-weight: 600; color: #171717; letter-spacing: -0.01em; line-height: 1.4; }

/* phones: spec chips in two even columns (no lone chip on the second row) */
@media (max-width: 575px) { .cface-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }