<div class="bot-card">
  <div class="bot-art">
    <svg viewBox="0 0 130 130" aria-hidden="true">
      <path d="M65 115 L65 70" stroke="#5a6a44" stroke-width="2.5" fill="none" class="bot-stem"/>
      <ellipse class="bot-leaf bot-leaf-1" cx="45" cy="90" rx="6" ry="15" fill="#7a8d5f" transform="rotate(-50 45 90)"/>
      <ellipse class="bot-leaf bot-leaf-2" cx="85" cy="90" rx="6" ry="15" fill="#7a8d5f" transform="rotate(50 85 90)"/>
      <g class="bot-petal">
        <ellipse cx="65" cy="40" rx="9" ry="14" fill="#d4a3c2"/>
        <ellipse cx="80" cy="55" rx="9" ry="14" fill="#d4a3c2" transform="rotate(72 80 55)"/>
        <ellipse cx="74" cy="74" rx="9" ry="14" fill="#d4a3c2" transform="rotate(144 74 74)"/>
        <ellipse cx="56" cy="74" rx="9" ry="14" fill="#d4a3c2" transform="rotate(216 56 74)"/>
        <ellipse cx="50" cy="55" rx="9" ry="14" fill="#d4a3c2" transform="rotate(288 50 55)"/>
        <circle cx="65" cy="55" r="6" fill="#e8c878"/>
      </g>
    </svg>
  </div>
  <div class="bot-tier-tag">Tier III</div>
  <div class="bot-tier-name">Bloom</div>
  <div class="bot-tier-desc">All collections, advance previews, and private viewings.</div>
</div>

.bot-card {
  text-align: center;
  padding: 36px 24px 30px;
  background: linear-gradient(180deg, #f0ede1 0%, #e6e2d1 100%);
  border: 1px solid rgba(66,82,54,0.2);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
  min-height: 320px;
  max-width: 240px;
  margin: 24px auto;
}
.bot-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -16px rgba(66, 82, 54, 0.25);
}
.bot-art {
  width: 130px;
  height: 130px;
  margin: 0 auto 20px;
}
.bot-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bot-art .bot-leaf,
.bot-art .bot-petal,
.bot-art .bot-stem {
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 50% 100%;
}
.bot-card:hover .bot-art .bot-leaf-1 { transform: rotate(-6deg) translateY(-2px); }
.bot-card:hover .bot-art .bot-leaf-2 { transform: rotate(6deg) translateY(-2px); }
.bot-card:hover .bot-art .bot-petal {
  transform-origin: 65px 55px;
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .bot-art .bot-leaf, .bot-art .bot-petal { transition: none; }
}
.bot-tier-tag {
  font-family: "Italiana", Georgia, serif;
  color: #6b7a52;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bot-tier-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #2d3a22;
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 12px;
}
.bot-tier-desc {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #6b7a52;
  font-size: 13px;
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid rgba(66,82,54,0.2);
}