<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60" fill="none">
  <!-- Background glow effect -->
  <defs>
    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#06B6D4;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="shieldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:1" />
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
      <feMerge> 
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- Shield icon with cloaking effect -->
  <g transform="translate(10, 10)">
    <!-- Outer shield -->
    <path d="M20 5L12 2L4 5V11C4 17 12 22 12 22S20 17 20 11V5Z" 
          fill="url(#shieldGradient)" 
          stroke="url(#logoGradient)" 
          stroke-width="1.5"
          filter="url(#glow)"/>
    
    <!-- Inner protection symbol -->
    <circle cx="12" cy="12" r="4" fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.8"/>
    <path d="M10 12L11.5 13.5L14 11" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    
    <!-- Cloaking waves -->
    <path d="M6 8C8 6, 16 6, 18 8" stroke="url(#logoGradient)" stroke-width="1" opacity="0.6" fill="none"/>
    <path d="M7 16C9 18, 15 18, 17 16" stroke="url(#logoGradient)" stroke-width="1" opacity="0.6" fill="none"/>
  </g>
  
  <!-- Text: Cloakify -->
  <g transform="translate(50, 15)">
    <!-- "Cloak" part -->
    <text x="0" y="20" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#FFFFFF">
      Cloak
    </text>
    
    <!-- "ify" part with gradient -->
    <text x="70" y="20" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="url(#logoGradient)">
      ify
    </text>
    
    <!-- Tagline -->
    <text x="0" y="35" font-family="Arial, sans-serif" font-size="8" fill="#94A3B8" opacity="0.8">
      ADVANCED TRAFFIC PROTECTION
    </text>
  </g>
  
  <!-- Decorative elements -->
  <circle cx="180" cy="15" r="2" fill="url(#logoGradient)" opacity="0.6">
    <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
  </circle>
  <circle cx="185" cy="25" r="1.5" fill="url(#logoGradient)" opacity="0.4">
    <animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/>
  </circle>
</svg>
