style.css

.process-pill {
    @apply rounded-full py-3 px-6 flex items-center;
    @apply shadow-sm backdrop-blur-sm bg-opacity-80;
    @apply transition-all duration-300 hover:shadow-md;
    position: relative;
    overflow: hidden;
}

.process-pill::before {
    content: '';
    @apply absolute inset-0;
    background: rgba(255, 255, 255, 0.7);
    z-index: -1;
    border-radius: 9999px;
}

.process-icon {
    @apply flex-shrink-0 h-10 w-10 rounded-full bg-white flex items-center justify-center;
    @apply shadow-sm text-gray-700;
}

.process-content {
    @apply ml-4;
}

.process-title {
    @apply text-gray-800 font-medium;
    font-size: 15px;
}

.process-desc {
    @apply text-gray-600 text-sm mt-1;
}

body {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(200, 253, 255, 0.2) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(200, 240, 210, 0.2) 0%, transparent 20%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .process-pill {
        @apply py-2 px-4;
    }
    .process-icon {
        @apply h-8 w-8;
    }
    .process-title {
        font-size: 14px;
    }
}