{{-- Builders illustration — stacked module cards + spark/lightning, evokes a starter kit --}}
<svg viewBox="0 0 360 320" xmlns="http://www.w3.org/2000/svg" fill="none"
     class="{{ $class ?? 'h-auto w-full' }}" aria-hidden="true">
    <defs>
        <linearGradient id="builder-card" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="color-mix(in oklch, var(--accent) 14%, var(--surface))"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 4%, var(--surface))"/>
        </linearGradient>
        <linearGradient id="builder-bolt" x1="0.3" y1="0" x2="0.7" y2="1">
            <stop offset="0%" stop-color="var(--accent)"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 65%, transparent)"/>
        </linearGradient>
        <filter id="builder-shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="14" stdDeviation="18"
                          flood-color="color-mix(in oklch, var(--accent) 35%, transparent)"/>
        </filter>
    </defs>

    {{-- Ground shadow --}}
    <ellipse cx="180" cy="294" rx="130" ry="10"
             fill="color-mix(in oklch, var(--accent) 14%, transparent)"/>

    {{-- Stacked module cards (back to front) --}}
    <g filter="url(#builder-shadow)">
        <rect x="86" y="86" width="200" height="58" rx="16" fill="url(#builder-card)"
              stroke="color-mix(in oklch, var(--accent) 18%, transparent)" stroke-width="1.5" opacity="0.65"/>
        <rect x="76" y="124" width="220" height="64" rx="18" fill="url(#builder-card)"
              stroke="color-mix(in oklch, var(--accent) 22%, transparent)" stroke-width="1.5" opacity="0.85"/>
        <rect x="64" y="168" width="244" height="80" rx="22" fill="url(#builder-card)"
              stroke="color-mix(in oklch, var(--accent) 26%, transparent)" stroke-width="1.5"/>

        {{-- Top card content --}}
        <circle cx="92" cy="208" r="14" fill="color-mix(in oklch, var(--accent) 24%, transparent)"/>
        <path d="M85 208 L91 214 L100 202" stroke="var(--accent)" stroke-width="2.4"
              stroke-linecap="round" stroke-linejoin="round"/>

        <rect x="116" y="194" width="128" height="6" rx="3"
              fill="color-mix(in oklch, var(--accent) 22%, transparent)"/>
        <rect x="116" y="208" width="84" height="5" rx="2.5"
              fill="color-mix(in oklch, var(--foreground) 14%, transparent)"/>
        <rect x="116" y="220" width="60" height="4" rx="2"
              fill="color-mix(in oklch, var(--foreground) 10%, transparent)"/>

        {{-- Pill on top card --}}
        <rect x="248" y="200" width="48" height="22" rx="11"
              fill="var(--accent)"/>
        <rect x="256" y="208" width="32" height="6" rx="3"
              fill="color-mix(in oklch, white 80%, transparent)"/>
    </g>

    {{-- Lightning bolt — represents speed of shipping --}}
    <g transform="translate(228 32)" filter="url(#builder-shadow)">
        <path d="M28 0 L4 38 L22 38 L14 70 L46 28 L26 28 Z"
              fill="url(#builder-bolt)"
              stroke="color-mix(in oklch, white 18%, transparent)" stroke-width="1"
              stroke-linejoin="round"/>
    </g>

    {{-- Floating sparkles --}}
    <g fill="var(--accent)">
        <circle cx="46" cy="100" r="4" opacity="0.55"/>
        <circle cx="316" cy="120" r="3" opacity="0.45"/>
        <circle cx="56" cy="232" r="3.5" opacity="0.4"/>
        <circle cx="302" cy="232" r="3" opacity="0.5"/>
    </g>

    {{-- Sparkle stars --}}
    <g stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" opacity="0.6">
        <path d="M40 60 L40 76 M32 68 L48 68"/>
        <path d="M312 70 L312 82 M306 76 L318 76"/>
    </g>
</svg>