/* ================================
   CARD COMPONENT
   Feature cards and content cards
   ================================ */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: var(--transition-all);
}

.card:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

/* Feature Card (with icon) */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  background: var(--badge-teal-bg);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal-700);
}

.feature-icon svg {
  width: 2rem;
  height: 2rem;
}

.feature-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.feature-description {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Info Card (with icon and content) */
.info-card {
  background: var(--bg-page);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--badge-green-bg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-green-500);
}

.info-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.info-card-title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.info-card-text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* Infrastructure Card (centered, minimal) */
.infra-card {
  text-align: center;
  padding: 1.5rem;
}

.infra-icon {
  font-size: 1.875rem;
  margin-bottom: 0.75rem;
}

.infra-title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.infra-description {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* Dark Card (for PageSpeed showcase) */
.card-dark {
  background: var(--bg-dark);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  text-align: center;
  color: var(--text-white);
}

.card-dark-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: 0.5rem;
}

.card-dark-subtitle {
  color: var(--color-gray-400);
  margin-bottom: 1rem;
}

.score-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.score-item {
  background: var(--color-gray-800);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
}

.score-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-green-500);
}

.score-label {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  margin-top: 0.25rem;
}

.card-dark-challenge {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-white);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.card-dark-disclaimer {
  margin-top: 1rem;
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}

.card-dark-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--card-link-color);
  font-size: var(--text-sm);
}

.card-dark-link:hover {
  text-decoration: underline;
  color: var(--card-link-color);
}

/* Glowing Button */
.btn-glow {
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--color-green-500);
  color: var(--bg-dark);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 40px rgba(34, 197, 94, 0.4), 0 0 60px rgba(34, 197, 94, 0.2);
  transition: var(--transition-all);
  text-decoration: none;
  animation: glow-pulse 2s ease-in-out infinite;
}

.btn-glow:hover {
  background: var(--color-green-400);
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 0 0 60px rgba(34, 197, 94, 0.5), 0 0 80px rgba(34, 197, 94, 0.3);
  transform: translateY(-2px);
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 40px rgba(34, 197, 94, 0.4), 0 0 60px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 0 0 50px rgba(34, 197, 94, 0.5), 0 0 70px rgba(34, 197, 94, 0.3);
  }
}