@layer components {
  .timer-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem 0.5rem;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .timer-box:hover {
    transform: translateY(-10px);
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }

  .number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }

  .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #d4af37;
    margin-top: 0.5rem;
  }
}