/* === 3D Card mit Tilt + Depth === */
.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
}
.card-3d:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 0 24px var(--cyan, #00e5ff33);
}

/* === Glossy Icon Badge === */
.badge-3d {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 60%),
              linear-gradient(145deg, var(--cyan, #00c2d1), #0891a8);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 4px 12px rgba(0,0,0,0.4);
  border-radius: 16px;
}

/* === Glow Button === */
.btn-3d {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0,194,209,0.35);
}
.btn-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,194,209,0.55);
}

/* === Hero Floating Element === */
.hero-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotateZ(0deg); }
  50% { transform: translateY(-14px) rotateZ(1deg); }
}

/* === Pricing Card Highlight === */
.card-3d.featured {
  box-shadow: 0 12px 32px rgba(0,194,209,0.3), 0 0 40px rgba(0,194,209,0.15);
  border: 1px solid rgba(0,194,209,0.4);
}