/*
 * ═══════════════════════════════════════════════
 *  VELOX — Custom Icon System (BMW M8 Aesthetic)
 * ═══════════════════════════════════════════════
 *  Monochrome line icons, 1.1px stroke, geometric.
 *  Uses CSS mask-image for color inheritance via currentColor/background.
 *
 *  Usage: <span class="icon icon-bolt"></span>
 * ═══════════════════════════════════════════════
 */

/* ─── BASE ─── */
.icon {
  display: inline-block;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Service icons: 20×20 */
.icon-bolt,
.icon-stack,
.icon-cart,
.icon-dashboard,
.icon-gear,
.icon-bot {
  width: 20px;
  height: 20px;
}

/* AI card icons: 16×16 */
.icon-search,
.icon-chat,
.icon-brain,
.icon-mic {
  width: 16px;
  height: 16px;
}

/* Contact icons: 14×14 */
.icon-mail,
.icon-message {
  width: 14px;
  height: 14px;
}

/* ─── SERVICE ICONS ─── */

/* MVP / Lightning bolt */
.icon-bolt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11 1L3 11h6l-2 8 8-10h-6l2-8z' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11 1L3 11h6l-2 8 8-10h-6l2-8z' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* SaaS / Stacked layers */
.icon-stack {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='3' y='10' width='14' height='7' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3Crect x='5' y='5' width='10' height='5' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3Crect x='7' y='1' width='6' height='4' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='3' y='10' width='14' height='7' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3Crect x='5' y='5' width='10' height='5' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3Crect x='7' y='1' width='6' height='4' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* Marketplace / Cart */
.icon-cart {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 3h2l2.5 10h9L18 5H6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='16' r='1.5' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cx='14' cy='16' r='1.5' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 3h2l2.5 10h9L18 5H6' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='16' r='1.5' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cx='14' cy='16' r='1.5' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* Admin Panel / Dashboard */
.icon-dashboard {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='2' y='2' width='16' height='16' rx='2' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M2 7h16M7 7v11' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cx='13' cy='12' r='2' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='2' y='2' width='16' height='16' rx='2' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M2 7h16M7 7v11' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cx='13' cy='12' r='2' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* Automation / Gear with rays */
.icon-gear {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 6v8M6 10h8' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='7' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M10 1v2M10 17v2M1 10h2M17 10h2M3.8 3.8l1.4 1.4M14.8 14.8l1.4 1.4M3.8 16.2l1.4-1.4M14.8 5.2l1.4-1.4' stroke='%23fff' stroke-width='0.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 6v8M6 10h8' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='7' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M10 1v2M10 17v2M1 10h2M17 10h2M3.8 3.8l1.4 1.4M14.8 14.8l1.4 1.4M3.8 16.2l1.4-1.4M14.8 5.2l1.4-1.4' stroke='%23fff' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* AI / Robot face */
.icon-bot {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='4' y='4' width='12' height='10' rx='2' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cx='8' cy='9' r='1' fill='%23fff'/%3E%3Ccircle cx='12' cy='9' r='1' fill='%23fff'/%3E%3Cpath d='M7 17h6M10 14v3' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M2 7h2M16 7h2M2 11h2M16 11h2' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='4' y='4' width='12' height='10' rx='2' stroke='%23fff' stroke-width='1.1'/%3E%3Ccircle cx='8' cy='9' r='1' fill='%23fff'/%3E%3Ccircle cx='12' cy='9' r='1' fill='%23fff'/%3E%3Cpath d='M7 17h6M10 14v3' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M2 7h2M16 7h2M2 11h2M16 11h2' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ─── AI CARD ICONS ─── */

/* RAG / Search with plus */
.icon-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M11 11l4 4' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M5 7h4M7 5v4' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M11 11l4 4' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M5 7h4M7 5v4' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Assistants / Chat bubble */
.icon-chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 3h12v8H6l-4 3V3z' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M5 7h6M5 9h3' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 3h12v8H6l-4 3V3z' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M5 7h6M5 9h3' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Fine-tuning / Neural profile */
.icon-brain {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='6' r='4' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M4 13c0-2.2 1.8-4 4-4s4 1.8 4 4' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M6 5.5l2 1.5 2-1.5' stroke='%23fff' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='6' r='4' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M4 13c0-2.2 1.8-4 4-4s4 1.8 4 4' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M6 5.5l2 1.5 2-1.5' stroke='%23fff' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Voice / Microphone */
.icon-mic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='6' y='1' width='4' height='8' rx='2' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M3 7a5 5 0 0010 0M8 12v3M6 15h4' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='6' y='1' width='4' height='8' rx='2' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M3 7a5 5 0 0010 0M8 12v3M6 15h4' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ─── CONTACT ICONS ─── */

/* Email / Envelope */
.icon-mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='1' y='3' width='12' height='8' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M1 4l6 4 6-4' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='1' y='3' width='12' height='8' rx='1' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M1 4l6 4 6-4' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Telegram / Message bubble */
.icon-message {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 2h12v8H5l-4 3V2z' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 2h12v8H5l-4 3V2z' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
}