<div class="relative overflow-hidden rounded-2xl shadow-2xl shadow-[var(--color-blue-primary)]/20 group">
    <!-- Фон с градиентом -->
    <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-blue-primary)] to-blue-700"></div>

    <!-- Декоративные круги -->
    <div class="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-10 rounded-full blur-3xl group-hover:opacity-20 transition-opacity duration-500"></div>
    <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-[var(--color-gold)] opacity-20 rounded-full blur-2xl group-hover:opacity-30 transition-opacity duration-500"></div>

    <!-- Pattern -->
    <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 24px 24px;"></div>

    <div class="relative z-10 p-8 text-center">
        <div class="w-14 h-14 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4 border border-white/20 shadow-inner">
            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
        </div>

        <h3 class="text-2xl font-bold text-white mb-2">Будьте в курсе</h3>
        <p class="text-blue-100 text-sm mb-6 leading-relaxed">
            Получайте свежие юридические советы и новости законодательства прямо на почту
        </p>

        <form class="space-y-3">
            <div class="relative">
                <input
                        type="email"
                        placeholder="Ваш email адрес"
                        class="w-full bg-white/10 backdrop-blur border border-white/20 text-white placeholder-blue-200/70 rounded-xl py-3.5 px-4 text-sm focus:outline-none focus:bg-white/20 focus:border-white/40 transition-all"
                />
                <div class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
                    </svg>
                </div>
            </div>
            <button class="w-full bg-white text-[var(--color-blue-primary)] font-bold py-3.5 rounded-xl hover:bg-[var(--color-gold)] hover:text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                Подписаться
            </button>
        </form>

        <p class="text-blue-200/60 text-[10px] mt-4">
            Не отправляем спам. Только полезная информация.
        </p>
    </div>
</div>
