diff --git a/static/css/marketing.css b/static/css/marketing.css
index 5384713..246c823 100644
--- a/static/css/marketing.css
+++ b/static/css/marketing.css
@@ -49,6 +49,7 @@
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
     --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-emerald-700: oklch(50.8% 0.118 165.612);
@@ -75,6 +76,7 @@
     --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-violet-700: oklch(49.1% 0.27 292.581);
     --color-violet-900: oklch(38% 0.189 293.745);
+    --color-purple-300: oklch(82.7% 0.119 306.383);
     --color-purple-400: oklch(71.4% 0.203 305.504);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
@@ -141,6 +143,7 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-sm: 8px;
     --blur-xl: 24px;
+    --blur-3xl: 64px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
@@ -354,6 +357,9 @@
   .sticky {
     position: sticky;
   }
+  .-inset-8 {
+    inset: calc(var(--spacing) * -8);
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -369,9 +375,15 @@
   .end {
     inset-inline-end: var(--spacing);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .-top-3 {
     top: calc(var(--spacing) * -3);
   }
+  .-top-10 {
+    top: calc(var(--spacing) * -10);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -411,6 +423,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-6 {
+    right: calc(var(--spacing) * -6);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -438,6 +453,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-10 {
+    bottom: calc(var(--spacing) * -10);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -450,6 +468,9 @@
   .bottom-full {
     bottom: 100%;
   }
+  .-left-10 {
+    left: calc(var(--spacing) * -10);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -540,8 +561,8 @@
   .-mx-4 {
     margin-inline: calc(var(--spacing) * -4);
   }
-  .mx-2 {
-    margin-inline: calc(var(--spacing) * 2);
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
   }
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
@@ -627,6 +648,9 @@
   .mr-4 {
     margin-right: calc(var(--spacing) * 4);
   }
+  .-mb-\[0\.5rem\] {
+    margin-bottom: calc(0.5rem * -1);
+  }
   .-mb-px {
     margin-bottom: -1px;
   }
@@ -783,6 +807,9 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-72 {
+    height: calc(var(--spacing) * 72);
+  }
   .h-\[62px\] {
     height: 62px;
   }
@@ -795,6 +822,9 @@
   .h-\[450px\] {
     height: 450px;
   }
+  .h-\[460px\] {
+    height: 460px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -924,6 +954,9 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -1089,6 +1122,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-plus-breathe {
+    animation: plus-breathe 2s ease-in-out infinite;
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1157,6 +1193,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[180px_1fr_170px\] {
+    grid-template-columns: 180px 1fr 170px;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1220,6 +1259,9 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
   .gap-\[1\.5px\] {
     gap: 1.5px;
   }
@@ -1272,6 +1314,10 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-2 {
+    -moz-column-gap: calc(var(--spacing) * 2);
+         column-gap: calc(var(--spacing) * 2);
+  }
   .gap-x-3 {
     -moz-column-gap: calc(var(--spacing) * 3);
          column-gap: calc(var(--spacing) * 3);
@@ -1515,6 +1561,9 @@
       border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
     }
   }
+  .border-brand-b1 {
+    border-color: #0062ff;
+  }
   .border-brand-border {
     border-color: #e6ebf2;
   }
@@ -1584,6 +1633,12 @@
       border-color: color-mix(in oklab, var(--color-violet-400) 50%, transparent);
     }
   }
+  .border-white\/10 {
+    border-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .border-white\/20 {
     border-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1596,6 +1651,18 @@
       border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
     }
   }
+  .border-white\/\[0\.05\] {
+    border-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+  .border-white\/\[0\.06\] {
+    border-color: color-mix(in srgb, #fff 6%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 6%, transparent);
+    }
+  }
   .border-white\/\[0\.08\] {
     border-color: color-mix(in srgb, #fff 8%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1764,6 +1831,12 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-brand-b1\/10 {
+    background-color: color-mix(in oklab, #0062ff 10%, transparent);
+  }
+  .bg-brand-b1\/15 {
+    background-color: color-mix(in oklab, #0062ff 15%, transparent);
+  }
   .bg-brand-b3\/10 {
     background-color: color-mix(in oklab, #00c896 10%, transparent);
   }
@@ -1788,6 +1861,12 @@
   .bg-brand-navy2 {
     background-color: #0b1525;
   }
+  .bg-emerald-500\/20 {
+    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
+    }
+  }
   .bg-emerald-600 {
     background-color: var(--color-emerald-600);
   }
@@ -1920,6 +1999,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/10 {
+    background-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .bg-white\/20 {
     background-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1938,6 +2023,18 @@
       background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
     }
   }
+  .bg-white\/\[0\.03\] {
+    background-color: color-mix(in srgb, #fff 3%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
+    }
+  }
+  .bg-white\/\[0\.04\] {
+    background-color: color-mix(in srgb, #fff 4%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+    }
+  }
   .bg-white\/\[0\.05\] {
     background-color: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1950,6 +2047,12 @@
       background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
     }
   }
+  .bg-white\/\[0\.08\] {
+    background-color: color-mix(in srgb, #fff 8%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
+    }
+  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
@@ -2233,6 +2336,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2345,6 +2451,9 @@
   .text-\[11px\] {
     font-size: 11px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[15px\] {
     font-size: 15px;
   }
@@ -2420,6 +2529,10 @@
     --tw-tracking: 0.2em;
     letter-spacing: 0.2em;
   }
+  .tracking-\[0\.12em\] {
+    --tw-tracking: 0.12em;
+    letter-spacing: 0.12em;
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2520,6 +2633,9 @@
       color: color-mix(in oklab, var(--color-amber-900) 90%, transparent);
     }
   }
+  .text-blue-300 {
+    color: var(--color-blue-300);
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -2565,6 +2681,9 @@
   .text-brand-navy\/90 {
     color: color-mix(in oklab, #060d1a 90%, transparent);
   }
+  .text-emerald-300 {
+    color: var(--color-emerald-300);
+  }
   .text-emerald-500 {
     color: var(--color-emerald-500);
   }
@@ -2607,6 +2726,9 @@
   .text-orange-600 {
     color: var(--color-orange-600);
   }
+  .text-purple-300 {
+    color: var(--color-purple-300);
+  }
   .text-purple-500 {
     color: var(--color-purple-500);
   }
@@ -2616,6 +2738,9 @@
   .text-red-100 {
     color: var(--color-red-100);
   }
+  .text-red-300 {
+    color: var(--color-red-300);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -2688,6 +2813,12 @@
       color: color-mix(in oklab, var(--color-white) 80%, transparent);
     }
   }
+  .text-white\/90 {
+    color: color-mix(in srgb, #fff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -2741,6 +2872,20 @@
       color: var(--text-muted);
     }
   }
+  .placeholder-white\/40 {
+    &::-moz-placeholder {
+      color: color-mix(in srgb, #fff 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-white) 40%, transparent);
+      }
+    }
+    &::placeholder {
+      color: color-mix(in srgb, #fff 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-white) 40%, transparent);
+      }
+    }
+  }
   .accent-brand-b1 {
     accent-color: #0062ff;
   }
@@ -2810,6 +2955,12 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-black\/40 {
+    --tw-shadow-color: color-mix(in srgb, #000 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .ring-\[var\(--border-accent\)\] {
     --tw-ring-color: var(--border-accent);
   }
@@ -2837,6 +2988,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .blur-3xl {
+    --tw-blur: blur(var(--blur-3xl));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -3481,6 +3636,16 @@
       }
     }
   }
+  .hover\:bg-white\/\[0\.04\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 4%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-white\/\[0\.05\] {
     &:hover {
       @media (hover: hover) {
@@ -4520,6 +4685,11 @@
       margin-inline: calc(var(--spacing) * -8);
     }
   }
+  .lg\:mx-0 {
+    @media (width >= 64rem) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:block {
     @media (width >= 64rem) {
       display: block;
@@ -4596,16 +4766,31 @@
       grid-template-columns: 1fr 240px;
     }
   }
+  .lg\:grid-cols-\[1fr_minmax\(0\,560px\)\] {
+    @media (width >= 64rem) {
+      grid-template-columns: 1fr minmax(0,560px);
+    }
+  }
   .lg\:flex-row {
     @media (width >= 64rem) {
       flex-direction: row;
     }
   }
+  .lg\:justify-start {
+    @media (width >= 64rem) {
+      justify-content: flex-start;
+    }
+  }
   .lg\:gap-10 {
     @media (width >= 64rem) {
       gap: calc(var(--spacing) * 10);
     }
   }
+  .lg\:gap-16 {
+    @media (width >= 64rem) {
+      gap: calc(var(--spacing) * 16);
+    }
+  }
   .lg\:border-r {
     @media (width >= 64rem) {
       border-right-style: var(--tw-border-style);
@@ -4637,6 +4822,11 @@
       padding-bottom: calc(var(--spacing) * 8);
     }
   }
+  .lg\:text-left {
+    @media (width >= 64rem) {
+      text-align: left;
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -5484,6 +5674,14 @@
     transform: translateY(0);
   }
 }
+@keyframes plus-breathe {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
diff --git a/templates/marketing/landing.html b/templates/marketing/landing.html
index 93af585..dd75bfd 100644
--- a/templates/marketing/landing.html
+++ b/templates/marketing/landing.html
@@ -5,6 +5,33 @@
 
 {% block content %}
 {# ===== HERO ===== #}
+{# Local keyframes scoped to the hero — audio progress bar loops 50%→75%→50% over 15s #}
+<style>
+  @keyframes audio-progress {
+    0%, 100% { width: 50%; }
+    50%      { width: 75%; }
+  }
+  .hero-audio-progress { animation: audio-progress 15s ease-in-out infinite; }
+  .hero-audio-thumb    { animation: audio-progress 15s ease-in-out infinite; }
+  /* Mockup tilt + interactive hover — straightens on hover */
+  @media (min-width: 1024px) {
+    .hero-mockup-tilt { transform: rotate(1deg); transition: transform 500ms ease-out; }
+    .hero-mockup-tilt:hover { transform: rotate(0deg) scale(1.01); }
+  }
+  /* Glow orbs decorative float — uses tc-float-y from tailwind.config */
+  .hero-mockup-glow-a { animation: tc-float-y 6s ease-in-out infinite; }
+  .hero-mockup-glow-b { animation: tc-float-y 8s ease-in-out infinite reverse; }
+  /* Reduced-motion: freeze all hero mockup animations on first frame */
+  @media (prefers-reduced-motion: reduce) {
+    .hero-audio-progress, .hero-audio-thumb,
+    .hero-mockup-glow-a, .hero-mockup-glow-b {
+      animation: none !important;
+    }
+    .hero-audio-progress { width: 60% !important; }
+    .hero-audio-thumb    { left: 60% !important; }
+    .hero-mockup-tilt    { transform: none !important; transition: none !important; }
+  }
+</style>
 <section class="relative overflow-hidden bg-brand-navy text-white py-24 md:py-32" aria-labelledby="hero-title">
   {# Cosmic orbs background — 3 radial gradients (blue 16%, cyan 7%, green 11%) + subtle grid + horizontal accent line #}
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
@@ -26,76 +53,317 @@
   </div>
 
   <div class="relative max-w-[1200px] mx-auto px-6">
-    <div class="max-w-3xl mx-auto text-center">
-      {# Eyebrow with gradient text and 0.18em tracking #}
-      <p class="eyebrow grad-text mb-6 animate-tc-fade-in-up" style="animation-delay: 0ms; animation-fill-mode: backwards;">
-        TRANSCRIPTION IA · CONFORME LOI 25 · QUÉBEC
-      </p>
+    {# 2-col grid on lg+: text left, app mockup right. On <lg, mockup hidden, text centered as before. #}
+    <div class="grid lg:grid-cols-[1fr_minmax(0,560px)] gap-12 lg:gap-16 items-center">
+      {# ---------- COLUMN LEFT: hero copy ---------- #}
+      <div class="text-center lg:text-left max-w-3xl mx-auto lg:mx-0">
+        {# Eyebrow with gradient text and 0.18em tracking #}
+        <p class="eyebrow grad-text mb-6 animate-tc-fade-in-up" style="animation-delay: 0ms; animation-fill-mode: backwards;">
+          TRANSCRIPTION IA · CONFORME LOI 25 · QUÉBEC
+        </p>
 
-      {# H1 — clamp typography + grad-text accent on key phrase #}
-      <h1 id="hero-title" class="text-[clamp(2.5rem,4vw,4rem)] font-black leading-[1.05] mb-6 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
-        Transcrivez vos réunions
-        <span class="grad-text">sans risquer votre permis</span>.
-      </h1>
+        {# H1 — clamp typography + grad-text accent on key phrase #}
+        <h1 id="hero-title" class="text-[clamp(2.5rem,4vw,4rem)] font-black leading-[1.05] mb-6 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
+          Transcrivez vos réunions
+          <span class="grad-text">sans risquer votre permis</span>.
+        </h1>
 
-      {# Sub-headline — ≤25 words, value prop #}
-      <p class="text-lg text-white/70 max-w-2xl mx-auto mb-10 animate-tc-fade-in-up" style="animation-delay: 150ms; animation-fill-mode: backwards;">
-        DictIA convertit vos audio en texte, résumé et points d'action — 100% au Québec, conforme Barreau, CPA Québec, ChAD et 6 autres ordres professionnels.
-      </p>
+        {# Sub-headline — ≤25 words, value prop #}
+        <p class="text-lg text-white/70 max-w-xl mx-auto lg:mx-0 mb-10 animate-tc-fade-in-up" style="animation-delay: 150ms; animation-fill-mode: backwards;">
+          DictIA convertit vos audio en texte, résumé et points d'action — 100% au Québec, conforme Barreau, CPA Québec, ChAD et 6 autres ordres professionnels.
+        </p>
 
-      {# Dual CTA — primary (demo) + secondary ghost (pricing) #}
-      <div class="flex flex-col sm:flex-row gap-3 justify-center animate-tc-fade-in-up" style="animation-delay: 300ms; animation-fill-mode: backwards;">
-        {% from 'macros/button.html' import button %}
-        {{ button('Réserver une démo', href='/contact', variant='primary', size='lg') }}
-        {{ button('Voir les tarifs', href='/tarifs', variant='ghost', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>') }}
+        {# Dual CTA — primary (demo) + secondary ghost (pricing) #}
+        <div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start animate-tc-fade-in-up" style="animation-delay: 300ms; animation-fill-mode: backwards;">
+          {% from 'macros/button.html' import button %}
+          {{ button('Réserver une démo', href='/contact', variant='primary', size='lg') }}
+          {{ button('Voir les tarifs', href='/tarifs', variant='ghost', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>') }}
+        </div>
+
+        {# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
+        <p class="mt-8 text-sm text-white/70 flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
+          <span class="inline-flex items-center gap-1.5">
+            <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
+              <path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
+            </svg>
+            <span>Conçu avec 9 ordres professionnels québécois</span>
+          </span>
+          <span class="text-white/30">·</span>
+          <span>Pré-inscription ouverte</span>
+          <span class="text-white/30">·</span>
+          <span>Lancement printemps 2026</span>
+        </p>
       </div>
 
-      {# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
-      <p class="mt-8 text-sm text-white/70 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
-        <span class="inline-flex items-center gap-1.5">
-          <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
-            <path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
-          </svg>
-          <span>Conçu avec 9 ordres professionnels québécois</span>
-        </span>
-        <span class="mx-2 text-white/30">·</span>
-        <span>Pré-inscription ouverte</span>
-        <span class="mx-2 text-white/30">·</span>
-        <span>Lancement printemps 2026</span>
-      </p>
-    </div>
+      {# ---------- COLUMN RIGHT: app mockup (lg+ only) ---------- #}
+      <div class="hidden lg:block relative animate-tc-fade-in-up" style="animation-delay: 250ms; animation-fill-mode: backwards;">
+        {# Decorative glow orbs floating behind the mockup #}
+        <div class="absolute -inset-8 pointer-events-none" aria-hidden="true">
+          <div class="hero-mockup-glow-a absolute -top-10 -left-10 w-72 h-72 rounded-full bg-brand-b1/15 blur-3xl"></div>
+          <div class="hero-mockup-glow-b absolute -bottom-10 -right-6 w-64 h-64 rounded-full bg-brand-b3/10 blur-3xl"></div>
+        </div>
+
+        {# The mockup itself — role=img with descriptive label for screen readers #}
+        <div role="img"
+             aria-label="Aperçu de l'interface DictIA — liste d'enregistrements à gauche, transcription au centre, résumé IA à droite"
+             class="hero-mockup-tilt relative bg-brand-navy2 border border-white/[0.08] shadow-2xl shadow-black/40 rounded overflow-hidden">
+
+          {# A) Browser chrome / window header (h-8) #}
+          <div class="flex items-center px-3 h-8 border-b border-white/[0.06] bg-white/[0.03]" aria-hidden="true">
+            {# Traffic light dots #}
+            <div class="flex items-center gap-1.5">
+              <span class="block w-3 h-3 rounded-full" style="background:#ff5f57"></span>
+              <span class="block w-3 h-3 rounded-full" style="background:#febc2e"></span>
+              <span class="block w-3 h-3 rounded-full" style="background:#28c840"></span>
+            </div>
+            {# Centered tab label #}
+            <div class="flex-1 text-center text-[11px] font-medium text-white/60 tracking-tight">DictIA — Enquêter</div>
+            {# Expand icon #}
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 text-white/40">
+              <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+            </svg>
+          </div>
+
+          {# B) Main app area — 3 sub-columns (sidebar / center / summary), h-[460px] #}
+          <div class="grid grid-cols-[180px_1fr_170px] h-[460px]"
+               x-data="{ idx: 0 }"
+               x-init="$el.__hero_int = setInterval(() => { idx = (idx + 1) % 5 }, 2800)">
+
+            {# B1 — SIDEBAR (left) #}
+            <aside class="border-r border-white/[0.06] flex flex-col overflow-hidden">
+              {# Sidebar header — DictIA monogram + JD avatar #}
+              <div class="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.05]">
+                <span class="grad-text font-black text-[13px] tracking-tight">DictIA</span>
+                <span class="grad-bg rounded-full w-6 h-6 flex items-center justify-center text-[10px] font-bold text-white">JD</span>
+              </div>
+
+              {# New recording button — rounded-none brutalist #}
+              <div class="px-2 pt-2">
+                <button type="button" class="grad-bg w-full inline-flex items-center justify-center gap-1.5 py-2 text-[11px] font-semibold rounded-none" tabindex="-1" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M12 5v14M5 12h14"/></svg>
+                  <span>Nouvel Enregistrement</span>
+                </button>
+              </div>
+
+              {# Search input #}
+              <div class="px-2 pt-2">
+                <div class="relative">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-white/40"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+                  <div class="bg-white/[0.05] border border-white/[0.06] py-1.5 pl-7 pr-2 text-[10px] text-white/40 rounded-none">Rechercher…</div>
+                </div>
+              </div>
+
+              {# Sidebar list — scrollable area #}
+              <div class="flex-1 overflow-hidden mt-3 px-1">
+
+                {# Group: Semaine dernière #}
+                <p class="px-2 text-[9px] uppercase tracking-[0.12em] text-white/40 font-bold mb-1.5">Semaine dernière</p>
+
+                {# Item 1 — ACTIVE #}
+                <div class="px-2 py-2 mb-1 bg-white/[0.08] border-l-2 border-brand-b1">
+                  <p class="text-[11px] text-white font-semibold truncate">Dossier Beaumont — clauses 7 et 9</p>
+                  <p class="text-[9px] text-white/50 truncate mt-0.5">Jeu · Me Roy, Jean T., Marie C.</p>
+                  <span class="inline-block mt-1 rounded-full bg-blue-500/20 text-blue-300 text-[9px] px-2 py-0.5 font-medium">En cours</span>
+                </div>
+
+                {# Item 2 #}
+                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
+                  <p class="text-[11px] text-white/90 truncate">Succession Gagnon — répartition…</p>
+                  <p class="text-[9px] text-white/50 truncate mt-0.5">26 févr. · Me Gagnon, Client</p>
+                </div>
+
+                {# Group: Mois dernier #}
+                <p class="px-2 mt-3 text-[9px] uppercase tracking-[0.12em] text-white/40 font-bold mb-1.5">Mois dernier</p>
+
+                {# Item 3 #}
+                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
+                  <p class="text-[11px] text-white/90 truncate">Consultation Tremblay — litige loc…</p>
+                  <p class="text-[9px] text-white/50 truncate mt-0.5">19 févr. · Me Roy, Sophie T.</p>
+                </div>
+
+                {# Item 4 — Barreau Confidentiel #}
+                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
+                  <p class="text-[11px] text-white/90 truncate">Réunion constitutive INC Bédard…</p>
+                  <p class="text-[9px] text-white/50 truncate mt-0.5">10 févr. · Sophie B., Jean R.</p>
+                  <span class="inline-block mt-1 rounded-full bg-purple-500/20 text-purple-300 text-[9px] px-2 py-0.5 font-medium">Barreau Confidentiel</span>
+                </div>
+
+                {# Item 5 — CPA Corporatif #}
+                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
+                  <p class="text-[11px] text-white/90 truncate">Entretien RQAP et structure salariale</p>
+                  <p class="text-[9px] text-white/50 truncate mt-0.5">10 févr. · Me Roy, Allison, Robert</p>
+                  <span class="inline-block mt-1 rounded-full bg-emerald-500/20 text-emerald-300 text-[9px] px-2 py-0.5 font-medium">CPA Corporatif</span>
+                </div>
+
+                {# Item 6 — Urgent Client #}
+                <div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
+                  <p class="text-[11px] text-white/90 truncate">Révision contrat Côté &amp; Associés</p>
+                  <p class="text-[9px] text-white/50 truncate mt-0.5">5 févr. · Me Roy, Marie C.</p>
+                  <span class="inline-block mt-1 rounded-full bg-red-500/20 text-red-300 text-[9px] px-2 py-0.5 font-medium">Urgent Client</span>
+                </div>
+
+              </div>
+            </aside>
+
+            {# B2 — CENTER (audio + transcript) #}
+            <section class="flex flex-col p-3 overflow-hidden">
+
+              {# Header card #}
+              <div class="mb-3">
+                <h3 class="text-[13px] font-bold text-white">Dossier Beaumont — clauses 7 et 9</h3>
+                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-[10px] text-white/50">
+                  <span class="inline-flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                    <span>Me Roy, Jean T., Marie C.</span>
+                  </span>
+                  <span class="inline-flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+                    <span>27 févr. 2026</span>
+                  </span>
+                  <span class="inline-flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+                    <span>38:47</span>
+                  </span>
+                  <span class="inline-flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
+                    <span>28.3 MB</span>
+                  </span>
+                </div>
+              </div>
+
+              {# Audio player block #}
+              <div class="bg-white/[0.04] p-3 rounded-none">
+                {# Progress bar #}
+                <div class="relative h-1 bg-white/10">
+                  <div class="hero-audio-progress h-full grad-bg" style="width:60%"></div>
+                  <div class="hero-audio-thumb absolute -top-1 grad-bg w-3 h-3 rounded-full" style="left:60%; transform: translateX(-50%);"></div>
+                </div>
+                {# Time + speed + play row #}
+                <div class="flex items-center justify-between mt-2">
+                  <div class="text-[10px] font-mono text-white/60">
+                    <span class="text-white/80">28:17</span>
+                    <span class="text-white/30 mx-1">/</span>
+                    <span>46:23</span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <span class="text-[9px] text-white/60 px-1.5 py-0.5 bg-white/[0.06] rounded-full font-mono">1x</span>
+                    <button type="button" class="grad-bg w-8 h-8 rounded-full flex items-center justify-center animate-plus-breathe" tabindex="-1" aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="w-3 h-3"><path d="M8 5v14l11-7z"/></svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {# Transcript area — 5 lines, active line cycles via Alpine idx #}
+              <div class="flex-1 mt-3 overflow-hidden space-y-1.5">
+                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 0 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
+                  <p class="text-[10px]">
+                    <span class="text-brand-b1 font-bold">Allison</span>
+                    <span class="text-white/80 ml-1.5">Tu l'as su? Comment ça va, vous deux?</span>
+                  </p>
+                </div>
+                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 1 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
+                  <p class="text-[10px]">
+                    <span class="text-brand-b3 font-bold">SPEAKER_02</span>
+                    <span class="text-white/80 ml-1.5">Super bien, super vite, mais très bien.</span>
+                  </p>
+                </div>
+                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 2 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
+                  <p class="text-[10px]">
+                    <span class="text-brand-b1 font-bold">Allison</span>
+                    <span class="text-white/80 ml-1.5">Oui, oui. Je suis contente d'entendre ça.</span>
+                  </p>
+                </div>
+                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 3 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
+                  <p class="text-[10px]">
+                    <span class="text-brand-b3 font-bold">SPEAKER_02</span>
+                    <span class="text-white/80 ml-1.5">Moi, je l'ai vu quand vous l'avez payé.</span>
+                  </p>
+                </div>
+                <div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 4 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
+                  <p class="text-[10px]">
+                    <span class="text-brand-b1 font-bold">Allison</span>
+                    <span class="text-white/80 ml-1.5">J'étais comme, « Hein? »</span>
+                  </p>
+                </div>
+              </div>
+
+              {# Question input (disabled — visual only) #}
+              <div class="mt-3">
+                <input type="text" disabled tabindex="-1" aria-hidden="true"
+                       placeholder="Posez une question sur cette transcription…"
+                       class="w-full bg-white/[0.05] border border-white/10 px-3 py-2 text-[11px] text-white/40 placeholder-white/40 rounded-none">
+              </div>
+            </section>
+
+            {# B3 — RIGHT pane (summary) #}
+            <aside class="border-l border-white/[0.06] p-3 overflow-hidden">
+              {# Tabs #}
+              <div class="flex items-center gap-3 border-b border-white/[0.06] pb-2 mb-3">
+                <span class="text-[10px] uppercase tracking-[0.12em] text-brand-b1 font-bold border-b-2 border-brand-b1 pb-1 -mb-[0.5rem]">Résumé</span>
+                <span class="text-[10px] uppercase tracking-[0.12em] text-white/40 font-medium">Notes</span>
+                <span class="text-[10px] uppercase tracking-[0.12em] text-white/40 font-medium">Discuter</span>
+              </div>
+
+              {# Summary text #}
+              <p class="text-[10px] text-white/80 leading-relaxed">
+                Cette réunion aborde les complexités fiscales et juridiques liées à la création d'un nouveau produit nommé Dictéa…
+              </p>
+
+              {# Key points #}
+              <p class="mt-3 text-[9px] uppercase tracking-[0.12em] text-white/50 font-bold mb-1.5">Points clés</p>
+              <ul class="space-y-1 text-[10px] text-white/70 leading-snug">
+                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Structure de propriété : SNC + INC</span></li>
+                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>RQAP et Salaire : Allison ne peut pas se verser</span></li>
+                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Subventions : 4 ans à conserver</span></li>
+                <li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Exonération des gains personnels</span></li>
+              </ul>
+            </aside>
+
+          </div>{# /Main app area #}
+        </div>{# /mockup container #}
+      </div>{# /column right #}
+    </div>{# /grid #}
   </div>
 </section>
 
-{# ===== TRUST BAR ===== #}
+{# ===== TRUST BAR — 9 ordres pros ===== #}
 <section class="bg-white py-16 border-y border-brand-border" aria-labelledby="trust-bar-title">
   <div class="max-w-[1200px] mx-auto px-6">
-    <p id="trust-bar-title" class="eyebrow text-center text-brand-navy/60 mb-8">
-      MAPPÉ AUX 9 ORDRES PROFESSIONNELS QUÉBÉCOIS
-    </p>
-
-    {# 9 monogram placeholders — stylized, not official logos (licensing) #}
-    <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9 gap-6 items-center justify-items-center mb-16">
-      {% for ordre in [
-        ('Barreau du Québec', 'BAR'),
-        ('Chambre des notaires du Québec', 'CNQ'),
-        ('CPA Québec', 'CPA'),
-        ('ChAD — Chambre de l\'assurance de dommages', 'ChAD'),
-        ('OACIQ — Courtage immobilier', 'OACIQ'),
-        ('CMQ — Médecins', 'CMQ'),
-        ('OIIQ — Infirmières', 'OIIQ'),
-        ('OPQ — Pharmaciens', 'OPQ'),
-        ('OEQ — Ergothérapeutes', 'OEQ')
-      ] %}
-      <div class="flex flex-col items-center group" title="{{ ordre[0] }}">
-        <div class="w-12 h-12 rounded-full bg-brand-grad flex items-center justify-center font-black text-white text-sm shadow-cta opacity-50 group-hover:opacity-100 transition-opacity duration-300">
-          {{ ordre[1] }}
-        </div>
-        <p class="text-xs mt-2 text-brand-navy/70 group-hover:text-brand-navy transition-colors duration-300">{{ ordre[0] }}</p>
-      </div>
-      {% endfor %}
+    <div class="text-center max-w-xl mx-auto mb-10">
+      <p id="trust-bar-title" class="eyebrow text-brand-navy/70 mb-3">
+        Mappé aux 9&nbsp;ordres professionnels québécois
+      </p>
+      <p class="text-sm text-brand-navy/70">
+        L'architecture DictIA est conçue pour répondre aux exigences de confidentialité et d'audit des principaux ordres professionnels du Québec.
+      </p>
     </div>
 
+    {# 9 ordres — uniform card grid, official names, profession labels (no repeated acronyms) #}
+    <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-14" role="list">
+      {% for ordre in [
+        {'acronym': 'Barreau', 'name': 'Barreau du Québec',                              'profession': 'Avocats'},
+        {'acronym': 'CNQ',     'name': 'Chambre des notaires du Québec',                  'profession': 'Notaires'},
+        {'acronym': 'CPA',     'name': 'Ordre des CPA du Québec',                         'profession': 'Comptables'},
+        {'acronym': 'ChAD',    'name': "Chambre de l'assurance de dommages",              'profession': 'Assurance'},
+        {'acronym': 'OACIQ',   'name': "Organisme d'autoréglementation du courtage immobilier du Québec", 'profession': 'Courtage immobilier'},
+        {'acronym': 'CMQ',     'name': 'Collège des médecins du Québec',                  'profession': 'Médecins'},
+        {'acronym': 'OIIQ',    'name': 'Ordre des infirmières et infirmiers du Québec',   'profession': 'Infirmières'},
+        {'acronym': 'OPQ',     'name': 'Ordre des pharmaciens du Québec',                 'profession': 'Pharmaciens'},
+        {'acronym': 'OEQ',     'name': 'Ordre des ergothérapeutes du Québec',             'profession': 'Ergothérapeutes'}
+      ] %}
+      <li class="flex items-center gap-4 p-4 bg-white border border-brand-border rounded hover:border-brand-b1 transition-colors">
+        <span class="flex-shrink-0 w-14 h-14 flex items-center justify-center bg-brand-bg border border-brand-border" aria-hidden="true">
+          <span class="grad-text font-black text-sm tracking-tight">{{ ordre.acronym }}</span>
+        </span>
+        <span class="min-w-0 flex-1">
+          <span class="block text-sm font-semibold text-brand-navy leading-snug">{{ ordre.name | safe }}</span>
+          <span class="block text-xs uppercase tracking-wider text-brand-navy/60 mt-1">{{ ordre.profession }}</span>
+        </span>
+      </li>
+      {% endfor %}
+    </ul>
+
     {# 4 KPI metrics — defensible numbers with footnote attribution #}
     <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
       {% for kpi in [