diff --git a/package-lock.json b/package-lock.json
index 9d1e600..62d1535 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "python-doesnt-byte",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "python-doesnt-byte",
-      "version": "0.9.0",
+      "version": "0.11.0",
       "dependencies": {
         "@codemirror/commands": "^6.10.3",
         "@codemirror/lang-python": "^6.2.1",
diff --git a/package.json b/package.json
index ba81f34..28ee7ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "python-doesnt-byte",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
diff --git a/src/components/BentoFeatures/index.tsx b/src/components/BentoFeatures/index.tsx
index 7d3615c..a3e0d43 100644
--- a/src/components/BentoFeatures/index.tsx
+++ b/src/components/BentoFeatures/index.tsx
@@ -2,6 +2,9 @@ import { useRef, useState, type ReactNode } from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import PyRunner from '@site/src/theme/PyRunner';
+import SQLRunner from '@site/src/theme/SQLRunner';
+import Algorithm from '@site/src/components/Algorithm';
+import { OPEN_SEARCH_EVENT } from '@site/src/lib/events';
 import styles from './styles.module.css';
 
 interface Feature {
@@ -12,65 +15,144 @@ interface Feature {
   demo: ReactNode;
 }
 
-function PlayIcon() {
+/* Icone delle tab: Font Awesome Pro 7.1.0 duotone (primario currentColor +
+ * secondario opacity .4). Il colore e l'animazione hover arrivano dalla
+ * classe passata da fuori (vedi .icon* in styles). */
+function PlayDuotone({ className }: { className?: string }) {
   return (
     <svg
+      className={className}
       width="24"
       height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="var(--at-accent)"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      viewBox="0 0 512 512"
       aria-hidden="true"
     >
-      <polygon points="6 4 20 12 6 20 6 4" />
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zm176-88c0-8.7 4.7-16.7 12.3-20.9s16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5S176 352.7 176 344l0-176z"
+      />
+      <path
+        fill="currentColor"
+        d="M212.5 147.5c-7.4-4.5-16.7-4.7-24.3-.5S176 159.3 176 168l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88z"
+      />
     </svg>
   );
 }
 
-function GraphIcon() {
+function TableDuotone({ className }: { className?: string }) {
   return (
     <svg
+      className={className}
       width="24"
       height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="#7c3aed"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      viewBox="0 0 448 512"
       aria-hidden="true"
     >
-      <circle cx="5" cy="6" r="2.2" />
-      <circle cx="19" cy="6" r="2.2" />
-      <circle cx="12" cy="13" r="2.2" />
-      <circle cx="6" cy="19" r="2.2" />
-      <circle cx="18" cy="19" r="2.2" />
-      <line x1="6.6" y1="7.5" x2="10.6" y2="11.6" />
-      <line x1="17.4" y1="7.5" x2="13.4" y2="11.6" />
-      <line x1="10.7" y1="14.7" x2="7.3" y2="17.4" />
-      <line x1="13.3" y1="14.7" x2="16.7" y2="17.4" />
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M64 160l0 64 64 0 0 64-64 0 0 64 64 0 0 64 64 0 0-64 64 0 0 64 64 0 0-64 64 0 0-64-64 0 0-64 64 0 0-64-64 0 0-64-64 0 0 64-64 0 0-64-64 0 0 64-64 0zm128 64l64 0 0 64-64 0 0-64z"
+      />
+      <path
+        fill="currentColor"
+        d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM384 96l0 320-320 0 0-320 320 0z"
+      />
     </svg>
   );
 }
 
-function SearchIcon() {
+function ChartDuotone({ className }: { className?: string }) {
   return (
     <svg
+      className={className}
       width="24"
       height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="#a21caf"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      viewBox="0 0 512 512"
       aria-hidden="true"
     >
-      <circle cx="10.5" cy="10.5" r="6.5" />
-      <line x1="20" y1="20" x2="15.5" y2="15.5" />
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M192 80c0-26.5 21.5-48 48-48l32 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48l0-352z"
+      />
+      <path
+        fill="currentColor"
+        d="M432 96c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0zM48 224c-26.5 0-48 21.5-48 48L0 432c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-160c0-26.5-21.5-48-48-48l-32 0z"
+      />
+    </svg>
+  );
+}
+
+function SearchDuotone({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 512 512"
+      aria-hidden="true"
+    >
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M64 208a144 144 0 1 0 288 0 144 144 0 1 0 -288 0z"
+      />
+      <path
+        fill="currentColor"
+        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
+      />
+    </svg>
+  );
+}
+
+/* Icone duotone (Font Awesome Pro 7.1.0) per il blocco «E molto altro ancora».
+ * Primario currentColor + secondario opacity .4: il colore deriva dal
+ * contenitore di ciascuna voce. */
+function RouteDuotone() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 512 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M96 512l320 0c53 0 96-43 96-96s-43-96-96-96l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c-5.1 0-9.9-2.1-13.3-6-8.7-10.1-27-32-44.1-58-12.9 0-25.7 0-38.6 0-53 0-96 43-96 96s43 96 96 96l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-262.6 0c-17.1 26-35.4 48-44.1 58-3.3 3.9-8.2 6-13.3 6z"
+      />
+      <path
+        fill="currentColor"
+        d="M320 96c0 54.5 63.8 132.1 82.7 154 3.3 3.9 8.2 6 13.3 6s9.9-2.1 13.3-6c19-21.9 82.7-99.6 82.7-154 0-53-43-96-96-96s-96 43-96 96zm64 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM0 352c0 54.5 63.8 132.1 82.7 154 3.3 3.9 8.2 6 13.3 6s9.9-2.1 13.3-6c19-21.9 82.7-99.6 82.7-154 0-53-43-96-96-96S0 299 0 352zm64 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+      />
+    </svg>
+  );
+}
+
+function WandDuotone() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 576 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M0 128c0 6.4 3.8 12.2 9.7 14.7l50.1 21.5 21.5 50.1c2.5 5.9 8.3 9.7 14.7 9.7s12.2-3.8 14.7-9.7l21.5-50.1 50.1-21.5c5.9-2.5 9.7-8.3 9.7-14.7s-3.8-12.2-9.7-14.7l-50.1-21.5-21.5-50.1C108.2 35.8 102.4 32 96 32s-12.2 3.8-14.7 9.7L59.8 91.8 9.7 113.3C3.8 115.8 0 121.6 0 128zM192 32c0 3.3 2 6.2 5 7.4L233.8 54.2 248.6 91c1.2 3 4.2 5 7.4 5s6.2-2 7.4-5L278.2 54.2 315 39.4c3-1.2 5-4.2 5-7.4s-2-6.2-5-7.4L278.2 9.8 263.4-27c-1.2-3-4.2-5-7.4-5s-6.2 2-7.4 5L233.8 9.8 197 24.6c-3 1.2-5 4.2-5 7.4zm133.4 85.4c33.7 33.7 67.5 67.5 101.3 101.3 35.1-35.1 70.1-70.1 105.2-105.2 7.8-7.8 12.2-18.4 12.2-29.5s-4.4-21.6-12.2-29.5L489.5 12.2C481.6 4.4 471 0 460 0s-21.6 4.4-29.5 12.2c-35.1 35.1-70.1 70.1-105.2 105.2zM368 400c0 6.4 3.8 12.2 9.7 14.7l50.1 21.5 21.5 50.1c2.5 5.9 8.3 9.7 14.7 9.7s12.2-3.8 14.7-9.7l21.5-50.1 50.1-21.5c5.9-2.5 9.7-8.3 9.7-14.7s-3.8-12.2-9.7-14.7l-50.1-21.5-21.5-50.1c-2.5-5.9-8.3-9.7-14.7-9.7s-12.2 3.8-14.7 9.7l-21.5 50.1-50.1 21.5c-5.9 2.5-9.7 8.3-9.7 14.7z"
+      />
+      <path
+        fill="currentColor"
+        d="M426.6 218.6L325.4 117.4 44.2 398.5C36.4 406.4 32 417 32 428s4.4 21.6 12.2 29.5l42.3 42.3C94.4 507.6 105 512 116 512s21.6-4.4 29.5-12.2L426.6 218.6z"
+      />
+    </svg>
+  );
+}
+
+function LinkSwapDuotone() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 512 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M9.4 361.4l96-96c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 352 480 352c17.7 0 32 14.3 32 32s-14.3 32-32 32l-370.7 0 41.4 41.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-96-96c-12.5-12.5-12.5-32.8 0-45.3z"
+      />
+      <path
+        fill="currentColor"
+        d="M502.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-96 96c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 160 32 160c-17.7 0-32-14.3-32-32S14.3 96 32 96l370.7 0-41.4-41.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l96 96z"
+      />
     </svg>
   );
 }
@@ -83,81 +165,104 @@ for i in range(1, righe + 1):
     print(spazi + stelle)
 `;
 
-function ComingSoonPanel({
-  icon,
-  title,
-  body,
-}: {
-  icon: ReactNode;
-  title: string;
-  body: ReactNode;
-}) {
-  return (
-    <div className={styles.comingWrap}>
-      <div className={styles.comingIcon}>{icon}</div>
-      <div className={styles.comingTitle}>{title}</div>
-      <div className={styles.comingBody}>{body}</div>
-      <span className={styles.comingBadge}>Prossimamente</span>
-    </div>
-  );
-}
+const SQL_DEMO = `-- Modifica la query e ripremi Run
+SELECT a.nome, COUNT(*) AS prestiti
+FROM prestiti p
+JOIN libri l   ON l.id = p.libro_id
+JOIN autori a  ON a.id = l.autore_id
+GROUP BY a.nome
+ORDER BY prestiti DESC
+LIMIT 3;
+`;
 
 const FEATURES: Feature[] = [
   {
     kicker: '01',
     title: 'Esempi vivi',
     desc: 'Ogni snippet gira nella pagina. Modificalo, sperimenta, rompi qualcosa: il libro risponde.',
-    icon: <PlayIcon />,
+    icon: <PlayDuotone className={styles.iconPlay} />,
     demo: <PyRunner code={HERO_CODE} title="piramide.py" />,
   },
   {
     kicker: '02',
-    title: 'Algoritmi animati',
-    desc: 'Ordinamento, ricorsione, grafi: visualizzazioni interattive per vedere ogni passo.',
-    icon: <GraphIcon />,
+    title: 'Database dal vivo',
+    desc: 'Interroghi un vero SQLite nel browser. Zero installazioni: scrivi SQL e vedi le righe.',
+    icon: <TableDuotone className={styles.iconData} />,
     demo: (
-      <ComingSoonPanel
-        icon={<GraphIcon />}
-        title="Visualizzatore di algoritmi"
-        body={
-          <>
-            Ogni algoritmo del libro avrà la sua animazione: step-by-step,
-            controlli play/pausa, evidenziazione delle variabili in gioco.
-          </>
-        }
+      <SQLRunner
+        code={SQL_DEMO}
+        dataset="archivista/biblioteca"
+        title="biblioteca.sql"
+        runOnMount
+        maxLines={10}
       />
     ),
   },
   {
     kicker: '03',
+    title: 'Algoritmi animati',
+    desc: 'Ordinamento, ricerca, ricorsione: visualizzazioni interattive per vedere ogni passo.',
+    icon: <ChartDuotone className={styles.iconAlgo} />,
+    demo: <Algorithm name="bubble-sort" mode="study" shuffle={6} />,
+  },
+  {
+    kicker: '04',
     title: 'Cerca, non sfogliare',
     desc: 'Trova subito un concetto, una definizione, un esempio. Senza indice analitico né rilegatura.',
-    icon: <SearchIcon />,
+    icon: <SearchDuotone className={styles.iconSearch} />,
     demo: (
-      <ComingSoonPanel
-        icon={<SearchIcon />}
-        title="Ricerca full-text"
-        body={
-          <>
-            <div className={styles.fakeSearch}>
-              <SearchIcon />
-              <input
-                type="text"
-                placeholder="Cerca una funzione, un concetto, un esempio…"
-                disabled
-                aria-label="Anteprima del campo di ricerca"
-              />
-              <span className={styles.fakeKbd}>⌘K</span>
-            </div>
-            Risultati istantanei con anteprima del contesto, scorciatoia da
-            tastiera, niente indice analitico da impaginare.
-          </>
-        }
-      />
+      <div className={styles.searchPromo}>
+        <button
+          type="button"
+          className={styles.searchField}
+          onClick={() =>
+            window.dispatchEvent(new CustomEvent(OPEN_SEARCH_EVENT))
+          }
+        >
+          <SearchDuotone />
+          <span className={styles.searchFieldText}>
+            Cerca una funzione, un concetto, un esempio…
+          </span>
+          <span className={styles.fakeKbd}>⌘K</span>
+        </button>
+        <p className={styles.searchPromoNote}>
+          Risultati istantanei con anteprima del contesto e scorciatoia da
+          tastiera. Niente indice analitico da impaginare.
+        </p>
+      </div>
     ),
   },
 ];
 
+interface MoreItem {
+  icon: ReactNode;
+  title: string;
+  desc: string;
+  /* Il colore vive nel CSS (classi more_*) con varianti light/dark. */
+  accent: 'blue' | 'violet' | 'teal';
+}
+
+const MORE: MoreItem[] = [
+  {
+    icon: <RouteDuotone />,
+    title: 'Percorsi adattivi',
+    desc: 'Il libro si rimodella sul tuo indirizzo: Informatica, Liceo Scienze Applicate o ITS.',
+    accent: 'blue',
+  },
+  {
+    icon: <WandDuotone />,
+    title: 'Spiegamelo facile',
+    desc: 'Copi un prompt pronto — o lo mandi al tuo LLM preferito — per farti rispiegare codice ed errori a parole tue.',
+    accent: 'violet',
+  },
+  {
+    icon: <LinkSwapDuotone />,
+    title: 'Esercizi e teoria, collegati',
+    desc: 'Ogni esercizio sa da quale lezione nasce; ogni lezione sa come allenarti.',
+    accent: 'teal',
+  },
+];
+
 interface CardProps {
   feature: Feature;
   index: number;
@@ -223,7 +328,7 @@ export default function BentoFeatures() {
           Pensato per imparare facendo.
         </Heading>
         <p className={styles.subtitle}>
-          Tre cose che un libro di testo, sulla carta, non può fare.
+          Cose che un libro di testo, sulla carta, non può fare.
         </p>
       </div>
       <div
@@ -253,6 +358,24 @@ export default function BentoFeatures() {
           {FEATURES[active].demo}
         </div>
       </div>
+
+      <div className={styles.more}>
+        <div className={styles.moreHead}>E molto altro ancora…</div>
+        <ul className={styles.moreGrid}>
+          {MORE.map((m) => (
+            <li
+              key={m.title}
+              className={clsx(styles.moreItem, styles[`more_${m.accent}`])}
+            >
+              <span className={styles.moreIcon}>{m.icon}</span>
+              <div className={styles.moreBody}>
+                <div className={styles.moreItemTitle}>{m.title}</div>
+                <p className={styles.moreItemDesc}>{m.desc}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
     </section>
   );
 }
diff --git a/src/components/BentoFeatures/styles.module.css b/src/components/BentoFeatures/styles.module.css
index 105bfc1..3e47c4f 100644
--- a/src/components/BentoFeatures/styles.module.css
+++ b/src/components/BentoFeatures/styles.module.css
@@ -30,11 +30,17 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }
 
 @media (max-width: 900px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 560px) {
   .grid {
     grid-template-columns: 1fr;
   }
@@ -85,8 +91,10 @@
   transition: opacity 0.3s;
   pointer-events: none;
 }
-.card:hover::before,
-.cardActive::before {
+/* Lo spotlight segue il cursore: visibile solo in hover (anche sulla card
+ * attiva, già distinta da bordo + ombra interna). Senza questo vincolo il
+ * glow resterebbe «appeso» all'ultima posizione del mouse sulla attiva. */
+.card:hover::before {
   opacity: 1;
 }
 
@@ -117,6 +125,94 @@
   z-index: 2;
 }
 
+/* Colore (duotone via currentColor) di ciascuna icona-tab, con variante
+ * pastello in dark come per gli accent dei volumi. */
+.iconPlay {
+  color: var(--at-accent);
+}
+.iconData {
+  color: #0891b2;
+}
+.iconAlgo {
+  color: #7c3aed;
+  transform-origin: 50% 92%;
+}
+.iconSearch {
+  color: #a21caf;
+}
+
+html[data-theme='dark'] .iconData {
+  color: #5ec8dd;
+}
+html[data-theme='dark'] .iconAlgo {
+  color: #a78bfa;
+}
+html[data-theme='dark'] .iconSearch {
+  color: #d98ce3;
+}
+
+.iconBox svg {
+  transition: transform 250ms var(--ease-smooth);
+}
+
+/* All'hover sulla card l'icona si anima con un gesto a tema: il play pulsa,
+ * la tabella ondeggia, le barre dell'algoritmo «riordinano», la lente scruta. */
+.card:hover .iconPlay {
+  animation: bento-icon-pulse 1.1s var(--ease-smooth) infinite;
+}
+.card:hover .iconData {
+  animation: bento-icon-nudge 1.1s var(--ease-smooth) infinite;
+}
+.card:hover .iconAlgo {
+  animation: bento-icon-bars 0.9s var(--ease-smooth) infinite;
+}
+.card:hover .iconSearch {
+  animation: bento-icon-scan 1.4s var(--ease-smooth) infinite;
+}
+
+@keyframes bento-icon-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.16);
+  }
+}
+@keyframes bento-icon-nudge {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+@keyframes bento-icon-bars {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  35% {
+    transform: scaleY(0.76);
+  }
+  70% {
+    transform: scaleY(1.14);
+  }
+}
+@keyframes bento-icon-scan {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0);
+  }
+  25% {
+    transform: translate(1.5px, -1px) rotate(-7deg);
+  }
+  75% {
+    transform: translate(-1.5px, 1px) rotate(7deg);
+  }
+}
+
 .body {
   position: relative;
   z-index: 2;
@@ -177,88 +273,158 @@
     transform: none;
     transition: none;
   }
+  .card:hover .iconPlay,
+  .card:hover .iconData,
+  .card:hover .iconAlgo,
+  .card:hover .iconSearch {
+    animation: none;
+  }
 }
 
-.comingWrap {
-  position: relative;
+/* Box demo «Cerca»: un campo reale che apre la modale Pagefind (⌘K). */
+.searchPromo {
   border-radius: var(--radius-lg);
-  border: 1px dashed var(--at-border);
+  border: 1px solid var(--at-border);
   background: var(--at-bg-subtle);
-  padding: 36px 28px 28px;
+  padding: 40px 28px;
   text-align: center;
-  color: var(--at-muted);
-  font-size: 14px;
-  line-height: 1.6;
 }
 
-.comingIcon {
-  width: 48px;
-  height: 48px;
+.searchField {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 460px;
+  margin: 0 auto 18px;
+  padding: 12px 14px;
   border-radius: var(--radius-sm);
-  background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 14px;
+  background: var(--at-bg);
+  color: var(--at-fg);
+  font: inherit;
+  text-align: left;
+  cursor: text;
+  transition:
+    border-color 200ms var(--ease-smooth),
+    box-shadow 200ms var(--ease-smooth);
 }
 
-.comingTitle {
-  font-family: var(--font-display);
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--at-fg-strong);
-  margin-bottom: 10px;
-  letter-spacing: -0.01em;
+.searchField:hover,
+.searchField:focus-visible {
+  border-color: var(--at-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent) 18%, transparent);
+  outline: none;
+}
+
+.searchField svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--at-muted);
+}
+
+.searchFieldText {
+  flex: 1;
+  color: var(--at-muted);
 }
 
-.comingBody {
+.searchPromoNote {
   max-width: 460px;
   margin: 0 auto;
+  color: var(--at-muted);
+  font-size: 14px;
+  line-height: 1.6;
 }
 
-.comingBadge {
-  position: absolute;
-  top: 14px;
-  right: 14px;
+/* Blocco «E molto altro ancora»: peculiarità descrittive, non interattive. */
+.more {
+  margin-top: 56px;
+  padding-top: 36px;
+  border-top: 1px solid var(--at-border);
+}
+
+.moreHead {
+  text-align: center;
   font-family: var(--font-mono-ui);
-  font-size: 10px;
-  letter-spacing: 0.14em;
+  font-size: 12px;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
-  padding: 4px 8px;
-  border-radius: var(--radius-pill);
-  background: var(--at-bg-chip);
-  border: 1px solid var(--at-border);
   color: var(--at-muted);
+  margin-bottom: 28px;
+}
+
+.moreGrid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+@media (max-width: 760px) {
+  .moreGrid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
 }
 
-.fakeSearch {
+.moreItem {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--at-border);
-  background: var(--at-bg);
-  max-width: 420px;
-  margin: 8px auto 18px;
+  align-items: flex-start;
+  gap: 14px;
   text-align: left;
 }
 
-.fakeSearch svg {
-  width: 18px;
-  height: 18px;
+/* Accenti delle voci, con variante pastello in dark (stesso schema degli
+ * accent dei volumi in ChapterIndex/VolumeCard). */
+.more_blue {
+  --more-color: #2563eb;
+}
+.more_violet {
+  --more-color: #7c3aed;
+}
+.more_teal {
+  --more-color: #0d9488;
+}
+html[data-theme='dark'] .more_blue {
+  --more-color: #75a3ed;
+}
+html[data-theme='dark'] .more_violet {
+  --more-color: #a78bfa;
+}
+html[data-theme='dark'] .more_teal {
+  --more-color: #5ecfc0;
+}
+
+.moreIcon {
   flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--more-color);
+  background: color-mix(in srgb, var(--more-color) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--more-color) 28%, transparent);
 }
 
-.fakeSearch input {
-  flex: 1;
-  border: 0;
-  background: transparent;
-  color: var(--at-fg);
-  font: inherit;
-  outline: none;
-  cursor: not-allowed;
+.moreItemTitle {
+  font-family: var(--font-display);
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--at-fg-strong);
+  letter-spacing: -0.01em;
+  margin-bottom: 4px;
+}
+
+.moreItemDesc {
+  margin: 0;
+  color: var(--at-muted);
+  font-size: 14px;
+  line-height: 1.55;
 }
 
 .fakeKbd {
diff --git a/src/components/ChapterIndex/index.tsx b/src/components/ChapterIndex/index.tsx
index ab9ec47..dd57b96 100644
--- a/src/components/ChapterIndex/index.tsx
+++ b/src/components/ChapterIndex/index.tsx
@@ -1,75 +1,121 @@
-import { useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
 import clsx from 'clsx';
+import {
+  BracketsCurlyIcon,
+  CompassDraftingIcon,
+  DatabaseIcon,
+  BookOpenCoverIcon,
+} from '@site/src/components/VolumeIcons';
 import styles from './styles.module.css';
 
+type Accent = 'blue' | 'pink' | 'amber' | 'green';
+
 interface Chapter {
   title: string;
-  to: string;
+  lessons: number;
+  /** Rotta della pagina, solo per i capitoli già pubblicati. */
+  to?: string;
 }
 
 interface Volume {
-  id: string;
-  short: string;
+  n: string;
   label: string;
-  accent: 'blue' | 'pink' | 'amber' | 'green';
+  accent: Accent;
+  icon: (props: { size?: number }) => JSX.Element;
   chapters: Chapter[];
   draft?: boolean;
 }
 
+/*
+ * TOC pianificata: i capitoli senza `to` non esistono ancora come pagine e i
+ * conteggi in `lessons` sono di progetto, non misurati sul contenuto reale.
+ * Tenere allineata a mano man mano che i volumi prendono forma; a regime
+ * andrà derivata dai globalData delle istanze docs.
+ */
 const VOLUMES: Volume[] = [
   {
-    id: 'programmatore',
-    short: 'Programmatore',
+    n: '01',
     label: 'Manuale del Programmatore',
     accent: 'blue',
+    icon: BracketsCurlyIcon,
+    draft: true,
     chapters: [
-      { title: 'Introduzione', to: '/programmatore/' },
-      { title: 'Variabili', to: '/programmatore/variabili' },
+      { title: 'Introduzione', lessons: 2, to: '/programmatore/' },
+      { title: 'Fondamenti di Python', lessons: 4 },
+      { title: 'Le basi del linguaggio', lessons: 5 },
+      { title: 'Strutture di controllo', lessons: 4 },
+      { title: 'Funzioni', lessons: 4 },
+      { title: 'Strutture dati', lessons: 5 },
     ],
   },
   {
-    id: 'artefice',
-    short: 'Artefice',
-    label: "Manuale dell'Artefice",
+    n: '02',
+    label: 'Manuale dell’Artefice',
     accent: 'pink',
+    icon: CompassDraftingIcon,
+    draft: true,
     chapters: [
-      { title: 'Introduzione', to: '/artefice/' },
-      { title: 'Perché gli oggetti?', to: '/artefice/perche-gli-oggetti' },
-      { title: 'Classi, istanze e metodi', to: '/artefice/classi-e-istanze' },
+      { title: 'Introduzione', lessons: 2, to: '/artefice/' },
+      {
+        title: 'Perché gli oggetti?',
+        lessons: 3,
+        to: '/artefice/perche-gli-oggetti',
+      },
+      {
+        title: 'Classi, istanze e metodi',
+        lessons: 5,
+        to: '/artefice/classi-e-istanze',
+      },
       {
         title: 'Metodi di classe e statici',
+        lessons: 3,
         to: '/artefice/metodi-di-classe-e-statici',
       },
-      { title: 'Mostrare un oggetto', to: '/artefice/mostrare-un-oggetto' },
-      { title: 'Incapsulamento', to: '/artefice/incapsulamento' },
+      {
+        title: 'Mostrare un oggetto',
+        lessons: 2,
+        to: '/artefice/mostrare-un-oggetto',
+      },
+      { title: 'Incapsulamento', lessons: 4, to: '/artefice/incapsulamento' },
     ],
-    draft: true,
   },
   {
-    id: 'archivista',
-    short: 'Archivista',
-    label: "Manuale dell'Archivista",
+    n: '03',
+    label: 'Manuale dell’Archivista',
     accent: 'amber',
-    chapters: [{ title: 'Introduzione', to: '/archivista/' }],
+    icon: DatabaseIcon,
     draft: true,
+    chapters: [
+      { title: 'Introduzione', lessons: 2, to: '/archivista/' },
+      { title: 'File e formati', lessons: 4 },
+      { title: 'Database relazionali', lessons: 5 },
+      { title: 'SQL essenziale', lessons: 6 },
+      { title: 'Serializzazione', lessons: 3 },
+    ],
   },
   {
-    id: 'apprendista',
-    short: 'Apprendista',
-    label: "Biblioteca dell'Apprendista",
+    n: '04',
+    label: 'Biblioteca dell’Apprendista',
     accent: 'green',
-    chapters: [{ title: 'Introduzione', to: '/apprendista/' }],
+    icon: BookOpenCoverIcon,
     draft: true,
+    chapters: [
+      { title: 'Introduzione', lessons: 1, to: '/apprendista/' },
+      { title: 'Mini-progetti guidati', lessons: 5 },
+      { title: 'Algoritmi visualizzati', lessons: 4 },
+      { title: 'Sfide di codice', lessons: 6 },
+    ],
   },
 ];
 
 function ArrowRight() {
   return (
     <svg
-      width="14"
-      height="14"
+      className={styles.arrowSvg}
+      width="17"
+      height="17"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -84,96 +130,168 @@ function ArrowRight() {
   );
 }
 
-function Row({ chapter, index }: { chapter: Chapter; index: number }) {
-  const ref = useRef<HTMLAnchorElement>(null);
-  function onMove(e: React.MouseEvent<HTMLAnchorElement>) {
-    const el = ref.current;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    el.style.setProperty('--at-mx', `${e.clientX - r.left}px`);
-    el.style.setProperty('--at-my', `${e.clientY - r.top}px`);
-  }
-  return (
-    <Link ref={ref} to={chapter.to} onMouseMove={onMove} className={styles.row}>
-      <div className={styles.rowInner}>
-        <span className={styles.num}>{String(index + 1).padStart(2, '0')}</span>
-        <span className={styles.title}>{chapter.title}</span>
-        <span className={styles.arrow}>
-          <ArrowRight />
-        </span>
-      </div>
-    </Link>
-  );
-}
-
 export default function ChapterIndex() {
   const [active, setActive] = useState(0);
   const panelId = 'chapter-index-panel';
 
+  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const indicatorRef = useRef<HTMLSpanElement>(null);
+  const segRef = useRef<HTMLDivElement>(null);
+  const animatedRef = useRef(false);
+  const activeRef = useRef(active);
+
+  // Tutte le dipendenze sono ref stabili → la funzione è creata una volta sola
+  // e gli effect qui sotto non la elencano come dep instabile.
+  const moveIndicator = useCallback((i: number, animate: boolean) => {
+    const ind = indicatorRef.current;
+    const btn = btnRefs.current[i];
+    if (!ind || !btn) return;
+    if (!animate) ind.classList.add(styles.noAnim);
+    ind.style.transform = `translate(${btn.offsetLeft}px, ${btn.offsetTop}px)`;
+    ind.style.width = `${btn.offsetWidth}px`;
+    ind.style.height = `${btn.offsetHeight}px`;
+    if (!animate) {
+      // riattiva l'animazione dopo due frame (come nel template originale)
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => ind.classList.remove(styles.noAnim)),
+      );
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    activeRef.current = active;
+    moveIndicator(active, animatedRef.current);
+    animatedRef.current = true;
+  }, [active, moveIndicator]);
+
+  useLayoutEffect(() => {
+    const el = segRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() =>
+      moveIndicator(activeRef.current, false),
+    );
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [moveIndicator]);
+
+  // Roving tabindex: il focus deve seguire il tab attivo, altrimenti resta
+  // su un bottone con tabIndex -1 e la navigazione da tastiera si rompe.
+  function selectTab(i: number) {
+    setActive(i);
+    btnRefs.current[i]?.focus();
+  }
+
   function onKeyDown(e: React.KeyboardEvent) {
     if (e.key === 'ArrowRight') {
       e.preventDefault();
-      setActive((a) => (a + 1) % VOLUMES.length);
+      selectTab((active + 1) % VOLUMES.length);
     } else if (e.key === 'ArrowLeft') {
       e.preventDefault();
-      setActive((a) => (a - 1 + VOLUMES.length) % VOLUMES.length);
+      selectTab((active - 1 + VOLUMES.length) % VOLUMES.length);
     }
   }
 
   const current = VOLUMES[active];
 
   return (
-    <section className={styles.wrap}>
+    <section className={clsx(styles.wrap, styles[`accent_${current.accent}`])}>
       <div className={styles.head}>
         <Heading as="h2" className={styles.label}>
           Indice
         </Heading>
-        <span className={styles.count}>{current.label}</span>
+        <span className={styles.headVolume}>{current.label}</span>
       </div>
+
       <div
-        className={styles.tabs}
+        ref={segRef}
+        className={styles.seg}
         role="tablist"
         aria-label="Volumi del libro"
         onKeyDown={onKeyDown}
       >
-        {VOLUMES.map((v, i) => (
-          <button
-            key={v.id}
-            type="button"
-            role="tab"
-            aria-selected={i === active}
-            aria-controls={panelId}
-            tabIndex={i === active ? 0 : -1}
-            onClick={() => setActive(i)}
-            className={clsx(
-              styles.tab,
-              styles[`accent_${v.accent}`],
-              i === active && styles.tabActive,
-            )}
-          >
-            {v.short}
-          </button>
-        ))}
+        <span
+          ref={indicatorRef}
+          className={styles.indicator}
+          aria-hidden="true"
+        />
+        {VOLUMES.map((v, i) => {
+          const Icon = v.icon;
+          return (
+            <button
+              key={v.n}
+              ref={(el) => {
+                btnRefs.current[i] = el;
+              }}
+              type="button"
+              role="tab"
+              aria-selected={i === active}
+              aria-controls={panelId}
+              tabIndex={i === active ? 0 : -1}
+              onClick={() => setActive(i)}
+              className={clsx(
+                styles.segBtn,
+                i === active && styles.segBtnActive,
+              )}
+            >
+              <span className={styles.segIco}>
+                <Icon size={20} />
+              </span>
+              <span className={styles.segTxt}>
+                <span className={styles.segKicker}>VOL. {v.n}</span>
+                <span className={styles.segName}>{v.label}</span>
+              </span>
+            </button>
+          );
+        })}
       </div>
+
       <div
         id={panelId}
         role="tabpanel"
         aria-label={current.label}
         className={styles.panel}
       >
-        <div key={active} className={styles.panelSlot}>
-          <div className={styles.list}>
-            {current.chapters.map((ch, i) => (
-              <Row key={ch.to} chapter={ch} index={i} />
-            ))}
-          </div>
-          {current.draft && (
-            <div className={styles.draftNote}>
-              Volume in stesura — nuovi capitoli in arrivo.
-            </div>
-          )}
+        <div key={active} className={styles.list}>
+          {current.chapters.map((ch, i) => {
+            const inner = (
+              <>
+                <span className={styles.num}>
+                  {String(i + 1).padStart(2, '0')}
+                </span>
+                <span className={styles.title}>{ch.title}</span>
+                <span className={styles.lessons}>
+                  {ch.lessons} {ch.lessons === 1 ? 'lezione' : 'lezioni'}
+                </span>
+                {ch.to && (
+                  <span className={styles.arrow}>
+                    <ArrowRight />
+                  </span>
+                )}
+              </>
+            );
+            // Freccia e hover solo sulle righe che portano davvero a una
+            // pagina; i capitoli pianificati restano voci statiche.
+            return ch.to ? (
+              <Link
+                key={ch.title}
+                to={ch.to}
+                className={clsx(styles.row, styles.rowLink)}
+              >
+                {inner}
+              </Link>
+            ) : (
+              <div key={ch.title} className={clsx(styles.row, styles.rowSoon)}>
+                {inner}
+              </div>
+            );
+          })}
         </div>
       </div>
+
+      <div className={clsx(styles.foot, !current.draft && styles.footHidden)}>
+        <span className={styles.footDot} aria-hidden="true" />
+        <span>Volume in stesura · nuovi capitoli in arrivo</span>
+      </div>
     </section>
   );
 }
diff --git a/src/components/ChapterIndex/styles.module.css b/src/components/ChapterIndex/styles.module.css
index 7e1c570..ef84bef 100644
--- a/src/components/ChapterIndex/styles.module.css
+++ b/src/components/ChapterIndex/styles.module.css
@@ -1,226 +1,362 @@
+/*
+ * Indice — segmented control con indicatore scorrevole + lista capitoli
+ * compatta. Adattato dal template Claude Design (hardcoded dark) ai token
+ * --at-* del sito, così funziona in entrambi i temi. L'accento del volume
+ * attivo (--vc) è impostato per-accent in fondo, con varianti light/dark.
+ */
+
 .wrap {
+  --vc: var(--at-accent);
   padding: 40px 32px 60px;
-  max-width: 780px;
+  max-width: 1140px;
   margin: 0 auto;
   position: relative;
   z-index: 1;
 }
 
+/* ── Header ─────────────────────────────────────────── */
 .head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  gap: 16px;
   margin-bottom: 24px;
 }
 
 .label {
-  font-size: 14px;
-  color: var(--at-muted);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  font-family: var(--font-mono-ui);
   margin: 0;
+  font-family: var(--font-mono-ui);
+  font-size: 13px;
   font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--at-muted);
 }
 
-.count {
-  font-size: 12px;
+.headVolume {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 19px;
+  color: var(--at-muted-soft);
+  text-align: right;
+  transition: color var(--dur-slow) var(--ease-smooth);
+}
+
+/* ── Segmented control ──────────────────────────────── */
+.seg {
+  position: relative;
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  background: var(--at-bg-subtle);
+  border: 1px solid var(--at-border);
+  border-radius: var(--radius-lg);
+}
+
+.indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-radius: var(--radius-sm);
+  background: color-mix(in oklab, var(--vc) 14%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--vc) 38%, transparent),
+    0 10px 26px -12px color-mix(in oklab, var(--vc) 70%, transparent);
+  pointer-events: none;
+  transition:
+    transform 0.46s var(--ease-spring),
+    width 0.46s var(--ease-spring),
+    height 0.46s var(--ease-spring),
+    background var(--dur-slow) var(--ease-smooth),
+    box-shadow var(--dur-slow) var(--ease-smooth);
+}
+.indicator.noAnim {
+  transition: none;
+}
+
+.segBtn {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 12px 16px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.segBtn:focus-visible {
+  outline: 2px solid var(--vc);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+.segBtn:active {
+  transform: scale(0.98);
+}
+
+.segIco {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--at-bg-chip);
+  border: 1px solid var(--at-border);
   color: var(--at-muted);
-  font-family: var(--font-mono-ui);
+  transition:
+    color var(--dur-slow) var(--ease-smooth),
+    background var(--dur-slow) var(--ease-smooth),
+    border-color var(--dur-slow) var(--ease-smooth);
 }
 
-.list {
+.segTxt {
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 1px;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 1px solid var(--at-border);
+  gap: 3px;
 }
 
-.row {
+.segKicker {
+  font-family: var(--font-mono-ui);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  color: var(--at-faint);
+  transition: color var(--dur-slow) var(--ease-smooth);
+}
+
+.segName {
+  font-family: var(--font-display);
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.005em;
+  color: var(--at-muted);
+  text-wrap: balance;
+  transition: color var(--dur-slow) var(--ease-smooth);
+}
+
+.segBtn:hover .segName,
+.segBtn:hover .segIco {
+  color: var(--at-muted-soft);
+}
+
+.segBtnActive .segIco {
+  color: var(--vc);
+  background: color-mix(in oklab, var(--vc) 16%, transparent);
+  border-color: color-mix(in oklab, var(--vc) 34%, transparent);
+}
+.segBtnActive .segKicker {
+  color: var(--vc);
+}
+.segBtnActive .segName {
+  color: var(--at-fg-strong);
+  font-weight: 600;
+}
+
+/* ── Lista capitoli compatta ────────────────────────── */
+.panel {
   position: relative;
+}
+
+.list {
+  margin-top: 20px;
+  border: 1px solid var(--at-border);
+  border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--at-bg-subtle);
-  padding: 16px 22px;
-  text-decoration: none;
-  color: inherit;
+  animation: index-list-in 280ms var(--ease-out) both;
+}
+
+@keyframes index-list-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 13px 22px;
   border-bottom: 1px solid var(--at-border);
+  transition: background var(--dur-normal) var(--ease-smooth);
 }
 .row:last-child {
   border-bottom: none;
 }
-.row:hover {
+
+/* Affordance (hover, freccia che scorre) solo sulle righe-link: le voci
+ * pianificate (.rowSoon) non portano da nessuna parte e non devono
+ * promettere un click. */
+.rowLink {
   text-decoration: none;
   color: inherit;
 }
-
-.row::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(
-    400px circle at var(--at-mx, 50%) var(--at-my, 50%),
-    var(--at-spot-bg),
-    transparent 40%
-  );
-  opacity: 0;
-  transition: opacity 0.3s;
-  pointer-events: none;
+.rowLink:hover {
+  text-decoration: none;
+  color: inherit;
+  background: color-mix(in oklab, var(--vc) 7%, transparent);
 }
-.row:hover::before {
-  opacity: 1;
+.rowLink:focus-visible {
+  outline: 2px solid var(--vc);
+  outline-offset: -2px;
 }
 
-.rowInner {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  position: relative;
-  z-index: 2;
+.rowSoon .title {
+  color: var(--at-muted);
 }
 
 .num {
-  font-size: 12px;
-  color: var(--at-muted);
-  min-width: 28px;
+  min-width: 22px;
   font-family: var(--font-mono-ui);
-  letter-spacing: 0.05em;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--at-faint);
+  transition: color var(--dur-normal) var(--ease-smooth);
+}
+.rowLink:hover .num {
+  color: var(--vc);
 }
 
 .title {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--at-fg-strong);
   flex: 1;
   font-family: var(--font-display);
-  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--at-fg-strong);
 }
 
-.sections {
+.lessons {
+  font-family: var(--font-mono-ui);
   font-size: 12px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
   color: var(--at-muted);
 }
 
 .arrow {
-  color: var(--at-faint);
   display: flex;
+  color: var(--at-faint);
+  transition:
+    transform var(--dur-normal) var(--ease-smooth),
+    color var(--dur-normal) var(--ease-smooth);
 }
-
-.tabs {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 18px;
-  overflow-x: auto;
-  scrollbar-width: none;
-  padding: 4px 2px 4px;
+.rowLink:hover .arrow {
+  transform: translateX(4px);
+  color: var(--vc);
 }
-.tabs::-webkit-scrollbar {
-  display: none;
+.arrowSvg {
+  display: block;
 }
 
-.tab {
-  position: relative;
-  flex-shrink: 0;
-  padding: 8px 14px;
-  border-radius: var(--radius-pill);
-  border: 1px solid var(--at-border);
-  background: var(--at-bg-subtle);
-  color: var(--at-muted);
-  font-family: var(--font-display);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    color 200ms var(--ease-smooth),
-    background 200ms var(--ease-smooth),
-    border-color 200ms var(--ease-smooth),
-    transform 200ms var(--ease-smooth);
-}
-
-.tab:hover {
-  color: var(--at-fg-strong);
-  transform: translateY(-1px);
+/* ── Footer (volume in stesura) ─────────────────────── */
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 24px;
+  font-family: var(--font-mono-ui);
+  font-size: 12px;
+  letter-spacing: 0.03em;
+  color: var(--at-faint);
 }
-
-.tab:active {
-  transform: scale(0.98);
-  transition-duration: var(--dur-fast);
+.footHidden {
+  display: none;
 }
 
-.tab:focus-visible {
-  outline: 2px solid var(--at-accent);
-  outline-offset: 2px;
+.footDot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+  background: var(--vc);
+  box-shadow: 0 0 9px var(--vc);
+  animation: index-pulse 2.4s var(--ease-smooth) infinite;
 }
 
-.tabActive {
-  color: var(--at-fg-strong);
-  border-color: var(--vol-accent, var(--at-accent));
-  box-shadow: 0 0 0 1px var(--vol-accent, var(--at-accent)) inset;
-  background: var(--at-bg);
+@keyframes index-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
+/* ── Accenti per volume (colori delle card a inizio pagina) ── */
 .accent_blue {
-  --vol-accent: #1d68e1;
+  --vc: #1d68e1;
 }
 .accent_pink {
-  --vol-accent: #d946a0;
+  --vc: #d946a0;
 }
 .accent_amber {
-  --vol-accent: #d97706;
+  --vc: #d97706;
 }
 .accent_green {
-  --vol-accent: #16a34a;
+  --vc: #16a34a;
 }
 
 html[data-theme='dark'] .accent_blue {
-  --vol-accent: #75a3ed;
+  --vc: #75a3ed;
 }
 html[data-theme='dark'] .accent_pink {
-  --vol-accent: #f0a8d4;
+  --vc: #f0a8d4;
 }
 html[data-theme='dark'] .accent_amber {
-  --vol-accent: #f5b860;
+  --vc: #f5b860;
 }
 html[data-theme='dark'] .accent_green {
-  --vol-accent: #6ed699;
-}
-
-.panel {
-  position: relative;
+  --vc: #6ed699;
 }
 
-.panelSlot {
-  animation: chapter-slot-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+/* ── Responsive: il segmented control va in 2×2 ─────── */
+@media (max-width: 760px) {
+  .wrap {
+    padding: 32px 18px 48px;
+  }
+  .seg {
+    flex-wrap: wrap;
+  }
+  .segBtn {
+    flex: 1 1 calc(50% - 3px);
+  }
+  .headVolume {
+    font-size: 16px;
+  }
 }
 
-@keyframes chapter-slot-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+@media (max-width: 460px) {
+  .segName {
+    font-size: 12.5px;
   }
-  to {
-    opacity: 1;
-    transform: none;
+  .row {
+    gap: 12px;
+    padding: 13px 16px;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .panelSlot {
-    animation: none;
-  }
-  .tab,
-  .tab:hover {
-    transform: none;
+  .indicator,
+  .list,
+  .arrow,
+  .footDot {
     transition: none;
+    animation: none;
   }
 }
-
-.draftNote {
-  margin-top: 14px;
-  text-align: center;
-  font-size: 13px;
-  color: var(--at-muted);
-  font-family: var(--font-mono-ui);
-  letter-spacing: 0.04em;
-}
diff --git a/src/components/VolumeIcons/index.tsx b/src/components/VolumeIcons/index.tsx
new file mode 100644
index 0000000..651d979
--- /dev/null
+++ b/src/components/VolumeIcons/index.tsx
@@ -0,0 +1,80 @@
+/*
+ * Icone dei quattro volumi: Font Awesome Pro 7.1.0 — stile duotone.
+ * Path primario `currentColor` + path secondario `opacity .4`, com'è nel
+ * sorgente FA. Il colore (e quindi i due livelli) deriva da `currentColor`:
+ * la VolumeCard lo imposta via `--vol-icon-color` per accent, il segmented
+ * control dell'indice lo imposta per accent dal CSS. viewBox originale di
+ * ciascuna icona.
+ *
+ * Sorgente UNICA: usate sia dalle VolumeCard della homepage (size 22) sia dal
+ * segmented control di <ChapterIndex> (size 20). Tenere i path qui evita che
+ * i due punti d'uso divergano a un futuro aggiornamento di Font Awesome.
+ */
+
+interface VolumeIconProps {
+  size?: number;
+}
+
+export function BracketsCurlyIcon({ size = 22 }: VolumeIconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 576 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M352 64c0 17.7 14.3 32 32 32l32 0c17.7 0 32 14.3 32 32l0 37.5c0 25.5 10.1 49.9 28.1 67.9l22.6 22.6-22.6 22.6c-18 18-28.1 42.4-28.1 67.9l0 37.5c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l32 0c53 0 96-43 96-96l0-37.5c0-8.5 3.4-16.6 9.4-22.6l45.3-45.3c12.5-12.5 12.5-32.8 0-45.3l-45.3-45.3c-6-6-9.4-14.1-9.4-22.6l0-37.5c0-53-43-96-96-96l-32 0c-17.7 0-32 14.3-32 32z"
+      />
+      <path
+        fill="currentColor"
+        d="M64 128c0-53 43-96 96-96l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0c-17.7 0-32 14.3-32 32l0 37.5c0 25.5-10.1 49.9-28.1 67.9L77.3 256 99.9 278.6c18 18 28.1 42.4 28.1 67.9l0 37.5c0 17.7 14.3 32 32 32l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0c-53 0-96-43-96-96l0-37.5c0-8.5-3.4-16.6-9.4-22.6L9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l45.3-45.3c6-6 9.4-14.1 9.4-22.6L64 128z"
+      />
+    </svg>
+  );
+}
+
+export function CompassDraftingIcon({ size = 22 }: VolumeIconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 512 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M31.2 276c-11.1-13.8-8.8-33.9 5-45s33.9-8.8 45 5c5.7 7.1 11.8 13.8 18.2 20.1L66.5 312.9C53.7 301.6 41.8 289.3 31.2 276zm124.1 89.9l32.7-56.4c21.5 6.8 44.3 10.5 68.1 10.5s46.6-3.7 68.1-10.5c33.7-10.7 63.9-29.2 88.6-53.4 6.5-6.3 12.6-13.1 18.2-20.1 11.1-13.8 31.2-16 45-5s16 31.2 5 45c-10.7 13.3-22.5 25.6-35.3 36.9-52.5 45.9-119.6 71.2-189.5 71.1-35.4 0-69.4-6.4-100.7-18.1z"
+      />
+      <path
+        fill="currentColor"
+        d="M343.2 136.2c5.6-12.2 8.8-25.8 8.8-40.2 0-53-43-96-96-96s-96 43-96 96c0 14.3 3.1 27.9 8.8 40.2L6.5 416.5C2.2 423.9 0 432.2 0 440.6L0 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l55.4-27.7c8.4-4.2 15.4-10.8 20.1-18.9L256 191.9 324.1 309.5c33.7-10.7 63.9-29.2 88.6-53.4L343.2 136.2zM224 96a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM356.7 365.9l56.6 97.8c4.7 8.1 11.7 14.7 20.1 18.9l55.4 27.7c5 2.5 10.9 2.2 15.6-.7s7.6-8.1 7.6-13.6l0-55.4c0-8.4-2.2-16.7-6.5-24.1l-60-103.7c-25.9 22.7-55.9 40.8-88.8 53z"
+      />
+    </svg>
+  );
+}
+
+export function DatabaseIcon({ size = 22 }: VolumeIconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 448 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M0 80l0 48c0 44.2 100.3 80 224 80s224-35.8 224-80l0-48C448 35.8 347.7 0 224 0S0 35.8 0 80zM0 205.8L0 288c0 44.2 100.3 80 224 80s224-35.8 224-80l0-82.2c-14.8 9.8-31.8 17.7-49.5 24-47 16.8-108.7 26.2-174.5 26.2S96.4 246.5 49.5 229.8c-17.6-6.3-34.7-14.2-49.5-24zm0 160L0 432c0 44.2 100.3 80 224 80s224-35.8 224-80l0-66.2c-14.8 9.8-31.8 17.7-49.5 24-47 16.8-108.7 26.2-174.5 26.2S96.4 406.5 49.5 389.8c-17.6-6.3-34.7-14.2-49.5-24z"
+      />
+      <path
+        fill="currentColor"
+        d="M0 205.8L0 128c0 44.2 100.3 80 224 80s224-35.8 224-80l0 77.8c-14.8 9.8-31.8 17.7-49.5 24-47 16.8-108.7 26.2-174.5 26.2S96.4 246.5 49.5 229.8c-17.6-6.3-34.7-14.2-49.5-24zm0 160L0 288c0 44.2 100.3 80 224 80s224-35.8 224-80l0 77.8c-14.8 9.8-31.8 17.7-49.5 24-47 16.8-108.7 26.2-174.5 26.2S96.4 406.5 49.5 389.8c-17.6-6.3-34.7-14.2-49.5-24z"
+      />
+    </svg>
+  );
+}
+
+export function BookOpenCoverIcon({ size = 22 }: VolumeIconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 576 512" aria-hidden="true">
+      <path
+        opacity=".4"
+        fill="currentColor"
+        d="M288 72l0 382c3.6 0 7.3-.6 10.8-1.9l38.6-13.8c41.5-14.8 85.1-22.4 129.2-22.4l61.5 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-61.5 0c-44 0-87.7 7.6-129.2 22.4L288 72z"
+      />
+      <path
+        fill="currentColor"
+        d="M238.6 54.4L288 72 288 454c-3.6 0-7.3-.6-10.8-1.9l-38.6-13.8C197.2 423.6 153.5 416 109.5 416L48 416c-26.5 0-48-21.5-48-48L0 80C0 53.5 21.5 32 48 32l61.5 0c44 0 87.7 7.6 129.2 22.4zM24 464l85.5 0c46.8 0 93.2 8 137.2 23.8l38.6 13.8c1.7 .6 3.6 .6 5.4 0l38.6-13.8c44-15.7 90.5-23.8 137.2-23.8l85.5 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-85.5 0c-41.3 0-82.2 7.1-121.1 21l-38.6 13.8c-12.2 4.3-25.5 4.3-37.7 0L230.6 533c-38.9-13.9-79.8-21-121.1-21L24 512c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+      />
+    </svg>
+  );
+}
diff --git a/src/lib/events.ts b/src/lib/events.ts
new file mode 100644
index 0000000..8edefd1
--- /dev/null
+++ b/src/lib/events.ts
@@ -0,0 +1,10 @@
+/**
+ * Eventi custom di window condivisi tra componenti disaccoppiati.
+ *
+ * Tenerli qui (non come stringhe letterali sparse) evita che un dispatcher e il
+ * suo listener divergano per un typo: una rinomina qui rompe in compilazione i
+ * punti d'uso, invece di trasformare il click in un no-op silenzioso.
+ */
+
+/** Apre la modale di ricerca da fuori la navbar (es. il box «Cerca» della home). */
+export const OPEN_SEARCH_EVENT = 'pdb:open-search';
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d1eed3e..2319df1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,88 +7,15 @@ import Heading from '@theme/Heading';
 import VolumeCard from '@site/src/components/VolumeCard';
 import BentoFeatures from '@site/src/components/BentoFeatures';
 import ChapterIndex from '@site/src/components/ChapterIndex';
+import {
+  BracketsCurlyIcon,
+  CompassDraftingIcon,
+  DatabaseIcon,
+  BookOpenCoverIcon,
+} from '@site/src/components/VolumeIcons';
 
 import styles from './index.module.css';
 
-function TerminalIcon() {
-  return (
-    <svg
-      width="22"
-      height="22"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <polyline points="4 17 10 11 4 5" />
-      <line x1="12" y1="19" x2="20" y2="19" />
-    </svg>
-  );
-}
-
-function BoxIcon() {
-  return (
-    <svg
-      width="22"
-      height="22"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-      <line x1="12" y1="22.08" x2="12" y2="12" />
-    </svg>
-  );
-}
-
-function DatabaseIcon() {
-  return (
-    <svg
-      width="22"
-      height="22"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <ellipse cx="12" cy="5" rx="9" ry="3" />
-      <path d="M3 5v6c0 1.66 4 3 9 3s9-1.34 9-3V5" />
-      <path d="M3 11v6c0 1.66 4 3 9 3s9-1.34 9-3v-6" />
-    </svg>
-  );
-}
-
-function FlaskIcon() {
-  return (
-    <svg
-      width="22"
-      height="22"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M9 3h6" />
-      <path d="M10 3v6L4.5 18.5A2 2 0 0 0 6.3 21.5h11.4a2 2 0 0 0 1.8-3L14 9V3" />
-      <path d="M7 14h10" />
-    </svg>
-  );
-}
-
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   const logoUrl = useBaseUrl('/img/logo.svg');
@@ -145,7 +72,7 @@ export default function Home(): JSX.Element {
               kicker="Volume 1"
               title="Manuale del Programmatore"
               desc="Fondamenti del linguaggio: dati, controllo di flusso, funzioni."
-              icon={<TerminalIcon />}
+              icon={<BracketsCurlyIcon />}
               accent="blue"
             />
             <VolumeCard
@@ -153,7 +80,7 @@ export default function Home(): JSX.Element {
               kicker="Volume 2"
               title="Manuale dell’Artefice"
               desc="Programmazione ad oggetti: classi, ereditarietà, design pattern."
-              icon={<BoxIcon />}
+              icon={<CompassDraftingIcon />}
               accent="pink"
             />
             <VolumeCard
@@ -169,7 +96,7 @@ export default function Home(): JSX.Element {
               kicker="Volume 4"
               title="Biblioteca dell’Apprendista"
               desc="Esercizi, sfide e progetti di laboratorio."
-              icon={<FlaskIcon />}
+              icon={<BookOpenCoverIcon />}
               accent="green"
             />
           </div>
diff --git a/src/theme/SearchBar/index.tsx b/src/theme/SearchBar/index.tsx
index e8dba65..b55f6f6 100644
--- a/src/theme/SearchBar/index.tsx
+++ b/src/theme/SearchBar/index.tsx
@@ -24,6 +24,7 @@ import React, {
 import { createPortal } from 'react-dom';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
+import { OPEN_SEARCH_EVENT } from '@site/src/lib/events';
 import { LensIcon, CircleXmarkIcon } from './icons';
 import styles from './styles.module.css';
 
@@ -385,6 +386,19 @@ export default function SearchBar(): ReactNode {
     return () => document.removeEventListener('keydown', onKey);
   }, []);
 
+  // Apertura programmatica da altrove nella pagina (es. il box «Cerca» della
+  // homepage). L'evento è dispatchato sincronamente nel gesto utente, così
+  // warm() e il primer della tastiera (iOS) restano dentro l'interazione.
+  useEffect(() => {
+    const onOpen = () => {
+      warm();
+      openKeyboardPrimer();
+      setOpen(true);
+    };
+    window.addEventListener(OPEN_SEARCH_EVENT, onOpen);
+    return () => window.removeEventListener(OPEN_SEARCH_EVENT, onOpen);
+  }, [warm]);
+
   return (
     <>
       <button