* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at top, #0c0f1d, #000);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter', sans-serif;
  color: #fff;
}

/* Perspective scene */
.scene {
  perspective: 1400px;
}

/* CARD */
.bmw-card {
  width: 380px;
  padding: 28px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
    radial-gradient(circle at top left, #1f2cff55, transparent 60%);
  backdrop-filter: blur(18px);
  transform-style: preserve-3d;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.7),
    0 0 30px rgba(0,212,255,0.2);
  position: relative;
}

/* Neon glow */
.bmw-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, #1f2cff, #00d4ff, #ff003c);
  opacity: 0.25;
  z-index: -1;
}

/* IMAGE */
.image-box {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bmw-card:hover img {
  transform: scale(1.08);
}

/* Badge */
.badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.7rem;
  letter-spacing: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f2cff, #00d4ff);
  font-family: 'Orbitron', sans-serif;
}

/* Text */
.model {
  margin-top: 18px;
  font-size: 2.3rem;
  font-family: 'Orbitron', sans-serif;
}

.tagline {
  margin-top: 6px;
  color: #aaa;
  font-size: 0.95rem;
}

/* Specs */
.specs {
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
}

.specs h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
}

.specs p {
  font-size: 0.7rem;
  color: #aaa;
}

/* 3D depth */
.bmw-card * {
  transform: translateZ(40px);
}