feat: replace clsx with cn util

src/shared/ui/Section/SectionHeader/SectionHeader.svelte

@@ -3,8 +3,8 @@
     Numbered section heading with optional subtitle and pulse dot.
 -->
 <script lang="ts">
+import { cn } from '$shared/lib';
 import { Label } from '$shared/ui';
-import clsx from 'clsx';
 
 interface Props {
     /**
@@ -41,7 +41,7 @@ let {
 const indexStr = $derived(String(index).padStart(2, '0'));
 </script>
 
-<div class={clsx('flex items-center gap-3 md:gap-4 mb-2', className)}>
+<div class={cn('flex items-center gap-3 md:gap-4 mb-2', className)}>
     <div class="flex items-center gap-2">
         {#if pulse}
             <span class="w-1.5 h-1.5 bg-brand rounded-full animate-pulse"></span>

src/shared/ui/Section/SectionSeparator/SectionSeparator.svelte

@@ -3,7 +3,7 @@
     A horizontal separator line used to visually separate sections within a page.
 -->
 <script lang="ts">
-import clsx from 'clsx';
+import { cn } from '$shared/lib';
 
 interface Props {
     /**
@@ -15,4 +15,4 @@ interface Props {
 const { class: className = '' }: Props = $props();
 </script>
 
-<div class={clsx('w-full h-px bg-swiss-black/5 dark:bg-white/10 my-8 md:my-12', className)}></div>
+<div class={cn('w-full h-px bg-swiss-black/5 dark:bg-white/10 my-8 md:my-12', className)}></div>