/* Hood Section Icons - Colorfull SVG Icons */

/* Introduction Icon - Rocket */
.hood-icon-introduction {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z' fill='%23FF6B6B'/%3E%3Cpath d='m12 15-3-3a22.354 22.354 0 0 1 4-5.39 6 6 0 0 1 7.14 7.14 22.354 22.354 0 0 1-5.39 4L12 15z' fill='%23FF6B6B'/%3E%3Cpath d='m9 12-4.5 4.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09L9 12z' stroke='%23FF4757' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m12 15-3-3a22.354 22.354 0 0 1 4-5.39 6 6 0 0 1 7.14 7.14 22.354 22.354 0 0 1-5.39 4L12 15z' stroke='%23FF4757' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Web Instructions Icon - Code Brackets */
.hood-icon-web-instructions {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 18 22 12l-6-6' stroke='%234ECDC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 6l-6 6 6 6' stroke='%234ECDC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 2l3 3-3 3-3-3 3-3z' fill='%2326A69A'/%3E%3Cpath d='M12 14l3 3-3 3-3-3 3-3z' fill='%2326A69A'/%3E%3C/svg%3E");
}

/* Web Application Icon - Monitor/App */
.hood-icon-web-application {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2' fill='%2345B7D1'/%3E%3Cpath d='M8 21h8' stroke='%23298CC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 17v4' stroke='%23298CC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 7h12v6H6z' fill='%23FFFFFF'/%3E%3Cpath d='M8 9h8v2H8z' fill='%23E3F2FD'/%3E%3C/svg%3E");
}

/* Integrations Icon - Star/Connections */
.hood-icon-integrations {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23F39C12'/%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' stroke='%23E67E22' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12l2 2 4-4' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Message Channels Icon - Bubbles */
.hood-icon-message-channels {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 8h6a4 4 0 1 1 0 8H9l-4 3v-3H5a4 4 0 1 1 2-8Z' fill='%235C7CFA'/%3E%3Cpath d='M15 6h2a4 4 0 1 1 0 8h-1l-3 2v-2' stroke='%234674F7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Plugins Icon - Puzzle piece */
.hood-icon-plugins {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 3h3a2 2 0 0 1 2 2v1h1a2 2 0 1 1 0 4h-1v2h1a2 2 0 1 1 0 4h-1v1a2 2 0 0 1-2 2H9v-3H8a2 2 0 1 1 0-4h1v-2H8a2 2 0 1 1 0-4h1V5a2 2 0 0 1 2-2Z' fill='%23A66DD4' stroke='%238F57C0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Module Management Icon - Sliders */
.hood-icon-module-management {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 21v-8' stroke='%23FF8A00' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 7V3' stroke='%23FF8A00' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='2' y='7' width='4' height='4' rx='2' fill='%23FFC078'/%3E%3Cpath d='M12 21v-6' stroke='%2322B8CF' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 9V3' stroke='%2322B8CF' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='10' y='9' width='4' height='4' rx='2' fill='%2390E0EF'/%3E%3Cpath d='M20 21v-10' stroke='%23FAB005' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M20 7V3' stroke='%23FAB005' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='18' y='13' width='4' height='4' rx='2' fill='%23FFE066'/%3E%3C/svg%3E");
}

/* SDK Icon - Brackets with bolt */
.hood-icon-sdk {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7L3 12l4 5' stroke='%2345D39E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 7l4 5-4 5' stroke='%2345D39E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7l-2 4h3l-1 5 3-5h-3l1-4Z' fill='%232BBF6B'/%3E%3C/svg%3E");
}

/* Mobile SDK Icon - Smartphone with code */
.hood-icon-mobile-sdk {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2' fill='%235C7CFA' stroke='%234674F7' stroke-width='1.5'/%3E%3Crect x='7' y='4' width='10' height='14' fill='%23E3EDFF'/%3E%3Ccircle cx='12' cy='20' r='1' fill='%234674F7'/%3E%3Cpath d='M9 8l2 2 4-4' stroke='%234674F7' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12h6' stroke='%234674F7' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M9 14h4' stroke='%234674F7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Deep section icons */
.hood-icon-android { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233DDC84' d='M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z'/%3E%3C/svg%3E"); }
.hood-icon-ios { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23555555' d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E"); }
.hood-icon-web-sdk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); }
.hood-icon-web2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%236C5CE7'/%3E%3Cpath d='M6 12h12' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 6v12' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.hood-icon-advanced { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1 3-6z' fill='%23E17055'/%3E%3C/svg%3E"); }
.hood-icon-api { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7h6v10H9z' fill='%232D98DA'/%3E%3Cpath d='M5 12h14' stroke='%23006EE6' stroke-width='2'/%3E%3C/svg%3E"); }
.hood-icon-settings { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z' fill='%23FFA94D'/%3E%3Cpath d='M3 12h3m12 0h3M12 3v3m0 12v3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3 5.6 18.4' stroke='%23FF922B' stroke-width='2'/%3E%3C/svg%3E"); }
.hood-icon-start { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l6 6L20 6' stroke='%2300C853' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.hood-icon-tag-manager { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='3' fill='%23009688'/%3E%3Cpath d='M8 12h8' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.hood-icon-push { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a6 6 0 0 1 6 6v4l2 2H4l2-2v-4a6 6 0 0 1 6-6z' fill='%23FF6B6B'/%3E%3C/svg%3E"); }
.hood-icon-wizard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l8-16 8 16H4z' fill='%23B388FF'/%3E%3C/svg%3E"); }
.hood-icon-cases { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='6' width='16' height='12' rx='2' fill='%2300B8D9'/%3E%3Cpath d='M8 6V4h8v2' stroke='%23007EA7' stroke-width='2'/%3E%3C/svg%3E"); }
.hood-icon-ios-push { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 2a6 6 0 0 0-6 6v6H7l5 6 5-6h-3V8a3 3 0 0 1 3-3' fill='%238E8E93'/%3E%3C/svg%3E"); }
.hood-icon-pwa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4z' fill='%2300C2FF'/%3E%3Cpath d='M6 12l3 3 4-6 5 8' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.hood-icon-service-worker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h12M6 5h12M6 12h12' stroke='%23677089' stroke-width='2'/%3E%3C/svg%3E"); }

/* Icon base styles */
.hood-icon-introduction,
.hood-icon-web-instructions,
.hood-icon-web-application,
.hood-icon-integrations,
.hood-icon-message-channels,
.hood-icon-plugins,
.hood-icon-module-management,
.hood-icon-sdk,
.hood-icon-mobile-sdk,
.hood-icon-android,
.hood-icon-ios,
.hood-icon-web-sdk,
.hood-icon-web2,
.hood-icon-advanced,
.hood-icon-api,
.hood-icon-settings,
.hood-icon-start,
.hood-icon-tag-manager,
.hood-icon-push,
.hood-icon-wizard,
.hood-icon-cases,
.hood-icon-ios-push,
.hood-icon-pwa,
.hood-icon-service-worker {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Dark theme adjustments for better visibility */
html[data-theme="dark"] .hood-icon-introduction,
html[data-theme="dark"] .hood-icon-web-instructions,
html[data-theme="dark"] .hood-icon-web-application,
html[data-theme="dark"] .hood-icon-integrations,
html[data-theme="dark"] .hood-icon-message-channels,
html[data-theme="dark"] .hood-icon-plugins,
html[data-theme="dark"] .hood-icon-module-management,
html[data-theme="dark"] .hood-icon-sdk,
html[data-theme="dark"] .hood-icon-mobile-sdk,
html[data-theme="dark"] .hood-icon-android,
html[data-theme="dark"] .hood-icon-ios,
html[data-theme="dark"] .hood-icon-web-sdk,
html[data-theme="dark"] .hood-icon-web2,
html[data-theme="dark"] .hood-icon-advanced,
html[data-theme="dark"] .hood-icon-api,
html[data-theme="dark"] .hood-icon-settings,
html[data-theme="dark"] .hood-icon-start,
html[data-theme="dark"] .hood-icon-tag-manager,
html[data-theme="dark"] .hood-icon-push,
html[data-theme="dark"] .hood-icon-wizard,
html[data-theme="dark"] .hood-icon-cases,
html[data-theme="dark"] .hood-icon-ios-push,
html[data-theme="dark"] .hood-icon-pwa,
html[data-theme="dark"] .hood-icon-service-worker {
  filter: brightness(1.1) contrast(1.1);
}