/* Features section (icons + layout polish) */

.features .feature-grid {
  /* spacing handled by landing index.css; keep safe defaults */
}

.features .feature-item { text-align: center; will-change: transform, box-shadow; transform-style: preserve-3d; }

.feature-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin: 0 auto 12px;
}

/* Hover/JS-enhanced state: trigger on mouse over instead of click */
.features .feature-item:hover,
.features .feature-item.is-hovered {
  transform: translateY(-2px) scale(1.01) rotateX(var(--feat-rx, 0deg)) rotateY(var(--feat-ry, 0deg));
  box-shadow: var(--shadow-lg);
}
.features .feature-item:hover .feature-icon-wrapper,
.features .feature-item.is-hovered .feature-icon-wrapper {
  transform: translateZ(12px) scale(1.06);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .features .feature-item:hover,
  .features .feature-item.is-hovered {
    transform: translateY(-2px); /* no tilt for reduced motion */
  }
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  color: var(--pink-primary);
  stroke: currentColor;
}

.feature-title {
  font-size: 18px;
  font-weight: 600;
  margin: 6px 0 6px;
  letter-spacing: -0.02em;
  color: var(--text-light);
}

.feature-description {
  font-size: 14px;
  color: var(--text-gray);
  line-height: 1.55;
}

/* RTL: typography tracking */
html[dir="rtl"] .feature-title,
html[dir="rtl"] .feature-description { letter-spacing: 0; }