.audiowide-regular {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}

 
 /* ===== CARD SECTION ===== */
    .card-section {
      background: #1111111d;
      padding: 60px 20px;
      display: grid;
      grid-template-rows: repeat(3, auto);
      gap: 40px;
      justify-items: center;
    }

    .card-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 1200px;
    }

    .card {
      background: rgba(255, 255, 255, 0.05); /* More transparent */
        backdrop-filter: blur(15px) saturate(150%);
        -webkit-backdrop-filter: blur(15px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.2); /* Optional frosted edge */
        border-radius: 16px;
        padding: 30px;
        color: #fff;
        width: 100%;
        max-width: 300px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }

    .card:hover {
      transform: scale(1.05);
        box-shadow: 0 8px 40px rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.08); /* Slightly brighter on hover */
    }

   .glass-button {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #111;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.retro-button {
  background: linear-gradient(to bottom, #f5f5f5, #dcdcdc);
  border: 2px solid #444;
  border-radius: 1px;
  color: #000;
  width: 150px;;
  padding: 12px 28px;
  font-size: 16px;
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
  box-shadow:
    inset 0 1px 0 #fff,               /* top inner glow */
    0 3px 0 #999,                     /* drop shadow to show depth */
    0 3px 5px rgba(0, 0, 0, 0.2);     /* soft outer shadow */
  text-shadow: 0 1px 0 #fff;         /* light emboss effect */
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

.retro-button:hover {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.3), /* pressed inner shadow */
    0 1px 0 #666;
  transform: translateY(2px);           /* subtle press animation */
}

.retro-button:active {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.3), /* pressed inner shadow */
    0 1px 0 #666;
  transform: translateY(2px);           /* subtle press animation */
}