<div class="arcanum-logo">
    <svg class="arcanum-symbol" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="arcanum-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#1F2A3A;stop-opacity:1" />
                <stop offset="50%" style="stop-color:#0084FF;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
            </linearGradient>
        </defs>
        <path d="M 25 80 L 45 20 L 55 20 L 75 80 L 65 80 L 60 65 L 40 65 L 35 80 Z" 
              fill="#1F2A3A" opacity="0.9"/>
        <rect x="30" y="50" width="40" height="8" fill="url(#arcanum-gradient)" rx="2"/>
        <circle cx="50" cy="20" r="3" fill="#10B981"/>
    </svg>
    <span class="arcanum-text">ARCANUM</span>
</div>

/* ARCANUM Logo Styles */
.arcanum-logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.arcanum-symbol {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.arcanum-text {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #1F2A3A;
    letter-spacing: 1px;
}

/* Tamanhos */
.arcanum-logo.logo-small .arcanum-symbol { width: 32px; height: 32px; }
.arcanum-logo.logo-small .arcanum-text { font-size: 20px; }

.arcanum-logo.logo-large .arcanum-symbol { width: 80px; height: 80px; }
.arcanum-logo.logo-large .arcanum-text { font-size: 48px; }

/* Versão Vertical */
.arcanum-logo.logo-vertical {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

/* Dark Mode */
.arcanum-logo.logo-dark .arcanum-text {
    color: #FFFFFF;
}

<!-- Salvar como favicon.svg -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="#1F2A3A" rx="20"/>
    <path d="M 25 75 L 45 25 L 55 25 L 75 75 L 65 75 L 60 60 L 40 60 L 35 75 Z" 
          fill="#FFFFFF"/>
    <rect x="30" y="45" width="40" height="8" fill="#10B981" rx="2"/>
</svg>