@if ($highlights->isNotEmpty())
    {{-- Technical capabilities / key differentiators (SOW 1.9). --}}
    <section class="section-lg relative overflow-hidden bg-dark">
        <div class="absolute inset-0 bg-blueprint-dark opacity-60" aria-hidden="true"></div>

        <div class="container-page relative">
            <x-section-heading tone="dark"
                               :eyebrow="__('Capabilities')"
                               :title="setting('home_why_title', __('Technical depth across the project lifecycle'))"
                               :subtitle="__('Planning, feasibility, survey, design, supervision and project management under one roof.')" />

            <div class="mt-10 grid gap-px overflow-hidden rounded-2xl border border-white/10 bg-white/10 sm:grid-cols-2 lg:grid-cols-3"
                 data-reveal-group>
                @foreach ($highlights as $highlight)
                    <div class="group bg-dark p-8 transition hover:bg-dark-surface" data-reveal-child>
                        <span class="mb-6 flex size-11 items-center justify-center rounded-lg bg-white/10 text-white transition group-hover:bg-primary">
                            <x-icon :name="$highlight->icon ?: 'check'" class="size-5" />
                        </span>

                        <h3 class="font-display text-lg font-semibold text-white">{{ $highlight->title }}</h3>

                        @if ($highlight->subtitle)
                            <p class="mt-1 text-sm font-medium text-primary-200">{{ $highlight->subtitle }}</p>
                        @endif

                        @if ($highlight->description)
                            <p class="mt-3 text-sm leading-relaxed text-white/65">{{ $highlight->description }}</p>
                        @endif

                        @if ($highlight->link_url)
                            <a href="{{ $highlight->link_url }}" class="link-arrow mt-5 text-primary-200 hover:text-white">
                                {{ __('Learn more') }} <x-icon name="arrow-right" class="icon-arrow size-4" />
                            </a>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif