fix: improve accessibility and semantic HTML structure

apps/web/src/routes/+page.svelte

@@ -34,11 +34,11 @@
       id="theme-toggle"
       class="theme-toggle"
       on:click={toggleTheme}
-      aria-label="Toggle theme"
+      aria-label="Switch to {theme === 'light' ? 'dark' : 'light'} theme"
     >
       {theme === 'light' ? '🌙' : '☀️'}
     </button>
-    <div class="logo">⚡</div>
+    <div class="logo" aria-hidden="true">⚡</div>
     <h1>DevCard</h1>
     <p class="tagline">One Tap. Every Profile. Every Platform.</p>
     <p class="description">
@@ -51,62 +51,66 @@
         class="btn btn-primary"
         target="_blank"
         rel="noopener"
+        aria-label="Star DevCard on GitHub"
       >
         ⭐ Star on GitHub
       </a>
-      <a href="#features" class="btn btn-secondary">Learn More ↓</a>
+      <a href="#features" class="btn btn-secondary" aria-label="Learn more about DevCard features">
+        Learn More ↓
+      </a>
     </div>
   </section>
 
-  <section id="features" class="features">
-    <div class="feature-card">
-      <div class="feature-icon">🔗</div>
+  <section id="features" class="features" aria-labelledby="features-heading">
+    <h2 id="features-heading" class="sr-only">Features</h2>
+    <article class="feature-card">
+      <div class="feature-icon" aria-hidden="true">🔗</div>
       <h3>One Card, All Profiles</h3>
       <p>
         GitHub, LinkedIn, Twitter/X, Devfolio, GitLab, LeetCode, and 10+ more —
         all in one card.
       </p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">⚡</div>
+    </article>
+    <article class="feature-card">
+      <div class="feature-icon" aria-hidden="true">⚡</div>
       <h3>Hybrid Follow Engine</h3>
       <p>
         Follow on GitHub silently via API. Connect on LinkedIn with one tap in
         WebView. No app switching.
       </p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">💳</div>
+    </article>
+    <article class="feature-card">
+      <div class="feature-icon" aria-hidden="true">💳</div>
       <h3>Context Cards</h3>
       <p>
         Share your "Professional" card at conferences and "Hackathon" card at
         hack events. Same profiles, different contexts.
       </p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">📱</div>
+    </article>
+    <article class="feature-card">
+      <div class="feature-icon" aria-hidden="true">📱</div>
       <h3>QR + AirDrop</h3>
       <p>
         Generate a QR code or share via AirDrop-style link. Works even if the
         receiver doesn't have the app.
       </p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">🔒</div>
+    </article>
+    <article class="feature-card">
+      <div class="feature-icon" aria-hidden="true">🔒</div>
       <h3>Privacy First</h3>
       <p>
         No data monetization. No tracking. Apache 2.0 licensed. You own your
         data.
       </p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">🌍</div>
+    </article>
+    <article class="feature-card">
+      <div class="feature-icon" aria-hidden="true">🌍</div>
       <h3>Open Source</h3>
       <p>
         Community-driven development. Contribute, self-host, or extend with your
         own platforms.
       </p>
-    </div>
+    </article>
   </section>
 
   <footer class="footer">
@@ -157,6 +161,18 @@
     outline-offset: 3px;
   }
 
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
   .landing {
     max-width: 960px;
     margin: 0 auto;

apps/web/src/routes/u/[username]/+page.svelte

@@ -60,7 +60,6 @@
         {/if}
       </div>
 
-      <!-- Platform Links -->
       <div class="links-section">
         <p class="links-label">Connect with {profile.displayName.split(' ')[0]}</p>
         {#each profile.links as link}
@@ -71,15 +70,16 @@
             target="_blank"
             rel="noopener noreferrer"
             class="platform-tile"
+            aria-label="Visit {profile.displayName}'s {platform?.name || link.platform} profile"
           >
-            <div class="tile-icon" style="background: {color}">
+            <div class="tile-icon" style="background: {color}" aria-hidden="true">
               {platform?.name.charAt(0) || '?'}
             </div>
             <div class="tile-info">
               <span class="tile-name">{platform?.name || link.platform}</span>
               <span class="tile-username">{link.username}</span>
             </div>
-            <span class="tile-arrow">→</span>
+            <span class="tile-arrow" aria-hidden="true">→</span>
           </a>
         {/each}
       </div>
@@ -88,7 +88,7 @@
     <!-- Get DevCard CTA -->
     <div class="get-devcard">
       <p>Want your own DevCard?</p>
-      <a href="/" class="cta-link">Get your DevCard ⚡</a>
+      <a href="/" class="cta-link" aria-label="Get your own DevCard for free">Get your DevCard ⚡</a>
     </div>
 
     <footer class="footer">