/* ============================================================
   TAGHLEEFY — Value Props Bar  v1.0  |  D2C single-brand  |  RTL
   ============================================================ */

:root {
  --tagh-ink-900:     #0A121F;
  --tagh-ink-700:     #16283F;
  --tagh-navy-3:      #1E2A3B;
  --tagh-teal:        #0E9F9A;
  --tagh-teal-hover:  #0C8580;
  --tagh-teal-dim:    rgba(14,159,154,0.14);
  --tagh-amber:       #C68A2E;
  --tagh-amber-dim:   rgba(198,138,46,0.14);
  --tagh-text:        #E2E8F0;
  --tagh-muted:       #94A3B8;
  --tagh-white:       #FFFFFF;
  --tagh-ease:        220ms cubic-bezier(0.2,0,0.2,1);
  --tagh-glow-teal:   0 0 32px rgba(14,159,154,0.30);
}

.tagh-vp, .tagh-vp * { box-sizing: border-box; }

.tagh-vp {
  position: relative;
  background: #0b1528;
  padding: 56px 0;
  direction: rtl;
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', system-ui, sans-serif;
}

.tagh-vp__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.tagh-vp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 980px) {
  .tagh-vp__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tagh-vp__grid { grid-template-columns: 1fr; }
}

.tagh-vp__card {
  position: relative;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(14,159,154,0.4);
  border-radius: 18px;
  padding: 24px;
  text-align: right;
  transition: transform var(--tagh-ease), border-color var(--tagh-ease), box-shadow var(--tagh-ease), background var(--tagh-ease);
  animation: taghVpIn .6s ease both;
  animation-delay: var(--tagh-vp-delay, 0ms);
}

.tagh-vp__card:hover {
  transform: translateY(-4px);
  border-color: rgba(14,159,154,0.7);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--tagh-glow-teal);
}

.tagh-vp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--tagh-teal-dim);
  border: 1px solid rgba(14,159,154,0.3);
  color: var(--tagh-teal);
  margin-bottom: 18px;
}
.tagh-vp__icon svg { width: 22px; height: 22px; }

.tagh-vp__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tagh-white);
  margin: 0 0 8px;
  line-height: 1.4;
}

.tagh-vp__desc {
  font-size: .875rem;
  color: var(--tagh-muted);
  line-height: 1.75;
  margin: 0;
}

@keyframes taghVpIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tagh-vp__card { animation: none; }
}