/* Services Page Styles */

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-base { 
    @apply ring-1 ring-white/10 bg-white/5 rounded-2xl shadow-md hover:shadow-xl transition;
}

.glass-effect { 
    backdrop-filter: blur(4px); 
    background: rgba(255,255,255,0.04); 
}

.section-container { 
    @apply container mx-auto max-w-screen-xl px-5 lg:px-8 space-y-16;
}

.card-base:hover,
.card-base:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.4);
}

.card-base { 
    transition: transform .2s ease, box-shadow .2s ease; 
}

.loading-dots {
    animation: loading 1.4s infinite ease-in-out both;
}

.loading-dots:nth-child(1) { animation-delay: -0.32s; }
.loading-dots:nth-child(2) { animation-delay: -0.16s; }

@keyframes loading {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.badge-tm      { @apply bg-emerald-600/90 text-[10px] font-bold text-white px-2 py-0.5 rounded-full; }
.badge-domain  { @apply bg-sky-600/90    text-[10px] font-bold text-white px-2 py-0.5 rounded-full; }
.badge-hot     { @apply bg-orange-500/90 text-[10px] font-bold text-white px-2 py-0.5 rounded-full; }
.engine-grid   { @apply grid md:grid-cols-2 lg:grid-cols-3 gap-6; }

/* Automation Badges */
.automation-badges {
    @apply flex flex-wrap gap-2 justify-center mt-4;
}

.automation-badge {
    @apply inline-block px-2 py-1 rounded-full text-xs font-bold text-white;
}

.automation-badge.ai-generated {
    @apply bg-indigo-600;
}

.automation-badge.auto-deploy {
    @apply bg-emerald-600;
}

.automation-badge.no-human {
    @apply bg-orange-500;
}

/* Service Card Styles */
.service-card {
    @apply glass-effect rounded-xl p-6 border border-white/20 transition-all duration-300;
}

.service-card:hover {
    @apply border-white/40 transform -translate-y-1;
}

.service-icon {
    @apply w-16 h-16 rounded-lg flex items-center justify-center mx-auto mb-4;
}

.service-title {
    @apply text-xl font-bold text-white mb-2;
}

.service-description {
    @apply text-gray-300 mb-4;
}

.service-features {
    @apply text-sm text-gray-400;
}

.service-feature {
    @apply flex items-center mb-1;
}

/* Service Detail Styles */
.service-detail {
    @apply hidden glass-effect rounded-xl p-6 border border-white/20 mt-4;
}

.service-detail.active {
    @apply block;
}

.service-tabs {
    @apply flex flex-wrap gap-2 mb-4;
}

.service-tab {
    @apply px-3 py-1 rounded-full text-sm font-medium cursor-pointer;
}

.service-tab.active {
    @apply bg-orange-500 text-white;
}

.service-tab:not(.active) {
    @apply bg-white/10 text-white hover:bg-white/20;
}

.service-panel {
    @apply hidden;
}

.service-panel.active {
    @apply block;
}

/* Category Navigation */
.category-nav {
    @apply sticky top-20 z-40 bg-white/5 backdrop-blur-md p-4 rounded-xl border border-white/10 mb-8;
}