/* ============================================
   CARDS
   ============================================ */
.card {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(232,35,42,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232,35,42,.05) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--transition-base);
}
.card:hover {
  box-shadow: 0 20px 48px rgba(232,35,42,.14), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-6px);
  border-color: rgba(232,35,42,.25);
  background: rgba(255,255,255,.75);
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 72px; height: 72px;
  background: var(--color-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-primary);
  font-size: 1.5rem;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  overflow: hidden;
}
.card:hover .card-icon {
  background: linear-gradient(135deg, rgba(255,77,83,.32), rgba(232,35,42,.14));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 10px 28px rgba(232,35,42,.22), inset 0 1px 1px rgba(255,255,255,.75), inset 0 -8px 12px -6px rgba(232,35,42,.2);
  color: var(--color-primary-dark);
  transform: scale(1.08) rotate(-3deg);
}
.card-icon lottie-player { width: 56px; height: 56px; }

.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); color: var(--color-dark); }
.card p  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); }

/* ── Stacked Image Pop-up Effect ── */
.img-stack {
  position: relative;
  width: 100%; height: 460px;
  display: flex; align-items: center; justify-content: center;
}
.img-stack-item {
  position: absolute;
  width: 260px; height: 195px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease, z-index 0s;
  cursor: pointer;
}
.img-stack-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Default stacked positions — evenly fanned so all three stay visible */
.img-stack-item:nth-child(1) { transform: rotate(-9deg) translate(-170px, 30px); z-index: 1; }
.img-stack-item:nth-child(2) { transform: rotate(0deg) translate(0, -30px) scale(1.08); z-index: 3; }
.img-stack-item:nth-child(3) { transform: rotate(9deg) translate(170px, 30px); z-index: 2; }

/* Hover: each card pops up */
.img-stack-item:nth-child(1):hover { transform: rotate(-3deg) translate(-170px, -25px) scale(1.14); z-index: 10; box-shadow: 0 24px 56px rgba(0,0,0,.22); }
.img-stack-item:nth-child(2):hover { transform: rotate(0deg) translate(0, -65px) scale(1.18); z-index: 10; box-shadow: 0 24px 56px rgba(0,0,0,.22); }
.img-stack-item:nth-child(3):hover { transform: rotate(3deg) translate(170px, -25px) scale(1.14); z-index: 10; box-shadow: 0 24px 56px rgba(0,0,0,.22); }

/* ── Section visual with stacked images ── */
.section-visual { position: relative; }

/* Feature card */
.feature-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* Stat card */
.stat-card {
  text-align: center; padding: var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-number {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary); line-height: 1;
}
.stat-card .stat-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Team card */
.team-card {
  text-align: center; background: var(--color-white);
  border-radius: var(--radius-xl); padding: var(--space-8);
  border: 1px solid var(--color-border); transition: all var(--transition-base);
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.team-card .avatar {
  width: 80px; height: 80px; border-radius: var(--radius-full);
  margin: 0 auto var(--space-4); object-fit: cover;
  border: 3px solid var(--color-primary-bg);
}
.team-card h4 { font-size: var(--text-lg); color: var(--color-dark); }
.team-card .role { font-size: var(--text-sm); color: var(--color-primary); margin-top: var(--space-1); }

/* Blog card */
.blog-card {
  background: var(--color-white); border-radius: var(--radius-xl);
  overflow: hidden; border: 1px solid var(--color-border); transition: all var(--transition-base);
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-card .blog-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--color-gray-100); }
.blog-card .blog-body { padding: var(--space-6); }
.blog-card .blog-meta {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.blog-card h3 { font-size: var(--text-lg); color: var(--color-dark); margin-bottom: var(--space-3); line-height: var(--lh-snug); }
.blog-card h3 a:hover { color: var(--color-primary); }
.blog-card p { font-size: var(--text-sm); color: var(--color-text-muted); }