/* ============================================
   EVSELab Card Styles
   ============================================ */

/* Base Card */
.card-light {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.card-light:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  border-color: #0891B2;
}

/* Product Card */
.product-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
}
.product-card .product-image img { transition: transform 0.4s ease; }
.product-card:hover .product-image img { transform: scale(1.05); }
.product-card.featured { border: 2px solid #0891B2; }

/* Tech Card */
.tech-card {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.tech-card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); }

/* Service Card */
.service-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(8, 145, 178, 0.3); }

/* Job Card */
.job-card {
  background: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 1.5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.job-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15); }

/* Value Card */
.value-card {
  background: white;
  border-radius: 1.5rem;
  transition: all 0.4s ease;
}
.value-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1); }

/* Solution Card */
.solution-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.5rem;
  transition: all 0.3s ease;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.12); }

/* Contact Card */
.contact-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.5rem;
  transition: all 0.3s ease;
}
.contact-card:hover { transform: translateY(-4px); border-color: rgba(8, 145, 178, 0.3); }

/* Skill Tag */
.skill-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(8, 145, 178, 0.08);
  border: 1px solid rgba(8, 145, 178, 0.15);
  border-radius: 9999px;
  font-size: 0.875rem;
  color: #0891B2;
  transition: all 0.2s ease;
}
.skill-tag:hover { background: rgba(8, 145, 178, 0.15); }

/* Stat Card */
.stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.08);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(8, 145, 178, 0.25);
  border-color: #0891B2;
}

/* Colorful Cards */
.card-cyan {
  background: linear-gradient(135deg, #ecfeff 0%, #ffffff 100%);
  border: 1px solid #a5f3fc;
}
.card-cyan:hover { border-color: #06b6d4; }

.card-emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  border: 1px solid #a7f3d0;
}
.card-emerald:hover { border-color: #10b981; }

.card-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
  border: 1px solid #ddd6fe;
}
.card-purple:hover { border-color: #8b5cf6; }

.card-amber {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border: 1px solid #fde68a;
}
.card-amber:hover { border-color: #f59e0b; }

.card-rose {
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);
  border: 1px solid #fecdd3;
}
.card-rose:hover { border-color: #f43f5e; }

/* Section Gradients */
.section-gradient-cyan {
  background: linear-gradient(135deg, #ecfeff 0%, #ffffff 50%, #f3e8ff 100%);
}
.section-gradient-emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 50%, #f0fdfa 100%);
}
.section-gradient-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 50%, #ecfeff 100%);
}

/* Timeline Line */
.timeline-line {
  background: linear-gradient(90deg, #06b6d4, #8b5cf6, #10b981);
}