<section class="nm-fin" aria-label="Aurum Finance Dashboard">
  <div class="card">

    <div class="left-col">
      <div class="tag">Your Card</div>

      <div class="card-wrap">
        <div class="credit-card">
          <div class="card-face" aria-hidden="true"></div>
          <div class="card-shimmer" aria-hidden="true"></div>
          <div class="card-content">

            <div class="card-bank">
              <div>
                <div>AURUM</div>
                <div class="card-bank-sub">Private Banking</div>
              </div>
              <svg class="contactless" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12 5C8.13 5 5 8.13 5 12s3.13 7 7 7 7-3.13 7-7-3.13-7-7-7z" stroke="rgba(201,168,76,0.7)" stroke-width="1.5" fill="none"/>
                <path d="M12 8.5c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5S13.93 8.5 12 8.5z" stroke="rgba(201,168,76,0.7)" stroke-width="1.5" fill="none"/>
                <circle cx="12" cy="12" r="1" fill="rgba(201,168,76,0.7)"/>
              </svg>
            </div>

            <div class="chip-wrap">
              <div class="chip" aria-hidden="true"><div class="chip-lines"></div></div>
              <span class="card-nfc" aria-hidden="true">))))</span>
            </div>

            <div class="card-number">
              <span class="masked">••••</span>
              <span class="masked">••••</span>
              <span class="masked">••••</span>
              <span>7291</span>
            </div>

            <div class="card-footer">
              <div>
                <div class="card-holder-label">Card Holder</div>
                <div class="card-holder-name">Alex Mercer</div>
              </div>
              <div>
                <div class="card-expiry-label">Valid Thru</div>
                <div class="card-expiry-val">09/28</div>
              </div>
              <div class="visa-logo">VISA</div>
            </div>

          </div>
        </div>
      </div>

      <div class="balance-card">
        <div class="balance-label">Total Balance</div>
        <div class="balance-amount">
          <span class="currency">$</span>48,290<span class="balance-cents">.50</span>
        </div>
        <div class="balance-change">▲ +$1,240.00 <span class="balance-change-sub">this month</span></div>
      </div>

      <div class="stat-trio">
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">💰</div>
          <div class="stat-val stat-val-grn">$6.8k</div>
          <div class="stat-name">Income</div>
        </div>
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">💸</div>
          <div class="stat-val stat-val-red">$3.2k</div>
          <div class="stat-name">Spent</div>
        </div>
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">🏦</div>
          <div class="stat-val stat-val-gld">$3.6k</div>
          <div class="stat-name">Saved</div>
        </div>
      </div>
    </div>

    <div class="right-col">
      <div class="tag">Spending Overview</div>

      <div class="spend-card">
        <div class="ring-wrap">
          <svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="44" cy="44" r="36" fill="none" stroke="#e5e0d6" stroke-width="8"/>
            <circle cx="44" cy="44" r="36" fill="none" stroke="#c9a84c" stroke-width="8"
              stroke-linecap="round" stroke-dasharray="162 226" transform="rotate(-90 44 44)"/>
            <circle cx="44" cy="44" r="26" fill="none" stroke="#e5e0d6" stroke-width="6"/>
            <circle cx="44" cy="44" r="26" fill="none" stroke="#c05858" stroke-width="6"
              stroke-linecap="round" stroke-dasharray="98 163" transform="rotate(-90 44 44)"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke="#e5e0d6" stroke-width="5"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke="#4a8a5a" stroke-width="5"
              stroke-linecap="round" stroke-dasharray="60 107" transform="rotate(-90 44 44)"/>
          </svg>
          <div class="ring-center">
            <div class="ring-pct">72%</div>
            <div class="ring-sub">Budget</div>
          </div>
        </div>
        <div class="spend-info">
          <div class="spend-cats">
            <div class="cat-row">
              <div class="cat-dot cat-dot-gld" aria-hidden="true"></div>
              <div class="cat-name">Housing</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-gld" style="width:72%"></div></div>
              <div class="cat-amt">$1,440</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-red" aria-hidden="true"></div>
              <div class="cat-name">Food</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-red" style="width:43%"></div></div>
              <div class="cat-amt">$860</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-grn" aria-hidden="true"></div>
              <div class="cat-name">Transport</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-grn" style="width:27%"></div></div>
              <div class="cat-amt">$320</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-txt" aria-hidden="true"></div>
              <div class="cat-name">Other</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-txt" style="width:18%"></div></div>
              <div class="cat-amt">$240</div>
            </div>
          </div>
        </div>
      </div>

      <div class="tx-card">
        <div class="tag">Recent Transactions</div>
        <div class="tx-list">
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">🛒</div>
            <div class="tx-meta">
              <div class="tx-name">Whole Foods Market</div>
              <div class="tx-date">Today · 2:34 PM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$84.20</div>
              <div class="tx-cat">Groceries</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">💼</div>
            <div class="tx-meta">
              <div class="tx-name">Salary Deposit</div>
              <div class="tx-date">Yesterday · 9:00 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val credit">+$3,400</div>
              <div class="tx-cat">Income</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">☕</div>
            <div class="tx-meta">
              <div class="tx-name">Blue Bottle Coffee</div>
              <div class="tx-date">May 21 · 8:15 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$7.50</div>
              <div class="tx-cat">Dining</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">✈️</div>
            <div class="tx-meta">
              <div class="tx-name">United Airlines</div>
              <div class="tx-date">May 20 · 11:42 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$342.00</div>
              <div class="tx-cat">Travel</div>
            </div>
          </div>
        </div>
      </div>

      <div class="actions-row">
        <button type="button" class="action-btn accent">
          <span class="action-icon" aria-hidden="true">→</span>
          <span class="action-name">Send</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">←</span>
          <span class="action-name">Request</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">+</span>
          <span class="action-name">Top Up</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">⇄</span>
          <span class="action-name">Transfer</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">📄</span>
          <span class="action-name">Statement</span>
        </button>
      </div>
    </div>

  </div>
</section>

/* ─── 08 Aurum Finance Dashboard — champagne luxury banking ───────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Josefin+Sans:wght@300;400;600&display=swap');

.nm-fin {
  --nm-fin-bg:  #ede8df;
  --nm-fin-sd:  #cdc8bc;
  --nm-fin-sl:  #fff8f0;
  --nm-fin-ib:  #e5e0d6;
  --nm-fin-gld: #c9a84c;
  --nm-fin-gl2: #e8c870;
  --nm-fin-gl3: #9a7a2c;
  --nm-fin-txt: #7a7268;
  --nm-fin-txt2:#2a2018;
  --nm-fin-red: #c05858;
  --nm-fin-grn: #4a8a5a;
  --nm-fin-neu:       10px 10px 24px var(--nm-fin-sd), -10px -10px 24px var(--nm-fin-sl);
  --nm-fin-neu-in:    inset 7px 7px 16px var(--nm-fin-sd), inset -7px -7px 16px var(--nm-fin-sl);
  --nm-fin-neu-sm:    6px 6px 14px var(--nm-fin-sd), -6px -6px 14px var(--nm-fin-sl);
  --nm-fin-neu-sm-in: inset 4px 4px 10px var(--nm-fin-sd), inset -4px -4px 10px var(--nm-fin-sl);

  position: relative;
  width: 100%;
  min-height: 940px;
  background: var(--nm-fin-bg);
  font-family: 'Josefin Sans', system-ui, sans-serif;
  color: var(--nm-fin-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-fin *,
.nm-fin *::before,
.nm-fin *::after { box-sizing: border-box; }

.nm-fin .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-fin-bg);
  border-radius: 44px;
  padding: 40px 36px;
  box-shadow: 22px 22px 54px var(--nm-fin-sd), -22px -22px 54px var(--nm-fin-sl);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
}

.nm-fin .tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  opacity: 0.5;
  margin-bottom: 16px;
}

.nm-fin .left-col,
.nm-fin .right-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Credit card */
.nm-fin .card-wrap {
  position: relative;
  perspective: 800px;
}
.nm-fin .credit-card {
  width: 100%;
  height: 200px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 16px 16px 36px rgba(0, 0, 0, 0.28), -8px -8px 20px rgba(255, 255, 255, 0.06);
}
.nm-fin .card-wrap:hover .credit-card { transform: rotateY(6deg) rotateX(-3deg); }

.nm-fin .card-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1628 0%, #2a2040 40%, #1e1430 70%, #2e2848 100%);
}
.nm-fin .card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.nm-fin .card-shimmer {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(201, 168, 76, 0.04) 40%,
    rgba(232, 200, 112, 0.12) 50%,
    rgba(201, 168, 76, 0.04) 60%,
    transparent 100%);
  transform: skewX(-15deg);
  animation: nm-fin-shimmer 4s ease-in-out infinite;
}
@keyframes nm-fin-shimmer {
  0%, 100% { left: -60%; }
  50% { left: 110%; }
}

.nm-fin .card-content {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nm-fin .card-bank {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nm-fin .card-bank-sub {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 4px;
  color: rgba(201, 168, 76, 0.8);
  text-transform: uppercase;
  margin-top: 2px;
}
.nm-fin .contactless { width: 24px; height: 24px; opacity: 0.7; }

.nm-fin .chip-wrap { display: flex; align-items: center; gap: 16px; }
.nm-fin .chip {
  width: 44px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(145deg, #e8c870, #b88a30, #e0c060, #c8a040);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.nm-fin .chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 20px;
  border: 1.5px solid rgba(180, 140, 40, 0.6);
  border-radius: 3px;
}
.nm-fin .chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(180, 140, 40, 0.5);
  transform: translateY(-50%);
}
.nm-fin .chip-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  background: rgba(180, 140, 40, 0.5);
}
.nm-fin .card-nfc {
  opacity: 0.5;
  font-size: 18px;
  color: rgba(201, 168, 76, 0.8);
}

.nm-fin .card-number {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  gap: 18px;
}
.nm-fin .card-number .masked {
  letter-spacing: 3px;
  color: rgba(201, 168, 76, 0.6);
}

.nm-fin .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.nm-fin .card-holder-label,
.nm-fin .card-expiry-label {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 3px;
}
.nm-fin .card-expiry-label { text-align: right; }
.nm-fin .card-holder-name,
.nm-fin .card-expiry-val {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}
.nm-fin .card-expiry-val { text-align: right; }
.nm-fin .visa-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -1px;
}

/* Balance card */
.nm-fin .balance-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: var(--nm-fin-neu-in);
}
.nm-fin .balance-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  margin-bottom: 8px;
}
.nm-fin .balance-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
  letter-spacing: -1px;
  line-height: 1;
}
.nm-fin .balance-amount .currency { font-size: 22px; color: var(--nm-fin-gld); }
.nm-fin .balance-cents { font-size: 22px; color: var(--nm-fin-txt); }
.nm-fin .balance-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--nm-fin-grn);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nm-fin .balance-change-sub { color: var(--nm-fin-txt); font-weight: 400; }

/* Stat trio */
.nm-fin .stat-trio { display: flex; gap: 12px; }
.nm-fin .stat-tile {
  flex: 1;
  background: var(--nm-fin-bg);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: var(--nm-fin-neu-sm);
  text-align: center;
}
.nm-fin .stat-icon { font-size: 18px; margin-bottom: 6px; }
.nm-fin .stat-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
}
.nm-fin .stat-val-grn { color: var(--nm-fin-grn); }
.nm-fin .stat-val-red { color: var(--nm-fin-red); }
.nm-fin .stat-val-gld { color: var(--nm-fin-gld); }
.nm-fin .stat-name {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  margin-top: 2px;
}

/* Right column: spending rings */
.nm-fin .spend-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--nm-fin-neu);
  display: flex;
  gap: 20px;
  align-items: center;
}
.nm-fin .ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.nm-fin .ring-wrap svg { width: 100%; height: 100%; }
.nm-fin .ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.nm-fin .ring-pct {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
}
.nm-fin .ring-sub {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
}
.nm-fin .spend-info { flex: 1; }
.nm-fin .spend-cats { display: flex; flex-direction: column; gap: 8px; }
.nm-fin .cat-row { display: flex; align-items: center; gap: 10px; }
.nm-fin .cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nm-fin .cat-dot-gld { background: var(--nm-fin-gld); }
.nm-fin .cat-dot-red { background: var(--nm-fin-red); }
.nm-fin .cat-dot-grn { background: var(--nm-fin-grn); }
.nm-fin .cat-dot-txt { background: var(--nm-fin-txt); }
.nm-fin .cat-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-fin-txt2);
  flex: 1;
}
.nm-fin .cat-bar-wrap {
  flex: 2;
  height: 5px;
  border-radius: 3px;
  background: var(--nm-fin-ib);
  box-shadow: var(--nm-fin-neu-sm-in);
}
.nm-fin .cat-bar { height: 100%; border-radius: 3px; }
.nm-fin .cat-bar-gld { background: var(--nm-fin-gld); }
.nm-fin .cat-bar-red { background: var(--nm-fin-red); }
.nm-fin .cat-bar-grn { background: var(--nm-fin-grn); }
.nm-fin .cat-bar-txt { background: var(--nm-fin-txt); }
.nm-fin .cat-amt {
  font-size: 11px;
  color: var(--nm-fin-txt);
  font-weight: 600;
  font-family: 'Josefin Sans', system-ui, sans-serif;
  width: 50px;
  text-align: right;
}

/* Transactions */
.nm-fin .tx-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--nm-fin-neu);
  flex: 1;
}
.nm-fin .tx-list { display: flex; flex-direction: column; gap: 2px; }
.nm-fin .tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: all 0.2s;
  cursor: pointer;
}
.nm-fin .tx-item:hover {
  background: var(--nm-fin-ib);
  box-shadow: var(--nm-fin-neu-sm-in);
}
.nm-fin .tx-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--nm-fin-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--nm-fin-neu-sm);
  flex-shrink: 0;
}
.nm-fin .tx-meta { flex: 1; }
.nm-fin .tx-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-fin-txt2);
}
.nm-fin .tx-date {
  font-size: 10px;
  color: var(--nm-fin-txt);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.nm-fin .tx-amount { text-align: right; }
.nm-fin .tx-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
}
.nm-fin .tx-val.debit  { color: var(--nm-fin-red); }
.nm-fin .tx-val.credit { color: var(--nm-fin-grn); }
.nm-fin .tx-cat {
  font-size: 9px;
  color: var(--nm-fin-txt);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Quick actions */
.nm-fin .actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nm-fin .action-btn {
  flex: 1;
  min-width: 80px;
  background: var(--nm-fin-bg);
  border: none;
  cursor: pointer;
  border-radius: 18px;
  padding: 14px 10px 12px;
  box-shadow: var(--nm-fin-neu-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  font-family: 'Josefin Sans', system-ui, sans-serif;
}
.nm-fin .action-btn:hover {
  box-shadow: 8px 8px 18px var(--nm-fin-sd), -8px -8px 18px var(--nm-fin-sl);
  transform: translateY(-1px);
}
.nm-fin .action-btn:active {
  box-shadow: var(--nm-fin-neu-sm-in);
  transform: scale(0.97);
}
.nm-fin .action-icon { font-size: 20px; }
.nm-fin .action-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
}
.nm-fin .action-btn.accent {
  background: linear-gradient(145deg, var(--nm-fin-gld), var(--nm-fin-gl3));
  box-shadow: 8px 8px 18px rgba(180, 130, 40, 0.3), -6px -6px 14px var(--nm-fin-sl);
}
.nm-fin .action-btn.accent .action-name,
.nm-fin .action-btn.accent .action-icon { color: rgba(255, 248, 220, 0.9); }
.nm-fin .action-btn.accent:active { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2); }

@media (max-width: 880px) {
  .nm-fin .card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-fin .card-shimmer,
  .nm-fin .credit-card,
  .nm-fin .action-btn { transition: none; animation: none; }
  .nm-fin .card-wrap:hover .credit-card { transform: none; }
}