<section data-animate id="how-it-works" class="bg-background py-24 lg:py-32">
    <div class="mx-auto max-w-7xl px-6">
        <div class="ani-down mb-16 text-center" style="animation-delay: 0.1s">
            <p class="mb-5 flex items-center justify-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                <span class="h-0.5 w-8 bg-primary"></span>
                <span class="size-2 rounded-full border border-primary"></span>
                How It Works
                <span class="size-2 rounded-full border border-primary"></span>
                <span class="h-0.5 w-8 bg-primary"></span>
            </p>
            <h2 class="font-display text-[36px] font-bold text-secondary sm:text-[44px] lg:text-[52px]">Our Construction Process</h2>
        </div>

        <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6">
            <?php $__currentLoopData = config('site.how_it_works'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $step): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="ani-up flex flex-col items-center text-center" style="animation-delay: <?php echo e(0.25 + $i * 0.12); ?>s">
                    <div class="relative flex w-full max-w-[260px] justify-center">
                        <div class="z-10 flex size-[72px] items-center justify-center rounded-full bg-white shadow-lg ring-2 ring-primary/15">
                            <?php echo $__env->make('partials.icon', ['name' => $step['icon'], 'class' => 'size-8 text-primary'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>
                    </div>
                    <p class="mt-4 font-display text-[11px] font-bold uppercase tracking-[0.18em] text-primary">Step — <?php echo e($step['num']); ?></p>
                    <h3 class="mt-2 font-display text-[21px] font-bold text-secondary"><?php echo e($step['title']); ?></h3>
                    <p class="mt-3 max-w-[220px] text-sm leading-relaxed text-muted-foreground"><?php echo e($step['desc']); ?></p>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>
<?php /**PATH E:\projects-octa\hse-horizon\resources\views\partials\home\how-it-works.blade.php ENDPATH**/ ?>