@props([
    'number' => '01',
    'title' => 'فهم الفكرة',
    'description' => 'نستمع لرؤيتك ونفهم أهدافك التجارية والتقنية.',
])

<div {{ $attributes->merge(['class' => 'relative text-center']) }}>
    {{-- الدائرة مع الرقم --}}
    <div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center font-mono text-xl font-bold text-dark shadow-glow mb-6 transition-transform duration-300 hover:scale-110">
        {{ $number }}
    </div>
    <h4 class="text-lg font-bold text-white mb-2">{{ $title }}</h4>
    <p class="text-gray-light text-sm leading-relaxed max-w-xs mx-auto">{{ $description }}</p>
</div>