/* ==========================================================
   features.css — المميزات (Why Us)
   ========================================================== */
:root {
  --ebmnt1-features-grid-gap: 1.2em;
  --ebmnt1-features-grid-line-color: var(--ebmnt1-color-line-faint);
  --ebmnt1-features-grid-cross-color: var(--ebmnt1-color-text-muted);
  --ebmnt1-features-glow-color: var(--ebmnt1-color-glow-purple);

  --ebmnt1-features-visual-bg: linear-gradient(160deg, var(--ebmnt1-color-secondary-to), var(--ebmnt1-color-page-bg) 60%);
  --ebmnt1-features-visual-border-color: var(--ebmnt1-color-border-card);
  --ebmnt1-features-visual-title-color: var(--ebmnt1-color-white);
  --ebmnt1-features-visual-text-color: var(--ebmnt1-color-text-soft);

  --ebmnt1-features-values-bg: linear-gradient(200deg, var(--ebmnt1-color-primary-tint-20), var(--ebmnt1-color-page-bg) 60%);
  --ebmnt1-features-values-border-color: var(--ebmnt1-color-border-card);
  --ebmnt1-features-globe-ring-color: var(--ebmnt1-color-primary-soft);
  --ebmnt1-features-value-title-color: var(--ebmnt1-color-white);
  --ebmnt1-features-value-text-color: var(--ebmnt1-color-text-soft);
  --ebmnt1-features-value-icon-color: var(--ebmnt1-color-gradient-from);

  --ebmnt1-features-stats-bg: linear-gradient(180deg, var(--ebmnt1-color-white-alpha-05), var(--ebmnt1-color-page-bg));
  --ebmnt1-features-stats-border-color: var(--ebmnt1-color-border-card);
  --ebmnt1-features-stats-divider-color: var(--ebmnt1-color-border-filter);
  --ebmnt1-features-stat-number-stroke-color: var(--ebmnt1-color-primary);
  --ebmnt1-features-stat-number-fill-color: transparent;
  --ebmnt1-features-stat-number-font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.1rem);
  --ebmnt1-features-stat-title-color: var(--ebmnt1-color-white);
  --ebmnt1-features-stat-title-font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  --ebmnt1-features-stat-text-color: var(--ebmnt1-color-text-soft);
}

.ebmnt1-features__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ebmnt1-features-grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--ebmnt1-features-grid-line-color) 1px, transparent 1px),
    radial-gradient(ellipse 50% 40% at 50% 100%, var(--ebmnt1-features-glow-color), transparent 70%);
  background-size: 6rem 6rem, 6rem 6rem, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, var(--ebmnt1-color-black), transparent);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, var(--ebmnt1-color-black), transparent);
  opacity: 0.5;
}

.ebmnt1-features__grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ebmnt1-features-grid-gap);
}

.ebmnt1-features__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ebmnt1-features-grid-gap);
}

/* ---------- visual card ---------- */
.ebmnt1-features__visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
  padding: 1.4em;
  border: 1px solid var(--ebmnt1-features-visual-border-color);
  border-radius: 1.6em;
  background: var(--ebmnt1-features-visual-bg);
  text-align: start;
  overflow: hidden;
}

.ebmnt1-features__visual-image {
  width: 100%;
  max-width: 24rem;
  align-self: center;
  transition: transform 0.6s ease;
}

.ebmnt1-features__visual:hover .ebmnt1-features__visual-image {
  transform: translateY(-6px) scale(1.03);
}

.ebmnt1-features__visual-title {
  color: var(--ebmnt1-features-visual-title-color);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.65rem);
}

.ebmnt1-features__visual-text {
  color: var(--ebmnt1-features-visual-text-color);
}

/* ---------- values card (vision / mission / values) ---------- */
.ebmnt1-features__values {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4em;
  padding: 1.4em;
  border: 1px solid var(--ebmnt1-features-values-border-color);
  border-radius: 1.6em;
  background: var(--ebmnt1-features-values-bg);
  text-align: start;
  overflow: hidden;
}

.ebmnt1-features__globe {
  position: absolute;
  inset-inline-end: -6rem;
  bottom: -6rem;
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--ebmnt1-features-globe-ring-color);
  background:
    repeating-radial-gradient(ellipse 40% 100% at 50% 50%, transparent 0 14px, var(--ebmnt1-features-globe-ring-color) 14px 15px),
    repeating-linear-gradient(0deg, transparent 0 22px, var(--ebmnt1-features-globe-ring-color) 22px 23px);
  opacity: 0.35;
  pointer-events: none;
  animation: ebmnt1-features-globe-spin 40s linear infinite;
}

.ebmnt1-features__value {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.ebmnt1-features__value-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}

.ebmnt1-features__value-icon {
  flex: none;
  color: var(--ebmnt1-features-value-icon-color);
  font-size: clamp(1.17rem, 1.105rem + 0.2vw, 1.404rem);
}

.ebmnt1-features__value-title {
  color: var(--ebmnt1-features-value-title-color);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
}

.ebmnt1-features__value-text {
  color: var(--ebmnt1-features-value-text-color);
}

/* ---------- stats ---------- */
.ebmnt1-features__stats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4em;
  padding: 1.6em;
  border: 1px solid var(--ebmnt1-features-stats-border-color);
  border-radius: 1.6em;
  background: var(--ebmnt1-features-stats-bg);
  text-align: start;
}

.ebmnt1-features__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--ebmnt1-features-stats-divider-color);
}

.ebmnt1-features__stat:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ebmnt1-features__stat-number {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  direction: ltr;
  justify-content: flex-end;
  color: var(--ebmnt1-features-stat-number-fill-color);
  -webkit-text-stroke: 1.5px var(--ebmnt1-features-stat-number-stroke-color);
  font-size: var(--ebmnt1-features-stat-number-font-size);
  font-weight: 700;
  line-height: 1.1;
}

[dir="rtl"] .ebmnt1-features__stat-number {
  justify-content: flex-start;
}

.ebmnt1-features__stat-title {
  color: var(--ebmnt1-features-stat-title-color);
  font-size: var(--ebmnt1-features-stat-title-font-size);
  font-weight: 500;
}

.ebmnt1-features__stat-text {
  color: var(--ebmnt1-features-stat-text-color);
}

/* ---------- benefits grid (4 cards, no phone image) ---------- */
.ebmnt1-features__benefits {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ebmnt1-features-grid-gap);
}

.ebmnt1-features__benefits > .ebmnt1-card {
  flex: 1 1 100%;
}

@keyframes ebmnt1-features-globe-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 768px) {
  .ebmnt1-features__benefits > .ebmnt1-card {
    flex: 1 1 calc(50% - var(--ebmnt1-features-grid-gap));
  }

  .ebmnt1-features__stats {
    flex-direction: row;
  }

  .ebmnt1-features__stat {
    padding-bottom: 0;
    border-bottom: 0;
    padding-inline-end: 1.4em;
    border-inline-end: 1px solid var(--ebmnt1-features-stats-divider-color);
  }

  .ebmnt1-features__stat:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
  }
}

@media (min-width: 1024px) {
  .ebmnt1-features__row {
    flex-direction: row;
  }

  .ebmnt1-features__visual {
    flex: 0 0 34%;
  }

  .ebmnt1-features__benefits > .ebmnt1-card {
    flex: 1 1 calc(25% - var(--ebmnt1-features-grid-gap));
  }
}

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