/*
======================================================
  SKYNETLABS SVG ICON SYSTEM
  Professional Flaticon-style Icons
  Version: 2025.2.0
======================================================
*/

/* ============================================
   ICON BASE STYLES
   ============================================ */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  transition: all var(--duration-fast) var(--ease-out);
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: inherit;
}

/* ============================================
   ICON SIZES
   ============================================ */

.icon--xs {
  width: 0.875rem;
  height: 0.875rem;
}

.icon--sm {
  width: 1.25rem;
  height: 1.25rem;
}

.icon--md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

.icon--xl {
  width: 2.5rem;
  height: 2.5rem;
}

.icon--2xl {
  width: 3rem;
  height: 3rem;
}

.icon--3xl {
  width: 4rem;
  height: 4rem;
}

.icon--4xl {
  width: 5rem;
  height: 5rem;
}

.icon--hero {
  width: 6rem;
  height: 6rem;
}

/* ============================================
   ICON COLORS
   ============================================ */

.icon--primary {
  fill: var(--skynet-primary);
}

.icon--secondary {
  fill: var(--skynet-secondary);
}

.icon--white {
  fill: var(--white);
}

.icon--muted {
  fill: var(--gray-400);
}

.icon--success {
  fill: var(--success);
}

.icon--warning {
  fill: var(--warning);
}

.icon--error {
  fill: var(--error);
}

.icon--info {
  fill: var(--info);
}

/* Gradient Icon Effect */
.icon--gradient {
  fill: url(#icon-gradient-primary);
}

/* ============================================
   ICON CONTAINERS
   ============================================ */

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: rgba(19, 185, 115, 0.1);
  padding: var(--space-3);
  transition: all var(--duration-normal) var(--ease-out);
}

.icon-box--sm {
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.icon-box--lg {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
}

.icon-box--xl {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
}

.icon-box--primary {
  background: rgba(19, 185, 115, 0.15);
  border: 1px solid rgba(19, 185, 115, 0.2);
}

.icon-box--secondary {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.icon-box--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.icon-box--glow {
  box-shadow: var(--shadow-glow-primary);
}

/* Hover Effects */
.icon-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-primary);
}

.icon-box:hover .icon {
  transform: scale(1.1);
}

/* ============================================
   ICON CIRCLES (For Service Icons)
   ============================================ */

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(19, 185, 115, 0.2), rgba(19, 185, 115, 0.05));
  border: 1px solid rgba(19, 185, 115, 0.3);
  transition: all var(--duration-normal) var(--ease-out);
}

.icon-circle--sm {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-circle--md {
  width: 3.5rem;
  height: 3.5rem;
}

.icon-circle--lg {
  width: 4.5rem;
  height: 4.5rem;
}

.icon-circle--xl {
  width: 6rem;
  height: 6rem;
}

.icon-circle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow-primary);
  border-color: var(--skynet-primary);
}

/* ============================================
   SERVICE ICON STYLES
   ============================================ */

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(19, 185, 115, 0.15), rgba(19, 185, 115, 0.05));
  border: 1px solid rgba(19, 185, 115, 0.2);
  margin-bottom: var(--space-4);
  transition: all var(--duration-normal) var(--ease-out);
}

.service-icon .icon {
  width: 2rem;
  height: 2rem;
  fill: var(--skynet-primary);
}

.service-icon--lg {
  width: 5rem;
  height: 5rem;
}

.service-icon--lg .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.service-icon--xl {
  width: 6rem;
  height: 6rem;
}

.service-icon--xl .icon {
  width: 3rem;
  height: 3rem;
}

/* Category Colors */
.service-icon--automation {
  background: linear-gradient(135deg, rgba(19, 185, 115, 0.2), rgba(19, 185, 115, 0.05));
  border-color: rgba(19, 185, 115, 0.3);
}

.service-icon--automation .icon {
  fill: var(--skynet-primary);
}

.service-icon--video {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
  border-color: rgba(239, 68, 68, 0.3);
}

.service-icon--video .icon {
  fill: #EF4444;
}

.service-icon--content {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
  border-color: rgba(139, 92, 246, 0.3);
}

.service-icon--content .icon {
  fill: var(--skynet-secondary);
}

.service-icon--development {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.05));
  border-color: rgba(0, 212, 255, 0.3);
}

.service-icon--development .icon {
  fill: var(--ai-neon-cyan);
}

.service-icon--strategy {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.05));
  border-color: rgba(251, 146, 60, 0.3);
}

.service-icon--strategy .icon {
  fill: var(--orange-400);
}

/* ============================================
   MENU ICON STYLES
   ============================================ */

.menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: rgba(19, 185, 115, 0.1);
  margin-right: var(--space-3);
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.menu-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--skynet-primary);
}

.menu-item:hover .menu-icon {
  background: rgba(19, 185, 115, 0.2);
  transform: scale(1.05);
}

/* ============================================
   FEATURE LIST ICONS
   ============================================ */

.feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: rgba(19, 185, 115, 0.2);
  margin-right: var(--space-3);
  flex-shrink: 0;
}

.feature-check .icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--skynet-primary);
}

/* ============================================
   CTA BUTTON ICONS
   ============================================ */

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn-icon:hover .icon {
  transform: translateX(4px);
}

.btn-icon--left .icon {
  order: -1;
}

.btn-icon--left:hover .icon {
  transform: translateX(-4px);
}

/* ============================================
   ANIMATED ICON EFFECTS
   ============================================ */

.icon--pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

.icon--float {
  animation: icon-float 3s ease-in-out infinite;
}

.icon--spin {
  animation: icon-spin 2s linear infinite;
}

.icon--bounce {
  animation: icon-bounce 1s ease infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes icon-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* ============================================
   STAT/NUMBER ICONS
   ============================================ */

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--skynet-primary), var(--skynet-primary-dark));
  box-shadow: var(--shadow-glow-primary);
  margin-bottom: var(--space-4);
}

.stat-icon .icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--white);
}

/* ============================================
   SOCIAL MEDIA ICONS
   ============================================ */

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--duration-normal) var(--ease-out);
}

.social-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--gray-400);
}

.social-icon:hover {
  background: var(--skynet-primary);
  border-color: var(--skynet-primary);
  transform: translateY(-2px);
}

.social-icon:hover .icon {
  fill: var(--white);
}

/* WhatsApp */
.social-icon--whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
}

/* YouTube */
.social-icon--youtube:hover {
  background: #FF0000;
  border-color: #FF0000;
}

/* TikTok */
.social-icon--tiktok:hover {
  background: #000000;
  border-color: #00F2EA;
}

/* Fiverr */
.social-icon--fiverr:hover {
  background: #1DBF73;
  border-color: #1DBF73;
}

/* ============================================
   NAVIGATION ARROW ICONS
   ============================================ */

.nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav-arrow .icon {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--gray-400);
}

.nav-item:hover .nav-arrow {
  transform: translateX(4px);
}

.nav-item:hover .nav-arrow .icon {
  fill: var(--skynet-primary);
}

/* Dropdown Arrow */
.dropdown-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.dropdown-arrow .icon {
  width: 0.625rem;
  height: 0.625rem;
}

.nav-item.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* ============================================
   LOADING ICON
   ============================================ */

.icon--loading {
  animation: icon-spin 1s linear infinite;
}

.icon--loading svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ============================================
   ICON BADGE (Notification Style)
   ============================================ */

.icon-badge {
  position: relative;
}

.icon-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--error);
  border: 2px solid var(--skynet-dark);
}

/* ============================================
   SVG GRADIENT DEFINITIONS
   (Add this to your page for gradient fills)
   ============================================ */

/*
<svg width="0" height="0" style="position:absolute">
  <defs>
    <linearGradient id="icon-gradient-primary" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#13b973" />
      <stop offset="100%" style="stop-color:#0f9e61" />
    </linearGradient>
    <linearGradient id="icon-gradient-secondary" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#8B5CF6" />
      <stop offset="100%" style="stop-color:#7C3AED" />
    </linearGradient>
    <linearGradient id="icon-gradient-holographic" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#00FF88" />
      <stop offset="50%" style="stop-color:#00D4FF" />
      <stop offset="100%" style="stop-color:#8B5CF6" />
    </linearGradient>
  </defs>
</svg>
*/