@@ -65,6 +65,46 @@ const jsonLd = {
     },
   ],
 }
+
+// Each feature card carries its own hue (--c) and a hand-drawn-ish line icon.
+const features = [
+  {
+    title: 'Pressure ink',
+    body: "The pen's width follows stylus pressure — or velocity for mouse users — and strokes taper like a real pen.",
+    hue: '#2f6fed',
+    icon: `<path fill="currentColor" stroke="none" d="M2.6 20.9c-.5.1-.8-.5-.4-.8 3.6-2.6 6.3-5.9 8.6-9.6 2.3-3.7 5-6.7 8.6-8.6.5-.3 1 .3.6.7-2.7 2.8-4.7 5.8-6.6 9.1-2.3 4-5.6 7.6-10.8 9.2Z"/><path d="M19.6 2.3c1.1-.7 2.2-1 3.2-.9" stroke-linecap="round"/>`,
+  },
+  {
+    title: 'Hand-drawn shapes',
+    body: 'Rectangles, ellipses, triangles, diamonds, hexagons, stars — with a subtle sketched wobble, four fill styles, and editable labels.',
+    hue: '#d97706',
+    icon: `<path d="M12 2.7c.3 0 .5.2.6.4l3.6 6.2c.2.4-.1.9-.6.9H8.4c-.5 0-.8-.5-.6-.9l3.6-6.2c.1-.2.3-.4.6-.4Z" stroke-linejoin="round"/><rect x="2.6" y="13.4" width="8" height="8" rx="1.8"/><circle cx="17.4" cy="17.4" r="4"/>`,
+  },
+  {
+    title: 'Real-time sync',
+    body: 'Every change emits a JSON-safe diff. Ship it over any transport; remote changes never pollute local undo.',
+    hue: '#0f9d58',
+    icon: `<path d="M3.8 12a8.2 8.2 0 0 1 14-5.8" stroke-linecap="round"/><path d="M18.2 2.6v3.9h-3.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.2 12a8.2 8.2 0 0 1-14 5.8" stroke-linecap="round"/><path d="M5.8 21.4v-3.9h3.9" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="1.9" fill="currentColor" stroke="none"/>`,
+  },
+  {
+    title: 'Palm rejection',
+    body: 'Once a stylus is seen, fingers steer the camera and the pen draws. Apple Pencil feels native.',
+    hue: '#7c4dcc',
+    icon: `<path d="M8.4 11.2V4.9a1.7 1.7 0 0 1 3.4 0v5.1" stroke-linecap="round"/><path d="M11.8 10V3.7a1.7 1.7 0 0 1 3.4 0v6.4" stroke-linecap="round"/><path d="M15.2 10.5V6.3a1.7 1.7 0 0 1 3.4 0V14c0 4.2-2.7 7.3-6.7 7.3-3.4 0-5.2-1.7-6.8-4.4l-2-3.4a1.7 1.7 0 0 1 2.9-1.7l1.6 2.6" stroke-linecap="round" stroke-linejoin="round"/>`,
+  },
+  {
+    title: 'Infinite canvas',
+    body: 'Pan, wheel zoom, two-finger pinch, zoom-to-fit. Ruled or dotted grids that adapt to the zoom.',
+    hue: '#0e8f9b',
+    icon: `<path d="M2.7 5.6V3.4a.7.7 0 0 1 .7-.7h2.2M18.4 2.7h2.2c.4 0 .7.3.7.7v2.2M21.3 18.4v2.2c0 .4-.3.7-.7.7h-2.2M5.6 21.3H3.4a.7.7 0 0 1-.7-.7v-2.2" stroke-linecap="round"/><path d="M8.7 9.3c-1.9 0-3.4 1.2-3.4 2.7s1.5 2.7 3.4 2.7c2.9 0 3.4-5.4 6.6-5.4 1.9 0 3.4 1.2 3.4 2.7s-1.5 2.7-3.4 2.7c-2.9 0-3.7-5.4-6.6-5.4Z"/>`,
+  },
+  {
+    title: 'And the rest',
+    body: 'Arrows with draggable bend, sticky notes, images, laser pointer, PNG export, per-gesture undo, light & dark themes, full keyboard map.',
+    hue: '#d1476b',
+    icon: `<path d="M11 2.9c.3-.9 1.6-.9 1.9 0l1.4 3.7c.1.3.3.5.6.6l3.7 1.4c.9.3.9 1.6 0 1.9l-3.7 1.4c-.3.1-.5.3-.6.6l-1.4 3.7c-.3.9-1.6.9-1.9 0l-1.4-3.7a1 1 0 0 0-.6-.6l-3.7-1.4c-.9-.3-.9-1.6 0-1.9l3.7-1.4c.3-.1.5-.3.6-.6z" stroke-linejoin="round"/><path d="m5.6 15.6.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z" stroke-linejoin="round"/><path d="m18.2 14.4.6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7-1.7-.6 1.7-.6z" stroke-linejoin="round"/>`,
+  },
+]
 ---
 <Base jsonLd={jsonLd}>
   <main>
@@ -100,12 +140,15 @@ const jsonLd = {
     <section class="features" id="features">
       <h2>A simple, joyful drawing experience</h2>
       <div class="grid">
-        <div class="card"><h3>Pressure ink</h3><p>The pen's width follows stylus pressure — or velocity for mouse users — and strokes taper like a real pen.</p></div>
-        <div class="card"><h3>Hand-drawn shapes</h3><p>Rectangles, ellipses, triangles, diamonds, hexagons, stars — with a subtle sketched wobble, four fill styles, and editable labels.</p></div>
-        <div class="card"><h3>Real-time sync</h3><p>Every change emits a JSON-safe diff. Ship it over any transport; remote changes never pollute local undo.</p></div>
-        <div class="card"><h3>Palm rejection</h3><p>Once a stylus is seen, fingers steer the camera and the pen draws. Apple Pencil feels native.</p></div>
-        <div class="card"><h3>Infinite canvas</h3><p>Pan, wheel zoom, two-finger pinch, zoom-to-fit. Ruled or dotted grids that adapt to the zoom.</p></div>
-        <div class="card"><h3>And the rest</h3><p>Arrows with draggable bend, sticky notes, images, laser pointer, PNG export, per-gesture undo, light &amp; dark themes, full keyboard map.</p></div>
+        {features.map((f) => (
+          <div class="card" style={`--c: ${f.hue}`}>
+            <span class="card-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" set:html={f.icon} />
+            </span>
+            <h3>{f.title}</h3>
+            <p>{f.body}</p>
+          </div>
+        ))}
       </div>
     </section>
 
@@ -359,11 +402,45 @@ createQuickdraw({
 
   .features .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
   .card {
+    --c: var(--accent);
+    position: relative; overflow: hidden; isolation: isolate;
     background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
-    padding: 22px 24px;
+    padding: 24px 24px 26px;
+    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+  }
+  /* A faint wash of the card's own hue, bloomed from the icon corner. */
+  .card::before {
+    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+    background: radial-gradient(260px 150px at 8% -10%, color-mix(in srgb, var(--c) 12%, transparent), transparent 72%);
+    opacity: 0.75; transition: opacity 180ms ease;
+  }
+  .card:hover {
+    transform: translateY(-3px);
+    border-color: color-mix(in srgb, var(--c) 38%, var(--line));
+    box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--c) 60%, rgba(28, 27, 24, 0.5));
+  }
+  .card:hover::before { opacity: 1; }
+  .card-icon {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 44px; height: 44px; margin-bottom: 16px;
+    border-radius: 13px; color: var(--c);
+    background: color-mix(in srgb, var(--c) 11%, #fff);
+    border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    transition: transform 180ms ease, background 180ms ease;
+  }
+  .card:hover .card-icon {
+    transform: rotate(-4deg) scale(1.04);
+    background: color-mix(in srgb, var(--c) 16%, #fff);
+  }
+  .card h3 { margin: 0 0 8px; font-size: 17.5px; letter-spacing: -0.005em; }
+  .card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .card, .card-icon { transition: none; }
+    .card:hover { transform: none; }
+    .card:hover .card-icon { transform: none; }
   }
-  .card h3 { margin: 0 0 8px; font-size: 17px; }
-  .card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
 
   .qs-panel {
     background: #14130f; border-radius: var(--radius); overflow: hidden;