/* ============================================================
   Neutron Systems — SVG Icon System
   Usage: <svg class="icon icon-md"><use href="icons.svg#icon-home"/></svg>
   ============================================================ */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }

/* Product line icon tiles */
.icon-tile {
  width: 52px; height: 52px;
  background: var(--black);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}
.icon-tile-light {
  width: 52px; height: 52px;
  background: var(--gray-100);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-800);
  flex-shrink: 0;
}
.icon-tile-outline {
  width: 52px; height: 52px;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

/* Feature list with icon prefix */
.icon-list { list-style: none; }
.icon-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--gray-200);
  font-size: 15px; color: var(--gray-600);
}
.icon-list li:last-child { border-bottom: none; }
.icon-list-dark li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 15px; color: rgba(255,255,255,0.5);
}
.icon-list-dark li:last-child { border-bottom: none; }
.icon-list .check-icon, .icon-list-dark .check-icon {
  color: var(--gray-400); margin-top: 2px;
}
.icon-list-dark .check-icon { color: rgba(255,255,255,0.3); }

/* Social icons */
.social-links { display: flex; gap: 16px; align-items: center; }
.social-link {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.social-link:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}