/* Vitenge Pattern Base */
.service-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.vitenge-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Authentic Kenyan Art Motifs */
.vitenge-art {
  position: absolute;
  width: 160px;
  height: 160px;
  opacity: 0.07;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  background-repeat: repeat;
}

.service-card:hover .vitenge-art {
  opacity: 0.14;
  transform: scale(1.1) rotate(5deg);
}

.vitenge-tr { top: -40px; right: -40px; }
.vitenge-bl { bottom: -40px; left: -40px; }

/* 1. Maasai Shield (Seme) - Ovoid with geometric spine */
.v-shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 C30 5 20 30 20 50 C20 70 30 95 50 95 C70 95 80 70 80 50 C80 30 70 5 50 5' fill='none' stroke='%23C40233' stroke-width='2'/%3E%3Cline x1='50' y1='5' x2='50' y2='95' stroke='%23C40233' stroke-width='2'/%3E%3Cpath d='M20 50 L80 50 M35 25 L65 25 M35 75 L65 75' stroke='%23C40233' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center;
}

/* 2. Beaded Circles (Enkopit) - Concentric dots */
.v-beads {
  background-image: radial-gradient(circle, #1DBFA3 2px, transparent 2.5px),
                    radial-gradient(circle, #FFD700 1.5px, transparent 2px);
  background-size: 20px 20px, 30px 30px;
  background-position: 0 0, 15px 15px;
}

/* 3. Arrowhead Repeats - Linear geometric triangles */
.v-arrows {
  background: linear-gradient(45deg, #F4A261 25%, transparent 25%) 0 0,
              linear-gradient(-45deg, #F4A261 25%, transparent 25%) 0 0,
              linear-gradient(45deg, transparent 75%, #F4A261 75%) 0 0,
              linear-gradient(-45deg, transparent 75%, #F4A261 75%) 0 0;
  background-size: 20px 40px;
}

/* 4. Swahili Swirls (Mji) - Paisley-inspired curves */
.v-swirls {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 50 Q30 10 50 50 T90 50' fill='none' stroke='%23000080' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%23000080'/%3E%3Cpath d='M30 30 Q50 10 70 30' fill='none' stroke='%23000080' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* 5. Interlocking Diamonds (Mashujaa) - Unity grid */
.v-diamonds-grid {
  background-image: linear-gradient(45deg, #264653 25%, transparent 25%), 
                    linear-gradient(-45deg, #264653 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #264653 75%), 
                    linear-gradient(-45deg, transparent 75%, #264653 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px 20px, 20px 0;
}

/* 6. Crossed Spears (Eremet) - Protective symbols */
.v-spears {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cline x1='20' y1='80' x2='80' y2='20' stroke='%232A9D8F' stroke-width='2'/%3E%3Cline x1='20' y1='20' x2='80' y2='80' stroke='%232A9D8F' stroke-width='2'/%3E%3Cpath d='M75 15 L85 25 L80 30 Z M15 15 L25 5 L30 10 Z' fill='%232A9D8F'/%3E%3C/svg%3E");
  background-size: 70px 70px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Simplified Standalone Icon Styling */
.card-icon-standalone {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  z-index: 2;
  position: relative;
  height: 100px;
}

.icon-img-standalone {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Pure standalone look - only a very subtle shadow for lift */
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.05));
}

.service-card:hover .icon-img-standalone {
  transform: translateY(-5px) scale(1.05);
}