/* ============================================================
   EcoLag AI — icons.css
   Fancy SVG-based icons used throughout the site
   ============================================================ */

/* Base icon wrapper */
.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Feature icons — 64px geometric */
.icon-feat {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
}
.icon-feat svg { width: 32px; height: 32px; }

.icon-ai      { background: linear-gradient(135deg, #0C3B2E, #1A5C45); border: 1px solid rgba(0,168,89,0.3); }
.icon-secure  { background: linear-gradient(135deg, #1A1A3E, #2D2D6B); border: 1px solid rgba(99,102,241,0.3); }
.icon-trophy  { background: linear-gradient(135deg, #3B2800, #6B4800); border: 1px solid rgba(255,199,44,0.3); }
.icon-dash    { background: linear-gradient(135deg, #0C2A3B, #1A4A5C); border: 1px solid rgba(34,211,238,0.3); }
.icon-report  { background: linear-gradient(135deg, #3B0C0C, #6B1A1A); border: 1px solid rgba(239,68,68,0.3); }
.icon-reward  { background: linear-gradient(135deg, #0C3B2E, #1A5C45); border: 1px solid rgba(0,168,89,0.3); }

/* Step icons */
.step-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-icon svg { width: 36px; height: 36px; }

/* Value card icons — new design */
.value-icon-new {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  flex-shrink: 0;
}
.value-icon-new svg { width: 28px; height: 28px; }